@verbb/plugin-kit-react 1.0.0

package/dist/components/tiptap/useInlineVariablePicker.js

@@ -0,0 +1,240 @@
+import { useTranslation } from "../../hooks/useTranslation.js";
+import "../../hooks/index.js";
+import { buildVariableTagAttrs, replaceTokenWithVariable } from "./variableSerialization.js";
+import { getVariableCategoryEntries, matchesVariableQuery, toTopLevelGroups } from "./variablePickerUtils.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+//#region src/components/tiptap/useInlineVariablePicker.ts
+/** Keep cursor placeholders from blocking inline variable trigger matching. */
+var INLINE_TRIGGER_REGEX = /(?:^|[\s\u200B\u2060])@([A-Za-z0-9:_-]*)$/;
+function getFilteredVariables(t, variableCategories, variableCategoryLabels, variableCategoryOrder, query, activeParent) {
+	const groupedTopLevelOptions = toTopLevelGroups(getVariableCategoryEntries(variableCategories, variableCategoryLabels, variableCategoryOrder), t);
+	const q = query.trim().toLowerCase();
+	if (activeParent?.children?.length) {
+		const { children } = activeParent;
+		if (!q) return {
+			groups: [],
+			options: children.slice(0, 50),
+			isChildMode: true
+		};
+		return {
+			groups: [],
+			options: children.filter((item) => {
+				return matchesVariableQuery(item, q);
+			}).slice(0, 50),
+			isChildMode: true
+		};
+	}
+	if (!q) return {
+		groups: groupedTopLevelOptions,
+		options: groupedTopLevelOptions.flatMap((g) => {
+			return g.items;
+		}).slice(0, 100),
+		isChildMode: false
+	};
+	const filteredGroups = groupedTopLevelOptions.map((group) => {
+		return {
+			...group,
+			items: group.items.filter((item) => {
+				if (matchesVariableQuery(item, q)) return true;
+				return (Array.isArray(item.children) ? item.children : []).some((c) => {
+					return matchesVariableQuery(c, q);
+				});
+			})
+		};
+	}).filter((g) => {
+		return g.items.length > 0;
+	});
+	const options = [];
+	for (const group of filteredGroups) {
+		for (let ii = 0; ii < group.items.length; ii++) {
+			const item = group.items[ii];
+			const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+			const parentMatches = matchesVariableQuery(item, q);
+			if (!hasChildren || parentMatches) options.push(item);
+			if (hasChildren) {
+				for (const child of item.children) if (matchesVariableQuery(child, q)) options.push(child);
+			}
+			if (options.length >= 100) break;
+		}
+		if (options.length >= 100) break;
+	}
+	return {
+		groups: filteredGroups,
+		options,
+		isChildMode: false
+	};
+}
+function useInlineVariablePicker(editor, options) {
+	const { variableCategories, variableCategoryLabels, variableCategoryOrder, variablePickerTriggerCharacters = ["@"], disabled = false, readOnly = false, wrapperRef, onOpenDropdown } = options;
+	const t = useTranslation();
+	const [state, setState] = useState({
+		open: false,
+		query: "",
+		from: 0,
+		to: 0,
+		top: 0,
+		left: 0,
+		selectedIndex: -1,
+		activeParent: null
+	});
+	const filteredVariables = useMemo(() => {
+		return getFilteredVariables(t, variableCategories, variableCategoryLabels, variableCategoryOrder, state.query, state.activeParent);
+	}, [
+		t,
+		variableCategories,
+		variableCategoryLabels,
+		variableCategoryOrder,
+		state.query,
+		state.activeParent
+	]);
+	const updateFromCursor = useCallback(() => {
+		if (!editor || readOnly || disabled) return;
+		const { state: editorState, view } = editor;
+		const { selection } = editorState;
+		if (!selection.empty) {
+			setState((prev) => {
+				return prev.open ? {
+					...prev,
+					open: false,
+					query: "",
+					selectedIndex: -1
+				} : prev;
+			});
+			return;
+		}
+		const cursorPos = selection.from;
+		const start = Math.max(0, cursorPos - 120);
+		const match = editorState.doc.textBetween(start, cursorPos, "\n").match(INLINE_TRIGGER_REGEX);
+		if (!match) {
+			setState((prev) => {
+				return prev.open ? {
+					...prev,
+					open: false,
+					query: "",
+					selectedIndex: -1
+				} : prev;
+			});
+			return;
+		}
+		const query = match[1] ?? "";
+		const tokenFrom = cursorPos - (query.length + 1);
+		const coords = view.coordsAtPos(cursorPos);
+		const wrapperRect = wrapperRef.current?.getBoundingClientRect();
+		if (!wrapperRect) return;
+		setState((prev) => {
+			return {
+				...prev,
+				open: true,
+				query,
+				from: tokenFrom,
+				to: cursorPos,
+				top: coords.bottom - wrapperRect.top + 4,
+				left: coords.left - wrapperRect.left,
+				activeParent: prev.activeParent
+			};
+		});
+	}, [
+		disabled,
+		editor,
+		readOnly,
+		wrapperRef
+	]);
+	const handleSelect = (selected, baseVariableOpt) => {
+		if (!selected) return;
+		if (Array.isArray(selected.children) && selected.children.length > 0) {
+			setState((prev) => {
+				return {
+					...prev,
+					activeParent: selected,
+					query: "",
+					selectedIndex: -1
+				};
+			});
+			return;
+		}
+		replaceTokenWithVariable(editor, buildVariableTagAttrs(baseVariableOpt ?? state.activeParent ?? selected, selected, { openOnInsert: false }), state.from, state.to);
+		requestAnimationFrame(() => {
+			editor?.commands.focus();
+		});
+		setState((prev) => {
+			return {
+				...prev,
+				open: false,
+				query: "",
+				selectedIndex: -1,
+				activeParent: null
+			};
+		});
+	};
+	const closePicker = () => {
+		setState((prev) => {
+			return {
+				...prev,
+				open: false,
+				query: "",
+				selectedIndex: -1,
+				activeParent: null
+			};
+		});
+	};
+	const goBack = () => {
+		setState((prev) => {
+			return {
+				...prev,
+				activeParent: null,
+				selectedIndex: -1
+			};
+		});
+	};
+	const setQuery = (query) => {
+		setState((prev) => {
+			return {
+				...prev,
+				query
+			};
+		});
+	};
+	const handleKeyDown = (view, event) => {
+		if (!Object.values(variableCategories ?? {}).flatMap((items) => {
+			return Array.isArray(items) ? items : [];
+		}).length || disabled || readOnly) return false;
+		const isShortcut = (event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === "v";
+		const isTrigger = variablePickerTriggerCharacters.includes(event.key) && !event.metaKey && !event.ctrlKey && !event.altKey;
+		if (!isShortcut && !isTrigger) return false;
+		if (state.open) return false;
+		if (isTrigger) {
+			const { from } = view.state.selection;
+			const prevChar = from > 1 ? view.state.doc.textBetween(from - 1, from, "\n") : "";
+			/** Allow @ after whitespace, brackets, quotes, or zwsp (used after variable tags) */
+			if (prevChar && !/[\s\u200B\u2060]|\(|\[|"|'/.test(prevChar)) return false;
+		}
+		if (isShortcut) {
+			event.preventDefault();
+			onOpenDropdown?.();
+			return true;
+		}
+		return false;
+	};
+	useEffect(() => {
+		if (!editor) return;
+		editor.on("update", updateFromCursor);
+		editor.on("selectionUpdate", updateFromCursor);
+		return () => {
+			editor.off("update", updateFromCursor);
+			editor.off("selectionUpdate", updateFromCursor);
+		};
+	}, [editor, updateFromCursor]);
+	return {
+		state,
+		filteredVariables,
+		handleSelect,
+		closePicker,
+		goBack,
+		handleKeyDown,
+		setQuery
+	};
+}
+//#endregion
+export { useInlineVariablePicker };
+
+//# sourceMappingURL=useInlineVariablePicker.js.map

package/dist/components/tiptap/useInlineVariablePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInlineVariablePicker.js","names":[],"sources":["../../../src/components/tiptap/useInlineVariablePicker.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport type { Editor } from '@tiptap/core';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\nimport type { EditorView } from '@tiptap/pm/view';\nimport {\n    buildVariableTagAttrs,\n    replaceTokenWithVariable,\n} from './variableSerialization';\nimport type { VariableCategories, VariableOption } from './VariableDropdown';\nimport type { FilteredVariables } from './InlineVariablePickerPopover';\nimport { getVariableCategoryEntries, matchesVariableQuery, toTopLevelGroups } from './variablePickerUtils';\n\n/** Keep cursor placeholders from blocking inline variable trigger matching. */\nconst INLINE_TRIGGER_REGEX = /(?:^|[\\s\\u200B\\u2060])@([A-Za-z0-9:_-]*)$/;\n\nfunction getFilteredVariables(\n    t: (msg: string) => string,\n    variableCategories: VariableCategories,\n    variableCategoryLabels: Record<string, string> | undefined,\n    variableCategoryOrder: string[] | undefined,\n    query: string,\n    activeParent: VariableOption | null,\n): FilteredVariables {\n    const entries = getVariableCategoryEntries(variableCategories, variableCategoryLabels, variableCategoryOrder);\n    const groupedTopLevelOptions = toTopLevelGroups(entries, t);\n\n    const q = query.trim().toLowerCase();\n\n    if (activeParent?.children?.length) {\n        const { children } = activeParent;\n        if (!q) {\n            return { groups: [], options: children.slice(0, 50), isChildMode: true };\n        }\n        const filtered = children\n            .filter((item) => {\n                return matchesVariableQuery(item, q);\n            })\n            .slice(0, 50);\n        return { groups: [], options: filtered, isChildMode: true };\n    }\n\n    if (!q) {\n        const options = groupedTopLevelOptions.flatMap((g) => {\n            return g.items;\n        }).slice(0, 100);\n        return { groups: groupedTopLevelOptions, options, isChildMode: false };\n    }\n\n    const filteredGroups = groupedTopLevelOptions\n        .map((group) => {\n            return {\n                ...group,\n                items: group.items.filter((item) => {\n                    const baseMatch = matchesVariableQuery(item, q);\n                    if (baseMatch) {\n                        return true;\n                    }\n\n                    const children = Array.isArray(item.children) ? item.children : [];\n                    return children.some((c) => {\n                        return matchesVariableQuery(c, q);\n                    });\n                }),\n            };\n        })\n        .filter((g) => {\n            return g.items.length > 0;\n        });\n\n    // Build options in the SAME order as VariableCommandList renders:\n    // for each (group, item): [parent if showParent] + [matching children]\n    const options: VariableOption[] = [];\n    for (const group of filteredGroups) {\n        for (let ii = 0; ii < group.items.length; ii++) {\n            const item = group.items[ii];\n            const hasChildren = Array.isArray(item.children) && item.children.length > 0;\n            const parentMatches = matchesVariableQuery(item, q);\n            const showParent = !hasChildren || parentMatches;\n            if (showParent) {\n                options.push(item);\n            }\n            if (hasChildren) {\n                for (const child of item.children!) {\n                    const childMatches = matchesVariableQuery(child, q);\n                    if (childMatches) {\n                        options.push(child);\n                    }\n                }\n            }\n            if (options.length >= 100) {\n                break;\n            }\n        }\n        if (options.length >= 100) {\n            break;\n        }\n    }\n    return { groups: filteredGroups, options, isChildMode: false };\n}\n\nexport type InlinePickerState = {\n    open: boolean;\n    query: string;\n    from: number;\n    to: number;\n    top: number;\n    left: number;\n    selectedIndex: number;\n    activeParent: VariableOption | null;\n};\n\nexport type InlineVariablePickerHandleKeyDown = (view: EditorView, event: KeyboardEvent) => boolean;\n\nexport function useInlineVariablePicker(\n    editor: Editor | null,\n    options: {\n        variableCategories: VariableCategories;\n        variableCategoryLabels?: Record<string, string>;\n        variableCategoryOrder?: string[];\n        variablePickerTriggerCharacters?: string[];\n        disabled?: boolean;\n        readOnly?: boolean;\n        wrapperRef: React.RefObject<HTMLDivElement | null>;\n        onOpenDropdown?: () => void;\n    },\n) {\n    const {\n        variableCategories,\n        variableCategoryLabels,\n        variableCategoryOrder,\n        variablePickerTriggerCharacters = ['@'],\n        disabled = false,\n        readOnly = false,\n        wrapperRef,\n        onOpenDropdown,\n    } = options;\n\n    const t = useTranslation();\n\n    const [state, setState] = useState<InlinePickerState>({\n        open: false,\n        query: '',\n        from: 0,\n        to: 0,\n        top: 0,\n        left: 0,\n        selectedIndex: -1,\n        activeParent: null,\n    });\n\n    const filteredVariables = useMemo(() => {\n        return getFilteredVariables(\n            t,\n            variableCategories,\n            variableCategoryLabels,\n            variableCategoryOrder,\n            state.query,\n            state.activeParent,\n        );\n    }, [t, variableCategories, variableCategoryLabels, variableCategoryOrder, state.query, state.activeParent]);\n\n    const updateFromCursor = useCallback(() => {\n        if (!editor || readOnly || disabled) {\n            return;\n        }\n\n        const { state: editorState, view } = editor;\n        const { selection } = editorState;\n\n        if (!selection.empty) {\n            setState((prev) => {\n                return prev.open ? { ...prev, open: false, query: '', selectedIndex: -1 } : prev;\n            });\n            return;\n        }\n\n        const cursorPos = selection.from;\n        const start = Math.max(0, cursorPos - 120);\n        const textBefore = editorState.doc.textBetween(start, cursorPos, '\\n');\n        const match = textBefore.match(INLINE_TRIGGER_REGEX);\n\n        if (!match) {\n            setState((prev) => {\n                return prev.open ? { ...prev, open: false, query: '', selectedIndex: -1 } : prev;\n            });\n            return;\n        }\n\n        const query = match[1] ?? '';\n        const tokenLength = query.length + 1;\n        const tokenFrom = cursorPos - tokenLength;\n        const coords = view.coordsAtPos(cursorPos);\n        const wrapperRect = wrapperRef.current?.getBoundingClientRect();\n        if (!wrapperRect) {\n            return;\n        }\n\n        setState((prev) => {\n            return {\n                ...prev,\n                open: true,\n                query,\n                from: tokenFrom,\n                to: cursorPos,\n                top: coords.bottom - wrapperRect.top + 4,\n                left: coords.left - wrapperRect.left,\n                activeParent: prev.activeParent,\n            };\n        });\n    }, [disabled, editor, readOnly, wrapperRef]);\n\n    const handleSelect = (selected: VariableOption, baseVariableOpt?: VariableOption) => {\n        if (!selected) {\n            return;\n        }\n\n        if (Array.isArray(selected.children) && selected.children.length > 0) {\n            setState((prev) => {\n                return {\n                    ...prev,\n                    activeParent: selected,\n                    query: '',\n                    selectedIndex: -1,\n                };\n            });\n            return;\n        }\n\n        const baseVariable = baseVariableOpt ?? state.activeParent ?? selected;\n        const tagAttrs = buildVariableTagAttrs(baseVariable, selected, { openOnInsert: false });\n        replaceTokenWithVariable(editor!, tagAttrs, state.from, state.to);\n        requestAnimationFrame(() => {\n            editor?.commands.focus();\n        });\n        setState((prev) => {\n            return {\n                ...prev,\n                open: false,\n                query: '',\n                selectedIndex: -1,\n                activeParent: null,\n            };\n        });\n    };\n\n    const closePicker = () => {\n        setState((prev) => {\n            return {\n                ...prev,\n                open: false,\n                query: '',\n                selectedIndex: -1,\n                activeParent: null,\n            };\n        });\n    };\n\n    const goBack = () => {\n        setState((prev) => {\n            return {\n                ...prev,\n                activeParent: null,\n                selectedIndex: -1,\n            };\n        });\n    };\n\n    const setQuery = (query: string) => {\n        setState((prev) => {\n            return { ...prev, query };\n        });\n    };\n\n    const handleKeyDown: InlineVariablePickerHandleKeyDown = (view, event) => {\n        const variables = Object.values(variableCategories ?? {}).flatMap((items) => {\n            return Array.isArray(items) ? items : [];\n        });\n        if (!variables.length || disabled || readOnly) {\n            return false;\n        }\n\n        const isShortcut = (event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === 'v';\n        const isTrigger = variablePickerTriggerCharacters.includes(event.key) && !event.metaKey && !event.ctrlKey && !event.altKey;\n        if (!isShortcut && !isTrigger) {\n            return false;\n        }\n\n        // When picker is open, focus moves to it; cmdk handles keyboard nav\n        if (state.open) {\n            return false;\n        }\n\n        if (isTrigger) {\n            const { from } = view.state.selection;\n            const prevChar = from > 1 ? view.state.doc.textBetween(from - 1, from, '\\n') : '';\n            /** Allow @ after whitespace, brackets, quotes, or zwsp (used after variable tags) */\n            if (prevChar && !/[\\s\\u200B\\u2060]|\\(|\\[|\"|'/.test(prevChar)) {\n                return false;\n            }\n        }\n\n        if (isShortcut) {\n            event.preventDefault();\n            onOpenDropdown?.();\n            return true;\n        }\n\n        return false;\n    };\n\n    useEffect(() => {\n        if (!editor) {\n            return;\n        }\n        editor.on('update', updateFromCursor);\n        editor.on('selectionUpdate', updateFromCursor);\n        return () => {\n            editor.off('update', updateFromCursor);\n            editor.off('selectionUpdate', updateFromCursor);\n        };\n    }, [editor, updateFromCursor]);\n\n    return {\n        state,\n        filteredVariables,\n        handleSelect,\n        closePicker,\n        goBack,\n        handleKeyDown,\n        setQuery,\n    };\n}\n"],"mappings":"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"}

package/dist/components/tiptap/useVariablePicker.d.ts

@@ -0,0 +1,28 @@
+import { VariableOption, VariableCategories } from './VariableDropdown';
+import { VariableGroup } from './VariableCommandList';
+export type UseVariablePickerOptions = {
+    variableCategories: VariableCategories;
+    variableCategoryLabels?: Record<string, string>;
+    variableCategoryOrder?: string[];
+    /** Called when a leaf variable is selected. defaultIfEmpty is optional (e.g. "Guest" for {user:firstName|Guest}). */
+    onApply: (baseVariable: VariableOption, variable: VariableOption, defaultIfEmpty?: string) => void;
+    /** When true, reset pages and search (e.g. when picker opens) */
+    isOpen?: boolean;
+    /** When opening for edit, start on this child page instead of top level */
+    initialPage?: VariableOption | null;
+    /** Optional: return current "default if empty" value when a variable is applied */
+    getDefaultIfEmpty?: () => string;
+    /** Defers expensive top-level group building until the picker is opened. */
+    deferUntilOpen?: boolean;
+};
+export declare function useVariablePicker({ variableCategories, variableCategoryLabels, variableCategoryOrder, onApply, isOpen, initialPage, getDefaultIfEmpty, deferUntilOpen, }: UseVariablePickerOptions): {
+    groups: VariableGroup[];
+    options: VariableOption[];
+    search: string;
+    setSearch: import('react').Dispatch<import('react').SetStateAction<string>>;
+    page: VariableOption | undefined;
+    handleSelect: (variable: VariableOption, baseVariableOpt?: VariableOption) => void;
+    handleBack: () => void;
+    reset: () => void;
+};
+//# sourceMappingURL=useVariablePicker.d.ts.map

package/dist/components/tiptap/useVariablePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVariablePicker.d.ts","sourceRoot":"","sources":["../../../src/components/tiptap/useVariablePicker.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,MAAM,MAAM,wBAAwB,GAAG;IACnC,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,qHAAqH;IACrH,OAAO,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnG,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACpC,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,MAAM,MAAM,CAAC;IACjC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAC9B,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,OAAO,EACP,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,cAAsB,GACzB,EAAE,wBAAwB;;;;;;6BA8EqB,cAAc,oBAAoB,cAAc;;;EA6C/F"}

package/dist/components/tiptap/useVariablePicker.js

@@ -0,0 +1,122 @@
+import { useTranslation } from "../../hooks/useTranslation.js";
+import "../../hooks/index.js";
+import { getVariableCategoryEntries, matchesVariableQuery, toTopLevelGroups } from "./variablePickerUtils.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+//#region src/components/tiptap/useVariablePicker.ts
+function useVariablePicker({ variableCategories, variableCategoryLabels, variableCategoryOrder, onApply, isOpen, initialPage, getDefaultIfEmpty, deferUntilOpen = false }) {
+	const t = useTranslation();
+	const [pages, setPages] = useState([]);
+	const [search, setSearch] = useState("");
+	const page = pages.at(-1);
+	const shouldResolveGroups = !deferUntilOpen || Boolean(isOpen) || Boolean(page) || Boolean(initialPage);
+	const flatCategories = useMemo(() => {
+		if (!shouldResolveGroups) return [];
+		return getVariableCategoryEntries(variableCategories, variableCategoryLabels, variableCategoryOrder);
+	}, [
+		shouldResolveGroups,
+		variableCategories,
+		variableCategoryLabels,
+		variableCategoryOrder
+	]);
+	const groupedTopLevel = useMemo(() => {
+		if (!shouldResolveGroups) return [];
+		return toTopLevelGroups(flatCategories, t);
+	}, [
+		flatCategories,
+		shouldResolveGroups,
+		t
+	]);
+	const normalizedSearch = search.trim().toLowerCase();
+	const groups = useMemo(() => {
+		if (!shouldResolveGroups && !page) return [];
+		if (page?.children?.length) {
+			const { children } = page;
+			const groupValue = page.value ?? page.label ?? "selectors";
+			if (!normalizedSearch) return [{
+				label: t("Selectors"),
+				value: groupValue,
+				items: children
+			}];
+			const filtered = children.filter((item) => {
+				return matchesVariableQuery(item, normalizedSearch);
+			});
+			return filtered.length ? [{
+				label: t("Selectors"),
+				value: groupValue,
+				items: filtered
+			}] : [];
+		}
+		if (!normalizedSearch) return groupedTopLevel;
+		return groupedTopLevel.map((g) => {
+			return {
+				...g,
+				items: g.items.filter((item) => {
+					if (matchesVariableQuery(item, normalizedSearch)) return true;
+					return (Array.isArray(item.children) ? item.children : []).some((c) => {
+						return matchesVariableQuery(c, normalizedSearch);
+					});
+				})
+			};
+		}).filter((g) => {
+			return g.items.length > 0;
+		});
+	}, [
+		page,
+		normalizedSearch,
+		groupedTopLevel,
+		shouldResolveGroups,
+		t
+	]);
+	const options = useMemo(() => {
+		return (groups ?? []).flatMap((g) => {
+			return g.items;
+		});
+	}, [groups]);
+	const handleSelect = useCallback((variable, baseVariableOpt) => {
+		if (Array.isArray(variable.children) && variable.children.length > 0) {
+			setPages((p) => {
+				return [...p, variable];
+			});
+			setSearch("");
+			return;
+		}
+		onApply(baseVariableOpt ?? page ?? variable, variable, getDefaultIfEmpty?.());
+	}, [
+		getDefaultIfEmpty,
+		onApply,
+		page
+	]);
+	const handleBack = useCallback(() => {
+		setPages((p) => {
+			return p.slice(0, -1);
+		});
+	}, []);
+	const reset = useCallback(() => {
+		setPages([]);
+		setSearch("");
+	}, []);
+	useEffect(() => {
+		if (isOpen) if (initialPage && Array.isArray(initialPage.children) && initialPage.children.length > 0) {
+			setPages([initialPage]);
+			setSearch("");
+		} else reset();
+	}, [
+		initialPage,
+		isOpen,
+		reset
+	]);
+	return {
+		groups,
+		options,
+		search,
+		setSearch,
+		page,
+		handleSelect,
+		handleBack,
+		reset
+	};
+}
+//#endregion
+export { useVariablePicker };
+
+//# sourceMappingURL=useVariablePicker.js.map

package/dist/components/tiptap/useVariablePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVariablePicker.js","names":[],"sources":["../../../src/components/tiptap/useVariablePicker.ts"],"sourcesContent":["import { useCallback, useMemo, useState, useEffect } from 'react';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\nimport type { VariableOption, VariableCategories } from './VariableDropdown';\nimport type { VariableGroup } from './VariableCommandList';\nimport { getVariableCategoryEntries, matchesVariableQuery, toTopLevelGroups } from './variablePickerUtils';\nexport type UseVariablePickerOptions = {\n    variableCategories: VariableCategories;\n    variableCategoryLabels?: Record<string, string>;\n    variableCategoryOrder?: string[];\n    /** Called when a leaf variable is selected. defaultIfEmpty is optional (e.g. \"Guest\" for {user:firstName|Guest}). */\n    onApply: (baseVariable: VariableOption, variable: VariableOption, defaultIfEmpty?: string) => void;\n    /** When true, reset pages and search (e.g. when picker opens) */\n    isOpen?: boolean;\n    /** When opening for edit, start on this child page instead of top level */\n    initialPage?: VariableOption | null;\n    /** Optional: return current \"default if empty\" value when a variable is applied */\n    getDefaultIfEmpty?: () => string;\n    /** Defers expensive top-level group building until the picker is opened. */\n    deferUntilOpen?: boolean;\n};\n\nexport function useVariablePicker({\n    variableCategories,\n    variableCategoryLabels,\n    variableCategoryOrder,\n    onApply,\n    isOpen,\n    initialPage,\n    getDefaultIfEmpty,\n    deferUntilOpen = false,\n}: UseVariablePickerOptions) {\n    const t = useTranslation();\n    const [pages, setPages] = useState<VariableOption[]>([]);\n    const [search, setSearch] = useState('');\n\n    const page = pages.at(-1);\n    const shouldResolveGroups = !deferUntilOpen || Boolean(isOpen) || Boolean(page) || Boolean(initialPage);\n\n    const flatCategories = useMemo(\n        () => {\n            if (!shouldResolveGroups) {\n                return [];\n            }\n\n            return getVariableCategoryEntries(variableCategories, variableCategoryLabels, variableCategoryOrder);\n        },\n        [shouldResolveGroups, variableCategories, variableCategoryLabels, variableCategoryOrder],\n    );\n\n    const groupedTopLevel: VariableGroup[] = useMemo(() => {\n        if (!shouldResolveGroups) {\n            return [];\n        }\n\n        return toTopLevelGroups(flatCategories, t);\n    }, [flatCategories, shouldResolveGroups, t]);\n\n    const normalizedSearch = search.trim().toLowerCase();\n\n    const groups: VariableGroup[] | null = useMemo(() => {\n        if (!shouldResolveGroups && !page) {\n            return [];\n        }\n\n        if (page?.children?.length) {\n            const { children } = page;\n            const groupValue = page.value ?? page.label ?? 'selectors';\n            if (!normalizedSearch) {\n                return [{ label: t('Selectors'), value: groupValue, items: children }];\n            }\n            const filtered = children.filter((item) => {\n                return matchesVariableQuery(item, normalizedSearch);\n            });\n            return filtered.length ? [{ label: t('Selectors'), value: groupValue, items: filtered }] : [];\n        }\n\n        if (!normalizedSearch) {\n            return groupedTopLevel;\n        }\n\n        return groupedTopLevel\n            .map((g) => {\n                return {\n                    ...g,\n                    items: g.items.filter((item) => {\n                        const selfMatches = matchesVariableQuery(item, normalizedSearch);\n                        if (selfMatches) {\n                            return true;\n                        }\n\n                        const children = Array.isArray(item.children) ? item.children : [];\n                        return children.some((c) => {\n                            return matchesVariableQuery(c, normalizedSearch);\n                        });\n                    }),\n                };\n            })\n            .filter((g) => {\n                return g.items.length > 0;\n            });\n    }, [page, normalizedSearch, groupedTopLevel, shouldResolveGroups, t]);\n\n    const options = useMemo(() => {\n        return (groups ?? []).flatMap((g) => {\n            return g.items;\n        });\n    }, [groups]);\n\n    const handleSelect = useCallback((variable: VariableOption, baseVariableOpt?: VariableOption) => {\n        if (Array.isArray(variable.children) && variable.children.length > 0) {\n            setPages((p) => {\n                return [...p, variable];\n            });\n            setSearch('');\n            return;\n        }\n\n        const baseVariable = baseVariableOpt ?? page ?? variable;\n        onApply(baseVariable, variable, getDefaultIfEmpty?.());\n    }, [getDefaultIfEmpty, onApply, page]);\n\n    const handleBack = useCallback(() => {\n        setPages((p) => {\n            return p.slice(0, -1);\n        });\n    }, []);\n\n    const reset = useCallback(() => {\n        setPages([]);\n        setSearch('');\n    }, []);\n\n    useEffect(() => {\n        if (isOpen) {\n            if (initialPage && Array.isArray(initialPage.children) && initialPage.children.length > 0) {\n                setPages([initialPage]);\n                setSearch('');\n            } else {\n                reset();\n            }\n        }\n    }, [initialPage, isOpen, reset]);\n\n    return {\n        groups,\n        options,\n        search,\n        setSearch,\n        page,\n        handleSelect,\n        handleBack,\n        reset,\n    };\n}\n"],"mappings":"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"}

package/dist/components/tiptap/variablePickerUtils.d.ts

@@ -0,0 +1,11 @@
+import { VariableCategories, VariableOption } from './VariableDropdown';
+import { VariableGroup } from './VariableCommandList';
+export type VariableCategoryEntry = {
+    key: string;
+    label: string;
+    options: VariableOption[];
+};
+export declare function getVariableCategoryEntries(variableCategories: VariableCategories, variableCategoryLabels?: Record<string, string>, variableCategoryOrder?: string[]): VariableCategoryEntry[];
+export declare function toTopLevelGroups(entries: VariableCategoryEntry[], t: (message: string) => string): VariableGroup[];
+export declare function matchesVariableQuery(item: VariableOption, normalizedQuery: string): boolean;
+//# sourceMappingURL=variablePickerUtils.d.ts.map

package/dist/components/tiptap/variablePickerUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variablePickerUtils.d.ts","sourceRoot":"","sources":["../../../src/components/tiptap/variablePickerUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;CAC7B,CAAC;AAEF,wBAAgB,0BAA0B,CACtC,kBAAkB,EAAE,kBAAkB,EACtC,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC/C,qBAAqB,CAAC,EAAE,MAAM,EAAE,GACjC,qBAAqB,EAAE,CA6BzB;AAED,wBAAgB,gBAAgB,CAC5B,OAAO,EAAE,qBAAqB,EAAE,EAChC,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,GAC/B,aAAa,EAAE,CA0CjB;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,GAAG,OAAO,CAS3F"}

package/dist/components/tiptap/variablePickerUtils.js

@@ -0,0 +1,63 @@
+import { formatVariableCategoryLabel } from "./VariableDropdown.js";
+//#region src/components/tiptap/variablePickerUtils.ts
+function getVariableCategoryEntries(variableCategories, variableCategoryLabels, variableCategoryOrder) {
+	const entries = Object.entries(variableCategories ?? {}).map(([key, options]) => {
+		return {
+			key,
+			label: formatVariableCategoryLabel(key, variableCategoryLabels),
+			options: Array.isArray(options) ? options : []
+		};
+	}).filter((entry) => {
+		return entry.options.length > 0;
+	});
+	const order = variableCategoryOrder ?? Object.keys(variableCategories ?? {});
+	entries.sort((a, b) => {
+		const aOrderIndex = order.indexOf(a.key);
+		const bOrderIndex = order.indexOf(b.key);
+		const aOrder = aOrderIndex === -1 ? Number.MAX_SAFE_INTEGER : aOrderIndex;
+		const bOrder = bOrderIndex === -1 ? Number.MAX_SAFE_INTEGER : bOrderIndex;
+		if (aOrder !== bOrder) return aOrder - bOrder;
+		return a.label.localeCompare(b.label);
+	});
+	return entries;
+}
+function toTopLevelGroups(entries, t) {
+	const groups = [];
+	entries.forEach((entry) => {
+		if (entry.key === "fieldsVariables") {
+			const pageBuckets = /* @__PURE__ */ new Map();
+			let hasPageBuckets = false;
+			entry.options.forEach((item) => {
+				const pageLabel = String(item?.pageLabel || "").trim();
+				if (!pageLabel) return;
+				hasPageBuckets = true;
+				if (!pageBuckets.has(pageLabel)) pageBuckets.set(pageLabel, []);
+				pageBuckets.get(pageLabel).push(item);
+			});
+			if (hasPageBuckets) {
+				pageBuckets.forEach((items, pageLabel) => {
+					groups.push({
+						label: t(pageLabel),
+						value: `${entry.key}:${pageLabel}`,
+						items
+					});
+				});
+				return;
+			}
+		}
+		groups.push({
+			label: t(entry.label),
+			value: entry.key,
+			items: entry.options
+		});
+	});
+	return groups;
+}
+function matchesVariableQuery(item, normalizedQuery) {
+	if (!normalizedQuery) return true;
+	return (item.label ?? "").toLowerCase().includes(normalizedQuery) || String(item.value ?? "").toLowerCase().includes(normalizedQuery);
+}
+//#endregion
+export { getVariableCategoryEntries, matchesVariableQuery, toTopLevelGroups };
+
+//# sourceMappingURL=variablePickerUtils.js.map

package/dist/components/tiptap/variablePickerUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variablePickerUtils.js","names":[],"sources":["../../../src/components/tiptap/variablePickerUtils.ts"],"sourcesContent":["import type { VariableCategories, VariableOption } from './VariableDropdown';\nimport { formatVariableCategoryLabel } from './VariableDropdown';\nimport type { VariableGroup } from './VariableCommandList';\n\nexport type VariableCategoryEntry = {\n    key: string;\n    label: string;\n    options: VariableOption[];\n};\n\nexport function getVariableCategoryEntries(\n    variableCategories: VariableCategories,\n    variableCategoryLabels?: Record<string, string>,\n    variableCategoryOrder?: string[],\n): VariableCategoryEntry[] {\n    const entries = Object.entries(variableCategories ?? {})\n        .map(([key, options]) => {\n        return ({\n            key,\n            label: formatVariableCategoryLabel(key, variableCategoryLabels),\n            options: Array.isArray(options) ? options : []\n        });\n    })\n        .filter(entry => {\n        return entry.options.length > 0;\n    });\n\n    const order = variableCategoryOrder ?? Object.keys(variableCategories ?? {});\n\n    entries.sort((a, b) => {\n        const aOrderIndex = order.indexOf(a.key);\n        const bOrderIndex = order.indexOf(b.key);\n        const aOrder = aOrderIndex === -1 ? Number.MAX_SAFE_INTEGER : aOrderIndex;\n        const bOrder = bOrderIndex === -1 ? Number.MAX_SAFE_INTEGER : bOrderIndex;\n\n        if (aOrder !== bOrder) {\n            return aOrder - bOrder;\n        }\n\n        return a.label.localeCompare(b.label);\n    });\n\n    return entries;\n}\n\nexport function toTopLevelGroups(\n    entries: VariableCategoryEntry[],\n    t: (message: string) => string,\n): VariableGroup[] {\n    const groups: VariableGroup[] = [];\n\n    entries.forEach((entry) => {\n        if (entry.key === 'fieldsVariables') {\n            const pageBuckets = new Map<string, VariableOption[]>();\n            let hasPageBuckets = false;\n\n            entry.options.forEach((item) => {\n                const pageLabel = String((item as VariableOption)?.pageLabel || '').trim();\n                if (!pageLabel) {\n                    return;\n                }\n\n                hasPageBuckets = true;\n                if (!pageBuckets.has(pageLabel)) {\n                    pageBuckets.set(pageLabel, []);\n                }\n                pageBuckets.get(pageLabel)!.push(item);\n            });\n\n            if (hasPageBuckets) {\n                pageBuckets.forEach((items, pageLabel) => {\n                    groups.push({\n                        label: t(pageLabel),\n                        value: `${entry.key}:${pageLabel}`,\n                        items,\n                    });\n                });\n\n                return;\n            }\n        }\n\n        groups.push({\n            label: t(entry.label),\n            value: entry.key,\n            items: entry.options,\n        });\n    });\n\n    return groups;\n}\n\nexport function matchesVariableQuery(item: VariableOption, normalizedQuery: string): boolean {\n    if (!normalizedQuery) {\n        return true;\n    }\n\n    return (\n        (item.label ?? '').toLowerCase().includes(normalizedQuery) ||\n        String(item.value ?? '').toLowerCase().includes(normalizedQuery)\n    );\n}\n"],"mappings":";;AAUA,SAAgB,2BACZ,oBACA,wBACA,uBACuB;CACvB,MAAM,UAAU,OAAO,QAAQ,sBAAsB,EAAE,CAAC,CACnD,KAAK,CAAC,KAAK,aAAa;AACzB,SAAQ;GACJ;GACA,OAAO,4BAA4B,KAAK,uBAAuB;GAC/D,SAAS,MAAM,QAAQ,QAAQ,GAAG,UAAU,EAAE;GACjD;GACH,CACG,QAAO,UAAS;AACjB,SAAO,MAAM,QAAQ,SAAS;GAChC;CAEF,MAAM,QAAQ,yBAAyB,OAAO,KAAK,sBAAsB,EAAE,CAAC;AAE5E,SAAQ,MAAM,GAAG,MAAM;EACnB,MAAM,cAAc,MAAM,QAAQ,EAAE,IAAI;EACxC,MAAM,cAAc,MAAM,QAAQ,EAAE,IAAI;EACxC,MAAM,SAAS,gBAAgB,KAAK,OAAO,mBAAmB;EAC9D,MAAM,SAAS,gBAAgB,KAAK,OAAO,mBAAmB;AAE9D,MAAI,WAAW,OACX,QAAO,SAAS;AAGpB,SAAO,EAAE,MAAM,cAAc,EAAE,MAAM;GACvC;AAEF,QAAO;;AAGX,SAAgB,iBACZ,SACA,GACe;CACf,MAAM,SAA0B,EAAE;AAElC,SAAQ,SAAS,UAAU;AACvB,MAAI,MAAM,QAAQ,mBAAmB;GACjC,MAAM,8BAAc,IAAI,KAA+B;GACvD,IAAI,iBAAiB;AAErB,SAAM,QAAQ,SAAS,SAAS;IAC5B,MAAM,YAAY,OAAQ,MAAyB,aAAa,GAAG,CAAC,MAAM;AAC1E,QAAI,CAAC,UACD;AAGJ,qBAAiB;AACjB,QAAI,CAAC,YAAY,IAAI,UAAU,CAC3B,aAAY,IAAI,WAAW,EAAE,CAAC;AAElC,gBAAY,IAAI,UAAU,CAAE,KAAK,KAAK;KACxC;AAEF,OAAI,gBAAgB;AAChB,gBAAY,SAAS,OAAO,cAAc;AACtC,YAAO,KAAK;MACR,OAAO,EAAE,UAAU;MACnB,OAAO,GAAG,MAAM,IAAI,GAAG;MACvB;MACH,CAAC;MACJ;AAEF;;;AAIR,SAAO,KAAK;GACR,OAAO,EAAE,MAAM,MAAM;GACrB,OAAO,MAAM;GACb,OAAO,MAAM;GAChB,CAAC;GACJ;AAEF,QAAO;;AAGX,SAAgB,qBAAqB,MAAsB,iBAAkC;AACzF,KAAI,CAAC,gBACD,QAAO;AAGX,SACK,KAAK,SAAS,IAAI,aAAa,CAAC,SAAS,gBAAgB,IAC1D,OAAO,KAAK,SAAS,GAAG,CAAC,aAAa,CAAC,SAAS,gBAAgB"}

package/dist/components/tiptap/variableSerialization.d.ts

@@ -0,0 +1,49 @@
+import { Editor, JSONContent } from '@tiptap/core';
+import { VariableOption } from './VariableDropdown';
+export type VariableTagAttrs = {
+    label: string;
+    value: string;
+    openOnInsert: boolean;
+    /** Inline default when value is empty (e.g. {user:firstName|Guest}) */
+    default?: string;
+    /** Optional transform id (e.g. "round", "format"). */
+    transformerId?: string;
+    /** Optional transform params payload. */
+    transformerParams?: Record<string, unknown>;
+};
+export declare function dedupeVariableOptions(items: VariableOption[]): VariableOption[];
+export declare function flattenVariableOptions(items: VariableOption[]): VariableOption[];
+/**
+ * Build VariableTag attributes from base and selected variable options.
+ * Optional defaultIfEmpty is used when the resolved value is empty (e.g. "Guest" for {user:firstName|Guest}).
+ */
+export declare function buildVariableTagAttrs(baseVariable: VariableOption, selectedVariable?: VariableOption, options?: {
+    openOnInsert?: boolean;
+    defaultIfEmpty?: string;
+    transformerId?: string;
+    transformerParams?: Record<string, unknown>;
+}): VariableTagAttrs;
+/**
+ * Strip optional inline default from token for lookup: {user:firstName|Guest} -> {user:firstName}.
+ * Returns [tokenWithoutDefault, defaultText].
+ */
+export declare function parseTokenWithDefault(tokenValue: string): [string, string | undefined];
+/**
+ * Resolve variable tag attrs from a token string (e.g. '{form:name}' or '{user:firstName|Guest}').
+ */
+export declare function resolveVariableTagByValue(tokenValue: string, topLevelVariables: VariableOption[], allVariables: VariableOption[]): VariableTagAttrs | null;
+/**
+ * Convert string value with {token} placeholders to Tiptap doc content.
+ */
+export declare function valueToContent(value: string, topLevelVariables: VariableOption[], allVariables: VariableOption[], trailingCursorText?: string): JSONContent | null;
+/**
+ * Convert Tiptap content to string value.
+ * Content is typically editor.getJSON().content (array of block/inline nodes).
+ */
+export declare function contentToValue(content: unknown): string;
+/**
+ * Replace a range in the editor with a variable tag node.
+ * @param editor - Tiptap editor instance
+ */
+export declare function replaceTokenWithVariable(editor: Editor, attrs: VariableTagAttrs, from: number, to: number): void;
+//# sourceMappingURL=variableSerialization.d.ts.map

package/dist/components/tiptap/variableSerialization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variableSerialization.d.ts","sourceRoot":"","sources":["../../../src/components/tiptap/variableSerialization.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;IACtB,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/C,CAAC;AA6IF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAe/E;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAehF;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACjC,YAAY,EAAE,cAAc,EAC5B,gBAAgB,GAAE,cAA6B,EAC/C,OAAO,GAAE;IACL,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C,GACP,gBAAgB,CAoBlB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAGtF;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CACrC,UAAU,EAAE,MAAM,EAClB,iBAAiB,EAAE,cAAc,EAAE,EACnC,YAAY,EAAE,cAAc,EAAE,GAC/B,gBAAgB,GAAG,IAAI,CA0DzB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,MAAM,EACb,iBAAiB,EAAE,cAAc,EAAE,EACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,kBAAkB,SAAW,GAC9B,WAAW,GAAG,IAAI,CA0BpB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CA4CvD;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CACpC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACX,IAAI,CAqBN"}