Stop parsing unsupported GFM syntax features (footnotes and task list…

…s) in `fields.mdx` (#1311)
Thinkmill · Sep 13, 2024 · 0b4d6df · 0b4d6df
1 parent f7f659d
commit 0b4d6df
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 20 deletions.
diff --git a/.changeset/nice-pianos-whisper.md b/.changeset/nice-pianos-whisper.md
@@ -0,0 +1,5 @@
+---
+'@keystatic/core': patch
+---
+
+Stop parsing unsupported GFM syntax features (footnotes and task lists) in `fields.mdx`
diff --git a/packages/keystatic/package.json b/packages/keystatic/package.json
@@ -153,14 +153,14 @@
     "lru-cache": "^10.2.0",
     "match-sorter": "^6.3.1",
     "mdast-util-from-markdown": "^2.0.0",
-    "mdast-util-gfm": "^3.0.0",
     "mdast-util-gfm-autolink-literal": "^2.0.0",
     "mdast-util-gfm-strikethrough": "^2.0.0",
+    "mdast-util-gfm-table": "^2.0.0",
     "mdast-util-mdx": "^3.0.0",
     "mdast-util-to-markdown": "^2.1.0",
-    "micromark-extension-gfm": "^3.0.0",
     "micromark-extension-gfm-autolink-literal": "^2.0.0",
     "micromark-extension-gfm-strikethrough": "^2.0.0",
+    "micromark-extension-gfm-table": "^2.0.0",
     "micromark-extension-mdxjs": "^3.0.0",
     "minimatch": "^9.0.3",
     "partysocket": "^0.0.22",

diff --git a/packages/keystatic/src/form/fields/markdoc/editor/mdx/parse.ts b/packages/keystatic/src/form/fields/markdoc/editor/mdx/parse.ts
@@ -13,7 +13,9 @@ import { MdxJsxAttributeValueExpression, mdxToMarkdown } from 'mdast-util-mdx';
 import { assert } from 'emery';
 import { deserializeProps, toSerialized } from '../props-serialization';
 import { toMarkdown } from 'mdast-util-to-markdown';
-import { gfmToMarkdown } from 'mdast-util-gfm';
+import { gfmAutolinkLiteralToMarkdown } from 'mdast-util-gfm-autolink-literal';
+import { gfmStrikethroughToMarkdown } from 'mdast-util-gfm-strikethrough';
+import { gfmTableToMarkdown } from 'mdast-util-gfm-table';
 
 let state:
   | {
@@ -445,7 +447,12 @@ function markdocNodeToProseMirrorNode(
   if (node.type === 'definition') return [];
   error(
     `Unhandled type ${node.type}: ${toMarkdown(node, {
-      extensions: [gfmToMarkdown(), mdxToMarkdown()],
+      extensions: [
+        gfmAutolinkLiteralToMarkdown(),
+        gfmStrikethroughToMarkdown(),
+        gfmTableToMarkdown(),
+        mdxToMarkdown(),
+      ],
       rule: '-',
     })}`
   );

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,15 @@
 import { EditorStateDescription, jsx, toEditorState } from './utils';
 import { createEditorSchema, getEditorSchema } from '../schema';
 import { editorOptionsToConfig } from '../../config';
-import { gfmFromMarkdown, gfmToMarkdown } from 'mdast-util-gfm';
+import {
+  gfmAutolinkLiteralFromMarkdown,
+  gfmAutolinkLiteralToMarkdown,
+} from 'mdast-util-gfm-autolink-literal';
+import {
+  gfmStrikethroughFromMarkdown,
+  gfmStrikethroughToMarkdown,
+} from 'mdast-util-gfm-strikethrough';
+import { gfmTableFromMarkdown, gfmTableToMarkdown } from 'mdast-util-gfm-table';
 import { mdxFromMarkdown, mdxToMarkdown } from 'mdast-util-mdx';
 import { toMarkdown } from 'mdast-util-to-markdown';
 import { proseMirrorToMDXRoot } from '../mdx/serialize';
@@ -14,7 +22,9 @@ import { mdxToProseMirror } from '../mdx/parse';
 import { expect, test } from '@jest/globals';
 import { block, inline, mark } from '../../../../../content-components';
 import { fields } from '../../../../..';
-import { gfm } from 'micromark-extension-gfm';
+import { gfmAutolinkLiteral } from 'micromark-extension-gfm-autolink-literal';
+import { gfmStrikethrough } from 'micromark-extension-gfm-strikethrough';
+import { gfmTable } from 'micromark-extension-gfm-table';
 
 const schema = createEditorSchema(
   editorOptionsToConfig({}),
@@ -72,15 +82,25 @@ function toMDX(node: EditorStateDescription) {
     slug: undefined,
   });
   return toMarkdown(mdxNode, {
-    extensions: [gfmToMarkdown(), mdxToMarkdown()],
+    extensions: [
+      gfmAutolinkLiteralToMarkdown(),
+      gfmStrikethroughToMarkdown(),
+      gfmTableToMarkdown(),
+      mdxToMarkdown(),
+    ],
     rule: '-',
   });
 }
 
 function fromMDX(mdx: string) {
   const root = fromMarkdown(mdx, {
-    extensions: [mdxjs(), gfm()],
-    mdastExtensions: [mdxFromMarkdown(), gfmFromMarkdown()],
+    extensions: [mdxjs(), gfmAutolinkLiteral(), gfmStrikethrough(), gfmTable()],
+    mdastExtensions: [
+      mdxFromMarkdown(),
+      gfmAutolinkLiteralFromMarkdown(),
+      gfmStrikethroughFromMarkdown(),
+      gfmTableFromMarkdown(),
+    ],
   });
   const files = new Map<string, Uint8Array>([
     ['something something.png', new Uint8Array([])],

diff --git a/packages/keystatic/src/form/fields/markdoc/ui.tsx b/packages/keystatic/src/form/fields/markdoc/ui.tsx
@@ -10,9 +10,19 @@ import { proseMirrorToMarkdoc } from './editor/markdoc/serialize';
 import { useEntryLayoutSplitPaneContext } from '../../../app/entry-form';
 import { fromMarkdown } from 'mdast-util-from-markdown';
 import { toMarkdown } from 'mdast-util-to-markdown';
-import { gfmFromMarkdown, gfmToMarkdown } from 'mdast-util-gfm';
+import {
+  gfmAutolinkLiteralFromMarkdown,
+  gfmAutolinkLiteralToMarkdown,
+} from 'mdast-util-gfm-autolink-literal';
+import {
+  gfmStrikethroughFromMarkdown,
+  gfmStrikethroughToMarkdown,
+} from 'mdast-util-gfm-strikethrough';
+import { gfmTableFromMarkdown, gfmTableToMarkdown } from 'mdast-util-gfm-table';
 import { mdxFromMarkdown, mdxToMarkdown } from 'mdast-util-mdx';
-import { gfm } from 'micromark-extension-gfm';
+import { gfmAutolinkLiteral } from 'micromark-extension-gfm-autolink-literal';
+import { gfmStrikethrough } from 'micromark-extension-gfm-strikethrough';
+import { gfmTable } from 'micromark-extension-gfm-table';
 import { mdxjs } from 'micromark-extension-mdxjs';
 import * as Y from 'yjs';
 import { mdxToProseMirror } from './editor/mdx/parse';
@@ -71,8 +81,13 @@ export function parseToEditorStateMDX(
   slug: string | undefined
 ) {
   const root = fromMarkdown(content, {
-    extensions: [mdxjs(), gfm()],
-    mdastExtensions: [mdxFromMarkdown(), gfmFromMarkdown()],
+    extensions: [mdxjs(), gfmAutolinkLiteral(), gfmStrikethrough(), gfmTable()],
+    mdastExtensions: [
+      mdxFromMarkdown(),
+      gfmAutolinkLiteralFromMarkdown(),
+      gfmStrikethroughFromMarkdown(),
+      gfmTableFromMarkdown(),
+    ],
   });
   const doc = mdxToProseMirror(root, schema, files, otherFiles, slug);
   return createEditorState(doc);
@@ -91,7 +106,12 @@ export function serializeFromEditorStateMDX(
     slug,
   });
   const mdx = toMarkdown(mdxNode, {
-    extensions: [gfmToMarkdown(), mdxToMarkdown()],
+    extensions: [
+      gfmAutolinkLiteralToMarkdown(),
+      gfmStrikethroughToMarkdown(),
+      gfmTableToMarkdown(),
+      mdxToMarkdown(),
+    ],
     rule: '-',
   });
   return {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml