camox 0.39.0 → 0.41.0

package/dist/components/PlatformLabel.js

@@ -0,0 +1,62 @@
+import { PLATFORM_LABEL_CSS, bootstrapPlatform } from "../lib/platform.js";
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/PlatformLabel.tsx
+/** Both variants exist during SSR; the head bootstrap selects one before paint. */
+function PlatformLabel(t0) {
+	const $ = c(10);
+	if ($[0] !== "aae56b4e6a643d5e25aadf2956d9637046ab5dac1ced5206ee77f664834bbaa3") {
+		for (let $i = 0; $i < 10; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "aae56b4e6a643d5e25aadf2956d9637046ab5dac1ced5206ee77f664834bbaa3";
+	}
+	const { mac, other } = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[1] = t1;
+	} else t1 = $[1];
+	useLayoutEffect(bootstrapPlatform, t1);
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("style", {
+			"data-camox-studio": true,
+			children: PLATFORM_LABEL_CSS
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== mac) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: "camox-platform-mac",
+			children: mac
+		});
+		$[3] = mac;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== other) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: "camox-platform-other",
+			children: other
+		});
+		$[5] = other;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t3 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("span", { children: [
+			t2,
+			t3,
+			t4
+		] });
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+}
+
+//#endregion
+export { PlatformLabel };

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

@@ -0,0 +1,126 @@
+import { $applyNodeReplacement, $copyNode, $getSelection, $isElementNode, $isRangeSelection, $isTextNode, ElementNode } from "lexical";
+
+//#region src/core/components/lexical/GradientNode.ts
+var GradientNode = class GradientNode extends ElementNode {
+	static getType() {
+		return "gradient";
+	}
+	static clone(node) {
+		return new GradientNode(node.__key);
+	}
+	static importJSON(value) {
+		return $createGradientNode().updateFromJSON(value);
+	}
+	static importDOM() {
+		return { span: (element) => element.hasAttribute("data-camox-gradient") ? {
+			conversion: () => ({ node: $createGradientNode() }),
+			priority: 1
+		} : null };
+	}
+	createDOM() {
+		const span = document.createElement("span");
+		span.dataset.camoxGradient = "";
+		return span;
+	}
+	updateDOM() {
+		return false;
+	}
+	isInline() {
+		return true;
+	}
+	canBeEmpty() {
+		return false;
+	}
+	canInsertTextBefore() {
+		return false;
+	}
+	canInsertTextAfter() {
+		return false;
+	}
+};
+function $createGradientNode() {
+	return $applyNodeReplacement(new GradientNode());
+}
+function $getGradient(node) {
+	let current = node;
+	while (current) {
+		if (current instanceof GradientNode) return current;
+		current = current.getParent();
+	}
+	return null;
+}
+function $selectionHasGradient() {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection)) return false;
+	if (selection.isCollapsed()) return !!$getGradient(selection.anchor.getNode());
+	const texts = selection.getNodes().filter($isTextNode);
+	return texts.length > 0 && texts.every((node) => !!$getGradient(node));
+}
+/** Isolate a selected leaf without removing gradient from its unselected siblings. */
+function $removeGradientFrom(node) {
+	const gradient = $getGradient(node);
+	if (!gradient) return;
+	let branch = node;
+	while (branch.getKey() !== gradient.getKey()) {
+		const parent = branch.getParentOrThrow();
+		const before = branch.getPreviousSiblings();
+		const after = branch.getNextSiblings();
+		if (before.length) {
+			const clone = $copyNode(parent);
+			parent.insertBefore(clone);
+			clone.append(...before);
+		}
+		if (after.length) {
+			const clone = $copyNode(parent);
+			parent.insertAfter(clone);
+			clone.append(...after);
+		}
+		branch = parent;
+	}
+	for (const child of gradient.getChildren()) gradient.insertBefore(child);
+	gradient.remove();
+}
+function $toggleGradient() {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection) || selection.isCollapsed()) return;
+	const remove = $selectionHasGradient();
+	const nodes = selection.extract().filter((node) => $isTextNode(node) || node.getType() === "linebreak");
+	for (const node of nodes) {
+		if (remove) {
+			$removeGradientFrom(node);
+			continue;
+		}
+		if ($getGradient(node)) continue;
+		const previous = node.getPreviousSibling();
+		if (previous instanceof GradientNode) {
+			previous.append(node);
+			continue;
+		}
+		const gradient = $createGradientNode();
+		node.insertBefore(gradient);
+		gradient.append(node);
+	}
+}
+/** Keep one background across adjacent runs, including after formatting changes. */
+function $normalizeGradient(node) {
+	const parent = node.getParent();
+	if (parent instanceof GradientNode) {
+		for (const child of node.getChildren()) node.insertBefore(child);
+		node.remove();
+		return;
+	}
+	const next = node.getNextSibling();
+	if (next instanceof GradientNode) {
+		node.append(...next.getChildren());
+		next.remove();
+	}
+	if ($isElementNode(parent) && parent.getType() === "link" && parent.getChildrenSize() === 1) {
+		const children = node.getChildren();
+		parent.insertBefore(node);
+		parent.append(...children);
+		node.append(parent);
+	}
+}
+
+//#endregion
+export { $normalizeGradient, $selectionHasGradient, $toggleGradient, GradientNode };

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

@@ -1,7 +1,8 @@
 import { isHttpTextLinkTarget } from "../../lib/textLinks.js";
-import { useFrame } from "../../../features/preview/components/Frame.js";
 import { lexicalStateToMarkdown } from "../../lib/lexicalState.js";
+import { useFrame } from "../../../features/preview/components/Frame.js";
 import { createEditorConfig, normalizeLexicalState } from "./editorConfig.js";
+import { InlineStylesPlugin } from "./InlineStylesPlugin.js";
 import { InlineContentEditable } from "./InlineContentEditable.js";
 import { SelectionBroadcaster } from "./SelectionBroadcaster.js";
 import { c } from "react/compiler-runtime";
@@ -19,9 +20,9 @@ import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, INSERT_LINE_BRE
 //#region src/core/components/lexical/InlineLexicalEditor.tsx
 function ExternalStateSync(t0) {
 	const $ = c(8);
-	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
+	if ($[0] !== "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b") {
 		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
+		$[0] = "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b";
 	}
 	const { externalState } = t0;
 	const [editor] = useLexicalComposerContext();
@@ -78,9 +79,9 @@ function ExternalStateSync(t0) {
 }
 function EscapeHandler() {
 	const $ = c(4);
-	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
+	if ($[0] !== "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
+		$[0] = "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b";
 	}
 	const [editor] = useLexicalComposerContext();
 	let t0;
@@ -103,9 +104,9 @@ function EscapeHandler() {
 }
 function EnterAsLineBreakHandler() {
 	const $ = c(4);
-	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
+	if ($[0] !== "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
+		$[0] = "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b";
 	}
 	const [editor] = useLexicalComposerContext();
 	let t0;
@@ -129,9 +130,9 @@ function EnterAsLineBreakHandler() {
 }
 function PasteUrlAsLinkHandler() {
 	const $ = c(4);
-	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
+	if ($[0] !== "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
+		$[0] = "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b";
 	}
 	const [editor] = useLexicalComposerContext();
 	let t0;
@@ -160,9 +161,9 @@ function PasteUrlAsLinkHandler() {
 }
 function FocusBlurHandler(t0) {
 	const $ = c(6);
-	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
+	if ($[0] !== "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b") {
 		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
+		$[0] = "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b";
 	}
 	const { onFocus, onBlur } = t0;
 	const [editor] = useLexicalComposerContext();
@@ -195,40 +196,19 @@ 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 }) {
+function InlineLexicalEditor({ initialState, externalState, onChange, onFocus, onBlur, textStyle, linkStyle, pages, fallbackHref }) {
 	const { window: iframeWindow } = useFrame();
 	const timerRef = React.useRef(null);
+	const pendingMarkdownRef = React.useRef(null);
+	const onChangeRef = React.useRef(onChange);
+	onChangeRef.current = onChange;
+	const flushChange = React.useCallback(() => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = null;
+		const markdown = pendingMarkdownRef.current;
+		pendingMarkdownRef.current = null;
+		if (markdown !== null) onChangeRef.current(markdown);
+	}, []);
 	const isFocusedRef = React.useRef(false);
 	const editedDuringFocusRef = React.useRef(false);
 	const config = React.useMemo(() => createEditorConfig(initialState), []);
@@ -236,26 +216,22 @@ function InlineLexicalEditor({ initialState, externalState, onChange, onFocus, o
 		if (!isFocusedRef.current) return;
 		editedDuringFocusRef.current = true;
 		if (timerRef.current) clearTimeout(timerRef.current);
-		timerRef.current = window.setTimeout(() => {
-			onChange(lexicalStateToMarkdown(editorState.toJSON()));
-		}, 300);
-	}, [onChange]);
+		pendingMarkdownRef.current = lexicalStateToMarkdown(editorState.toJSON());
+		timerRef.current = window.setTimeout(flushChange, 300);
+	}, [flushChange]);
 	const handleFocus = React.useCallback(() => {
 		isFocusedRef.current = true;
 		editedDuringFocusRef.current = false;
 		onFocus();
 	}, [onFocus]);
 	const handleBlur = React.useCallback(() => {
+		flushChange();
 		isFocusedRef.current = false;
 		const wasEdited = editedDuringFocusRef.current;
 		editedDuringFocusRef.current = false;
 		onBlur(wasEdited);
-	}, [onBlur]);
-	React.useEffect(() => {
-		return () => {
-			if (timerRef.current) clearTimeout(timerRef.current);
-		};
-	}, []);
+	}, [onBlur, flushChange]);
+	React.useEffect(() => flushChange, [flushChange]);
 	return /* @__PURE__ */ jsxs(LexicalComposer, {
 		initialConfig: config,
 		children: [
@@ -277,16 +253,21 @@ function InlineLexicalEditor({ initialState, externalState, onChange, onFocus, o
 				onFocus: handleFocus,
 				onBlur: handleBlur
 			}),
-			/* @__PURE__ */ jsx(LinkStyleInjector, {}),
+			/* @__PURE__ */ jsx(InlineStylesPlugin, {
+				textStyle,
+				linkStyle,
+				pages,
+				fallbackHref
+			}),
 			iframeWindow && /* @__PURE__ */ jsx(SelectionBroadcaster, { targetWindow: iframeWindow })
 		]
 	});
 }
 function LexicalErrorBoundary(t0) {
 	const $ = c(3);
-	if ($[0] !== "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2") {
+	if ($[0] !== "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b") {
 		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "c4ca5d751d9d53a7ad565939bb5b4c4c82ea51c5bc23aeca481e23d8515243a2";
+		$[0] = "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b";
 	}
 	const { children } = t0;
 	let t1;

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

@@ -0,0 +1,183 @@
+import { getPageIdFromTextLinkTarget, isHttpTextLinkTarget, resolveTextLinkHref, shouldOpenTextLinkInNewTab } from "../../lib/textLinks.js";
+import { getGradientStyle, getTextAppearance } from "../../lib/textStyles.js";
+import { $normalizeGradient, GradientNode } from "./GradientNode.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { $isLinkNode } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getRoot, $isElementNode, $isTextNode } from "lexical";
+
+//#region src/core/components/lexical/InlineStylesPlugin.tsx
+const unitless = new Set([
+	"animationIterationCount",
+	"aspectRatio",
+	"borderImageOutset",
+	"borderImageSlice",
+	"borderImageWidth",
+	"boxFlex",
+	"boxFlexGroup",
+	"boxOrdinalGroup",
+	"columnCount",
+	"columns",
+	"fillOpacity",
+	"flex",
+	"flexGrow",
+	"flexPositive",
+	"flexShrink",
+	"flexNegative",
+	"flexOrder",
+	"fontWeight",
+	"gridArea",
+	"gridColumn",
+	"gridColumnEnd",
+	"gridColumnStart",
+	"gridColumnSpan",
+	"gridRow",
+	"gridRowEnd",
+	"gridRowStart",
+	"gridRowSpan",
+	"lineClamp",
+	"lineHeight",
+	"opacity",
+	"order",
+	"orphans",
+	"scale",
+	"floodOpacity",
+	"stopOpacity",
+	"strokeDasharray",
+	"strokeDashoffset",
+	"strokeMiterlimit",
+	"strokeOpacity",
+	"strokeWidth",
+	"tabSize",
+	"widows",
+	"zIndex",
+	"zoom"
+]);
+/** Only manages appearance attributes; Lexical retains ownership of the editable tree. */
+function InlineStylesPlugin(options) {
+	const $ = c(13);
+	if ($[0] !== "9e9ec32bc10d3e8c9e669fba8eed46eaf4d41dffba75b558500fddddf9ab14e2") {
+		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "9e9ec32bc10d3e8c9e669fba8eed46eaf4d41dffba75b558500fddddf9ab14e2";
+	}
+	const [editor] = useLexicalComposerContext();
+	let t0;
+	if ($[1] !== editor || $[2] !== options) {
+		t0 = () => {
+			const previous = /* @__PURE__ */ new Map();
+			const apply = function apply(dom, appearance) {
+				const old = previous.get(dom);
+				old?.classes.forEach((name) => dom.classList.remove(name));
+				old?.properties.forEach((name_0) => dom.style.removeProperty(name_0));
+				const classes = appearance.className?.split(/\s+/).filter(Boolean) ?? [];
+				classes.forEach((name_1) => dom.classList.add(name_1));
+				const properties = [];
+				for (const [key, value] of Object.entries(appearance.style ?? {})) {
+					if (value == null) continue;
+					const property = key.startsWith("--") ? key : key.replace(/[A-Z]/g, _temp).replace(/^ms-/, "-ms-");
+					const unprefixedKey = key.replace(/^(Webkit|Moz|ms|O)([A-Z])/, _temp2);
+					const cssValue = typeof value === "number" && value !== 0 && !unitless.has(unprefixedKey) && !key.startsWith("--") ? `${value}px` : String(value);
+					dom.style.setProperty(property, cssValue);
+					properties.push(property);
+				}
+				previous.set(dom, {
+					classes,
+					properties
+				});
+			};
+			const sync = function sync() {
+				editor.getEditorState().read(() => {
+					function visit(node) {
+						const dom_0 = editor.getElementByKey(node.getKey());
+						if (dom_0 && $isTextNode(node)) apply(dom_0, getTextAppearance(node.getFormat(), options));
+						if (dom_0 && node instanceof GradientNode) apply(dom_0, getGradientStyle(options));
+						if (dom_0 && $isLinkNode(node)) {
+							const target = node.getURL();
+							const href = resolveTextLinkHref(target, options.pages, options.fallbackHref ?? "#") ?? "#";
+							const appearance_0 = options.linkStyle?.({
+								target,
+								href,
+								external: isHttpTextLinkTarget(target),
+								pageId: getPageIdFromTextLinkTarget(target) ?? void 0
+							});
+							apply(dom_0, {
+								className: appearance_0?.className,
+								style: {
+									textDecorationLine: "underline",
+									...appearance_0?.style
+								}
+							});
+							dom_0.setAttribute("href", href);
+							dom_0.dataset.camoxLinkTarget = target;
+							if (shouldOpenTextLinkInNewTab(target)) {
+								dom_0.setAttribute("target", "_blank");
+								dom_0.setAttribute("rel", "noreferrer");
+							} else {
+								dom_0.removeAttribute("target");
+								dom_0.removeAttribute("rel");
+							}
+						}
+						if ($isElementNode(node)) node.getChildren().forEach(visit);
+					}
+					visit($getRoot());
+				});
+				for (const dom_1 of previous.keys()) if (!editor.getRootElement()?.contains(dom_1)) previous.delete(dom_1);
+			};
+			const unregister = editor.registerUpdateListener(sync);
+			const unregisterRoot = editor.registerRootListener(sync);
+			sync();
+			return () => {
+				unregister();
+				unregisterRoot();
+				for (const [dom_2, old_0] of previous) {
+					old_0.classes.forEach((name_2) => dom_2.classList.remove(name_2));
+					old_0.properties.forEach((name_3) => dom_2.style.removeProperty(name_3));
+				}
+			};
+		};
+		$[1] = editor;
+		$[2] = options;
+		$[3] = t0;
+	} else t0 = $[3];
+	let t1;
+	if ($[4] !== editor || $[5] !== options.fallbackHref || $[6] !== options.linkStyle || $[7] !== options.pages || $[8] !== options.textStyle) {
+		t1 = [
+			editor,
+			options.textStyle,
+			options.linkStyle,
+			options.pages,
+			options.fallbackHref
+		];
+		$[4] = editor;
+		$[5] = options.fallbackHref;
+		$[6] = options.linkStyle;
+		$[7] = options.pages;
+		$[8] = options.textStyle;
+		$[9] = t1;
+	} else t1 = $[9];
+	React.useLayoutEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[10] !== editor) {
+		t2 = () => editor.registerNodeTransform(GradientNode, $normalizeGradient);
+		t3 = [editor];
+		$[10] = editor;
+		$[11] = t2;
+		$[12] = t3;
+	} else {
+		t2 = $[11];
+		t3 = $[12];
+	}
+	React.useEffect(t2, t3);
+	return null;
+}
+function _temp2(_, _prefix, letter_0) {
+	return letter_0.toLowerCase();
+}
+function _temp(letter) {
+	return `-${letter.toLowerCase()}`;
+}
+
+//#endregion
+export { InlineStylesPlugin };