@tinacms/mdx 2.2.3 → 2.4.0

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/index.d.ts

@@ -3,7 +3,7 @@
 
 
 */
-import type { RichTextType } from '@tinacms/schema-tools';
+import type { RichTextField } from '@tinacms/schema-tools';
 import type * as Plate from './plate';
 import { RichTextParseError } from './remarkToPlate';
 /**
@@ -55,10 +55,10 @@ import { RichTextParseError } from './remarkToPlate';
  * 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 value with no additional work.
  */
-export declare const markdownToAst: (value: string, field: RichTextType) => import("mdast").Root;
+export declare const markdownToAst: (value: string, field: RichTextField) => import("mdast").Root;
 export declare const mdxToAst: (value: string) => import("mdast").Root;
 export declare const MDX_PARSE_ERROR_MSG = "TinaCMS supports a stricter version of markdown and a subset of MDX. https://tina.io/docs/r/what-is-markdown";
 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/r/what-is-markdown\" target=\"_blank\" rel=\"noopener noreferrer\">Learn More</a>";
-export declare const parseMDX: (value: string, field: RichTextType, imageCallback: (s: string) => string) => Plate.RootElement;
+export declare const parseMDX: (value: string, field: RichTextField, imageCallback: (s: string) => string) => Plate.RootElement;
 export declare const invalidMarkdown: (e: RichTextParseError, value: string) => Plate.RootElement;
 export declare const replaceAll: (string: string, target: string, value: string) => string;

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/mdx.d.ts

@@ -1,4 +1,4 @@
-import type { RichTextType } from '@tinacms/schema-tools';
+import type { RichTextField } from '@tinacms/schema-tools';
 import { ContainerDirective } from 'mdast-util-directive';
 import { LeafDirective } from 'mdast-util-directive/lib';
 /**
@@ -8,6 +8,6 @@ import { LeafDirective } from 'mdast-util-directive/lib';
 */
 import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
 import type * as Plate from './plate';
-export declare function mdxJsxElement(node: MdxJsxTextElement, field: RichTextType, imageCallback: (url: string) => string): Plate.MdxInlineElement;
-export declare function mdxJsxElement(node: MdxJsxFlowElement, field: RichTextType, imageCallback: (url: string) => string): Plate.MdxBlockElement;
-export declare const directiveElement: (node: ContainerDirective | LeafDirective, field: RichTextType, imageCallback: (url: string) => string, raw?: string) => Plate.BlockElement | Plate.ParagraphElement;
+export declare function mdxJsxElement(node: MdxJsxTextElement, field: RichTextField, imageCallback: (url: string) => string): Plate.MdxInlineElement;
+export declare function mdxJsxElement(node: MdxJsxFlowElement, field: RichTextField, imageCallback: (url: string) => string): Plate.MdxBlockElement;
+export declare const directiveElement: (node: ContainerDirective | LeafDirective, field: RichTextField, imageCallback: (url: string) => string, raw?: string) => Plate.BlockElement | Plate.ParagraphElement;

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/parse/remarkToPlate.d.ts

@@ -3,7 +3,7 @@
 
 
 */
-import type { RichTextType } from '@tinacms/schema-tools';
+import type { RichTextField } from '@tinacms/schema-tools';
 import type * as Md from 'mdast';
 import type { ContainerDirective } from 'mdast-util-directive';
 import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
@@ -24,7 +24,7 @@ declare module 'mdast' {
         mdxJsxFlowElement: MdxJsxFlowElement;
     }
 }
-export declare const remarkToSlate: (root: Md.Root | MdxJsxFlowElement | MdxJsxTextElement | ContainerDirective, field: RichTextType, imageCallback: (url: string) => string, raw?: string, skipMDXProcess?: boolean) => Plate.RootElement;
+export declare const remarkToSlate: (root: Md.Root | MdxJsxFlowElement | MdxJsxTextElement | ContainerDirective, field: RichTextField, imageCallback: (url: string) => string, raw?: string, skipMDXProcess?: boolean) => Plate.RootElement;
 export declare class RichTextParseError extends Error {
     position?: Plate.Position;
     constructor(message: string, position?: Plate.Position);

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/index.d.ts

@@ -1,4 +1,4 @@
-import type { RichTextType } from '@tinacms/schema-tools';
+import type { RichTextField } from '@tinacms/schema-tools';
 import type * as Md from 'mdast';
 import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
 import type * as Plate from '../parse/plate';
@@ -16,7 +16,7 @@ declare module 'mdast' {
         mdxJsxFlowElement: MdxJsxFlowElement;
     }
 }
-export declare const serializeMDX: (value: Plate.RootElement, field: RichTextType, imageCallback: (url: string) => string) => string | Plate.RootElement | undefined;
+export declare const serializeMDX: (value: Plate.RootElement, field: RichTextField, imageCallback: (url: string) => string) => string | Plate.RootElement | undefined;
 export type Pattern = {
     start: string;
     end: string;
@@ -24,9 +24,9 @@ export type Pattern = {
     templateName: string;
     type: 'block' | 'leaf';
 };
-export declare const toTinaMarkdown: (tree: Md.Root, field: RichTextType) => string;
-export declare const rootElement: (content: Plate.RootElement, field: RichTextType, imageCallback: (url: string) => string) => Md.Root;
+export declare const toTinaMarkdown: (tree: Md.Root, field: RichTextField) => string;
+export declare const rootElement: (content: Plate.RootElement, field: RichTextField, 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 declare const blockElement: (content: Plate.BlockElement, field: RichTextField, imageCallback: (url: string) => string) => Md.Content | null;
 export type Marks = 'strong' | 'emphasis' | 'inlineCode' | 'delete' | 'highlight';
 export declare const getMarks: (content: Plate.InlineElement) => Marks[];

package/dist/stringify/marks.d.ts

@@ -3,11 +3,11 @@
 
 
 */
-import type { RichTextType } from '@tinacms/schema-tools';
+import type { RichTextField } from '@tinacms/schema-tools';
 import type * as Md from 'mdast';
 import type * as Plate from '../parse/plate';
 type InlineElementWithCallback = Plate.InlineElement & {
     linkifyTextNode?: (arg: Md.Text) => Md.Link;
 };
-export declare const eat: (c: InlineElementWithCallback[], field: RichTextType, imageCallback: (url: string) => string) => Md.PhrasingContent[];
+export declare const eat: (c: InlineElementWithCallback[], field: RichTextField, imageCallback: (url: string) => string) => Md.PhrasingContent[];
 export {};

package/dist/stringify/print-object-literal.corpus.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The differential corpus for `printObjectLiteral`. Every case is
+ * deterministic, so the expected output of each one is recorded in
+ * `__snapshots__/print-object-literal.txt` by `pnpm snapshot:print-object-literal`.
+ * Append new cases; never reorder or rename existing ones.
+ */
+export type Case = {
+    name: string;
+    value: unknown;
+};
+export declare const corpus: Case[];
+export declare const MINIMUM_CORPUS = 5000;

package/dist/stringify/print-object-literal.d.ts

@@ -0,0 +1 @@
+export declare const printObjectLiteral: (value: unknown) => string;

package/dist/stringify/print-object-literal.snapshot.d.ts

@@ -0,0 +1,12 @@
+/**
+ * One record per corpus case, in corpus order. Blank lines separate records;
+ * neither a `JSON.stringify` input nor a printed object literal contains one.
+ */
+export type SnapshotRecord = {
+    index: number;
+    name: string;
+    input: string;
+    expected: string;
+};
+export declare const formatSnapshot: (records: SnapshotRecord[]) => string;
+export declare const parseSnapshot: (text: string) => SnapshotRecord[];

package/dist/stringify/print-object-literal.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.2.3",
+  "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,13 +32,16 @@
         "target": "node",
         "bundleDeps": true
       },
-      "src/sanitize-url.ts"
+      "src/sanitize-url.ts",
+      "src/sanitize-css-color.ts"
     ]
   },
   "dependencies": {
     "acorn": "^8.16.0",
     "ccount": "2.0.1",
+    "emoji-regex": "9.2.2",
     "estree-util-is-identifier-name": "2.1.0",
+    "esutils": "2.0.3",
     "mdast-util-compact": "4.1.1",
     "mdast-util-directive": "2.2.4",
     "mdast-util-from-markdown": "1.3.0",
@@ -49,7 +56,6 @@
     "micromark-util-symbol": "1.0.1",
     "micromark-util-types": "1.1.0",
     "parse-entities": "4.0.1",
-    "prettier": "^2.8.8",
     "remark": "14.0.2",
     "remark-gfm": "^2.0.0",
     "remark-mdx": "2.3.0",
@@ -58,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.0"
+    "@tinacms/schema-tools": "^2.11.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -69,9 +75,9 @@
   },
   "devDependencies": {
     "@types/estree": "1.0.0",
+    "@types/esutils": "^2.0.2",
     "@types/mdast": "^3.0.15",
     "@types/node": "^22.13.1",
-    "@types/prettier": "^2.7.3",
     "@types/unist": "^2.0.11",
     "c8": "^7.14.0",
     "jest-file-snapshot": "^0.5.0",
@@ -86,6 +92,7 @@
     "build": "tinacms-scripts build",
     "serve": "nodemon dist/server.js",
     "test": "vitest run",
+    "snapshot:print-object-literal": "node --experimental-strip-types scripts/generate-print-object-literal-snapshot.mjs",
     "coverage": "vitest run --coverage",
     "test-watch": "vitest"
   }