Add more options to playground, directives, format, etc

Closes GH-2295.

Reviewed-by: Remco Haszing <remcohaszing@gmail.com>
Reviewed-by: Titus Wormer <tituswormer@gmail.com>

docs/_asset/index.css

@@ -748,6 +748,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: */

docs/_component/editor.client.js

@@ -5,10 +5,14 @@ import {VFile} from 'vfile'
 import {VFileMessage} from 'vfile-message'
 import {statistics} from 'vfile-statistics'
 import {reporter} from 'vfile-reporter'
-import {evaluate} from '@mdx-js/mdx'
+import {evaluate, nodeTypes} 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'
+import {visit as visitEstree} from 'estree-util-visit'
+import {removePosition} from 'unist-util-remove-position'
 import CodeMirror from 'rodemirror'
 import {basicSetup} from 'codemirror'
 import {markdown as langMarkdown} from '@codemirror/lang-markdown'
@@ -29,30 +33,41 @@ 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
       }
 
       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, {passThrough: nodeTypes}])
+      rehypePlugins.push(capture('hast'))
+
       try {
         file.result = (
           await evaluate(file, {
             ...runtime,
             useDynamicImport: true,
             remarkPlugins,
-            rehypePlugins: [capture('hast')],
+            rehypePlugins,
             recmaPlugins: [capture('esast')]
           })
         ).default
+
+        if (!config.position) {
+          removePosition(file.data.mdast, {force: true})
+          removePosition(file.data.hast, {force: true})
+          removePositionEsast(file.data.esast)
+        }
       } catch (error) {
         const message =
           error instanceof VFileMessage ? error : new VFileMessage(error)
@@ -107,9 +122,13 @@ export function Editor({children}) {
   const defaultValue = children
   const extensions = useMemo(() => [basicSetup, oneDark, langMarkdown()], [])
   const [state, setConfig] = useMdx({
+    formatMd: false,
+    position: false,
     gfm: false,
     frontmatter: false,
+    directive: false,
     math: false,
+    rehypeRaw: false,
     value: defaultValue
   })
   const onUpdate = useCallback(
@@ -132,7 +151,7 @@ export function Editor({children}) {
   }, [state])
 
   return (
-    <div>
+    <div className="playground-editor">
       <Tabs className="frame frame-resizeable">
         <TabList className="frame-tab-bar frame-tab-bar-scroll">
           <Tab
@@ -166,6 +185,41 @@ export function Editor({children}) {
         </TabPanel>
         <TabPanel className="tab-panel-scrollable playground-editor-options-tab-panel">
           <form className="frame-body frame-body-box">
+            <fieldset>
+              <label>
+                <input
+                  type="radio"
+                  name="language"
+                  checked={!state.formatMd}
+                  onChange={() => {
+                    setConfig({...state, formatMd: false})
+                  }}
+                />{' '}
+                Use <code>MDX</code>
+              </label>
+              <span style={{margin: '1em'}}> </span>
+              <label>
+                <input
+                  type="radio"
+                  name="language"
+                  checked={state.formatMd}
+                  onChange={() => {
+                    setConfig({...state, formatMd: true})
+                  }}
+                />{' '}
+                Use <code>CommonMark</code>
+              </label>
+            </fieldset>
+            <label>
+              <input
+                checked={state.position}
+                type="checkbox"
+                onChange={() =>
+                  setConfig({...state, position: !state.position})
+                }
+              />{' '}
+              Show positional info
+            </label>
             <label>
               <input
                 checked={state.gfm}
@@ -201,6 +255,32 @@ export function Editor({children}) {
                 <code>remark-math</code>
               </a>
             </label>
+            <label>
+              <input
+                checked={state.directive}
+                type="checkbox"
+                onChange={() =>
+                  setConfig({...state, directive: !state.directive})
+                }
+              />{' '}
+              Use{' '}
+              <a href="https://github.com/remarkjs/remark-directive">
+                <code>remark-directive</code>
+              </a>
+            </label>
+            <label>
+              <input
+                checked={state.rehypeRaw}
+                type="checkbox"
+                onChange={() =>
+                  setConfig({...state, rehypeRaw: !state.rehypeRaw})
+                }
+              />{' '}
+              Use{' '}
+              <a href="https://github.com/rehypejs/rehype-raw">
+                <code>rehype-raw</code>
+              </a>
+            </label>
           </form>
         </TabPanel>
       </Tabs>
@@ -324,3 +404,15 @@ export function Editor({children}) {
     </div>
   )
 }
+
+function removePositionEsast(tree) {
+  visitEstree(tree, remove)
+  return tree
+
+  function remove(node) {
+    delete node.loc
+    delete node.start
+    delete node.end
+    delete node.range
+  }
+}

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.0",
     "remark-frontmatter": "^4.0.0",
     "remark-gemoji": "^7.0.0",
     "remark-gfm": "^3.0.0",
@@ -104,6 +105,8 @@
     "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",
     "vfile-message": "^3.0.0",