feat(markdown-serializer): serialize code_block nodes to use fences b…

…y default fixes #168
StackExchange · Jul 25, 2022 · 124e993 · 124e993
1 parent e69def9
commit 124e993
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 11 deletions.
diff --git a/src/shared/markdown-parser.ts b/src/shared/markdown-parser.ts
@@ -62,7 +62,18 @@ const customMarkdownParserTokens: MarkdownParser["tokens"] = {
 
     code_block: {
         block: "code_block",
-        getAttrs: (tok: Token) => ({ params: tok.info || "" }),
+        noCloseToken: true,
+        getAttrs: (tok: Token) => ({
+            params: tok.info || "",
+            markup: tok.markup || "indented",
+        }),
+    },
+    fence: {
+        block: "code_block",
+        getAttrs: (tok: Token) => ({
+            params: tok.info || "",
+        }),
+        noCloseToken: true,
     },
 
     // add support for the strike mark
@@ -158,11 +169,10 @@ Object.keys(customMarkdownParserTokens).forEach((k) => {
                 return attrs;
             };
         } else {
-            token.getAttrs = (tok: Token, stream, index) => {
-                const attrs = { ...origGetAttrs(tok, stream, index) };
-                attrs.markup = tok.markup;
-                return attrs;
-            };
+            token.getAttrs = (tok: Token, stream, index) => ({
+                markup: tok.markup,
+                ...origGetAttrs(tok, stream, index),
+            });
         }
 
         return;

diff --git a/src/shared/markdown-serializer.ts b/src/shared/markdown-serializer.ts
@@ -183,10 +183,10 @@ const defaultMarkdownSerializerNodes: MarkdownSerializerNodes = {
     },
     code_block(state, node) {
         // TODO could be html...
-        const markup = node.attrs.markup as string;
+        const markup = (node.attrs.markup as string) || "```";
 
-        // lack of a markup indicator means this is an indented code block
-        if (!markup) {
+        // indented code blocks have their markup set to "indented" instead of empty
+        if (markup === "indented") {
             const lines = node.textContent.split("\n");
             lines.forEach((l, i) => {
                 if (i > 0) {

diff --git a/test/shared/markdown-parser.test.ts b/test/shared/markdown-parser.test.ts
@@ -414,4 +414,29 @@ console.log("test");
             });
         });
     });
+
+    describe("code blocks", () => {
+        it.each([
+            ["    indented code", { markup: "indented", params: "" }],
+            ["```\nfence 1\n```", { markup: "```", params: "" }],
+            ["~~~\nfence 2\n~~~", { markup: "~~~", params: "" }],
+            ["```js\nfence with lang\n```", { markup: "```", params: "js" }],
+        ])(
+            "should parse indented code and code fences (%#)",
+            (input, attrs) => {
+                const doc = markdownParser.parse(input);
+
+                expect(doc).toMatchNodeTree({
+                    "type.name": "doc",
+                    "content": [
+                        {
+                            "type.name": "code_block",
+                            "attrs.markup": attrs.markup,
+                            "attrs.params": attrs.params,
+                        },
+                    ],
+                });
+            }
+        );
+    });
 });
diff --git a/test/shared/markdown-serializer.test.ts b/test/shared/markdown-serializer.test.ts
@@ -46,7 +46,7 @@ describe("markdown-serializer", () => {
         /* Nodes */
         [`plain text`, `plain text`],
         [`<blockquote><p>test</p></blockquote>`, `> test`],
-        [`<pre><code>test</code></pre>`, "    test"],
+        [`<pre><code>test</code></pre>`, "```\ntest\n```"],
         [`<h1>test</h1>`, `# test`],
         [`<h2>test</h2>`, `## test`],
         [`<h3>test</h2>`, `### test`],
@@ -224,7 +224,7 @@ describe("markdown-serializer", () => {
             <pre class="hljs"><code>code in list</code></pre>
             </li>
             </ul>`,
-            `-     code in list`,
+            "- ```\n  code in list\n  ```",
         ],
         [
             `<ul>