pixelize-design-library 2.4.2-beta.58 → 2.4.2-beta.59

package/dist/Components/Editor/Editor.js

@@ -32,10 +32,23 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const FormLabel_1 = require("../Common/FormLabel");
+const useFieldIds_1 = require("../Common/useFieldIds");
+const EditorFieldBar_1 = __importDefault(require("./EditorFieldBar"));
+const MakeDynamicDialog_1 = __importDefault(require("./MakeDynamicDialog"));
+const editorTokens_1 = require("./editorTokens");
+const editorTokenStyles_1 = require("./editorTokenStyles");
+const editorLabels_1 = require("./editorLabels");
+const useEditorBridge_1 = require("./useEditorBridge");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const joditThemeVars_1 = require("./joditThemeVars");
@@ -48,8 +61,25 @@ const JoditEditor = react_1.default.lazy(async () => {
     return { default: ((_a = mod.default) !== null && _a !== void 0 ? _a : mod) };
 });
 /** Lazy-loaded Jodit wrapper — a `config.theme` or `config.popupRoot` you pass overrides this library's own dark-mode/popup fix; omit both keys. */
-const Editor = react_1.default.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, }) {
+const Editor = react_1.default.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, label, isRequired, helperText, error, errorMessage, mergeFields, tokenSyntax = editorTokens_1.DEFAULT_TOKEN_SYNTAX, showMakeDynamic, toolbarButtons, onUnknownTokens, apiRef, onReady, labels, "data-testid": testId, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const text = (0, react_1.useMemo)(() => (0, editorLabels_1.resolveEditorLabels)(labels), [labels]);
+    const { joditValue, attachEditor, api, instance, unknown } = (0, useEditorBridge_1.useEditorBridge)({
+        value,
+        onChange,
+        onBlur,
+        mergeFields,
+        syntax: tokenSyntax,
+        chipLabel: text.fieldChip,
+        apiRef,
+        onReady,
+        onUnknownTokens,
+    });
+    const hasFields = mergeFields !== undefined;
+    const options = (0, react_1.useMemo)(() => (0, editorTokens_1.fieldOptions)(mergeFields !== null && mergeFields !== void 0 ? mergeFields : [], tokenSyntax), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(mergeFields), tokenSyntax.open, tokenSyntax.close]);
+    const [dynamicText, setDynamicText] = (0, react_1.useState)(null);
     // Jodit portals dialogs/toolbar-dropdown popups (search & replace, image/link properties,
     // font-size list, ...) to `document.body` by default (`Dialog.destination` /
     // `getPopupViewRoot`), outside this wrapper's DOM subtree — so the CSS custom properties
@@ -84,6 +114,24 @@ const Editor = react_1.default.memo(function Editor({ value, key, config, editor
         observer.observe(popupRoot, { childList: true, subtree: true });
         return () => observer.disconnect();
     }, [popupRoot]);
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: setPopupRoot, sx: themeVars, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(JoditEditor, { config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }, key) }) }));
+    const unknownActive = hasFields && unknown.length > 0 && !(error && errorMessage);
+    const ids = (0, useFieldIds_1.useFieldIds)(undefined, { error, errorMessage, helperText });
+    const describedBy = unknownActive ? ids.errorId : ids.describedBy;
+    const invalid = Boolean(error) || unknownActive;
+    const isReadOnly = Boolean(stableConfig === null || stableConfig === void 0 ? void 0 : stableConfig.readonly);
+    (0, react_1.useEffect)(() => {
+        if (!instance)
+            return;
+        const el = instance.editor;
+        const set = (name, val) => val === undefined ? el.removeAttribute(name) : el.setAttribute(name, val);
+        set("role", "textbox");
+        set("aria-multiline", "true");
+        set("aria-labelledby", label ? ids.labelId : undefined);
+        set("aria-describedby", describedBy);
+        set("aria-invalid", invalid ? "true" : undefined);
+        set("aria-required", isRequired ? "true" : undefined);
+    }, [instance, label, ids.labelId, describedBy, invalid, isRequired]);
+    const showFieldBar = hasFields || Boolean(toolbarButtons === null || toolbarButtons === void 0 ? void 0 : toolbarButtons.length);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": testId, children: [label && ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "label", id: ids.labelId, display: "block", onClick: () => api.focus(), ...(0, FormLabel_1.fieldLabelStyles)(theme.colors), children: [label, isRequired && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" }))] })), showFieldBar && ((0, jsx_runtime_1.jsx)(EditorFieldBar_1.default, { options: options, labels: text, api: api, isDisabled: !instance || isReadOnly, showFieldMenu: hasFields, showMakeDynamic: hasFields && (showMakeDynamic !== null && showMakeDynamic !== void 0 ? showMakeDynamic : true), buttons: toolbarButtons !== null && toolbarButtons !== void 0 ? toolbarButtons : [], onMakeDynamic: () => setDynamicText(api.getSelectionText()) })), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: setPopupRoot, sx: { ...themeVars, ...(0, editorTokenStyles_1.chipStyles)(theme.colors) }, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: popupRoot && ((0, jsx_runtime_1.jsx)(JoditEditor, { config: stableConfig, value: joditValue, ref: editorRef, editorRef: attachEditor, className: className }, key)) }) }), unknownActive ? ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { id: ids.errorId, errorMessage: text.unknownTokens(unknown.join(", ")) })) : ((0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })), hasFields && ((0, jsx_runtime_1.jsx)(MakeDynamicDialog_1.default, { selectedText: dynamicText, options: options, labels: text, countFor: api.countOccurrences, onReplace: api.replaceAll, onClose: () => setDynamicText(null) }))] }));
 });
 exports.default = Editor;

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

@@ -0,0 +1,15 @@
+import type { OptionProp } from "../Select/SelectProps";
+import type { EditorApi, EditorToolbarButton } from "./EditorProps";
+import type { ResolvedEditorLabels } from "./editorLabels";
+type EditorFieldBarProps = {
+    options: OptionProp[];
+    labels: ResolvedEditorLabels;
+    api: EditorApi;
+    isDisabled: boolean;
+    showFieldMenu: boolean;
+    showMakeDynamic: boolean;
+    buttons: EditorToolbarButton[];
+    onMakeDynamic: () => void;
+};
+export default function EditorFieldBar({ options, labels, api, isDisabled, showFieldMenu, showMakeDynamic, buttons, onMakeDynamic, }: EditorFieldBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/Editor/EditorFieldBar.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = EditorFieldBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Select_1 = __importDefault(require("../Select/Select"));
+function EditorFieldBar({ options, labels, api, isDisabled, showFieldMenu, showMakeDynamic, buttons, onMakeDynamic, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "toolbar", "aria-label": labels.toolbar, gap: 2, wrap: "wrap", align: "center", mb: 2, children: [showFieldMenu && ((0, jsx_runtime_1.jsx)(react_1.Box, { width: { base: "100%", sm: "16rem" }, children: (0, jsx_runtime_1.jsx)(Select_1.default, { native: false, "aria-label": labels.insertField, placeholder: labels.insertField, options: options, value: "", noOptionsMessage: labels.noFields, isDisabled: isDisabled, onChange: (option) => {
+                        if (!option)
+                            return;
+                        api.insertField(String(option.id));
+                        window.setTimeout(api.focus, 0);
+                    }, "data-testid": "editor-insert-field" }) })), showMakeDynamic && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.WandSparkles, { size: 16, "aria-hidden": true }), label: labels.makeDynamic, onClick: onMakeDynamic, isDisabled: isDisabled, "data-testid": "editor-make-dynamic" })), buttons.map((button) => ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", leftIcon: button.icon ? (0, jsx_runtime_1.jsx)(react_1.Icon, { as: button.icon, boxSize: 4, "aria-hidden": true }) : undefined, label: button.label, onClick: () => button.onClick(api), isDisabled: isDisabled || button.isDisabled, "data-testid": `editor-button-${button.id}` }, button.id)))] }));
+}

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

@@ -1,10 +1,83 @@
 import type JoditEditor from "jodit-react";
-import type { ComponentProps } from "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;
+    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;
+};
+/** How a token is written in the stored HTML. */
+export type EditorTokenSyntax = {
+    open: string;
+    close: string;
+};
+/** Imperative handle for toolbar buttons and `apiRef`; every method works on the live editor. */
+export interface EditorApi {
+    insertHTML(html: string): void;
+    insertField(path: string): void;
+    getSelectionText(): string;
+    /** Replaces every plain-text occurrence outside tokens and tags; returns the count. */
+    replaceAll(text: string, path: string): number;
+    countOccurrences(text: string): number;
+    focus(): void;
+}
+/** An extra button in the strip above the editor. */
+export type EditorToolbarButton = {
+    id: string;
+    label: string;
+    icon?: ElementType;
+    /** Read through a ref — a new function each render never re-creates the editor. */
+    onClick: (api: EditorApi) => void;
+    isDisabled?: boolean;
+};
+/** Every visible string of the merge-field UI; omit a key to keep its English default. */
+export type EditorLabels = Partial<{
+    insertField: string;
+    noFields: string;
+    makeDynamic: string;
+    dynamicTitle: string;
+    dynamicField: string;
+    dynamicFieldPlaceholder: string;
+    dynamicCount: (n: number) => string;
+    dynamicReplace: string;
+    dynamicNoSelection: string;
+    unknownTokens: (list: string) => string;
+    cancel: string;
+    dynamicSelected: string;
+    toolbar: string;
+    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" | "config" | "className" | "onChange" | "onBlur"> & {
     /** `key` is dead (React reserves it, never reaches Jodit); `editorRef.current` stays null until the lazy chunk loads. */
     editorRef?: JoditEditorProps["ref"];
     key?: string | number;
+    label?: string;
+    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;
+    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>;
+    onReady?: () => void;
+    labels?: EditorLabels;
+    "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,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveEditorLabels = exports.DEFAULT_EDITOR_LABELS = void 0;
+exports.DEFAULT_EDITOR_LABELS = {
+    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,28 @@
+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;
+    };
+};

package/dist/Components/Editor/editorTokenStyles.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipStyles = exports.chipColors = void 0;
+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;

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

@@ -0,0 +1,26 @@
+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 = {
+    fields: EditorMergeField[];
+    syntax: EditorTokenSyntax;
+    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/useEditorBridge.d.ts

@@ -0,0 +1,40 @@
+import type { Ref } from "react";
+import type { EditorApi, EditorMergeField, EditorTokenSyntax } from "./EditorProps";
+import { type ChipContext } from "./editorTokens";
+export type JoditLike = {
+    value: string;
+    editor: HTMLElement;
+    s: {
+        isInsideArea: boolean;
+        range: Range;
+        selectRange: (range: Range, focus?: boolean) => unknown;
+        insertHTML: (html: string) => void;
+        focus: () => unknown;
+    };
+    events: {
+        on: (events: string, handler: (event: never) => unknown) => unknown;
+    };
+    synchronizeValues: () => void;
+    waitForReady: () => Promise<unknown>;
+};
+type BridgeArgs = {
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: (value: string, event: never) => void;
+    mergeFields?: EditorMergeField[];
+    syntax: EditorTokenSyntax;
+    chipLabel: (label: string) => string;
+    apiRef?: Ref<EditorApi>;
+    onReady?: () => void;
+    onUnknownTokens?: (paths: string[]) => void;
+};
+export declare function useEditorBridge({ value, onChange, onBlur, mergeFields, syntax, chipLabel, apiRef, onReady, onUnknownTokens, }: BridgeArgs): {
+    joditValue: string | undefined;
+    attachEditor: (jodit: JoditLike) => void;
+    api: EditorApi;
+    instance: JoditLike | null;
+    raw: string;
+    unknown: string[];
+    ctx: ChipContext;
+};
+export {};