camox 0.41.1 → 0.43.0

package/dist/core/components/lexical/{GradientNode.js → HighlightNode.js}

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

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

@@ -1,4 +1,4 @@
-import { isHttpTextLinkTarget } from "../../lib/textLinks.js";
+import { isValidTextLinkTarget } from "../../lib/textLinks.js";
 import { lexicalStateToMarkdown } from "../../lib/lexicalState.js";
 import { useFrame } from "../../../features/preview/components/Frame.js";
 import { createEditorConfig, normalizeLexicalState } from "./editorConfig.js";
@@ -20,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] !== "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b") {
+	if ($[0] !== "ce0aab2d8f6174c436b3fa78439a44b23b8d509cc6b49c38f4129c459abdf4cc") {
 		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b";
+		$[0] = "ce0aab2d8f6174c436b3fa78439a44b23b8d509cc6b49c38f4129c459abdf4cc";
 	}
 	const { externalState } = t0;
 	const [editor] = useLexicalComposerContext();
@@ -79,9 +79,9 @@ function ExternalStateSync(t0) {
 }
 function EscapeHandler() {
 	const $ = c(4);
-	if ($[0] !== "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b") {
+	if ($[0] !== "ce0aab2d8f6174c436b3fa78439a44b23b8d509cc6b49c38f4129c459abdf4cc") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b";
+		$[0] = "ce0aab2d8f6174c436b3fa78439a44b23b8d509cc6b49c38f4129c459abdf4cc";
 	}
 	const [editor] = useLexicalComposerContext();
 	let t0;
@@ -104,9 +104,9 @@ function EscapeHandler() {
 }
 function EnterAsLineBreakHandler() {
 	const $ = c(4);
-	if ($[0] !== "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b") {
+	if ($[0] !== "ce0aab2d8f6174c436b3fa78439a44b23b8d509cc6b49c38f4129c459abdf4cc") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b";
+		$[0] = "ce0aab2d8f6174c436b3fa78439a44b23b8d509cc6b49c38f4129c459abdf4cc";
 	}
 	const [editor] = useLexicalComposerContext();
 	let t0;
@@ -130,9 +130,9 @@ function EnterAsLineBreakHandler() {
 }
 function PasteUrlAsLinkHandler() {
 	const $ = c(4);
-	if ($[0] !== "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b") {
+	if ($[0] !== "ce0aab2d8f6174c436b3fa78439a44b23b8d509cc6b49c38f4129c459abdf4cc") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b";
+		$[0] = "ce0aab2d8f6174c436b3fa78439a44b23b8d509cc6b49c38f4129c459abdf4cc";
 	}
 	const [editor] = useLexicalComposerContext();
 	let t0;
@@ -143,7 +143,7 @@ function PasteUrlAsLinkHandler() {
 			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;
+			if (!url || !isValidTextLinkTarget(url)) return false;
 			event.preventDefault();
 			editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
 			return true;
@@ -161,9 +161,9 @@ function PasteUrlAsLinkHandler() {
 }
 function FocusBlurHandler(t0) {
 	const $ = c(6);
-	if ($[0] !== "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b") {
+	if ($[0] !== "ce0aab2d8f6174c436b3fa78439a44b23b8d509cc6b49c38f4129c459abdf4cc") {
 		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b";
+		$[0] = "ce0aab2d8f6174c436b3fa78439a44b23b8d509cc6b49c38f4129c459abdf4cc";
 	}
 	const { onFocus, onBlur } = t0;
 	const [editor] = useLexicalComposerContext();
@@ -265,9 +265,9 @@ function InlineLexicalEditor({ initialState, externalState, onChange, onFocus, o
 }
 function LexicalErrorBoundary(t0) {
 	const $ = c(3);
-	if ($[0] !== "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b") {
+	if ($[0] !== "ce0aab2d8f6174c436b3fa78439a44b23b8d509cc6b49c38f4129c459abdf4cc") {
 		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b0541f4280871b1a808d1959e8ce88626b23577e7b86258a9337e3475a84264b";
+		$[0] = "ce0aab2d8f6174c436b3fa78439a44b23b8d509cc6b49c38f4129c459abdf4cc";
 	}
 	const { children } = t0;
 	let t1;

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

@@ -1,6 +1,6 @@
 import { getPageIdFromTextLinkTarget, isHttpTextLinkTarget, resolveTextLinkHref, shouldOpenTextLinkInNewTab } from "../../lib/textLinks.js";
-import { getGradientStyle, getTextAppearance } from "../../lib/textStyles.js";
-import { $normalizeGradient, GradientNode } from "./GradientNode.js";
+import { getHighlightStyle, getTextAppearance } from "../../lib/textStyles.js";
+import { $normalizeHighlight, HighlightNode } from "./HighlightNode.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { $isLinkNode } from "@lexical/link";
@@ -57,9 +57,9 @@ const unitless = new Set([
 /** Only manages appearance attributes; Lexical retains ownership of the editable tree. */
 function InlineStylesPlugin(options) {
 	const $ = c(13);
-	if ($[0] !== "9e9ec32bc10d3e8c9e669fba8eed46eaf4d41dffba75b558500fddddf9ab14e2") {
+	if ($[0] !== "2ac672d1b6a8ab06af1a7ad709040f99688a70d9b3bd2a117fe818c6dc8986e3") {
 		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "9e9ec32bc10d3e8c9e669fba8eed46eaf4d41dffba75b558500fddddf9ab14e2";
+		$[0] = "2ac672d1b6a8ab06af1a7ad709040f99688a70d9b3bd2a117fe818c6dc8986e3";
 	}
 	const [editor] = useLexicalComposerContext();
 	let t0;
@@ -91,7 +91,7 @@ function InlineStylesPlugin(options) {
 					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 && node instanceof HighlightNode) apply(dom_0, getHighlightStyle(options));
 						if (dom_0 && $isLinkNode(node)) {
 							const target = node.getURL();
 							const href = resolveTextLinkHref(target, options.pages, options.fallbackHref ?? "#") ?? "#";
@@ -160,7 +160,7 @@ function InlineStylesPlugin(options) {
 	let t2;
 	let t3;
 	if ($[10] !== editor) {
-		t2 = () => editor.registerNodeTransform(GradientNode, $normalizeGradient);
+		t2 = () => editor.registerNodeTransform(HighlightNode, $normalizeHighlight);
 		t3 = [editor];
 		$[10] = editor;
 		$[11] = t2;

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

@@ -1,6 +1,6 @@
 import { FORMAT_FLAGS } from "../../lib/modifierFormats.js";
 import { isOverlayMessage, postOverlayMessage } from "../../../features/preview/overlayMessages.js";
-import { $selectionHasGradient, $toggleGradient } from "./GradientNode.js";
+import { $selectionHasHighlight, $toggleHighlight } from "./HighlightNode.js";
 import { selectTextLink } from "./selectTextLink.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -24,9 +24,9 @@ function getLinkTargetFromSelection() {
 }
 function SelectionBroadcaster(t0) {
 	const $ = c(20);
-	if ($[0] !== "9b38f39cf15304b288c351ba69b5c7891a3521400640cd47c3395c47e67ae59c") {
+	if ($[0] !== "b88c574c21c23f501029bacae0b122b78516d4a0df4269eae25d68662efb6a32") {
 		for (let $i = 0; $i < 20; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "9b38f39cf15304b288c351ba69b5c7891a3521400640cd47c3395c47e67ae59c";
+		$[0] = "b88c574c21c23f501029bacae0b122b78516d4a0df4269eae25d68662efb6a32";
 	}
 	const { targetWindow } = t0;
 	const [editor] = useLexicalComposerContext();
@@ -56,7 +56,7 @@ function SelectionBroadcaster(t0) {
 					"italic",
 					"underline"
 				]) if (selection.hasFormat(key)) format = format | FORMAT_FLAGS[key];
-				if ($selectionHasGradient()) format = format | FORMAT_FLAGS.gradient;
+				if ($selectionHasHighlight()) format = format | FORMAT_FLAGS.highlight;
 				linkTarget = getLinkTargetFromSelection();
 			});
 			postOverlayMessage({
@@ -154,7 +154,7 @@ function SelectionBroadcaster(t0) {
 					if (lastTextSelectionRef.current) $setSelection(lastTextSelectionRef.current.clone());
 				});
 				if (data.type === "CAMOX_FORMAT_TEXT") {
-					if (data.formatKey === "gradient") editor.update($toggleGradient);
+					if (data.formatKey === "highlight") editor.update($toggleHighlight);
 					else if (data.formatKey === "bold" || data.formatKey === "italic" || data.formatKey === "underline") editor.dispatchCommand(FORMAT_TEXT_COMMAND, data.formatKey);
 				} else if (data.target === null) editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
 				else if (typeof data.text === "string") {

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

@@ -1,9 +1,9 @@
 import { FORMAT_FLAGS } from "../../lib/modifierFormats.js";
-import { isHttpTextLinkTarget } from "../../lib/textLinks.js";
+import { isValidTextLinkTarget } from "../../lib/textLinks.js";
 import { lexicalStateToMarkdown } from "../../lib/lexicalState.js";
 import { INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, cn } from "../../../lib/utils.js";
 import { TextLinkPopover } from "./TextLinkPopover.js";
-import { $selectionHasGradient, $toggleGradient } from "./GradientNode.js";
+import { $selectionHasHighlight, $toggleHighlight } from "./HighlightNode.js";
 import { createEditorConfig, normalizeLexicalState } from "./editorConfig.js";
 import { InlineStylesPlugin } from "./InlineStylesPlugin.js";
 import { selectTextLink } from "./selectTextLink.js";
@@ -11,7 +11,7 @@ import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { Blend, Bold, Italic, Underline } from "lucide-react";
+import { Bold, Highlighter, Italic, Underline } from "lucide-react";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 import { Toggle } from "@camox/ui/toggle";
 import { $createLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
@@ -27,9 +27,9 @@ import { $createTextNode, $getSelection, $isRangeSelection, $setSelection, COMMA
 //#region src/core/components/lexical/SidebarLexicalEditor.tsx
 function EnterAsLineBreakHandler() {
 	const $ = c(4);
-	if ($[0] !== "63fce41aab52cd282d26a73e81de9225d7bcf44f37fcaae7c81941ba12aafa05") {
+	if ($[0] !== "b2abd53d41bcf7845fda084f34768059ff9a381fdb75359c9fd3fc0de4052372") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "63fce41aab52cd282d26a73e81de9225d7bcf44f37fcaae7c81941ba12aafa05";
+		$[0] = "b2abd53d41bcf7845fda084f34768059ff9a381fdb75359c9fd3fc0de4052372";
 	}
 	const [editor] = useLexicalComposerContext();
 	let t0;
@@ -53,9 +53,9 @@ function EnterAsLineBreakHandler() {
 }
 function ExternalStateSync(t0) {
 	const $ = c(6);
-	if ($[0] !== "63fce41aab52cd282d26a73e81de9225d7bcf44f37fcaae7c81941ba12aafa05") {
+	if ($[0] !== "b2abd53d41bcf7845fda084f34768059ff9a381fdb75359c9fd3fc0de4052372") {
 		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "63fce41aab52cd282d26a73e81de9225d7bcf44f37fcaae7c81941ba12aafa05";
+		$[0] = "b2abd53d41bcf7845fda084f34768059ff9a381fdb75359c9fd3fc0de4052372";
 	}
 	const { value, isSyncingRef } = t0;
 	const [editor] = useLexicalComposerContext();
@@ -91,9 +91,9 @@ function ExternalStateSync(t0) {
 }
 function SidebarFloatingTextToolbar() {
 	const $ = c(72);
-	if ($[0] !== "63fce41aab52cd282d26a73e81de9225d7bcf44f37fcaae7c81941ba12aafa05") {
+	if ($[0] !== "b2abd53d41bcf7845fda084f34768059ff9a381fdb75359c9fd3fc0de4052372") {
 		for (let $i = 0; $i < 72; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "63fce41aab52cd282d26a73e81de9225d7bcf44f37fcaae7c81941ba12aafa05";
+		$[0] = "b2abd53d41bcf7845fda084f34768059ff9a381fdb75359c9fd3fc0de4052372";
 	}
 	const [editor] = useLexicalComposerContext();
 	const [open, setOpen] = React.useState(false);
@@ -144,7 +144,7 @@ function SidebarFloatingTextToolbar() {
 				if (selection.hasFormat("bold")) activeFormats = activeFormats | FORMAT_FLAGS.bold;
 				if (selection.hasFormat("italic")) activeFormats = activeFormats | FORMAT_FLAGS.italic;
 				if (selection.hasFormat("underline")) activeFormats = activeFormats | FORMAT_FLAGS.underline;
-				if ($selectionHasGradient()) activeFormats = activeFormats | FORMAT_FLAGS.gradient;
+				if ($selectionHasHighlight()) activeFormats = activeFormats | FORMAT_FLAGS.highlight;
 				let node = selection.anchor.getNode();
 				while (node) {
 					if (node.getType?.() === "link") {
@@ -260,8 +260,8 @@ function SidebarFloatingTextToolbar() {
 		t9 = (formatKey) => {
 			editor.update(() => {
 				restoreSelection();
-				if (formatKey === "gradient") {
-					$toggleGradient();
+				if (formatKey === "highlight") {
+					$toggleHighlight();
 					return;
 				}
 				editor.dispatchCommand(FORMAT_TEXT_COMMAND, formatKey);
@@ -431,9 +431,9 @@ function SidebarFloatingTextToolbar() {
 			label: "Underline",
 			icon: Underline
 		}, {
-			key: "gradient",
-			label: "Gradient",
-			icon: Blend
+			key: "highlight",
+			label: "Highlight",
+			icon: Highlighter
 		}];
 		$[53] = t23;
 	} else t23 = $[53];
@@ -518,9 +518,9 @@ function _temp(event_0) {
 }
 function PasteUrlAsLinkHandler() {
 	const $ = c(4);
-	if ($[0] !== "63fce41aab52cd282d26a73e81de9225d7bcf44f37fcaae7c81941ba12aafa05") {
+	if ($[0] !== "b2abd53d41bcf7845fda084f34768059ff9a381fdb75359c9fd3fc0de4052372") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "63fce41aab52cd282d26a73e81de9225d7bcf44f37fcaae7c81941ba12aafa05";
+		$[0] = "b2abd53d41bcf7845fda084f34768059ff9a381fdb75359c9fd3fc0de4052372";
 	}
 	const [editor] = useLexicalComposerContext();
 	let t0;
@@ -531,7 +531,7 @@ function PasteUrlAsLinkHandler() {
 			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;
+			if (!isValidTextLinkTarget(url)) return false;
 			event.preventDefault();
 			editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
 			return true;
@@ -571,43 +571,46 @@ function SidebarLexicalEditor({ id, value, onChange, onFocus, onBlur }) {
 		timerRef.current = window.setTimeout(flushChange, 300);
 	}, [flushChange]);
 	React.useEffect(() => flushChange, [flushChange]);
-	return /* @__PURE__ */ jsxs(LexicalComposer, {
-		initialConfig: config,
-		children: [
-			/* @__PURE__ */ jsx(RichTextPlugin, {
-				contentEditable: /* @__PURE__ */ jsx(ContentEditable, {
-					id,
-					className: cn(INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, "flex min-h-[80px] w-full px-3 py-2"),
-					onFocus,
-					onBlur: () => {
-						flushChange();
-						onBlur?.();
-					}
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full min-w-0",
+		children: /* @__PURE__ */ jsxs(LexicalComposer, {
+			initialConfig: config,
+			children: [
+				/* @__PURE__ */ jsx(RichTextPlugin, {
+					contentEditable: /* @__PURE__ */ jsx(ContentEditable, {
+						id,
+						className: cn(INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, "flex min-h-[80px] w-full px-3 py-2"),
+						onFocus,
+						onBlur: () => {
+							flushChange();
+							onBlur?.();
+						}
+					}),
+					ErrorBoundary: LexicalErrorBoundary
+				}),
+				/* @__PURE__ */ jsx(OnChangePlugin, {
+					onChange: handleChange,
+					ignoreSelectionChange: true
 				}),
-				ErrorBoundary: LexicalErrorBoundary
-			}),
-			/* @__PURE__ */ jsx(OnChangePlugin, {
-				onChange: handleChange,
-				ignoreSelectionChange: true
-			}),
-			/* @__PURE__ */ jsx(HistoryPlugin, {}),
-			/* @__PURE__ */ jsx(LinkPlugin, {}),
-			/* @__PURE__ */ jsx(ExternalStateSync, {
-				value,
-				isSyncingRef
-			}),
-			/* @__PURE__ */ jsx(EnterAsLineBreakHandler, {}),
-			/* @__PURE__ */ jsx(PasteUrlAsLinkHandler, {}),
-			/* @__PURE__ */ jsx(SidebarFloatingTextToolbar, {}),
-			/* @__PURE__ */ jsx(InlineStylesPlugin, {})
-		]
+				/* @__PURE__ */ jsx(HistoryPlugin, {}),
+				/* @__PURE__ */ jsx(LinkPlugin, {}),
+				/* @__PURE__ */ jsx(ExternalStateSync, {
+					value,
+					isSyncingRef
+				}),
+				/* @__PURE__ */ jsx(EnterAsLineBreakHandler, {}),
+				/* @__PURE__ */ jsx(PasteUrlAsLinkHandler, {}),
+				/* @__PURE__ */ jsx(SidebarFloatingTextToolbar, {}),
+				/* @__PURE__ */ jsx(InlineStylesPlugin, {})
+			]
+		})
 	});
 }
 function LexicalErrorBoundary(t0) {
 	const $ = c(3);
-	if ($[0] !== "63fce41aab52cd282d26a73e81de9225d7bcf44f37fcaae7c81941ba12aafa05") {
+	if ($[0] !== "b2abd53d41bcf7845fda084f34768059ff9a381fdb75359c9fd3fc0de4052372") {
 		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "63fce41aab52cd282d26a73e81de9225d7bcf44f37fcaae7c81941ba12aafa05";
+		$[0] = "b2abd53d41bcf7845fda084f34768059ff9a381fdb75359c9fd3fc0de4052372";
 	}
 	const { children } = t0;
 	let t1;