fix: tables in markdown preview (#1013)

Author: KaneFreeman

package.json

@@ -32,5 +32,6 @@
   },
   "workspaces": [
     "packages/*"
-  ]
+  ],
+  "dependencies": {}
 }

packages/core/package.json

@@ -67,8 +67,8 @@
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
     "@lezer/common": "1.0.2",
-    "@mdx-js/mdx": "2.3.0",
-    "@mdx-js/react": "2.3.0",
+    "@mdx-js/mdx": "3.0.0",
+    "@mdx-js/react": "3.0.0",
     "@mui/base": "5.0.0-beta.14",
     "@mui/material": "5.11.16",
     "@mui/system": "5.11.16",
@@ -120,15 +120,15 @@
     "jwt-decode": "3.1.2",
     "localforage": "1.10.0",
     "lodash": "4.17.21",
-    "mdast-util-gfm-footnote": "1.0.2",
-    "mdast-util-gfm-strikethrough": "1.0.3",
-    "mdast-util-gfm-table": "1.0.7",
-    "mdast-util-gfm-task-list-item": "1.0.2",
-    "micromark-extension-gfm-footnote": "1.1.0",
-    "micromark-extension-gfm-strikethrough": "1.0.5",
-    "micromark-extension-gfm-table": "1.0.5",
-    "micromark-extension-gfm-task-list-item": "1.0.4",
-    "micromark-util-combine-extensions": "1.0.0",
+    "mdast-util-gfm-footnote": "2.0.0",
+    "mdast-util-gfm-strikethrough": "2.0.0",
+    "mdast-util-gfm-table": "2.0.0",
+    "mdast-util-gfm-task-list-item": "2.0.0",
+    "micromark-extension-gfm-footnote": "2.0.0",
+    "micromark-extension-gfm-strikethrough": "2.0.0",
+    "micromark-extension-gfm-table": "2.0.0",
+    "micromark-extension-gfm-task-list-item": "2.0.1",
+    "micromark-util-combine-extensions": "2.0.0",
     "minimatch": "9.0.0",
     "moment": "2.29.4",
     "node-polyglot": "2.5.0",
@@ -142,7 +142,7 @@
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
     "react-is": "18.2.0",
-    "react-markdown": "8.0.7",
+    "react-markdown": "9.0.1",
     "react-polyglot": "0.7.2",
     "react-redux": "8.0.5",
     "react-router-dom": "6.10.0",
@@ -153,9 +153,9 @@
     "react-waypoint": "10.3.0",
     "react-window": "1.8.9",
     "remark-gfm": "4.0.0",
-    "remark-html": "15.0.2",
-    "remark-mdx": "2.3.0",
-    "remark-parse": "10.0.1",
+    "remark-html": "16.0.1",
+    "remark-mdx": "3.0.0",
+    "remark-parse": "11.0.0",
     "sanitize-filename": "1.6.3",
     "scheduler": "0.23.0",
     "semaphore": "1.1.0",
@@ -166,15 +166,15 @@
     "stream-browserify": "3.0.0",
     "styled-components": "5.3.10",
     "symbol-observable": "4.0.0",
-    "unified": "10.1.2",
-    "unist-util-visit": "4.1.2",
+    "unified": "11.0.4",
+    "unist-util-visit": "5.0.0",
     "url": "0.11.0",
     "url-join": "5.0.0",
     "uuid": "9.0.0",
     "validate-color": "2.2.4",
-    "vfile": "5.3.7",
-    "vfile-message": "3.1.4",
-    "vfile-statistics": "2.0.1",
+    "vfile": "6.0.1",
+    "vfile-message": "4.0.2",
+    "vfile-statistics": "3.0.0",
     "what-input": "5.2.12",
     "what-the-diff": "0.6.0",
     "yaml": "2.2.2"
@@ -218,6 +218,7 @@
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/react-window": "1.8.5",
     "@types/styled-components": "5.1.26",
+    "@types/unist": "3.0.2",
     "@types/url-join": "4.0.1",
     "@types/uuid": "9.0.1",
     "@typescript-eslint/eslint-plugin": "5.59.1",

packages/core/src/widgets/markdown/plate/hooks/useMarkdownToSlate.ts

@@ -8,6 +8,8 @@ import { getShortcodes } from '../../../../lib/registry';
 import gfm from '../serialization/gfm';
 import toSlatePlugin from '../serialization/slate/toSlatePlugin';
 
+import type { ProcessCallback } from 'unified';
+import type { VFile } from 'vfile';
 import type { ShortcodeConfig } from '../../../../interface';
 import type { MdValue } from '../plateTypes';
 
@@ -22,19 +24,22 @@ export const markdownToSlate = async (
   { useMdx, shortcodeConfigs }: UseMarkdownToSlateOptions,
 ) => {
   return new Promise<MdValue>(resolve => {
+    const callback: ProcessCallback<VFile> = (err, file) => {
+      if (err) {
+        console.error(err);
+        return;
+      }
+      resolve(file?.result as MdValue);
+      return undefined;
+    };
+
     unified()
       .use(markdown)
       .use(gfm)
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       .use(useMdx ? mdx : () => {})
       .use(toSlatePlugin({ shortcodeConfigs: shortcodeConfigs ?? getShortcodes(), useMdx }))
-      .process(markdownValue, (err, file) => {
-        if (err) {
-          console.error(err);
-          return;
-        }
-        resolve(file?.result as MdValue);
-      });
+      .process(markdownValue, callback);
   });
 };
 

packages/core/src/widgets/markdown/plate/hooks/useMdx.tsx

@@ -2,13 +2,15 @@ import { evaluate } from '@mdx-js/mdx';
 import * as provider from '@mdx-js/react';
 import { useCallback, useEffect, useState } from 'react';
 import * as runtime from 'react/jsx-runtime';
-import remarkGfm from 'remark-gfm';
 import { VFile } from 'vfile';
 import { VFileMessage } from 'vfile-message';
 
+import useDebounce from '@staticcms/core/lib/hooks/useDebounce';
 import useDebouncedCallback from '@staticcms/core/lib/hooks/useDebouncedCallback';
+import remarkGfm from '../serialization/gfm';
 import flattenListItemParagraphs from '../serialization/slate/flattenListItemParagraphs';
-import useDebounce from '@staticcms/core/lib/hooks/useDebounce';
+
+import type { Compatible } from 'vfile';
 
 export interface UseMdxState {
   file: VFile | null;
@@ -33,7 +35,7 @@ export default function useMdx(
       };
 
       try {
-        file.result = (await evaluate(file, options)).default;
+        file.result = (await evaluate(file as Readonly<Compatible>, options)).default;
       } catch (error) {
         const message = error instanceof VFileMessage ? error : new VFileMessage(String(error));
 

packages/core/src/widgets/markdown/plate/serialization/gfm.ts

@@ -20,25 +20,32 @@ import type { Plugin, Processor } from 'unified';
 function gfmFromMarkdown() {
   return [
     gfmFootnoteFromMarkdown(),
-    gfmStrikethroughFromMarkdown,
-    gfmTableFromMarkdown,
-    gfmTaskListItemFromMarkdown,
+    gfmStrikethroughFromMarkdown(),
+    gfmTableFromMarkdown(),
+    gfmTaskListItemFromMarkdown(),
   ];
 }
 
 function gfmToMarkdown() {
   return {
     extensions: [
       gfmFootnoteToMarkdown(),
-      gfmStrikethroughToMarkdown,
+      gfmStrikethroughToMarkdown(),
       gfmTableToMarkdown({}),
-      gfmTaskListItemToMarkdown,
+      gfmTaskListItemToMarkdown(),
     ],
   };
 }
 
 function gfm() {
-  return combineExtensions([gfmFootnote(), gfmStrikethrough({}), gfmTable, gfmTaskListItem]);
+  return combineExtensions([gfmFootnote(), gfmStrikethrough({}), gfmTable(), gfmTaskListItem()]);
+}
+
+declare module 'unified' {
+  interface Data {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    toMarkdownExtensions?: Array<any>;
+  }
 }
 
 /**
@@ -47,15 +54,13 @@ function gfm() {
 const remarkGfm: Plugin<void[], Root> = function (this: Processor) {
   const data = this.data();
 
-  add('micromarkExtensions', gfm());
-  add('fromMarkdownExtensions', gfmFromMarkdown());
-  add('toMarkdownExtensions', gfmToMarkdown());
+  const micromarkExtensions = data.micromarkExtensions || (data.micromarkExtensions = []);
+  const fromMarkdownExtensions = data.fromMarkdownExtensions || (data.fromMarkdownExtensions = []);
+  const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
 
-  function add(field: string, value: unknown) {
-    const list = (data[field] ? data[field] : (data[field] = [])) as unknown[];
-
-    list.push(value);
-  }
+  micromarkExtensions.push(gfm());
+  fromMarkdownExtensions.push(gfmFromMarkdown());
+  toMarkdownExtensions.push(gfmToMarkdown());
 };
 
 export default remarkGfm;

packages/core/src/widgets/markdown/plate/serialization/slate/flattenListItemParagraphs.ts

@@ -1,7 +1,8 @@
 import { visit } from 'unist-util-visit';
 
 import type { Plugin } from 'unified';
-import type { Parent, Node, VisitorResult } from 'unist-util-visit/lib';
+import type { Node, Parent } from 'unist';
+import type { VisitorResult } from 'unist-util-visit';
 
 const flattenListItemParagraphs: Plugin = function () {
   return ast => {

packages/core/src/widgets/markdown/plate/serialization/slate/toSlatePlugin.ts

@@ -1,7 +1,7 @@
 import transform from './deserializeMarkdown';
 
 import type { ShortcodeConfig } from '@staticcms/core/interface';
-import type { Plugin } from 'unified';
+import type { Compiler, Plugin } from 'unified';
 import type { MdastNode } from './ast-types';
 
 export interface ToSlatePluginOptions {
@@ -19,7 +19,7 @@ export const slateCompiler =
 
 const toSlatePlugin = (options: ToSlatePluginOptions): Plugin =>
   function () {
-    this.Compiler = slateCompiler(options);
+    this.compiler = slateCompiler(options) as unknown as Compiler;
   };
 
 export default toSlatePlugin;