@tinacms/mdx 2.3.0 → 2.4.0

package/dist/index.browser.js

@@ -21210,10 +21210,108 @@ function isObject(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
-// src/stringify/marks.ts
-var matches = (a, b) => {
-  return a.some((v) => b.includes(v));
+// src/sanitize-css-color.ts
+var COLOR_FUNCTIONS = /* @__PURE__ */ new Set([
+  "rgb",
+  "rgba",
+  "hsl",
+  "hsla",
+  "hwb",
+  "lab",
+  "lch",
+  "oklab",
+  "oklch",
+  "color",
+  "color-mix",
+  "light-dark",
+  "calc",
+  "var"
+]);
+var isSafeColorFunction = (value) => {
+  if (!/^[a-z-]+\([a-z0-9_.,%/#() +-]*\)$/i.test(value)) {
+    return false;
+  }
+  let depth = 0;
+  for (const [token, name2 = ""] of value.matchAll(/([a-z-]*)\(|\)/gi)) {
+    if (token === ")") {
+      depth--;
+    } else if (COLOR_FUNCTIONS.has(name2.toLowerCase())) {
+      depth++;
+    } else {
+      return false;
+    }
+    if (depth < 0) {
+      return false;
+    }
+  }
+  return depth === 0;
+};
+var isSafeCssColor = (value) => {
+  const trimmed = value.trim();
+  const color3 = trimmed.toLowerCase().endsWith("!important") ? trimmed.slice(0, -"!important".length).trimEnd() : trimmed;
+  return /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color3) || /^[a-z]+$/i.test(color3) || isSafeColorFunction(color3);
+};
+
+// src/stringify/text-color.ts
+var safeTextColor = ({ textColor }) => textColor && isSafeCssColor(textColor) ? textColor : void 0;
+var wrapColor = (content3, node2, wrap2) => {
+  const color3 = safeTextColor(content3);
+  if (!color3) {
+    return [node2];
+  }
+  if (node2.type !== "text") {
+    return wrap2(color3, node2);
+  }
+  const { value } = node2;
+  const core2 = value.trim();
+  const lead = value.slice(0, value.length - value.trimStart().length);
+  const trail2 = value.slice(value.trimEnd().length);
+  if (!core2) {
+    return [node2];
+  }
+  return [
+    ...lead ? [{ type: "text", value: lead }] : [],
+    ...wrap2(color3, { type: "text", value: core2 }),
+    ...trail2 ? [{ type: "text", value: trail2 }] : []
+  ];
+};
+var textColorElement = (content3, node2) => wrapColor(content3, node2, (color3, child) => [
+  {
+    type: "mdxJsxTextElement",
+    name: "span",
+    attributes: [
+      {
+        type: "mdxJsxAttribute",
+        name: "style",
+        value: {
+          type: "mdxJsxAttributeValueExpression",
+          value: `{ color: ${JSON.stringify(color3)} }`
+        }
+      }
+    ],
+    children: [child]
+  }
+]);
+var textColorHtml = (content3, node2) => wrapColor(content3, node2, (color3, child) => [
+  { type: "html", value: `<span style="color: ${color3}">` },
+  child,
+  { type: "html", value: "</span>" }
+]);
+var longestMarkRun = (content3, marks) => {
+  let markToProcess;
+  let runLength = 0;
+  for (const mark of marks) {
+    const end = content3.findIndex((node2) => !getMarks(node2).includes(mark));
+    const length = end === -1 ? content3.length : end;
+    if (length > runLength) {
+      markToProcess = mark;
+      runLength = length;
+    }
+  }
+  return { markToProcess, runLength };
 };
+
+// src/stringify/marks.ts
 var replaceLinksWithTextNodes = (content3) => {
   const newItems = [];
   content3?.forEach((item) => {
@@ -21338,108 +21436,61 @@ var eat2 = (c, field, imageCallback) => {
       ...eat2(content3.slice(1), field, imageCallback)
     ];
   }
-  const marks = getMarks(first);
-  if (marks.length === 0) {
-    if (first.linkifyTextNode) {
-      const f = first;
-      return [
-        first.linkifyTextNode(text5({ text: f.text })),
-        ...eat2(content3.slice(1), field, imageCallback)
-      ];
-    } else {
-      const f = first;
-      return [
-        text5({ text: f.text }),
-        ...eat2(content3.slice(1), field, imageCallback)
-      ];
-    }
-  }
-  let nonMatchingSiblingIndex = 0;
-  if (content3.slice(1).every((content4, index2) => {
-    if (matches(marks, getMarks(content4))) {
-      return true;
-    } else {
-      nonMatchingSiblingIndex = index2;
-      return false;
-    }
-  })) {
-    nonMatchingSiblingIndex = content3.length - 1;
-  }
-  const matchingSiblings = content3.slice(1, nonMatchingSiblingIndex + 1);
-  const markCounts = {};
-  marks.forEach((mark) => {
-    let count2 = 1;
-    matchingSiblings.every((sibling2, index2) => {
-      if (getMarks(sibling2).includes(mark)) {
-        count2 = index2 + 1;
-        return true;
-      }
-    });
-    markCounts[mark] = count2;
-  });
-  let count = 0;
-  let markToProcess = null;
-  Object.entries(markCounts).forEach(([mark, markCount]) => {
-    const m = mark;
-    if (markCount > count) {
-      count = markCount;
-      markToProcess = m;
-    }
-  });
-  if (!markToProcess) {
-    const f = first;
+  const textNode = first;
+  const { markToProcess, runLength } = longestMarkRun(
+    content3,
+    getMarks(textNode).filter(
+      (mark) => mark !== "highlight"
+    )
+  );
+  if (!markToProcess && !textNode.highlight) {
     return [
-      text5({ text: f.text }),
+      ...leaf(textNode, text5(textNode)),
       ...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;
+  if (!markToProcess) {
     return [
       {
         type: "mdxJsxTextElement",
         name: "mark",
-        attributes: markAttributes(f),
-        children: [child]
+        attributes: markAttributes(textNode),
+        children: leaf(textNode, text5(textNode))
       },
       ...eat2(content3.slice(1), field, imageCallback)
     ];
   }
   if (markToProcess === "inlineCode") {
-    if (nonMatchingSiblingIndex) {
+    if (runLength > 1) {
       throw new Error(
         "Inline code can't have other formatting on it. Remove the formatting from the code text."
       );
     }
-    const f = first;
-    const node2 = {
-      type: markToProcess,
-      value: f.text
-    };
     return [
-      // @ts-ignore
-      first.linkifyTextNode?.(node2) ?? node2,
-      ...eat2(content3.slice(nonMatchingSiblingIndex + 1), field, imageCallback)
+      ...leaf(textNode, { type: "inlineCode", value: textNode.text }),
+      ...eat2(content3.slice(1), field, imageCallback)
     ];
   }
   return [
     {
       type: markToProcess,
       children: eat2(
-        [
-          ...[first, ...matchingSiblings].map(
-            (sibling2) => cleanNode(sibling2, markToProcess)
-          )
-        ],
+        content3.slice(0, runLength).map((sibling2) => cleanNode(sibling2, markToProcess)),
         field,
         imageCallback
       )
     },
-    ...eat2(content3.slice(nonMatchingSiblingIndex + 1), field, imageCallback)
+    ...eat2(content3.slice(runLength), field, imageCallback)
   ];
 };
+var leaf = (first, node2) => {
+  return first.linkifyTextNode ? [
+    {
+      ...first.linkifyTextNode({ type: "text", value: "" }),
+      children: textColorElement(first, node2)
+    }
+  ] : textColorElement(first, node2);
+};
 var cleanNode = (node2, mark) => {
   if (!mark) {
     return node2;
@@ -21817,9 +21868,6 @@ var getMarks = (content3) => {
 };
 
 // src/next/stringify/marks.ts
-var matches2 = (a, b) => {
-  return a.some((v) => b.includes(v));
-};
 var replaceLinksWithTextNodes2 = (content3) => {
   const newItems = [];
   content3?.forEach((item) => {
@@ -21951,112 +21999,65 @@ var eat3 = (c, field, imageCallback) => {
       ...eat3(content3.slice(1), field, imageCallback)
     ];
   }
-  const marks = getMarks(first);
-  if (marks.length === 0) {
-    const f = first;
-    if (first.linkifyTextNode) {
-      return [
-        first.linkifyTextNode(text6({ text: f.text })),
-        ...eat3(content3.slice(1), field, imageCallback)
-      ];
-    } else {
-      return [
-        text6({ text: f.text }),
-        ...eat3(content3.slice(1), field, imageCallback)
-      ];
-    }
-  }
-  let nonMatchingSiblingIndex = 0;
-  if (content3.slice(1).every((content4, index2) => {
-    if (matches2(marks, getMarks(content4))) {
-      return true;
-    } else {
-      nonMatchingSiblingIndex = index2;
-      return false;
-    }
-  })) {
-    nonMatchingSiblingIndex = content3.length - 1;
-  }
-  const matchingSiblings = content3.slice(1, nonMatchingSiblingIndex + 1);
-  const markCounts = {};
-  marks.forEach((mark) => {
-    let count2 = 1;
-    matchingSiblings.every((sibling2, index2) => {
-      if (getMarks(sibling2).includes(mark)) {
-        count2 = index2 + 1;
-        return true;
-      }
-    });
-    markCounts[mark] = count2;
-  });
-  let count = 0;
-  let markToProcess = null;
-  Object.entries(markCounts).forEach(([mark, markCount]) => {
-    const m = mark;
-    if (markCount > count) {
-      count = markCount;
-      markToProcess = m;
-    }
-  });
+  const textNode = first;
+  const { markToProcess, runLength } = longestMarkRun(
+    content3,
+    getMarks(textNode)
+  );
   if (!markToProcess) {
-    const f = first;
     return [
-      text6({ text: f.text }),
+      ...leaf2(textNode, text6(textNode)),
       ...eat3(content3.slice(1), field, imageCallback)
     ];
   }
   if (markToProcess === "highlight") {
-    if (nonMatchingSiblingIndex) {
+    if (runLength > 1) {
       throw new Error(
         "Highlighted text can't have other formatting on it. Remove the formatting from the highlighted text."
       );
     }
-    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]
+        attributes: markAttributes2(textNode),
+        children: leaf2(textNode, text6(textNode))
       },
-      ...eat3(content3.slice(nonMatchingSiblingIndex + 1), field, imageCallback)
+      ...eat3(content3.slice(1), field, imageCallback)
     ];
   }
   if (markToProcess === "inlineCode") {
-    const f = first;
-    if (nonMatchingSiblingIndex) {
+    if (runLength > 1) {
       throw new Error(
         "Inline code can't have other formatting on it. Remove the formatting from the code text."
       );
     }
-    const node2 = {
-      type: markToProcess,
-      value: f.text
-    };
     return [
-      // @ts-ignore
-      first.linkifyTextNode?.(node2) ?? node2,
-      ...eat3(content3.slice(nonMatchingSiblingIndex + 1), field, imageCallback)
+      ...leaf2(textNode, { type: "inlineCode", value: textNode.text }),
+      ...eat3(content3.slice(1), field, imageCallback)
     ];
   }
   return [
     {
       type: markToProcess,
       children: eat3(
-        [
-          ...[first, ...matchingSiblings].map(
-            (sibling2) => cleanNode2(sibling2, markToProcess)
-          )
-        ],
+        content3.slice(0, runLength).map((sibling2) => cleanNode2(sibling2, markToProcess)),
         field,
         imageCallback
       )
     },
-    ...eat3(content3.slice(nonMatchingSiblingIndex + 1), field, imageCallback)
+    ...eat3(content3.slice(runLength), field, imageCallback)
   ];
 };
+var leaf2 = (first, node2) => {
+  const children = textColorHtml(first, node2);
+  return first.linkifyTextNode ? [
+    {
+      ...first.linkifyTextNode({ type: "text", value: "" }),
+      children
+    }
+  ] : children;
+};
 var cleanNode2 = (node2, mark) => {
   if (!mark) {
     return node2;
@@ -23595,6 +23596,49 @@ var sanitizeUrl = (url) => {
 };
 
 // src/parse/mark.ts
+var readDeclarations = (declarations) => {
+  const colors = {};
+  let extra = false;
+  for (const [key, value] of declarations) {
+    if (key === "color" && value !== null && isSafeCssColor(value)) {
+      colors.color = value;
+    } else {
+      extra = true;
+    }
+  }
+  return { colors, extra };
+};
+var readStringStyle = (value) => readDeclarations(
+  value.split(";").filter((part) => part.trim()).map((declaration) => {
+    const [key = "", ...rest] = declaration.split(":");
+    return [key.trim().toLowerCase(), rest.join(":").trim()];
+  })
+);
+var readExpressionStyle = (value) => {
+  const [statement, ...others] = value.data?.estree?.body ?? [];
+  if (others.length || statement?.type !== "ExpressionStatement" || statement.expression.type !== "ObjectExpression") {
+    return { colors: {}, extra: true };
+  }
+  return readDeclarations(
+    statement.expression.properties.map((property) => {
+      if (property.type !== "Property" || property.computed || property.kind !== "init" || property.value.type !== "Literal" || typeof property.value.value !== "string") {
+        return ["", null];
+      }
+      const key = property.key.type === "Identifier" ? property.key.name : property.key.type === "Literal" ? String(property.key.value) : "";
+      return [key, property.value.value];
+    })
+  );
+};
+var readColorStyle = (attributes2 = []) => {
+  const styleAttribute = attributes2.find(
+    (attribute) => attribute.type === "mdxJsxAttribute" && attribute.name === "style"
+  );
+  const value = styleAttribute?.value;
+  if (value === null || value === void 0) {
+    return { colors: {}, extra: false };
+  }
+  return typeof value === "string" ? readStringStyle(value) : readExpressionStyle(value);
+};
 var getHighlightColorFromAttributes = (attributes2 = []) => {
   const styleAttribute = attributes2.find(
     (attribute) => attribute.type === "mdxJsxAttribute" && attribute.name === "style"
@@ -23621,16 +23665,23 @@ var getHighlightColorFromAttributes = (attributes2 = []) => {
   }
   return void 0;
 };
+var getColorMarks = (content3) => {
+  if (content3.name === "mark") {
+    const highlightColor = getHighlightColorFromAttributes(content3.attributes);
+    return { highlight: true, ...highlightColor ? { highlightColor } : {} };
+  }
+  const { colors, extra } = readColorStyle(content3.attributes);
+  if (content3.name === "span" && !extra && (content3.attributes ?? []).length === 1 && colors.color) {
+    return { textColor: colors.color };
+  }
+  return null;
+};
 var parseMarkMdxText = (content3, extraMarks = {}, parseChild) => {
-  if (content3.name !== "mark") {
+  const colorMarks = getColorMarks(content3);
+  if (!colorMarks) {
     return null;
   }
-  const highlightColor = getHighlightColorFromAttributes(content3.attributes);
-  const markProps = {
-    highlight: true,
-    ...highlightColor ? { highlightColor } : {},
-    ...extraMarks
-  };
+  const markProps = { ...colorMarks, ...extraMarks };
   return (content3.children || []).flatMap((child) => {
     if (parseChild) {
       return applyMarksToInlineElements(parseChild(child), markProps);
@@ -23647,13 +23698,15 @@ var parseMarkMdxText = (content3, extraMarks = {}, parseChild) => {
     return [];
   });
 };
+var innerColor = ({ textColor }) => textColor === void 0 ? {} : { textColor };
 var applyMarksToInlineElements = (elements, marks) => {
   const items = Array.isArray(elements) ? elements : [elements];
   return items.map((item) => {
     if (item.type === "text") {
       return {
         ...item,
-        ...marks
+        ...marks,
+        ...innerColor(item)
       };
     }
     if (item.type === "a") {
@@ -24530,6 +24583,84 @@ var RichTextParseError = class _RichTextParseError extends Error {
   }
 };
 
+// src/next/parse/color-marks.ts
+var OPEN_TAG = /^<(span)(?:\s+style=(?:"([^"]*)"|'([^']*)'))?\s*>$/i;
+var isHtml = (node2) => node2?.type === "html";
+var isParent2 = (node2) => Array.isArray(node2.children);
+var openColorMark = (html2) => {
+  const match = OPEN_TAG.exec(html2.value.trim());
+  if (!match) {
+    return null;
+  }
+  const [, name2 = "", double, single] = match;
+  const style = double ?? single;
+  const element2 = {
+    type: "mdxJsxTextElement",
+    name: name2.toLowerCase(),
+    attributes: style === void 0 ? [] : [{ type: "mdxJsxAttribute", name: "style", value: style }],
+    children: []
+  };
+  return getColorMarks(element2) ? element2 : null;
+};
+var findClosingTag = (siblings, start3, name2) => {
+  let depth = 0;
+  for (let index2 = start3; index2 < siblings.length; index2++) {
+    const sibling2 = siblings[index2];
+    if (!isHtml(sibling2)) {
+      continue;
+    }
+    const value = sibling2.value.trim().toLowerCase();
+    if (new RegExp(`^<${name2}[\\s>]`).test(value)) {
+      depth++;
+    } else if (value === `</${name2}>`) {
+      depth--;
+      if (depth === 0) {
+        return index2;
+      }
+    }
+  }
+  return -1;
+};
+var PHRASING_PARENTS = /* @__PURE__ */ new Set([
+  "paragraph",
+  "heading",
+  "emphasis",
+  "strong",
+  "delete",
+  "link",
+  "tableCell"
+]);
+var foldSiblings = (siblings) => {
+  const folded = [];
+  for (let index2 = 0; index2 < siblings.length; index2++) {
+    const sibling2 = siblings[index2];
+    if (!sibling2) {
+      continue;
+    }
+    const element2 = isHtml(sibling2) ? openColorMark(sibling2) : null;
+    const close = element2 ? findClosingTag(siblings, index2, element2.name ?? "") : -1;
+    if (element2 && close !== -1) {
+      element2.children = foldSiblings(
+        siblings.slice(index2 + 1, close)
+      );
+      folded.push(element2);
+      index2 = close;
+      continue;
+    }
+    folded.push(sibling2);
+  }
+  return folded;
+};
+var foldColorMarkHtml = (node2) => {
+  if (isParent2(node2)) {
+    if (PHRASING_PARENTS.has(node2.type)) {
+      node2.children = foldSiblings(node2.children);
+    }
+    node2.children.forEach(foldColorMarkHtml);
+  }
+  return node2;
+};
+
 // src/next/parse/post-processing.ts
 var postProcessor = (tree, field, imageCallback) => {
   const addPropsToMdxFlow = (node2) => {
@@ -24567,7 +24698,7 @@ var postProcessor = (tree, field, imageCallback) => {
   };
   visit(tree, "mdxJsxFlowElement", addPropsToMdxFlow);
   visit(tree, "mdxJsxTextElement", addPropsToMdxFlow);
-  return remarkToSlate(tree, field, imageCallback, "", true);
+  return remarkToSlate(foldColorMarkHtml(tree), field, imageCallback, "", true);
 };
 
 // src/next/parse/index.ts

package/dist/index.js

@@ -23076,10 +23076,108 @@ function isObject(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
-// src/stringify/marks.ts
-var matches = (a, b) => {
-  return a.some((v) => b.includes(v));
+// src/sanitize-css-color.ts
+var COLOR_FUNCTIONS = /* @__PURE__ */ new Set([
+  "rgb",
+  "rgba",
+  "hsl",
+  "hsla",
+  "hwb",
+  "lab",
+  "lch",
+  "oklab",
+  "oklch",
+  "color",
+  "color-mix",
+  "light-dark",
+  "calc",
+  "var"
+]);
+var isSafeColorFunction = (value) => {
+  if (!/^[a-z-]+\([a-z0-9_.,%/#() +-]*\)$/i.test(value)) {
+    return false;
+  }
+  let depth = 0;
+  for (const [token, name2 = ""] of value.matchAll(/([a-z-]*)\(|\)/gi)) {
+    if (token === ")") {
+      depth--;
+    } else if (COLOR_FUNCTIONS.has(name2.toLowerCase())) {
+      depth++;
+    } else {
+      return false;
+    }
+    if (depth < 0) {
+      return false;
+    }
+  }
+  return depth === 0;
+};
+var isSafeCssColor = (value) => {
+  const trimmed = value.trim();
+  const color3 = trimmed.toLowerCase().endsWith("!important") ? trimmed.slice(0, -"!important".length).trimEnd() : trimmed;
+  return /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color3) || /^[a-z]+$/i.test(color3) || isSafeColorFunction(color3);
+};
+
+// src/stringify/text-color.ts
+var safeTextColor = ({ textColor }) => textColor && isSafeCssColor(textColor) ? textColor : void 0;
+var wrapColor = (content3, node2, wrap2) => {
+  const color3 = safeTextColor(content3);
+  if (!color3) {
+    return [node2];
+  }
+  if (node2.type !== "text") {
+    return wrap2(color3, node2);
+  }
+  const { value } = node2;
+  const core2 = value.trim();
+  const lead = value.slice(0, value.length - value.trimStart().length);
+  const trail2 = value.slice(value.trimEnd().length);
+  if (!core2) {
+    return [node2];
+  }
+  return [
+    ...lead ? [{ type: "text", value: lead }] : [],
+    ...wrap2(color3, { type: "text", value: core2 }),
+    ...trail2 ? [{ type: "text", value: trail2 }] : []
+  ];
+};
+var textColorElement = (content3, node2) => wrapColor(content3, node2, (color3, child) => [
+  {
+    type: "mdxJsxTextElement",
+    name: "span",
+    attributes: [
+      {
+        type: "mdxJsxAttribute",
+        name: "style",
+        value: {
+          type: "mdxJsxAttributeValueExpression",
+          value: `{ color: ${JSON.stringify(color3)} }`
+        }
+      }
+    ],
+    children: [child]
+  }
+]);
+var textColorHtml = (content3, node2) => wrapColor(content3, node2, (color3, child) => [
+  { type: "html", value: `<span style="color: ${color3}">` },
+  child,
+  { type: "html", value: "</span>" }
+]);
+var longestMarkRun = (content3, marks) => {
+  let markToProcess;
+  let runLength = 0;
+  for (const mark of marks) {
+    const end = content3.findIndex((node2) => !getMarks(node2).includes(mark));
+    const length = end === -1 ? content3.length : end;
+    if (length > runLength) {
+      markToProcess = mark;
+      runLength = length;
+    }
+  }
+  return { markToProcess, runLength };
 };
+
+// src/stringify/marks.ts
 var replaceLinksWithTextNodes = (content3) => {
   const newItems = [];
   content3?.forEach((item) => {
@@ -23204,108 +23302,61 @@ var eat2 = (c, field, imageCallback) => {
       ...eat2(content3.slice(1), field, imageCallback)
     ];
   }
-  const marks = getMarks(first);
-  if (marks.length === 0) {
-    if (first.linkifyTextNode) {
-      const f = first;
-      return [
-        first.linkifyTextNode(text5({ text: f.text })),
-        ...eat2(content3.slice(1), field, imageCallback)
-      ];
-    } else {
-      const f = first;
-      return [
-        text5({ text: f.text }),
-        ...eat2(content3.slice(1), field, imageCallback)
-      ];
-    }
-  }
-  let nonMatchingSiblingIndex = 0;
-  if (content3.slice(1).every((content4, index2) => {
-    if (matches(marks, getMarks(content4))) {
-      return true;
-    } else {
-      nonMatchingSiblingIndex = index2;
-      return false;
-    }
-  })) {
-    nonMatchingSiblingIndex = content3.length - 1;
-  }
-  const matchingSiblings = content3.slice(1, nonMatchingSiblingIndex + 1);
-  const markCounts = {};
-  marks.forEach((mark) => {
-    let count2 = 1;
-    matchingSiblings.every((sibling2, index2) => {
-      if (getMarks(sibling2).includes(mark)) {
-        count2 = index2 + 1;
-        return true;
-      }
-    });
-    markCounts[mark] = count2;
-  });
-  let count = 0;
-  let markToProcess = null;
-  Object.entries(markCounts).forEach(([mark, markCount]) => {
-    const m = mark;
-    if (markCount > count) {
-      count = markCount;
-      markToProcess = m;
-    }
-  });
-  if (!markToProcess) {
-    const f = first;
+  const textNode = first;
+  const { markToProcess, runLength } = longestMarkRun(
+    content3,
+    getMarks(textNode).filter(
+      (mark) => mark !== "highlight"
+    )
+  );
+  if (!markToProcess && !textNode.highlight) {
     return [
-      text5({ text: f.text }),
+      ...leaf(textNode, text5(textNode)),
       ...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;
+  if (!markToProcess) {
     return [
       {
         type: "mdxJsxTextElement",
         name: "mark",
-        attributes: markAttributes(f),
-        children: [child]
+        attributes: markAttributes(textNode),
+        children: leaf(textNode, text5(textNode))
       },
       ...eat2(content3.slice(1), field, imageCallback)
     ];
   }
   if (markToProcess === "inlineCode") {
-    if (nonMatchingSiblingIndex) {
+    if (runLength > 1) {
       throw new Error(
         "Inline code can't have other formatting on it. Remove the formatting from the code text."
       );
     }
-    const f = first;
-    const node2 = {
-      type: markToProcess,
-      value: f.text
-    };
     return [
-      // @ts-ignore
-      first.linkifyTextNode?.(node2) ?? node2,
-      ...eat2(content3.slice(nonMatchingSiblingIndex + 1), field, imageCallback)
+      ...leaf(textNode, { type: "inlineCode", value: textNode.text }),
+      ...eat2(content3.slice(1), field, imageCallback)
     ];
   }
   return [
     {
       type: markToProcess,
       children: eat2(
-        [
-          ...[first, ...matchingSiblings].map(
-            (sibling2) => cleanNode(sibling2, markToProcess)
-          )
-        ],
+        content3.slice(0, runLength).map((sibling2) => cleanNode(sibling2, markToProcess)),
         field,
         imageCallback
       )
     },
-    ...eat2(content3.slice(nonMatchingSiblingIndex + 1), field, imageCallback)
+    ...eat2(content3.slice(runLength), field, imageCallback)
   ];
 };
+var leaf = (first, node2) => {
+  return first.linkifyTextNode ? [
+    {
+      ...first.linkifyTextNode({ type: "text", value: "" }),
+      children: textColorElement(first, node2)
+    }
+  ] : textColorElement(first, node2);
+};
 var cleanNode = (node2, mark) => {
   if (!mark) {
     return node2;
@@ -23683,9 +23734,6 @@ var getMarks = (content3) => {
 };
 
 // src/next/stringify/marks.ts
-var matches2 = (a, b) => {
-  return a.some((v) => b.includes(v));
-};
 var replaceLinksWithTextNodes2 = (content3) => {
   const newItems = [];
   content3?.forEach((item) => {
@@ -23817,112 +23865,65 @@ var eat3 = (c, field, imageCallback) => {
       ...eat3(content3.slice(1), field, imageCallback)
     ];
   }
-  const marks = getMarks(first);
-  if (marks.length === 0) {
-    const f = first;
-    if (first.linkifyTextNode) {
-      return [
-        first.linkifyTextNode(text6({ text: f.text })),
-        ...eat3(content3.slice(1), field, imageCallback)
-      ];
-    } else {
-      return [
-        text6({ text: f.text }),
-        ...eat3(content3.slice(1), field, imageCallback)
-      ];
-    }
-  }
-  let nonMatchingSiblingIndex = 0;
-  if (content3.slice(1).every((content4, index2) => {
-    if (matches2(marks, getMarks(content4))) {
-      return true;
-    } else {
-      nonMatchingSiblingIndex = index2;
-      return false;
-    }
-  })) {
-    nonMatchingSiblingIndex = content3.length - 1;
-  }
-  const matchingSiblings = content3.slice(1, nonMatchingSiblingIndex + 1);
-  const markCounts = {};
-  marks.forEach((mark) => {
-    let count2 = 1;
-    matchingSiblings.every((sibling2, index2) => {
-      if (getMarks(sibling2).includes(mark)) {
-        count2 = index2 + 1;
-        return true;
-      }
-    });
-    markCounts[mark] = count2;
-  });
-  let count = 0;
-  let markToProcess = null;
-  Object.entries(markCounts).forEach(([mark, markCount]) => {
-    const m = mark;
-    if (markCount > count) {
-      count = markCount;
-      markToProcess = m;
-    }
-  });
+  const textNode = first;
+  const { markToProcess, runLength } = longestMarkRun(
+    content3,
+    getMarks(textNode)
+  );
   if (!markToProcess) {
-    const f = first;
     return [
-      text6({ text: f.text }),
+      ...leaf2(textNode, text6(textNode)),
       ...eat3(content3.slice(1), field, imageCallback)
     ];
   }
   if (markToProcess === "highlight") {
-    if (nonMatchingSiblingIndex) {
+    if (runLength > 1) {
       throw new Error(
         "Highlighted text can't have other formatting on it. Remove the formatting from the highlighted text."
       );
     }
-    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]
+        attributes: markAttributes2(textNode),
+        children: leaf2(textNode, text6(textNode))
       },
-      ...eat3(content3.slice(nonMatchingSiblingIndex + 1), field, imageCallback)
+      ...eat3(content3.slice(1), field, imageCallback)
     ];
   }
   if (markToProcess === "inlineCode") {
-    const f = first;
-    if (nonMatchingSiblingIndex) {
+    if (runLength > 1) {
       throw new Error(
         "Inline code can't have other formatting on it. Remove the formatting from the code text."
       );
     }
-    const node2 = {
-      type: markToProcess,
-      value: f.text
-    };
     return [
-      // @ts-ignore
-      first.linkifyTextNode?.(node2) ?? node2,
-      ...eat3(content3.slice(nonMatchingSiblingIndex + 1), field, imageCallback)
+      ...leaf2(textNode, { type: "inlineCode", value: textNode.text }),
+      ...eat3(content3.slice(1), field, imageCallback)
     ];
   }
   return [
     {
       type: markToProcess,
       children: eat3(
-        [
-          ...[first, ...matchingSiblings].map(
-            (sibling2) => cleanNode2(sibling2, markToProcess)
-          )
-        ],
+        content3.slice(0, runLength).map((sibling2) => cleanNode2(sibling2, markToProcess)),
         field,
         imageCallback
       )
     },
-    ...eat3(content3.slice(nonMatchingSiblingIndex + 1), field, imageCallback)
+    ...eat3(content3.slice(runLength), field, imageCallback)
   ];
 };
+var leaf2 = (first, node2) => {
+  const children = textColorHtml(first, node2);
+  return first.linkifyTextNode ? [
+    {
+      ...first.linkifyTextNode({ type: "text", value: "" }),
+      children
+    }
+  ] : children;
+};
 var cleanNode2 = (node2, mark) => {
   if (!mark) {
     return node2;
@@ -25461,6 +25462,49 @@ var sanitizeUrl = (url) => {
 };
 
 // src/parse/mark.ts
+var readDeclarations = (declarations) => {
+  const colors = {};
+  let extra = false;
+  for (const [key, value] of declarations) {
+    if (key === "color" && value !== null && isSafeCssColor(value)) {
+      colors.color = value;
+    } else {
+      extra = true;
+    }
+  }
+  return { colors, extra };
+};
+var readStringStyle = (value) => readDeclarations(
+  value.split(";").filter((part) => part.trim()).map((declaration) => {
+    const [key = "", ...rest] = declaration.split(":");
+    return [key.trim().toLowerCase(), rest.join(":").trim()];
+  })
+);
+var readExpressionStyle = (value) => {
+  const [statement, ...others] = value.data?.estree?.body ?? [];
+  if (others.length || statement?.type !== "ExpressionStatement" || statement.expression.type !== "ObjectExpression") {
+    return { colors: {}, extra: true };
+  }
+  return readDeclarations(
+    statement.expression.properties.map((property) => {
+      if (property.type !== "Property" || property.computed || property.kind !== "init" || property.value.type !== "Literal" || typeof property.value.value !== "string") {
+        return ["", null];
+      }
+      const key = property.key.type === "Identifier" ? property.key.name : property.key.type === "Literal" ? String(property.key.value) : "";
+      return [key, property.value.value];
+    })
+  );
+};
+var readColorStyle = (attributes2 = []) => {
+  const styleAttribute = attributes2.find(
+    (attribute) => attribute.type === "mdxJsxAttribute" && attribute.name === "style"
+  );
+  const value = styleAttribute?.value;
+  if (value === null || value === void 0) {
+    return { colors: {}, extra: false };
+  }
+  return typeof value === "string" ? readStringStyle(value) : readExpressionStyle(value);
+};
 var getHighlightColorFromAttributes = (attributes2 = []) => {
   const styleAttribute = attributes2.find(
     (attribute) => attribute.type === "mdxJsxAttribute" && attribute.name === "style"
@@ -25487,16 +25531,23 @@ var getHighlightColorFromAttributes = (attributes2 = []) => {
   }
   return void 0;
 };
+var getColorMarks = (content3) => {
+  if (content3.name === "mark") {
+    const highlightColor = getHighlightColorFromAttributes(content3.attributes);
+    return { highlight: true, ...highlightColor ? { highlightColor } : {} };
+  }
+  const { colors, extra } = readColorStyle(content3.attributes);
+  if (content3.name === "span" && !extra && (content3.attributes ?? []).length === 1 && colors.color) {
+    return { textColor: colors.color };
+  }
+  return null;
+};
 var parseMarkMdxText = (content3, extraMarks = {}, parseChild) => {
-  if (content3.name !== "mark") {
+  const colorMarks = getColorMarks(content3);
+  if (!colorMarks) {
     return null;
   }
-  const highlightColor = getHighlightColorFromAttributes(content3.attributes);
-  const markProps = {
-    highlight: true,
-    ...highlightColor ? { highlightColor } : {},
-    ...extraMarks
-  };
+  const markProps = { ...colorMarks, ...extraMarks };
   return (content3.children || []).flatMap((child) => {
     if (parseChild) {
       return applyMarksToInlineElements(parseChild(child), markProps);
@@ -25513,13 +25564,15 @@ var parseMarkMdxText = (content3, extraMarks = {}, parseChild) => {
     return [];
   });
 };
+var innerColor = ({ textColor }) => textColor === void 0 ? {} : { textColor };
 var applyMarksToInlineElements = (elements, marks) => {
   const items = Array.isArray(elements) ? elements : [elements];
   return items.map((item) => {
     if (item.type === "text") {
       return {
         ...item,
-        ...marks
+        ...marks,
+        ...innerColor(item)
       };
     }
     if (item.type === "a") {
@@ -26396,6 +26449,84 @@ var RichTextParseError = class _RichTextParseError extends Error {
   }
 };
 
+// src/next/parse/color-marks.ts
+var OPEN_TAG = /^<(span)(?:\s+style=(?:"([^"]*)"|'([^']*)'))?\s*>$/i;
+var isHtml = (node2) => node2?.type === "html";
+var isParent2 = (node2) => Array.isArray(node2.children);
+var openColorMark = (html2) => {
+  const match = OPEN_TAG.exec(html2.value.trim());
+  if (!match) {
+    return null;
+  }
+  const [, name2 = "", double, single] = match;
+  const style = double ?? single;
+  const element = {
+    type: "mdxJsxTextElement",
+    name: name2.toLowerCase(),
+    attributes: style === void 0 ? [] : [{ type: "mdxJsxAttribute", name: "style", value: style }],
+    children: []
+  };
+  return getColorMarks(element) ? element : null;
+};
+var findClosingTag = (siblings, start3, name2) => {
+  let depth = 0;
+  for (let index2 = start3; index2 < siblings.length; index2++) {
+    const sibling2 = siblings[index2];
+    if (!isHtml(sibling2)) {
+      continue;
+    }
+    const value = sibling2.value.trim().toLowerCase();
+    if (new RegExp(`^<${name2}[\\s>]`).test(value)) {
+      depth++;
+    } else if (value === `</${name2}>`) {
+      depth--;
+      if (depth === 0) {
+        return index2;
+      }
+    }
+  }
+  return -1;
+};
+var PHRASING_PARENTS = /* @__PURE__ */ new Set([
+  "paragraph",
+  "heading",
+  "emphasis",
+  "strong",
+  "delete",
+  "link",
+  "tableCell"
+]);
+var foldSiblings = (siblings) => {
+  const folded = [];
+  for (let index2 = 0; index2 < siblings.length; index2++) {
+    const sibling2 = siblings[index2];
+    if (!sibling2) {
+      continue;
+    }
+    const element = isHtml(sibling2) ? openColorMark(sibling2) : null;
+    const close = element ? findClosingTag(siblings, index2, element.name ?? "") : -1;
+    if (element && close !== -1) {
+      element.children = foldSiblings(
+        siblings.slice(index2 + 1, close)
+      );
+      folded.push(element);
+      index2 = close;
+      continue;
+    }
+    folded.push(sibling2);
+  }
+  return folded;
+};
+var foldColorMarkHtml = (node2) => {
+  if (isParent2(node2)) {
+    if (PHRASING_PARENTS.has(node2.type)) {
+      node2.children = foldSiblings(node2.children);
+    }
+    node2.children.forEach(foldColorMarkHtml);
+  }
+  return node2;
+};
+
 // src/next/parse/post-processing.ts
 var postProcessor = (tree, field, imageCallback) => {
   const addPropsToMdxFlow = (node2) => {
@@ -26433,7 +26564,7 @@ var postProcessor = (tree, field, imageCallback) => {
   };
   visit(tree, "mdxJsxFlowElement", addPropsToMdxFlow);
   visit(tree, "mdxJsxTextElement", addPropsToMdxFlow);
-  return remarkToSlate(tree, field, imageCallback, "", true);
+  return remarkToSlate(foldColorMarkHtml(tree), field, imageCallback, "", true);
 };
 
 // src/next/parse/index.ts

package/dist/next/parse/color-marks.d.ts

@@ -0,0 +1,10 @@
+import type { Node } from 'unist';
+/**
+ * Markdown has no JSX, so text colour is written as HTML
+ * (`<span style="color: …">…</span>`) and arrives here as separate
+ * opening/closing `html` nodes. Folds each matched
+ * pair (siblings inside the same inline parent) into a JSX element so it
+ * parses into marks just like the MDX form. Tags at block level, and tags we
+ * wouldn't claim, are left as raw HTML.
+ */
+export declare const foldColorMarkHtml: <T extends Node>(node: T) => T;

package/dist/next/tests/markdown-basic-marks-text-color/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-text-color/index.test.d.ts

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

package/dist/next/tests/markdown-basic-marks-text-color-html/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-text-color-html/index.test.d.ts

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

package/dist/parse/mark.d.ts

@@ -1,7 +1,21 @@
 import type { PhrasingContent } from 'mdast';
 import type { MdxJsxAttribute, MdxJsxExpressionAttribute, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
 import type * as Plate from './plate';
+type ColorMarks = Pick<Plate.TextElement, 'highlight' | 'highlightColor' | 'textColor'>;
 export declare const getHighlightColorFromAttributes: (attributes?: (MdxJsxAttribute | MdxJsxExpressionAttribute)[]) => string | undefined;
+/**
+ * The Plate marks a `<mark>` or text colour `<span>` stands for, or null when
+ * the element isn't one of ours. A `<span>` is only claimed when its sole
+ * attribute is a style holding just a safe `color`, so spans carrying
+ * anything else keep round-tripping as raw HTML.
+ */
+export declare const getColorMarks: (content: MdxJsxTextElement) => ColorMarks | null;
+/**
+ * Converts `<mark>` (highlight) and `<span style={{ color }}>` (text colour)
+ * into marked text nodes. Children are parsed with `parseChild`, so nested
+ * bold/italic/etc. keep their marks. Returns null for any other element.
+ */
 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;
+}, extraMarks?: Record<string, boolean>, parseChild?: (child: TChild) => Plate.InlineElement | Plate.InlineElement[]) => Plate.InlineElement[] | null;
+export {};

package/dist/parse/plate.d.ts

@@ -182,6 +182,8 @@ export type TextElement = {
     strikethrough?: boolean;
     highlight?: boolean;
     highlightColor?: string;
+    /** CSS colour for the text itself, eg. `#CC4141` */
+    textColor?: string;
 };
 /**
  * @remarks

package/dist/sanitize-css-color.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Validates CSS colours from rich-text colour marks.
+ *
+ * This file is intentionally dependency-free — it's built as its own entry point
+ * (`@tinacms/mdx/sanitize-css-color`) so renderers and editors that only need
+ * colour validation (eg. `tinacms`'s rich-text renderer) don't pull in the
+ * markdown-parsing toolchain the rest of `@tinacms/mdx` bundles.
+ */
+/**
+ * Whether `value` is a plain CSS colour that's safe to drop into a `style`:
+ * hex, a named colour, or colour functions (`rgb()`, `hsl()`, `lab()`,
+ * `oklch()`, `color-mix()`, `var(--name, fallback)` and the like) nested only
+ * in each other. Anything else (`;`, braces, quotes, comments, `url(`) is
+ * rejected so a colour can't smuggle in extra CSS. Used when parsing and
+ * rendering rich-text text colour and highlight colour.
+ */
+export declare const isSafeCssColor: (value: string) => boolean;

package/dist/sanitize-css-color.js

@@ -0,0 +1,43 @@
+const COLOR_FUNCTIONS = /* @__PURE__ */ new Set([
+  "rgb",
+  "rgba",
+  "hsl",
+  "hsla",
+  "hwb",
+  "lab",
+  "lch",
+  "oklab",
+  "oklch",
+  "color",
+  "color-mix",
+  "light-dark",
+  "calc",
+  "var"
+]);
+const isSafeColorFunction = (value) => {
+  if (!/^[a-z-]+\([a-z0-9_.,%/#() +-]*\)$/i.test(value)) {
+    return false;
+  }
+  let depth = 0;
+  for (const [token, name = ""] of value.matchAll(/([a-z-]*)\(|\)/gi)) {
+    if (token === ")") {
+      depth--;
+    } else if (COLOR_FUNCTIONS.has(name.toLowerCase())) {
+      depth++;
+    } else {
+      return false;
+    }
+    if (depth < 0) {
+      return false;
+    }
+  }
+  return depth === 0;
+};
+const isSafeCssColor = (value) => {
+  const trimmed = value.trim();
+  const color = trimmed.toLowerCase().endsWith("!important") ? trimmed.slice(0, -"!important".length).trimEnd() : trimmed;
+  return /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color) || /^[a-z]+$/i.test(color) || isSafeColorFunction(color);
+};
+export {
+  isSafeCssColor
+};

package/dist/sanitize-css-color.test.d.ts

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

package/dist/stringify/text-color.d.ts

@@ -0,0 +1,19 @@
+import type * as Md from 'mdast';
+import type * as Plate from '../parse/plate';
+import { type Marks } from './index';
+/**
+ * MDX form of a text colour, always the innermost element:
+ * `<span style={{ color: "#CC4141" }}>text</span>`.
+ */
+export declare const textColorElement: (content: Plate.TextElement, node: Md.PhrasingContent) => Md.PhrasingContent[];
+/** Markdown form, as raw HTML: `<span style="color: #CC4141">text</span>`. */
+export declare const textColorHtml: (content: Plate.TextElement, node: Md.PhrasingContent) => Md.PhrasingContent[];
+/**
+ * Picks the mark to write outermost: the one shared by the longest run of
+ * leading nodes, ties going to the earliest in `getMarks` order. Only that
+ * run is wrapped, so neighbours without the mark never gain it.
+ */
+export declare const longestMarkRun: <M extends Marks>(content: Plate.InlineElement[], marks: M[]) => {
+    markToProcess: M | undefined;
+    runLength: number;
+};

package/dist/stringify/text-color.test.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/mdx",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,6 +18,10 @@
     "./sanitize-url": {
       "types": "./dist/sanitize-url.d.ts",
       "default": "./dist/sanitize-url.js"
+    },
+    "./sanitize-css-color": {
+      "types": "./dist/sanitize-css-color.d.ts",
+      "default": "./dist/sanitize-css-color.js"
     }
   },
   "license": "Apache-2.0",
@@ -28,7 +32,8 @@
         "target": "node",
         "bundleDeps": true
       },
-      "src/sanitize-url.ts"
+      "src/sanitize-url.ts",
+      "src/sanitize-css-color.ts"
     ]
   },
   "dependencies": {
@@ -59,7 +64,7 @@
     "unist-util-stringify-position": "3.0.3",
     "unist-util-visit": "4.1.2",
     "vfile-message": "3.1.4",
-    "@tinacms/schema-tools": "^2.10.1"
+    "@tinacms/schema-tools": "^2.11.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"