From b891b976425d534a0ac909536e5d958afc162243 Mon Sep 17 00:00:00 2001 From: frgarciames Date: Thu, 14 Nov 2024 19:13:37 +0100 Subject: [PATCH 1/4] feat: add table element to default remark elements --- .../remark-slate/remarkDefaultElementRules.ts | 34 +++++++++++++++---- .../markdown/src/lib/remark-slate/types.ts | 1 + 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts b/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts index 2f99637c67..c3d0ba4fa8 100644 --- a/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts +++ b/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts @@ -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,28 @@ export const remarkDefaultElementRules: RemarkElementRules = { return elements; }, }, + table: { + transform: (node, options) => { + const rows = + node.children?.map((row) => { + return { + children: + row.children?.map((cell) => { + return { + children: remarkTransformElementChildren(cell, options), + type: options.editor.getType({ key: 'td' }), + }; + }) || [], + 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 = From 644e71c8b6612e5705658892ee538123c0f25851 Mon Sep 17 00:00:00 2001 From: frgarciames Date: Thu, 14 Nov 2024 19:29:13 +0100 Subject: [PATCH 2/4] test: add table test --- .../deserializer/utils/deserializeMd.spec.tsx | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx index a43ee7c641..c6aae74f1e 100644 --- a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx +++ b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx @@ -553,4 +553,78 @@ 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: [{ text: 'Left columns' }], + }, + { + type: 'td', + children: [{ text: 'Right columns' }], + }, + ], + }, + { + type: 'tr', + children: [ + { + type: 'td', + children: [{ text: 'left foo' }], + }, + { + type: 'td', + children: [{ text: 'right foo' }], + }, + ], + }, + { + type: 'tr', + children: [ + { + type: 'td', + children: [{ text: 'left bar' }], + }, + { + type: 'td', + children: [{ text: 'right bar' }], + }, + ], + }, + { + type: 'tr', + children: [ + { + type: 'td', + children: [{ text: 'left baz' }], + }, + { + type: 'td', + children: [{ text: 'right baz' }], + }, + ], + }, + ], + } + ] + + console.log(JSON.stringify(deserializeMd(editor, input))) + + expect(deserializeMd(editor, input)).toEqual(output); + }); + }); From ee4632ca7c9e9405fa72986c55fd85b84335d584 Mon Sep 17 00:00:00 2001 From: frgarciames Date: Thu, 14 Nov 2024 22:45:25 +0100 Subject: [PATCH 3/4] chore: remove console.log --- .../markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx index c6aae74f1e..a5bad67d66 100644 --- a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx +++ b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx @@ -622,8 +622,6 @@ describe('deserializeMdIndentList', () => { } ] - console.log(JSON.stringify(deserializeMd(editor, input))) - expect(deserializeMd(editor, input)).toEqual(output); }); From f8f3de8a7262a6ae227a28f525b38888e4f47290 Mon Sep 17 00:00:00 2001 From: frgarciames Date: Fri, 15 Nov 2024 00:13:29 +0100 Subject: [PATCH 4/4] fix: add paragraph as child of td in case is text --- .../deserializer/utils/deserializeMd.spec.tsx | 40 +++++++++++++++---- .../remark-slate/remarkDefaultElementRules.ts | 14 +++++-- 2 files changed, 43 insertions(+), 11 deletions(-) diff --git a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx index a5bad67d66..b2a07aaf72 100644 --- a/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx +++ b/packages/markdown/src/lib/deserializer/utils/deserializeMd.spec.tsx @@ -571,11 +571,17 @@ describe('deserializeMdIndentList', () => { children: [ { type: 'td', - children: [{ text: 'Left columns' }], + children: [{ + type: 'p', + children: [{ text: 'Left columns' }], + }], }, { type: 'td', - children: [{ text: 'Right columns' }], + children: [{ + type: 'p', + children: [{ text: 'Right columns' }], + }], }, ], }, @@ -584,11 +590,17 @@ describe('deserializeMdIndentList', () => { children: [ { type: 'td', - children: [{ text: 'left foo' }], + children: [{ + type: 'p', + children: [{ text: 'left foo' }], + }], }, { type: 'td', - children: [{ text: 'right foo' }], + children: [{ + type: 'p', + children: [{ text: 'right foo' }], + }], }, ], }, @@ -597,11 +609,17 @@ describe('deserializeMdIndentList', () => { children: [ { type: 'td', - children: [{ text: 'left bar' }], + children: [{ + type: 'p', + children: [{ text: 'left bar' }], + }], }, { type: 'td', - children: [{ text: 'right bar' }], + children: [{ + type: 'p', + children: [{ text: 'right bar' }], + }], }, ], }, @@ -610,11 +628,17 @@ describe('deserializeMdIndentList', () => { children: [ { type: 'td', - children: [{ text: 'left baz' }], + children: [{ + type: 'p', + children: [{ text: 'left baz' }], + }], }, { type: 'td', - children: [{ text: 'right baz' }], + children: [{ + type: 'p', + children: [{ text: 'right baz' }], + }], }, ], }, diff --git a/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts b/packages/markdown/src/lib/remark-slate/remarkDefaultElementRules.ts index c3d0ba4fa8..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. >>>) @@ -182,8 +182,16 @@ export const remarkDefaultElementRules: RemarkElementRules = { children: row.children?.map((cell) => { return { - children: remarkTransformElementChildren(cell, options), 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' }),