Merge pull request #3998 from udecode/fix/md

Fix: serialize markdown

Author: felixfeng33

.changeset/fifty-hats-obey.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-markdown': patch
+---
+
+Fix serialize code-block and indent-list. Add support for equation and inline-equation.

packages/markdown/src/lib/serializer/defaultSerializeMdNodesOptions.ts

@@ -25,7 +25,16 @@ export const defaultSerializeMdNodesOptions: SerializeMdOptions['nodes'] = {
   code_block: {
     type: 'code_block',
     serialize: (children, node) =>
-      `\n\`\`\`${node.language || ''}\n${children}\n\`\`\`\n`,
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
+      `\n\`\`\`${node.lang || ''}\n${children}\`\`\`\n`,
+  },
+  code_line: {
+    type: 'code_line',
+    serialize: (children) => `${children}\n`,
+  },
+  equation: {
+    type: 'equation',
+    serialize: (children, node) => `$$\n${node.texExpression}\n$$`,
   },
   h1: { type: 'h1', serialize: (children) => `\n# ${children}\n` },
   h2: { type: 'h2', serialize: (children) => `\n## ${children}\n` },
@@ -52,6 +61,10 @@ export const defaultSerializeMdNodesOptions: SerializeMdOptions['nodes'] = {
       return `\n![${caption}](${node.url || ''})\n`;
     },
   },
+  inline_equation: {
+    type: 'inline_equation',
+    serialize: (children, node) => `$${node.texExpression}$`,
+  },
   italic: { isLeaf: true, type: 'italic' },
   li: {
     type: 'li',
@@ -90,9 +103,15 @@ export const defaultSerializeMdNodesOptions: SerializeMdOptions['nodes'] = {
   },
   p: {
     type: 'p',
-    serialize: (children, node, { ulListStyleTypes = [] }) => {
+    serialize: (children, node, { nodes, ulListStyleTypes = [] }) => {
       const listStyleType = node.listStyleType;
 
+      const isInTableCell =
+        node.parent?.type === nodes.td.type ||
+        node.parent?.type === nodes.th.type;
+
+      const breakTag = isInTableCell ? `<br />` : `\n`;
+
       if (listStyleType) {
         let pre = '';
 
@@ -104,22 +123,69 @@ export const defaultSerializeMdNodesOptions: SerializeMdOptions['nodes'] = {
         const listStart = node.listStart ?? 1;
 
         const isOL = !ulListStyleTypes.includes(listStyleType);
-        const treatAsLeaf =
-          node.children.length === 1 && isLeafNode(node.children[0]);
 
         // https://github.com/remarkjs/remark-react/issues/65
         if (isOL && listDepth > 0) {
           pre += ' ';
         }
 
         // TODO: support all styles
-        return `${pre}${isOL ? listStart + '.' : '-'} ${children}${treatAsLeaf ? '\n' : ''}`;
+        return `${pre}${isOL ? listStart + '.' : '-'} ${children}${breakTag}`;
       }
 
-      return `\n${children}\n`;
+      const pre = isInTableCell ? '' : '\n';
+
+      return `${pre}${children}${breakTag}`;
     },
   },
   strikethrough: { isLeaf: true, type: 'strikethrough' },
+  table: {
+    type: 'table',
+    serialize: (children) => {
+      const lines = children.split('\n').filter(Boolean);
+
+      // Line 0 is the header row
+      const headerLine = lines[0].trim();
+
+      // Remove extra "|" from both sides
+      let lineTrimmed = headerLine;
+
+      if (lineTrimmed.startsWith('|')) {
+        lineTrimmed = lineTrimmed.slice(1);
+      }
+      if (lineTrimmed.endsWith('|')) {
+        lineTrimmed = lineTrimmed.slice(0, -1);
+      }
+
+      // Generate "---" separators based on number of columns
+      const cols = lineTrimmed.split('|').length;
+      const separator = `| ${Array(cols).fill('---').join(' | ')} |`;
+
+      // Insert separator line into array
+      lines.splice(1, 0, separator);
+
+      // Join back into string
+      return lines.join('\n');
+    },
+  },
+  td: {
+    type: 'td',
+    serialize: (children) => {
+      return `| ${children}`;
+    },
+  },
+  th: {
+    type: 'th',
+    serialize: (children) => {
+      return `| ${children}`;
+    },
+  },
+  tr: {
+    type: 'tr',
+    serialize: (children) => {
+      return `${children} |\n`;
+    },
+  },
   ul: {
     type: 'ul',
     serialize: (children, _, { listDepth }) => {

packages/markdown/src/lib/serializer/serializeMdNode.ts

@@ -201,8 +201,17 @@ export function serializeMdNode(
     type = nodes.p.type!;
     children = opts.breakTag;
   }
-  // Skip nodes that are empty, not a list and not void.
-  if (children === '' && !node.parent?.isList && !elOptions?.isVoid) {
+
+  // Skip nodes that are empty, not a list not in a table cell and not void .
+  const isInTableCell =
+    node.parent?.type === nodes.td.type || node.parent?.type === nodes.th.type;
+
+  if (
+    children === '' &&
+    !node.parent?.isList &&
+    !elOptions?.isVoid &&
+    !isInTableCell
+  ) {
     return;
   }
   if (isLeafNode(node)) {

packages/markdown/src/lib/serializer/types.ts

@@ -22,6 +22,8 @@ export type MdNodeTypes = {
   bold: string;
   code: string;
   code_block: string;
+  code_line: string;
+  equation: string;
   h1: string;
   h2: string;
   h3: string;
@@ -30,11 +32,16 @@ export type MdNodeTypes = {
   h6: string;
   hr: string;
   img: string;
+  inline_equation: string;
   italic: string;
   li: string;
   ol: string;
   p: string;
   strikethrough: string;
+  table: string;
+  td: string;
+  th: string;
+  tr: string;
   ul: string;
   underline: string;
 };