Fix spoiler summary inline formatting (aeharding#1546)

For example, bold/italic text in spoiler summary now works (used by lemmy.world media bias bot).

Also refactored internal spoiler syntax tree.

package.json

@@ -31,7 +31,7 @@
     }
   },
   "dependencies": {
-    "@aeharding/remark-lemmy-spoiler": "^1.0.1",
+    "@aeharding/remark-lemmy-spoiler": "^2.0.0",
     "@capacitor-community/app-icon": "^5.0.0",
     "@capacitor/android": "^6.1.0",
     "@capacitor/app": "^6.0.0",
@@ -73,7 +73,6 @@
     "mdast-util-gfm-autolink-literal-lemmy": "^3.0.0",
     "mdast-util-gfm-strikethrough": "^2.0.0",
     "mdast-util-gfm-table": "^2.0.0",
-    "mdast-util-lemmy-spoiler": "^1.0.0",
     "micromark": "^4.0.0",
     "micromark-extension-gfm-strikethrough": "^2.1.0",
     "micromark-extension-gfm-table": "^2.1.0",
@@ -146,6 +145,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "globals": "^15.8.0",
     "jsdom": "^24.1.0",
+    "mdast-util-lemmy-spoiler": "^2.0.0",
     "prettier": "^3.3.2",
     "pwa-asset-generator": "^6.3.1",
     "release-it": "^17.4.1",

src/features/comment/CommentLinks.tsx

@@ -48,9 +48,9 @@ export default function CommentLinks({ markdown }: CommentLinksProps) {
 
     let links: LinkData[] = [];
 
-    visit(mdastTree, ["spoiler", "link", "image"], (node) => {
+    visit(mdastTree, ["details", "link", "image"], (node) => {
       // don't show links within spoilers
-      if (node.type === "spoiler") return SKIP;
+      if (node.type === "details") return SKIP;
 
       if (node.type === "link" || (!showCommentImages && node.type === "image"))
         links.push({

src/features/shared/markdown/InlineMarkdown.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import ReactMarkdown from "react-markdown";
 import spoiler from "@aeharding/remark-lemmy-spoiler";
 import superSub from "remark-supersub-lemmy";
-import { spoilerSummaryOnlyRehype } from "./spoilerRehype";
+import inlinifySpoiler from "./components/spoiler/inlinifySpoiler";
 
 interface InlineMarkdownProps {
   children: string;
@@ -49,7 +49,7 @@ export default function InlineMarkdown({ children }: InlineMarkdownProps) {
           sub: "sub",
           sup: "sup",
         }}
-        remarkPlugins={[superSub, spoiler, spoilerSummaryOnlyRehype]}
+        remarkPlugins={[superSub, spoiler, inlinifySpoiler]}
       >
         {children}
       </ReactMarkdown>

src/features/shared/markdown/Markdown.tsx

@@ -10,7 +10,6 @@ import Table from "./components/Table";
 import spoiler from "@aeharding/remark-lemmy-spoiler";
 import Summary from "./components/spoiler/Summary";
 import Details from "./components/spoiler/Details";
-import spoilerRehype from "./spoilerRehype";
 import { useMemo } from "react";
 import rehypeHighlight from "rehype-highlight";
 
@@ -128,12 +127,7 @@ export default function Markdown({
         [disableInternalLinkRouting, id, props.components],
       )}
       remarkPlugins={useMemo(
-        () => [
-          [customRemarkGfm, { connectedInstance }],
-          superSub,
-          spoiler,
-          spoilerRehype,
-        ],
+        () => [[customRemarkGfm, { connectedInstance }], superSub, spoiler],
         [connectedInstance],
       )}
       rehypePlugins={rehypePlugins}

src/features/shared/markdown/components/spoiler/Details.tsx

@@ -28,6 +28,11 @@ const HeaderItem = styled(IonItem)`
 
   --background: none;
   --background-hover: none;
+
+  strong {
+    // Differentiate from already bold title in header
+    font-weight: 900;
+  }
 `;
 
 const StyledIonAccordion = styled(IonAccordion)`
@@ -91,7 +96,7 @@ export default function Details({ children, node, id }: DetailsProps) {
       <StyledIonAccordionGroup ref={accordionGroupRef} onIonChange={onChange}>
         <StyledIonAccordion value="open">
           <HeaderItem slot="header" onClick={(e) => e.stopPropagation()}>
-            {label}
+            <div>{label}</div>
           </HeaderItem>
           <div slot="content" className="collapse-md-margins">
             {children}

src/features/shared/markdown/components/spoiler/inlinifySpoiler.ts

@@ -0,0 +1,19 @@
+/// <reference types="mdast-util-lemmy-spoiler" />
+
+import { visit } from "unist-util-visit";
+import { Root } from "mdast";
+
+/**
+ * Transform spoiler tree node to details/summary rehype html nodes
+ */
+export default function inlinifySpoiler() {
+  return function (tree: Root) {
+    visit(tree, "summary", function (node, _, parent) {
+      if (!parent) return;
+      if (parent.type !== "details") return;
+
+      parent.data = { hName: "p" };
+      parent.children = node.children;
+    });
+  };
+}

vite.config.ts

@@ -77,6 +77,6 @@ export default defineConfig({
     setupFiles: "./src/setupTests.ts",
   },
   optimizeDeps: {
-    exclude: ["mdast-util-gfm-autolink-literal-lemmy"],
+    exclude: ["mdast-util-gfm-autolink-literal-lemmy", "remark-lemmy-spoiler"],
   },
 });