camox 0.31.4 → 0.32.0

package/dist/core/lib/lexicalReact.js

@@ -1,35 +1,70 @@
-import "react";
+import { getPageIdFromTextLinkTarget, isHttpTextLinkTarget, isValidTextLinkTarget, resolveTextLinkHref, shouldOpenTextLinkInNewTab } from "./textLinks.js";
+import * as React from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 
 //#region src/core/lib/lexicalReact.tsx
 /**
-* Parse a markdown string with **bold** and *italic* into React nodes.
+* Parse a markdown string with **bold**, *italic*, and text links into React nodes.
 * Falls back to rendering the raw string if it's not a string value.
 */
-function markdownToReactNodes(value) {
+function markdownToReactNodes(value, options = {}) {
 	if (typeof value !== "string") return null;
 	if (!value) return null;
-	const regex = /(\*{1,3})((?:(?!\1).)+)\1/g;
 	const parts = [];
-	let lastIndex = 0;
-	let match;
 	let key = 0;
+	const fallbackHref = options.fallbackHref ?? "#";
 	const pushWithLineBreaks = (text) => {
 		text.split("\n").forEach((line, i) => {
 			if (i > 0) parts.push(/* @__PURE__ */ jsx("br", {}, key++));
 			if (line) parts.push(line);
 		});
 	};
-	while ((match = regex.exec(value)) !== null) {
-		if (match.index > lastIndex) pushWithLineBreaks(value.slice(lastIndex, match.index));
-		const stars = match[1].length;
-		const content = match[2];
-		if (stars === 3) parts.push(/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx("em", { children: content }) }, key++));
-		else if (stars === 2) parts.push(/* @__PURE__ */ jsx("strong", { children: content }, key++));
-		else parts.push(/* @__PURE__ */ jsx("em", { children: content }, key++));
-		lastIndex = match.index + match[0].length;
+	const pushFormatted = (text) => {
+		const regex = /(\*{1,3})((?:(?!\1).)+)\1/g;
+		let lastIndex = 0;
+		let match;
+		while ((match = regex.exec(text)) !== null) {
+			if (match.index > lastIndex) pushWithLineBreaks(text.slice(lastIndex, match.index));
+			const stars = match[1].length;
+			const content = match[2];
+			if (stars === 3) {
+				const emphasis = options.components?.emphasis?.({ children: content }) ?? /* @__PURE__ */ jsx("em", { children: content });
+				parts.push(/* @__PURE__ */ jsx(React.Fragment, { children: options.components?.strong?.({ children: emphasis }) ?? /* @__PURE__ */ jsx("strong", { children: emphasis }) }, key++));
+			} else if (stars === 2) parts.push(/* @__PURE__ */ jsx(React.Fragment, { children: options.components?.strong?.({ children: content }) ?? /* @__PURE__ */ jsx("strong", { children: content }) }, key++));
+			else parts.push(/* @__PURE__ */ jsx(React.Fragment, { children: options.components?.emphasis?.({ children: content }) ?? /* @__PURE__ */ jsx("em", { children: content }) }, key++));
+			lastIndex = match.index + match[0].length;
+		}
+		if (lastIndex < text.length) pushWithLineBreaks(text.slice(lastIndex));
+	};
+	const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+	let lastLinkIndex = 0;
+	let linkMatch;
+	while ((linkMatch = linkRegex.exec(value)) !== null) {
+		if (linkMatch.index > lastLinkIndex) pushFormatted(value.slice(lastLinkIndex, linkMatch.index));
+		const [, label, target] = linkMatch;
+		const href = isValidTextLinkTarget(target) ? resolveTextLinkHref(target, options.pages, fallbackHref) : null;
+		if (href) {
+			const openInNewTab = shouldOpenTextLinkInNewTab(target);
+			const linkProps = {
+				href,
+				target: openInNewTab ? "_blank" : void 0,
+				rel: openInNewTab ? "noreferrer" : void 0,
+				children: label
+			};
+			const linkData = {
+				target,
+				href,
+				external: isHttpTextLinkTarget(target),
+				pageId: getPageIdFromTextLinkTarget(target) ?? void 0
+			};
+			parts.push(/* @__PURE__ */ jsx(React.Fragment, { children: options.components?.link?.(linkProps, linkData) ?? /* @__PURE__ */ jsx("a", {
+				...linkProps,
+				style: { textDecorationLine: "underline" }
+			}) }, key++));
+		} else pushFormatted(label);
+		lastLinkIndex = linkMatch.index + linkMatch[0].length;
 	}
-	if (lastIndex < value.length) pushWithLineBreaks(value.slice(lastIndex));
+	if (lastLinkIndex < value.length) pushFormatted(value.slice(lastLinkIndex));
 	if (parts.length === 0) return value;
 	return /* @__PURE__ */ jsx(Fragment, { children: parts });
 }

package/dist/core/lib/lexicalState.js

@@ -1,4 +1,5 @@
 import { FORMAT_FLAGS, lexicalTextToMarkdown } from "./modifierFormats.js";
+import { isValidTextLinkTarget } from "./textLinks.js";
 
 //#region src/core/lib/lexicalState.ts
 function isLexicalState(value) {
@@ -19,6 +20,12 @@ function lexicalStateToMarkdown(serialized) {
 }
 function extractMarkdownFromNode(node) {
 	if (node.type === "text") return lexicalTextToMarkdown(node.text ?? "", node.format ?? 0);
+	if (node.type === "link") {
+		const text = (node.children ?? []).map(extractMarkdownFromNode).join("");
+		const url = typeof node.url === "string" ? node.url : "";
+		if (!url) return text;
+		return `[${text}](${url})`;
+	}
 	if (node.type === "linebreak") return "\n";
 	if (!node.children) return "";
 	const parts = [];
@@ -67,6 +74,33 @@ function parseParagraphWithLineBreaks(para) {
 	return nodes;
 }
 function parseInlineMarkdown(text) {
+	const nodes = [];
+	const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+	let lastLinkIndex = 0;
+	let linkMatch;
+	while ((linkMatch = linkRegex.exec(text)) !== null) {
+		if (linkMatch.index > lastLinkIndex) nodes.push(...parseFormattedText(text.slice(lastLinkIndex, linkMatch.index)));
+		const [, label, target] = linkMatch;
+		if (isValidTextLinkTarget(target)) nodes.push({
+			children: parseFormattedText(label),
+			direction: "ltr",
+			format: "",
+			indent: 0,
+			rel: null,
+			target: null,
+			title: null,
+			type: "link",
+			url: target,
+			version: 1
+		});
+		else nodes.push(...parseFormattedText(label));
+		lastLinkIndex = linkMatch.index + linkMatch[0].length;
+	}
+	if (lastLinkIndex < text.length) nodes.push(...parseFormattedText(text.slice(lastLinkIndex)));
+	if (nodes.length === 0) return parseFormattedText(text);
+	return nodes;
+}
+function parseFormattedText(text) {
 	const segments = [];
 	const regex = /(\*{1,3})((?:(?!\1).)+)\1/g;
 	let lastIndex = 0;

package/dist/core/lib/textLinks.js

@@ -0,0 +1,28 @@
+//#region src/core/lib/textLinks.ts
+const PAGE_TEXT_LINK_PREFIX = "camox:page:";
+function getPageIdFromTextLinkTarget(target) {
+	if (!target.startsWith("camox:page:")) return null;
+	const pageId = target.slice(11);
+	if (!pageId) return null;
+	return pageId;
+}
+function createPageTextLinkTarget(pageId) {
+	return `${PAGE_TEXT_LINK_PREFIX}${pageId}`;
+}
+function isHttpTextLinkTarget(target) {
+	return /^https?:\/\//i.test(target);
+}
+function isValidTextLinkTarget(target) {
+	return getPageIdFromTextLinkTarget(target) != null || isHttpTextLinkTarget(target);
+}
+function resolveTextLinkHref(target, pages, fallbackHref) {
+	const pageId = getPageIdFromTextLinkTarget(target);
+	if (pageId == null) return isHttpTextLinkTarget(target) ? target : null;
+	return (pages?.find((p) => String(p.id) === pageId))?.fullPath ?? fallbackHref;
+}
+function shouldOpenTextLinkInNewTab(target) {
+	return isHttpTextLinkTarget(target);
+}
+
+//#endregion
+export { createPageTextLinkTarget, getPageIdFromTextLinkTarget, isHttpTextLinkTarget, isValidTextLinkTarget, resolveTextLinkHref, shouldOpenTextLinkInNewTab };

package/dist/features/preview/components/FieldToolbar.js

@@ -3,6 +3,7 @@ import { useIsPreviewSheetOpen } from "./PreviewSideSheet.js";
 import { cn, formatShortcut } from "../../../lib/utils.js";
 import { isOverlayMessage } from "../overlayMessages.js";
 import { FORMAT_FLAGS } from "../../../core/lib/modifierFormats.js";
+import { TextLinkPopover } from "../../../core/components/lexical/TextLinkPopover.js";
 import { useCurrentItemActions } from "./useRepeatableItemActions.js";
 import { formatFieldName } from "./ItemFieldsEditor.js";
 import { c } from "react/compiler-runtime";
@@ -32,25 +33,39 @@ const FORMAT_BUTTONS = [{
 	shortcut: "⌘ I"
 }];
 const FieldToolbar = () => {
-	const $ = c(28);
-	if ($[0] !== "a34e7a229eb426498bf253b287fe77f34bd074a248fe59749809701f61b66f8c") {
-		for (let $i = 0; $i < 28; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "a34e7a229eb426498bf253b287fe77f34bd074a248fe59749809701f61b66f8c";
+	const $ = c(38);
+	if ($[0] !== "8a2b2d9ef81221d4535d05947c07828197adc9a5cdfe31ce4861c6c95ece3e43") {
+		for (let $i = 0; $i < 38; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "8a2b2d9ef81221d4535d05947c07828197adc9a5cdfe31ce4861c6c95ece3e43";
 	}
 	const iframeElement = useSelector(previewStore, _temp);
 	const selection = useSelector(previewStore, _temp2);
 	const isAnySideSheetOpen = useIsPreviewSheetOpen();
 	const [hasSelection, setHasSelection] = React.useState(false);
 	const [activeFormats, setActiveFormats] = React.useState(0);
+	const [linkTarget, setLinkTarget] = React.useState(null);
+	const [selectedText, setSelectedText] = React.useState("");
+	const [linkPopoverOpen, setLinkPopoverOpen] = React.useState(false);
 	let t0;
 	let t1;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = () => {
 			const handleMessage = (event) => {
 				const data = event.data;
-				if (!isOverlayMessage(data) || data.type !== "CAMOX_TEXT_SELECTION_STATE") return;
-				setHasSelection(data.hasSelection);
-				setActiveFormats(data.activeFormats);
+				if (!isOverlayMessage(data)) return;
+				if (data.type === "CAMOX_TEXT_SELECTION_STATE") {
+					setHasSelection(data.hasSelection);
+					setActiveFormats(data.activeFormats);
+					setLinkTarget(data.linkTarget);
+					setSelectedText(data.selectedText);
+					return;
+				}
+				if (data.type === "CAMOX_OPEN_TEXT_LINK_POPOVER") {
+					setHasSelection(true);
+					setLinkTarget(data.target);
+					setSelectedText(data.text);
+					setLinkPopoverOpen(true);
+				}
 			};
 			window.addEventListener("message", handleMessage);
 			return () => window.removeEventListener("message", handleMessage);
@@ -75,51 +90,83 @@ const FieldToolbar = () => {
 		$[4] = t2;
 	} else t2 = $[4];
 	const sendFormat = t2;
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (open) => {
+			setLinkPopoverOpen(open);
+		};
+		$[5] = t3;
+	} else t3 = $[5];
+	const handleLinkPopoverOpenChange = t3;
+	let t4;
+	if ($[6] !== iframeElement?.contentWindow) {
+		t4 = (target, text) => {
+			iframeElement?.contentWindow?.postMessage({
+				type: "CAMOX_TOGGLE_TEXT_LINK",
+				target,
+				text
+			}, "*");
+			setLinkPopoverOpen(false);
+		};
+		$[6] = iframeElement?.contentWindow;
+		$[7] = t4;
+	} else t4 = $[7];
+	const sendTextLink = t4;
+	let t5;
+	if ($[8] !== sendTextLink) {
+		t5 = () => {
+			sendTextLink(null);
+		};
+		$[8] = sendTextLink;
+		$[9] = t5;
+	} else t5 = $[9];
+	const unlinkText = t5;
 	const isOnField = selection?.type === "block-field" || selection?.type === "item-field";
 	const isOnItemField = selection?.type === "item-field";
 	const isVisible = isOnField && !isAnySideSheetOpen;
 	const { canAdd, addItem, canRemove, removeItem, currentItem } = useCurrentItemActions(isOnItemField ? selection.blockId : null, isOnItemField ? selection.itemId : null);
-	let t3;
-	if ($[5] !== selection) {
-		t3 = () => {
+	let t6;
+	if ($[10] !== selection) {
+		t6 = () => {
 			if (!selection) return;
 			previewStore.send({
 				type: "openBlockContentSheet",
 				blockId: selection.blockId
 			});
 		};
-		$[5] = selection;
-		$[6] = t3;
-	} else t3 = $[6];
-	const handleEditInForm = t3;
-	const t4 = isVisible ? "opacity-100 translate-y-0" : "opacity-0 pointer-events-none translate-y-2";
-	let t5;
-	if ($[7] !== t4) {
-		t5 = cn("bottom-17 gap-2", t4);
-		$[7] = t4;
-		$[8] = t5;
-	} else t5 = $[8];
-	let t6;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = formatShortcut({
+		$[10] = selection;
+		$[11] = t6;
+	} else t6 = $[11];
+	const handleEditInForm = t6;
+	const handleToolbarMouseDown = _temp3;
+	const t7 = isVisible ? "opacity-100 translate-y-0" : "opacity-0 pointer-events-none translate-y-2";
+	let t8;
+	if ($[12] !== t7) {
+		t8 = cn("bottom-17 gap-2", t7);
+		$[12] = t7;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = formatShortcut({
 			key: "j",
 			withAlt: true
 		});
-		$[9] = t6;
-	} else t6 = $[9];
-	let t7;
-	if ($[10] !== handleEditInForm) {
-		t7 = /* @__PURE__ */ jsxs(Button, {
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== handleEditInForm) {
+		t10 = /* @__PURE__ */ jsxs(Button, {
 			variant: "outline",
 			onClick: handleEditInForm,
-			children: ["Edit in form", t6]
+			children: ["Edit in form", t9]
 		});
-		$[10] = handleEditInForm;
-		$[11] = t7;
-	} else t7 = $[11];
-	let t8;
-	if ($[12] !== addItem || $[13] !== canAdd || $[14] !== canRemove || $[15] !== currentItem || $[16] !== isOnItemField || $[17] !== removeItem) {
-		t8 = isOnItemField && currentItem && (canAdd || canRemove) && /* @__PURE__ */ jsx(Tooltip$1.TooltipProvider, {
+		$[15] = handleEditInForm;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== addItem || $[18] !== canAdd || $[19] !== canRemove || $[20] !== currentItem || $[21] !== isOnItemField || $[22] !== removeItem) {
+		t11 = isOnItemField && currentItem && (canAdd || canRemove) && /* @__PURE__ */ jsx(Tooltip$1.TooltipProvider, {
 			delay: 0,
 			children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [canAdd && /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [/* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
 				render: /* @__PURE__ */ jsx(Button, {
@@ -137,18 +184,18 @@ const FieldToolbar = () => {
 				children: /* @__PURE__ */ jsx(CircleMinus, {})
 			}), /* @__PURE__ */ jsxs(Tooltip$1.TooltipContent, { children: ["Remove item from ", formatFieldName(currentItem.fieldName)] })] })] })
 		});
-		$[12] = addItem;
-		$[13] = canAdd;
-		$[14] = canRemove;
-		$[15] = currentItem;
-		$[16] = isOnItemField;
-		$[17] = removeItem;
-		$[18] = t8;
-	} else t8 = $[18];
-	let t9;
-	if ($[19] !== activeFormats || $[20] !== hasSelection || $[21] !== sendFormat) {
-		t9 = hasSelection && /* @__PURE__ */ jsx(ButtonGroup, { children: FORMAT_BUTTONS.map((t10) => {
-			const { key, flag, icon: Icon, label, shortcut } = t10;
+		$[17] = addItem;
+		$[18] = canAdd;
+		$[19] = canRemove;
+		$[20] = currentItem;
+		$[21] = isOnItemField;
+		$[22] = removeItem;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== activeFormats || $[25] !== hasSelection || $[26] !== linkPopoverOpen || $[27] !== linkTarget || $[28] !== selectedText || $[29] !== sendFormat || $[30] !== sendTextLink || $[31] !== unlinkText) {
+		t12 = hasSelection && /* @__PURE__ */ jsxs(ButtonGroup, { children: [FORMAT_BUTTONS.map((t13) => {
+			const { key, flag, icon: Icon, label, shortcut } = t13;
 			const isActive = !!(activeFormats & flag);
 			return /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [/* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
 				render: /* @__PURE__ */ jsx(Toggle, {
@@ -163,30 +210,47 @@ const FieldToolbar = () => {
 				" ",
 				/* @__PURE__ */ jsx(Kbd, { children: shortcut })
 			] })] }, key);
-		}) });
-		$[19] = activeFormats;
-		$[20] = hasSelection;
-		$[21] = sendFormat;
-		$[22] = t9;
-	} else t9 = $[22];
-	let t10;
-	if ($[23] !== t5 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(FloatingToolbar, {
-			onMouseDown: _temp3,
-			className: t5,
+		}), /* @__PURE__ */ jsx(TextLinkPopover, {
+			open: linkPopoverOpen,
+			onOpenChange: handleLinkPopoverOpenChange,
+			trigger: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "icon",
+				"aria-label": "Add link"
+			}),
+			text: selectedText,
+			target: linkTarget,
+			onSave: sendTextLink,
+			onUnlink: unlinkText
+		})] });
+		$[24] = activeFormats;
+		$[25] = hasSelection;
+		$[26] = linkPopoverOpen;
+		$[27] = linkTarget;
+		$[28] = selectedText;
+		$[29] = sendFormat;
+		$[30] = sendTextLink;
+		$[31] = unlinkText;
+		$[32] = t12;
+	} else t12 = $[32];
+	let t13;
+	if ($[33] !== t10 || $[34] !== t11 || $[35] !== t12 || $[36] !== t8) {
+		t13 = /* @__PURE__ */ jsxs(FloatingToolbar, {
+			onMouseDown: handleToolbarMouseDown,
+			className: t8,
 			children: [
-				t7,
-				t8,
-				t9
+				t10,
+				t11,
+				t12
 			]
 		});
-		$[23] = t5;
-		$[24] = t7;
-		$[25] = t8;
-		$[26] = t9;
-		$[27] = t10;
-	} else t10 = $[27];
-	return t10;
+		$[33] = t10;
+		$[34] = t11;
+		$[35] = t12;
+		$[36] = t8;
+		$[37] = t13;
+	} else t13 = $[37];
+	return t13;
 };
 function _temp(state) {
 	return state.context.iframeElement;
@@ -194,8 +258,14 @@ function _temp(state) {
 function _temp2(state_0) {
 	return state_0.context.selection;
 }
-function _temp3(e) {
-	return e.preventDefault();
+function _temp3(event_0) {
+	const target_0 = event_0.target;
+	if (!(target_0 instanceof HTMLElement)) {
+		event_0.preventDefault();
+		return;
+	}
+	if (target_0.closest("input, select, textarea, button, [role='combobox']")) return;
+	event_0.preventDefault();
 }
 function _temp4() {
 	return previewStore.send({ type: "selectParent" });

package/dist/features/vite/vite.js

@@ -142,8 +142,10 @@ function camox(options) {
 					"camox > @lexical/react/LexicalComposerContext",
 					"camox > @lexical/react/LexicalContentEditable",
 					"camox > @lexical/react/LexicalHistoryPlugin",
+					"camox > @lexical/react/LexicalLinkPlugin",
 					"camox > @lexical/react/LexicalOnChangePlugin",
 					"camox > @lexical/react/LexicalRichTextPlugin",
+					"camox > @lexical/link",
 					"camox > @orpc/client",
 					"camox > @orpc/client/fetch",
 					"camox > @orpc/tanstack-query",