Fix tables in fields.mdx (#992)

Thinkmill · Mar 7, 2024 · 621d32f · 621d32f
1 parent b511597
commit 621d32f
Show file tree

Hide file tree

Showing 7 changed files with 226 additions and 63 deletions.
diff --git a/.changeset/breezy-panthers-bake.md b/.changeset/breezy-panthers-bake.md
@@ -0,0 +1,5 @@
+---
+'@keystatic/core': patch
+---
+
+Fix tables in `fields.mdx`
diff --git a/packages/keystatic/src/form/fields/markdoc/editor/mdx/serialize.ts b/packages/keystatic/src/form/fields/markdoc/editor/mdx/serialize.ts
@@ -219,7 +219,7 @@ function proseMirrorToMDX(
           children: mapContent(row, cell => {
             return {
               type: 'tableCell',
-              children: inline(cell.content),
+              children: inline(cell.content.child(0).content),
             };
           }),
         };

diff --git a/packages/keystatic/src/form/fields/markdoc/editor/schema.tsx b/packages/keystatic/src/form/fields/markdoc/editor/schema.tsx
@@ -488,7 +488,8 @@ export type EditorSchema = {
 
 export function createEditorSchema(
   config: EditorConfig,
-  components: Record<string, ContentComponent>
+  components: Record<string, ContentComponent>,
+  isMDX: boolean
 ) {
   const nodeSpecsWithCustomNodes: Record<string, EditorNodeSpec> = {
     doc: nodeSpecs.doc,
@@ -563,7 +564,14 @@ export function createEditorSchema(
   if (config.table) {
     nodeSpecsWithCustomNodes.table = nodeSpecs.table;
     nodeSpecsWithCustomNodes.table_row = nodeSpecs.table_row;
-    nodeSpecsWithCustomNodes.table_cell = nodeSpecs.table_cell;
+    if (isMDX) {
+      nodeSpecsWithCustomNodes.table_cell = {
+        ...nodeSpecs.table_cell,
+        content: 'paragraph',
+      };
+    } else {
+      nodeSpecsWithCustomNodes.table_cell = nodeSpecs.table_cell;
+    }
     nodeSpecsWithCustomNodes.table_header = nodeSpecs.table_header;
   }
   if (config.image) {

diff --git a/packages/keystatic/src/form/fields/markdoc/editor/tests/markdoc.test.tsx b/packages/keystatic/src/form/fields/markdoc/editor/tests/markdoc.test.tsx
@@ -11,25 +11,29 @@ import { editorOptionsToConfig } from '../../config';
 import { mark } from '../../../../../content-components';
 import { fields } from '../../../../..';
 
-const schema = createEditorSchema(editorOptionsToConfig({}), {
-  highlight: mark({
-    label: 'Highlight',
-    icon: undefined!,
-    className: 'highlight',
-    schema: {
-      variant: fields.select({
-        label: 'Variant',
-        options: [
-          { value: 'default', label: 'Default' },
-          { value: 'success', label: 'Success' },
-          { value: 'warning', label: 'Warning' },
-          { value: 'danger', label: 'Danger' },
-        ],
-        defaultValue: 'default',
-      }),
-    },
-  }),
-});
+const schema = createEditorSchema(
+  editorOptionsToConfig({}),
+  {
+    highlight: mark({
+      label: 'Highlight',
+      icon: undefined!,
+      className: 'highlight',
+      schema: {
+        variant: fields.select({
+          label: 'Variant',
+          options: [
+            { value: 'default', label: 'Default' },
+            { value: 'success', label: 'Success' },
+            { value: 'warning', label: 'Warning' },
+            { value: 'danger', label: 'Danger' },
+          ],
+          defaultValue: 'default',
+        }),
+      },
+    }),
+  },
+  false
+);
 
 function toMarkdoc(node: EditorStateDescription) {
   return Markdoc.format(

diff --git a/packages/keystatic/src/form/fields/markdoc/editor/tests/mdx.test.tsx b/packages/keystatic/src/form/fields/markdoc/editor/tests/mdx.test.tsx
@@ -4,7 +4,7 @@
 import { EditorStateDescription, jsx, toEditorState } from './utils';
 import { createEditorSchema } from '../schema';
 import { editorOptionsToConfig } from '../../config';
-import { gfmToMarkdown } from 'mdast-util-gfm';
+import { gfmFromMarkdown, gfmToMarkdown } from 'mdast-util-gfm';
 import { mdxFromMarkdown, mdxToMarkdown } from 'mdast-util-mdx';
 import { toMarkdown } from 'mdast-util-to-markdown';
 import { proseMirrorToMDXRoot } from '../mdx/serialize';
@@ -14,42 +14,47 @@ import { mdxToProseMirror } from '../mdx/parse';
 import { expect, test } from '@jest/globals';
 import { block, mark } from '../../../../../content-components';
 import { fields } from '../../../../..';
+import { gfm } from 'micromark-extension-gfm';
 
-const schema = createEditorSchema(editorOptionsToConfig({}), {
-  Something: block({
-    label: 'Something',
-    schema: {
-      bool: fields.checkbox({ label: 'Bool' }),
-    },
-  }),
-  Another: block({
-    label: 'Another',
-    schema: {
-      array: fields.array(
-        fields.object({
-          blah: fields.text({ label: 'Blah' }),
-        })
-      ),
-    },
-  }),
-  Highlight: mark({
-    label: 'Highlight',
-    icon: undefined!,
-    className: 'highlight',
-    schema: {
-      variant: fields.select({
-        label: 'Variant',
-        options: [
-          { value: 'default', label: 'Default' },
-          { value: 'success', label: 'Success' },
-          { value: 'warning', label: 'Warning' },
-          { value: 'danger', label: 'Danger' },
-        ],
-        defaultValue: 'default',
-      }),
-    },
-  }),
-});
+const schema = createEditorSchema(
+  editorOptionsToConfig({}),
+  {
+    Something: block({
+      label: 'Something',
+      schema: {
+        bool: fields.checkbox({ label: 'Bool' }),
+      },
+    }),
+    Another: block({
+      label: 'Another',
+      schema: {
+        array: fields.array(
+          fields.object({
+            blah: fields.text({ label: 'Blah' }),
+          })
+        ),
+      },
+    }),
+    Highlight: mark({
+      label: 'Highlight',
+      icon: undefined!,
+      className: 'highlight',
+      schema: {
+        variant: fields.select({
+          label: 'Variant',
+          options: [
+            { value: 'default', label: 'Default' },
+            { value: 'success', label: 'Success' },
+            { value: 'warning', label: 'Warning' },
+            { value: 'danger', label: 'Danger' },
+          ],
+          defaultValue: 'default',
+        }),
+      },
+    }),
+  },
+  true
+);
 
 function toMDX(node: EditorStateDescription) {
   const other = new Map<string, Uint8Array>();
@@ -68,8 +73,8 @@ function toMDX(node: EditorStateDescription) {
 
 function fromMDX(mdx: string) {
   const root = fromMarkdown(mdx, {
-    extensions: [mdxjs()],
-    mdastExtensions: [mdxFromMarkdown()],
+    extensions: [mdxjs(), gfm()],
+    mdastExtensions: [mdxFromMarkdown(), gfmFromMarkdown()],
   });
   const files = new Map<string, Uint8Array>([
     ['something something.png', new Uint8Array([])],
@@ -585,3 +590,140 @@ test('two hard breaks', () => {
     "
   `);
 });
+
+test('table', () => {
+  const editor = fromMDX(`
+a
+
+| a | b | c |
+| - | - | - |
+| d | e | f |
+| g | h | i |
+
+b
+`);
+  expect(editor).toMatchInlineSnapshot(`
+    <doc>
+      <paragraph>
+        <text>
+          <cursor />
+          a
+        </text>
+      </paragraph>
+      <table>
+        <table_row>
+          <table_cell
+            colspan={1}
+            rowspan={1}
+          >
+            <paragraph>
+              <text>
+                a
+              </text>
+            </paragraph>
+          </table_cell>
+          <table_cell
+            colspan={1}
+            rowspan={1}
+          >
+            <paragraph>
+              <text>
+                b
+              </text>
+            </paragraph>
+          </table_cell>
+          <table_cell
+            colspan={1}
+            rowspan={1}
+          >
+            <paragraph>
+              <text>
+                c
+              </text>
+            </paragraph>
+          </table_cell>
+        </table_row>
+        <table_row>
+          <table_cell
+            colspan={1}
+            rowspan={1}
+          >
+            <paragraph>
+              <text>
+                d
+              </text>
+            </paragraph>
+          </table_cell>
+          <table_cell
+            colspan={1}
+            rowspan={1}
+          >
+            <paragraph>
+              <text>
+                e
+              </text>
+            </paragraph>
+          </table_cell>
+          <table_cell
+            colspan={1}
+            rowspan={1}
+          >
+            <paragraph>
+              <text>
+                f
+              </text>
+            </paragraph>
+          </table_cell>
+        </table_row>
+        <table_row>
+          <table_cell
+            colspan={1}
+            rowspan={1}
+          >
+            <paragraph>
+              <text>
+                g
+              </text>
+            </paragraph>
+          </table_cell>
+          <table_cell
+            colspan={1}
+            rowspan={1}
+          >
+            <paragraph>
+              <text>
+                h
+              </text>
+            </paragraph>
+          </table_cell>
+          <table_cell
+            colspan={1}
+            rowspan={1}
+          >
+            <paragraph>
+              <text>
+                i
+              </text>
+            </paragraph>
+          </table_cell>
+        </table_row>
+      </table>
+      <paragraph>
+        <text>
+          b
+        </text>
+      </paragraph>
+    </doc>
+  `);
+  expect(toMDX(editor)).toMatchInlineSnapshot(`
+    "a
+
+    | a | b | c |
+    | - | - | - |
+    | d | e | f |
+    | g | h | i |
+
+    b
+    "
+  `);
+});
diff --git a/packages/keystatic/src/form/fields/markdoc/editor/tests/utils.tsx b/packages/keystatic/src/form/fields/markdoc/editor/tests/utils.tsx
@@ -97,7 +97,11 @@ function getSelectionInfoFromNode(node: Node) {
   return node.attrs.info as SelectionInfo;
 }
 
-const defaultEditorSchema = createEditorSchema(editorOptionsToConfig({}), {});
+const defaultEditorSchema = createEditorSchema(
+  editorOptionsToConfig({}),
+  {},
+  false
+);
 
 const defaultSchema = defaultEditorSchema.schema;
 

diff --git a/packages/keystatic/src/form/fields/markdoc/index.tsx b/packages/keystatic/src/form/fields/markdoc/index.tsx
@@ -43,7 +43,7 @@ export function markdoc({
   const config = editorOptionsToConfig(options);
   let getSchema = () => {
     if (!schema) {
-      schema = createEditorSchema(config, components);
+      schema = createEditorSchema(config, components, false);
     }
     return schema;
   };
@@ -138,7 +138,7 @@ export function mdx({
   const config = editorOptionsToConfig(options);
   let getSchema = () => {
     if (!schema) {
-      schema = createEditorSchema(config, components);
+      schema = createEditorSchema(config, components, true);
     }
     return schema;
   };