@jbpark/live-editor 1.9.0 → 1.11.0

package/dist/index.d.mts

@@ -133,17 +133,26 @@ declare const Core: ({
 }: Props$2) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/editor/editor.d.ts
+interface EditorRenderData {
+  value: string;
+  onChange: (value: string) => void;
+  formatCode: (code: string) => Promise<string>;
+}
 interface Props$1 extends Omit<Props$2, 'onSave' | 'onError'> {
   defaultValue?: string;
   debounce?: number;
+  renderEditor?: (data: EditorRenderData) => React.ReactNode;
 }
 declare const Editor$1: ({
   defaultValue,
   value: _value,
   debounce,
   onChange: _onChange,
+  renderEditor,
+  fragment,
+  prettierOptions,
   ...props
-}: Props$1) => react_jsx_runtime0.JSX.Element;
+}: Props$1) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
 //#endregion
 //#region src/components/editor/index.d.ts
 type EditorComponent = typeof Editor$1 & {
@@ -252,8 +261,11 @@ declare const App: {
     value: _value,
     debounce,
     onChange: _onChange,
+    renderEditor,
+    fragment,
+    prettierOptions,
     ...props
-  }: Props$1) => react_jsx_runtime0.JSX.Element) & {
+  }: Props$1) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined) & {
     Core: ({
       value,
       theme,

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { _ as DRAGGABLE_ITEMS, b as __toESM, d as require_lib$1, f as require_lib, g as DEFAULT_TEMPLATE, p as BINDING_PROP } from "./document-DJDRM79h.mjs";
-import { a as detectTypeScript, c as generateSections, d as replaceSections, i as compile, l as getCachedScriptBlob, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as preloadScripts } from "./utils-D1tlgtgj.mjs";
-import { _ as parseArrayExpression, c as extract, d as getCurrentValue, f as parseBinding, g as extractObjectProperties, h as extractNodeValue, i as replaceIds, l as nanoid, m as createNodeFromValue, n as clone, o as update, p as arrayExpressionToCode, r as fillIds, t as validateBindingValue, u as findEditableChildren, v as parseValue, y as generateCode } from "./ast-DiVN0l7x.mjs";
+import { _ as DEFAULT_TEMPLATE, f as require_lib$1, m as BINDING_PROP, n as createSectionPreviewCache, p as require_lib, v as DRAGGABLE_ITEMS, x as __toESM } from "./document-CBw2uF_P.mjs";
+import { a as detectTypeScript, d as replaceSections, i as compile, l as getCachedScriptBlob, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as preloadScripts } from "./utils-BjYg1Sh8.mjs";
+import { _ as parseArrayExpression, c as extract, d as getCurrentValue, f as parseBinding, g as extractObjectProperties, h as extractNodeValue, i as replaceIds, l as nanoid, m as createNodeFromValue, n as clone, o as update, p as arrayExpressionToCode, r as fillIds, t as validateBindingValue, u as findEditableChildren, v as parseValue, y as generateCode } from "./ast-C0FNDLFQ.mjs";
 import { generateTailwindCSS } from "./utils/tailwind/index.mjs";
 import "@jbpark/ui-kit/style.css";
 import React, { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -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 { useDebouncedValue, useEventListener, useMultiSelect, useMutationObserver, useResizeObserver, useResponsiveSize } from "@jbpark/use-hooks";
+import { useDebounce, 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";
@@ -70,6 +70,42 @@ const ContextProvider = ({ children }) => {
 	});
 };
 
+//#endregion
+//#region src/components/frame/measure.ts
+const FALLBACK_PROBE_HEIGHT = 812;
+const computeProbeHeight = (scrollContainerClientHeight, wrapperInsets) => {
+	const usable = scrollContainerClientHeight - wrapperInsets;
+	return usable > 0 ? usable : null;
+};
+const isVisuallyHidden = (computed) => computed.visibility === "hidden" || computed.opacity === "0";
+const parseTranslateY = (transform) => {
+	if (!transform || transform === "none") return 0;
+	const translateYMatch = transform.match(/translateY\(\s*([+-]?\d*\.?\d+)/);
+	if (translateYMatch?.[1]) return parseFloat(translateYMatch[1]);
+	const translateMatch = transform.match(/translate\([^,]+,\s*([+-]?\d*\.?\d+)/);
+	if (translateMatch?.[1]) return parseFloat(translateMatch[1]);
+	const matrixMatch = transform.match(/matrix\(\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*([+-]?\d*\.?\d+)/);
+	return matrixMatch?.[1] ? parseFloat(matrixMatch[1]) : 0;
+};
+const estimatePositionedElementHeight = (offsetHeight, transform, probeHeight) => {
+	const offsetY = parseTranslateY(transform);
+	return Math.min(offsetY + offsetHeight, probeHeight);
+};
+
+//#endregion
+//#region src/components/frame/viewport-units.ts
+const UNIT_MAP = {
+	vh: "cqh",
+	svh: "cqh",
+	lvh: "cqh",
+	dvh: "cqh",
+	vmin: "cqmin",
+	vmax: "cqmax"
+};
+const UNITS_PATTERN = Object.keys(UNIT_MAP).sort((a, b) => b.length - a.length).join("|");
+const VIEWPORT_UNIT_RE = new RegExp(`(?<![\\w.-])(-?(?:\\d+\\.?\\d*|\\.\\d+))(${UNITS_PATTERN})(?![a-zA-Z0-9_-])`, "gi");
+const convertViewportUnits = (css) => css.replace(VIEWPORT_UNIT_RE, (_match, number, unit) => number + UNIT_MAP[unit.toLowerCase()]);
+
 //#endregion
 //#region src/components/frame/iframe.tsx
 const EMPTY_STRING_ARRAY = [];
@@ -113,7 +149,7 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			const fragment = doc.createDocumentFragment();
 			newStyles.forEach((content) => {
 				const style = doc.createElement("style");
-				style.textContent = content;
+				style.textContent = convertViewportUnits(content);
 				fragment.appendChild(style);
 			});
 			doc.head.appendChild(fragment);
@@ -187,7 +223,8 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 				styleEl.id = styleId;
 				doc.head.appendChild(styleEl);
 			}
-			if (styleEl.textContent !== css) styleEl.textContent = css;
+			const convertedCss = convertViewportUnits(css);
+			if (styleEl.textContent !== convertedCss) styleEl.textContent = convertedCss;
 		});
 		for (let index = styles.length; index < prevStyleCountRef.current; index++) doc.getElementById(`injected-style-${index}`)?.remove();
 		prevStyleCountRef.current = styles.length;
@@ -205,50 +242,74 @@ 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]);
+	const CONTAINER_STYLE_ID = "autoheight-container";
+	const ensureContainerStyle = (doc, probeHeight) => {
+		let styleEl = doc.getElementById(CONTAINER_STYLE_ID);
+		if (!styleEl) {
+			styleEl = doc.createElement("style");
+			styleEl.id = CONTAINER_STYLE_ID;
+			doc.head?.appendChild(styleEl);
+		}
+		styleEl.textContent = `html { container-type: size !important; height: ${probeHeight}px !important; }`;
+	};
+	const MEASUREMENT_OVERRIDE_STYLE_ID = "autoheight-measurement-overrides";
+	const withMeasurementOverrides = (doc, measure) => {
+		let styleEl = doc.getElementById(MEASUREMENT_OVERRIDE_STYLE_ID);
+		if (!styleEl) {
+			styleEl = doc.createElement("style");
+			styleEl.id = MEASUREMENT_OVERRIDE_STYLE_ID;
+			styleEl.media = "not all";
+			styleEl.textContent = [
+				"*, *::before, *::after { transition: none !important; }",
+				"html, body { scrollbar-width: none !important; }",
+				"html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; }"
+			].join("\n");
+			doc.head?.appendChild(styleEl);
+		}
+		styleEl.media = "all";
+		measure();
+		styleEl.media = "not all";
+	};
 	const updateHeight = useCallback(() => {
 		if (!shouldAutoHeight || !mountNode || !iframeRef.current) return;
 		const iframe = iframeRef.current;
+		const doc = iframe.contentDocument;
+		const win = doc?.defaultView;
+		if (!doc || !win) return;
 		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 = 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);
+		let probeHeight;
+		if (!scrollParent) probeHeight = FALLBACK_PROBE_HEIGHT;
+		else {
+			let wrapperInsets = 0;
+			let node = iframe.parentElement;
+			while (node && node !== scrollParent) {
+				const style = win.getComputedStyle(node);
+				wrapperInsets += parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth) + parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+				node = node.parentElement;
+			}
+			const computed = computeProbeHeight(scrollParent.clientHeight, wrapperInsets);
+			if (computed === null) return;
+			probeHeight = computed;
+		}
+		let contentHeight = 0;
+		withMeasurementOverrides(doc, () => {
+			ensureContainerStyle(doc, probeHeight);
+			contentHeight = mountNode.scrollHeight;
+			mountNode.querySelectorAll("*").forEach((el) => {
+				const style = win.getComputedStyle(el);
+				if (isVisuallyHidden(style)) return;
+				if ((style.position === "fixed" || style.position === "absolute") && el.offsetHeight > 0) {
+					const estimatedHeight = estimatePositionedElementHeight(el.offsetHeight, style.transform, probeHeight);
+					contentHeight = Math.max(contentHeight, estimatedHeight);
 				}
-			}
+			});
 		});
-		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(() => {
+		if (shouldAutoHeight) return;
+		iframeRef.current?.contentDocument?.getElementById(CONTAINER_STYLE_ID)?.remove();
+	}, [shouldAutoHeight]);
 	useEffect(() => {
 		updateHeight();
 	}, [updateHeight]);
@@ -11351,8 +11412,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",
@@ -11360,13 +11421,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, {
@@ -11381,6 +11441,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;
@@ -12227,6 +12297,43 @@ const parseDateValue = (value) => {
 const formatDateValue = (date) => {
 	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 };
+const COLOR_COMMIT_DELAY = 75;
+const ColorPickerField = ({ id, label, value, onChange }) => {
+	const [liveValue, setLiveValue] = useState(value);
+	const [prevValue, setPrevValue] = useState(value);
+	const lastCommittedRef = useRef(value);
+	if (value !== prevValue) {
+		setPrevValue(value);
+		setLiveValue(value);
+	}
+	useEffect(() => {
+		lastCommittedRef.current = value;
+	}, [value]);
+	const commit = (next) => {
+		if (next === lastCommittedRef.current) return;
+		lastCommittedRef.current = next;
+		onChange?.({
+			id,
+			label,
+			value: next
+		});
+	};
+	const debouncedCommit = useDebounce(() => commit(liveValue), {
+		delay: COLOR_COMMIT_DELAY,
+		autoInvoke: false
+	});
+	return /* @__PURE__ */ jsx(ColorPicker, {
+		showText: true,
+		value: liveValue,
+		onChange: (next) => {
+			setLiveValue(next);
+			debouncedCommit();
+		},
+		onOpenChange: (open) => {
+			if (!open) commit(liveValue);
+		}
+	});
+};
 const ICON_OPTIONS = Object.entries(ICON_MAP).map(([name, Icon]) => ({
 	label: /* @__PURE__ */ jsxs("span", {
 		className: "flex items-center gap-2",
@@ -12341,16 +12448,11 @@ const Field = ({ binding, id, value, onChange }) => {
 			});
 		}
 	});
-	if (binding.type === "color" || isColorProperty(binding.property)) return /* @__PURE__ */ jsx(ColorPicker, {
-		showText: true,
+	if (binding.type === "color" || isColorProperty(binding.property)) return /* @__PURE__ */ jsx(ColorPickerField, {
+		id,
+		label: binding.label,
 		value: normalizeToHex(stringValue),
-		onChange: (next) => {
-			if (next !== value) onChange?.({
-				id,
-				label: binding.label,
-				value: next
-			});
-		}
+		onChange
 	});
 	if (binding.type === "date") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
 		defaultValue: parseDateValue(stringValue),
@@ -12630,7 +12732,12 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
 	const value = _value || DEFAULT_TEMPLATE;
 	const sections = useMemo(() => extractSections(value), [value]);
-	const previews = useMemo(() => generateSections(sections.map((s) => s.code), value), [sections, value]);
+	const [previewCache] = useState(() => createSectionPreviewCache());
+	const previews = useMemo(() => previewCache.compute(value, sections), [
+		previewCache,
+		sections,
+		value
+	]);
 	const onDragStart = (_) => {};
 	const onDragOver = (_e) => {};
 	const onDragEnd = (event) => {
@@ -12857,7 +12964,7 @@ 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;
@@ -12870,15 +12977,26 @@ const Editor$1 = ({ defaultValue, value: _value, debounce = 1e3, onChange: _onCh
 	const onError = useCallback((error) => {
 		setError(error);
 	}, [setError]);
+	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
 	});
 };