@tinacms/mdx 0.0.0-877699d-20250102032632 → 0.0.0-899eda4-20250227042836

package/dist/index.browser.mjs

@@ -38154,10 +38154,22 @@ var Xh = Q({ "src/language-js/parse/acorn-and-espree.js"(a, u) {
 var mc = Xh();
 
 // src/stringify/acorn.ts
-var stringifyPropsInline = (element2, field, imageCallback) => {
-  return stringifyProps(element2, field, true, imageCallback);
+function generateRandom6LetterString() {
+  const characters = "abcdefghijklmnopqrstuvwxyz";
+  let result = "";
+  for (let i = 0; i < 6; i++) {
+    const randomIndex = Math.floor(Math.random() * characters.length);
+    result += characters[randomIndex];
+  }
+  return result;
+}
+function isMultiline(input) {
+  return input.includes("\n") || input.includes("\r");
+}
+var stringifyPropsInline = (element2, field, imageCallback, context) => {
+  return stringifyProps(element2, field, true, imageCallback, context || {});
 };
-function stringifyProps(element2, parentField, flatten2, imageCallback) {
+function stringifyProps(element2, parentField, flatten2, imageCallback, context) {
   const attributes2 = [];
   const children = [];
   let template;
@@ -38181,6 +38193,16 @@ function stringifyProps(element2, parentField, flatten2, imageCallback) {
   if (template.fields.find((f) => f.name === "children")) {
     directiveType = "block";
   }
+  const embedCodes = {};
+  for (const [embedKey, value] of Object.entries(element2.props)) {
+    if (embedKey.startsWith("_tinaEmbeds")) {
+      const key = embedKey.replace("_tinaEmbeds.", "");
+      embedCodes[key] = value;
+    }
+  }
+  for (const key of Object.keys(embedCodes)) {
+    delete element2.props[`_tinaEmbeds.${key}`];
+  }
   useDirective = !!template.match;
   Object.entries(element2.props).forEach(([name2, value]) => {
     if (typeof template === "string") {
@@ -38231,11 +38253,22 @@ function stringifyProps(element2, parentField, flatten2, imageCallback) {
           }
         } else {
           if (typeof value === "string") {
-            attributes2.push({
-              type: "mdxJsxAttribute",
-              name: name2,
-              value
-            });
+            if (isMultiline(value)) {
+              const code3 = embedCodes[name2] || generateRandom6LetterString();
+              context._tinaEmbeds = context._tinaEmbeds || {};
+              context._tinaEmbeds[code3] = value;
+              attributes2.push({
+                type: "mdxJsxAttribute",
+                name: name2,
+                value: `_tinaEmbeds.${code3}`
+              });
+            } else {
+              attributes2.push({
+                type: "mdxJsxAttribute",
+                name: name2,
+                value
+              });
+            }
           } else {
             throw new Error(
               `Expected string for attribute on field ${field.name}`
@@ -38321,39 +38354,23 @@ function stringifyProps(element2, parentField, flatten2, imageCallback) {
             (value2) => value2.type === "root" && Array.isArray(value2.children),
             `Nested rich-text element is not a valid shape for field ${field.name}`
           );
+          const code3 = value.embedCode || generateRandom6LetterString();
           if (field.name === "children") {
-            const root2 = rootElement(value, field, imageCallback);
+            const root2 = rootElement(value, field, imageCallback, context);
             root2.children.forEach((child) => {
               children.push(child);
             });
             return;
           } else {
             const stringValue = stringifyMDX(value, field, imageCallback);
-            if (stringValue) {
-              val = stringValue.trim().split("\n").map((str) => `  ${str.trim()}`).join(joiner);
-            }
-          }
-          if (flatten2) {
-            attributes2.push({
-              type: "mdxJsxAttribute",
-              name: name2,
-              value: {
-                type: "mdxJsxAttributeValueExpression",
-                value: `<>${val.trim()}</>`
-              }
-            });
-          } else {
-            attributes2.push({
-              type: "mdxJsxAttribute",
-              name: name2,
-              value: {
-                type: "mdxJsxAttributeValueExpression",
-                value: `<>
-${val}
-</>`
-              }
-            });
+            context._tinaEmbeds = context._tinaEmbeds || {};
+            context._tinaEmbeds[code3] = stringValue;
           }
+          attributes2.push({
+            type: "mdxJsxAttribute",
+            name: name2,
+            value: `_tinaEmbeds.${code3}`
+          });
         }
         break;
       default:
@@ -38618,7 +38635,7 @@ var eat2 = (c, field, imageCallback) => {
   }
   if (markToProcess === "inlineCode") {
     if (nonMatchingSiblingIndex) {
-      throw new Error(`Marks inside inline code are not supported`);
+      throw new Error("Marks inside inline code are not supported");
     }
     const node2 = {
       type: markToProcess,
@@ -38653,7 +38670,8 @@ var cleanNode = (node2, mark) => {
   const markToClear = {
     strong: "bold",
     emphasis: "italic",
-    inlineCode: "code"
+    inlineCode: "code",
+    delete: "strikethrough"
   }[mark];
   Object.entries(node2).map(([key, value]) => {
     if (key !== markToClear) {
@@ -38790,7 +38808,7 @@ ${match.start} /${match.name || template.name} ${match.end}`;
 }
 
 // src/stringify/index.ts
-var stringifyMDX = (value, field, imageCallback) => {
+var stringifyMDX = (value, field, imageCallback, context = {}) => {
   if (field.parser?.type === "markdown") {
     return stringifyMDX2(value, field, imageCallback);
   }
@@ -38805,7 +38823,7 @@ var stringifyMDX = (value, field, imageCallback) => {
       return value.children[0].value;
     }
   }
-  const tree = rootElement(value, field, imageCallback);
+  const tree = rootElement(value, field, imageCallback, context);
   const res = toTinaMarkdown2(tree, field);
   const templatesWithMatchers = field.templates?.filter(
     (template) => template.match
@@ -38866,10 +38884,10 @@ var toTinaMarkdown2 = (tree, field) => {
     handlers
   });
 };
-var rootElement = (content3, field, imageCallback) => {
+var rootElement = (content3, field, imageCallback, context) => {
   const children = [];
   content3.children?.forEach((child) => {
-    const value = blockElement(child, field, imageCallback);
+    const value = blockElement(child, field, imageCallback, context);
     if (value) {
       children.push(value);
     }
@@ -38879,7 +38897,7 @@ var rootElement = (content3, field, imageCallback) => {
     children
   };
 };
-var blockElement = (content3, field, imageCallback) => {
+var blockElement = (content3, field, imageCallback, context) => {
   switch (content3.type) {
     case "h1":
     case "h2":
@@ -38941,7 +38959,7 @@ var blockElement = (content3, field, imageCallback) => {
           })
         };
       }
-      const { children, attributes: attributes2, useDirective, directiveType } = stringifyProps(content3, field, false, imageCallback);
+      const { children, attributes: attributes2, useDirective, directiveType } = stringifyProps(content3, field, false, imageCallback, context);
       if (useDirective) {
         const name2 = content3.name;
         if (!name2) {
@@ -39111,6 +39129,9 @@ var getMarks = (content3) => {
   if (content3.code) {
     marks.push("inlineCode");
   }
+  if (content3.strikethrough) {
+    marks.push("delete");
+  }
   return marks;
 };
 
@@ -39555,7 +39576,8 @@ var cleanNode2 = (node2, mark) => {
   const markToClear = {
     strong: "bold",
     emphasis: "italic",
-    inlineCode: "code"
+    inlineCode: "code",
+    delete: "strikethrough"
   }[mark];
   Object.entries(node2).map(([key, value]) => {
     if (key !== markToClear) {
@@ -42108,7 +42130,7 @@ function compact(tree) {
 var import_lodash = __toESM(require_lodash());
 
 // src/parse/acorn.ts
-var extractAttributes = (attributes2, fields, imageCallback) => {
+var extractAttributes = (attributes2, fields, imageCallback, context) => {
   const properties = {};
   attributes2?.forEach((attribute) => {
     assertType(attribute, "mdxJsxAttribute");
@@ -42122,7 +42144,9 @@ var extractAttributes = (attributes2, fields, imageCallback) => {
       properties[attribute.name] = extractAttribute(
         attribute,
         field,
-        imageCallback
+        imageCallback,
+        context,
+        (name2, value) => properties[name2] = value
       );
     } catch (e) {
       if (e instanceof Error) {
@@ -42135,7 +42159,7 @@ var extractAttributes = (attributes2, fields, imageCallback) => {
   });
   return properties;
 };
-var extractAttribute = (attribute, field, imageCallback) => {
+var extractAttribute = (attribute, field, imageCallback, context, addProperty) => {
   switch (field.type) {
     case "boolean":
     case "number":
@@ -42145,7 +42169,7 @@ var extractAttribute = (attribute, field, imageCallback) => {
       if (field.list) {
         return extractScalar(extractExpression(attribute), field);
       } else {
-        return extractString(attribute, field);
+        return extractString(attribute, field, context, addProperty);
       }
     case "image":
       if (field.list) {
@@ -42155,18 +42179,35 @@ var extractAttribute = (attribute, field, imageCallback) => {
         );
         return values2.split(",").map((value) => imageCallback(value));
       } else {
-        const value = extractString(attribute, field);
+        const value = extractString(attribute, field, context, addProperty);
         return imageCallback(value);
       }
     case "reference":
       if (field.list) {
         return extractScalar(extractExpression(attribute), field);
       } else {
-        return extractString(attribute, field);
+        return extractString(attribute, field, context, addProperty);
       }
     case "object":
       return extractObject(extractExpression(attribute), field, imageCallback);
     case "rich-text":
+      if (attribute.type === "mdxJsxAttribute") {
+        if (typeof attribute.value === "string") {
+          if (attribute.value.startsWith("_tinaEmbeds")) {
+            const embedValue = context?._tinaEmbeds;
+            const key = attribute.value.split(".")[1];
+            if (typeof key !== "string") {
+              throw new Error(`Unable to extract key from embed value`);
+            }
+            const value = embedValue[key];
+            if (typeof value === "string") {
+              const ast = parseMDX(value, field, imageCallback, context);
+              ast.embedCode = attribute.value.split(".")[1];
+              return ast;
+            }
+          }
+        }
+      }
       const JSXString = extractRaw(attribute);
       if (JSXString) {
         return parseMDX(JSXString, field, imageCallback);
@@ -42272,9 +42313,21 @@ var extractStatement = (attribute) => {
   }
   throw new Error(`Unable to extract body from expression`);
 };
-var extractString = (attribute, field) => {
+var extractString = (attribute, field, context, addProperty) => {
   if (attribute.type === "mdxJsxAttribute") {
     if (typeof attribute.value === "string") {
+      if (attribute.value.startsWith("_tinaEmbeds")) {
+        const embedValue = context?._tinaEmbeds;
+        const key = attribute.value.split(".")[1];
+        if (typeof key !== "string") {
+          throw new Error(`Unable to extract key from embed value`);
+        }
+        const value = embedValue[key];
+        if (typeof value === "string") {
+          addProperty?.(`_tinaEmbeds.${attribute.name}`, key);
+          return value;
+        }
+      }
       return attribute.value;
     }
   }
@@ -42399,7 +42452,7 @@ function source(value, file) {
 }
 
 // src/parse/mdx.ts
-function mdxJsxElement(node2, field, imageCallback) {
+function mdxJsxElement(node2, field, imageCallback, context) {
   try {
     const template = field.templates?.find((template2) => {
       const templateName = typeof template2 === "string" ? template2 : template2.name;
@@ -42419,7 +42472,8 @@ function mdxJsxElement(node2, field, imageCallback) {
     const props = extractAttributes(
       node2.attributes,
       template.fields,
-      imageCallback
+      imageCallback,
+      context
     );
     const childField = template.fields.find(
       (field2) => field2.name === "children"
@@ -42487,7 +42541,7 @@ var directiveElement = (node2, field, imageCallback, raw) => {
 };
 
 // src/parse/remarkToPlate.ts
-var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
+var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess, context) => {
   const mdxJsxElement2 = skipMDXProcess ? (node2) => node2 : mdxJsxElement;
   const content3 = (content4) => {
     switch (content4.type) {
@@ -42538,7 +42592,7 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
       case "paragraph":
         return paragraph2(content4);
       case "mdxJsxFlowElement":
-        return mdxJsxElement2(content4, field, imageCallback);
+        return mdxJsxElement2(content4, field, imageCallback, context);
       case "thematicBreak":
         return {
           type: "hr",
@@ -42634,7 +42688,8 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
                 mdxJsxElement2(
                   { ...child, type: "mdxJsxTextElement" },
                   field,
-                  imageCallback
+                  imageCallback,
+                  context
                 )
               ]
             };
@@ -42747,7 +42802,7 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
   const staticPhrasingContent = (content4) => {
     switch (content4.type) {
       case "mdxJsxTextElement":
-        return mdxJsxElement2(content4, field, imageCallback);
+        return mdxJsxElement2(content4, field, imageCallback, context);
       case "text":
         return text7(content4);
       case "inlineCode":
@@ -42767,12 +42822,14 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
     switch (content4.type) {
       case "text":
         return text7(content4);
+      case "delete":
+        return phrashingMark(content4);
       case "link":
         return link2(content4);
       case "image":
         return image2(content4);
       case "mdxJsxTextElement":
-        return mdxJsxElement2(content4, field, imageCallback);
+        return mdxJsxElement2(content4, field, imageCallback, context);
       case "emphasis":
         return phrashingMark(content4);
       case "strong":
@@ -42831,6 +42888,17 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
         });
         break;
       }
+      case "delete": {
+        const children = (0, import_lodash.default)(
+          node2.children.map(
+            (child) => phrashingMark(child, [...marks, "strikethrough"])
+          )
+        );
+        children.forEach((child) => {
+          accum.push(child);
+        });
+        break;
+      }
       case "strong": {
         const children = (0, import_lodash.default)(
           node2.children.map((child) => phrashingMark(child, [...marks, "bold"]))
@@ -43034,7 +43102,7 @@ var mdxToAst = (value) => {
   return remark().use(remarkMdx).use(remarkGfm).parse(value);
 };
 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";
-var parseMDX = (value, field, imageCallback) => {
+var parseMDX = (value, field, imageCallback, context) => {
   if (!value) {
     return { type: "root", children: [] };
   }
@@ -43059,7 +43127,7 @@ var parseMDX = (value, field, imageCallback) => {
     });
     tree = mdxToAst(preprocessedString);
     if (tree) {
-      return remarkToSlate(tree, field, imageCallback, value);
+      return remarkToSlate(tree, field, imageCallback, value, false, context);
     } else {
       return { type: "root", children: [] };
     }