From 8706268f46cef5fb46d10cf7f933a6635feab371 Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <qznebula@protonmail.com>
Date: Mon, 31 Jul 2023 19:05:19 -0300
Subject: content: transformContent: extract own-line images from <p>
---
src/content/dependencies/transformContent.js | 12 +++++++++++-
tap-snapshots/test/snapshot/transformContent.js.test.cjs | 6 +++---
2 files changed, 14 insertions(+), 4 deletions(-)
diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index 718b7d14..ffc51922 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -461,7 +461,17 @@ export default {
// Expand line breaks which are at the end of a quote.
.replace(/(?<=^>.*)\n+(?!^>)/gm, '\n\n');
- return marked.parse(markedInput, markedOptions);
+ const markedOutput =
+ marked.parse(markedInput, markedOptions)
+ // Images that were all on their own line need to be removed from
+ // the surrounding <p> tag that marked generates. The HTML parser
+ // treats a <div> that starts inside a <p> as a Crocker-class
+ // misgiving, and will treat you very badly if you feed it that.
+ .replace(
+ /^<p>(<a class="[^"]*?image-link.*?<\/a>)<\/p>$/gm,
+ (match, a) => a);
+
+ return markedOutput;
}
if (slots.mode === 'multiline') {
diff --git a/tap-snapshots/test/snapshot/transformContent.js.test.cjs b/tap-snapshots/test/snapshot/transformContent.js.test.cjs
index a59f8b5d..44535ec0 100644
--- a/tap-snapshots/test/snapshot/transformContent.js.test.cjs
+++ b/tap-snapshots/test/snapshot/transformContent.js.test.cjs
@@ -23,18 +23,18 @@ exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > lin
`
exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > non-inline image #1 1`] = `
-<p><a class="box image-link" href="spark.png"><div class="image-container"><div class="image-inner-area"><img src="spark.png"></div></div></a></p>
+<a class="box image-link content-image" href="spark.png"><div class="image-container"><div class="image-inner-area"><img src="spark.png"></div></div></a>
`
exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > non-inline image #2 1`] = `
<p>Rad.</p>
-<p><a class="box image-link" href="spark.png"><div class="image-container"><div class="image-inner-area"><img src="spark.png"></div></div></a></p>
+<a class="box image-link content-image" href="spark.png"><div class="image-container"><div class="image-inner-area"><img src="spark.png"></div></div></a>
`
exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > non-inline image #3 1`] = `
-<p><a class="box image-link" href="spark.png"><div class="image-container"><div class="image-inner-area"><img src="spark.png"></div></div></a></p>
+<a class="box image-link content-image" href="spark.png"><div class="image-container"><div class="image-inner-area"><img src="spark.png"></div></div></a>
<p>Baller.</p>
`
--
cgit 1.3.0-6-gf8a5