From c7a030e31590f558b63685040df55a8d9d6a79bb Mon Sep 17 00:00:00 2001
From: zbeyens <zbeyens@udecode.dev>
Date: Fri, 15 Nov 2024 03:31:40 +0100
Subject: [PATCH] fix

---
 .changeset/lazy-waves-itch.md                 |   5 +
 .../deserializer/utils/deserializeMd.spec.tsx | 123 ++++++------------
 .../remark-slate/remarkDefaultElementRules.ts |  27 ++--
 3 files changed, 60 insertions(+), 95 deletions(-)
 create mode 100644 .changeset/lazy-waves-itch.md

diff --git a/.changeset/lazy-waves-itch.md b/.changeset/lazy-waves-itch.md
new file mode 100644
index 0000000000..0127eaa2cc
--- /dev/null
+++ b/.changeset/lazy-waves-itch.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-markdown': patch
+---
+
+Support deserializing tables
diff --git a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx
index b2a07aaf72..bcab8f144f 100644
--- a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx
+++ b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx
@@ -553,6 +553,7 @@ describe('deserializeMdIndentList', () => {
 
     expect(deserializeMd(editor, input)).toEqual(output);
   });
+
   it('should deserialize a table', () => {
     const input = `
 | Left columns  | Right columns |
@@ -562,91 +563,45 @@ describe('deserializeMdIndentList', () => {
 | left baz      | right baz     |
 `;
 
-    const output = [
-      {
-        type: 'table',
-        children: [
-          {
-            type: 'tr',
-            children: [
-              {
-                type: 'td',
-                children: [{ 
-                  type: 'p',
-                  children: [{ text: 'Left columns' }],
-                 }],
-              },
-              {
-                type: 'td',
-                children: [{ 
-                  type: 'p',
-                  children: [{ text: 'Right columns' }],
-                 }],
-              },
-            ],
-          },
-          {
-            type: 'tr',
-            children: [
-              {
-                type: 'td',
-                children: [{
-                  type: 'p',
-                  children: [{ text: 'left foo' }],
-                }],
-              },
-              {
-                type: 'td',
-                children: [{
-                  type: 'p',
-                  children: [{ text: 'right foo' }],
-                }],
-              },
-            ],
-          },
-          {
-            type: 'tr',
-            children: [
-              {
-                type: 'td',
-                children: [{
-                  type: 'p',
-                  children: [{ text: 'left bar' }],
-                }],
-              },
-              {
-                type: 'td',
-                children: [{
-                  type: 'p',
-                  children: [{ text: 'right bar' }],
-                }],
-              },
-            ],
-          },
-          {
-            type: 'tr',
-            children: [
-              {
-                type: 'td',
-                children: [{
-                  type: 'p',
-                  children: [{ text: 'left baz' }],
-                }],
-              },
-              {
-                type: 'td',
-                children: [{
-                  type: 'p',
-                  children: [{ text: 'right baz' }],
-                }],
-              },
-            ],
-          },
-        ],
-      }
-    ]
+    const output = (
+      <fragment>
+        <htable>
+          <htr>
+            <hth>
+              <hp>Left columns</hp>
+            </hth>
+            <hth>
+              <hp>Right columns</hp>
+            </hth>
+          </htr>
+          <htr>
+            <htd>
+              <hp>left foo</hp>
+            </htd>
+            <htd>
+              <hp>right foo</hp>
+            </htd>
+          </htr>
+          <htr>
+            <htd>
+              <hp>left bar</hp>
+            </htd>
+            <htd>
+              <hp>right bar</hp>
+            </htd>
+          </htr>
+          <htr>
+            <htd>
+              <hp>left baz</hp>
+            </htd>
+            <htd>
+              <hp>right baz</hp>
+            </htd>
+          </htr>
+        </htable>
+      </fragment>
+    );
 
     expect(deserializeMd(editor, input)).toEqual(output);
   });
-
 });
diff --git a/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts b/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts
index 4ae11389ff..4a8fd90efa 100644
--- a/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts
+++ b/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts
@@ -11,8 +11,8 @@ export const remarkDefaultElementRules: RemarkElementRules = {
     transform: (node, options) => {
       const children = node.children?.length
         ? node.children.flatMap((paragraph) =>
-          remarkTransformElementChildren(paragraph, options)
-        )
+            remarkTransformElementChildren(paragraph, options)
+          )
         : [{ text: '' }];
 
       // Flatten nested blockquotes (e.g. >>>)
@@ -177,21 +177,26 @@ export const remarkDefaultElementRules: RemarkElementRules = {
   table: {
     transform: (node, options) => {
       const rows =
-        node.children?.map((row) => {
+        node.children?.map((row, rowIndex) => {
           return {
             children:
               row.children?.map((cell) => {
+                const cellType = rowIndex === 0 ? 'th' : 'td';
+
                 return {
-                  type: options.editor.getType({ key: 'td' }),
-                  children: remarkTransformElementChildren(cell, options).map(child => {
-                    if (!child.type) {
-                      return {
-                        type: options.editor.getType({ key: 'p' }),
-                        children: [child]
+                  children: remarkTransformElementChildren(cell, options).map(
+                    (child) => {
+                      if (!child.type) {
+                        return {
+                          children: [child],
+                          type: options.editor.getType({ key: 'p' }),
+                        };
                       }
+
+                      return child;
                     }
-                    return child
-                  }),
+                  ),
+                  type: options.editor.getType({ key: cellType }),
                 };
               }) || [],
             type: options.editor.getType({ key: 'tr' }),