tinacms 3.14.4 → 3.15.0

package/dist/index.js

@@ -7,7 +7,8 @@ import React__default, { useState, useCallback, useRef, useEffect, createContext
 import { createPortal } from "react-dom";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { CircleAlert, X, Search, ChevronDown, Check, AlertTriangle, BracesIcon, Heading6 as Heading6$1, Heading5 as Heading5$1, Heading4 as Heading4$1, Heading3 as Heading3$1, Heading2 as Heading2$1, Heading1 as Heading1$1, ChevronRight, Twitter, SunMedium, Moon, SeparatorHorizontal, Eye, Link2Off, Underline, Trash, Text, Table as Table$1, Superscript, Subscript, Strikethrough, Highlighter, Settings, RectangleHorizontal, RotateCcw, Pilcrow, Outdent, MoreHorizontal, Minus, WrapText, Keyboard, Indent, ExternalLink, Smile, Edit2, GripVertical, MessageSquarePlus, MessageSquare, Ungroup, Combine, RectangleVertical, Baseline, FileCode, PaintBucket, ChevronsUpDown, Quote, AlignRight as AlignRight$1, AlignLeft as AlignLeft$1, AlignJustify, AlignCenter as AlignCenter$1, Plus, PaintBucketIcon, CombineIcon, SquareSplitHorizontalIcon, Grid2X2Icon, Trash2Icon, ArrowUp, ArrowDown, XIcon, ArrowLeft, ArrowRight, EraserIcon, Info, CircleCheck as CircleCheck$1, CircleIcon, ChevronDownIcon as ChevronDownIcon$1, File as File$1, ChevronUp, Edit, Pencil, Clock, CalendarCheck, Calendar as Calendar$1, CalendarDays, RotateCw, ChevronLeft, WifiOff, TriangleAlert, RefreshCw, GitBranch, CircleHelp, Loader2, Lock, ArrowUpDown, GitFork, Globe, Copy, Folder as Folder$1, Clapperboard, LayoutGrid, List as List$1, CloudUpload, ArrowDownToLine, TextCursorInput, Images, AlertCircle, Image, Database, CheckCircle2, ImageOff, KeyRound, Cloud, LoaderCircle, ScrollText, RefreshCwOff, OctagonAlert, Menu, FilePlus, LogOut, FileStack, FolderOpen, History, Users, PanelLeft, Files, User, FileText, GitBranchIcon, Circle as Circle$1, ListOrdered, Grid3x3Icon, CircleX, Link, Unlink, SquarePen, Trash2, House, Unlock } from "lucide-react";
+import { CircleAlert, X, Search, ChevronDown, Check, AlertTriangle, BracesIcon, Heading6 as Heading6$1, Heading5 as Heading5$1, Heading4 as Heading4$1, Heading3 as Heading3$1, Heading2 as Heading2$1, Heading1 as Heading1$1, ChevronRight, Twitter, SunMedium, Moon, SeparatorHorizontal, Eye, Link2Off, Underline, Trash, Text, Table as Table$1, Superscript, Subscript, Strikethrough, Baseline, Highlighter, Settings, RectangleHorizontal, RotateCcw, Pilcrow, Outdent, MoreHorizontal, Minus, WrapText, Keyboard, Indent, ExternalLink, Smile, Edit2, GripVertical, MessageSquarePlus, MessageSquare, Ungroup, Combine, RectangleVertical, FileCode, PaintBucket, ChevronsUpDown, Quote, AlignRight as AlignRight$1, AlignLeft as AlignLeft$1, AlignJustify, AlignCenter as AlignCenter$1, Plus, PaintBucketIcon, CombineIcon, SquareSplitHorizontalIcon, Grid2X2Icon, Trash2Icon, ArrowUp, ArrowDown, XIcon, ArrowLeft, ArrowRight, EraserIcon, Info, CircleCheck as CircleCheck$1, CircleIcon, ChevronDownIcon as ChevronDownIcon$1, File as File$1, ChevronUp, Edit, Pencil, Clock, CalendarCheck, Calendar as Calendar$1, CalendarDays, RotateCw, ChevronLeft, WifiOff, TriangleAlert, RefreshCw, GitBranch, CircleHelp, Loader2, Lock, ArrowUpDown, GitFork, Globe, Copy, Folder as Folder$1, Clapperboard, LayoutGrid, List as List$1, CloudUpload, ArrowDownToLine, TextCursorInput, Images, AlertCircle, Image, Database, CheckCircle2, ImageOff, KeyRound, Cloud, LoaderCircle, ScrollText, RefreshCwOff, OctagonAlert, Menu, FilePlus, LogOut, FileStack, FolderOpen, History, Users, PanelLeft, Files, User, FileText, GitBranchIcon, Circle as Circle$1, ListOrdered, Grid3x3Icon, CircleX, Link, Unlink, SquarePen, Trash2, House, Unlock } from "lucide-react";
+import { isSafeCssColor } from "@tinacms/mdx/sanitize-css-color";
 import { withRef, cn as cn$1, withCn, createPrimitiveElement, withVariants, withProps, PortalBody, useComposedRef as useComposedRef$1 } from "@udecode/cn";
 import { BoldPlugin, ItalicPlugin, StrikethroughPlugin, UnderlinePlugin, CodePlugin, BasicMarksPlugin } from "@udecode/plate-basic-marks/react";
 import { BlockquotePlugin } from "@udecode/plate-block-quote/react";
@@ -19,7 +20,8 @@ import { useLink, LinkPlugin, useLinkToolbarButtonState, useLinkToolbarButton, u
 import { BulletedListPlugin, NumberedListPlugin, ListItemPlugin, TodoListPlugin, useListToolbarButtonState, useListToolbarButton, ListPlugin } from "@udecode/plate-list/react";
 import { SlashInputPlugin, SlashPlugin } from "@udecode/plate-slash-command/react";
 import { TablePlugin, TableRowPlugin, useTableCellElement, TableProvider, useTableElement, useTableMergeState, useTableBordersDropdownMenuContentState, TableCellPlugin, TableCellHeaderPlugin } from "@udecode/plate-table/react";
-import { PlateElement, useReadOnly, useElement, PlateLeaf, useSelected, useFocused, useEditorRef, withRef as withRef$1, useComposedRef, useEditorPlugin, useElementSelector, withHOC, usePluginOption, useRemoveNodeButton, useEditorSelector, ParagraphPlugin, createPlatePlugin, PlateContent, PlateContainer, useEditorState, useMarkToolbarButtonState, useMarkToolbarButton, usePlateEditor, useFormInputProps, useEditorSelection, useEditorReadOnly, useOnClickOutside, useEventEditorValue, Plate } from "@udecode/plate/react";
+import { PlateElement, useReadOnly, useElement, PlateLeaf, useSelected, useFocused, useEditorRef, withRef as withRef$1, useComposedRef, useEditorPlugin, useElementSelector, withHOC, usePluginOption, useRemoveNodeButton, useEditorSelector, createPlatePlugin, ParagraphPlugin, PlateContent, PlateContainer, useEditorState, useMarkToolbarButtonState, useMarkToolbarButton, usePlateEditor, useFormInputProps, useEditorSelection, useEditorReadOnly, useOnClickOutside, useEventEditorValue, Plate } from "@udecode/plate/react";
+import colorString, { get as get$1, to } from "color-string";
 import { isLangSupported, formatCodeBlock, insertEmptyCodeBlock, isCodeBlockEmpty, unwrapCodeBlock, isSelectionAtCodeBlockStart } from "@udecode/plate-code-block";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
@@ -32,7 +34,7 @@ import { useHTMLInputCursorState, useComboboxInput } from "@udecode/plate-combob
 import { useComboboxContext, Combobox as Combobox$1, useComboboxStore, ComboboxProvider, Portal, ComboboxPopover, ComboboxItem } from "@ariakit/react";
 import { filterWords } from "@udecode/plate-combobox";
 import { toggleList, unwrapList, getListItemEntry } from "@udecode/plate-list";
-import { normalizeHeadingLevels, ALL_HEADING_LEVELS, MEDIA_MIME_TYPES, extensionOf, resolveMediaAccept, ASYNC_POLLER_ERROR, ERR_BRANCH_EXISTS, ERR_BRANCH_CONFLICT, MEDIA_CATEGORIES, canonicalPath, isHeadingLevel, TinaSchema, addNamespaceToSchema, parseURL, ERR_HAS_REFERENCES, ERR_ALREADY_EXISTS, isValidRelativePath, RELATIVE_PATH_ALLOWED_CHARS_MESSAGE, resolveForm, RELATIVE_PATH_REGEX, normalizePath, ERR_NOT_INDEXED, validateSchema } from "@tinacms/schema-tools";
+import { normalizeHeadingLevels, ALL_HEADING_LEVELS, DEFAULT_TEXT_COLORS, MEDIA_MIME_TYPES, extensionOf, resolveMediaAccept, ASYNC_POLLER_ERROR, ERR_BRANCH_EXISTS, ERR_BRANCH_CONFLICT, MEDIA_CATEGORIES, canonicalPath, isHeadingLevel, TinaSchema, addNamespaceToSchema, parseURL, ERR_HAS_REFERENCES, ERR_ALREADY_EXISTS, isValidRelativePath, RELATIVE_PATH_ALLOWED_CHARS_MESSAGE, resolveForm, RELATIVE_PATH_REGEX, normalizePath, ERR_NOT_INDEXED, validateSchema } from "@tinacms/schema-tools";
 import { NAMER, resolveField } from "@tinacms/schema-tools";
 import { useBlockSelected, BlockSelectionPlugin } from "@udecode/plate-selection/react";
 import "@udecode/plate-dnd";
@@ -41,7 +43,6 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import colorString, { get as get$1, to } from "color-string";
 import { ElementApi, isType, NodeApi, mergeProps, createSlatePlugin } from "@udecode/plate";
 import { createForm, FORM_ERROR, getIn } from "final-form";
 import arrayMutators from "final-form-arrays";
@@ -2006,6 +2007,7 @@ const Icons = {
   search: Search,
   settings: Settings,
   highlight: Highlighter,
+  textColor: Baseline,
   strikethrough: Strikethrough,
   subscript: Subscript,
   superscript: Superscript,
@@ -2602,18 +2604,33 @@ const InlineComboboxEmpty = ({
 const ToolbarContext = createContext(
   void 0
 );
+const resolvePalette = (configured, fallback) => {
+  if (!configured) return fallback;
+  return configured.filter(({ value }) => {
+    if (isSafeCssColor(value)) return true;
+    console.warn(
+      `[tinacms] Ignoring unsupported colour "${value}" in rich-text overrides.textColors. Use hex, a named colour, a colour function such as rgb()/lab()/color-mix(), or var(--name).`
+    );
+    return false;
+  });
+};
 const ToolbarProvider = ({
   tinaForm,
   templates,
   overrides,
   children
 }) => {
-  const configured = !Array.isArray(overrides) ? overrides == null ? void 0 : overrides.headingLevels : void 0;
+  const objectOverrides = !Array.isArray(overrides) ? overrides : void 0;
+  const configured = objectOverrides == null ? void 0 : objectOverrides.headingLevels;
   const headingLevelsConfigured = Array.isArray(configured);
   const headingLevels = useMemo(
     () => configured ? normalizeHeadingLevels(configured) : ALL_HEADING_LEVELS,
     [configured]
   );
+  const textColors = useMemo(
+    () => resolvePalette(objectOverrides == null ? void 0 : objectOverrides.textColors, DEFAULT_TEXT_COLORS),
+    [objectOverrides == null ? void 0 : objectOverrides.textColors]
+  );
   return /* @__PURE__ */ React__default.createElement(
     ToolbarContext.Provider,
     {
@@ -2622,7 +2639,8 @@ const ToolbarProvider = ({
         templates,
         overrides,
         headingLevels,
-        headingLevelsConfigured
+        headingLevelsConfigured,
+        textColors
       }
     },
     children
@@ -3315,6 +3333,10 @@ const TableRowElement = withRef(
     );
   }
 );
+const TextColorPlugin = createPlatePlugin({
+  key: "textColor",
+  node: { isLeaf: true }
+});
 function classNames$1(...classes) {
   return classes.filter(Boolean).join(" ");
 }
@@ -3333,22 +3355,38 @@ function getContrastColor(color) {
   const luminance = (0.299 * r2 + 0.587 * g + 0.114 * b) / 255;
   return luminance > 0.5 ? "#000000" : "#ffffff";
 }
+const leafColor = (value) => typeof value === "string" && isSafeCssColor(value) ? value : void 0;
+const INHERIT_NESTED_COLOR = "[&_strong]:text-inherit [&_em]:text-inherit [&_s]:text-inherit [&_u]:text-inherit";
 const HighlightLeaf = ({
   leaf: leaf2,
   ...props
 }) => {
-  const backgroundColor = leaf2.highlightColor || "#FEF08A";
+  const backgroundColor = leafColor(leaf2.highlightColor) ?? "#FEF08A";
+  const color = leafColor(leaf2.textColor) ?? getContrastColor(backgroundColor);
   return /* @__PURE__ */ React__default.createElement(
     PlateLeaf,
     {
       as: "mark",
-      className: "rounded-sm",
-      style: { backgroundColor, color: getContrastColor(backgroundColor) },
+      className: `rounded-sm ${INHERIT_NESTED_COLOR}`,
+      style: { backgroundColor, color },
       leaf: leaf2,
       ...props
     }
   );
 };
+const TextColorLeaf = ({
+  leaf: leaf2,
+  ...props
+}) => /* @__PURE__ */ React__default.createElement(
+  PlateLeaf,
+  {
+    as: "span",
+    className: INHERIT_NESTED_COLOR,
+    style: { color: leafColor(leaf2.textColor) },
+    leaf: leaf2,
+    ...props
+  }
+);
 const Heading1 = ({
   attributes,
   children,
@@ -3505,6 +3543,7 @@ const Components = () => {
     [LinkPlugin.key]: LinkElement,
     [CodePlugin.key]: CodeLeaf,
     [HighlightPlugin.key]: HighlightLeaf,
+    [TextColorPlugin.key]: TextColorLeaf,
     [UnderlinePlugin.key]: withProps(PlateLeaf, { as: "u" }),
     [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: "s" }),
     [ItalicPlugin.key]: withProps(PlateLeaf, { as: "em" }),
@@ -6306,7 +6345,7 @@ const ListFieldMeta = ({
       style: { zIndex: index != null ? 1e3 - index : void 0 },
       ...props
     },
-    /* @__PURE__ */ React.createElement(ListHeader, null, /* @__PURE__ */ React.createElement(ListMeta, null, label !== false && /* @__PURE__ */ React.createElement(ListLabel, null, label || name2), description && /* @__PURE__ */ React.createElement(FieldDescription, { className: "whitespace-nowrap text-ellipsis overflow-hidden" }, description)), actions && actions),
+    /* @__PURE__ */ React.createElement(ListHeader, null, /* @__PURE__ */ React.createElement(ListMeta, null, label !== false && /* @__PURE__ */ React.createElement(ListLabel, null, label || name2), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description)), actions && actions),
     children,
     error && typeof error === "string" && /* @__PURE__ */ React.createElement(FieldError, null, error)
   );
@@ -6315,7 +6354,7 @@ const ListHeader = ({ children }) => {
   return /* @__PURE__ */ React.createElement("span", { className: "relative flex gap-2 w-full justify-between items-center mb-2" }, children);
 };
 const ListMeta = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex-1 truncate" }, children);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, children);
 };
 const ListLabel = ({ children }) => {
   return /* @__PURE__ */ React.createElement(
@@ -7808,6 +7847,10 @@ const TagsFieldPlugin = {
 };
 const DEFAULT_DATE_DISPLAY_FORMAT = "MMM DD, YYYY";
 const DEFAULT_TIME_DISPLAY_FORMAT = "h:mm A";
+const getHourCycle = (timeFormat) => {
+  const tokens = (timeFormat ?? "").replace(/\[[^\]]*\]/g, "");
+  return /[Hk]/.test(tokens) ? 24 : 12;
+};
 const format$2 = (val, _name, field) => {
   if (!val) return val;
   return new Date(val).toISOString();
@@ -8723,7 +8766,7 @@ const DateField = wrapFieldsWithMeta(
           value ? value.toISOString() : required !== false ? (/* @__PURE__ */ new Date()).toISOString() : value
         ),
         timeFormat: getTimeFormat(),
-        hourCycle: 12,
+        hourCycle: getHourCycle(getTimeFormat()),
         dateFormat: getDateFormat(),
         value: date,
         locale: rest.locale ? { code: rest.locale } : void 0
@@ -14328,7 +14371,7 @@ const FormModal = ({ plugin, close: close2 }) => {
 const name = "tinacms";
 const type = "module";
 const typings = "dist/index.d.ts";
-const version = "3.14.4";
+const version = "3.15.0";
 const main = "dist/index.js";
 const module$1 = "./dist/index.js";
 const exports$1 = { ".": "./dist/index.js", "./dist/client": { "types": "./dist/client.d.ts", "browser": "./dist/client.browser.js", "default": "./dist/client.js" }, "./react": "./dist/react.js", "./dist/react": "./dist/react.js", "./tina-field": "./dist/tina-field.js", "./dist/tina-field": "./dist/tina-field.js", "./dist/rich-text": "./dist/rich-text/index.js", "./dist/rich-text/static": "./dist/rich-text/static.js", "./dist/rich-text/prism": "./dist/rich-text/prism.js" };
@@ -14337,7 +14380,7 @@ const buildConfig = { "entryPoints": ["src/index.ts", "src/rich-text/index.tsx",
 const license = "Apache-2.0";
 const scripts = { "types": "pnpm tsc && pnpm tsc-alias", "build": "tinacms-scripts build", "test": "vitest run", "test-watch": "vitest" };
 const dependencies = { "@ariakit/react": "catalog:", "@dnd-kit/core": "catalog:", "@dnd-kit/sortable": "catalog:", "@dnd-kit/utilities": "catalog:", "@floating-ui/dom": "catalog:", "@floating-ui/react-dom": "catalog:", "@graphql-inspector/core": "^6.2.1", "@radix-ui/react-dialog": "catalog:", "@radix-ui/react-dropdown-menu": "catalog:", "@radix-ui/react-popover": "catalog:", "@radix-ui/react-select": "catalog:", "@radix-ui/react-separator": "catalog:", "@radix-ui/react-slot": "catalog:", "@radix-ui/react-toolbar": "catalog:", "@radix-ui/react-tooltip": "catalog:", "@react-hook/window-size": "catalog:", "@tanstack/react-table": "^8.21.3", "@tinacms/bridge": "workspace:^", "@tinacms/mdx": "workspace:^", "@tinacms/schema-tools": "workspace:^", "@tinacms/search": "workspace:^", "@udecode/cmdk": "catalog:", "@udecode/cn": "catalog:", "@udecode/plate": "catalog:", "@udecode/plate-autoformat": "catalog:", "@udecode/plate-basic-marks": "catalog:", "@udecode/plate-block-quote": "catalog:", "@udecode/plate-break": "catalog:", "@udecode/plate-code-block": "catalog:", "@udecode/plate-combobox": "catalog:", "@udecode/plate-dnd": "catalog:", "@udecode/plate-floating": "catalog:", "@udecode/plate-heading": "catalog:", "@udecode/plate-highlight": "catalog:", "@udecode/plate-horizontal-rule": "catalog:", "@udecode/plate-indent-list": "catalog:", "@udecode/plate-link": "catalog:", "@udecode/plate-list": "catalog:", "@udecode/plate-node-id": "catalog:", "@udecode/plate-reset-node": "catalog:", "@udecode/plate-resizable": "catalog:", "@udecode/plate-selection": "catalog:", "@udecode/plate-slash-command": "catalog:", "@udecode/plate-table": "catalog:", "@udecode/plate-trailing-block": "catalog:", "class-variance-authority": "catalog:", "clsx": "catalog:", "cmdk": "catalog:", "color-string": "catalog:", "date-fns": "4.1.0", "es-toolkit": "^1.42.0", "final-form": "catalog:", "final-form-arrays": "catalog:", "final-form-set-field-data": "catalog:", "graphql": "15.8.0", "graphql-tag": "catalog:", "is-hotkey": "catalog:", "lucide-react": "catalog:", "mermaid": "catalog:", "posthog-js": "^1.347.1", "prism-react-renderer": "catalog:", "prop-types": "catalog:", "react-colorful": "catalog:", "react-day-picker": "^9.13.0", "react-dnd": "catalog:", "react-dnd-html5-backend": "catalog:", "react-dropzone": "catalog:", "react-final-form": "catalog:", "react-router-dom": "catalog:", "react-use": "catalog:", "tailwind-merge": "^2.6.0", "webfontloader": "catalog:", "yup": "^1.6.1", "zod": "catalog:" };
-const devDependencies = { "@graphql-tools/utils": "catalog:", "@testing-library/dom": "catalog:", "@testing-library/jest-dom": "catalog:", "@testing-library/react": "catalog:", "@testing-library/user-event": "catalog:", "@tinacms/scripts": "workspace:*", "@types/atob": "catalog:", "@types/codemirror": "catalog:", "@types/color-string": "catalog:", "@types/node": "^22.13.1", "@types/prop-types": "catalog:", "@types/react": "^18.3.18", "@types/react-dom": "catalog:", "happy-dom": "catalog:", "identity-obj-proxy": "catalog:", "jest-file-snapshot": "^0.7.0", "lowlight": "catalog:", "next": "15.5.21", "react": "^18.3.1", "react-dom": "^18.3.1", "react-is": "^18.3.1", "tsc-alias": "catalog:", "tslib": "catalog:", "typescript": "^5.7.3", "vite": "^5.4.14", "vitest": "^2.1.9" };
+const devDependencies = { "@testing-library/dom": "catalog:", "@testing-library/jest-dom": "catalog:", "@testing-library/react": "catalog:", "@testing-library/user-event": "catalog:", "@tinacms/scripts": "workspace:*", "@types/atob": "catalog:", "@types/codemirror": "catalog:", "@types/color-string": "catalog:", "@types/node": "^22.13.1", "@types/prop-types": "catalog:", "@types/react": "^18.3.18", "@types/react-dom": "catalog:", "happy-dom": "catalog:", "identity-obj-proxy": "catalog:", "jest-file-snapshot": "^0.7.0", "lowlight": "catalog:", "next": "15.5.27", "react": "^18.3.1", "react-dom": "^18.3.1", "react-is": "^18.3.1", "tsc-alias": "catalog:", "tslib": "catalog:", "typescript": "^5.7.3", "vite": "^5.4.14", "vitest": "^2.1.9" };
 const peerDependencies = { "react": ">=16.14.0", "react-dom": ">=16.14.0" };
 const publishConfig = { "registry": "https://registry.npmjs.org" };
 const repository = { "url": "https://github.com/tinacms/tinacms.git", "directory": "packages/tinacms" };
@@ -19677,18 +19720,11 @@ const MarkToolbarButton = withRef(({ clear, nodeType, ...rest }, ref) => {
   const { props } = useMarkToolbarButton(state);
   return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, ...props, ...rest });
 });
-const highlightColors = [
-  { label: "Yellow", value: "#FEF08A" },
-  { label: "Green", value: "#BBF7D0" },
-  { label: "Blue", value: "#BFDBFE" },
-  { label: "Red", value: "#CC4141" }
-];
 const BoldToolbarButton = () => /* @__PURE__ */ React__default.createElement(MarkToolbarButton, { tooltip: "Bold (⌘+B)", nodeType: BoldPlugin.key }, /* @__PURE__ */ React__default.createElement(Icons.bold, null));
 const StrikethroughToolbarButton = () => /* @__PURE__ */ React__default.createElement(MarkToolbarButton, { tooltip: "Strikethrough", nodeType: StrikethroughPlugin.key }, /* @__PURE__ */ React__default.createElement(Icons.strikethrough, null));
 const ItalicToolbarButton = () => /* @__PURE__ */ React__default.createElement(MarkToolbarButton, { tooltip: "Italic (⌘+I)", nodeType: ItalicPlugin.key }, /* @__PURE__ */ React__default.createElement(Icons.italic, null));
 const CodeToolbarButton = () => /* @__PURE__ */ React__default.createElement(MarkToolbarButton, { tooltip: "Code (⌘+E)", nodeType: CodePlugin.key }, /* @__PURE__ */ React__default.createElement(Icons.code, null));
-const HighlightToolbarButton = () => /* @__PURE__ */ React__default.createElement(HighlightColorToolbarButton, null);
-const useHighlightToolbar = () => {
+const useColorMarkToolbar = (toMarks) => {
   const editor = useEditorRef();
   const openState = useOpenState();
   const savedSelection = React__default.useRef(editor.selection);
@@ -19705,8 +19741,8 @@ const useHighlightToolbar = () => {
       rememberSelection();
     }
   }, [openState.open, rememberSelection]);
-  const applyHighlight = React__default.useCallback(
-    (highlightColor) => {
+  const applyColor = React__default.useCallback(
+    (color) => {
       if (inlineCodeActive) {
         openState.onOpenChange(false);
         return;
@@ -19714,67 +19750,109 @@ const useHighlightToolbar = () => {
       if (savedSelection.current) {
         editor.tf.select(structuredClone(savedSelection.current));
       }
-      if (highlightColor) {
-        editor.tf.addMark("highlight", true);
-        editor.tf.addMark("highlightColor", highlightColor);
-      } else {
-        editor.tf.removeMark("highlight");
-        editor.tf.removeMark("highlightColor");
-      }
-      editor.tf.setNodes(
-        highlightColor ? {
-          highlight: true,
-          highlightColor
-        } : {
-          highlight: void 0,
-          highlightColor: void 0
-        },
-        {
-          at: editor.selection ?? void 0,
-          match: (node) => editor.api.isText(node),
-          split: true
+      const marks = toMarks(color);
+      for (const [key, value] of Object.entries(marks)) {
+        if (value === void 0) {
+          editor.tf.removeMark(key);
+        } else {
+          editor.tf.addMark(key, value);
         }
-      );
+      }
+      editor.tf.setNodes(marks, {
+        at: editor.selection ?? void 0,
+        match: (node) => editor.api.isText(node),
+        split: true
+      });
       editor.tf.focus();
       openState.onOpenChange(false);
     },
-    [editor, inlineCodeActive, openState]
+    [editor, inlineCodeActive, openState, toMarks]
   );
   return {
-    applyHighlight,
+    applyColor,
     inlineCodeActive,
     openState,
     rememberSelection
   };
 };
-const HighlightColorToolbarButton = () => {
-  const { applyHighlight, inlineCodeActive, openState, rememberSelection } = useHighlightToolbar();
+const ColorDropdownToolbarButton = ({
+  tooltip,
+  icon,
+  clearLabel,
+  colors,
+  toMarks,
+  renderSwatch
+}) => {
+  const { applyColor, inlineCodeActive, openState, rememberSelection } = useColorMarkToolbar(toMarks);
   return /* @__PURE__ */ React__default.createElement(DropdownMenu$1, { modal: false, ...openState }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger$1, { asChild: true }, /* @__PURE__ */ React__default.createElement(
     ToolbarButton,
     {
       isDropdown: true,
       showArrow: true,
       pressed: openState.open,
-      tooltip: "Highlight color",
+      tooltip,
       disabled: inlineCodeActive,
       onMouseDown: rememberSelection
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React__default.createElement(Icons.highlight, null), /* @__PURE__ */ React__default.createElement("span", { className: "sr-only" }, "Highlight color"))
-  )), /* @__PURE__ */ React__default.createElement(DropdownMenuContent$1, { align: "start", className: "min-w-[180px]" }, /* @__PURE__ */ React__default.createElement(DropdownMenuItem$1, { onSelect: () => applyHighlight() }, "Clear highlight"), highlightColors.map((color) => /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-1.5" }, icon, /* @__PURE__ */ React__default.createElement("span", { className: "sr-only" }, tooltip))
+  )), /* @__PURE__ */ React__default.createElement(DropdownMenuContent$1, { align: "start", className: "min-w-[180px]" }, /* @__PURE__ */ React__default.createElement(DropdownMenuItem$1, { onSelect: () => applyColor() }, clearLabel), colors.map((color) => /* @__PURE__ */ React__default.createElement(
     DropdownMenuItem$1,
     {
       key: color.value,
-      onSelect: () => applyHighlight(color.value)
+      onSelect: () => applyColor(color.value)
     },
-    /* @__PURE__ */ React__default.createElement(
+    renderSwatch(color.value),
+    color.label
+  ))));
+};
+const toHighlightMarks = (color) => color ? { highlight: true, highlightColor: color } : { highlight: void 0, highlightColor: void 0 };
+const toTextColorMarks = (color) => ({
+  textColor: color
+});
+const highlightColors = [
+  { label: "Yellow", value: "#FEF08A" },
+  { label: "Green", value: "#BBF7D0" },
+  { label: "Blue", value: "#BFDBFE" },
+  { label: "Red", value: "#CC4141" }
+];
+const HighlightToolbarButton = () => /* @__PURE__ */ React__default.createElement(
+  ColorDropdownToolbarButton,
+  {
+    tooltip: "Highlight color",
+    icon: /* @__PURE__ */ React__default.createElement(Icons.highlight, null),
+    clearLabel: "Clear highlight",
+    colors: highlightColors,
+    toMarks: toHighlightMarks,
+    renderSwatch: (color) => /* @__PURE__ */ React__default.createElement(
       "span",
       {
         className: "mr-2 inline-block size-4 rounded border border-gray-300",
-        style: { backgroundColor: color.value }
+        style: { backgroundColor: color }
       }
-    ),
-    color.label
-  ))));
+    )
+  }
+);
+const TextColorToolbarButton = () => {
+  const { textColors } = useToolbarContext();
+  return /* @__PURE__ */ React__default.createElement(
+    ColorDropdownToolbarButton,
+    {
+      tooltip: "Text color",
+      icon: /* @__PURE__ */ React__default.createElement(Icons.textColor, null),
+      clearLabel: "Clear text color",
+      colors: textColors,
+      toMarks: toTextColorMarks,
+      renderSwatch: (color) => /* @__PURE__ */ React__default.createElement(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "mr-2 inline-block w-4 text-center font-bold",
+          style: { color }
+        },
+        "A"
+      )
+    }
+  );
 };
 const ListToolbarButton = withRef(({ nodeType = BulletedListPlugin.key, ...rest }, ref) => {
   const state = useListToolbarButtonState({ nodeType });
@@ -20014,6 +20092,11 @@ const toolbarItems = {
     width: () => STANDARD_ICON_WIDTH,
     Component: /* @__PURE__ */ React__default.createElement(HighlightToolbarButton, null)
   },
+  textColor: {
+    label: "Text Color",
+    width: () => STANDARD_ICON_WIDTH,
+    Component: /* @__PURE__ */ React__default.createElement(TextColorToolbarButton, null)
+  },
   italic: {
     label: "Italic",
     width: () => STANDARD_ICON_WIDTH,
@@ -71414,6 +71497,7 @@ const viewPlugins = [
   BasicMarksPlugin,
   UnderlinePlugin,
   HighlightPlugin,
+  TextColorPlugin,
   HeadingPlugin.configure({ options: { levels: 6 } }),
   ParagraphPlugin,
   CodeBlockPlugin.configure({
@@ -71424,24 +71508,24 @@ const viewPlugins = [
 const CorrectNodeBehaviorPlugin = createSlatePlugin({
   key: "WITH_CORRECT_NODE_BEHAVIOR"
 });
-const ClearHighlightOnEnterPlugin = createSlatePlugin({
-  key: "CLEAR_HIGHLIGHT_ON_ENTER"
+const COLOR_MARK_KEYS = ["highlight", "highlightColor", "textColor"];
+const ClearColorMarksOnEnterPlugin = createSlatePlugin({
+  key: "CLEAR_COLOR_MARKS_ON_ENTER"
 }).overrideEditor(({ editor, tf: { insertBreak } }) => ({
   transforms: {
     insertBreak() {
       const keyboardEvent = editor.currentKeyboardEvent;
       const isPlainEnter = (keyboardEvent == null ? void 0 : keyboardEvent.key) === "Enter" && !keyboardEvent.shiftKey && !keyboardEvent.metaKey && !keyboardEvent.ctrlKey && !keyboardEvent.altKey;
       const activeMarks = editor.api.marks();
-      const hasHighlight = Boolean(
-        (activeMarks == null ? void 0 : activeMarks.highlight) || (activeMarks == null ? void 0 : activeMarks.highlightColor)
+      const hasColorMark = COLOR_MARK_KEYS.some(
+        (key) => Boolean(activeMarks == null ? void 0 : activeMarks[key])
       );
       insertBreak();
-      if (!isPlainEnter || !hasHighlight) {
+      if (!isPlainEnter || !hasColorMark || !editor.api.isEmpty(editor.selection, { block: true })) {
         return;
       }
-      editor.tf.removeMark("highlight");
-      editor.tf.removeMark("highlightColor");
-      editor.tf.unsetNodes(["highlight", "highlightColor"], {
+      editor.tf.removeMarks(COLOR_MARK_KEYS);
+      editor.tf.unsetNodes(COLOR_MARK_KEYS, {
         at: editor.selection ?? void 0,
         match: (node) => editor.api.isText(node)
       });
@@ -71459,7 +71543,6 @@ const createEditorPlugins = ({
   createHardBreakPlugin,
   createInvalidMarkdownPlugin,
   CorrectNodeBehaviorPlugin,
-  ClearHighlightOnEnterPlugin,
   LinkPlugin.configure({
     options: {
       // Custom validation function to allow relative links, e.g., /about
@@ -71567,7 +71650,9 @@ const createEditorPlugins = ({
         }
       ]
     }
-  })
+  }),
+  // Last, so it wraps list and other block handlers that don't pass Enter on
+  ClearColorMarksOnEnterPlugin
 ];
 const RichEditor = ({ input, tinaForm, field }) => {
   var _a, _b;

package/dist/rich-text/index.d.ts

@@ -47,6 +47,10 @@ type BaseComponents = {
         children: JSX.Element;
         color?: string;
     };
+    textColor?: {
+        children: JSX.Element;
+        color: string;
+    };
     text?: {
         children: string;
     };

package/dist/rich-text/index.js

@@ -1,3 +1,4 @@
+import { isSafeCssColor } from "@tinacms/mdx/sanitize-css-color";
 import { sanitizeUrl } from "@tinacms/mdx/sanitize-url";
 import React from "react";
 const TinaMarkdown = ({
@@ -15,6 +16,7 @@ const TinaMarkdown = ({
     return /* @__PURE__ */ React.createElement(MemoNode, { components, key: index, child });
   }));
 };
+const safeColor = (value) => value && isSafeCssColor(value) ? value : void 0;
 const Leaf = (props) => {
   if (props.bold) {
     const { bold, ...rest } = props;
@@ -58,17 +60,24 @@ const Leaf = (props) => {
   }
   if (props.highlight) {
     const { highlight, highlightColor, ...rest } = props;
+    const color = safeColor(highlightColor);
     if (props.components.highlight) {
       const Component = props.components.highlight;
-      return /* @__PURE__ */ React.createElement(Component, { color: highlightColor }, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
+      return /* @__PURE__ */ React.createElement(Component, { color }, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
     }
-    return /* @__PURE__ */ React.createElement(
-      "mark",
-      {
-        style: highlightColor ? { backgroundColor: highlightColor } : void 0
-      },
-      /* @__PURE__ */ React.createElement(Leaf, { ...rest })
-    );
+    return /* @__PURE__ */ React.createElement("mark", { style: color ? { backgroundColor: color } : void 0 }, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
+  }
+  if (props.textColor) {
+    const { textColor, ...rest } = props;
+    const color = safeColor(textColor);
+    if (!color) {
+      return /* @__PURE__ */ React.createElement(Leaf, { ...rest });
+    }
+    if (props.components.textColor) {
+      const Component = props.components.textColor;
+      return /* @__PURE__ */ React.createElement(Component, { color }, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
+    }
+    return /* @__PURE__ */ React.createElement("span", { style: { color } }, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
   }
   if (props.components.text) {
     const Component = props.components.text;

package/dist/toolkit/fields/plugins/date-format.d.ts

@@ -9,5 +9,6 @@ export interface DateFieldProps {
 }
 export declare const DEFAULT_DATE_DISPLAY_FORMAT = "MMM DD, YYYY";
 export declare const DEFAULT_TIME_DISPLAY_FORMAT = "h:mm A";
+export declare const getHourCycle: (timeFormat?: string) => 12 | 24;
 export declare const format: (val: string, _name: string, field: DateFieldProps) => string;
 export declare const parse: (val: string) => string;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/components/plate-ui/icons.d.ts

@@ -65,6 +65,7 @@ export declare const Icons: {
     search: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     settings: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     highlight: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    textColor: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     strikethrough: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     subscript: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     superscript: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/components/plate-ui/mark-toolbar-button.d.ts

@@ -4,3 +4,4 @@ export declare const StrikethroughToolbarButton: () => React.JSX.Element;
 export declare const ItalicToolbarButton: () => React.JSX.Element;
 export declare const CodeToolbarButton: () => React.JSX.Element;
 export declare const HighlightToolbarButton: () => React.JSX.Element;
+export declare const TextColorToolbarButton: () => React.JSX.Element;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/plugins/text-color-plugin.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Leaf mark for coloured text. The mark's value is the CSS colour itself
+ * (`{ text, textColor: '#CC4141' }`) — there is no separate boolean flag.
+ */
+export declare const TextColorPlugin: import("@udecode/plate/react").PlatePlugin<import("@udecode/plate").PluginConfig<"textColor", {}, {}, {}, {}>>;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/plugins/ui/components.d.ts

@@ -177,6 +177,7 @@ export declare const Components: () => {
     a: typeof LinkElement;
     code: typeof CodeLeaf;
     highlight: ({ leaf, ...props }: React.ComponentProps<typeof PlateLeaf>) => React.JSX.Element;
+    textColor: ({ leaf, ...props }: React.ComponentProps<typeof PlateLeaf>) => React.JSX.Element;
     underline: React.ForwardRefExoticComponent<Omit<Omit<import("@udecode/plate/react").PlateLeafProps<import("@udecode/plate").TText, import("@udecode/plate").AnyPluginConfig>, keyof {
         className?: string;
         style?: React.CSSProperties;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/toolbar/toolbar-overrides.d.ts

@@ -1,5 +1,5 @@
-import type { HeadingLevel, ToolbarOverrideType } from '@tinacms/schema-tools';
-export type { HeadingLevel, ToolbarOverrideType };
+import type { HeadingLevel, RichTextColorOption, ToolbarOverrideType } from '@tinacms/schema-tools';
+export type { HeadingLevel, RichTextColorOption, ToolbarOverrideType };
 export declare const STANDARD_ICON_WIDTH = 32;
 export declare const HEADING_ICON_WITH_TEXT = 127;
 export declare const HEADING_ICON_ONLY = 58;
@@ -11,4 +11,5 @@ export type ToolbarOverrides = {
     toolbar?: ToolbarOverrideType[];
     showFloatingToolbar?: boolean;
     headingLevels?: HeadingLevel[];
+    textColors?: RichTextColorOption[];
 };

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/toolbar/toolbar-provider.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { type ReactNode } from 'react';
+import { type HeadingLevel } from '@tinacms/schema-tools';
 import type { Form } from '../../../../../forms';
 import type { MdxTemplate } from '../types';
-import { type HeadingLevel } from '@tinacms/schema-tools';
-import type { ToolbarOverrides, ToolbarOverrideType } from './toolbar-overrides';
+import type { RichTextColorOption, ToolbarOverrideType, ToolbarOverrides } from './toolbar-overrides';
 interface ToolbarContextProps {
     tinaForm: Form;
     templates: MdxTemplate[];
@@ -16,8 +16,10 @@ interface ToolbarContextProps {
      * from "use the legacy default" without re-deriving the check.
      */
     headingLevelsConfigured: boolean;
+    /** Palette for the text colour dropdown (schema value or default). */
+    textColors: readonly RichTextColorOption[];
 }
-interface ToolbarProviderProps extends Omit<ToolbarContextProps, 'headingLevels' | 'headingLevelsConfigured'> {
+interface ToolbarProviderProps extends Omit<ToolbarContextProps, 'headingLevels' | 'headingLevelsConfigured' | 'textColors'> {
     children: ReactNode;
 }
 export declare const ToolbarProvider: React.FC<ToolbarProviderProps>;

package/package.json

@@ -2,7 +2,7 @@
   "name": "tinacms",
   "type": "module",
   "typings": "dist/index.d.ts",
-  "version": "3.14.4",
+  "version": "3.15.0",
   "main": "dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -104,19 +104,18 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dropzone": "14.2.3",
     "react-final-form": "^6.5.9",
-    "react-router-dom": "^6.30.3",
+    "react-router-dom": "^7.18.4",
     "react-use": "^17.6.0",
     "tailwind-merge": "^2.6.0",
     "webfontloader": "1.6.28",
     "yup": "^1.6.1",
     "zod": "^3.24.2",
-    "@tinacms/mdx": "^2.3.0",
-    "@tinacms/schema-tools": "^2.10.1",
-    "@tinacms/search": "^1.2.26",
-    "@tinacms/bridge": "^0.3.1"
+    "@tinacms/bridge": "^0.3.1",
+    "@tinacms/schema-tools": "^2.11.0",
+    "@tinacms/mdx": "^2.4.0",
+    "@tinacms/search": "^1.2.26"
   },
   "devDependencies": {
-    "@graphql-tools/utils": "^10.8.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.2.0",
@@ -132,7 +131,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest-file-snapshot": "^0.7.0",
     "lowlight": "^3.3.0",
-    "next": "15.5.21",
+    "next": "15.5.27",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",