@jbpark/live-editor 1.8.1 → 1.10.0

package/dist/index.mjs

@@ -9,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { useDebounce, useMultiSelect, useResponsiveSize } from "@jbpark/use-hooks";
+import { useDebouncedValue, useEventListener, useMultiSelect, useMutationObserver, useResizeObserver, useResponsiveSize } from "@jbpark/use-hooks";
 import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bell, Bookmark, Calendar, Camera, Check, ChevronDown, ChevronRight, Clock, Copy, Download, Edit, Eye, Filter, Heart, Home, Image, Info, LayoutGrid, Link, Mail, Map as Map$1, Menu, MessageCircle, Phone, Plus, Search, Settings, Share, ShoppingCart, Star, Trash, Upload as Upload$1, User, X } from "lucide-react";
 import { v4 } from "uuid";
 import { createPortal } from "react-dom";
@@ -26,19 +26,17 @@ import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 
 //#region src/components/context/states.ts
-const PreviewContext = createContext({
-	code: "",
-	setCode: () => {}
-});
-const ErrorContext = createContext({
-	error: null,
-	setError: () => {}
-});
+const PreviewContext = createContext(void 0);
+const ErrorContext = createContext(void 0);
 const usePreview = () => {
-	return useContext(PreviewContext);
+	const context = useContext(PreviewContext);
+	if (context === void 0) throw new Error("usePreview must be used within <Live> (ContextProvider)");
+	return context;
 };
 const useError = () => {
-	return useContext(ErrorContext);
+	const context = useContext(ErrorContext);
+	if (context === void 0) throw new Error("useError must be used within <Live> (ContextProvider)");
+	return context;
 };
 
 //#endregion
@@ -55,16 +53,18 @@ const ContextProvider = ({ children }) => {
 			clearCompilationCache();
 		};
 	}, []);
+	const previewValue = useMemo(() => ({
+		code,
+		setCode
+	}), [code, setCode]);
+	const errorValue = useMemo(() => ({
+		error,
+		setError
+	}), [error, setError]);
 	return /* @__PURE__ */ jsx(PreviewContext.Provider, {
-		value: {
-			code,
-			setCode
-		},
+		value: previewValue,
 		children: /* @__PURE__ */ jsx(ErrorContext.Provider, {
-			value: {
-				error,
-				setError
-			},
+			value: errorValue,
 			children
 		})
 	});
@@ -119,6 +119,21 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			doc.head.appendChild(fragment);
 		}
 	}, [syncStyle]);
+	const applyStyleTimeoutRef = useRef(void 0);
+	const debouncedApplyStyle = useCallback(() => {
+		clearTimeout(applyStyleTimeoutRef.current);
+		applyStyleTimeoutRef.current = window.setTimeout(applyStyle, 50);
+	}, [applyStyle]);
+	useEffect(() => {
+		return () => clearTimeout(applyStyleTimeoutRef.current);
+	}, []);
+	useMutationObserver(document.head, debouncedApplyStyle, {
+		enabled: syncStyle,
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: ["href"]
+	});
 	useEffect(() => {
 		const $iframe = iframeRef.current;
 		if (!$iframe) return;
@@ -152,28 +167,11 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			onLoaded?.();
 		};
 		$iframe.addEventListener("load", onLoad);
-		let timeoutId;
-		let observer = null;
-		if (syncStyle) {
-			observer = new MutationObserver(() => {
-				clearTimeout(timeoutId);
-				timeoutId = window.setTimeout(applyStyle, 50);
-			});
-			observer.observe(document.head, {
-				childList: true,
-				subtree: true,
-				attributes: true,
-				attributeFilter: ["href"]
-			});
-		}
 		if ($iframe.contentDocument?.readyState === "complete") onLoad();
 		return () => {
 			$iframe.removeEventListener("load", onLoad);
-			observer?.disconnect();
-			clearTimeout(timeoutId);
 		};
 	}, [
-		syncStyle,
 		scripts,
 		onLoaded,
 		applyStyle
@@ -207,66 +205,73 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		for (let index = stylesheets.length; index < prevStylesheetCountRef.current; index++) doc.getElementById(`injected-stylesheet-${index}`)?.remove();
 		prevStylesheetCountRef.current = stylesheets.length;
 	}, [styles, stylesheets]);
-	useEffect(() => {
+	const updateHeight = useCallback(() => {
 		if (!shouldAutoHeight || !mountNode || !iframeRef.current) return;
 		const iframe = iframeRef.current;
-		const updateHeight = () => {
-			const scrollParent = iframe.closest("[data-frame-container]");
-			const savedScrollTop = scrollParent?.scrollTop ?? 0;
-			iframe.style.height = "0px";
-			let childrenHeight = 0;
-			Array.from(mountNode.children).forEach((child) => {
-				const el = child;
-				childrenHeight = Math.max(childrenHeight, el.scrollHeight);
-			});
-			const win = iframe.contentDocument?.defaultView;
-			mountNode.querySelectorAll("[data-floating-ui-focusable]").forEach((popup) => {
-				if (popup.offsetHeight > 0) {
+		const scrollParent = iframe.closest("[data-frame-container]");
+		const savedScrollTop = scrollParent?.scrollTop ?? 0;
+		iframe.style.height = "0px";
+		let childrenHeight = 0;
+		Array.from(mountNode.children).forEach((child) => {
+			const el = child;
+			childrenHeight = Math.max(childrenHeight, el.scrollHeight);
+		});
+		const win = iframe.contentDocument?.defaultView;
+		mountNode.querySelectorAll("[data-floating-ui-focusable]").forEach((popup) => {
+			if (popup.offsetHeight > 0) {
+				let offsetY = 0;
+				const transform = popup.style.transform;
+				if (transform) {
+					const match = transform.match(/translate\([^,]+,\s*([+-]?\d+(?:\.\d+)?)/);
+					if (match?.[1]) offsetY = parseFloat(match[1]);
+				}
+				const estimatedHeight = offsetY + popup.offsetHeight;
+				childrenHeight = Math.max(childrenHeight, estimatedHeight);
+			}
+		});
+		if (win) Array.from(mountNode.children).forEach((child) => {
+			const el = child;
+			const style = win.getComputedStyle(el);
+			if (style.position === "fixed" || style.position === "absolute") {
+				if (el.offsetHeight > 0) {
 					let offsetY = 0;
-					const transform = popup.style.transform;
+					const transform = el.style.transform;
 					if (transform) {
 						const match = transform.match(/translate\([^,]+,\s*([+-]?\d+(?:\.\d+)?)/);
 						if (match?.[1]) offsetY = parseFloat(match[1]);
 					}
-					const estimatedHeight = offsetY + popup.offsetHeight;
+					const estimatedHeight = offsetY + el.offsetHeight;
 					childrenHeight = Math.max(childrenHeight, estimatedHeight);
 				}
-			});
-			if (win) Array.from(mountNode.children).forEach((child) => {
-				const el = child;
-				const style = win.getComputedStyle(el);
-				if (style.position === "fixed" || style.position === "absolute") {
-					if (el.offsetHeight > 0) {
-						let offsetY = 0;
-						const transform = el.style.transform;
-						if (transform) {
-							const match = transform.match(/translate\([^,]+,\s*([+-]?\d+(?:\.\d+)?)/);
-							if (match?.[1]) offsetY = parseFloat(match[1]);
-						}
-						const estimatedHeight = offsetY + el.offsetHeight;
-						childrenHeight = Math.max(childrenHeight, estimatedHeight);
-					}
-				}
-			});
-			const contentHeight = Math.max(mountNode.scrollHeight, childrenHeight);
-			if (contentHeight > 0) iframe.style.height = `${Math.ceil(contentHeight)}px`;
-			if (scrollParent) scrollParent.scrollTop = savedScrollTop;
-		};
-		updateHeight();
-		const resizeObserver = new ResizeObserver(updateHeight);
-		resizeObserver.observe(mountNode);
-		const mutationObserver = new MutationObserver(updateHeight);
-		mutationObserver.observe(mountNode, {
-			childList: true,
-			subtree: true,
-			attributes: true,
-			characterData: true
+			}
 		});
-		return () => {
-			resizeObserver.disconnect();
-			mutationObserver.disconnect();
-		};
-	}, [mountNode, shouldAutoHeight]);
+		const contentHeight = Math.max(mountNode.scrollHeight, childrenHeight);
+		if (contentHeight > 0) iframe.style.height = `${Math.ceil(contentHeight)}px`;
+		if (scrollParent) scrollParent.scrollTop = savedScrollTop;
+	}, [shouldAutoHeight, mountNode]);
+	useEffect(() => {
+		updateHeight();
+	}, [updateHeight]);
+	const [resizeRef, resizeSize] = useResizeObserver();
+	useEffect(() => {
+		if (!shouldAutoHeight || !mountNode) return;
+		resizeRef(mountNode);
+		return () => resizeRef(null);
+	}, [
+		shouldAutoHeight,
+		mountNode,
+		resizeRef
+	]);
+	useEffect(() => {
+		updateHeight();
+	}, [resizeSize]);
+	useMutationObserver(mountNode, updateHeight, {
+		enabled: shouldAutoHeight,
+		childList: true,
+		subtree: true,
+		attributes: true,
+		characterData: true
+	});
 	const content = mountNode ? createPortal(children(mountNode), mountNode) : null;
 	return /* @__PURE__ */ jsx("iframe", {
 		ref: iframeRef,
@@ -330,24 +335,34 @@ const Frame = ({ mode, children, ...restProps }) => {
 
 //#endregion
 //#region src/components/dnd/draggable.tsx
-const Draggable = ({ item, onAdd }) => {
-	const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+const DraggableItem = ({ item, children }) => {
+	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
 		id: item.id,
 		data: {
 			type: "new-item",
 			item
 		}
 	});
-	return /* @__PURE__ */ jsx(Card, {
+	return children({
 		ref: setNodeRef,
-		style: transform ? { opacity: isDragging ? .5 : 1 } : void 0,
-		...listeners,
-		...attributes,
-		className: cn("cursor-grab", "outline-none", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
-		onDoubleClick: () => onAdd?.(item),
-		children: item.name
+		dragProps: {
+			...listeners,
+			...attributes
+		},
+		isDragging
 	});
 };
+const DefaultDraggableItem = ({ item, onAdd }) => /* @__PURE__ */ jsx(DraggableItem, {
+	item,
+	children: ({ ref, dragProps, isDragging }) => /* @__PURE__ */ jsx(Card, {
+		ref,
+		style: { opacity: isDragging ? .5 : 1 },
+		...dragProps,
+		className: cn("cursor-grab", "outline-none", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
+		onDoubleClick: onAdd ? () => onAdd(item) : void 0,
+		children: item.name
+	})
+});
 
 //#endregion
 //#region src/components/dnd/droppable.tsx
@@ -459,7 +474,7 @@ const Overlay = ({ sections, renderProps }) => {
 	if (!active) return null;
 	if (active.data.current?.type === "new-item") {
 		const item = active.data.current.item;
-		return /* @__PURE__ */ jsx(Draggable, { item });
+		return /* @__PURE__ */ jsx(DefaultDraggableItem, { item });
 	}
 	const section = sections.find((s) => s.id === active.id);
 	if (section) {
@@ -11336,8 +11351,8 @@ GutterMarker.prototype.startSide = GutterMarker.prototype.endSide = -1;
 GutterMarker.prototype.point = true;
 
 //#endregion
-//#region src/components/editor/core.tsx
-const prettierInitialOptions = {
+//#region src/components/editor/use-format-code.ts
+const DEFAULT_PRETTIER_OPTIONS = {
 	tabWidth: 2,
 	singleQuote: true,
 	trailingComma: "all",
@@ -11345,13 +11360,12 @@ const prettierInitialOptions = {
 	arrowParens: "avoid",
 	printWidth: 60
 };
-const Core = ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave: _onSave, onError, ...props }) => {
-	const editorRef = useRef(null);
+const useFormatCode = ({ fragment, prettierOptions } = {}) => {
 	const prettierConfig = useMemo(() => ({
-		...prettierInitialOptions,
+		...DEFAULT_PRETTIER_OPTIONS,
 		...prettierOptions
 	}), [prettierOptions]);
-	const formatCode = useCallback(async (code) => {
+	return useCallback(async (code) => {
 		const isTypeScript = detectTypeScript(code);
 		const source = fragment ? `<>${code}</>` : code;
 		const formatted = await prettier.format(source, {
@@ -11366,6 +11380,16 @@ const Core = ({ value, theme, height, className, prettierOptions, fragment, raw,
 		if (fragment) return formatted.replace(/^<>\n?/, "").replace(/\n?<\/>;?\s*$/, "").replace(/^ {2}/gm, "").trim();
 		return formatted;
 	}, [prettierConfig, fragment]);
+};
+
+//#endregion
+//#region src/components/editor/core.tsx
+const Core = ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave: _onSave, onError, ...props }) => {
+	const editorRef = useRef(null);
+	const formatCode = useFormatCode({
+		fragment,
+		prettierOptions
+	});
 	const onSave = useCallback(async (val) => {
 		try {
 			const currentView = editorRef.current?.view;
@@ -12606,7 +12630,7 @@ const conditionalModifiers = (args) => {
 	if (active?.data.current?.type === "new-item") return args.transform;
 	return restrictToVerticalAxis(args);
 };
-const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, className, items = [], frame, provider, ...restProps }) => {
+const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, className, items = [], frame, provider, renderPalette, renderPanel, ...restProps }) => {
 	const [selectedId, setSelectedId] = useState(null);
 	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
 	const { breakpoint } = useResponsiveSize();
@@ -12706,14 +12730,35 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 	useEffect(() => {
 		if (frame?.scripts?.length) preloadScripts(frame.scripts);
 	}, [frame?.scripts]);
-	const renderPaletteItems = (onAdd) => /* @__PURE__ */ jsx(Space, {
-		orientation: "vertical",
-		align: "start",
-		children: (items?.length ? items : DRAGGABLE_ITEMS).map((item) => /* @__PURE__ */ jsx(Draggable, {
-			item,
-			onAdd
-		}, item.id))
-	});
+	const renderPaletteItems = (onAdd) => {
+		const paletteItems = items?.length ? items : DRAGGABLE_ITEMS;
+		if (renderPalette) return renderPalette({
+			items: paletteItems,
+			onAdd,
+			DraggableItem
+		});
+		return /* @__PURE__ */ jsx(Space, {
+			orientation: "vertical",
+			align: "start",
+			children: paletteItems.map((item) => /* @__PURE__ */ jsx(DefaultDraggableItem, {
+				item,
+				onAdd
+			}, item.id))
+		});
+	};
+	const renderPanelContent = () => {
+		const selectedItem = sections.find((s) => s.id === selectedId);
+		if (renderPanel) return renderPanel({
+			item: selectedItem,
+			onChange,
+			onDelete
+		});
+		return /* @__PURE__ */ jsx(Panel, {
+			item: selectedItem,
+			onChange,
+			onDelete
+		});
+	};
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DndContext, {
 		sensors,
 		collisionDetection: closestCenter,
@@ -12772,11 +12817,7 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "hidden w-1/5 md:block",
-					children: /* @__PURE__ */ jsx(Panel, {
-						item: sections.find((s) => s.id === selectedId),
-						onChange,
-						onDelete
-					})
+					children: renderPanelContent()
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					type: "primary",
@@ -12803,11 +12844,7 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 					direction: "bottom",
 					size: "large",
 					title: "Properties",
-					children: /* @__PURE__ */ jsx(Panel, {
-						item: sections.find((s) => s.id === selectedId),
-						onChange,
-						onDelete
-					})
+					children: renderPanelContent()
 				})
 			]
 		}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
@@ -12822,9 +12859,14 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 	}) });
 };
 
+//#endregion
+//#region src/components/dnd/index.ts
+const Dnd = Dnd$1;
+Dnd.DraggableItem = DraggableItem;
+
 //#endregion
 //#region src/components/editor/editor.tsx
-const Editor$1 = ({ defaultValue, value: _value, debounce = 1e3, onChange: _onChange, ...props }) => {
+const Editor$1 = ({ defaultValue, value: _value, debounce = 1e3, onChange: _onChange, renderEditor, fragment, prettierOptions, ...props }) => {
 	const { setCode } = usePreview();
 	const { setError } = useError();
 	const value = _value.trim() === "" ? defaultValue || DEFAULT_TEMPLATE : _value;
@@ -12837,14 +12879,26 @@ const Editor$1 = ({ defaultValue, value: _value, debounce = 1e3, onChange: _onCh
 	const onError = useCallback((error) => {
 		setError(error);
 	}, [setError]);
-	useDebounce(() => {
-		setCode(value);
-	}, { delay: debounce }, [value]);
+	const formatCode = useFormatCode({
+		fragment,
+		prettierOptions
+	});
+	const debouncedValue = useDebouncedValue(value, debounce);
+	useEffect(() => {
+		setCode(debouncedValue);
+	}, [debouncedValue, setCode]);
+	if (renderEditor) return renderEditor({
+		value,
+		onChange,
+		formatCode
+	});
 	return /* @__PURE__ */ jsx(Core, {
 		value,
 		onChange,
 		onSave,
 		onError,
+		fragment,
+		prettierOptions,
 		...props
 	});
 };
@@ -12948,21 +13002,20 @@ const Guard = ({ children, onError }) => {
 	const [error, setError] = useState(null);
 	const containerRef = useRef(null);
 	const errorHandled = useRef(false);
+	useEventListener("error", (event) => {
+		if (errorHandled.current) return;
+		errorHandled.current = true;
+		const errorMessage = event.error?.message || event.message || "Unknown error";
+		console.error("⚡ [Guard] Event handler error:", errorMessage);
+		event.preventDefault();
+		setError(errorMessage);
+		onError?.(event.error || new window.Error(errorMessage));
+		setTimeout(() => {
+			errorHandled.current = false;
+		}, 100);
+	}, { capture: true });
 	useEffect(() => {
 		if (!containerRef.current) return;
-		const handleWindowError = (event) => {
-			if (errorHandled.current) return;
-			errorHandled.current = true;
-			const errorMessage = event.error?.message || event.message || "Unknown error";
-			console.error("⚡ [Guard] Event handler error:", errorMessage);
-			event.preventDefault();
-			setError(errorMessage);
-			onError?.(event.error || new window.Error(errorMessage));
-			setTimeout(() => {
-				errorHandled.current = false;
-			}, 100);
-			return true;
-		};
 		const handleUnhandledRejection = (event) => {
 			if (errorHandled.current) return;
 			errorHandled.current = true;
@@ -12974,10 +13027,8 @@ const Guard = ({ children, onError }) => {
 				errorHandled.current = false;
 			}, 100);
 		};
-		window.addEventListener("error", handleWindowError, true);
 		window.addEventListener("unhandledrejection", handleUnhandledRejection, true);
 		return () => {
-			window.removeEventListener("error", handleWindowError, true);
 			window.removeEventListener("unhandledrejection", handleUnhandledRejection, true);
 		};
 	}, [onError]);
@@ -13000,16 +13051,12 @@ const Guard = ({ children, onError }) => {
 //#region src/components/error/runtime.tsx
 const Runtime = ({ open = true, reset }) => {
 	const { error: message, setError } = useError();
+	useEventListener("error", (e) => {
+		setError(e.message);
+		e.preventDefault();
+	});
 	useEffect(() => {
-		const onError = (e) => {
-			setError(e.message);
-			e.preventDefault();
-		};
-		window.addEventListener("error", onError);
-		return () => {
-			setError(null);
-			window.removeEventListener("error", onError);
-		};
+		return () => setError(null);
 	}, [setError]);
 	if (!open) return null;
 	return /* @__PURE__ */ jsx(Error$2, {