camox 0.31.4 → 0.32.0

package/dist/core/components/lexical/SidebarLexicalEditor.js

@@ -1,23 +1,32 @@
 import { INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, cn } from "../../../lib/utils.js";
+import { FORMAT_FLAGS } from "../../lib/modifierFormats.js";
+import { isHttpTextLinkTarget } from "../../lib/textLinks.js";
 import { lexicalStateToMarkdown } from "../../lib/lexicalState.js";
 import { createEditorConfig, normalizeLexicalState } from "./editorConfig.js";
+import { TextLinkPopover } from "./TextLinkPopover.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { $createLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { COMMAND_PRIORITY_LOW, INSERT_LINE_BREAK_COMMAND, KEY_ENTER_COMMAND } from "lexical";
+import { $createTextNode, $getSelection, $isRangeSelection, $setSelection, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, INSERT_LINE_BREAK_COMMAND, KEY_ENTER_COMMAND, PASTE_COMMAND } from "lexical";
+import { Button } from "@camox/ui/button";
+import { Bold, Italic } from "lucide-react";
+import { FloatingToolbar } from "@camox/ui/floating-toolbar";
+import { Toggle } from "@camox/ui/toggle";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 
 //#region src/core/components/lexical/SidebarLexicalEditor.tsx
 function EnterAsLineBreakHandler() {
 	const $ = c(4);
-	if ($[0] !== "007895f09b5a774a44cc27d8ef0328c4985b935c9b126d4ae8b5c8fe1ffd622e") {
+	if ($[0] !== "487a2055e45cbfcdfeb0dfca78f86f0618f64602e19388a1a5bda9fa6e7197a2") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "007895f09b5a774a44cc27d8ef0328c4985b935c9b126d4ae8b5c8fe1ffd622e";
+		$[0] = "487a2055e45cbfcdfeb0dfca78f86f0618f64602e19388a1a5bda9fa6e7197a2";
 	}
 	const [editor] = useLexicalComposerContext();
 	let t0;
@@ -41,9 +50,9 @@ function EnterAsLineBreakHandler() {
 }
 function ExternalStateSync(t0) {
 	const $ = c(6);
-	if ($[0] !== "007895f09b5a774a44cc27d8ef0328c4985b935c9b126d4ae8b5c8fe1ffd622e") {
+	if ($[0] !== "487a2055e45cbfcdfeb0dfca78f86f0618f64602e19388a1a5bda9fa6e7197a2") {
 		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "007895f09b5a774a44cc27d8ef0328c4985b935c9b126d4ae8b5c8fe1ffd622e";
+		$[0] = "487a2055e45cbfcdfeb0dfca78f86f0618f64602e19388a1a5bda9fa6e7197a2";
 	}
 	const { value, isSyncingRef } = t0;
 	const [editor] = useLexicalComposerContext();
@@ -77,6 +86,428 @@ function ExternalStateSync(t0) {
 	React.useEffect(t1, t2);
 	return null;
 }
+function SidebarFloatingTextToolbar() {
+	const $ = c(66);
+	if ($[0] !== "487a2055e45cbfcdfeb0dfca78f86f0618f64602e19388a1a5bda9fa6e7197a2") {
+		for (let $i = 0; $i < 66; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "487a2055e45cbfcdfeb0dfca78f86f0618f64602e19388a1a5bda9fa6e7197a2";
+	}
+	const [editor] = useLexicalComposerContext();
+	const [open, setOpen] = React.useState(false);
+	const [selectedText, setSelectedText] = React.useState("");
+	const [linkTarget, setLinkTarget] = React.useState(null);
+	const [linkClickAnchor, setLinkClickAnchor] = React.useState(null);
+	let t0;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			visible: false,
+			top: 0,
+			left: 0,
+			activeFormats: 0
+		};
+		$[1] = t0;
+	} else t0 = $[1];
+	const [toolbarState, setToolbarState] = React.useState(t0);
+	const lastSelectionRef = React.useRef(null);
+	let t1;
+	if ($[2] !== editor || $[3] !== open) {
+		t1 = () => {
+			const root = editor.getRootElement();
+			const nativeSelection = window.getSelection();
+			if (!root || !nativeSelection || nativeSelection.rangeCount === 0 || nativeSelection.isCollapsed) {
+				setToolbarState((state) => ({
+					...state,
+					visible: open
+				}));
+				return;
+			}
+			if (!root.contains(nativeSelection.anchorNode) || !root.contains(nativeSelection.focusNode)) {
+				setToolbarState((state_0) => ({
+					...state_0,
+					visible: open
+				}));
+				return;
+			}
+			const rect = nativeSelection.getRangeAt(0).getBoundingClientRect();
+			if (rect.width === 0 && rect.height === 0) return;
+			let activeFormats = 0;
+			let currentLinkTarget = null;
+			editor.getEditorState().read(() => {
+				const selection = $getSelection();
+				if (!$isRangeSelection(selection) || selection.isCollapsed()) return;
+				lastSelectionRef.current = selection.clone();
+				setSelectedText(selection.getTextContent());
+				if (selection.hasFormat("bold")) activeFormats = activeFormats | FORMAT_FLAGS.bold;
+				if (selection.hasFormat("italic")) activeFormats = activeFormats | FORMAT_FLAGS.italic;
+				let node = selection.anchor.getNode();
+				while (node) {
+					if (node.getType?.() === "link") {
+						const url = node.getURL?.();
+						currentLinkTarget = typeof url === "string" ? url : null;
+						break;
+					}
+					node = node.getParent?.();
+				}
+			});
+			setLinkTarget(currentLinkTarget);
+			setToolbarState({
+				visible: true,
+				top: rect.top - 52,
+				left: rect.left + rect.width / 2,
+				activeFormats
+			});
+		};
+		$[2] = editor;
+		$[3] = open;
+		$[4] = t1;
+	} else t1 = $[4];
+	const updateToolbar = t1;
+	let t2;
+	let t3;
+	if ($[5] !== editor || $[6] !== updateToolbar) {
+		t2 = () => {
+			const doc = editor.getRootElement()?.ownerDocument ?? document;
+			doc.addEventListener("selectionchange", updateToolbar);
+			window.addEventListener("resize", updateToolbar);
+			window.addEventListener("scroll", updateToolbar, true);
+			return () => {
+				doc.removeEventListener("selectionchange", updateToolbar);
+				window.removeEventListener("resize", updateToolbar);
+				window.removeEventListener("scroll", updateToolbar, true);
+			};
+		};
+		t3 = [editor, updateToolbar];
+		$[5] = editor;
+		$[6] = updateToolbar;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		t2 = $[7];
+		t3 = $[8];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[9] !== editor || $[10] !== updateToolbar) {
+		t4 = () => editor.registerUpdateListener(() => updateToolbar());
+		t5 = [editor, updateToolbar];
+		$[9] = editor;
+		$[10] = updateToolbar;
+		$[11] = t4;
+		$[12] = t5;
+	} else {
+		t4 = $[11];
+		t5 = $[12];
+	}
+	React.useEffect(t4, t5);
+	let t6;
+	let t7;
+	if ($[13] !== editor || $[14] !== updateToolbar) {
+		t6 = () => editor.registerRootListener((root_1) => {
+			if (!root_1) return;
+			const handleLinkClick = (event) => {
+				const target = event.target;
+				if (!(target instanceof HTMLElement)) return;
+				const anchor = target.closest("a");
+				if (!anchor || !root_1.contains(anchor)) return;
+				const href = anchor.getAttribute("href");
+				if (!href) return;
+				event.preventDefault();
+				event.stopPropagation();
+				const rect_0 = anchor.getBoundingClientRect();
+				setLinkClickAnchor({
+					top: rect_0.bottom + 8,
+					left: rect_0.left + rect_0.width / 2
+				});
+				const doc_0 = root_1.ownerDocument;
+				const range_0 = doc_0.createRange();
+				range_0.selectNodeContents(anchor);
+				const selection_0 = doc_0.getSelection();
+				selection_0?.removeAllRanges();
+				selection_0?.addRange(range_0);
+				root_1.focus();
+				setSelectedText(selection_0?.toString() ?? "");
+				setLinkTarget(href);
+				setOpen(true);
+				updateToolbar();
+			};
+			root_1.addEventListener("click", handleLinkClick);
+			return () => root_1.removeEventListener("click", handleLinkClick);
+		});
+		t7 = [editor, updateToolbar];
+		$[13] = editor;
+		$[14] = updateToolbar;
+		$[15] = t6;
+		$[16] = t7;
+	} else {
+		t6 = $[15];
+		t7 = $[16];
+	}
+	React.useEffect(t6, t7);
+	let t8;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = () => {
+			const selection_1 = $getSelection();
+			if ($isRangeSelection(selection_1) && !selection_1.isCollapsed()) return;
+			if (!lastSelectionRef.current) return;
+			$setSelection(lastSelectionRef.current.clone());
+		};
+		$[17] = t8;
+	} else t8 = $[17];
+	const restoreSelection = t8;
+	let t9;
+	if ($[18] !== editor) {
+		t9 = (formatKey) => {
+			editor.update(restoreSelection);
+			editor.dispatchCommand(FORMAT_TEXT_COMMAND, formatKey);
+		};
+		$[18] = editor;
+		$[19] = t9;
+	} else t9 = $[19];
+	const applyFormat = t9;
+	let t10;
+	if ($[20] !== editor) {
+		t10 = (target_0, text) => {
+			editor.update(() => {
+				restoreSelection();
+				if (target_0 === null) {
+					editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+					return;
+				}
+				if (typeof text !== "string") {
+					editor.dispatchCommand(TOGGLE_LINK_COMMAND, target_0);
+					return;
+				}
+				const selection_2 = $getSelection();
+				if (!$isRangeSelection(selection_2)) return;
+				const linkNode = $createLinkNode(target_0);
+				linkNode.append($createTextNode(text));
+				selection_2.insertNodes([linkNode]);
+			});
+			setOpen(false);
+			setLinkClickAnchor(null);
+		};
+		$[20] = editor;
+		$[21] = t10;
+	} else t10 = $[21];
+	const applyTarget = t10;
+	let t11;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = (nextOpen) => {
+			setOpen(nextOpen);
+			if (!nextOpen) setLinkClickAnchor(null);
+		};
+		$[22] = t11;
+	} else t11 = $[22];
+	const handleOpenChange = t11;
+	const handleMouseDown = _temp;
+	if (linkClickAnchor) {
+		let t12;
+		if ($[23] !== linkClickAnchor.left || $[24] !== linkClickAnchor.top) {
+			t12 = /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				"aria-hidden": "true",
+				tabIndex: -1,
+				className: "fixed size-1 min-w-0 p-0 opacity-0",
+				style: {
+					top: linkClickAnchor.top,
+					left: linkClickAnchor.left
+				}
+			});
+			$[23] = linkClickAnchor.left;
+			$[24] = linkClickAnchor.top;
+			$[25] = t12;
+		} else t12 = $[25];
+		let t13;
+		if ($[26] !== applyTarget) {
+			t13 = () => applyTarget(null);
+			$[26] = applyTarget;
+			$[27] = t13;
+		} else t13 = $[27];
+		let t14;
+		if ($[28] !== applyTarget || $[29] !== linkTarget || $[30] !== open || $[31] !== selectedText || $[32] !== t12 || $[33] !== t13) {
+			t14 = /* @__PURE__ */ jsx(TextLinkPopover, {
+				open,
+				onOpenChange: handleOpenChange,
+				trigger: t12,
+				text: selectedText,
+				target: linkTarget,
+				onSave: applyTarget,
+				onUnlink: t13
+			});
+			$[28] = applyTarget;
+			$[29] = linkTarget;
+			$[30] = open;
+			$[31] = selectedText;
+			$[32] = t12;
+			$[33] = t13;
+			$[34] = t14;
+		} else t14 = $[34];
+		return t14;
+	}
+	if (!toolbarState.visible) return null;
+	let t12;
+	if ($[35] !== toolbarState.left || $[36] !== toolbarState.top) {
+		t12 = {
+			top: toolbarState.top,
+			left: toolbarState.left
+		};
+		$[35] = toolbarState.left;
+		$[36] = toolbarState.top;
+		$[37] = t12;
+	} else t12 = $[37];
+	const t13 = toolbarState.activeFormats & FORMAT_FLAGS.bold ? "on" : "off";
+	const t14 = !!(toolbarState.activeFormats & FORMAT_FLAGS.bold);
+	let t15;
+	if ($[38] !== applyFormat) {
+		t15 = () => applyFormat("bold");
+		$[38] = applyFormat;
+		$[39] = t15;
+	} else t15 = $[39];
+	let t16;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(Bold, {});
+		$[40] = t16;
+	} else t16 = $[40];
+	let t17;
+	if ($[41] !== t13 || $[42] !== t14 || $[43] !== t15) {
+		t17 = /* @__PURE__ */ jsx(Toggle, {
+			"data-state": t13,
+			pressed: t14,
+			variant: "default",
+			size: "sm",
+			className: "h-7 min-w-7 px-1.5",
+			"aria-label": "Bold",
+			onPressedChange: t15,
+			children: t16
+		});
+		$[41] = t13;
+		$[42] = t14;
+		$[43] = t15;
+		$[44] = t17;
+	} else t17 = $[44];
+	const t18 = toolbarState.activeFormats & FORMAT_FLAGS.italic ? "on" : "off";
+	const t19 = !!(toolbarState.activeFormats & FORMAT_FLAGS.italic);
+	let t20;
+	if ($[45] !== applyFormat) {
+		t20 = () => applyFormat("italic");
+		$[45] = applyFormat;
+		$[46] = t20;
+	} else t20 = $[46];
+	let t21;
+	if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = /* @__PURE__ */ jsx(Italic, {});
+		$[47] = t21;
+	} else t21 = $[47];
+	let t22;
+	if ($[48] !== t18 || $[49] !== t19 || $[50] !== t20) {
+		t22 = /* @__PURE__ */ jsx(Toggle, {
+			"data-state": t18,
+			pressed: t19,
+			variant: "default",
+			size: "sm",
+			className: "h-7 min-w-7 px-1.5",
+			"aria-label": "Italic",
+			onPressedChange: t20,
+			children: t21
+		});
+		$[48] = t18;
+		$[49] = t19;
+		$[50] = t20;
+		$[51] = t22;
+	} else t22 = $[51];
+	let t23;
+	if ($[52] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "sm",
+			className: "text-foreground hover:text-foreground h-7 min-w-7 px-1.5"
+		});
+		$[52] = t23;
+	} else t23 = $[52];
+	let t24;
+	if ($[53] !== applyTarget) {
+		t24 = () => applyTarget(null);
+		$[53] = applyTarget;
+		$[54] = t24;
+	} else t24 = $[54];
+	let t25;
+	if ($[55] !== applyTarget || $[56] !== linkTarget || $[57] !== open || $[58] !== selectedText || $[59] !== t24) {
+		t25 = /* @__PURE__ */ jsx(TextLinkPopover, {
+			open,
+			onOpenChange: handleOpenChange,
+			trigger: t23,
+			text: selectedText,
+			target: linkTarget,
+			onSave: applyTarget,
+			onUnlink: t24
+		});
+		$[55] = applyTarget;
+		$[56] = linkTarget;
+		$[57] = open;
+		$[58] = selectedText;
+		$[59] = t24;
+		$[60] = t25;
+	} else t25 = $[60];
+	let t26;
+	if ($[61] !== t12 || $[62] !== t17 || $[63] !== t22 || $[64] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(FloatingToolbar, {
+			onMouseDown: handleMouseDown,
+			className: "fixed z-50 gap-0.5 rounded-lg p-1 shadow-lg",
+			style: t12,
+			children: [
+				t17,
+				t22,
+				t25
+			]
+		});
+		$[61] = t12;
+		$[62] = t17;
+		$[63] = t22;
+		$[64] = t25;
+		$[65] = t26;
+	} else t26 = $[65];
+	return t26;
+}
+function _temp(event_0) {
+	const target_1 = event_0.target;
+	if (target_1 instanceof HTMLElement && target_1.closest("input, select, textarea")) return;
+	event_0.preventDefault();
+}
+function PasteUrlAsLinkHandler() {
+	const $ = c(4);
+	if ($[0] !== "487a2055e45cbfcdfeb0dfca78f86f0618f64602e19388a1a5bda9fa6e7197a2") {
+		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "487a2055e45cbfcdfeb0dfca78f86f0618f64602e19388a1a5bda9fa6e7197a2";
+	}
+	const [editor] = useLexicalComposerContext();
+	let t0;
+	let t1;
+	if ($[1] !== editor) {
+		t0 = () => editor.registerCommand(PASTE_COMMAND, (event) => {
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection) || selection.isCollapsed()) return false;
+			if (!("clipboardData" in event) || !event.clipboardData) return false;
+			const url = event.clipboardData.getData("text/plain").trim();
+			if (!isHttpTextLinkTarget(url)) return false;
+			event.preventDefault();
+			editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+			return true;
+		}, COMMAND_PRIORITY_LOW);
+		t1 = [editor];
+		$[1] = editor;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	React.useEffect(t0, t1);
+	return null;
+}
 function SidebarLexicalEditor({ id, value, onChange, onFocus, onBlur }) {
 	const timerRef = React.useRef(null);
 	const onChangeRef = React.useRef(onChange);
@@ -115,19 +546,22 @@ function SidebarLexicalEditor({ id, value, onChange, onFocus, onBlur }) {
 				ignoreSelectionChange: true
 			}),
 			/* @__PURE__ */ jsx(HistoryPlugin, {}),
+			/* @__PURE__ */ jsx(LinkPlugin, {}),
 			/* @__PURE__ */ jsx(ExternalStateSync, {
 				value,
 				isSyncingRef
 			}),
-			/* @__PURE__ */ jsx(EnterAsLineBreakHandler, {})
+			/* @__PURE__ */ jsx(EnterAsLineBreakHandler, {}),
+			/* @__PURE__ */ jsx(PasteUrlAsLinkHandler, {}),
+			/* @__PURE__ */ jsx(SidebarFloatingTextToolbar, {})
 		]
 	});
 }
 function LexicalErrorBoundary(t0) {
 	const $ = c(3);
-	if ($[0] !== "007895f09b5a774a44cc27d8ef0328c4985b935c9b126d4ae8b5c8fe1ffd622e") {
+	if ($[0] !== "487a2055e45cbfcdfeb0dfca78f86f0618f64602e19388a1a5bda9fa6e7197a2") {
 		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "007895f09b5a774a44cc27d8ef0328c4985b935c9b126d4ae8b5c8fe1ffd622e";
+		$[0] = "487a2055e45cbfcdfeb0dfca78f86f0618f64602e19388a1a5bda9fa6e7197a2";
 	}
 	const { children } = t0;
 	let t1;