diff --git a/.changeset/breezy-panthers-bake.md b/.changeset/breezy-panthers-bake.md new file mode 100644 index 000000000..4e63183f0 --- /dev/null +++ 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 index 2f9d335a9..778123de6 100644 --- 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 index 448aef7c6..038ae1178 100644 --- 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 + components: Record, + isMDX: boolean ) { const nodeSpecsWithCustomNodes: Record = { 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 index 40b900ab0..4959a220d 100644 --- 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 index 2bf1ccaf4..f236abfa3 100644 --- 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(); @@ -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([ ['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(` + + + + + a + + + + + + + + a + + + + + + + b + + + + + + + c + + + + + + + + + d + + + + + + + e + + + + + + + f + + + + + + + + + g + + + + + + + h + + + + + + + i + + + + +
+ + + b + + + + `); + 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 index 0d9fec558..e9baaa045 100644 --- 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 index f0d7ef0a1..7a75371b2 100644 --- 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; };