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: [],
+}