@verbb/plugin-kit-react 1.0.9 → 2.0.0

package/dist/components/TiptapEditor.js

@@ -1,573 +0,0 @@
-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 = ["@"], renderVariableConfigureSection, resolveVariableTagLabel, toolbarContent, rows, className, isInvalid, disabled = false, readOnly = false, invalidContentMessage, ...props }) => {
-	useTranslation();
-	const wrapperRef = useRef(null);
-	const handleKeyDownRef = useRef(null);
-	const lastEmittedContentRef = 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 serializeEditorDocument = useCallback((editorInstance) => {
-		return JSON.stringify(serializeContent(editorInstance.getJSON().content));
-	}, []);
-	const editor = useEditor({
-		extensions,
-		content: contentError ? null : editorContent,
-		editable: !disabled && !readOnly,
-		editorProps: { handleKeyDown: (view, event) => {
-			return handleKeyDownRef.current?.(view, event) ?? false;
-		} },
-		onUpdate: ({ editor: editorInstance }) => {
-			const serialized = serializeContent(editorInstance.getJSON().content);
-			lastEmittedContentRef.current = JSON.stringify(serialized);
-			if (onChange) onChange(serialized);
-		}
-	});
-	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) return;
-		const incomingContent = contentError ? null : editorContent;
-		const incomingSerialized = JSON.stringify(incomingContent?.content ?? []);
-		const currentSerialized = serializeEditorDocument(editor);
-		const isVariableConfigActive = Boolean(document.activeElement?.closest("[data-variable-config-popover]"));
-		if (incomingSerialized === currentSerialized) return;
-		if (lastEmittedContentRef.current === incomingSerialized) return;
-		if (!readOnly && (editor.isFocused || isVariableConfigActive || lastEmittedContentRef.current && currentSerialized === lastEmittedContentRef.current && incomingSerialized !== lastEmittedContentRef.current)) return;
-		editor.commands.setContent(incomingContent ?? {
-			type: "doc",
-			content: []
-		});
-		lastEmittedContentRef.current = incomingSerialized;
-	}, [
-		contentError,
-		editor,
-		editorContent,
-		readOnly,
-		serializeEditorDocument
-	]);
-	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,
-			renderVariableConfigureSection,
-			resolveVariableTagLabel,
-			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

@@ -1 +0,0 @@
-{"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, VariableConfigureSectionProps, VariableTagLabelResolver } 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    renderVariableConfigureSection?: (props: VariableConfigureSectionProps) => ReactNode;\n    resolveVariableTagLabel?: VariableTagLabelResolver;\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    renderVariableConfigureSection,\n    resolveVariableTagLabel,\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    const lastEmittedContentRef = useRef<string | 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 serializeEditorDocument = useCallback((editorInstance: NonNullable<ReturnType<typeof useEditor>>) => {\n        return JSON.stringify(serializeContent(editorInstance.getJSON().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: editorInstance }) => {\n            const serialized = serializeContent(editorInstance.getJSON().content);\n            lastEmittedContentRef.current = JSON.stringify(serialized);\n\n            if (onChange) {\n                onChange(serialized);\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            return;\n        }\n\n        const incomingContent = contentError ? null : editorContent;\n        const incomingSerialized = JSON.stringify(incomingContent?.content ?? []);\n        const currentSerialized = serializeEditorDocument(editor);\n        const isVariableConfigActive = Boolean(\n            document.activeElement?.closest('[data-variable-config-popover]'),\n        );\n\n        if (incomingSerialized === currentSerialized) {\n            return;\n        }\n\n        if (lastEmittedContentRef.current === incomingSerialized) {\n            return;\n        }\n\n        if (\n            !readOnly\n            && (\n                editor.isFocused\n                || isVariableConfigActive\n                || (\n                    lastEmittedContentRef.current\n                    && currentSerialized === lastEmittedContentRef.current\n                    && incomingSerialized !== lastEmittedContentRef.current\n                )\n            )\n        ) {\n            return;\n        }\n\n        editor.commands.setContent(incomingContent ?? { type: 'doc', content: [] });\n        lastEmittedContentRef.current = incomingSerialized;\n    }, [contentError, editor, editorContent, readOnly, serializeEditorDocument]);\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                renderVariableConfigureSection={renderVariableConfigureSection}\n                resolveVariableTagLabel={resolveVariableTagLabel}\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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"}