@tinacms/mdx 0.0.0-20220718185604 → 0.60.3

package/dist/parse/acorn.d.ts

@@ -15,7 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 
 */
-import type { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
+import type { MdxJsxAttribute, MdxJsxExpressionAttribute } from 'mdast-util-mdx-jsx';
 import type { TinaFieldBase } from '@tinacms/schema-tools';
-export declare const extractAttributes: (attributes: MdxJsxAttribute[], fields: TinaFieldBase[], imageCallback: (image: string) => string) => Record<string, unknown>;
-export declare const extractAttribute: (attribute: MdxJsxAttribute, field: TinaFieldBase, imageCallback: (image: string) => string) => string | number | bigint | boolean | RegExp | Record<string, unknown> | (string | number | bigint | boolean | RegExp | null | undefined)[] | Record<string, unknown>[] | null | undefined;
+export declare const extractAttributes: (attributes: (MdxJsxAttribute | MdxJsxExpressionAttribute)[], fields: TinaFieldBase[], imageCallback: (image: string) => string) => Record<string, unknown>;

package/dist/parse/acorn.js

@@ -0,0 +1,201 @@
+import { MDX_PARSE_ERROR_MSG, parseMDX } from '.';
+export var extractAttributes = function (attributes, fields, imageCallback) {
+    var properties = {};
+    attributes.forEach(function (attribute) {
+        assertType(attribute, 'mdxJsxAttribute');
+        var field = fields.find(function (field) { return field.name === attribute.name; });
+        if (!field) {
+            throw new Error("Unable to find field definition for property \"" + attribute.name + "\"");
+        }
+        try {
+            properties[attribute.name] = extractAttribute(attribute, field, imageCallback);
+        }
+        catch (e) {
+            if (e instanceof Error) {
+                throw new Error("Unable to parse field value for field \"" + field.name + "\" (type: " + field.type + "). " + e.message);
+            }
+            throw e;
+        }
+    });
+    return properties;
+};
+var extractAttribute = function (attribute, field, imageCallback) {
+    switch (field.type) {
+        case 'boolean':
+        case 'number':
+            return extractScalar(extractExpression(attribute), field);
+        case 'datetime':
+        case 'string':
+            if (field.list) {
+                return extractScalar(extractExpression(attribute), field);
+            }
+            else {
+                return extractString(attribute, field);
+            }
+        case 'image':
+            if (field.list) {
+                var values = extractScalar(extractExpression(attribute), field);
+                return values.split(',').map(function (value) { return imageCallback(value); });
+            }
+            else {
+                var value = extractString(attribute, field);
+                return imageCallback(value);
+            }
+        case 'reference':
+            if (field.list) {
+                return extractScalar(extractExpression(attribute), field);
+            }
+            else {
+                return extractString(attribute, field);
+            }
+        case 'object':
+            return extractObject(extractExpression(attribute), field);
+        case 'rich-text':
+            var JSXString = extractJSXFragment(
+            // @ts-ignore FIXME: estree-jsx needs to be merged with estree
+            extractExpression(attribute), attribute, field);
+            if (JSXString) {
+                return parseMDX(JSXString, field, imageCallback);
+            }
+            else {
+                return {};
+            }
+        default:
+            // @ts-expect-error
+            throw new Error("Extract attribute: Unhandled field type " + field.type);
+    }
+};
+var extractScalar = function (attribute, field) {
+    if (field.list) {
+        assertType(attribute.expression, 'ArrayExpression');
+        return attribute.expression.elements.map(function (element) {
+            assertHasType(element);
+            assertType(element, 'Literal');
+            return element.value;
+        });
+    }
+    else {
+        assertType(attribute.expression, 'Literal');
+        return attribute.expression.value;
+    }
+};
+var extractObject = function (attribute, field) {
+    if (field.list) {
+        assertType(attribute.expression, 'ArrayExpression');
+        return attribute.expression.elements.map(function (element) {
+            assertHasType(element);
+            assertType(element, 'ObjectExpression');
+            return extractObjectExpression(element, field);
+        });
+    }
+    else {
+        assertType(attribute.expression, 'ObjectExpression');
+        return extractObjectExpression(attribute.expression, field);
+    }
+};
+var extractObjectExpression = function (expression, field) {
+    var properties = {};
+    expression.properties.forEach(function (property) {
+        assertType(property, 'Property');
+        var _a = extractKeyValue(property, field), key = _a.key, value = _a.value;
+        properties[key] = value;
+    });
+    return properties;
+};
+var getField = function (objectField, name) {
+    if (objectField.fields) {
+        if (typeof objectField.fields === 'string') {
+            throw new Error('Global templates not supported');
+        }
+        return objectField.fields.find(function (f) { return f.name === name; });
+    }
+};
+var extractJSXFragment = function (attribute, baseAttribute, field) {
+    if (field.list) {
+    }
+    else {
+        if (attribute.expression.type === 'JSXFragment') {
+            assertHasType(attribute.expression);
+            if (attribute.expression.children[0]) {
+                var firstChild = attribute.expression.children[0];
+                if (attribute.expression.children[0].type === 'JSXText') {
+                    var child = firstChild;
+                    return child.value.trim();
+                }
+            }
+        }
+    }
+    throwError(field);
+};
+var extractKeyValue = function (property, parentField) {
+    assertType(property.key, 'Identifier');
+    var key = property.key.name;
+    var field = getField(parentField, key);
+    if ((field === null || field === void 0 ? void 0 : field.type) === 'object') {
+        if (field.list) {
+            assertType(property.value, 'ArrayExpression');
+            var value = property.value.elements.map(function (element) {
+                assertHasType(element);
+                assertType(element, 'ObjectExpression');
+                return extractObjectExpression(element, field);
+            });
+            return { key: key, value: value };
+        }
+        else {
+            assertType(property.value, 'ObjectExpression');
+            var value = extractObjectExpression(property.value, field);
+            return { key: key, value: value };
+        }
+    }
+    else {
+        assertType(property.value, 'Literal');
+        return { key: key, value: property.value.value };
+    }
+};
+var extractStatement = function (attribute) {
+    var _a, _b;
+    var body = (_b = (_a = attribute.data) === null || _a === void 0 ? void 0 : _a.estree) === null || _b === void 0 ? void 0 : _b.body;
+    if (body) {
+        if (body[0]) {
+            assertType(body[0], 'ExpressionStatement');
+            // @ts-ignore incomplete types available Directive | ExpressionStatement
+            return body[0];
+        }
+    }
+    throw new Error("Unable to extract body from expression");
+};
+/**
+ *
+ * JSX props can be either expressions, or in the case of non-list strings, literals
+ * eg. `<Cta label="hello" />` or `<Cta label={"hello"} />` are both valid
+ */
+var extractString = function (attribute, field) {
+    if (attribute.type === 'mdxJsxAttribute') {
+        if (typeof attribute.value === 'string') {
+            return attribute.value;
+        }
+    }
+    return extractScalar(extractExpression(attribute), field);
+};
+var extractExpression = function (attribute) {
+    assertType(attribute, 'mdxJsxAttribute');
+    assertHasType(attribute.value);
+    assertType(attribute.value, 'mdxJsxAttributeValueExpression');
+    return extractStatement(attribute.value);
+};
+function assertType(val, type) {
+    if (val.type !== type) {
+        throw new Error("Expected type to be " + type + " but received " + val.type + ". " + MDX_PARSE_ERROR_MSG);
+    }
+}
+function assertHasType(val) {
+    if (val) {
+        if (typeof val !== 'string') {
+            return;
+        }
+    }
+    throw new Error("Expect value to be an object with property \"type\"");
+}
+var throwError = function (field) {
+    throw new Error("Unexpected expression for field \"" + field.name + "\"" + (field.list ? ' with "list": true' : ''));
+};

package/dist/parse/index.d.ts

@@ -15,7 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 
 */
+import { RichTextParseError } from './remarkToPlate';
 import type { RichTypeInner } from '@tinacms/schema-tools';
+import type * as Md from 'mdast';
+import type * as Plate from './plate';
 /**
  * ### Convert the MDXAST into an API-friendly format
  *
@@ -65,5 +68,8 @@ import type { RichTypeInner } from '@tinacms/schema-tools';
  * 2. We don't need to do any client-side parsing. Since TinaMarkdown and the slate editor work with the same
  * format we can just allow Tina to do it's thing and update the form valuse with no additional work.
  */
-export declare const markdownToAst: (value: string, skipMDX: boolean, field: RichTypeInner) => import("mdast").Root | undefined;
-export declare const parseMDX: (value: string, field: RichTypeInner, imageCallback: (s: string) => string, skipMDX?: boolean | undefined) => import("./plate").RootElement;
+export declare const markdownToAst: (value: string, field: RichTypeInner) => Md.Root;
+export declare const MDX_PARSE_ERROR_MSG = "TinaCMS supports a stricter version of markdown and a subset of MDX. https://tina.io/docs/editing/mdx/#differences-from-other-mdx-implementations";
+export declare const MDX_PARSE_ERROR_MSG_HTML = "TinaCMS supports a stricter version of markdown and a subset of MDX. <a href=\"https://tina.io/docs/editing/mdx/#differences-from-other-mdx-implementations\" target=\"_blank\" rel=\"noopener noreferrer\">Learn More</a>";
+export declare const parseMDX: (value: string, field: RichTypeInner, imageCallback: (s: string) => string) => Plate.RootElement;
+export declare const invalidMarkdown: (e: RichTextParseError, value: string) => Plate.RootElement;

package/dist/parse/index.js

@@ -0,0 +1,144 @@
+/**
+
+Copyright 2021 Forestry.io Holdings, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+*/
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { remark } from 'remark';
+import remarkMdx from 'remark-mdx';
+import { remarkToSlate, RichTextParseError } from './remarkToPlate';
+/**
+ * ### Convert the MDXAST into an API-friendly format
+ *
+ * When we parse with Remark + MDX we get an AST which has a ton of JS capabilities, meaning
+ * we could pass this back into a JS runtime and evaluate it. Ex.
+ *
+ * ```mdx
+ * ## Hello world! The time and date is: {(new Date().toLocaleString())}
+ * ```
+ *
+ * However, as an intentional constraint we don't want this information as part of our API, as
+ * we don't intend to support the true JS runtime properties of MDX. Rather, we're using MDX for
+ * it's expressive syntax and it's advanced tooling with how it parses JSX inside Markdown.
+ *
+ * Parsing here does 2 things:
+ *
+ * #### Remove non-literal uses of JSX
+ * Things like <MyComponent myProp={() => alert("HI")} /> are not supported and will be ignored
+ *
+ * #### Convert remark nodes to slate-compatible nodes
+ *
+ * A remark node might look like this:
+ * ```js
+ * {
+ *   type: "heading",
+ *   depth: 1
+ *   children: [{type: 'text', value: 'Hello'}]
+ * }
+ * ```
+ * A slate-compatible node would be:
+ * ```js
+ * {
+ *   type: "heading_one",
+ *   children: [{type: 'text', text: 'Hello'}]
+ * }
+ * ```
+ * It's not a huge difference, but in general slate does better with less layers of indirection.
+ *
+ * While it may be desirable to ultimately serve a remark AST shape as part of the API response,
+ * it's currently much easier to only support the shape that works with Slate. This is ok for now for 2
+ * reasons.
+ *
+ * 1. Us providing the `TinaMarkdown` component on the frontend abstracts away an work the developer
+ * would need to do, so it doesn't really matter what shape the response is as long as the external API
+ * doesn't change
+ *
+ * 2. We don't need to do any client-side parsing. Since TinaMarkdown and the slate editor work with the same
+ * format we can just allow Tina to do it's thing and update the form valuse with no additional work.
+ */
+export var markdownToAst = function (value, field) {
+    var _a;
+    var templatesWithMatchers = (_a = field.templates) === null || _a === void 0 ? void 0 : _a.filter(function (template) { return template.match; });
+    var preprocessedString = value;
+    templatesWithMatchers === null || templatesWithMatchers === void 0 ? void 0 : templatesWithMatchers.forEach(function (template) {
+        if (typeof template === 'string') {
+            throw new Error('Global templates are not supported');
+        }
+        if (template.match) {
+            preprocessedString = preprocessedString.replaceAll(template.match.start, "<" + template.name + ">`");
+            preprocessedString = preprocessedString.replaceAll(template.match.end, "`</" + template.name + ">");
+        }
+    });
+    try {
+        // Remark Root is not the same as mdast for some reason
+        var tree = remark().use(remarkMdx).parse(preprocessedString);
+        if (!tree) {
+            throw new Error('Error parsing markdown');
+        }
+        // NOTE: if we want to provide error highlighing in the raw editor
+        // we could keep this info around in edit mode
+        // Delete useless position info
+        // visit(tree, (node) => {
+        //   delete node.position
+        // })
+        return tree;
+    }
+    catch (e) {
+        // @ts-ignore VMessage is the error type but it's not accessible
+        throw new RichTextParseError(e, e.position);
+    }
+};
+export var MDX_PARSE_ERROR_MSG = 'TinaCMS supports a stricter version of markdown and a subset of MDX. https://tina.io/docs/editing/mdx/#differences-from-other-mdx-implementations';
+export var MDX_PARSE_ERROR_MSG_HTML = 'TinaCMS supports a stricter version of markdown and a subset of MDX. <a href="https://tina.io/docs/editing/mdx/#differences-from-other-mdx-implementations" target="_blank" rel="noopener noreferrer">Learn More</a>';
+export var parseMDX = function (value, field, imageCallback) {
+    var tree;
+    try {
+        tree = markdownToAst(value, field);
+        if (tree) {
+            return remarkToSlate(tree, field, imageCallback);
+        }
+        else {
+            return { type: 'root', children: [] };
+        }
+    }
+    catch (e) {
+        if (e instanceof RichTextParseError) {
+            return invalidMarkdown(e, value);
+        }
+        throw e;
+    }
+};
+export var invalidMarkdown = function (e, value) {
+    var extra = {};
+    if (e.position && Object.keys(e.position).length) {
+        extra['position'] = e.position;
+    }
+    return {
+        type: 'root',
+        children: [
+            __assign({ type: 'invalid_markdown', value: value, message: e.message || "Error parsing markdown " + MDX_PARSE_ERROR_MSG, children: [{ type: 'text', text: '' }] }, extra),
+        ]
+    };
+};

package/dist/parse/mdx.js

@@ -0,0 +1,75 @@
+import { extractAttributes } from './acorn';
+import { remarkToSlate, RichTextParseError } from './remarkToPlate';
+import { toMarkdown } from 'mdast-util-to-markdown';
+import { mdxJsxToMarkdown } from 'mdast-util-mdx-jsx';
+export function mdxJsxElement(node, field, imageCallback) {
+    var _a;
+    try {
+        var template = (_a = field.templates) === null || _a === void 0 ? void 0 : _a.find(function (template) {
+            var templateName = typeof template === 'string' ? template : template.name;
+            return templateName === node.name;
+        });
+        if (typeof template === 'string') {
+            throw new Error('Global templates not yet supported');
+        }
+        if (!template) {
+            var string = toMarkdown({ type: 'root', children: [node] }, {
+                extensions: [mdxJsxToMarkdown()],
+                listItemIndent: 'one'
+            });
+            return {
+                type: node.type === 'mdxJsxFlowElement' ? 'html' : 'html_inline',
+                value: string.trim(),
+                children: [{ type: 'text', text: '' }]
+            };
+        }
+        if (template.match) {
+            var firstChild = node === null || node === void 0 ? void 0 : node.children[0];
+            if ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.type) === 'inlineCode') {
+                var value = firstChild.value;
+                if (node.type === 'mdxJsxFlowElement') {
+                    // NOTE: Since we cast the children to `inline code`
+                    // I don't think this code will ever run.
+                    // And I'm not sure care either way
+                    return {
+                        type: node.type,
+                        name: node.name,
+                        children: [{ type: 'text', text: '' }],
+                        props: { text: value }
+                    };
+                }
+                else {
+                    return {
+                        type: node.type,
+                        name: node.name,
+                        children: [{ type: 'text', text: '' }],
+                        props: { text: value }
+                    };
+                }
+            }
+            else {
+                throw new Error("Unable to parse value for template match pattern -  start: " + template.match.start + ", end: " + template.match.end);
+            }
+        }
+        // FIXME: these should be passed through to the field resolver in @tinacms/graphql (via dependency injection)
+        var props = extractAttributes(node.attributes, template.fields, imageCallback);
+        var childField = template.fields.find(function (field) { return field.name === 'children'; });
+        if (childField) {
+            if (childField.type === 'rich-text') {
+                props.children = remarkToSlate(node, childField, imageCallback);
+            }
+        }
+        return {
+            type: node.type,
+            name: node.name,
+            children: [{ type: 'text', text: '' }],
+            props: props
+        };
+    }
+    catch (e) {
+        if (e instanceof Error) {
+            throw new RichTextParseError(e.message, node.position);
+        }
+        throw e;
+    }
+}

package/dist/parse/plate.d.ts

@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 
 */
+import { Position } from './remarkToPlate';
 export declare type RootElement = {
     type: 'root';
     children: BlockElement[];
@@ -42,6 +43,18 @@ export declare type HTMLElement = {
     value: string;
     children: [EmptyTextElement];
 };
+export declare type HTMLInlineElement = {
+    type: 'html_inline';
+    value: string;
+    children: [EmptyTextElement];
+};
+export declare type InvalidMarkdownElement = {
+    type: 'invalid_markdown';
+    value: string;
+    message: string;
+    position?: Position;
+    children: [EmptyTextElement];
+};
 export declare type CodeBlockElement = {
     type: 'code_block';
     lang?: string;
@@ -70,7 +83,7 @@ export declare type OrderedListElement = {
     children: ListItemElement[];
 };
 export declare type List = OrderedListElement | UnorderedListElement;
-export declare type BlockElement = HeadingElement | ParagraphElement | CodeBlockElement | BlockquoteElement | MdxBlockElement | HTMLElement | UnorderedListElement | OrderedListElement | ListItemElement | HrElement;
+export declare type BlockElement = HeadingElement | ParagraphElement | CodeBlockElement | BlockquoteElement | MdxBlockElement | HTMLElement | UnorderedListElement | OrderedListElement | ListItemElement | HrElement | InvalidMarkdownElement;
 export declare type MdxInlineElement = {
     type: 'mdxJsxTextElement';
     name: string | null;
@@ -106,4 +119,4 @@ export declare type BreakElement = {
     children: [EmptyTextElement];
 };
 export declare type LicElement = InlineElement;
-export declare type InlineElement = TextElement | MdxInlineElement | BreakElement | LinkElement | ImageElement;
+export declare type InlineElement = TextElement | MdxInlineElement | BreakElement | LinkElement | ImageElement | HTMLInlineElement;

package/dist/parse/plate.js

@@ -0,0 +1 @@
+export {};

package/dist/parse/remarkToPlate.d.ts

@@ -33,4 +33,19 @@ declare module 'mdast' {
         mdxJsxFlowElement: MdxJsxFlowElement;
     }
 }
-export declare const remarkToSlate: (root: Md.Root, field: RichTypeInner, imageCallback: (url: string) => string) => Plate.RootElement;
+export declare const remarkToSlate: (root: Md.Root | MdxJsxFlowElement | MdxJsxTextElement, field: RichTypeInner, imageCallback: (url: string) => string) => Plate.RootElement;
+export declare type PositionItem = {
+    line?: number | null;
+    column?: number | null;
+    offset?: number | null;
+    _index?: number | null;
+    _bufferIndex?: number | null;
+};
+export declare type Position = {
+    start: PositionItem;
+    end: PositionItem;
+};
+export declare class RichTextParseError extends Error {
+    position?: Position;
+    constructor(message: string, position?: Position);
+}