Merge pull request #3768 from frgarciames/feat/table-element

Feat/table element
udecode · Nov 15, 2024 · b36cdca · b36cdca
2 parents 828b1de + f8f3de8
commit b36cdca
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 8 deletions.
diff --git a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx
@@ -553,4 +553,100 @@ describe('deserializeMdIndentList', () => {
 
     expect(deserializeMd(editor, input)).toEqual(output);
   });
+  it('should deserialize a table', () => {
+    const input = `
+| Left columns  | Right columns |
+| ------------- |:-------------:|
+| left foo      | right foo     |
+| left bar      | right bar     |
+| 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' }],
+                }],
+              },
+            ],
+          },
+        ],
+      }
+    ]
+
+    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
@@ -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. >>>)
@@ -78,7 +78,7 @@ export const remarkDefaultElementRules: RemarkElementRules = {
           listItems: TElement[] = [],
           indent = 1
         ) => {
-          _node.children!.forEach((listItem) => {
+          _node.children?.forEach((listItem) => {
             const [paragraph, ...subLists] = listItem.children!;
 
             listItems.push({
@@ -114,12 +114,12 @@ export const remarkDefaultElementRules: RemarkElementRules = {
         };
 
         return parseListItems(node);
-      } else {
-        return {
-          children: remarkTransformElementChildren(node, options),
-          type: options.editor.getType({ key: node.ordered ? 'ol' : 'ul' }),
-        };
       }
+
+      return {
+        children: remarkTransformElementChildren(node, options),
+        type: options.editor.getType({ key: node.ordered ? 'ol' : 'ul' }),
+      };
     },
   },
   listItem: {
@@ -174,6 +174,36 @@ export const remarkDefaultElementRules: RemarkElementRules = {
       return elements;
     },
   },
+  table: {
+    transform: (node, options) => {
+      const rows =
+        node.children?.map((row) => {
+          return {
+            children:
+              row.children?.map((cell) => {
+                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]
+                      }
+                    }
+                    return child
+                  }),
+                };
+              }) || [],
+            type: options.editor.getType({ key: 'tr' }),
+          };
+        }) || [];
+
+      return {
+        children: rows,
+        type: options.editor.getType({ key: 'table' }),
+      };
+    },
+  },
   thematicBreak: {
     transform: (node, options) => ({
       children: [{ text: '' } as TText],

diff --git a/packages/markdown/src/lib/remark-slate/types.ts b/packages/markdown/src/lib/remark-slate/types.ts
@@ -9,6 +9,7 @@ export type MdastElementType =
   | 'list'
   | 'listItem'
   | 'paragraph'
+  | 'table'
   | 'thematicBreak';
 
 export type MdastTextType =