camox 0.31.5 → 0.32.0

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

@@ -1,4 +1,5 @@
 import { useFrame } from "../../../features/preview/components/Frame.js";
+import { isHttpTextLinkTarget } from "../../lib/textLinks.js";
 import { lexicalStateToMarkdown } from "../../lib/lexicalState.js";
 import { createEditorConfig, normalizeLexicalState } from "./editorConfig.js";
 import { InlineContentEditable } from "./InlineContentEditable.js";
@@ -6,19 +7,21 @@ import { SelectionBroadcaster } from "./SelectionBroadcaster.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { 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, KEY_ESCAPE_COMMAND } from "lexical";
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, INSERT_LINE_BREAK_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, PASTE_COMMAND } from "lexical";
 
 //#region src/core/components/lexical/InlineLexicalEditor.tsx
 function ExternalStateSync(t0) {
 	const $ = c(8);
-	if ($[0] !== "4a0a85f4e9100a4a1fff0d37d18bcca0d7826f263ae50ef5a99743e122c031e5") {
+	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
 		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4a0a85f4e9100a4a1fff0d37d18bcca0d7826f263ae50ef5a99743e122c031e5";
+		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
 	}
 	const { externalState } = t0;
 	const [editor] = useLexicalComposerContext();
@@ -75,9 +78,9 @@ function ExternalStateSync(t0) {
 }
 function EscapeHandler() {
 	const $ = c(4);
-	if ($[0] !== "4a0a85f4e9100a4a1fff0d37d18bcca0d7826f263ae50ef5a99743e122c031e5") {
+	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4a0a85f4e9100a4a1fff0d37d18bcca0d7826f263ae50ef5a99743e122c031e5";
+		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
 	}
 	const [editor] = useLexicalComposerContext();
 	let t0;
@@ -100,9 +103,9 @@ function EscapeHandler() {
 }
 function EnterAsLineBreakHandler() {
 	const $ = c(4);
-	if ($[0] !== "4a0a85f4e9100a4a1fff0d37d18bcca0d7826f263ae50ef5a99743e122c031e5") {
+	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4a0a85f4e9100a4a1fff0d37d18bcca0d7826f263ae50ef5a99743e122c031e5";
+		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
 	}
 	const [editor] = useLexicalComposerContext();
 	let t0;
@@ -124,11 +127,42 @@ function EnterAsLineBreakHandler() {
 	React.useEffect(t0, t1);
 	return null;
 }
+function PasteUrlAsLinkHandler() {
+	const $ = c(4);
+	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
+		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
+	}
+	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 (!url || !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 FocusBlurHandler(t0) {
 	const $ = c(6);
-	if ($[0] !== "4a0a85f4e9100a4a1fff0d37d18bcca0d7826f263ae50ef5a99743e122c031e5") {
+	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
 		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4a0a85f4e9100a4a1fff0d37d18bcca0d7826f263ae50ef5a99743e122c031e5";
+		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
 	}
 	const { onFocus, onBlur } = t0;
 	const [editor] = useLexicalComposerContext();
@@ -161,6 +195,37 @@ function FocusBlurHandler(t0) {
 	React.useEffect(t1, t2);
 	return null;
 }
+function LinkStyleInjector() {
+	const $ = c(4);
+	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
+		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
+	}
+	const [editor] = useLexicalComposerContext();
+	let t0;
+	let t1;
+	if ($[1] !== editor) {
+		t0 = () => editor.registerRootListener(_temp);
+		t1 = [editor];
+		$[1] = editor;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	React.useEffect(t0, t1);
+	return null;
+}
+function _temp(root) {
+	if (!root) return;
+	const doc = root.ownerDocument;
+	if (doc.getElementById("camox-editable-text-link-styles")) return;
+	const style = doc.createElement("style");
+	style.id = "camox-editable-text-link-styles";
+	style.textContent = ".camox-text-link { text-decoration-line: underline; }";
+	doc.head.appendChild(style);
+}
 function InlineLexicalEditor({ initialState, externalState, onChange, onFocus, onBlur }) {
 	const { window: iframeWindow } = useFrame();
 	const timerRef = React.useRef(null);
@@ -203,22 +268,25 @@ function InlineLexicalEditor({ initialState, externalState, onChange, onFocus, o
 				ignoreSelectionChange: true
 			}),
 			/* @__PURE__ */ jsx(HistoryPlugin, {}),
+			/* @__PURE__ */ jsx(LinkPlugin, {}),
 			/* @__PURE__ */ jsx(ExternalStateSync, { externalState }),
 			/* @__PURE__ */ jsx(EscapeHandler, {}),
 			/* @__PURE__ */ jsx(EnterAsLineBreakHandler, {}),
+			/* @__PURE__ */ jsx(PasteUrlAsLinkHandler, {}),
 			/* @__PURE__ */ jsx(FocusBlurHandler, {
 				onFocus: handleFocus,
 				onBlur: handleBlur
 			}),
+			/* @__PURE__ */ jsx(LinkStyleInjector, {}),
 			iframeWindow && /* @__PURE__ */ jsx(SelectionBroadcaster, { targetWindow: iframeWindow })
 		]
 	});
 }
 function LexicalErrorBoundary(t0) {
 	const $ = c(3);
-	if ($[0] !== "4a0a85f4e9100a4a1fff0d37d18bcca0d7826f263ae50ef5a99743e122c031e5") {
+	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
 		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "4a0a85f4e9100a4a1fff0d37d18bcca0d7826f263ae50ef5a99743e122c031e5";
+		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
 	}
 	const { children } = t0;
 	let t1;

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

@@ -2,18 +2,33 @@ import { isOverlayMessage, postOverlayMessage } from "../../../features/preview/
 import { TEXT_MODIFIERS } from "../../lib/modifiers.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
+import { $createLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND } from "lexical";
+import { $createTextNode, $getSelection, $isRangeSelection, $setSelection, FORMAT_TEXT_COMMAND } from "lexical";
 
 //#region src/core/components/lexical/SelectionBroadcaster.tsx
+function getLinkTargetFromSelection() {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection)) return null;
+	let node = selection.anchor.getNode();
+	while (node) {
+		if (node.getType?.() === "link") {
+			const url = node.getURL?.();
+			return typeof url === "string" ? url : null;
+		}
+		node = node.getParent?.();
+	}
+	return null;
+}
 function SelectionBroadcaster(t0) {
-	const $ = c(13);
-	if ($[0] !== "f181f408b72db1d040043499cda238045ef0e0efdc3d9844365e16efc5215a41") {
-		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "f181f408b72db1d040043499cda238045ef0e0efdc3d9844365e16efc5215a41";
+	const $ = c(18);
+	if ($[0] !== "e89fc1c958f4e83679744b18d31c960a1ed541e1ba675eee3f5a0ecee772b5f2") {
+		for (let $i = 0; $i < 18; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "e89fc1c958f4e83679744b18d31c960a1ed541e1ba675eee3f5a0ecee772b5f2";
 	}
 	const { targetWindow } = t0;
 	const [editor] = useLexicalComposerContext();
+	const lastTextSelectionRef = React.useRef(null);
 	let t1;
 	if ($[1] !== editor || $[2] !== targetWindow) {
 		t1 = () => {
@@ -22,23 +37,30 @@ function SelectionBroadcaster(t0) {
 				postOverlayMessage({
 					type: "CAMOX_TEXT_SELECTION_STATE",
 					hasSelection: false,
-					activeFormats: 0
+					activeFormats: 0,
+					linkTarget: null,
+					selectedText: ""
 				});
 				return;
 			}
 			let format = 0;
+			let linkTarget = null;
 			editor.getEditorState().read(() => {
 				const selection = $getSelection();
 				if (!$isRangeSelection(selection)) return;
+				lastTextSelectionRef.current = selection.clone();
 				for (const modifier of Object.values(TEXT_MODIFIERS)) {
 					const key = modifier === TEXT_MODIFIERS.bold ? "bold" : "italic";
 					if (selection.hasFormat(key)) format = format | modifier.formatFlag;
 				}
+				linkTarget = getLinkTargetFromSelection();
 			});
 			postOverlayMessage({
 				type: "CAMOX_TEXT_SELECTION_STATE",
 				hasSelection: true,
-				activeFormats: format
+				activeFormats: format,
+				linkTarget,
+				selectedText: nativeSelection?.toString() ?? ""
 			});
 		};
 		$[1] = editor;
@@ -68,21 +90,33 @@ function SelectionBroadcaster(t0) {
 	let t4;
 	let t5;
 	if ($[8] !== broadcastSelection || $[9] !== editor || $[10] !== targetWindow) {
-		t4 = () => {
-			const handleMessage = (event) => {
-				const data = event.data;
-				if (!isOverlayMessage(data) || data.type !== "CAMOX_FORMAT_TEXT") return;
-				const root = editor.getRootElement();
-				const nativeSelection_0 = targetWindow.getSelection();
-				if (!root || !nativeSelection_0 || nativeSelection_0.rangeCount === 0) return;
-				if (!root.contains(nativeSelection_0.anchorNode)) return;
+		t4 = () => editor.registerRootListener((root) => {
+			if (!root) return;
+			const handleLinkClick = (event) => {
+				const target = event.target;
+				if (!(target instanceof HTMLElement)) return;
+				const anchor = target.closest("a");
+				if (!anchor || !root.contains(anchor)) return;
+				const href = anchor.getAttribute("href");
+				if (!href) return;
+				event.preventDefault();
+				event.stopPropagation();
+				const range = targetWindow.document.createRange();
+				range.selectNodeContents(anchor);
+				const selection_0 = targetWindow.getSelection();
+				selection_0?.removeAllRanges();
+				selection_0?.addRange(range);
 				root.focus();
-				editor.dispatchCommand(FORMAT_TEXT_COMMAND, data.formatKey);
-				setTimeout(broadcastSelection, 10);
+				broadcastSelection();
+				postOverlayMessage({
+					type: "CAMOX_OPEN_TEXT_LINK_POPOVER",
+					target: href,
+					text: selection_0?.toString() ?? ""
+				});
 			};
-			targetWindow.addEventListener("message", handleMessage);
-			return () => targetWindow.removeEventListener("message", handleMessage);
-		};
+			root.addEventListener("click", handleLinkClick);
+			return () => root.removeEventListener("click", handleLinkClick);
+		});
 		t5 = [
 			editor,
 			targetWindow,
@@ -98,6 +132,58 @@ function SelectionBroadcaster(t0) {
 		t5 = $[12];
 	}
 	React.useEffect(t4, t5);
+	let t6;
+	let t7;
+	if ($[13] !== broadcastSelection || $[14] !== editor || $[15] !== targetWindow) {
+		t6 = () => {
+			const handleMessage = (event_0) => {
+				const data = event_0.data;
+				if (!isOverlayMessage(data) || data.type !== "CAMOX_FORMAT_TEXT" && data.type !== "CAMOX_TOGGLE_TEXT_LINK") return;
+				const root_0 = editor.getRootElement();
+				const nativeSelection_0 = targetWindow.getSelection();
+				if (!root_0 || !nativeSelection_0 || nativeSelection_0.rangeCount === 0) return;
+				if (!root_0.contains(nativeSelection_0.anchorNode)) return;
+				root_0.focus();
+				editor.update(() => {
+					const selection_1 = $getSelection();
+					if ($isRangeSelection(selection_1) && !selection_1.isCollapsed()) {
+						lastTextSelectionRef.current = selection_1.clone();
+						return;
+					}
+					if (lastTextSelectionRef.current) $setSelection(lastTextSelectionRef.current.clone());
+				});
+				if (data.type === "CAMOX_FORMAT_TEXT") editor.dispatchCommand(FORMAT_TEXT_COMMAND, data.formatKey);
+				else if (data.target === null) editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+				else if (typeof data.text === "string") {
+					const target_0 = data.target;
+					editor.update(() => {
+						const selection_2 = $getSelection();
+						if (!$isRangeSelection(selection_2)) return;
+						const linkNode = $createLinkNode(target_0);
+						linkNode.append($createTextNode(data.text));
+						selection_2.insertNodes([linkNode]);
+					});
+				} else editor.dispatchCommand(TOGGLE_LINK_COMMAND, data.target);
+				setTimeout(broadcastSelection, 10);
+			};
+			targetWindow.addEventListener("message", handleMessage);
+			return () => targetWindow.removeEventListener("message", handleMessage);
+		};
+		t7 = [
+			editor,
+			targetWindow,
+			broadcastSelection
+		];
+		$[13] = broadcastSelection;
+		$[14] = editor;
+		$[15] = targetWindow;
+		$[16] = t6;
+		$[17] = t7;
+	} else {
+		t6 = $[16];
+		t7 = $[17];
+	}
+	React.useEffect(t6, t7);
 	return null;
 }