diff --git a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx index a43ee7c641..b2a07aaf72 100644 --- 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 index 2f99637c67..4ae11389ff 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. >>>) @@ -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 index 243bfcb729..0d269d9cca 100644 --- 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 =