« get me outta code hell

content: transformContent: extract own-line images from <p> - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2023-07-31 19:05:19 -0300
committer(quasar) nebula <qznebula@protonmail.com>2023-07-31 19:05:19 -0300
commit8706268f46cef5fb46d10cf7f933a6635feab371 (patch)
treeccee5e1b587a351941fb62252f55723005807a60
parentc977b07f5360246ca89837824fcbf0bac38d60d3 (diff)
content: transformContent: extract own-line images from <p>
-rw-r--r--src/content/dependencies/transformContent.js12
-rw-r--r--tap-snapshots/test/snapshot/transformContent.js.test.cjs6
2 files changed, 14 insertions, 4 deletions
diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index 718b7d1..ffc5192 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 a59f8b5..44535ec 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>
 
 `