Update MDX, support version 1 and 2, as well as the multiple ASTs generated

website/package.json

@@ -52,7 +52,6 @@
     "@glimmer/compiler": "^0.83.1",
     "@glimmer/syntax": "^0.83.1",
     "@humanwhocodes/momoa": "^2.0.0",
-    "@mdx-js/mdx": "^1.5.8",
     "@swc/wasm-web": "^1.2.146",
     "@typescript-eslint/parser": "^5.27.0",
     "@vue/compiler-dom": "^3.0.0-rc.10",
@@ -117,6 +116,8 @@
     "lucene": "^2.1.1",
     "mathjs": "^10.6.1",
     "meriyah": "^4.2.0",
+    "mdx1": "npm:@mdx-js/mdx@^1",
+    "mdx2": "npm:@mdx-js/mdx@^2",
     "parse5": "^6.0.0",
     "parse5-htmlparser2-tree-adapter": "^6.0.0",
     "pbkit": "^0.0.38",

website/src/parsers/mdx/mdxhast.js → website/src/parsers/mdx/mdx1hast.js

@@ -1,35 +1,26 @@
 import defaultParserInterface from '../utils/defaultParserInterface';
-import pkg from '@mdx-js/mdx/package.json';
+import pkg from 'mdx1/package.json';
 
-const ID = 'mdxhast';
-
-function removeNewlines(node) {
-  if (node.children != null) {
-    node.children = node.children.filter(node => node.value !== '\n');
-    node.children.forEach(removeNewlines);
-  }
-}
+const ID = 'mdx1-hast';
 
 export default {
   ...defaultParserInterface,
 
   id: ID,
   displayName: ID,
   version: pkg.version,
-  homepage: 'https://mdxjs.com',
+  homepage: pkg.homepage,
   locationProps: new Set(['position']),
 
   loadParser(callback) {
-    require(['@mdx-js/mdx', '@mdx-js/mdx/mdx-ast-to-mdx-hast'], (mdx, mdxAstToMdxHast) => callback({mdx, mdxAstToMdxHast}));
+    require(['mdx1'], (mdx) => callback({ mdx }));
   },
 
-  parse({mdx, mdxAstToMdxHast}, code) {
+  parse({ mdx }, code) {
     let result;
     mdx.sync(code, {
-      hastPlugins: [
-        mdxAstToMdxHast,
-        () => removeNewlines,
-        () => tree => {
+      rehypePlugins: [
+        () => (tree) => {
           result = tree;
         },
       ],

website/src/parsers/mdx/mdx1mdast.js

@@ -0,0 +1,41 @@
+import defaultParserInterface from '../utils/defaultParserInterface';
+import pkg from 'mdx1/package.json';
+
+const ID = 'mdx1-mdast';
+
+export default {
+  ...defaultParserInterface,
+
+  id: ID,
+  displayName: ID,
+  version: pkg.version,
+  homepage: pkg.homepage,
+  locationProps: new Set(['position']),
+
+  loadParser(callback) {
+    require(['mdx1'], (mdx) => callback({ mdx }));
+  },
+
+  parse({ mdx }, code) {
+    let result;
+    mdx.sync(code, {
+      remarkPlugins: [
+        () => (tree) => {
+          result = tree;
+        },
+      ],
+    });
+
+    return result;
+  },
+
+  nodeToRange({ position }) {
+    if (position) {
+      return [position.start.offset, position.end.offset];
+    }
+  },
+
+  opensByDefault(node, key) {
+    return key === 'children';
+  },
+};

website/src/parsers/mdx/mdx2esast.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import defaultParserInterface from '../utils/defaultParserInterface';
+import pkg from 'mdx2/package.json';
+
+const ID = 'mdx2-esast';
+
+export default {
+  ...defaultParserInterface,
+
+  id: ID,
+  displayName: ID,
+  version: pkg.version,
+  homepage: pkg.homepage,
+  locationProps: new Set(['position']),
+
+  loadParser(callback) {
+    require([
+      'mdx2',
+      'remark-gfm',
+      'remark-directive',
+      'remark-footnotes',
+      'remark-frontmatter',
+      'remark-math',
+    ], (
+      { compileSync: mdx },
+      { default: gfm },
+      { default: directive },
+      { default: footnotes },
+      { default: frontmatter },
+      { default: math },
+    ) => callback({ mdx, gfm, directive, footnotes, frontmatter, math }));
+  },
+
+  parse({ mdx, gfm, directive, footnotes, frontmatter, math }, code, options) {
+    let result = null;
+    const plugins = [
+      options['remark-gfm'] ? gfm : false,
+      options['remark-directive'] ? directive : false,
+      options['remark-footnotes'] ? footnotes : false,
+      options['remark-frontmatter'] ? [frontmatter, ['yaml', 'toml']] : false,
+      options['remark-math'] ? math : false,
+    ].filter((plugin) => plugin !== false);
+    mdx(code, {
+      remarkPlugins: plugins,
+      recmaPlugins: [
+        () => (tree) => {
+          result = tree;
+        },
+      ],
+    });
+
+    return result;
+  },
+
+  nodeToRange({ loc }) {
+    if (loc) {
+      return [loc.start.offset, loc.end.offset];
+    }
+  },
+
+  opensByDefault(node, key) {
+    return key === 'body';
+  },
+
+  getDefaultOptions() {
+    return {
+      'remark-directive': false,
+      'remark-footnotes': false,
+      'remark-frontmatter': false,
+      'remark-gfm': false,
+      'remark-math': false,
+    };
+  },
+
+  renderSettings(parserSettings, onChange) {
+    return (
+      <div>
+        <p>
+          mdx syntax is extended through{' '}
+          <a
+            href="https://github.com/remarkjs/remark/blob/HEAD/doc/plugins.md"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            remark plugins
+          </a>
+        </p>
+        {defaultParserInterface.renderSettings.call(
+          this,
+          parserSettings,
+          onChange,
+        )}
+      </div>
+    );
+  },
+};

website/src/parsers/mdx/mdx2hast.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import defaultParserInterface from '../utils/defaultParserInterface';
+import pkg from 'mdx2/package.json';
+
+const ID = 'mdx2-hast';
+
+export default {
+  ...defaultParserInterface,
+
+  id: ID,
+  displayName: ID,
+  version: pkg.version,
+  homepage: pkg.homepage,
+  locationProps: new Set(['position']),
+
+  loadParser(callback) {
+    require([
+      'mdx2',
+      'remark-gfm',
+      'remark-directive',
+      'remark-footnotes',
+      'remark-frontmatter',
+      'remark-math',
+    ], (
+      { compileSync: mdx },
+      { default: gfm },
+      { default: directive },
+      { default: footnotes },
+      { default: frontmatter },
+      { default: math },
+    ) => callback({ mdx, gfm, directive, footnotes, frontmatter, math }));
+  },
+
+  parse({ mdx, gfm, directive, footnotes, frontmatter, math }, code, options) {
+    let result = null;
+    const plugins = [
+      options['remark-gfm'] ? gfm : false,
+      options['remark-directive'] ? directive : false,
+      options['remark-footnotes'] ? footnotes : false,
+      options['remark-frontmatter'] ? [frontmatter, ['yaml', 'toml']] : false,
+      options['remark-math'] ? math : false,
+    ].filter((plugin) => plugin !== false);
+    mdx(code, {
+      remarkPlugins: plugins,
+      rehypePlugins: [
+        () => (tree) => {
+          result = tree;
+        },
+      ],
+    });
+
+    return result;
+  },
+
+  nodeToRange({ position }) {
+    if (position) {
+      return [position.start.offset, position.end.offset];
+    }
+  },
+
+  opensByDefault(node, key) {
+    return key === 'children';
+  },
+
+  getDefaultOptions() {
+    return {
+      'remark-directive': false,
+      'remark-footnotes': false,
+      'remark-frontmatter': false,
+      'remark-gfm': false,
+      'remark-math': false,
+    };
+  },
+
+  renderSettings(parserSettings, onChange) {
+    return (
+      <div>
+        <p>
+          mdx syntax is extended through{' '}
+          <a
+            href="https://github.com/remarkjs/remark/blob/HEAD/doc/plugins.md"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            remark plugins
+          </a>
+        </p>
+        {defaultParserInterface.renderSettings.call(
+          this,
+          parserSettings,
+          onChange,
+        )}
+      </div>
+    );
+  },
+};

website/src/parsers/mdx/mdx2mdast.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import defaultParserInterface from '../utils/defaultParserInterface';
+import pkg from 'mdx2/package.json';
+
+const ID = 'mdx2-mdast';
+
+export default {
+  ...defaultParserInterface,
+
+  id: ID,
+  displayName: ID,
+  version: pkg.version,
+  homepage: pkg.homepage,
+  locationProps: new Set(['position']),
+
+  loadParser(callback) {
+    require([
+      'mdx2',
+      'remark-gfm',
+      'remark-directive',
+      'remark-footnotes',
+      'remark-frontmatter',
+      'remark-math',
+    ], (
+      { compileSync: mdx },
+      { default: gfm },
+      { default: directive },
+      { default: footnotes },
+      { default: frontmatter },
+      { default: math },
+    ) => callback({ mdx, gfm, directive, footnotes, frontmatter, math }));
+  },
+
+  parse({ mdx, gfm, directive, footnotes, frontmatter, math }, code, options) {
+    let result = null;
+    const plugins = [
+      options['remark-gfm'] ? gfm : false,
+      options['remark-directive'] ? directive : false,
+      options['remark-footnotes'] ? footnotes : false,
+      options['remark-frontmatter'] ? [frontmatter, ['yaml', 'toml']] : false,
+      options['remark-math'] ? math : false,
+      () => (tree) => {
+        result = tree;
+      },
+    ].filter((plugin) => plugin !== false);
+    mdx(code, { remarkPlugins: plugins });
+
+    return result;
+  },
+
+  nodeToRange({ position }) {
+    if (position) {
+      return [position.start.offset, position.end.offset];
+    }
+  },
+
+  opensByDefault(node, key) {
+    return key === 'children';
+  },
+
+  getDefaultOptions() {
+    return {
+      'remark-directive': false,
+      'remark-footnotes': false,
+      'remark-frontmatter': false,
+      'remark-gfm': false,
+      'remark-math': false,
+    };
+  },
+
+  renderSettings(parserSettings, onChange) {
+    return (
+      <div>
+        <p>
+          mdx syntax is extended through{' '}
+          <a
+            href="https://github.com/remarkjs/remark/blob/HEAD/doc/plugins.md"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            remark plugins
+          </a>
+        </p>
+        {defaultParserInterface.renderSettings.call(
+          this,
+          parserSettings,
+          onChange,
+        )}
+      </div>
+    );
+  },
+};

website/src/parsers/mdx/transformers/mdx1/codeExample.txt

@@ -0,0 +1,4 @@
+export default {
+  remarkPlugins: [],
+  rehypePlugins: [],
+}