safe-mdx 0.0.5 → 0.1.0

package/dist/safe-mdx.js

@@ -2,75 +2,37 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { cloneElement } from 'react';
 import { htmlToJsx } from 'html-to-jsx-transform';
 import remarkFrontmatter from 'remark-frontmatter';
+import { collapseWhiteSpace } from 'collapse-white-space';
+import { visit } from 'unist-util-visit';
 import { remark } from 'remark';
 import remarkGfm from 'remark-gfm';
 import remarkMdx from 'remark-mdx';
 import { Fragment } from 'react';
-const mdxParser = remark()
-    .use(remarkFrontmatter, ['yaml', 'toml'])
-    .use(remarkGfm)
-    .use(remarkMdx);
-void React;
-export function SafeMdxRenderer({ components, code = '', mdast = null, }) {
-    const visitor = new MdastToJsx({ code, mdast, components });
+export function mdxParse(code) {
+    const file = mdxProcessor.processSync(code);
+    return file.data.ast;
+}
+export function SafeMdxRenderer({ components, code = '', mdast = null, customTransformer, }) {
+    const visitor = new MdastToJsx({
+        code,
+        mdast,
+        components,
+        customTransformer,
+    });
     const result = visitor.run();
     return result;
 }
-const nativeTags = [
-    'blockquote',
-    'strong',
-    'em',
-    'del',
-    'hr',
-    'a',
-    'b',
-    'br',
-    'button',
-    'div',
-    'form',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'head',
-    'iframe',
-    'img',
-    'input',
-    'label',
-    'li',
-    'link',
-    'ol',
-    'p',
-    'path',
-    'picture',
-    'script',
-    'section',
-    'source',
-    'span',
-    'sub',
-    'sup',
-    'svg',
-    'table',
-    'tbody',
-    'td',
-    'tfoot',
-    'th',
-    'thead',
-    'tr',
-    'ul',
-    'video',
-    'code',
-    'pre',
-];
 export class MdastToJsx {
     mdast;
     str;
     jsxStr = '';
     c;
     errors = [];
-    constructor({ code = '', mdast = undefined, components = {}, }) {
+    customTransformer;
+    constructor({ code = '', mdast = undefined, components = {}, customTransformer, }) {
         this.str = code;
-        this.mdast = mdast || mdxParser.parse(code);
+        this.mdast = mdast || mdxParse(code);
+        this.customTransformer = customTransformer;
         this.c = {
             ...Object.fromEntries(nativeTags.map((tag) => {
                 return [tag, tag];
@@ -151,6 +113,13 @@ export class MdastToJsx {
         if (!node) {
             return [];
         }
+        // Check for custom transformer first, giving it higher priority
+        if (this.customTransformer) {
+            const customResult = this.customTransformer(node, this.mdastTransformer.bind(this));
+            if (customResult !== undefined) {
+                return customResult;
+            }
+        }
         switch (node.type) {
             case 'mdxjsEsm': {
                 const start = node.position?.start?.offset;
@@ -194,13 +163,13 @@ export class MdastToJsx {
             case 'heading': {
                 const level = node.depth;
                 const Tag = this.c[`h${level}`] ?? `h${level}`;
-                return _jsx(Tag, { children: this.mapMdastChildren(node) });
+                return (_jsx(Tag, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
             }
             case 'paragraph': {
-                return _jsx(this.c.p, { children: this.mapMdastChildren(node) });
+                return (_jsx(this.c.p, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
             }
             case 'blockquote': {
-                return (_jsx(this.c.blockquote, { children: this.mapMdastChildren(node) }));
+                return (_jsx(this.c.blockquote, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
             }
             case 'thematicBreak': {
                 return _jsx(this.c.hr, {});
@@ -211,20 +180,32 @@ export class MdastToJsx {
                 }
                 const language = node.lang || '';
                 const code = node.value;
-                return (_jsx(this.c.pre, { children: _jsx(this.c.code, { children: code }) }));
+                const codeBlock = (className) => (_jsx(this.c.pre, { ...node.data?.hProperties, children: _jsx(this.c.code, { className: className, children: code }) }));
+                if (language) {
+                    if (supportedLanguagesSet.has(language)) {
+                        return codeBlock(`language-${language}`);
+                    }
+                    else {
+                        this.errors.push({
+                            message: `Unsupported language ${language}`,
+                        });
+                        return codeBlock();
+                    }
+                }
+                return codeBlock();
             }
             case 'list': {
                 if (node.ordered) {
-                    return (_jsx(this.c.ol, { start: node.start, children: this.mapMdastChildren(node) }));
+                    return (_jsx(this.c.ol, { start: node.start, ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
                 }
-                return _jsx(this.c.ul, { children: this.mapMdastChildren(node) });
+                return (_jsx(this.c.ul, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
             }
             case 'listItem': {
                 // https://github.com/syntax-tree/mdast-util-gfm-task-list-item#syntax-tree
                 if (node?.checked != null) {
-                    return (_jsx(this.c.li, { "data-checked": node.checked, children: this.mapMdastChildren(node) }));
+                    return (_jsx(this.c.li, { "data-checked": node.checked, ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
                 }
-                return _jsx(this.c.li, { children: this.mapMdastChildren(node) });
+                return (_jsx(this.c.li, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
             }
             case 'text': {
                 if (!node.value) {
@@ -236,27 +217,27 @@ export class MdastToJsx {
                 const src = node.url || '';
                 const alt = node.alt || '';
                 const title = node.title || '';
-                return _jsx(this.c.img, { src: src, alt: alt, title: title });
+                return (_jsx(this.c.img, { src: src, alt: alt, title: title, ...node.data?.hProperties }));
             }
             case 'link': {
                 const href = node.url || '';
                 const title = node.title || '';
-                return (_jsx(this.c.a, { href, title, children: this.mapMdastChildren(node) }));
+                return (_jsx(this.c.a, { href, title, ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
             }
             case 'strong': {
-                return (_jsx(this.c.strong, { children: this.mapMdastChildren(node) }));
+                return (_jsx(this.c.strong, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
             }
             case 'emphasis': {
-                return _jsx(this.c.em, { children: this.mapMdastChildren(node) });
+                return (_jsx(this.c.em, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
             }
             case 'delete': {
-                return _jsx(this.c.del, { children: this.mapMdastChildren(node) });
+                return (_jsx(this.c.del, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
             }
             case 'inlineCode': {
                 if (!node.value) {
                     return [];
                 }
-                return _jsx(this.c.code, { children: node.value });
+                return (_jsx(this.c.code, { ...node.data?.hProperties, children: node.value }));
             }
             case 'break': {
                 return _jsx(this.c.br, {});
@@ -266,14 +247,14 @@ export class MdastToJsx {
             }
             case 'table': {
                 const [head, ...body] = React.Children.toArray(this.mapMdastChildren(node));
-                return (_jsxs(this.c.table, { children: [head && _jsx(this.c.thead, { children: head }), !!body?.length && _jsx(this.c.tbody, { children: body })] }));
+                return (_jsxs(this.c.table, { ...node.data?.hProperties, children: [head && _jsx(this.c.thead, { children: head }), !!body?.length && _jsx(this.c.tbody, { children: body })] }));
             }
             case 'tableRow': {
-                return (_jsx(this.c.tr, { className: '', children: this.mapMdastChildren(node) }));
+                return (_jsx(this.c.tr, { className: '', ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
             }
             case 'tableCell': {
                 let content = this.mapMdastChildren(node);
-                return _jsx(this.c.td, { className: '', children: content });
+                return (_jsx(this.c.td, { className: '', ...node.data?.hProperties, children: content }));
             }
             case 'definition': {
                 return [];
@@ -286,7 +267,7 @@ export class MdastToJsx {
                         href = child.url;
                     }
                 });
-                return (_jsx(this.c.a, { href: href, children: this.mapMdastChildren(node) }));
+                return (_jsx(this.c.a, { href: href, ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
             }
             case 'footnoteReference': {
                 return [];
@@ -335,7 +316,9 @@ export function getJsxAttrs(node, onError = console.error) {
         .map((attr) => {
         if (attr.type === 'mdxJsxExpressionAttribute') {
             onError({
-                message: `Expressions in jsx props are not supported (${attr.value.replace(/\n+/g, ' ')})`,
+                message: `Expressions in jsx props are not supported (${attr.value
+                    .replace(/\n+/g, ' ')
+                    .replace(/ +/g, ' ')})`,
             });
             return;
         }
@@ -426,4 +409,421 @@ function safeJsonParse(str) {
         return null;
     }
 }
+const nativeTags = [
+    'blockquote',
+    'strong',
+    'em',
+    'del',
+    'hr',
+    'a',
+    'b',
+    'br',
+    'button',
+    'div',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'head',
+    'iframe',
+    'img',
+    'input',
+    'label',
+    'li',
+    'link',
+    'ol',
+    'p',
+    'path',
+    'picture',
+    'script',
+    'section',
+    'source',
+    'span',
+    'sub',
+    'sup',
+    'svg',
+    'table',
+    'tbody',
+    'td',
+    'tfoot',
+    'th',
+    'thead',
+    'tr',
+    'ul',
+    'video',
+    'code',
+    'pre',
+    'figure',
+    'canvas',
+    'details',
+    'dl',
+    'dt',
+    'dd',
+    'fieldset',
+    'footer',
+    'header',
+    'legend',
+    'main',
+    'mark',
+    'nav',
+    'progress',
+    'summary',
+    'time',
+];
+const supportedLanguages = [
+    'abap',
+    'abnf',
+    'actionscript',
+    'ada',
+    'agda',
+    'al',
+    'antlr4',
+    'apacheconf',
+    'apex',
+    'apl',
+    'applescript',
+    'aql',
+    'arduino',
+    'arff',
+    'asciidoc',
+    'asm6502',
+    'asmatmel',
+    'aspnet',
+    'autohotkey',
+    'autoit',
+    'avisynth',
+    'avro-idl',
+    'bash',
+    'basic',
+    'batch',
+    'bbcode',
+    'bicep',
+    'birb',
+    'bison',
+    'bnf',
+    'brainfuck',
+    'brightscript',
+    'bro',
+    'bsl',
+    'c',
+    'cfscript',
+    'chaiscript',
+    'cil',
+    'clike',
+    'clojure',
+    'cmake',
+    'cobol',
+    'coffeescript',
+    'concurnas',
+    'coq',
+    'cpp',
+    'crystal',
+    'csharp',
+    'cshtml',
+    'csp',
+    'css-extras',
+    'css',
+    'csv',
+    'cypher',
+    'd',
+    'dart',
+    'dataweave',
+    'dax',
+    'dhall',
+    'diff',
+    'django',
+    'dns-zone-file',
+    'docker',
+    'dot',
+    'ebnf',
+    'editorconfig',
+    'eiffel',
+    'ejs',
+    'elixir',
+    'elm',
+    'erb',
+    'erlang',
+    'etlua',
+    'excel-formula',
+    'factor',
+    'false',
+    'firestore-security-rules',
+    'flow',
+    'fortran',
+    'fsharp',
+    'ftl',
+    'gap',
+    'gcode',
+    'gdscript',
+    'gedcom',
+    'gherkin',
+    'git',
+    'glsl',
+    'gml',
+    'gn',
+    'go-module',
+    'go',
+    'graphql',
+    'groovy',
+    'haml',
+    'handlebars',
+    'haskell',
+    'haxe',
+    'hcl',
+    'hlsl',
+    'hoon',
+    'hpkp',
+    'hsts',
+    'http',
+    'ichigojam',
+    'icon',
+    'icu-message-format',
+    'idris',
+    'iecst',
+    'ignore',
+    'inform7',
+    'ini',
+    'io',
+    'j',
+    'java',
+    'javadoc',
+    'javadoclike',
+    'javascript',
+    'javastacktrace',
+    'jexl',
+    'jolie',
+    'jq',
+    'js-extras',
+    'js-templates',
+    'jsdoc',
+    'json',
+    'json5',
+    'jsonp',
+    'jsstacktrace',
+    'jsx',
+    'julia',
+    'keepalived',
+    'keyman',
+    'kotlin',
+    'kumir',
+    'kusto',
+    'latex',
+    'latte',
+    'less',
+    'lilypond',
+    'liquid',
+    'lisp',
+    'livescript',
+    'llvm',
+    'log',
+    'lolcode',
+    'lua',
+    'magma',
+    'makefile',
+    'markdown',
+    'markup-templating',
+    'markup',
+    'matlab',
+    'maxscript',
+    'mel',
+    'mermaid',
+    'mizar',
+    'mongodb',
+    'monkey',
+    'moonscript',
+    'n1ql',
+    'n4js',
+    'nand2tetris-hdl',
+    'naniscript',
+    'nasm',
+    'neon',
+    'nevod',
+    'nginx',
+    'nim',
+    'nix',
+    'nsis',
+    'objectivec',
+    'ocaml',
+    'opencl',
+    'openqasm',
+    'oz',
+    'parigp',
+    'parser',
+    'pascal',
+    'pascaligo',
+    'pcaxis',
+    'peoplecode',
+    'perl',
+    'php-extras',
+    'php',
+    'phpdoc',
+    'plsql',
+    'powerquery',
+    'powershell',
+    'processing',
+    'prolog',
+    'promql',
+    'properties',
+    'protobuf',
+    'psl',
+    'pug',
+    'puppet',
+    'pure',
+    'purebasic',
+    'purescript',
+    'python',
+    'q',
+    'qml',
+    'qore',
+    'qsharp',
+    'r',
+    'racket',
+    'reason',
+    'regex',
+    'rego',
+    'renpy',
+    'rest',
+    'rip',
+    'roboconf',
+    'robotframework',
+    'ruby',
+    'rust',
+    'sas',
+    'sass',
+    'scala',
+    'scheme',
+    'scss',
+    'shell-session',
+    'smali',
+    'smalltalk',
+    'smarty',
+    'sml',
+    'solidity',
+    'solution-file',
+    'soy',
+    'sparql',
+    'splunk-spl',
+    'sqf',
+    'sql',
+    'squirrel',
+    'stan',
+    'stylus',
+    'swift',
+    'systemd',
+    't4-cs',
+    't4-templating',
+    't4-vb',
+    'tap',
+    'tcl',
+    'textile',
+    'toml',
+    'tremor',
+    'tsx',
+    'tt2',
+    'turtle',
+    'twig',
+    'typescript',
+    'typoscript',
+    'unrealscript',
+    'uorazor',
+    'uri',
+    'v',
+    'vala',
+    'vbnet',
+    'velocity',
+    'verilog',
+    'vhdl',
+    'vim',
+    'visual-basic',
+    'warpscript',
+    'wasm',
+    'web-idl',
+    'wiki',
+    'wolfram',
+    'wren',
+    'xeora',
+    'xml-doc',
+    'xojo',
+    'xquery',
+    'yaml',
+    'yang',
+    'zig',
+];
+const supportedLanguagesSet = new Set(supportedLanguages);
+/**
+ * https://github.com/mdx-js/mdx/blob/b3351fadcb6f78833a72757b7135dcfb8ab646fe/packages/mdx/lib/plugin/remark-mark-and-unravel.js
+ * A tiny plugin that unravels `<p><h1>x</h1></p>` but also
+ * `<p><Component /></p>` (so it has no knowledge of "HTML").
+ *
+ * It also marks JSX as being explicitly JSX, so when a user passes a `h1`
+ * component, it is used for `# heading` but not for `<h1>heading</h1>`.
+ *
+ */
+export function remarkMarkAndUnravel() {
+    return function (tree) {
+        visit(tree, function (node, index, parent) {
+            let offset = -1;
+            let all = true;
+            let oneOrMore = false;
+            if (parent &&
+                typeof index === 'number' &&
+                node.type === 'paragraph') {
+                const children = node.children;
+                while (++offset < children.length) {
+                    const child = children[offset];
+                    if (child.type === 'mdxJsxTextElement' ||
+                        child.type === 'mdxTextExpression') {
+                        oneOrMore = true;
+                    }
+                    else if (child.type === 'text' &&
+                        collapseWhiteSpace(child.value, {
+                            style: 'html',
+                            trim: true,
+                        }) === '') {
+                        // Empty.
+                    }
+                    else {
+                        all = false;
+                        break;
+                    }
+                }
+                if (all && oneOrMore) {
+                    offset = -1;
+                    const newChildren = [];
+                    while (++offset < children.length) {
+                        const child = children[offset];
+                        if (child.type === 'mdxJsxTextElement') {
+                            // @ts-expect-error: mutate because it is faster; content model is fine.
+                            child.type = 'mdxJsxFlowElement';
+                        }
+                        if (child.type === 'mdxTextExpression') {
+                            // @ts-expect-error: mutate because it is faster; content model is fine.
+                            child.type = 'mdxFlowExpression';
+                        }
+                        if (child.type === 'text' &&
+                            /^[\t\r\n ]+$/.test(String(child.value))) {
+                            // Empty.
+                        }
+                        else {
+                            newChildren.push(child);
+                        }
+                    }
+                    parent.children.splice(index, 1, ...newChildren);
+                    return index;
+                }
+            }
+        });
+    };
+}
+const mdxProcessor = remark()
+    .use(remarkMdx)
+    .use(remarkFrontmatter, ['yaml', 'toml'])
+    .use(remarkGfm)
+    .use(remarkMarkAndUnravel)
+    .use(() => {
+    return (tree, file) => {
+        file.data.ast = tree;
+    };
+});
 //# sourceMappingURL=safe-mdx.js.map