From d92eed14a3910d724782a194bec09bcd50d1b5f3 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 4 May 2023 16:36:24 +0200 Subject: [PATCH 01/12] add support for remark-directive + format md --- docs/_component/editor.client.js | 34 +++++++++++++++++++- package-lock.json | 55 ++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 89 insertions(+), 1 deletion(-) diff --git a/docs/_component/editor.client.js b/docs/_component/editor.client.js index d7b4f9920..0eab78920 100644 --- a/docs/_component/editor.client.js +++ b/docs/_component/editor.client.js @@ -8,6 +8,7 @@ import {reporter} from 'vfile-reporter' import {evaluate} from '@mdx-js/mdx' import remarkGfm from 'remark-gfm' import remarkFrontmatter from 'remark-frontmatter' +import remarkDirective from 'remark-directive' import remarkMath from 'remark-math' import CodeMirror from 'rodemirror' import {basicSetup} from 'codemirror' @@ -29,7 +30,8 @@ function useMdx(defaults) { const [state, setState] = useState({...defaults, file: null}) const {run: setConfig} = useDebounceFn( async (config) => { - const file = new VFile({basename: 'example.mdx', value: config.value}) + const basename = config.formatMd ? 'example.md' : 'example.mdx' + const file = new VFile({basename, value: config.value}) const capture = (name) => () => (tree) => { file.data[name] = tree @@ -40,6 +42,7 @@ function useMdx(defaults) { if (config.gfm) remarkPlugins.push(remarkGfm) if (config.frontmatter) remarkPlugins.push(remarkFrontmatter) if (config.math) remarkPlugins.push(remarkMath) + if (config.directive) remarkPlugins.push(remarkDirective) remarkPlugins.push(capture('mdast')) @@ -104,8 +107,10 @@ export function Editor({children}) { const defaultValue = children const extensions = useMemo(() => [basicSetup, oneDark, langMarkdown()], []) const [state, setConfig] = useMdx({ + formatMd: false, gfm: false, frontmatter: false, + directive: false, math: false, value: defaultValue }) @@ -198,6 +203,33 @@ export function Editor({children}) { remark-math + +
+ diff --git a/package-lock.json b/package-lock.json index 1e417f2e1..e6ac212a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -86,6 +86,7 @@ "rehype-slug": "^5.0.0", "rehype-stringify": "^9.0.0", "remark-cli": "^11.0.0", + "remark-directive": "^2.0.1", "remark-frontmatter": "^4.0.0", "remark-gemoji": "^7.0.0", "remark-gfm": "^3.0.0", @@ -9081,6 +9082,25 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mdast-util-directive": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/mdast-util-directive/-/mdast-util-directive-2.2.4.tgz", + "integrity": "sha512-sK3ojFP+jpj1n7Zo5ZKvoxP1MvLyzVG63+gm40Z/qI00avzdPCYxt7RBMgofwAva9gBjbDBWVRB/i+UD+fUCzQ==", + "dev": true, + "dependencies": { + "@types/mdast": "^3.0.0", + "@types/unist": "^2.0.0", + "mdast-util-from-markdown": "^1.3.0", + "mdast-util-to-markdown": "^1.5.0", + "parse-entities": "^4.0.0", + "stringify-entities": "^4.0.0", + "unist-util-visit-parents": "^5.1.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/mdast-util-find-and-replace": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-2.2.2.tgz", @@ -9790,6 +9810,25 @@ "uvu": "^0.5.0" } }, + "node_modules/micromark-extension-directive": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-2.2.0.tgz", + "integrity": "sha512-LWc2mGlJlPEcESz4IHNJR/tpJfWJEEFHGM+6vgCZGXkKMXc/y8rCKB07x5ZNnafIFe0/sjt6DIIihk78/Egj5Q==", + "dev": true, + "dependencies": { + "micromark-factory-space": "^1.0.0", + "micromark-factory-whitespace": "^1.0.0", + "micromark-util-character": "^1.0.0", + "micromark-util-symbol": "^1.0.0", + "micromark-util-types": "^1.0.0", + "parse-entities": "^4.0.0", + "uvu": "^0.5.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/micromark-extension-frontmatter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/micromark-extension-frontmatter/-/micromark-extension-frontmatter-1.0.0.tgz", @@ -14099,6 +14138,22 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/remark-directive": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/remark-directive/-/remark-directive-2.0.1.tgz", + "integrity": "sha512-oosbsUAkU/qmUE78anLaJePnPis4ihsE7Agp0T/oqTzvTea8pOiaYEtfInU/+xMOVTS9PN5AhGOiaIVe4GD8gw==", + "dev": true, + "dependencies": { + "@types/mdast": "^3.0.0", + "mdast-util-directive": "^2.0.0", + "micromark-extension-directive": "^2.0.0", + "unified": "^10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/remark-frontmatter": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/remark-frontmatter/-/remark-frontmatter-4.0.1.tgz", diff --git a/package.json b/package.json index f5f3d0096..ca7f78868 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "rehype-slug": "^5.0.0", "rehype-stringify": "^9.0.0", "remark-cli": "^11.0.0", + "remark-directive": "^2.0.1", "remark-frontmatter": "^4.0.0", "remark-gemoji": "^7.0.0", "remark-gfm": "^3.0.0", From a4a194d4501dd7ae417c0cf8ee39f6a4b1b64bd0 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 4 May 2023 19:15:55 +0200 Subject: [PATCH 02/12] Add ability to remove ast positions by default --- docs/_component/editor.client.js | 21 +++++++++++++++++++++ package-lock.json | 1 + package.json | 1 + 3 files changed, 23 insertions(+) diff --git a/docs/_component/editor.client.js b/docs/_component/editor.client.js index 0eab78920..f6e5b40a5 100644 --- a/docs/_component/editor.client.js +++ b/docs/_component/editor.client.js @@ -10,6 +10,7 @@ import remarkGfm from 'remark-gfm' import remarkFrontmatter from 'remark-frontmatter' import remarkDirective from 'remark-directive' import remarkMath from 'remark-math' +import {removePosition} from 'unist-util-remove-position' import CodeMirror from 'rodemirror' import {basicSetup} from 'codemirror' import {markdown as langMarkdown} from '@codemirror/lang-markdown' @@ -56,6 +57,12 @@ function useMdx(defaults) { recmaPlugins: [capture('esast')] }) ).default + + if (!config.position) { + removePosition(file.data.mdast, {force: true}) + removePosition(file.data.hast, {force: true}) + removePosition(file.data.esast, {force: true}) + } } catch (error) { const message = error instanceof VFileMessage ? error : new VFileMessage(error) @@ -108,6 +115,7 @@ export function Editor({children}) { const extensions = useMemo(() => [basicSetup, oneDark, langMarkdown()], []) const [state, setConfig] = useMdx({ formatMd: false, + position: false, gfm: false, frontmatter: false, directive: false, @@ -230,6 +238,19 @@ export function Editor({children}) { format: 'md' + diff --git a/package-lock.json b/package-lock.json index e6ac212a7..a728ae8b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -101,6 +101,7 @@ "typescript": "^5.0.0", "unified": "^10.0.0", "unist-builder": "^3.0.0", + "unist-util-remove-position": "^4.0.2", "unist-util-visit": "^4.0.0", "uvu": "^0.5.0", "vfile": "^5.0.0", diff --git a/package.json b/package.json index ca7f78868..565fb971a 100644 --- a/package.json +++ b/package.json @@ -105,6 +105,7 @@ "unified": "^10.0.0", "unist-builder": "^3.0.0", "unist-util-visit": "^4.0.0", + "unist-util-remove-position": "^4.0.2", "uvu": "^0.5.0", "vfile": "^5.0.0", "vfile-message": "^3.0.0", From ef617625d8934014231adee5ec455ea04f98f585 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Wed, 10 May 2023 17:36:36 +0200 Subject: [PATCH 03/12] Update docs/_component/editor.client.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Titus Signed-off-by: Sébastien Lorber --- docs/_component/editor.client.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/docs/_component/editor.client.js b/docs/_component/editor.client.js index f6e5b40a5..1c777f75f 100644 --- a/docs/_component/editor.client.js +++ b/docs/_component/editor.client.js @@ -246,10 +246,7 @@ export function Editor({children}) { setConfig({...state, position: !state.position}) } />{' '} - Use{' '} - - position - + Show positional info From ca3427594e36c66380519802e72ed8b4095775e1 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Wed, 10 May 2023 18:07:02 +0200 Subject: [PATCH 04/12] Use radio for format option --- docs/_asset/index.css | 11 ++++++ docs/_component/editor.client.js | 61 +++++++++++++++++++------------- 2 files changed, 47 insertions(+), 25 deletions(-) diff --git a/docs/_asset/index.css b/docs/_asset/index.css index 05f401928..8e0587df1 100644 --- a/docs/_asset/index.css +++ b/docs/_asset/index.css @@ -753,6 +753,17 @@ button.success { margin-block: calc(1 / 1.2 * (1em + 1ex)); } +.playground-editor fieldset { + border: 0; + padding: 0; + margin: 0; + min-width: 0; +} + +.playground-editor fieldset label { + display: inline; +} + .frame { /* gray-1 is used for unselected tabs, but gray-2 is really too much * This is a perfect mix between the two: */ diff --git a/docs/_component/editor.client.js b/docs/_component/editor.client.js index 1c777f75f..c9087d846 100644 --- a/docs/_component/editor.client.js +++ b/docs/_component/editor.client.js @@ -142,7 +142,7 @@ export function Editor({children}) { }, [state]) return ( -
+
+
+ + {' | '} + +
+ -
- -
From 8142872373dfa28fd44680d0c3e94795a91b75bd Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Wed, 10 May 2023 18:45:44 +0200 Subject: [PATCH 05/12] Add ability to remove esast positional infos --- docs/_component/editor.client.js | 15 ++++++++++++++- package-lock.json | 1 + package.json | 1 + 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/docs/_component/editor.client.js b/docs/_component/editor.client.js index c9087d846..3dcaa6082 100644 --- a/docs/_component/editor.client.js +++ b/docs/_component/editor.client.js @@ -22,11 +22,24 @@ import {lowlight} from 'lowlight/lib/core.js' import javascript from 'highlight.js/lib/languages/javascript' import json from 'highlight.js/lib/languages/json' import markdown from 'highlight.js/lib/languages/markdown' +import {visit as visitEstree} from 'estree-util-visit' lowlight.registerLanguage('js', javascript) lowlight.registerLanguage('json', json) lowlight.registerLanguage('md', markdown) +export function removePositionEsast(tree) { + visitEstree(tree, remove) + return tree + + function remove(node) { + delete node.loc + delete node.start + delete node.end + delete node.range + } +} + function useMdx(defaults) { const [state, setState] = useState({...defaults, file: null}) const {run: setConfig} = useDebounceFn( @@ -61,7 +74,7 @@ function useMdx(defaults) { if (!config.position) { removePosition(file.data.mdast, {force: true}) removePosition(file.data.hast, {force: true}) - removePosition(file.data.esast, {force: true}) + removePositionEsast(file.data.esast) } } catch (error) { const message = diff --git a/package-lock.json b/package-lock.json index a728ae8b3..0f0f89ce4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,6 +46,7 @@ "eslint-plugin-react-hooks": "^4.0.0", "eslint-plugin-security": "^1.0.0", "estree-util-value-to-estree": "^2.0.0", + "estree-util-visit": "^1.2.1", "globby": "^13.0.0", "hast-to-hyperscript": "^10.0.0", "hast-util-select": "^5.0.0", diff --git a/package.json b/package.json index 565fb971a..c9e12cba5 100644 --- a/package.json +++ b/package.json @@ -105,6 +105,7 @@ "unified": "^10.0.0", "unist-builder": "^3.0.0", "unist-util-visit": "^4.0.0", + "estree-util-visit": "^1.2.1", "unist-util-remove-position": "^4.0.2", "uvu": "^0.5.0", "vfile": "^5.0.0", From d47810524efb364ebfeba422f6c5b96529954c7f Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Wed, 10 May 2023 18:48:28 +0200 Subject: [PATCH 06/12] import order --- docs/_component/editor.client.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_component/editor.client.js b/docs/_component/editor.client.js index 3dcaa6082..c06eae97a 100644 --- a/docs/_component/editor.client.js +++ b/docs/_component/editor.client.js @@ -10,6 +10,7 @@ import remarkGfm from 'remark-gfm' import remarkFrontmatter from 'remark-frontmatter' import remarkDirective from 'remark-directive' import remarkMath from 'remark-math' +import {visit as visitEstree} from 'estree-util-visit' import {removePosition} from 'unist-util-remove-position' import CodeMirror from 'rodemirror' import {basicSetup} from 'codemirror' @@ -22,7 +23,6 @@ import {lowlight} from 'lowlight/lib/core.js' import javascript from 'highlight.js/lib/languages/javascript' import json from 'highlight.js/lib/languages/json' import markdown from 'highlight.js/lib/languages/markdown' -import {visit as visitEstree} from 'estree-util-visit' lowlight.registerLanguage('js', javascript) lowlight.registerLanguage('json', json) From 07a1ddb6cba85b533182f46480e4b3a6deed4a12 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 11 May 2023 16:01:28 +0200 Subject: [PATCH 07/12] Add rehype-raw option --- docs/_component/editor.client.js | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/docs/_component/editor.client.js b/docs/_component/editor.client.js index c06eae97a..e3df066ad 100644 --- a/docs/_component/editor.client.js +++ b/docs/_component/editor.client.js @@ -7,6 +7,7 @@ import {statistics} from 'vfile-statistics' import {reporter} from 'vfile-reporter' import {evaluate} from '@mdx-js/mdx' import remarkGfm from 'remark-gfm' +import rehypeRaw from 'rehype-raw' import remarkFrontmatter from 'remark-frontmatter' import remarkDirective from 'remark-directive' import remarkMath from 'remark-math' @@ -52,21 +53,23 @@ function useMdx(defaults) { } const remarkPlugins = [] - if (config.gfm) remarkPlugins.push(remarkGfm) if (config.frontmatter) remarkPlugins.push(remarkFrontmatter) if (config.math) remarkPlugins.push(remarkMath) if (config.directive) remarkPlugins.push(remarkDirective) - remarkPlugins.push(capture('mdast')) + const rehypePlugins = [] + if (config.rehypeRaw) rehypePlugins.push(rehypeRaw) + rehypePlugins.push(capture('hast')) + try { file.result = ( await evaluate(file, { ...runtime, useDynamicImport: true, remarkPlugins, - rehypePlugins: [capture('hast')], + rehypePlugins, recmaPlugins: [capture('esast')] }) ).default @@ -133,6 +136,7 @@ export function Editor({children}) { frontmatter: false, directive: false, math: false, + rehypeRaw: false, value: defaultValue }) const onUpdate = useCallback( @@ -272,6 +276,19 @@ export function Editor({children}) { remark-directive + From 62ea85dc359bd95f4e5be70d963a6b2091c9404e Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 9 Jun 2023 17:01:39 +0200 Subject: [PATCH 08/12] remove useless export --- docs/_component/editor.client.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_component/editor.client.js b/docs/_component/editor.client.js index e3df066ad..b9f7445c8 100644 --- a/docs/_component/editor.client.js +++ b/docs/_component/editor.client.js @@ -29,7 +29,7 @@ lowlight.registerLanguage('js', javascript) lowlight.registerLanguage('json', json) lowlight.registerLanguage('md', markdown) -export function removePositionEsast(tree) { +function removePositionEsast(tree) { visitEstree(tree, remove) return tree From bbc84f5d0a82e77f09d71756b25dd31f21918eb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Fri, 9 Jun 2023 17:02:21 +0200 Subject: [PATCH 09/12] Update docs/_component/editor.client.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Titus Signed-off-by: Sébastien Lorber --- docs/_component/editor.client.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_component/editor.client.js b/docs/_component/editor.client.js index e3df066ad..71819de4e 100644 --- a/docs/_component/editor.client.js +++ b/docs/_component/editor.client.js @@ -205,7 +205,7 @@ export function Editor({children}) { />{' '} Use MDX - {' | '} + {' '}
) } + +function removePositionEsast(tree) { + visitEstree(tree, remove) + return tree + + function remove(node) { + delete node.loc + delete node.start + delete node.end + delete node.range + } +}