@tinacms/mdx 2.0.7 → 2.1.0

package/dist/index.browser.js

@@ -40142,13 +40142,26 @@ var text5 = (content3) => {
     value: content3.text
   };
 };
+var markAttributes = (content3) => {
+  if (!content3.highlightColor) {
+    return [];
+  }
+  return [
+    {
+      type: "mdxJsxAttribute",
+      name: "style",
+      value: `background-color: ${content3.highlightColor}`
+    }
+  ];
+};
 var eat2 = (c, field, imageCallback) => {
   const content3 = replaceLinksWithTextNodes(c);
   const first = content3[0];
   if (!first) {
     return [];
   }
-  if (first && first?.type !== "text") {
+  const firstIsText = first.type === "text" || !first.type && typeof first.text === "string";
+  if (first && !firstIsText) {
     if (first.type === "a") {
       return [
         {
@@ -40224,6 +40237,20 @@ var eat2 = (c, field, imageCallback) => {
       ...eat2(content3.slice(1), field, imageCallback)
     ];
   }
+  if (markToProcess === "highlight") {
+    const f = first;
+    const innerText = text5({ text: f.text });
+    const child = first.linkifyTextNode ? first.linkifyTextNode(innerText) : innerText;
+    return [
+      {
+        type: "mdxJsxTextElement",
+        name: "mark",
+        attributes: markAttributes(f),
+        children: [child]
+      },
+      ...eat2(content3.slice(1), field, imageCallback)
+    ];
+  }
   if (markToProcess === "inlineCode") {
     if (nonMatchingSiblingIndex) {
       throw new Error("Marks inside inline code are not supported");
@@ -40264,7 +40291,8 @@ var cleanNode = (node2, mark) => {
     strong: "bold",
     emphasis: "italic",
     inlineCode: "code",
-    delete: "strikethrough"
+    delete: "strikethrough",
+    highlight: "highlight"
   }[mark];
   Object.entries(node2).map(([key, value]) => {
     if (key !== markToClear) {
@@ -40602,7 +40630,8 @@ var blockContentElement = (content3, field, imageCallback) => {
 };
 var getMarks = (content3) => {
   const marks = [];
-  if (content3.type !== "text") {
+  const isText = content3.type === "text" || !content3.type && typeof content3.text === "string";
+  if (!isText) {
     return [];
   }
   if (content3.bold) {
@@ -40617,6 +40646,9 @@ var getMarks = (content3) => {
   if (content3.strikethrough) {
     marks.push("delete");
   }
+  if (content3.highlight) {
+    marks.push("highlight");
+  }
   return marks;
 };
 
@@ -40951,13 +40983,26 @@ var text6 = (content3) => {
     value: content3.text
   };
 };
+var markAttributes2 = (content3) => {
+  if (!content3.highlightColor) {
+    return [];
+  }
+  return [
+    {
+      type: "mdxJsxAttribute",
+      name: "style",
+      value: `background-color: ${content3.highlightColor}`
+    }
+  ];
+};
 var eat3 = (c, field, imageCallback) => {
   const content3 = replaceLinksWithTextNodes2(c);
   const first = content3[0];
   if (!first) {
     return [];
   }
-  if (first && first?.type !== "text") {
+  const firstIsText = first.type === "text" || !first.type && typeof first.text === "string";
+  if (first && !firstIsText) {
     if (first.type === "a") {
       return [
         {
@@ -41032,6 +41077,23 @@ var eat3 = (c, field, imageCallback) => {
       ...eat3(content3.slice(1), field, imageCallback)
     ];
   }
+  if (markToProcess === "highlight") {
+    if (nonMatchingSiblingIndex) {
+      throw new Error("Marks inside highlight are not supported");
+    }
+    const f = first;
+    const innerText = text6({ text: f.text });
+    const child = first.linkifyTextNode ? first.linkifyTextNode(innerText) : innerText;
+    return [
+      {
+        type: "mdxJsxTextElement",
+        name: "mark",
+        attributes: markAttributes2(f),
+        children: [child]
+      },
+      ...eat3(content3.slice(nonMatchingSiblingIndex + 1), field, imageCallback)
+    ];
+  }
   if (markToProcess === "inlineCode") {
     const f = first;
     if (nonMatchingSiblingIndex) {
@@ -41072,7 +41134,8 @@ var cleanNode2 = (node2, mark) => {
     strong: "bold",
     emphasis: "italic",
     inlineCode: "code",
-    delete: "strikethrough"
+    delete: "strikethrough",
+    highlight: "highlight"
   }[mark];
   Object.entries(node2).map(([key, value]) => {
     if (key !== markToClear) {
@@ -42442,6 +42505,64 @@ var directiveElement = (node2, field, imageCallback, raw) => {
   };
 };
 
+// src/parse/mark.ts
+var getHighlightColorFromAttributes = (attributes2 = []) => {
+  const styleAttribute = attributes2.find(
+    (attribute) => attribute.type === "mdxJsxAttribute" && attribute.name === "style"
+  );
+  if (!styleAttribute || typeof styleAttribute.value !== "string") {
+    return void 0;
+  }
+  const backgroundColorMatch = /background-color:\s*([^;]+)/i.exec(
+    styleAttribute.value
+  );
+  return backgroundColorMatch?.[1]?.trim();
+};
+var parseMarkMdxText = (content3, extraMarks = {}, parseChild) => {
+  if (content3.name !== "mark") {
+    return null;
+  }
+  const highlightColor = getHighlightColorFromAttributes(content3.attributes);
+  const markProps = {
+    highlight: true,
+    ...highlightColor ? { highlightColor } : {},
+    ...extraMarks
+  };
+  return (content3.children || []).flatMap((child) => {
+    if (parseChild) {
+      return applyMarksToInlineElements(parseChild(child), markProps);
+    }
+    if (child.type === "text") {
+      return [
+        {
+          type: "text",
+          text: child.value,
+          ...markProps
+        }
+      ];
+    }
+    return [];
+  });
+};
+var applyMarksToInlineElements = (elements, marks) => {
+  const items = Array.isArray(elements) ? elements : [elements];
+  return items.map((item) => {
+    if (item.type === "text") {
+      return {
+        ...item,
+        ...marks
+      };
+    }
+    if (item.type === "a") {
+      return {
+        ...item,
+        children: applyMarksToInlineElements(item.children, marks)
+      };
+    }
+    return item;
+  });
+};
+
 // src/parse/remarkToPlate.ts
 var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
   const mdxJsxElement2 = skipMDXProcess ? (node2) => node2 : mdxJsxElement;
@@ -42691,7 +42812,11 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
   const staticPhrasingContent = (content4) => {
     switch (content4.type) {
       case "mdxJsxTextElement":
-        return mdxJsxElement2(content4, field, imageCallback);
+        return parseMarkMdxText(
+          content4,
+          {},
+          (child) => staticPhrasingContent(child)
+        ) ?? mdxJsxElement2(content4, field, imageCallback);
       case "text":
         return text7(content4);
       case "inlineCode":
@@ -42717,8 +42842,17 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
         return link2(content4);
       case "image":
         return image2(content4);
-      case "mdxJsxTextElement":
+      case "mdxJsxTextElement": {
+        const markNodes = parseMarkMdxText(
+          content4,
+          {},
+          (child) => phrasingContent(child)
+        );
+        if (markNodes) {
+          return markNodes;
+        }
         return mdxJsxElement2(content4, field, imageCallback);
+      }
       case "emphasis":
         return phrashingMark(content4);
       case "strong":
@@ -42757,6 +42891,7 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
   const phrashingMark = (node2, marks = []) => {
     const accum = [];
     switch (node2.type) {
+      // @ts-ignore
       case "emphasis": {
         const children = node2.children.map((child) => phrashingMark(child, [...marks, "italic"])).flat();
         children.forEach((child) => {
@@ -42808,6 +42943,23 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
         marks.forEach((mark) => markProps[mark] = true);
         accum.push({ type: "text", text: node2.value, ...markProps });
         break;
+      case "mdxJsxTextElement": {
+        const jsxMark = parseMarkMdxText(
+          node2,
+          Object.fromEntries(marks.map((mark) => [mark, true])),
+          (child) => phrasingContent(child)
+        );
+        if (jsxMark) {
+          accum.push(...jsxMark);
+          break;
+        }
+        accum.push(mdxJsxElement2(node2, field, imageCallback));
+        break;
+      }
+      case "html": {
+        accum.push(html_inline(node2));
+        break;
+      }
       /**
        * Eg. this is a line break
        *                 vv

package/dist/index.js

@@ -42008,13 +42008,26 @@ var text5 = (content3) => {
     value: content3.text
   };
 };
+var markAttributes = (content3) => {
+  if (!content3.highlightColor) {
+    return [];
+  }
+  return [
+    {
+      type: "mdxJsxAttribute",
+      name: "style",
+      value: `background-color: ${content3.highlightColor}`
+    }
+  ];
+};
 var eat2 = (c, field, imageCallback) => {
   const content3 = replaceLinksWithTextNodes(c);
   const first = content3[0];
   if (!first) {
     return [];
   }
-  if (first && first?.type !== "text") {
+  const firstIsText = first.type === "text" || !first.type && typeof first.text === "string";
+  if (first && !firstIsText) {
     if (first.type === "a") {
       return [
         {
@@ -42090,6 +42103,20 @@ var eat2 = (c, field, imageCallback) => {
       ...eat2(content3.slice(1), field, imageCallback)
     ];
   }
+  if (markToProcess === "highlight") {
+    const f = first;
+    const innerText = text5({ text: f.text });
+    const child = first.linkifyTextNode ? first.linkifyTextNode(innerText) : innerText;
+    return [
+      {
+        type: "mdxJsxTextElement",
+        name: "mark",
+        attributes: markAttributes(f),
+        children: [child]
+      },
+      ...eat2(content3.slice(1), field, imageCallback)
+    ];
+  }
   if (markToProcess === "inlineCode") {
     if (nonMatchingSiblingIndex) {
       throw new Error("Marks inside inline code are not supported");
@@ -42130,7 +42157,8 @@ var cleanNode = (node2, mark) => {
     strong: "bold",
     emphasis: "italic",
     inlineCode: "code",
-    delete: "strikethrough"
+    delete: "strikethrough",
+    highlight: "highlight"
   }[mark];
   Object.entries(node2).map(([key, value]) => {
     if (key !== markToClear) {
@@ -42468,7 +42496,8 @@ var blockContentElement = (content3, field, imageCallback) => {
 };
 var getMarks = (content3) => {
   const marks = [];
-  if (content3.type !== "text") {
+  const isText = content3.type === "text" || !content3.type && typeof content3.text === "string";
+  if (!isText) {
     return [];
   }
   if (content3.bold) {
@@ -42483,6 +42512,9 @@ var getMarks = (content3) => {
   if (content3.strikethrough) {
     marks.push("delete");
   }
+  if (content3.highlight) {
+    marks.push("highlight");
+  }
   return marks;
 };
 
@@ -42817,13 +42849,26 @@ var text6 = (content3) => {
     value: content3.text
   };
 };
+var markAttributes2 = (content3) => {
+  if (!content3.highlightColor) {
+    return [];
+  }
+  return [
+    {
+      type: "mdxJsxAttribute",
+      name: "style",
+      value: `background-color: ${content3.highlightColor}`
+    }
+  ];
+};
 var eat3 = (c, field, imageCallback) => {
   const content3 = replaceLinksWithTextNodes2(c);
   const first = content3[0];
   if (!first) {
     return [];
   }
-  if (first && first?.type !== "text") {
+  const firstIsText = first.type === "text" || !first.type && typeof first.text === "string";
+  if (first && !firstIsText) {
     if (first.type === "a") {
       return [
         {
@@ -42898,6 +42943,23 @@ var eat3 = (c, field, imageCallback) => {
       ...eat3(content3.slice(1), field, imageCallback)
     ];
   }
+  if (markToProcess === "highlight") {
+    if (nonMatchingSiblingIndex) {
+      throw new Error("Marks inside highlight are not supported");
+    }
+    const f = first;
+    const innerText = text6({ text: f.text });
+    const child = first.linkifyTextNode ? first.linkifyTextNode(innerText) : innerText;
+    return [
+      {
+        type: "mdxJsxTextElement",
+        name: "mark",
+        attributes: markAttributes2(f),
+        children: [child]
+      },
+      ...eat3(content3.slice(nonMatchingSiblingIndex + 1), field, imageCallback)
+    ];
+  }
   if (markToProcess === "inlineCode") {
     const f = first;
     if (nonMatchingSiblingIndex) {
@@ -42938,7 +43000,8 @@ var cleanNode2 = (node2, mark) => {
     strong: "bold",
     emphasis: "italic",
     inlineCode: "code",
-    delete: "strikethrough"
+    delete: "strikethrough",
+    highlight: "highlight"
   }[mark];
   Object.entries(node2).map(([key, value]) => {
     if (key !== markToClear) {
@@ -44308,6 +44371,64 @@ var directiveElement = (node2, field, imageCallback, raw) => {
   };
 };
 
+// src/parse/mark.ts
+var getHighlightColorFromAttributes = (attributes2 = []) => {
+  const styleAttribute = attributes2.find(
+    (attribute) => attribute.type === "mdxJsxAttribute" && attribute.name === "style"
+  );
+  if (!styleAttribute || typeof styleAttribute.value !== "string") {
+    return void 0;
+  }
+  const backgroundColorMatch = /background-color:\s*([^;]+)/i.exec(
+    styleAttribute.value
+  );
+  return backgroundColorMatch?.[1]?.trim();
+};
+var parseMarkMdxText = (content3, extraMarks = {}, parseChild) => {
+  if (content3.name !== "mark") {
+    return null;
+  }
+  const highlightColor = getHighlightColorFromAttributes(content3.attributes);
+  const markProps = {
+    highlight: true,
+    ...highlightColor ? { highlightColor } : {},
+    ...extraMarks
+  };
+  return (content3.children || []).flatMap((child) => {
+    if (parseChild) {
+      return applyMarksToInlineElements(parseChild(child), markProps);
+    }
+    if (child.type === "text") {
+      return [
+        {
+          type: "text",
+          text: child.value,
+          ...markProps
+        }
+      ];
+    }
+    return [];
+  });
+};
+var applyMarksToInlineElements = (elements, marks) => {
+  const items = Array.isArray(elements) ? elements : [elements];
+  return items.map((item) => {
+    if (item.type === "text") {
+      return {
+        ...item,
+        ...marks
+      };
+    }
+    if (item.type === "a") {
+      return {
+        ...item,
+        children: applyMarksToInlineElements(item.children, marks)
+      };
+    }
+    return item;
+  });
+};
+
 // src/parse/remarkToPlate.ts
 var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
   const mdxJsxElement2 = skipMDXProcess ? (node2) => node2 : mdxJsxElement;
@@ -44557,7 +44678,11 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
   const staticPhrasingContent = (content4) => {
     switch (content4.type) {
       case "mdxJsxTextElement":
-        return mdxJsxElement2(content4, field, imageCallback);
+        return parseMarkMdxText(
+          content4,
+          {},
+          (child) => staticPhrasingContent(child)
+        ) ?? mdxJsxElement2(content4, field, imageCallback);
       case "text":
         return text7(content4);
       case "inlineCode":
@@ -44583,8 +44708,17 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
         return link2(content4);
       case "image":
         return image2(content4);
-      case "mdxJsxTextElement":
+      case "mdxJsxTextElement": {
+        const markNodes = parseMarkMdxText(
+          content4,
+          {},
+          (child) => phrasingContent(child)
+        );
+        if (markNodes) {
+          return markNodes;
+        }
         return mdxJsxElement2(content4, field, imageCallback);
+      }
       case "emphasis":
         return phrashingMark(content4);
       case "strong":
@@ -44623,6 +44757,7 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
   const phrashingMark = (node2, marks = []) => {
     const accum = [];
     switch (node2.type) {
+      // @ts-ignore
       case "emphasis": {
         const children = node2.children.map((child) => phrashingMark(child, [...marks, "italic"])).flat();
         children.forEach((child) => {
@@ -44674,6 +44809,23 @@ var remarkToSlate = (root2, field, imageCallback, raw, skipMDXProcess) => {
         marks.forEach((mark) => markProps[mark] = true);
         accum.push({ type: "text", text: node2.value, ...markProps });
         break;
+      case "mdxJsxTextElement": {
+        const jsxMark = parseMarkMdxText(
+          node2,
+          Object.fromEntries(marks.map((mark) => [mark, true])),
+          (child) => phrasingContent(child)
+        );
+        if (jsxMark) {
+          accum.push(...jsxMark);
+          break;
+        }
+        accum.push(mdxJsxElement2(node2, field, imageCallback));
+        break;
+      }
+      case "html": {
+        accum.push(html_inline(node2));
+        break;
+      }
       /**
        * Eg. this is a line break
        *                 vv

package/dist/next/tests/markdown-basic-marks-highlight/field.d.ts

@@ -0,0 +1,2 @@
+import type { RichTextField } from '@tinacms/schema-tools';
+export declare const field: RichTextField;

package/dist/next/tests/markdown-basic-marks-highlight/index.test.d.ts

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

package/dist/parse/mark.d.ts

@@ -0,0 +1,7 @@
+import type * as Plate from './plate';
+import type { PhrasingContent } from 'mdast';
+import type { MdxJsxAttribute, MdxJsxExpressionAttribute, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
+export declare const getHighlightColorFromAttributes: (attributes?: (MdxJsxAttribute | MdxJsxExpressionAttribute)[]) => string | undefined;
+export declare const parseMarkMdxText: <TChild extends PhrasingContent = PhrasingContent>(content: MdxJsxTextElement & {
+    children?: TChild[];
+}, extraMarks?: Record<string, boolean | string>, parseChild?: (child: TChild) => Plate.InlineElement | Plate.InlineElement[]) => Plate.InlineElement[] | null;

package/dist/parse/plate.d.ts

@@ -177,6 +177,8 @@ export type TextElement = {
     italic?: boolean;
     code?: boolean;
     strikethrough?: boolean;
+    highlight?: boolean;
+    highlightColor?: string;
 };
 /**
  * @remarks

package/dist/stringify/index.d.ts

@@ -28,5 +28,5 @@ export declare const toTinaMarkdown: (tree: Md.Root, field: RichTextType) => str
 export declare const rootElement: (content: Plate.RootElement, field: RichTextType, imageCallback: (url: string) => string) => Md.Root;
 export declare function codeLinesToString(content: Plate.CodeBlockElement): string;
 export declare const blockElement: (content: Plate.BlockElement, field: RichTextType, imageCallback: (url: string) => string) => Md.Content | null;
-export type Marks = 'strong' | 'emphasis' | 'inlineCode' | 'delete';
+export type Marks = 'strong' | 'emphasis' | 'inlineCode' | 'delete' | 'highlight';
 export declare const getMarks: (content: Plate.InlineElement) => Marks[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/mdx",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -42,7 +42,7 @@
     "micromark-factory-whitespace": "1.0.0",
     "micromark-util-character": "1.1.0",
     "micromark-util-symbol": "1.0.1",
-    "micromark-util-types": "1.0.2",
+    "micromark-util-types": "1.1.0",
     "parse-entities": "4.0.1",
     "prettier": "^2.8.8",
     "remark": "14.0.2",
@@ -78,7 +78,7 @@
     "typescript": "^5.7.3",
     "vite": "^4.5.9",
     "vitest": "^0.32.4",
-    "@tinacms/scripts": "1.5.0"
+    "@tinacms/scripts": "1.6.0"
   },
   "scripts": {
     "types": "tsc",