pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Components/Editor/EditorProps.d.ts

@@ -1,6 +1,132 @@
-import JoditEditor from "jodit-react";
-import type { ComponentProps } from "react";
-export type EditorProps = Pick<ComponentProps<typeof JoditEditor>, "value" | "config" | "className" | "onChange" | "onBlur"> & {
-    editorRef?: React.RefObject<any>;
+import type JoditEditor from "jodit-react";
+import type { ComponentProps, ElementType, Ref } from "react";
+type JoditEditorProps = ComponentProps<typeof JoditEditor>;
+/** A field a template can reference; `path` is what the stored token carries. */
+export type EditorMergeField = {
+    /** Dotted path the backend resolves, e.g. `candidate.name`. */
+    path: string;
+    /** Text shown on the chip and in the Insert field menu. */
+    label: string;
+    /** Heading the field is listed under in the Insert field menu. */
+    group?: string;
+    /** Example value, shown on the chip's hover title. */
+    sample?: string;
+    /** Record the field belongs to (e.g. `employee`); carried for a field browser, not read by `Editor`. */
+    object?: string;
+    /** What `object` is, shown beside its heading in a field browser. */
+    objectDescription?: string;
+    /** What the field holds, shown in a field browser. */
+    description?: string;
+    /** Longer illustrative value for a field browser; `sample` stays the chip title. */
+    example?: string;
+    /** Where the value comes from (e.g. a module or API), shown in a field browser. */
+    source?: string;
+    /** True when the field resolves to an image, not text. */
+    image?: boolean;
+};
+/** How a token is written in the stored HTML. */
+export type EditorTokenSyntax = {
+    /** Opening delimiter, e.g. `${`; matched literally. */
+    open: string;
+    /** Closing delimiter, e.g. `}`; matched literally. */
+    close: string;
+};
+/** Imperative handle for toolbar buttons and `apiRef`; every method works on the live editor. */
+export interface EditorApi {
+    /** Inserts raw HTML at the last remembered caret position, or at the cursor if none was recorded. */
+    insertHTML(html: string): void;
+    /** Inserts a chip for the merge field `path` (a raw token when `mergeFields` is unset); an unknown path renders as an unknown-field chip. */
+    insertField(path: string): void;
+    /** Returns the trimmed text of the last remembered selection, or an empty string when there is none. */
+    getSelectionText(): string;
+    /** Replaces every plain-text occurrence outside tokens and tags; returns the count. */
+    replaceAll(text: string, path: string): number;
+    /** Counts plain-text occurrences of `text` outside tokens and tags that `replaceAll` would replace. */
+    countOccurrences(text: string): number;
+    /** Moves keyboard focus into the editing area. */
+    focus(): void;
+}
+/** An extra button in the strip above the editor. */
+export type EditorToolbarButton = {
+    /** Unique key; also forms the button's test id `editor-button-<id>`. */
+    id: string;
+    /** Visible button text. */
+    label: string;
+    /** Icon component reference (e.g. `Star`), not a rendered element; shown before the label. */
+    icon?: ElementType;
+    /** Read through a ref — a new function each render never re-creates the editor. */
+    onClick: (api: EditorApi) => void;
+    /** Disables this button; it is also disabled while the editor is loading or read-only. */
+    isDisabled?: boolean;
+};
+/** Every visible string of the merge-field UI; omit a key to keep its English default. */
+export type EditorLabels = Partial<{
+    /** Accessible name of the editing area when no visible `label` is given. */
+    editor: string;
+    /** Placeholder and accessible name of the Insert field menu. */
+    insertField: string;
+    /** Text shown in the Insert field menu when it has no options. */
+    noFields: string;
+    /** Text of the Make dynamic toolbar button. */
+    makeDynamic: string;
+    /** Title of the Make dynamic dialog. */
+    dynamicTitle: string;
+    /** Label of the field picker in the Make dynamic dialog. */
+    dynamicField: string;
+    /** Placeholder of the field picker in the Make dynamic dialog. */
+    dynamicFieldPlaceholder: string;
+    /** Receives the number of matches and returns the line shown under the picker, e.g. "3 occurrences will be replaced". */
+    dynamicCount: (n: number) => string;
+    /** Text of the confirm button in the Make dynamic dialog. */
+    dynamicReplace: string;
+    /** Message shown in the Make dynamic dialog when no text was selected. */
+    dynamicNoSelection: string;
+    /** Receives the comma-joined unmatched token paths and returns the validation message shown under the editor. */
+    unknownTokens: (list: string) => string;
+    /** Text of the cancel button in the Make dynamic dialog. */
+    cancel: string;
+    /** Caption above the selected text in the Make dynamic dialog. */
+    dynamicSelected: string;
+    /** Accessible name of the toolbar strip above the editor. */
+    toolbar: string;
+    /** Receives a field label and returns the accessible name of its chip, e.g. "Field: Name". */
+    fieldChip: (label: string) => string;
+}>;
+/** Props for the lazy-loaded Jodit wrapper; a `config.theme`/`config.popupRoot` you pass overrides this library's own dark-mode fix. */
+export type EditorProps = Pick<JoditEditorProps, "value" | "className" | "onChange" | "onBlur"> & {
+    /** Jodit config; set sourceEditor "area" and beautifyHTML false to avoid cdnjs calls under CSP. */
+    config?: JoditEditorProps["config"];
+    /** `key` is dead (React reserves it, never reaches Jodit); `editorRef.current` stays null until the lazy chunk loads. */
+    editorRef?: JoditEditorProps["ref"];
+    /** Reserved by React and never reaches Jodit; has no effect, so do not rely on it to remount the editor. */
     key?: string | number;
+    /** Visible label above the editor; clicking it focuses the editor, and it becomes the editor's accessible name. */
+    label?: string;
+    /** Shows a required asterisk and sets `aria-required`; does not validate. */
+    isRequired?: boolean;
+    /** Hint under the editor; replaced by `errorMessage` while `error` is true. */
+    helperText?: string;
+    /** Marks the editor invalid; `errorMessage` shows only while this is true. */
+    error?: boolean;
+    /** Message shown instead of `helperText` while `error` is true. */
+    errorMessage?: string;
+    /** Enables the Insert field menu, token chips and Make dynamic. */
+    mergeFields?: EditorMergeField[];
+    /** Token syntax in the stored HTML; default `{ open: "${", close: "}" }`. */
+    tokenSyntax?: EditorTokenSyntax;
+    /** Shows the Make dynamic button; defaults to true when `mergeFields` is set. */
+    showMakeDynamic?: boolean;
+    /** Extra buttons beside Insert field; handlers are read through refs. */
+    toolbarButtons?: EditorToolbarButton[];
+    /** Fires with the paths of tokens that match no merge field, when that set changes. */
+    onUnknownTokens?: (paths: string[]) => void;
+    /** Imperative API, available after the lazy chunk loads (`onReady` fires then). */
+    apiRef?: Ref<EditorApi>;
+    /** Fires once the lazy Jodit chunk has loaded and the editor is ready, when `apiRef` becomes usable. */
+    onReady?: () => void;
+    /** Overrides any subset of the UI strings; unset keys keep their English default. */
+    labels?: EditorLabels;
+    /** Test id placed on the root wrapper. */
+    "data-testid"?: string;
 };
+export {};

package/dist/Components/Editor/MakeDynamicDialog.d.ts

@@ -0,0 +1,12 @@
+import type { OptionProp } from "../Select/SelectProps";
+import type { ResolvedEditorLabels } from "./editorLabels";
+type MakeDynamicDialogProps = {
+    selectedText: string | null;
+    options: OptionProp[];
+    labels: ResolvedEditorLabels;
+    countFor: (text: string) => number;
+    onReplace: (text: string, path: string) => void;
+    onClose: () => void;
+};
+export default function MakeDynamicDialog({ selectedText, options, labels, countFor, onReplace, onClose, }: MakeDynamicDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/Editor/MakeDynamicDialog.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MakeDynamicDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Modal_1 = __importStar(require("../Modal/Modal"));
+const Select_1 = __importDefault(require("../Select/Select"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+function MakeDynamicDialog({ selectedText, options, labels, countFor, onReplace, onClose, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [path, setPath] = (0, react_1.useState)("");
+    const count = selectedText ? countFor(selectedText) : 0;
+    const close = () => {
+        setPath("");
+        onClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: selectedText !== null, onClose: close, size: "md", isCentered: true, title: labels.dynamicTitle, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: selectedText ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, "data-testid": "editor-dynamic-dialog", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: labels.dynamicSelected }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: 500, color: colors.text[800], noOfLines: 3, children: ["\u201C", selectedText, "\u201D"] })] }), (0, jsx_runtime_1.jsx)(Select_1.default, { native: false, label: labels.dynamicField, placeholder: labels.dynamicFieldPlaceholder, options: options, value: path, onChange: (option) => setPath(option ? String(option.id) : ""), "data-testid": "editor-dynamic-field" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.textMuted, "aria-live": "polite", children: labels.dynamicCount(count) })] })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[800], "data-testid": "editor-dynamic-empty", children: labels.dynamicNoSelection })) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, justify: "flex-end", w: "100%", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: close }), selectedText ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.dynamicReplace, onClick: () => {
+                                onReplace(selectedText, path);
+                                close();
+                            }, isDisabled: !path || count === 0, "data-testid": "editor-dynamic-apply" })) : null] }) })] }));
+}

package/dist/Components/Editor/editorLabels.d.ts

@@ -0,0 +1,4 @@
+import type { EditorLabels } from "./EditorProps";
+export type ResolvedEditorLabels = Required<EditorLabels>;
+export declare const DEFAULT_EDITOR_LABELS: ResolvedEditorLabels;
+export declare const resolveEditorLabels: (labels?: EditorLabels) => ResolvedEditorLabels;

package/dist/Components/Editor/editorLabels.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveEditorLabels = exports.DEFAULT_EDITOR_LABELS = void 0;
+exports.DEFAULT_EDITOR_LABELS = {
+    editor: "Rich text editor",
+    insertField: "Insert field",
+    noFields: "No fields",
+    makeDynamic: "Make dynamic",
+    dynamicTitle: "Make dynamic",
+    dynamicField: "Field",
+    dynamicFieldPlaceholder: "Choose a field",
+    dynamicCount: (n) => `${n} ${n === 1 ? "occurrence" : "occurrences"} will be replaced`,
+    dynamicReplace: "Replace",
+    dynamicNoSelection: "Select some text in the editor first.",
+    unknownTokens: (list) => `Unknown fields: ${list}`,
+    cancel: "Cancel",
+    dynamicSelected: "Selected text",
+    toolbar: "Template fields",
+    fieldChip: (label) => `Field: ${label}`,
+};
+const resolveEditorLabels = (labels) => ({
+    ...exports.DEFAULT_EDITOR_LABELS,
+    ...labels,
+});
+exports.resolveEditorLabels = resolveEditorLabels;

package/dist/Components/Editor/editorTokenStyles.d.ts

@@ -0,0 +1,36 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const chipColors: (colors: PaletteProps) => {
+    known: {
+        bg: string;
+        ink: string;
+    };
+    unknown: {
+        bg: string;
+        ink: string;
+    };
+};
+export declare const chipStyles: (colors: PaletteProps) => {
+    ".pxl-token": {
+        display: string;
+        px: string;
+        borderRadius: string;
+        border: string;
+        bg: string;
+        color: string;
+        cursor: string;
+    };
+    ".pxl-token[data-known=\"false\"]": {
+        bg: string;
+        color: string;
+        border: string;
+        borderColor: string;
+    };
+};
+export declare const frameFocusStyles: (colors: PaletteProps) => {
+    ".jodit-container:not(.jodit_inline):focus-within": {
+        outline: string;
+        outlineOffset: string;
+        boxShadow: string;
+        borderColor: string;
+    };
+};

package/dist/Components/Editor/editorTokenStyles.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.frameFocusStyles = exports.chipStyles = exports.chipColors = void 0;
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const editorTokens_1 = require("./editorTokens");
+const chipColors = (colors) => ({
+    known: { bg: colors.primary.opacity[8], ink: colors.accentText },
+    unknown: { bg: "transparent", ink: colors.semanticText.error },
+});
+exports.chipColors = chipColors;
+const chipStyles = (colors) => {
+    const { known, unknown } = (0, exports.chipColors)(colors);
+    return {
+        [`.${editorTokens_1.CHIP_CLASS}`]: {
+            display: "inline-block",
+            px: "0.25rem",
+            borderRadius: "sm",
+            border: "1px solid transparent",
+            bg: known.bg,
+            color: known.ink,
+            cursor: "default",
+        },
+        [`.${editorTokens_1.CHIP_CLASS}[data-known="false"]`]: {
+            bg: unknown.bg,
+            color: unknown.ink,
+            border: "1px dashed",
+            borderColor: unknown.ink,
+        },
+    };
+};
+exports.chipStyles = chipStyles;
+const frameFocusStyles = (colors) => ({
+    ".jodit-container:not(.jodit_inline):focus-within": {
+        borderColor: colors.primary[500],
+        ...(0, focusRing_styles_1.fieldFocusVisible)(colors),
+    },
+});
+exports.frameFocusStyles = frameFocusStyles;

package/dist/Components/Editor/editorTokens.d.ts

@@ -0,0 +1,29 @@
+import type { EditorMergeField, EditorTokenSyntax } from "./EditorProps";
+import type { OptionProp } from "../Select/SelectProps";
+export declare const DEFAULT_TOKEN_SYNTAX: EditorTokenSyntax;
+export declare const CHIP_CLASS = "pxl-token";
+export declare const fieldToken: (path: string, syntax?: EditorTokenSyntax) => string;
+export declare function fieldOptions(fields: EditorMergeField[], syntax?: EditorTokenSyntax): OptionProp[];
+export declare function extractTokens(html: string, syntax?: EditorTokenSyntax): string[];
+export declare function unknownTokens(html: string, fields: EditorMergeField[], syntax?: EditorTokenSyntax): string[];
+/** Replaces every whitespace-insensitive occurrence of `selectedText` outside tags and tokens. */
+export declare function makeDynamic(html: string, selectedText: string, path: string, syntax?: EditorTokenSyntax): {
+    html: string;
+    count: number;
+};
+export declare function countOccurrences(html: string, selectedText: string, syntax?: EditorTokenSyntax): number;
+export type ChipContext = {
+    /** Merge fields used to resolve a path to its chip label and hover sample. */
+    fields: EditorMergeField[];
+    /** Token delimiters the chips serialize back to. */
+    syntax: EditorTokenSyntax;
+    /** Maps a field label to the chip's accessible name. */
+    chipLabel: (label: string) => string;
+};
+export declare function chipHtml(path: string, { fields, syntax, chipLabel }: ChipContext): string;
+/** Raw `${path}` tokens in text nodes become non-editable chip spans; tags are left alone. */
+export declare function chipify(html: string, context: ChipContext): string;
+/** Inverse of `chipify`: every chip span collapses back to its raw token. */
+export declare function serializeChips(html: string, syntax?: EditorTokenSyntax): string;
+/** The chip a Backspace (backward) or Delete (forward) at a collapsed caret would eat, if any. */
+export declare function adjacentChip(range: Range, direction: "backward" | "forward"): HTMLElement | null;

package/dist/Components/Editor/editorTokens.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fieldToken = exports.CHIP_CLASS = exports.DEFAULT_TOKEN_SYNTAX = void 0;
+exports.fieldOptions = fieldOptions;
+exports.extractTokens = extractTokens;
+exports.unknownTokens = unknownTokens;
+exports.makeDynamic = makeDynamic;
+exports.countOccurrences = countOccurrences;
+exports.chipHtml = chipHtml;
+exports.chipify = chipify;
+exports.serializeChips = serializeChips;
+exports.adjacentChip = adjacentChip;
+exports.DEFAULT_TOKEN_SYNTAX = { open: "${", close: "}" };
+exports.CHIP_CLASS = "pxl-token";
+const PATH_CHARS = "[A-Za-z0-9_.]+";
+const TAG_SPLIT = /(<[^>]*>)/;
+const CHIP_PATTERN = /<span\b([^>]*\bdata-field=(["'])([^"']*)\2[^>]*)>[^<]*<\/span>/g;
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const escapeHtml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const escapeAttr = (text) => escapeHtml(text).replace(/"/g, "&quot;");
+const patternsFor = ({ open, close }) => {
+    const o = escapeRegExp(open);
+    const c = escapeRegExp(close);
+    return {
+        match: new RegExp(`${o}(${PATH_CHARS})${c}`, "g"),
+        split: new RegExp(`(${o}(?:(?!${c})[\\s\\S])*${c})`),
+    };
+};
+const fieldToken = (path, syntax = exports.DEFAULT_TOKEN_SYNTAX) => `${syntax.open}${path}${syntax.close}`;
+exports.fieldToken = fieldToken;
+function fieldOptions(fields, syntax = exports.DEFAULT_TOKEN_SYNTAX) {
+    const groups = [...new Set(fields.map((field) => field.group))];
+    return groups.flatMap((group) => fields
+        .filter((field) => field.group === group)
+        .map((field) => ({
+        id: field.path,
+        label: field.label,
+        group,
+        description: (0, exports.fieldToken)(field.path, syntax),
+    })));
+}
+function extractTokens(html, syntax = exports.DEFAULT_TOKEN_SYNTAX) {
+    const { match } = patternsFor(syntax);
+    return [...new Set([...html.matchAll(match)].map((m) => m[1]))];
+}
+function unknownTokens(html, fields, syntax = exports.DEFAULT_TOKEN_SYNTAX) {
+    const known = new Set(fields.map((field) => field.path));
+    return extractTokens(html, syntax).filter((path) => !known.has(path));
+}
+function needlePattern(text) {
+    const words = text
+        .trim()
+        .split(/\s+/)
+        .map((word) => escapeRegExp(escapeHtml(word)));
+    return new RegExp(words.join("(?:\\s|&nbsp;|\\u00a0)+"), "g");
+}
+function mapTextOutsideTokens(html, syntax, mapText) {
+    const { split } = patternsFor(syntax);
+    return html
+        .split(TAG_SPLIT)
+        .map((segment) => segment.startsWith("<")
+        ? segment
+        : segment
+            .split(split)
+            .map((part, i) => (i % 2 === 1 ? part : mapText(part)))
+            .join(""))
+        .join("");
+}
+/** Replaces every whitespace-insensitive occurrence of `selectedText` outside tags and tokens. */
+function makeDynamic(html, selectedText, path, syntax = exports.DEFAULT_TOKEN_SYNTAX) {
+    if (!selectedText.trim())
+        return { html, count: 0 };
+    const pattern = needlePattern(selectedText);
+    let count = 0;
+    const next = mapTextOutsideTokens(html, syntax, (text) => text.replace(pattern, () => {
+        count += 1;
+        return (0, exports.fieldToken)(path, syntax);
+    }));
+    return { html: next, count };
+}
+function countOccurrences(html, selectedText, syntax = exports.DEFAULT_TOKEN_SYNTAX) {
+    return makeDynamic(html, selectedText, "_", syntax).count;
+}
+function chipHtml(path, { fields, syntax, chipLabel }) {
+    const field = fields.find((f) => f.path === path);
+    const text = field ? field.label : (0, exports.fieldToken)(path, syntax);
+    const title = (field === null || field === void 0 ? void 0 : field.sample) ? ` title="${escapeAttr(field.sample)}"` : "";
+    return (`<span class="${exports.CHIP_CLASS}" data-field="${escapeAttr(path)}" data-known="${field ? "true" : "false"}"` +
+        ` contenteditable="false" role="img" aria-label="${escapeAttr(chipLabel(text))}"${title}>${escapeHtml(text)}</span>`);
+}
+/** Raw `${path}` tokens in text nodes become non-editable chip spans; tags are left alone. */
+function chipify(html, context) {
+    const { match } = patternsFor(context.syntax);
+    return html
+        .split(TAG_SPLIT)
+        .map((segment) => segment.startsWith("<") ? segment : segment.replace(match, (_t, path) => chipHtml(path, context)))
+        .join("");
+}
+/** Inverse of `chipify`: every chip span collapses back to its raw token. */
+function serializeChips(html, syntax = exports.DEFAULT_TOKEN_SYNTAX) {
+    return html.replace(CHIP_PATTERN, (_m, _attrs, _q, path) => (0, exports.fieldToken)(path, syntax));
+}
+const isChip = (node) => !!node && node.nodeType === 1 && node.hasAttribute("data-field");
+const INVISIBLE = /[\u200b\ufeff]/g;
+const isBlankText = (node) => !node.data.replace(INVISIBLE, "");
+const skipEmptyText = (node, step) => {
+    let current = node;
+    while (current && current.nodeType === 3 && isBlankText(current))
+        current = current[step];
+    return current;
+};
+/** The chip a Backspace (backward) or Delete (forward) at a collapsed caret would eat, if any. */
+function adjacentChip(range, direction) {
+    var _a;
+    if (!range.collapsed)
+        return null;
+    const node = range.startContainer;
+    const offset = range.startOffset;
+    const step = direction === "backward" ? "previousSibling" : "nextSibling";
+    let candidate;
+    if (node.nodeType === 3) {
+        const text = node.data;
+        const beyond = direction === "backward" ? text.slice(0, offset) : text.slice(offset);
+        const atEdge = !beyond.replace(INVISIBLE, "");
+        if (!atEdge)
+            return null;
+        candidate = node[step];
+    }
+    else {
+        candidate = (_a = node.childNodes[direction === "backward" ? offset - 1 : offset]) !== null && _a !== void 0 ? _a : null;
+    }
+    const found = skipEmptyText(candidate, step);
+    return isChip(found) ? found : null;
+}

package/dist/Components/Editor/joditAccessibility.d.ts

@@ -0,0 +1 @@
+export declare const applyJoditAccessibilityFixes: (root: ParentNode) => void;

package/dist/Components/Editor/joditAccessibility.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyJoditAccessibilityFixes = void 0;
+// Jodit puts aria-label on the listitem wrapper, not the real inner <button> — fixes that here.
+const applyJoditAccessibilityFixes = (root) => {
+    root.querySelectorAll('[role="trigger"]').forEach((el) => {
+        el.removeAttribute("role");
+        el.setAttribute("aria-hidden", "true");
+    });
+    root.querySelectorAll("[role=\"listitem\"]").forEach((item) => {
+        const label = item.getAttribute("aria-label");
+        const parent = item.parentElement;
+        if (parent && !parent.hasAttribute("role")) {
+            parent.setAttribute("role", "list");
+        }
+        if (!label)
+            return;
+        const button = item.querySelector('button, [role="button"]');
+        if (button && !button.hasAttribute("aria-label")) {
+            button.setAttribute("aria-label", label);
+        }
+    });
+    root.querySelectorAll(".jodit-toolbar-editor-collection").forEach((toolbar) => {
+        if (!toolbar.hasAttribute("role"))
+            toolbar.setAttribute("role", "toolbar");
+    });
+};
+exports.applyJoditAccessibilityFixes = applyJoditAccessibilityFixes;

package/dist/Components/Editor/joditThemeVars.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties } from "react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+/**
+ * Maps this library's active palette to the CSS custom properties Jodit's own light/dark theme
+ * CSS reads (`node_modules/jodit/es2021/jodit.css`). Jodit's `theme: "dark" | "default"` config
+ * only toggles which of ITS OWN selectors apply (`.jodit_theme_dark`, `.jodit-ui-input_theme_dark`,
+ * …) — those selectors are still driven by Jodit's own hardcoded `--jd-dark-*` / `--jd-color-*`
+ * custom properties (a generic mid-gray `#575757` canvas, a blue `#1e88e5` accent, …), so toggling
+ * the theme alone renders the editor in Jodit's palette instead of ours. This is what shipped the
+ * reported "editor is not black" bug in dark mode.
+ *
+ * `PaletteProps.background`/`.text` are role-stable ColorScales whose LIGHTNESS (not index)
+ * flips between modes — e.g. `background[50]` is `#ffffff` in light and near-black in dark, and
+ * `text[900]` is near-black ink in light and near-white ink in dark (see
+ * `Theme/tokens/builders/buildDarkPalette.ts`). So the *same* token expression already resolves
+ * correctly in both modes; only the Jodit CSS-variable NAME differs (`--jd-dark-*` only takes
+ * effect inside `.jodit_theme_dark`, `--jd-color-*` is what the default theme reads), which is why
+ * this still branches on `isDark`.
+ */
+export declare const getJoditThemeVars: (colors: PaletteProps, isDark: boolean) => CSSProperties;

package/dist/Components/Editor/joditThemeVars.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getJoditThemeVars = void 0;
+/**
+ * Maps this library's active palette to the CSS custom properties Jodit's own light/dark theme
+ * CSS reads (`node_modules/jodit/es2021/jodit.css`). Jodit's `theme: "dark" | "default"` config
+ * only toggles which of ITS OWN selectors apply (`.jodit_theme_dark`, `.jodit-ui-input_theme_dark`,
+ * …) — those selectors are still driven by Jodit's own hardcoded `--jd-dark-*` / `--jd-color-*`
+ * custom properties (a generic mid-gray `#575757` canvas, a blue `#1e88e5` accent, …), so toggling
+ * the theme alone renders the editor in Jodit's palette instead of ours. This is what shipped the
+ * reported "editor is not black" bug in dark mode.
+ *
+ * `PaletteProps.background`/`.text` are role-stable ColorScales whose LIGHTNESS (not index)
+ * flips between modes — e.g. `background[50]` is `#ffffff` in light and near-black in dark, and
+ * `text[900]` is near-black ink in light and near-white ink in dark (see
+ * `Theme/tokens/builders/buildDarkPalette.ts`). So the *same* token expression already resolves
+ * correctly in both modes; only the Jodit CSS-variable NAME differs (`--jd-dark-*` only takes
+ * effect inside `.jodit_theme_dark`, `--jd-color-*` is what the default theme reads), which is why
+ * this still branches on `isDark`.
+ */
+const getJoditThemeVars = (colors, isDark) => {
+    const shared = {
+        // Not remapped by `.jodit_theme_dark` in Jodit's own CSS, so one declaration covers both modes.
+        "--jd-color-border-selected": colors.primary[500],
+        // `--jd-color-panel` backs the search & replace box (`.jodit-ui-search__box`) and any other
+        // panel that isn't re-themed under `.jodit_theme_dark` (that scope overrides `--jd-color-border`
+        // itself to a hardcoded `#6b6b6b`, but never touches `--jd-color-panel`) — unset in dark mode it
+        // fell back to Jodit's own `#f9f9f9`, the reported "Search & Replace panel white" bug. Role-stable
+        // like `background`/`text`: the SAME expression already resolved correctly for the light branch.
+        "--jd-color-panel": colors.backgroundColor.secondary,
+        // Dialog/insert-link/insert-image inputs (`.jodit-ui-input__input`, `.jodit-ui-select__input`)
+        // read `--jd-color-white` as their OWN background regardless of theme unless Jodit applied its
+        // `_theme_dark` modifier class to that specific element (which reads `--jd-color-gray` instead,
+        // set below) — leaving either unset is what shipped the "white inputs" bug, since portalled
+        // dialog inputs don't reliably get the modifier class. `background[50]` is this library's
+        // established "white surface, darkens in dark mode" token (same pattern as the DatePicker
+        // month/year `<select>`), so one declaration is correct in both modes.
+        "--jd-color-white": colors.background[50],
+    };
+    if (isDark) {
+        return {
+            ...shared,
+            // `.jodit-workplace`'s own background rule in jodit.css (`.jodit-container:not(.jodit_inline)
+            // .jodit-workplace { background-color: var(--jd-color-background-default) }`) is NOT scoped
+            // under `.jodit_theme_dark` — that scope only re-themes the *border* on this selector, never
+            // the background. `--jd-color-background-default` itself is declared once, at `:root`, as
+            // `var(--jd-color-white)`, and our `--jd-color-white` override lives on this instance's wrapper
+            // (a descendant), so it never reaches `:root`'s own computed value. Left unset here, the
+            // workplace canvas fell back to Jodit's own white default even with `.jodit_theme_dark` active
+            // — this is the reported "canvas renders white in dark mode" bug.
+            "--jd-color-background-default": colors.backgroundColor.main, // .jodit-workplace canvas bg
+            "--jd-dark-background-color": colors.backgroundColor.main, // canvas / toolbar-box / wysiwyg bg
+            "--jd-dark-toolbar-color": colors.backgroundColor.secondary, // toolbar + status-bar bg
+            "--jd-dark-text-color": colors.text[900], // body/button/status-bar ink
+            "--jd-dark-icon-color": colors.text[700], // toolbar icon fill/stroke
+            // Was `colors.backgroundColor.muted` — computed at ~1.3:1 against the canvas (a near-miss
+            // that shipped: both values sit within ~11 lightness points of each other down near L7-18,
+            // where WCAG contrast collapses non-linearly). This backs BOTH the toolbar/dialog-button
+            // hover fill (paired with `--jd-dark-background-color` as the flipped-to-dark hover text —
+            // see `.jodit_theme_dark .jodit-ui-button:hover` in jodit.css) and the `.jodit-select`/
+            // `.jodit-input` background (paired with `--jd-dark-border-color` as its text). `background[900]`
+            // is this palette's dark-mode "bright highlight" rung (~9.7-10.7:1 against the canvas across
+            // brands) — verified numerically before this change, not assumed.
+            "--jd-dark-background-ligher": colors.background[900],
+            "--jd-dark-border-color": colors.boxborder[500], // select/input/dialog-header border
+            // `_theme_dark`-suffixed input/select variants read this instead of `--jd-color-white` above.
+            "--jd-color-gray": colors.background[50],
+        };
+    }
+    return {
+        ...shared,
+        "--jd-color-background-default": colors.backgroundColor.main, // workplace/popup bg
+        "--jd-color-text": colors.text[900], // base button/status-bar ink
+        "--jd-color-icon": colors.text[700], // base icon fill/stroke
+        "--jd-color-button-background-hover": colors.backgroundColor.muted, // hover bg
+        "--jd-color-border": colors.boxborder[500], // container/workplace border
+    };
+};
+exports.getJoditThemeVars = getJoditThemeVars;