Merge pull request #3896 from Goldziher/main

chore: updated handling of markdown headers
udecode · Dec 25, 2024 · a9bc5a9 · a9bc5a9
2 parents 5081e88 + 82c54ce
commit a9bc5a9
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 17 deletions.
diff --git a/packages/markdown/src/lib/MarkdownPlugin.ts b/packages/markdown/src/lib/MarkdownPlugin.ts
@@ -63,7 +63,7 @@ export const MarkdownPlugin = createTSlatePlugin<MarkdownConfig>({
   .extend(({ api }) => ({
     parser: {
       deserialize: ({ data }) => api.markdown.deserialize(data),
-      format: 'text/plain',
+      format: 'text/markdown',
       query: ({ data, dataTransfer }) => {
         const htmlData = dataTransfer.getData('text/html');
 

diff --git a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx
@@ -341,11 +341,29 @@ describe('deserializeMd', () => {
     expect(deserializeMd(editor, input)).toEqual(output);
   });
 
-  it('should deserialize headings', () => {
-    const input = Array.from(
-      { length: 6 },
-      (_, i) => `${'#'.repeat(i + 1)} Heading ${i + 1}`
-    ).join('\n\n');
+  it('should deserialize line break tags', () => {
+    const input = 'Line 1<br>Line 2';
+
+    const output = (
+      <fragment>
+        <hp>
+          <htext>Line 1</htext>
+          <htext>{'\n'}</htext>
+          <htext>Line 2</htext>
+        </hp>
+      </fragment>
+    );
+
+    expect(deserializeMd(editor, input)).toEqual(output);
+  });
+
+  it('should deserialize all heading levels (h1-h6)', () => {
+    const input = `# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6`;
 
     const output = (
       <fragment>
@@ -361,16 +379,54 @@ describe('deserializeMd', () => {
     expect(deserializeMd(editor, input)).toEqual(output);
   });
 
-  it('should deserialize line break tags', () => {
-    const input = 'Line 1<br>Line 2';
+  it('should handle headings with multiple spaces', () => {
+    const input = `#  Heading 1  
+##    Heading 2    
+###      Heading 3      `;
 
     const output = (
       <fragment>
-        <hp>
-          <htext>Line 1</htext>
-          <htext>{'\n'}</htext>
-          <htext>Line 2</htext>
-        </hp>
+        <hh1>Heading 1</hh1>
+        <hh2>Heading 2</hh2>
+        <hh3>Heading 3</hh3>
+      </fragment>
+    );
+
+    expect(deserializeMd(editor, input)).toEqual(output);
+  });
+
+  it('should handle more than 6 hashes as h6', () => {
+    const input = `####### Should be h6`;
+
+    const output = (
+      <fragment>
+        <hh6>Should be h6</hh6>
+      </fragment>
+    );
+
+    expect(deserializeMd(editor, input)).toEqual(output);
+  });
+
+  it('should handle headings with no space after hash', () => {
+    const input = `#No space`;
+
+    const output = (
+      <fragment>
+        <hp>#No space</hp>
+      </fragment>
+    );
+
+    expect(deserializeMd(editor, input)).toEqual(output);
+  });
+
+  it('should handle escaped hashes', () => {
+    const input = `\\# Not a heading
+\\## Also not a heading`;
+
+    const output = (
+      <fragment>
+        <hp># Not a heading</hp>
+        <hp>## Also not a heading</hp>
       </fragment>
     );
 

diff --git a/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts b/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts
@@ -39,18 +39,22 @@ export const remarkDefaultElementRules: RemarkElementRules = {
   },
   heading: {
     transform: (node, options) => {
+      const depth = Math.max(1, Math.min(6, node.depth ?? 1));
+
       const headingType = {
         1: 'h1',
         2: 'h2',
         3: 'h3',
         4: 'h4',
         5: 'h5',
         6: 'h6',
-      }[node.depth ?? 1];
+      }[depth];
+
+      const type = options.editor.getType({ key: headingType ?? 'h3' });
 
       return {
         children: remarkTransformElementChildren(node, options),
-        type: options.editor.getType({ key: headingType }),
+        type: type,
       };
     },
   },

diff --git a/packages/markdown/src/lib/remark-slate/remarkTransformElementChildren.ts b/packages/markdown/src/lib/remark-slate/remarkTransformElementChildren.ts
@@ -8,9 +8,9 @@ export const remarkTransformElementChildren = (
   node: MdastNode,
   options: RemarkPluginOptions
 ): TDescendant[] => {
-  const { children } = node;
+  const { children = [] } = node;
 
-  if (!children || children.length === 0) {
+  if (children.length === 0) {
     return [{ text: '' }];
   }