@jikjo/ui-kit 0.1.0

package/dist/index.js

@@ -0,0 +1,1119 @@
+import { Editor, historyExtension, richTextExtension, useBlockHoverPlugin, useSelectionPlugin, useSlashCommandPlugin } from "@jikjo/core";
+import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $createParagraphNode, $getNearestNodeFromDOMNode, $getNodeByKey, $getSelection, $isElementNode, $isRangeSelection, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DRAGOVER_COMMAND, DROP_COMMAND } from "lexical";
+import { Bold, Code, GripVertical, Heading1, Heading2, Heading3, Italic, List, ListOrdered, ListTodo, Plus, Quote, Strikethrough, Text, Underline } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/bubble-menu.tsx
+/**
+* selection rect를 컨테이너 기준 absolute 좌표로 변환.
+* 컨테이너가 스크롤되어도 absolute 요소는 함께 움직인다.
+*/
+function getSelectionAbsPos(container) {
+	const sel = window.getSelection();
+	if (!sel || sel.rangeCount === 0) return null;
+	const range = sel.getRangeAt(0);
+	if (range.collapsed) return null;
+	const selRect = range.getBoundingClientRect();
+	if (selRect.width === 0) return null;
+	const cr = container.getBoundingClientRect();
+	return {
+		top: selRect.top - cr.top + container.scrollTop - 36 - 6,
+		left: selRect.left - cr.left + container.scrollLeft + selRect.width / 2
+	};
+}
+function Btn({ active, label, onMouseDown, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		onMouseDown,
+		className: [
+			"flex items-center justify-center w-8 h-8 rounded-md",
+			"transition-colors duration-75",
+			active ? "bg-white/15 text-white" : "text-zinc-400 hover:bg-white/10 hover:text-zinc-200"
+		].join(" "),
+		children
+	});
+}
+function BubbleMenu({ isVisible, format, onToggleFormat, editor }) {
+	const [container, setContainer] = useState(null);
+	const [pos, setPos] = useState(null);
+	useEffect(() => {
+		function attachContainer() {
+			const rootEl = editor.getRootElement();
+			if (!rootEl) return;
+			const parent = rootEl.parentElement;
+			if (parent) setContainer(parent);
+		}
+		attachContainer();
+		return editor.registerRootListener(attachContainer);
+	}, [editor]);
+	useEffect(() => {
+		if (!isVisible || !container) {
+			setPos(null);
+			return;
+		}
+		const newPos = getSelectionAbsPos(container);
+		if (newPos !== null) setPos(newPos);
+	}, [isVisible, container]);
+	if (!container) return null;
+	const menuStyle = pos ? {
+		position: "absolute",
+		top: pos.top,
+		left: pos.left,
+		x: "-50%",
+		zIndex: 50
+	} : {
+		position: "absolute",
+		top: -9999,
+		left: -9999,
+		zIndex: 50
+	};
+	return createPortal(/* @__PURE__ */ jsx(AnimatePresence, { children: isVisible && /* @__PURE__ */ jsxs(motion.div, {
+		style: menuStyle,
+		initial: {
+			opacity: 0,
+			y: 6
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: 6
+		},
+		transition: {
+			duration: .1,
+			ease: "easeOut"
+		},
+		className: "flex items-center gap-0.5 px-1.5 py-1.5 rounded-lg bg-zinc-800 shadow-xl shadow-black/50",
+		children: [
+			/* @__PURE__ */ jsx(Btn, {
+				active: format.bold,
+				label: "Bold",
+				onMouseDown: (e) => {
+					e.preventDefault();
+					onToggleFormat("bold");
+				},
+				children: /* @__PURE__ */ jsx(Bold, {
+					size: 13,
+					strokeWidth: 2.5
+				})
+			}),
+			/* @__PURE__ */ jsx(Btn, {
+				active: format.italic,
+				label: "Italic",
+				onMouseDown: (e) => {
+					e.preventDefault();
+					onToggleFormat("italic");
+				},
+				children: /* @__PURE__ */ jsx(Italic, {
+					size: 13,
+					strokeWidth: 2
+				})
+			}),
+			/* @__PURE__ */ jsx(Btn, {
+				active: format.underline,
+				label: "Underline",
+				onMouseDown: (e) => {
+					e.preventDefault();
+					onToggleFormat("underline");
+				},
+				children: /* @__PURE__ */ jsx(Underline, {
+					size: 13,
+					strokeWidth: 2
+				})
+			}),
+			/* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-zinc-600/50 mx-0.5 shrink-0" }),
+			/* @__PURE__ */ jsx(Btn, {
+				active: format.strikethrough,
+				label: "Strikethrough",
+				onMouseDown: (e) => {
+					e.preventDefault();
+					onToggleFormat("strikethrough");
+				},
+				children: /* @__PURE__ */ jsx(Strikethrough, {
+					size: 13,
+					strokeWidth: 2
+				})
+			}),
+			/* @__PURE__ */ jsx(Btn, {
+				active: format.code,
+				label: "Code",
+				onMouseDown: (e) => {
+					e.preventDefault();
+					onToggleFormat("code");
+				},
+				children: /* @__PURE__ */ jsx(Code, {
+					size: 13,
+					strokeWidth: 2
+				})
+			})
+		]
+	}) }), container);
+}
+
+//#endregion
+//#region src/components/block-toolbar.tsx
+const DRAG_DATA_FORMAT = "application/x-lexical-drag-block";
+const BTN = 24;
+const GAP = 4;
+const GUTTER_LEFT = 6;
+const btnBase = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	borderRadius: 4,
+	border: "none",
+	background: "transparent",
+	color: "#a1a1aa",
+	cursor: "pointer",
+	padding: 0,
+	transition: "background 80ms, color 80ms"
+};
+const btnHover = {
+	background: "rgba(63,63,70,0.7)",
+	color: "#e4e4e7"
+};
+const ICON_MAP$1 = {
+	paragraph: /* @__PURE__ */ jsx(Text, {
+		size: 13,
+		strokeWidth: 1.75
+	}),
+	heading1: /* @__PURE__ */ jsx(Heading1, {
+		size: 13,
+		strokeWidth: 1.75
+	}),
+	heading2: /* @__PURE__ */ jsx(Heading2, {
+		size: 13,
+		strokeWidth: 1.75
+	}),
+	heading3: /* @__PURE__ */ jsx(Heading3, {
+		size: 13,
+		strokeWidth: 1.75
+	}),
+	bulletList: /* @__PURE__ */ jsx(List, {
+		size: 13,
+		strokeWidth: 1.75
+	}),
+	orderedList: /* @__PURE__ */ jsx(ListOrdered, {
+		size: 13,
+		strokeWidth: 1.75
+	}),
+	taskList: /* @__PURE__ */ jsx(ListTodo, {
+		size: 13,
+		strokeWidth: 1.75
+	}),
+	quote: /* @__PURE__ */ jsx(Quote, {
+		size: 13,
+		strokeWidth: 1.75
+	})
+};
+/** blockEl의 top을 container 기준 절대 좌표로 계산 (getBoundingClientRect 기반) */
+function getOffsetTopToContainer(blockEl, container) {
+	const blockRect = blockEl.getBoundingClientRect();
+	const containerRect = container.getBoundingClientRect();
+	return blockRect.top - containerRect.top + container.scrollTop;
+}
+function BlockToolbar({ isVisible, nodeKey, focusedNodeKey, items, editor, showDragHandle = true, showAddButton = true, onDragStarted, onDropped }) {
+	const [panelOpen, setPanelOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(0);
+	const [container, setContainer] = useState(null);
+	const [top, setTop] = useState(null);
+	const [dragHovered, setDragHovered] = useState(false);
+	const [addHovered, setAddHovered] = useState(false);
+	const [dropLine, setDropLine] = useState(null);
+	const [focusedTop, setFocusedTop] = useState(null);
+	const [focusedHeight, setFocusedHeight] = useState(0);
+	const panelRef = useRef(null);
+	const addBtnRef = useRef(null);
+	const numBtns = (showDragHandle ? 1 : 0) + (showAddButton ? 1 : 0);
+	useEffect(() => {
+		return editor.registerRootListener((rootElement) => {
+			setContainer(rootElement?.parentElement ?? null);
+		});
+	}, [editor]);
+	useEffect(() => {
+		function calc() {
+			if (!isVisible || !nodeKey || !container) {
+				setTop(null);
+				return;
+			}
+			const blockEl = editor.getElementByKey(nodeKey);
+			if (!blockEl) {
+				setTop(null);
+				return;
+			}
+			setTop(getOffsetTopToContainer(blockEl, container) + (blockEl.offsetHeight - BTN) / 2);
+		}
+		calc();
+		return editor.registerUpdateListener(() => calc());
+	}, [
+		isVisible,
+		nodeKey,
+		editor,
+		container
+	]);
+	useEffect(() => {
+		function calc() {
+			if (!focusedNodeKey || !container) {
+				setFocusedTop(null);
+				return;
+			}
+			const blockEl = editor.getElementByKey(focusedNodeKey);
+			if (!blockEl) {
+				setFocusedTop(null);
+				return;
+			}
+			setFocusedTop(getOffsetTopToContainer(blockEl, container));
+			setFocusedHeight(blockEl.offsetHeight);
+		}
+		calc();
+		return editor.registerUpdateListener(() => calc());
+	}, [
+		focusedNodeKey,
+		editor,
+		container
+	]);
+	useEffect(() => {
+		if (!panelOpen) setActiveIndex(0);
+	}, [panelOpen]);
+	useEffect(() => {
+		if (!isVisible) setPanelOpen(false);
+	}, [isVisible]);
+	useEffect(() => {
+		if (!panelOpen) return;
+		function onScroll() {
+			setPanelOpen(false);
+		}
+		window.addEventListener("scroll", onScroll, {
+			passive: true,
+			capture: true
+		});
+		return () => window.removeEventListener("scroll", onScroll, { capture: true });
+	}, [panelOpen]);
+	useEffect(() => {
+		if (!panelOpen) return;
+		function onPointerDown(e) {
+			if (panelRef.current && !panelRef.current.contains(e.target)) setPanelOpen(false);
+		}
+		window.addEventListener("pointerdown", onPointerDown);
+		return () => window.removeEventListener("pointerdown", onPointerDown);
+	}, [panelOpen]);
+	useEffect(() => {
+		if (!panelOpen) return;
+		function onKeyDown(e) {
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				setActiveIndex((p) => Math.min(p + 1, items.length - 1));
+			} else if (e.key === "ArrowUp") {
+				e.preventDefault();
+				setActiveIndex((p) => Math.max(p - 1, 0));
+			} else if (e.key === "Enter") {
+				e.preventDefault();
+				const item = items[activeIndex];
+				if (item) editor.focus(() => {
+					item.onSelect(editor);
+					setPanelOpen(false);
+				});
+			} else if (e.key === "Escape") {
+				e.preventDefault();
+				setPanelOpen(false);
+			}
+		}
+		window.addEventListener("keydown", onKeyDown, { capture: true });
+		return () => window.removeEventListener("keydown", onKeyDown, { capture: true });
+	}, [
+		panelOpen,
+		items,
+		activeIndex,
+		editor
+	]);
+	useEffect(() => {
+		if (!showDragHandle || !container) return;
+		const unregDragover = editor.registerCommand(DRAGOVER_COMMAND, (event) => {
+			if (!event.dataTransfer?.types.includes(DRAG_DATA_FORMAT)) return false;
+			event.preventDefault();
+			const draggedKey = event.dataTransfer.getData(DRAG_DATA_FORMAT);
+			const target = event.target;
+			if (!target) return true;
+			if (draggedKey) {
+				if (editor.getElementByKey(draggedKey)?.contains(target)) {
+					setDropLine(null);
+					return true;
+				}
+			}
+			let targetKey = null;
+			editor.read(() => {
+				const node = $getNearestNodeFromDOMNode(target);
+				if (!node) return;
+				const top$1 = node.isInline() ? node.getTopLevelElement() : node;
+				if (top$1) targetKey = top$1.getKey();
+			});
+			if (!targetKey || targetKey === draggedKey) {
+				setDropLine(null);
+				return true;
+			}
+			const targetDOM = editor.getElementByKey(targetKey);
+			if (!targetDOM) {
+				setDropLine(null);
+				return true;
+			}
+			const { top: domTop, height } = targetDOM.getBoundingClientRect();
+			const isBefore = event.clientY < domTop + height / 2;
+			const offsetTop = getOffsetTopToContainer(targetDOM, container);
+			setDropLine({
+				top: isBefore ? offsetTop : offsetTop + targetDOM.offsetHeight,
+				position: isBefore ? "before" : "after"
+			});
+			return true;
+		}, COMMAND_PRIORITY_LOW);
+		const unregDrop = editor.registerCommand(DROP_COMMAND, (event) => {
+			const draggedKey = event.dataTransfer?.getData(DRAG_DATA_FORMAT);
+			if (!draggedKey) return false;
+			event.preventDefault();
+			setDropLine(null);
+			const target = event.target;
+			if (!target) return true;
+			let willMove = false;
+			editor.read(() => {
+				const draggedNode = $getNodeByKey(draggedKey);
+				if (!draggedNode) return;
+				const nearestNode = $getNearestNodeFromDOMNode(target);
+				if (!nearestNode) return;
+				const targetNode = nearestNode.isInline() ? nearestNode.getTopLevelElement() : nearestNode;
+				if (!targetNode) return;
+				const targetKey = targetNode.getKey();
+				if (targetKey === draggedKey) return;
+				if ($isElementNode(draggedNode) && draggedNode.getChildren().some((child) => child.getKey() === targetKey)) return;
+				willMove = true;
+			});
+			editor.update(() => {
+				const draggedNode = $getNodeByKey(draggedKey);
+				if (!draggedNode) return;
+				const nearestNode = $getNearestNodeFromDOMNode(target);
+				if (!nearestNode) return;
+				const targetNode = nearestNode.isInline() ? nearestNode.getTopLevelElement() : nearestNode;
+				if (!targetNode) return;
+				const targetKey = targetNode.getKey();
+				if (targetKey === draggedKey) return;
+				if ($isElementNode(draggedNode) && draggedNode.getChildren().some((child) => child.getKey() === targetKey)) return;
+				const targetDOM = editor.getElementByKey(targetKey);
+				if (!targetDOM) return;
+				const { top: targetTop, height } = targetDOM.getBoundingClientRect();
+				if (event.clientY < targetTop + height / 2) targetNode.insertBefore(draggedNode);
+				else targetNode.insertAfter(draggedNode);
+			});
+			if (willMove && onDropped) requestAnimationFrame(() => onDropped(draggedKey));
+			return true;
+		}, COMMAND_PRIORITY_HIGH);
+		function onDragEnd() {
+			setDropLine(null);
+		}
+		document.addEventListener("dragend", onDragEnd);
+		return () => {
+			unregDragover();
+			unregDrop();
+			document.removeEventListener("dragend", onDragEnd);
+		};
+	}, [
+		editor,
+		showDragHandle,
+		container,
+		onDropped
+	]);
+	const handleDragStart = useCallback((e) => {
+		if (!nodeKey) return;
+		e.dataTransfer.setData(DRAG_DATA_FORMAT, nodeKey);
+		e.dataTransfer.effectAllowed = "move";
+		const blockEl = editor.getElementByKey(nodeKey);
+		if (blockEl) e.dataTransfer.setDragImage(blockEl, 0, 0);
+		onDragStarted?.(nodeKey);
+	}, [
+		nodeKey,
+		editor,
+		onDragStarted
+	]);
+	const handleAddClick = useCallback((e) => {
+		e.preventDefault();
+		setPanelOpen((p) => !p);
+	}, []);
+	if (!container) return null;
+	const dragBtnStyle = {
+		...btnBase,
+		width: BTN,
+		height: BTN,
+		cursor: "grab",
+		...dragHovered ? btnHover : {}
+	};
+	const addBtnStyle = {
+		...btnBase,
+		width: BTN,
+		height: BTN,
+		...panelOpen || addHovered ? btnHover : {}
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		createPortal(/* @__PURE__ */ jsx(AnimatePresence, { children: focusedTop !== null && /* @__PURE__ */ jsx(motion.div, {
+			style: {
+				position: "absolute",
+				top: focusedTop,
+				left: 0,
+				width: 2,
+				height: focusedHeight,
+				background: "#818cf8",
+				borderRadius: 1,
+				zIndex: 2,
+				pointerEvents: "none"
+			},
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: { duration: .1 }
+		}, focusedNodeKey ?? "cursor-indicator") }), container),
+		createPortal(/* @__PURE__ */ jsx(AnimatePresence, { children: isVisible && top !== null && /* @__PURE__ */ jsxs(motion.div, {
+			"data-block-toolbar": true,
+			style: {
+				position: "absolute",
+				top,
+				left: GUTTER_LEFT,
+				display: "flex",
+				alignItems: "center",
+				gap: GAP,
+				width: numBtns * BTN + Math.max(0, numBtns - 1) * GAP,
+				zIndex: 2,
+				userSelect: "none"
+			},
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: {
+				duration: .08,
+				ease: "easeOut"
+			},
+			children: [showDragHandle && /* @__PURE__ */ jsx("div", {
+				draggable: true,
+				"data-drag-handle": true,
+				onDragStart: handleDragStart,
+				"aria-label": "Drag to reorder",
+				style: dragBtnStyle,
+				onMouseEnter: () => setDragHovered(true),
+				onMouseLeave: () => setDragHovered(false),
+				children: /* @__PURE__ */ jsx(GripVertical, {
+					size: 14,
+					strokeWidth: 2
+				})
+			}), showAddButton && /* @__PURE__ */ jsx("button", {
+				ref: addBtnRef,
+				type: "button",
+				"aria-label": "Add block",
+				"aria-expanded": panelOpen,
+				style: addBtnStyle,
+				onMouseDown: handleAddClick,
+				onMouseEnter: () => setAddHovered(true),
+				onMouseLeave: () => setAddHovered(false),
+				children: /* @__PURE__ */ jsx(Plus, {
+					size: 13,
+					strokeWidth: 2.5
+				})
+			})]
+		}, nodeKey ?? "toolbar") }), container),
+		createPortal(/* @__PURE__ */ jsx(AnimatePresence, { children: dropLine !== null && /* @__PURE__ */ jsxs(motion.div, {
+			style: {
+				position: "absolute",
+				top: dropLine.top,
+				left: 0,
+				right: 0,
+				height: 2,
+				zIndex: 3,
+				pointerEvents: "none",
+				display: "flex",
+				alignItems: "center",
+				transform: "translateY(-1px)"
+			},
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: { duration: .06 },
+			children: [/* @__PURE__ */ jsx("div", { style: {
+				width: 6,
+				height: 6,
+				borderRadius: "50%",
+				background: "#818cf8",
+				flexShrink: 0,
+				marginLeft: 4
+			} }), /* @__PURE__ */ jsx("div", { style: {
+				flex: 1,
+				height: 2,
+				background: "#818cf8",
+				marginRight: 8
+			} })]
+		}, "drop-line") }), container),
+		createPortal(/* @__PURE__ */ jsx(AnimatePresence, { children: isVisible && panelOpen && top !== null && /* @__PURE__ */ jsx(motion.div, {
+			ref: panelRef,
+			"data-block-toolbar": true,
+			style: {
+				position: "absolute",
+				top: top + BTN + GAP,
+				left: GUTTER_LEFT,
+				zIndex: 50,
+				width: 240
+			},
+			initial: {
+				opacity: 0,
+				y: -4
+			},
+			animate: {
+				opacity: 1,
+				y: 0
+			},
+			exit: {
+				opacity: 0,
+				y: -4
+			},
+			transition: {
+				duration: .1,
+				ease: "easeOut"
+			},
+			role: "dialog",
+			"aria-label": "Insert block",
+			className: "rounded-lg bg-zinc-800 shadow-xl shadow-black/50 py-1.5",
+			children: /* @__PURE__ */ jsx("div", {
+				role: "listbox",
+				"aria-label": "Block type",
+				className: "w-full px-1.5 flex flex-col",
+				children: items.map((item, index) => {
+					const icon = ICON_MAP$1[item.id] ?? item.icon;
+					const isActive = index === activeIndex;
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						role: "option",
+						"aria-selected": isActive,
+						onMouseDown: (e) => {
+							e.preventDefault();
+							editor.focus(() => {
+								item.onSelect(editor);
+								setPanelOpen(false);
+							});
+						},
+						onMouseEnter: () => setActiveIndex(index),
+						className: [
+							"w-full flex items-center gap-3 px-3 py-2 rounded-md text-left transition-colors duration-75",
+							"outline-none",
+							isActive ? "bg-zinc-700/60 text-zinc-100" : "text-zinc-400 hover:bg-zinc-700/40 hover:text-zinc-200"
+						].join(" "),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "flex items-center justify-center shrink-0 w-4 text-current",
+							children: icon
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-sm font-normal leading-none",
+							children: item.label
+						})]
+					}, item.id);
+				})
+			})
+		}) }), container)
+	] });
+}
+
+//#endregion
+//#region src/components/slash-menu.tsx
+const ICON_MAP = {
+	paragraph: /* @__PURE__ */ jsx(Text, {
+		size: 14,
+		strokeWidth: 1.75
+	}),
+	heading1: /* @__PURE__ */ jsx(Heading1, {
+		size: 14,
+		strokeWidth: 1.75
+	}),
+	heading2: /* @__PURE__ */ jsx(Heading2, {
+		size: 14,
+		strokeWidth: 1.75
+	}),
+	heading3: /* @__PURE__ */ jsx(Heading3, {
+		size: 14,
+		strokeWidth: 1.75
+	}),
+	quote: /* @__PURE__ */ jsx(Quote, {
+		size: 14,
+		strokeWidth: 1.75
+	})
+};
+/**
+* 캐럿(collapsed range)의 bottom 위치를 컨테이너 기준 absolute 좌표로 변환.
+*/
+function getCaretAbsPos(container) {
+	const sel = window.getSelection();
+	if (!sel || sel.rangeCount === 0) return null;
+	const range = sel.getRangeAt(0).cloneRange();
+	range.collapse(true);
+	const caretRect = range.getBoundingClientRect();
+	if (caretRect.width === 0 && caretRect.height === 0 && caretRect.top === 0) return null;
+	const cr = container.getBoundingClientRect();
+	return {
+		top: caretRect.bottom - cr.top + container.scrollTop + 6,
+		left: caretRect.left - cr.left + container.scrollLeft
+	};
+}
+function SlashMenu({ isVisible, query, items, editor, onClose }) {
+	const [activeIndex, setActiveIndex] = useState(0);
+	const containerRef = useRef(null);
+	const [portalContainer, setPortalContainer] = useState(null);
+	const [pos, setPos] = useState(null);
+	useEffect(() => {
+		function attachContainer() {
+			const rootEl = editor.getRootElement();
+			if (!rootEl) return;
+			const parent = rootEl.parentElement;
+			if (parent) setPortalContainer(parent);
+		}
+		attachContainer();
+		return editor.registerRootListener(attachContainer);
+	}, [editor]);
+	const filtered = items.filter((item) => !query || item.label.toLowerCase().includes(query.toLowerCase()) || item.description.toLowerCase().includes(query.toLowerCase()));
+	useEffect(() => {
+		if (!isVisible || !portalContainer) {
+			setPos(null);
+			return;
+		}
+		setPos(getCaretAbsPos(portalContainer));
+	}, [
+		isVisible,
+		query,
+		portalContainer
+	]);
+	useEffect(() => {
+		setActiveIndex(0);
+	}, [query]);
+	useEffect(() => {
+		if (!isVisible) return;
+		function handleKeyDown(event) {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				setActiveIndex((prev) => Math.min(prev + 1, filtered.length - 1));
+			} else if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setActiveIndex((prev) => Math.max(prev - 1, 0));
+			} else if (event.key === "Enter") {
+				event.preventDefault();
+				const item = filtered[activeIndex];
+				if (!item) return;
+				editor.focus(() => {
+					item.onSelect(editor);
+					onClose();
+				});
+			} else if (event.key === "Escape") onClose();
+		}
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		isVisible,
+		filtered,
+		activeIndex,
+		editor,
+		onClose
+	]);
+	useEffect(() => {
+		(containerRef.current?.querySelector("[data-active=\"true\"]"))?.scrollIntoView({ block: "nearest" });
+	}, [activeIndex]);
+	if (!portalContainer) return null;
+	const menuStyle = pos ? {
+		position: "absolute",
+		top: pos.top,
+		left: pos.left,
+		zIndex: 50,
+		width: 240
+	} : {
+		position: "absolute",
+		top: -9999,
+		left: -9999,
+		zIndex: 50,
+		width: 240
+	};
+	return createPortal(/* @__PURE__ */ jsx(AnimatePresence, { children: isVisible && /* @__PURE__ */ jsx(motion.div, {
+		style: menuStyle,
+		initial: {
+			opacity: 0,
+			y: -4
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -4
+		},
+		transition: {
+			duration: .1,
+			ease: "easeOut"
+		},
+		role: "dialog",
+		"aria-label": "Insert block",
+		className: "rounded-lg bg-zinc-800 shadow-xl shadow-black/50 py-1.5 overflow-hidden",
+		children: filtered.length === 0 ? /* @__PURE__ */ jsxs("p", {
+			className: "px-4 py-2 text-xs text-zinc-500",
+			children: [
+				"No results for “",
+				query,
+				"”"
+			]
+		}) : /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			role: "listbox",
+			"aria-label": "Block type",
+			className: "w-full max-h-72 overflow-y-auto px-1.5 flex flex-col",
+			children: filtered.map((item, index) => {
+				const icon = ICON_MAP[item.id] ?? item.icon;
+				const isActive = index === activeIndex;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": isActive,
+					"data-active": isActive,
+					onMouseDown: (e) => {
+						e.preventDefault();
+						editor.focus(() => {
+							item.onSelect(editor);
+							onClose();
+						});
+					},
+					onMouseEnter: () => setActiveIndex(index),
+					className: [
+						"w-full flex items-center gap-3 px-3 py-2 rounded-md text-left transition-colors duration-75",
+						"outline-none focus-visible:outline-none",
+						isActive ? "bg-zinc-700/80 text-zinc-100" : "text-zinc-400 hover:bg-zinc-700/60 hover:text-zinc-200 focus-visible:bg-zinc-700/80 focus-visible:text-zinc-100"
+					].join(" "),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "flex items-center justify-center shrink-0 w-4 text-current",
+						children: icon
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm font-normal leading-none",
+						children: item.label
+					})]
+				}, item.id);
+			})
+		})
+	}) }), portalContainer);
+}
+
+//#endregion
+//#region src/editor-ui.tsx
+const tbtnBase = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: 32,
+	height: 32,
+	borderRadius: 6,
+	border: "none",
+	background: "transparent",
+	color: "#71717a",
+	cursor: "pointer",
+	padding: 0,
+	transition: "background 100ms, color 100ms",
+	flexShrink: 0
+};
+const tbtnHover = {
+	background: "rgba(39,39,42,0.9)",
+	color: "#e4e4e7"
+};
+const tbtnActive = {
+	background: "rgba(63,63,70,0.8)",
+	color: "#f4f4f5"
+};
+function ToolbarButton({ label, isActive, onMouseDown, children }) {
+	const [hovered, setHovered] = useState(false);
+	const style = {
+		...tbtnBase,
+		...hovered ? tbtnHover : {},
+		...isActive ? tbtnActive : {}
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		onMouseDown,
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		style,
+		children
+	});
+}
+const defaultExtensions = [richTextExtension, historyExtension];
+const ALL_FEATURES = [
+	"blockHandle",
+	"inlineAdd",
+	"slashCommand",
+	"bubbleMenu"
+];
+function EditorInner({ extensions, toolbarContent, features }) {
+	const [editor] = useLexicalComposerContext();
+	const selection = useSelectionPlugin();
+	const slashCommand = useSlashCommandPlugin();
+	const blockHover = useBlockHoverPlugin();
+	const [currentHeadingTag, setCurrentHeadingTag] = useState(null);
+	const [focusedNodeKey, setFocusedNodeKey] = useState(null);
+	const dropSucceededRef = useRef(false);
+	useEffect(() => {
+		return editor.registerUpdateListener(({ editorState }) => {
+			editorState.read(() => {
+				const sel = $getSelection();
+				if (!$isRangeSelection(sel)) {
+					setCurrentHeadingTag(null);
+					return;
+				}
+				const topNode = sel.anchor.getNode().getTopLevelElement();
+				setCurrentHeadingTag($isHeadingNode(topNode) ? topNode.getTag() : null);
+			});
+		});
+	}, [editor]);
+	useEffect(() => {
+		return editor.registerRootListener((rootElement) => {
+			if (!rootElement) return;
+			const root = rootElement;
+			function onClick(e) {
+				const target = e.target;
+				if (!target) return;
+				let key = null;
+				editor.read(() => {
+					const node = $getNearestNodeFromDOMNode(target);
+					if (!node) return;
+					const top = node.isInline() ? node.getTopLevelElement() : node;
+					if (top) key = top.getKey();
+				});
+				if (key) setFocusedNodeKey(key);
+			}
+			function onDocClick(e) {
+				const target = e.target;
+				if (root.contains(target)) return;
+				if (target?.closest("[data-block-toolbar]") || target?.closest("[data-drag-handle]")) return;
+				setFocusedNodeKey(null);
+			}
+			root.addEventListener("click", onClick);
+			document.addEventListener("click", onDocClick, true);
+			return () => {
+				root.removeEventListener("click", onClick);
+				document.removeEventListener("click", onDocClick, true);
+			};
+		});
+	}, [editor]);
+	const handleDragStarted = useCallback((key) => {
+		dropSucceededRef.current = false;
+		setFocusedNodeKey(key);
+		editor.focus();
+	}, [editor]);
+	const handleDropped = useCallback((key) => {
+		dropSucceededRef.current = true;
+		setFocusedNodeKey(key);
+		editor.focus();
+	}, [editor]);
+	useEffect(() => {
+		function onDragEnd() {
+			if (!dropSucceededRef.current) setFocusedNodeKey(null);
+			dropSucceededRef.current = false;
+		}
+		document.addEventListener("dragend", onDragEnd);
+		return () => document.removeEventListener("dragend", onDragEnd);
+	}, []);
+	const slashMenuItems = useMemo(() => extensions.flatMap((ext) => ext.slashMenuItems ?? []), [extensions]);
+	const toggleHeading = useCallback((tag) => {
+		editor.update(() => {
+			const sel = $getSelection();
+			if (!$isRangeSelection(sel)) return;
+			const topNode = sel.anchor.getNode().getTopLevelElementOrThrow();
+			const newNode = $isHeadingNode(topNode) && topNode.getTag() === tag ? $createParagraphNode() : $createHeadingNode(tag);
+			topNode.replace(newNode);
+			newNode.select();
+		});
+	}, [editor]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		toolbarContent === false ? null : toolbarContent !== void 0 ? /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 2,
+				padding: "8px 16px",
+				borderBottom: "1px solid rgba(39,39,42,0.5)"
+			},
+			children: toolbarContent
+		}) : /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 2,
+				padding: "8px 16px",
+				borderBottom: "1px solid rgba(39,39,42,0.5)"
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 2
+					},
+					children: [
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							label: "Bold",
+							isActive: selection.format.bold,
+							onMouseDown: (e) => {
+								e.preventDefault();
+								selection.toggleFormat("bold");
+							},
+							children: /* @__PURE__ */ jsx(Bold, {
+								size: 14,
+								strokeWidth: 2.5
+							})
+						}),
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							label: "Italic",
+							isActive: selection.format.italic,
+							onMouseDown: (e) => {
+								e.preventDefault();
+								selection.toggleFormat("italic");
+							},
+							children: /* @__PURE__ */ jsx(Italic, {
+								size: 14,
+								strokeWidth: 2.5
+							})
+						}),
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							label: "Underline",
+							isActive: selection.format.underline,
+							onMouseDown: (e) => {
+								e.preventDefault();
+								selection.toggleFormat("underline");
+							},
+							children: /* @__PURE__ */ jsx(Underline, {
+								size: 14,
+								strokeWidth: 2.5
+							})
+						}),
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							label: "Strikethrough",
+							isActive: selection.format.strikethrough,
+							onMouseDown: (e) => {
+								e.preventDefault();
+								selection.toggleFormat("strikethrough");
+							},
+							children: /* @__PURE__ */ jsx(Strikethrough, {
+								size: 14,
+								strokeWidth: 2.5
+							})
+						}),
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							label: "Code",
+							isActive: selection.format.code,
+							onMouseDown: (e) => {
+								e.preventDefault();
+								selection.toggleFormat("code");
+							},
+							children: /* @__PURE__ */ jsx(Code, {
+								size: 14,
+								strokeWidth: 2.5
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", { style: {
+					width: 1,
+					height: 16,
+					background: "#27272a",
+					margin: "0 4px"
+				} }),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 2
+					},
+					children: [
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							label: "Heading 1",
+							isActive: currentHeadingTag === "h1",
+							onMouseDown: (e) => {
+								e.preventDefault();
+								toggleHeading("h1");
+							},
+							children: /* @__PURE__ */ jsx(Heading1, {
+								size: 15,
+								strokeWidth: 2
+							})
+						}),
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							label: "Heading 2",
+							isActive: currentHeadingTag === "h2",
+							onMouseDown: (e) => {
+								e.preventDefault();
+								toggleHeading("h2");
+							},
+							children: /* @__PURE__ */ jsx(Heading2, {
+								size: 15,
+								strokeWidth: 2
+							})
+						}),
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							label: "Heading 3",
+							isActive: currentHeadingTag === "h3",
+							onMouseDown: (e) => {
+								e.preventDefault();
+								toggleHeading("h3");
+							},
+							children: /* @__PURE__ */ jsx(Heading3, {
+								size: 15,
+								strokeWidth: 2
+							})
+						})
+					]
+				})
+			]
+		}),
+		features.includes("bubbleMenu") && /* @__PURE__ */ jsx(BubbleMenu, {
+			isVisible: selection.isActive,
+			format: selection.format,
+			onToggleFormat: selection.toggleFormat,
+			editor
+		}),
+		features.includes("slashCommand") && /* @__PURE__ */ jsx(SlashMenu, {
+			isVisible: slashCommand.isActive,
+			query: slashCommand.query,
+			items: slashMenuItems,
+			editor,
+			onClose: slashCommand.close
+		}),
+		/* @__PURE__ */ jsx(BlockToolbar, {
+			isVisible: blockHover.isActive && (features.includes("blockHandle") || features.includes("inlineAdd")),
+			nodeKey: blockHover.nodeKey,
+			focusedNodeKey,
+			items: slashMenuItems,
+			editor,
+			showDragHandle: features.includes("blockHandle"),
+			showAddButton: features.includes("inlineAdd"),
+			onDragStarted: handleDragStarted,
+			onDropped: handleDropped
+		})
+	] });
+}
+function EditorUI({ extensions = defaultExtensions, namespace = "jikjo", toolbarContent, className, features = [...ALL_FEATURES] }) {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		...features.includes("blockHandle") || features.includes("inlineAdd") ? { "data-has-block-toolbar": "" } : {},
+		children: /* @__PURE__ */ jsx(Editor, {
+			extensions,
+			namespace,
+			children: /* @__PURE__ */ jsx(EditorInner, {
+				extensions,
+				toolbarContent,
+				features
+			})
+		})
+	});
+}
+
+//#endregion
+export { BlockToolbar, BubbleMenu, EditorUI, SlashMenu };
+//# sourceMappingURL=index.js.map