MDX in new editor

Thinkmill · Jan 15, 2024 · 44adf3d · 44adf3d
1 parent f778e37
commit 44adf3d
Show file tree

Hide file tree

Showing 10 changed files with 1,334 additions and 326 deletions.
diff --git a/dev-projects/astro/package.json b/dev-projects/astro/package.json
@@ -22,11 +22,11 @@
     "direction": "^2.0.1",
     "is-hotkey": "^0.2.0",
     "lodash": "^4.17.21",
-    "mdast-util-from-markdown": "^0.8.5",
-    "mdast-util-gfm-autolink-literal": "^0.1.3",
-    "mdast-util-gfm-strikethrough": "^0.2.3",
-    "micromark-extension-gfm-autolink-literal": "0.5.7",
-    "micromark-extension-gfm-strikethrough": "0.6.5",
+    "mdast-util-from-markdown": "^2.0.0",
+    "mdast-util-gfm-autolink-literal": "^2.0.0",
+    "mdast-util-gfm-strikethrough": "^2.0.0",
+    "micromark-extension-gfm-autolink-literal": "^2.0.0",
+    "micromark-extension-gfm-strikethrough": "^2.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "test": "pnpm run test:unit",
     "test-strict": "cross-env STRICT_MODE=1 pnpm run test",
     "test:coverage": "jest ---coverage",
-    "test:unit": "jest",
+    "test:unit": "NODE_OPTIONS=--experimental-vm-modules jest",
     "validate": "npm-run-all --parallel check:*",
     "version-packages": "changeset version && pnpm i --frozen-lockfile=false && pnpm run format \"**/CHANGELOG.md\""
   },

diff --git a/packages/keystatic/package.json b/packages/keystatic/package.json
@@ -133,6 +133,7 @@
     "@react-types/shared": "^3.21.0",
     "@sindresorhus/slugify": "^1.1.2",
     "@ts-gql/tag": "^0.7.0",
+    "@types/mdast": "^4.0.3",
     "@types/node": "16.11.13",
     "@types/react": "^18.2.8",
     "@types/react-dom": "^18.0.11",
@@ -153,11 +154,17 @@
     "js-yaml": "^4.1.0",
     "lru-cache": "^7.14.1",
     "match-sorter": "^6.3.1",
-    "mdast-util-from-markdown": "^0.8.5",
-    "mdast-util-gfm-autolink-literal": "^0.1.3",
-    "mdast-util-gfm-strikethrough": "^0.2.3",
-    "micromark-extension-gfm-autolink-literal": "0.5.7",
-    "micromark-extension-gfm-strikethrough": "0.6.5",
+    "mdast": "^3.0.0",
+    "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-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-mdxjs": "^3.0.0",
     "minimatch": "^7.1.0",
     "prosemirror-commands": "^1.5.1",
     "prosemirror-history": "^1.3.0",

diff --git a/packages/keystatic/src/form/fields/document/DocumentEditor/pasting/markdown.ts b/packages/keystatic/src/form/fields/document/DocumentEditor/pasting/markdown.ts
@@ -1,11 +1,8 @@
-import mdASTUtilFromMarkdown from 'mdast-util-from-markdown';
-// @ts-ignore
-import autoLinkLiteralFromMarkdownExtension from 'mdast-util-gfm-autolink-literal/from-markdown';
-// @ts-ignore
-import autoLinkLiteralMarkdownSyntax from 'micromark-extension-gfm-autolink-literal';
-// @ts-ignore
-import gfmStrikethroughFromMarkdownExtension from 'mdast-util-gfm-strikethrough/from-markdown';
-import gfmStrikethroughMarkdownSyntax from 'micromark-extension-gfm-strikethrough';
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import { gfmAutolinkLiteralFromMarkdown } from 'mdast-util-gfm-autolink-literal';
+import { gfmAutolinkLiteral } from 'micromark-extension-gfm-autolink-literal';
+import { gfmStrikethroughFromMarkdown } from 'mdast-util-gfm-strikethrough';
+import { gfmStrikethrough } from 'micromark-extension-gfm-strikethrough';
 import { Block } from '../editor';
 import {
   getInlineNodes,
@@ -16,22 +13,22 @@ import {
 
 const markdownConfig = {
   mdastExtensions: [
-    autoLinkLiteralFromMarkdownExtension,
-    gfmStrikethroughFromMarkdownExtension,
+    gfmAutolinkLiteralFromMarkdown(),
+    gfmStrikethroughFromMarkdown(),
   ],
-  extensions: [autoLinkLiteralMarkdownSyntax, gfmStrikethroughMarkdownSyntax()],
+  extensions: [gfmAutolinkLiteral(), gfmStrikethrough()],
 };
 
 export function deserializeMarkdown(markdown: string) {
-  const root = mdASTUtilFromMarkdown(markdown, markdownConfig);
+  const root = fromMarkdown(markdown, markdownConfig);
   let nodes = root.children;
   if (nodes.length === 1 && nodes[0].type === 'paragraph') {
     nodes = nodes[0].children;
   }
   return deserializeChildren(nodes, markdown);
 }
 
-type MDNode = ReturnType<typeof mdASTUtilFromMarkdown>['children'][number];
+type MDNode = ReturnType<typeof fromMarkdown>['children'][number];
 
 function deserializeChildren(nodes: MDNode[], input: string) {
   const outputNodes: (InlineFromExternalPaste | Block)[] = [];