@verbb/plugin-kit-react 1.0.0

package/dist/components/TiptapEditor.js

@@ -0,0 +1,555 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { useTranslation } from "../hooks/useTranslation.js";
+import "../hooks/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip.js";
+import { VariableDropdown } from "./tiptap/VariableDropdown.js";
+import { LinkDropdown } from "./tiptap/LinkDropdown.js";
+import { VariablePickerProvider } from "./tiptap/VariablePickerContext.js";
+import { InlineVariablePickerPopover } from "./tiptap/InlineVariablePickerPopover.js";
+import { useInlineVariablePicker } from "./tiptap/useInlineVariablePicker.js";
+import { LinkBubbleMenu } from "./tiptap/LinkBubbleMenu.js";
+import { InsertLinkDialog } from "./tiptap/InsertLinkDialog.js";
+import { createTiptapExtensions, getFatalTiptapContentError, normalizeContentArray, valueToContent } from "./tiptap/editorConfig.js";
+import "./index.js";
+import { Button } from "./Button.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { getMarkRange } from "@tiptap/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAlignCenter, faAlignJustify, faAlignLeft, faAlignRight, faArrowRotateLeft, faArrowRotateRight, faBold, faBracketsCurly, faCode, faH1, faH2, faH3, faH4, faH5, faH6, faHighlighter, faItalic, faListOl, faListUl, faMinus, faQuoteRight, faStrikethrough, faSubscript, faSuperscript, faTextSlash, faTriangleExclamation, faUnderline } from "@fortawesome/pro-solid-svg-icons";
+import { EditorContent, EditorContext, useEditor } from "@tiptap/react";
+import { faFileDashedLine, faTable } from "@fortawesome/pro-regular-svg-icons";
+//#region src/components/TiptapEditor.tsx
+var MenuBar = ({ editor, buttons = ["bold", "italic"], linkOptions, linkSelectorStorageKeyPrefix, variableCategories = {}, variableCategoryLabels, variableCategoryOrder, variablePickerOpen, onVariablePickerOpenChange, openInsertLinkDialog }) => {
+	const t = useTranslation();
+	if (!editor) return null;
+	const hasAnyVariables = Object.values(variableCategories ?? {}).some((items) => {
+		return Array.isArray(items) && items.length > 0;
+	});
+	const visibleButtons = buttons.filter((buttonName) => {
+		if (buttonName === "variableTag") return hasAnyVariables;
+		return true;
+	});
+	const buttonConfig = {
+		bold: {
+			icon: FontAwesomeIcon,
+			iconProp: faBold,
+			title: t("Bold"),
+			action: () => {
+				return editor.chain().focus().toggleBold().run();
+			},
+			isActive: () => {
+				return editor.isActive("bold");
+			}
+		},
+		italic: {
+			icon: FontAwesomeIcon,
+			iconProp: faItalic,
+			title: t("Italic"),
+			action: () => {
+				return editor.chain().focus().toggleItalic().run();
+			},
+			isActive: () => {
+				return editor.isActive("italic");
+			}
+		},
+		underline: {
+			icon: FontAwesomeIcon,
+			iconProp: faUnderline,
+			title: t("Underline"),
+			action: () => {
+				return editor.chain().focus().toggleUnderline().run();
+			},
+			isActive: () => {
+				return editor.isActive("underline");
+			}
+		},
+		strikethrough: {
+			icon: FontAwesomeIcon,
+			iconProp: faStrikethrough,
+			title: t("Strikethrough"),
+			action: () => {
+				return editor.chain().focus().toggleStrike().run();
+			},
+			isActive: () => {
+				return editor.isActive("strike");
+			}
+		},
+		subscript: {
+			icon: FontAwesomeIcon,
+			iconProp: faSubscript,
+			title: t("Subscript"),
+			action: () => {
+				return editor.chain().focus().toggleSubscript().run();
+			},
+			isActive: () => {
+				return editor.isActive("subscript");
+			}
+		},
+		superscript: {
+			icon: FontAwesomeIcon,
+			iconProp: faSuperscript,
+			title: t("Superscript"),
+			action: () => {
+				return editor.chain().focus().toggleSuperscript().run();
+			},
+			isActive: () => {
+				return editor.isActive("superscript");
+			}
+		},
+		"unordered-list": {
+			icon: FontAwesomeIcon,
+			iconProp: faListUl,
+			title: t("Bullet List"),
+			action: () => {
+				return editor.chain().focus().toggleBulletList().run();
+			},
+			isActive: () => {
+				return editor.isActive("bulletList");
+			}
+		},
+		"ordered-list": {
+			icon: FontAwesomeIcon,
+			iconProp: faListOl,
+			title: t("Ordered List"),
+			action: () => {
+				return editor.chain().focus().toggleOrderedList().run();
+			},
+			isActive: () => {
+				return editor.isActive("orderedList");
+			}
+		},
+		blockquote: {
+			icon: FontAwesomeIcon,
+			iconProp: faQuoteRight,
+			title: t("Blockquote"),
+			action: () => {
+				return editor.chain().focus().toggleBlockquote().run();
+			},
+			isActive: () => {
+				return editor.isActive("blockquote");
+			}
+		},
+		highlight: {
+			icon: FontAwesomeIcon,
+			iconProp: faHighlighter,
+			title: t("Highlight"),
+			action: () => {
+				return editor.chain().focus().toggleHighlight().run();
+			},
+			isActive: () => {
+				return editor.isActive("highlight");
+			}
+		},
+		code: {
+			icon: FontAwesomeIcon,
+			iconProp: faBracketsCurly,
+			title: t("Inline Code"),
+			action: () => {
+				return editor.chain().focus().toggleCode().run();
+			},
+			isActive: () => {
+				return editor.isActive("code");
+			}
+		},
+		"code-block": {
+			icon: FontAwesomeIcon,
+			iconProp: faCode,
+			title: t("Code Block"),
+			action: () => {
+				return editor.chain().focus().toggleCodeBlock().run();
+			},
+			isActive: () => {
+				return editor.isActive("codeBlock");
+			}
+		},
+		hr: {
+			icon: FontAwesomeIcon,
+			iconProp: faMinus,
+			title: t("Horizontal Rule"),
+			action: () => {
+				return editor.chain().focus().setHorizontalRule().run();
+			}
+		},
+		"line-break": {
+			icon: FontAwesomeIcon,
+			iconProp: faFileDashedLine,
+			title: t("Line Break"),
+			action: () => {
+				return editor.chain().focus().setHardBreak().run();
+			}
+		},
+		"align-left": {
+			icon: FontAwesomeIcon,
+			iconProp: faAlignLeft,
+			title: t("Align Left"),
+			action: () => {
+				return editor.chain().focus().setTextAlign("left").run();
+			},
+			isActive: () => {
+				return editor.isActive({ textAlign: "left" });
+			}
+		},
+		"align-center": {
+			icon: FontAwesomeIcon,
+			iconProp: faAlignCenter,
+			title: t("Align Center"),
+			action: () => {
+				return editor.chain().focus().setTextAlign("center").run();
+			},
+			isActive: () => {
+				return editor.isActive({ textAlign: "center" });
+			}
+		},
+		"align-right": {
+			icon: FontAwesomeIcon,
+			iconProp: faAlignRight,
+			title: t("Align Right"),
+			action: () => {
+				return editor.chain().focus().setTextAlign("right").run();
+			},
+			isActive: () => {
+				return editor.isActive({ textAlign: "right" });
+			}
+		},
+		"align-justify": {
+			icon: FontAwesomeIcon,
+			iconProp: faAlignJustify,
+			title: t("Justify"),
+			action: () => {
+				return editor.chain().focus().setTextAlign("justify").run();
+			},
+			isActive: () => {
+				return editor.isActive({ textAlign: "justify" });
+			}
+		},
+		"clear-format": {
+			icon: FontAwesomeIcon,
+			iconProp: faTextSlash,
+			title: t("Clear Format"),
+			action: () => {
+				return editor.chain().focus().clearNodes().unsetAllMarks().run();
+			}
+		},
+		undo: {
+			icon: FontAwesomeIcon,
+			iconProp: faArrowRotateLeft,
+			title: t("Undo"),
+			action: () => {
+				return editor.chain().focus().undo().run();
+			}
+		},
+		redo: {
+			icon: FontAwesomeIcon,
+			iconProp: faArrowRotateRight,
+			title: t("Redo"),
+			action: () => {
+				return editor.chain().focus().redo().run();
+			}
+		},
+		link: {
+			title: t("Link"),
+			isActive: () => {
+				return editor.isActive("link");
+			},
+			isDropdown: true
+		},
+		table: {
+			icon: FontAwesomeIcon,
+			iconProp: faTable,
+			title: t("Insert Table"),
+			action: () => {
+				return editor.chain().focus().insertTable({
+					rows: 3,
+					cols: 3,
+					withHeaderRow: true
+				}).run();
+			}
+		},
+		variableTag: {
+			title: t("Insert Variable"),
+			isActive: () => {
+				return editor.isActive("variableTag");
+			},
+			isDropdown: true
+		}
+	};
+	[
+		1,
+		2,
+		3,
+		4,
+		5,
+		6
+	].forEach((level) => {
+		buttonConfig[`h${level}`] = {
+			icon: FontAwesomeIcon,
+			iconProp: {
+				1: faH1,
+				2: faH2,
+				3: faH3,
+				4: faH4,
+				5: faH5,
+				6: faH6
+			}[level],
+			title: t("Heading {level}", { level: String(level) }),
+			action: () => {
+				return editor.chain().focus().toggleHeading({ level }).run();
+			},
+			isActive: () => {
+				return editor.isActive("heading", { level });
+			}
+		};
+	});
+	const resolveIsActive = (config) => {
+		if (!config.isActive) return false;
+		return typeof config.isActive === "function" ? config.isActive() : config.isActive;
+	};
+	const renderedButtons = visibleButtons.map((buttonName) => {
+		const config = buttonConfig[buttonName];
+		if (!config) return null;
+		if (config.isDropdown && buttonName === "link") return /* @__PURE__ */ jsx(LinkDropdown, {
+			editor,
+			linkOptions,
+			linkSelectorStorageKeyPrefix,
+			openInsertLinkDialog,
+			title: config.title
+		}, buttonName);
+		if (config.isDropdown && buttonName === "variableTag") return /* @__PURE__ */ jsx(VariableDropdown, {
+			editor,
+			variableCategories,
+			variableCategoryLabels,
+			variableCategoryOrder,
+			title: config.title,
+			open: variablePickerOpen,
+			onOpenChange: onVariablePickerOpenChange
+		}, buttonName);
+		const Icon = config.icon;
+		return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
+			variant: "transparent",
+			onClick: config.action,
+			className: cn("w-[32px] h-[32px]", "text-[#1c2e36]", "hover:bg-slate-100!", resolveIsActive(config) && "bg-slate-250! hover:bg-slate-250!"),
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: config.iconProp,
+				className: "size-4"
+			})
+		}) }), /* @__PURE__ */ jsx(TooltipContent, {
+			sideOffset: 4,
+			children: config.title
+		})] }, buttonName);
+	}).filter(Boolean);
+	if (renderedButtons.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-wrap relative z-10 gap-1 px-[8px] py-[4px]", "border-b border-[rgba(96,125,159,0.4)] bg-white", "shadow-[0_2px_3px_rgba(49,49,93,.07)]"),
+		children: renderedButtons
+	});
+};
+var TiptapEditor = ({ value = "", onChange, buttons = ["bold", "italic"], tableOptions = [], linkOptions, linkSelectorStorageKeyPrefix, variableCategories = {}, variableCategoryLabels, variableCategoryOrder, variableTransformerRegistry, variablePickerTriggerCharacters = ["@"], toolbarContent, rows, className, isInvalid, disabled = false, readOnly = false, invalidContentMessage, ...props }) => {
+	useTranslation();
+	const wrapperRef = useRef(null);
+	const handleKeyDownRef = useRef(null);
+	const extensions = useMemo(() => {
+		return createTiptapExtensions({ trailingCursorText: "⁠" });
+	}, []);
+	const [isVariablePickerOpen, setIsVariablePickerOpen] = useState(false);
+	const hasAnyVariables = useMemo(() => {
+		return Object.values(variableCategories || {}).some((variables) => {
+			return Array.isArray(variables) && variables.length > 0;
+		});
+	}, [variableCategories]);
+	const editorContent = useMemo(() => {
+		return valueToContent(value, { trailingCursorText: "⁠" });
+	}, [value]);
+	const contentError = useMemo(() => {
+		const detectedError = getFatalTiptapContentError(value);
+		return detectedError ? invalidContentMessage || detectedError : "";
+	}, [invalidContentMessage, value]);
+	const serializeContent = (content) => {
+		return normalizeContentArray(content);
+	};
+	const editor = useEditor({
+		extensions,
+		content: contentError ? null : editorContent,
+		editable: !disabled && !readOnly,
+		editorProps: { handleKeyDown: (view, event) => {
+			return handleKeyDownRef.current?.(view, event) ?? false;
+		} },
+		onUpdate: ({ editor }) => {
+			if (onChange) onChange(serializeContent(editor.getJSON().content));
+		}
+	});
+	const inlinePicker = useInlineVariablePicker(editor, {
+		variableCategories,
+		variableCategoryLabels,
+		variableCategoryOrder,
+		variablePickerTriggerCharacters,
+		disabled,
+		readOnly,
+		wrapperRef,
+		onOpenDropdown: () => {
+			return setIsVariablePickerOpen(true);
+		}
+	});
+	useEffect(() => {
+		handleKeyDownRef.current = inlinePicker.handleKeyDown;
+	}, [inlinePicker.handleKeyDown]);
+	const [insertLinkDialogOpen, setInsertLinkDialogOpen] = useState(false);
+	const [insertLinkInitialValues, setInsertLinkInitialValues] = useState();
+	const editorMinHeight = useMemo(() => {
+		return `${Math.max(1, Number(rows || 0)) * 24 + 32}px`;
+	}, [rows]);
+	useEffect(() => {
+		if (!editor?.view?.dom) return;
+		editor.view.dom.style.minHeight = editorMinHeight;
+	}, [editor, editorMinHeight]);
+	const openInsertLinkDialog = useCallback((initial) => {
+		if (initial) {
+			const openInNewTab = editor?.isActive("link") ? editor.getAttributes("link").target === "_blank" : false;
+			setInsertLinkInitialValues({
+				...initial,
+				openInNewTab
+			});
+		} else setInsertLinkInitialValues(void 0);
+		setInsertLinkDialogOpen(true);
+	}, [editor]);
+	const insertLink = useCallback((params) => {
+		if (!editor) return;
+		const { url, text, openInNewTab, from: fromParam, to: toParam } = params;
+		const chain = editor.chain().focus();
+		const linkAttrs = { href: url };
+		if (openInNewTab) linkAttrs.target = "_blank";
+		const content = {
+			type: "text",
+			text: text.trim() || url,
+			marks: [{
+				type: "link",
+				attrs: linkAttrs
+			}]
+		};
+		if (typeof fromParam === "number" && typeof toParam === "number" && fromParam !== toParam) chain.insertContentAt({
+			from: fromParam,
+			to: toParam
+		}, [content]).run();
+		else {
+			const { from, to } = editor.state.selection;
+			if (editor.state.doc.textBetween(from, to, " ")) chain.extendMarkRange("link").setLink(linkAttrs).run();
+			else chain.insertContent([content]).run();
+		}
+	}, [editor]);
+	useEffect(() => {
+		if (editor) {
+			const newContent = contentError ? null : editorContent;
+			const currentContent = editor.getJSON();
+			if (JSON.stringify(newContent) !== JSON.stringify(currentContent)) editor.commands.setContent(newContent);
+		}
+	}, [
+		contentError,
+		editor,
+		editorContent
+	]);
+	const handleLinkBubbleEdit = useCallback(() => {
+		if (!editor) return;
+		const { href } = editor.getAttributes("link");
+		const { state } = editor;
+		const linkType = state.schema.marks.link;
+		const range = getMarkRange(state.selection.$from, linkType);
+		const from = range?.from ?? state.selection.from;
+		const to = range?.to ?? state.selection.to;
+		openInsertLinkDialog({
+			url: href,
+			text: editor.state.doc.textBetween(from, to, " "),
+			from,
+			to
+		});
+	}, [editor, openInsertLinkDialog]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("border border-[rgba(96,125,159,0.4)] rounded-sm overflow-hidden", isInvalid && ["border-rose-600!", "[focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]!"], className),
+		children: /* @__PURE__ */ jsxs(VariablePickerProvider, {
+			variableCategories,
+			variableCategoryLabels,
+			variableCategoryOrder,
+			variableTransformerRegistry,
+			children: [/* @__PURE__ */ jsxs(EditorContext.Provider, {
+				value: { editor },
+				children: [
+					toolbarContent ? toolbarContent({
+						editor,
+						variableCategories,
+						variableCategoryLabels,
+						variableCategoryOrder,
+						variablePickerOpen: isVariablePickerOpen,
+						onVariablePickerOpenChange: setIsVariablePickerOpen
+					}) : /* @__PURE__ */ jsx(MenuBar, {
+						editor,
+						buttons,
+						tableOptions,
+						linkOptions,
+						linkSelectorStorageKeyPrefix,
+						variableCategories,
+						variableCategoryLabels,
+						variableCategoryOrder,
+						variablePickerOpen: isVariablePickerOpen,
+						onVariablePickerOpenChange: setIsVariablePickerOpen,
+						openInsertLinkDialog
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						ref: wrapperRef,
+						className: "relative",
+						children: [
+							contentError && /* @__PURE__ */ jsxs("div", {
+								className: "flex items-start gap-2 border-b border-rose-200 bg-rose-50 px-4 py-2 text-sm text-rose-800",
+								children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
+									icon: faTriangleExclamation,
+									className: "mt-0.5 size-3.5 shrink-0"
+								}), /* @__PURE__ */ jsx("p", { children: contentError })]
+							}),
+							/* @__PURE__ */ jsx(EditorContent, {
+								editor,
+								className: cn("[&_.ProseMirror]:outline-none", "[&_.ProseMirror]:min-h-8", "[&_.ProseMirror]:p-4", "[&_.ProseMirror]:bg-[#fbfcfe]", "[&_.ProseMirror]:shadow-none", "[&_.ProseMirror]:whitespace-pre-wrap", "[&_.ProseMirror_p]:m-0 [&_.ProseMirror_p]:mb-2", "[&_.ProseMirror_p:last-child]:mb-0", "[&_.ProseMirror_h1]:text-xl [&_.ProseMirror_h1]:font-bold [&_.ProseMirror_h1]:mb-2", "[&_.ProseMirror_h2]:text-lg [&_.ProseMirror_h2]:font-semibold [&_.ProseMirror_h2]:mb-2", "[&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-5 [&_.ProseMirror_ul]:mb-2", "[&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-5 [&_.ProseMirror_ol]:mb-2", "[&_.ProseMirror_li]:mb-1", "[&_.ProseMirror_hr]:border-slate-300 [&_.ProseMirror_hr]:my-4", "[&_.ProseMirror_code]:bg-slate-100 [&_.ProseMirror_code]:px-1 [&_.ProseMirror_code]:py-0.5 [&_.ProseMirror_code]:rounded [&_.ProseMirror_code]:text-sm", "[&_.ProseMirror_pre]:bg-slate-100 [&_.ProseMirror_pre]:p-3 [&_.ProseMirror_pre]:rounded [&_.ProseMirror_pre]:overflow-x-auto [&_.ProseMirror_pre]:mb-2", "[&_.ProseMirror_blockquote]:border-l-4 [&_.ProseMirror_blockquote]:border-slate-300 [&_.ProseMirror_blockquote]:pl-4 [&_.ProseMirror_blockquote]:italic [&_.ProseMirror_blockquote]:text-slate-600 [&_.ProseMirror_blockquote]:mb-2", "[&_.ProseMirror_table]:border-collapse [&_.ProseMirror_table]:w-full [&_.ProseMirror_table]:mb-2", "[&_.ProseMirror_th]:border [&_.ProseMirror_th]:border-slate-300 [&_.ProseMirror_th]:px-3 [&_.ProseMirror_th]:py-2 [&_.ProseMirror_th]:bg-slate-100 [&_.ProseMirror_th]:text-left", "[&_.ProseMirror_td]:border [&_.ProseMirror_td]:border-slate-300 [&_.ProseMirror_td]:px-3 [&_.ProseMirror_td]:py-2", "[&_.ProseMirror_a]:text-blue-600 [&_.ProseMirror_a]:underline [&_.ProseMirror_a]:cursor-pointer"),
+								...props
+							}),
+							hasAnyVariables && !readOnly && /* @__PURE__ */ jsx(InlineVariablePickerPopover, {
+								open: inlinePicker.state.open,
+								onOpenChange: (open) => {
+									if (!open) inlinePicker.closePicker();
+								},
+								position: {
+									top: inlinePicker.state.top,
+									left: inlinePicker.state.left
+								},
+								isChildMode: inlinePicker.filteredVariables.isChildMode,
+								query: inlinePicker.state.query,
+								onQueryChange: inlinePicker.setQuery,
+								filteredVariables: inlinePicker.filteredVariables,
+								onSelect: inlinePicker.handleSelect,
+								onBack: inlinePicker.goBack
+							})
+						]
+					}),
+					buttons.includes("link") && editor && /* @__PURE__ */ jsx(LinkBubbleMenu, {
+						editor,
+						onEdit: handleLinkBubbleEdit,
+						dialogOpen: insertLinkDialogOpen
+					})
+				]
+			}), /* @__PURE__ */ jsx(InsertLinkDialog, {
+				open: insertLinkDialogOpen,
+				onOpenChange: setInsertLinkDialogOpen,
+				initialValues: insertLinkInitialValues,
+				onInsert: (values) => {
+					insertLink({
+						...values,
+						from: insertLinkInitialValues?.from,
+						to: insertLinkInitialValues?.to
+					});
+					setInsertLinkDialogOpen(false);
+				}
+			})]
+		})
+	});
+};
+//#endregion
+export { TiptapEditor };
+
+//# sourceMappingURL=TiptapEditor.js.map

package/dist/components/TiptapEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TiptapEditor.js","names":[],"sources":["../../src/components/TiptapEditor.tsx"],"sourcesContent":["import {\n    useEffect, useCallback, useMemo, useRef, useState,\n} from 'react';\nimport type { ReactNode } from 'react';\nimport { useEditor, EditorContent, EditorContext } from '@tiptap/react';\nimport { getMarkRange, type Editor as TiptapEditorInstance } from '@tiptap/core';\n\nimport { Button } from '@verbb/plugin-kit-react/components';\nimport { LinkDropdown } from './tiptap/LinkDropdown';\nimport type { LinkOptions, LinkOptionsInput } from './tiptap/LinkDropdown';\nimport { VariableDropdown } from './tiptap/VariableDropdown';\nimport type { VariableOption, VariableCategories } from './tiptap/VariableDropdown';\nimport type { VariableTransformerRegistry } from './tiptap/VariablePickerContext';\nimport { VariablePickerProvider } from './tiptap/VariablePickerContext';\nimport { InlineVariablePickerPopover } from './tiptap/InlineVariablePickerPopover';\nimport { useInlineVariablePicker } from './tiptap/useInlineVariablePicker';\n\nexport type {\n    LinkOptions, LinkOptionsInput, VariableOption, VariableCategories,\n};\nimport { LinkBubbleMenu } from './tiptap/LinkBubbleMenu';\nimport { InsertLinkDialog } from './tiptap/InsertLinkDialog';\n\nimport {\n    createTiptapExtensions,\n    getFatalTiptapContentError,\n    normalizeContentArray,\n    valueToContent,\n} from './tiptap/editorConfig';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport {\n    faAlignCenter,\n    faAlignJustify,\n    faAlignLeft,\n    faAlignRight,\n    faArrowRotateLeft,\n    faArrowRotateRight,\n    faBold,\n    faBracketsCurly,\n    faCode,\n    faH1,\n    faH2,\n    faH3,\n    faH4,\n    faH5,\n    faH6,\n    faHighlighter,\n    faItalic,\n    faListOl,\n    faListUl,\n    faMinus,\n    faQuoteRight,\n    faStrikethrough,\n    faSubscript,\n    faSuperscript,\n    faTriangleExclamation,\n\n    faUnderline,\n    faTextSlash,\n} from '@fortawesome/pro-solid-svg-icons';\n\nimport {\n    faFileDashedLine,\n    faTable,\n} from '@fortawesome/pro-regular-svg-icons';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@verbb/plugin-kit-react/components/Tooltip';\n\nconst MenuBar = ({\n    editor,\n    buttons = ['bold', 'italic'],\n    linkOptions,\n    linkSelectorStorageKeyPrefix,\n    variableCategories = {},\n    variableCategoryLabels,\n    variableCategoryOrder,\n    variablePickerOpen,\n    onVariablePickerOpenChange,\n    openInsertLinkDialog,\n}: {\n    editor: TiptapEditorInstance | null | undefined;\n    buttons?: string[];\n    linkOptions?: LinkOptionsInput;\n    linkSelectorStorageKeyPrefix?: string;\n    variableCategories?: VariableCategories;\n    variableCategoryLabels?: Record<string, string>;\n    variableCategoryOrder?: string[];\n    variablePickerOpen?: boolean;\n    onVariablePickerOpenChange?: (open: boolean) => void;\n    openInsertLinkDialog?: (initial?: { url?: string; text?: string; from?: number; to?: number }) => void;\n}) => {\n    const t = useTranslation();\n\n    if (!editor) {\n        return null;\n    }\n\n    const hasAnyVariables = Object.values(variableCategories ?? {}).some(\n        items => {\n            return Array.isArray(items) && items.length > 0;\n        },\n    );\n\n    const visibleButtons = buttons.filter((buttonName) => {\n        if (buttonName === 'variableTag') {\n            return hasAnyVariables;\n        }\n\n        return true;\n    });\n\n    const buttonConfig = {\n        bold: {\n            icon: FontAwesomeIcon,\n            iconProp: faBold,\n            title: t('Bold'),\n            action: () => { return editor.chain().focus().toggleBold().run(); },\n            isActive: () => { return editor.isActive('bold'); },\n        },\n        italic: {\n            icon: FontAwesomeIcon,\n            iconProp: faItalic,\n            title: t('Italic'),\n            action: () => { return editor.chain().focus().toggleItalic().run(); },\n            isActive: () => { return editor.isActive('italic'); },\n        },\n        underline: {\n            icon: FontAwesomeIcon,\n            iconProp: faUnderline,\n            title: t('Underline'),\n            action: () => { return editor.chain().focus().toggleUnderline().run(); },\n            isActive: () => { return editor.isActive('underline'); },\n        },\n        strikethrough: {\n            icon: FontAwesomeIcon,\n            iconProp: faStrikethrough,\n            title: t('Strikethrough'),\n            action: () => { return editor.chain().focus().toggleStrike().run(); },\n            isActive: () => { return editor.isActive('strike'); },\n        },\n        subscript: {\n            icon: FontAwesomeIcon,\n            iconProp: faSubscript,\n            title: t('Subscript'),\n            action: () => { return editor.chain().focus().toggleSubscript().run(); },\n            isActive: () => { return editor.isActive('subscript'); },\n        },\n        superscript: {\n            icon: FontAwesomeIcon,\n            iconProp: faSuperscript,\n            title: t('Superscript'),\n            action: () => { return editor.chain().focus().toggleSuperscript().run(); },\n            isActive: () => { return editor.isActive('superscript'); },\n        },\n        'unordered-list': {\n            icon: FontAwesomeIcon,\n            iconProp: faListUl,\n            title: t('Bullet List'),\n            action: () => { return editor.chain().focus().toggleBulletList().run(); },\n            isActive: () => { return editor.isActive('bulletList'); },\n        },\n        'ordered-list': {\n            icon: FontAwesomeIcon,\n            iconProp: faListOl,\n            title: t('Ordered List'),\n            action: () => { return editor.chain().focus().toggleOrderedList().run(); },\n            isActive: () => { return editor.isActive('orderedList'); },\n        },\n        blockquote: {\n            icon: FontAwesomeIcon,\n            iconProp: faQuoteRight,\n            title: t('Blockquote'),\n            action: () => { return editor.chain().focus().toggleBlockquote().run(); },\n            isActive: () => { return editor.isActive('blockquote'); },\n        },\n        highlight: {\n            icon: FontAwesomeIcon,\n            iconProp: faHighlighter,\n            title: t('Highlight'),\n            action: () => { return editor.chain().focus().toggleHighlight().run(); },\n            isActive: () => { return editor.isActive('highlight'); },\n        },\n        code: {\n            icon: FontAwesomeIcon,\n            iconProp: faBracketsCurly,\n            title: t('Inline Code'),\n            action: () => { return editor.chain().focus().toggleCode().run(); },\n            isActive: () => { return editor.isActive('code'); },\n        },\n        'code-block': {\n            icon: FontAwesomeIcon,\n            iconProp: faCode,\n            title: t('Code Block'),\n            action: () => { return editor.chain().focus().toggleCodeBlock().run(); },\n            isActive: () => { return editor.isActive('codeBlock'); },\n        },\n        hr: {\n            icon: FontAwesomeIcon,\n            iconProp: faMinus,\n            title: t('Horizontal Rule'),\n            action: () => { return editor.chain().focus().setHorizontalRule().run(); },\n        },\n        'line-break': {\n            icon: FontAwesomeIcon,\n            iconProp: faFileDashedLine,\n            title: t('Line Break'),\n            action: () => { return editor.chain().focus().setHardBreak().run(); },\n        },\n        'align-left': {\n            icon: FontAwesomeIcon,\n            iconProp: faAlignLeft,\n            title: t('Align Left'),\n            action: () => { return editor.chain().focus().setTextAlign('left').run(); },\n            isActive: () => { return editor.isActive({ textAlign: 'left' }); },\n        },\n        'align-center': {\n            icon: FontAwesomeIcon,\n            iconProp: faAlignCenter,\n            title: t('Align Center'),\n            action: () => { return editor.chain().focus().setTextAlign('center').run(); },\n            isActive: () => { return editor.isActive({ textAlign: 'center' }); },\n        },\n        'align-right': {\n            icon: FontAwesomeIcon,\n            iconProp: faAlignRight,\n            title: t('Align Right'),\n            action: () => { return editor.chain().focus().setTextAlign('right').run(); },\n            isActive: () => { return editor.isActive({ textAlign: 'right' }); },\n        },\n        'align-justify': {\n            icon: FontAwesomeIcon,\n            iconProp: faAlignJustify,\n            title: t('Justify'),\n            action: () => { return editor.chain().focus().setTextAlign('justify').run(); },\n            isActive: () => { return editor.isActive({ textAlign: 'justify' }); },\n        },\n        'clear-format': {\n            icon: FontAwesomeIcon,\n            iconProp: faTextSlash,\n            title: t('Clear Format'),\n            action: () => { return editor.chain().focus().clearNodes().unsetAllMarks().run(); },\n        },\n        undo: {\n            icon: FontAwesomeIcon,\n            iconProp: faArrowRotateLeft,\n            title: t('Undo'),\n            action: () => { return editor.chain().focus().undo().run(); },\n        },\n        redo: {\n            icon: FontAwesomeIcon,\n            iconProp: faArrowRotateRight,\n            title: t('Redo'),\n            action: () => { return editor.chain().focus().redo().run(); },\n        },\n        link: {\n            title: t('Link'),\n            isActive: () => { return editor.isActive('link'); },\n            isDropdown: true,\n        },\n        table: {\n            icon: FontAwesomeIcon,\n            iconProp: faTable,\n            title: t('Insert Table'),\n            action: () => { return editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(); },\n        },\n        variableTag: {\n            title: t('Insert Variable'),\n            isActive: () => { return editor.isActive('variableTag'); },\n            isDropdown: true,\n        },\n    };\n\n    // Add heading levels h1–h6\n    [1, 2, 3, 4, 5, 6].forEach((level) => {\n        buttonConfig[`h${level}`] = {\n            icon: FontAwesomeIcon,\n            iconProp: {\n                1: faH1,\n                2: faH2,\n                3: faH3,\n                4: faH4,\n                5: faH5,\n                6: faH6,\n            }[level],\n            title: t('Heading {level}', { level: String(level) }),\n            action: () => { return editor.chain().focus().toggleHeading({ level }).run(); },\n            isActive: () => { return editor.isActive('heading', { level }); },\n        };\n    });\n\n    const resolveIsActive = (config) => {\n        if (!config.isActive) {\n            return false;\n        }\n        return typeof config.isActive === 'function' ? config.isActive() : config.isActive;\n    };\n\n    const renderedButtons = visibleButtons\n        .map((buttonName) => {\n            const config = buttonConfig[buttonName];\n\n            if (!config) { return null; }\n\n            if (config.isDropdown && buttonName === 'link') {\n                return (\n                    <LinkDropdown\n                        key={buttonName}\n                        editor={editor}\n                        linkOptions={linkOptions}\n                        linkSelectorStorageKeyPrefix={linkSelectorStorageKeyPrefix}\n                        openInsertLinkDialog={openInsertLinkDialog!}\n                        title={config.title}\n                    />\n                );\n            }\n\n            if (config.isDropdown && buttonName === 'variableTag') {\n                return (\n                    <VariableDropdown\n                        key={buttonName}\n                        editor={editor}\n                        variableCategories={variableCategories}\n                        variableCategoryLabels={variableCategoryLabels}\n                        variableCategoryOrder={variableCategoryOrder}\n                        title={config.title}\n                        open={variablePickerOpen}\n                        onOpenChange={onVariablePickerOpenChange}\n                    />\n                );\n            }\n\n            const Icon = config.icon;\n\n            return (\n                <Tooltip key={buttonName}>\n                    <TooltipTrigger\n                        render={\n                            <Button\n                                variant=\"transparent\"\n                                onClick={config.action}\n                                className={cn(\n                                    'w-[32px] h-[32px]',\n                                    'text-[#1c2e36]',\n                                    'hover:bg-slate-100!',\n                                    resolveIsActive(config) && 'bg-slate-250! hover:bg-slate-250!',\n                                )}\n                            >\n                                <Icon icon={config.iconProp} className=\"size-4\" />\n                            </Button>\n                        }\n                    />\n                    <TooltipContent sideOffset={4}>{config.title}</TooltipContent>\n                </Tooltip>\n            );\n        })\n        .filter(Boolean);\n\n    if (renderedButtons.length === 0) {\n        return null;\n    }\n\n    return (\n        <div className={cn(\n            'flex flex-wrap relative z-10 gap-1 px-[8px] py-[4px]',\n            'border-b border-[rgba(96,125,159,0.4)] bg-white',\n            'shadow-[0_2px_3px_rgba(49,49,93,.07)]',\n        )}>\n            {renderedButtons}\n        </div>\n    );\n};\n\ntype TiptapEditorProps = {\n    value?: unknown;\n    onChange?: (value: unknown) => void;\n    placeholder?: string;\n    buttons?: string[];\n    tableOptions?: Array<{ rows?: number; cols?: number; withHeaderRow?: boolean }>;\n    linkOptions?: LinkOptionsInput;\n    linkSelectorStorageKeyPrefix?: string;\n    variableCategories?: VariableCategories;\n    variableCategoryLabels?: Record<string, string>;\n    variableCategoryOrder?: string[];\n    variableTransformerRegistry?: VariableTransformerRegistry;\n    variablePickerTriggerCharacters?: string[];\n    toolbarContent?: (params: {\n        editor: TiptapEditorInstance | null;\n        variableCategories: VariableCategories;\n        variableCategoryLabels?: Record<string, string>;\n        variableCategoryOrder?: string[];\n        variablePickerOpen: boolean;\n        onVariablePickerOpenChange: (open: boolean) => void;\n    }) => ReactNode;\n    rows?: number;\n    className?: string;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    invalidContentMessage?: string;\n    [key: string]: unknown;\n};\n\nexport const TiptapEditor = ({\n    value = '',\n    onChange,\n    buttons = ['bold', 'italic'],\n    tableOptions = [],\n    linkOptions,\n    linkSelectorStorageKeyPrefix,\n    variableCategories = {},\n    variableCategoryLabels,\n    variableCategoryOrder,\n    variableTransformerRegistry,\n    variablePickerTriggerCharacters = ['@'],\n    toolbarContent,\n    rows,\n    className,\n    isInvalid,\n    disabled = false,\n    readOnly = false,\n    invalidContentMessage,\n    ...props\n}: TiptapEditorProps) => {\n    // Ensure value is a string and handle null/undefined\n    // const safeValue = value || '';\n    const t = useTranslation();\n\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n    const handleKeyDownRef = useRef<import('./tiptap/useInlineVariablePicker').InlineVariablePickerHandleKeyDown | null>(null);\n\n    const extensions = useMemo(() => {\n        return createTiptapExtensions({ trailingCursorText: '\\u2060' });\n    }, []);\n    const [isVariablePickerOpen, setIsVariablePickerOpen] = useState(false);\n    const hasAnyVariables = useMemo(() => {\n        return Object.values(variableCategories || {}).some((variables) => {\n            return Array.isArray(variables) && variables.length > 0;\n        });\n    }, [variableCategories]);\n    const editorContent = useMemo(() => {\n        return valueToContent(value, { trailingCursorText: '\\u2060' });\n    }, [value]);\n    const contentError = useMemo(() => {\n        const detectedError = getFatalTiptapContentError(value);\n        return detectedError ? (invalidContentMessage || detectedError) : '';\n    }, [invalidContentMessage, value]);\n\n    const serializeContent = (content: unknown) => {\n        return normalizeContentArray(content);\n    };\n\n    const editor = useEditor({\n        extensions,\n        content: contentError ? null : editorContent,\n        editable: !disabled && !readOnly,\n        editorProps: {\n            handleKeyDown: (view, event) => {\n                return handleKeyDownRef.current?.(view, event) ?? false;\n            },\n        },\n        onUpdate: ({ editor }) => {\n            if (onChange) {\n                onChange(serializeContent(editor.getJSON().content));\n            }\n        },\n    });\n\n    const inlinePicker = useInlineVariablePicker(editor, {\n        variableCategories,\n        variableCategoryLabels,\n        variableCategoryOrder,\n        variablePickerTriggerCharacters,\n        disabled,\n        readOnly,\n        wrapperRef,\n        onOpenDropdown: () => {\n            return setIsVariablePickerOpen(true);\n        },\n    });\n\n    useEffect(() => {\n        handleKeyDownRef.current = inlinePicker.handleKeyDown;\n    }, [inlinePicker.handleKeyDown]);\n\n    const [insertLinkDialogOpen, setInsertLinkDialogOpen] = useState(false);\n    const [insertLinkInitialValues, setInsertLinkInitialValues] = useState<{ url?: string; text?: string; openInNewTab?: boolean; from?: number; to?: number } | undefined>();\n    const editorMinHeight = useMemo(() => {\n        const normalizedRows = Math.max(1, Number(rows || 0));\n        const lineHeight = 24;\n        const verticalPadding = 32;\n\n        return `${(normalizedRows * lineHeight) + verticalPadding}px`;\n    }, [rows]);\n\n    useEffect(() => {\n        if (!editor?.view?.dom) {\n            return;\n        }\n\n        editor.view.dom.style.minHeight = editorMinHeight;\n    }, [editor, editorMinHeight]);\n\n    const openInsertLinkDialog = useCallback((initial?: { url?: string; text?: string; from?: number; to?: number }) => {\n        if (initial) {\n            const openInNewTab = editor?.isActive('link') ? editor.getAttributes('link').target === '_blank' : false;\n            setInsertLinkInitialValues({ ...initial, openInNewTab });\n        } else {\n            setInsertLinkInitialValues(undefined);\n        }\n        setInsertLinkDialogOpen(true);\n    }, [editor]);\n\n    const insertLink = useCallback(\n        (params: { url: string; text: string; openInNewTab: boolean; from?: number; to?: number }) => {\n            if (!editor) { return; }\n            const {\n                url, text, openInNewTab, from: fromParam, to: toParam,\n            } = params;\n            const chain = editor.chain().focus();\n            const linkAttrs: { href: string; target?: string | null } = { href: url };\n            if (openInNewTab) {\n                linkAttrs.target = '_blank';\n            }\n\n            const content = {\n                type: 'text',\n                text: text.trim() || url,\n                marks: [{ type: 'link', attrs: linkAttrs }],\n            };\n\n            if (typeof fromParam === 'number' && typeof toParam === 'number' && fromParam !== toParam) {\n                chain.insertContentAt({ from: fromParam, to: toParam }, [content]).run();\n            } else {\n                const { from, to } = editor.state.selection;\n                const selectedText = editor.state.doc.textBetween(from, to, ' ');\n                if (selectedText) {\n                    chain.extendMarkRange('link').setLink(linkAttrs).run();\n                } else {\n                    chain.insertContent([content]).run();\n                }\n            }\n        },\n        [editor],\n    );\n\n    // Watch for value changes and update editor content\n    useEffect(() => {\n        if (editor) {\n            const newContent = contentError ? null : editorContent;\n            const currentContent = editor.getJSON();\n\n            // Only update if content has actually changed\n            if (JSON.stringify(newContent) !== JSON.stringify(currentContent)) {\n                editor.commands.setContent(newContent);\n            }\n        }\n    }, [contentError, editor, editorContent]);\n\n    const handleLinkBubbleEdit = useCallback(() => {\n        if (!editor) { return; }\n        const { href } = editor.getAttributes('link');\n        const { state } = editor;\n        const linkType = state.schema.marks.link;\n        const range = getMarkRange(state.selection.$from, linkType);\n        const from = range?.from ?? state.selection.from;\n        const to = range?.to ?? state.selection.to;\n        const text = editor.state.doc.textBetween(from, to, ' ');\n        openInsertLinkDialog({\n            url: href, text, from, to,\n        });\n    }, [editor, openInsertLinkDialog]);\n\n    return (\n        <div className={cn(\n            'border border-[rgba(96,125,159,0.4)] rounded-sm overflow-hidden',\n            isInvalid && [\n                'border-rose-600!',\n                '[focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]!',\n            ],\n            className,\n        )}>\n            <VariablePickerProvider\n                variableCategories={variableCategories}\n                variableCategoryLabels={variableCategoryLabels}\n                variableCategoryOrder={variableCategoryOrder}\n                variableTransformerRegistry={variableTransformerRegistry}\n            >\n                <EditorContext.Provider value={{ editor }}>\n                    {toolbarContent ? (\n                        toolbarContent({\n                            editor,\n                            variableCategories,\n                            variableCategoryLabels,\n                            variableCategoryOrder,\n                            variablePickerOpen: isVariablePickerOpen,\n                            onVariablePickerOpenChange: setIsVariablePickerOpen,\n                        })\n                    ) : (\n                        <MenuBar\n                            editor={editor}\n                            buttons={buttons}\n                            tableOptions={tableOptions}\n                            linkOptions={linkOptions}\n                            linkSelectorStorageKeyPrefix={linkSelectorStorageKeyPrefix}\n                            variableCategories={variableCategories}\n                            variableCategoryLabels={variableCategoryLabels}\n                            variableCategoryOrder={variableCategoryOrder}\n                            variablePickerOpen={isVariablePickerOpen}\n                            onVariablePickerOpenChange={setIsVariablePickerOpen}\n                            openInsertLinkDialog={openInsertLinkDialog}\n                        />\n                    )}\n\n                    <div ref={wrapperRef} className=\"relative\">\n                        {contentError && (\n                            <div className=\"flex items-start gap-2 border-b border-rose-200 bg-rose-50 px-4 py-2 text-sm text-rose-800\">\n                                <FontAwesomeIcon icon={faTriangleExclamation} className=\"mt-0.5 size-3.5 shrink-0\" />\n                                <p>{contentError}</p>\n                            </div>\n                        )}\n\n                        <EditorContent\n                            editor={editor}\n                            className={cn(\n                                '[&_.ProseMirror]:outline-none',\n                                '[&_.ProseMirror]:min-h-8',\n                                '[&_.ProseMirror]:p-4',\n                                '[&_.ProseMirror]:bg-[#fbfcfe]',\n                                '[&_.ProseMirror]:shadow-none',\n                                '[&_.ProseMirror]:whitespace-pre-wrap',\n                                '[&_.ProseMirror_p]:m-0 [&_.ProseMirror_p]:mb-2',\n                                '[&_.ProseMirror_p:last-child]:mb-0',\n                                '[&_.ProseMirror_h1]:text-xl [&_.ProseMirror_h1]:font-bold [&_.ProseMirror_h1]:mb-2',\n                                '[&_.ProseMirror_h2]:text-lg [&_.ProseMirror_h2]:font-semibold [&_.ProseMirror_h2]:mb-2',\n                                '[&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-5 [&_.ProseMirror_ul]:mb-2',\n                                '[&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-5 [&_.ProseMirror_ol]:mb-2',\n                                '[&_.ProseMirror_li]:mb-1',\n                                '[&_.ProseMirror_hr]:border-slate-300 [&_.ProseMirror_hr]:my-4',\n                                '[&_.ProseMirror_code]:bg-slate-100 [&_.ProseMirror_code]:px-1 [&_.ProseMirror_code]:py-0.5 [&_.ProseMirror_code]:rounded [&_.ProseMirror_code]:text-sm',\n                                '[&_.ProseMirror_pre]:bg-slate-100 [&_.ProseMirror_pre]:p-3 [&_.ProseMirror_pre]:rounded [&_.ProseMirror_pre]:overflow-x-auto [&_.ProseMirror_pre]:mb-2',\n                                '[&_.ProseMirror_blockquote]:border-l-4 [&_.ProseMirror_blockquote]:border-slate-300 [&_.ProseMirror_blockquote]:pl-4 [&_.ProseMirror_blockquote]:italic [&_.ProseMirror_blockquote]:text-slate-600 [&_.ProseMirror_blockquote]:mb-2',\n                                '[&_.ProseMirror_table]:border-collapse [&_.ProseMirror_table]:w-full [&_.ProseMirror_table]:mb-2',\n                                '[&_.ProseMirror_th]:border [&_.ProseMirror_th]:border-slate-300 [&_.ProseMirror_th]:px-3 [&_.ProseMirror_th]:py-2 [&_.ProseMirror_th]:bg-slate-100 [&_.ProseMirror_th]:text-left',\n                                '[&_.ProseMirror_td]:border [&_.ProseMirror_td]:border-slate-300 [&_.ProseMirror_td]:px-3 [&_.ProseMirror_td]:py-2',\n                                '[&_.ProseMirror_a]:text-blue-600 [&_.ProseMirror_a]:underline [&_.ProseMirror_a]:cursor-pointer',\n                            )}\n                            {...props}\n                        />\n\n                        {hasAnyVariables && !readOnly && (\n                            <InlineVariablePickerPopover\n                                open={inlinePicker.state.open}\n                                onOpenChange={(open) => {\n                                    if (!open) {\n                                        inlinePicker.closePicker();\n                                    }\n                                }}\n                                position={{ top: inlinePicker.state.top, left: inlinePicker.state.left }}\n                                isChildMode={inlinePicker.filteredVariables.isChildMode}\n                                query={inlinePicker.state.query}\n                                onQueryChange={inlinePicker.setQuery}\n                                filteredVariables={inlinePicker.filteredVariables}\n                                onSelect={inlinePicker.handleSelect}\n                                onBack={inlinePicker.goBack}\n                            />\n                        )}\n                    </div>\n\n                    {buttons.includes('link') && editor && (\n                        <LinkBubbleMenu\n                            editor={editor}\n                            onEdit={handleLinkBubbleEdit}\n                            dialogOpen={insertLinkDialogOpen}\n                        />\n                    )}\n                </EditorContext.Provider>\n\n                <InsertLinkDialog\n                    open={insertLinkDialogOpen}\n                    onOpenChange={setInsertLinkDialogOpen}\n                    initialValues={insertLinkInitialValues}\n                    onInsert={(values) => {\n                        insertLink({\n                            ...values,\n                            from: insertLinkInitialValues?.from,\n                            to: insertLinkInitialValues?.to,\n                        });\n                        setInsertLinkDialogOpen(false);\n                    }}\n                />\n            </VariablePickerProvider>\n        </div >\n    );\n};\n"],"mappings":"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"}

package/dist/components/TiptapInput.d.ts

@@ -0,0 +1,15 @@
+export declare const TiptapInput: ({ value, onChange, className, isInvalid, disabled, readOnly, variableCategories, variableCategoryLabels, variableCategoryOrder, variableTransformerRegistry, variablePickerTriggerCharacters, ...props }: {
+    [x: string]: any;
+    value?: string | undefined;
+    onChange: any;
+    className: any;
+    isInvalid: any;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    variableCategories?: {} | undefined;
+    variableCategoryLabels: any;
+    variableCategoryOrder: any;
+    variableTransformerRegistry: any;
+    variablePickerTriggerCharacters?: string[] | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TiptapInput.d.ts.map

package/dist/components/TiptapInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TiptapInput.d.ts","sourceRoot":"","sources":["../../src/components/TiptapInput.tsx"],"names":[],"mappings":"AAyBA,eAAO,MAAM,WAAW,GAAI;;;;;;;;;;;;;CAa3B,4CAgJA,CAAC"}