@jbpark/live-editor 1.4.0 → 1.6.0

package/dist/index.d.mts

@@ -58,7 +58,7 @@ declare class ErrorBoundary extends React$1.Component<Props$6, State> {
   constructor(props: Props$6);
   static getDerivedStateFromError(error: Error): State;
   componentDidCatch(error: Error, errorInfo: React$1.ErrorInfo): void;
-  render(): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
+  render(): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | null | undefined;
 }
 //#endregion
 //#region src/components/error/error.d.ts

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { S as __toESM, _ as parseArrayExpression, b as require_lib$1, 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, x as require_lib, y as generateCode } from "./ast-fX6Whrjc.mjs";
-import { a as DRAGGABLE_ITEMS, i as DEFAULT_TEMPLATE, t as BINDING_PROP } from "./enums-3yleLgqV.mjs";
-import { a as detectTypeScript, c as getCachedScriptBlob, i as compile, l as preloadScripts, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as replaceSections } from "./utils-INSWI9h0.mjs";
+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-BkOqiV4R.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-YMe7_mya.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-CXRFs1hO.mjs";
 import { generateTailwindCSS } from "./utils/tailwind/index.mjs";
 import "@jbpark/ui-kit/style.css";
-import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, Select, Space, Typography, Upload } from "@jbpark/ui-kit";
+import React, { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, Select, Space, Toast, Typography, Upload } from "@jbpark/ui-kit";
 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";
@@ -397,13 +397,12 @@ const Droppable = ({ children, className }) => {
 
 //#endregion
 //#region src/components/dnd/renderer.tsx
-const Renderer = ({ fullCode, code, headers, modules, frame, provider }) => {
+const Renderer = ({ preview, headers, modules, frame, provider }) => {
 	const memoizedModules = useMemo(() => ({
 		...baseModules,
 		...modules
 	}), [modules]);
-	const memoizedSection = useMemo(() => generateSection(code, fullCode), [code, fullCode]);
-	const module = useMemo(() => compile(memoizedSection, memoizedModules), [memoizedSection, memoizedModules]);
+	const module = useMemo(() => compile(preview, memoizedModules), [preview, memoizedModules]);
 	const renderProvider = (component) => {
 		return provider ? provider(component) : component;
 	};
@@ -422,6 +421,7 @@ const Renderer = ({ fullCode, code, headers, modules, frame, provider }) => {
 		})
 	});
 };
+var renderer_default = memo(Renderer);
 
 //#endregion
 //#region src/components/dnd/sortable.tsx
@@ -477,19 +477,23 @@ const Overlay = ({ sections, renderProps }) => {
 		return /* @__PURE__ */ jsx(Draggable, { item });
 	}
 	const section = sections.find((s) => s.id === active.id);
-	if (section) return /* @__PURE__ */ jsx(Sortable, {
-		id: section.id,
-		name: section.name,
-		children: /* @__PURE__ */ jsx(Renderer, {
-			...renderProps,
-			code: section.code
-		})
-	});
+	if (section) {
+		const preview = generateSection(section.code, renderProps.fullCode);
+		return /* @__PURE__ */ jsx(Sortable, {
+			id: section.id,
+			name: section.name,
+			children: /* @__PURE__ */ jsx(renderer_default, {
+				preview,
+				modules: renderProps.modules,
+				frame: renderProps.frame
+			})
+		});
+	}
 	return null;
 };
 
 //#endregion
-//#region node_modules/.pnpm/@marijn+find-cluster-break@1.0.2/node_modules/@marijn/find-cluster-break/src/index.js
+//#region node_modules/.pnpm/@marijn+find-cluster-break@1.0.3/node_modules/@marijn/find-cluster-break/src/index.js
 let rangeFrom = [], rangeTo = [];
 (() => {
 	let numbers = "lc,34,7n,7,7b,19,,,,2,,2,,,20,b,1c,l,g,,2t,7,2,6,2,2,,4,z,,u,r,2j,b,1m,9,9,,o,4,,9,,3,,5,17,3,3b,f,,w,1j,,,,4,8,4,,3,7,a,2,t,,1m,,,,2,4,8,,9,,a,2,q,,2,2,1l,,4,2,4,2,2,3,3,,u,2,3,,b,2,1l,,4,5,,2,4,,k,2,m,6,,,1m,,,2,,4,8,,7,3,a,2,u,,1n,,,,c,,9,,14,,3,,1l,3,5,3,,4,7,2,b,2,t,,1m,,2,,2,,3,,5,2,7,2,b,2,s,2,1l,2,,,2,4,8,,9,,a,2,t,,20,,4,,2,3,,,8,,29,,2,7,c,8,2q,,2,9,b,6,22,2,r,,,,,,1j,e,,5,,2,5,b,,10,9,,2u,4,,6,,2,2,2,p,2,4,3,g,4,d,,2,2,6,,f,,jj,3,qa,3,t,3,t,2,u,2,1s,2,,7,8,,2,b,9,,19,3,3b,2,y,,3a,3,4,2,9,,6,3,63,2,2,,1m,,,7,,,,,2,8,6,a,2,,1c,h,1r,4,1c,7,,,5,,14,9,c,2,w,4,2,2,,3,1k,,,2,3,,,3,1m,8,2,2,48,3,,d,,7,4,,6,,3,2,5i,1m,,5,ek,,5f,x,2da,3,3x,,2o,w,fe,6,2x,2,n9w,4,,a,w,2,28,2,7k,,3,,4,,p,2,5,,47,2,q,i,d,,12,8,p,b,1a,3,1c,,2,4,2,2,13,,1v,6,2,2,2,2,c,,8,,1b,,1f,,,3,2,2,5,2,,,16,2,8,,6m,,2,,4,,fn4,,kh,g,g,g,a6,2,gt,,6a,,45,5,1ae,3,,2,5,4,14,3,4,,4l,2,fx,4,ar,2,49,b,4w,,1i,f,1k,3,1d,4,2,2,1x,3,10,5,,8,1q,,c,2,1g,9,a,4,2,,2n,3,2,,,2,6,,4g,,3,8,l,2,1l,2,,,,,m,,e,7,3,5,5f,8,2,3,,,n,,29,,2,6,,,2,,,2,,2,6j,,2,4,6,2,,2,r,2,2d,8,2,,,2,2y,,,,2,6,,,2t,3,2,4,,5,77,9,,2,6t,,a,2,,,4,,40,4,2,2,4,,w,a,14,6,2,4,8,,9,6,2,3,1a,d,,2,ba,7,,6,,,2a,m,2,7,,2,,2,3e,6,3,,,2,,7,,,20,2,3,,,,9n,2,f0b,5,1n,7,t4,,1r,4,29,,f5k,2,43q,,,3,4,5,8,8,2,7,u,4,44,3,1iz,1j,4,1e,8,,e,,m,5,,f,11s,7,,h,2,7,,2,,5,79,7,c5,4,15s,7,31,7,240,5,gx7k,2o,3k,6o".split(",").map((s) => s ? parseInt(s, 36) : 1);
@@ -535,7 +539,7 @@ function nextClusterBreak(str, pos, includeExtending) {
 	return pos;
 }
 function prevClusterBreak(str, pos, includeExtending) {
-	while (pos > 0) {
+	while (pos > 1) {
 		let found = nextClusterBreak(str, pos - 2, includeExtending);
 		if (found < pos) return found;
 		pos--;
@@ -560,7 +564,7 @@ function codePointSize(code) {
 }
 
 //#endregion
-//#region node_modules/.pnpm/@codemirror+state@6.5.4/node_modules/@codemirror/state/dist/index.js
+//#region node_modules/.pnpm/@codemirror+state@6.7.1/node_modules/@codemirror/state/dist/index.js
 /**
 The data structure for documents. @nonabstract
 */
@@ -1621,10 +1625,11 @@ is enabled, a [selection](https://codemirror.net/6/docs/ref/#state.EditorSelecti
 multiple ranges. By default, selections hold exactly one range.
 */
 var SelectionRange = class SelectionRange {
-	constructor(from, to, flags) {
+	constructor(from, to, flags, goalColumn) {
 		this.from = from;
 		this.to = to;
 		this.flags = flags;
+		this.goalColumn = goalColumn;
 	}
 	/**
 	The anchor of the range—the side that doesn't move when you
@@ -1656,6 +1661,16 @@ var SelectionRange = class SelectionRange {
 		return this.flags & 8 ? -1 : this.flags & 16 ? 1 : 0;
 	}
 	/**
+	A flag that, when set, makes some selection-extending commands
+	treat the range's head and anchor as exchangeable, so that for
+	example Shift-ArrowUp will make the lower side of the selection
+	the anchor, even if that was the head before. Used to implement
+	MacOS-style undirectional selections.
+	*/
+	get undirectional() {
+		return (this.flags & 64) > 0;
+	}
+	/**
 	The bidirectional text level associated with this cursor, if
 	any.
 	*/
@@ -1664,16 +1679,6 @@ var SelectionRange = class SelectionRange {
 		return level == 7 ? null : level;
 	}
 	/**
-	The goal column (stored vertical offset) associated with a
-	cursor. This is used to preserve the vertical position when
-	[moving](https://codemirror.net/6/docs/ref/#view.EditorView.moveVertically) across
-	lines of different length.
-	*/
-	get goalColumn() {
-		let value = this.flags >> 6;
-		return value == 16777215 ? void 0 : value;
-	}
-	/**
 	Map this range through a change, producing a valid range in the
 	updated document.
 	*/
@@ -1684,15 +1689,15 @@ var SelectionRange = class SelectionRange {
 			from = change.mapPos(this.from, 1);
 			to = change.mapPos(this.to, -1);
 		}
-		return from == this.from && to == this.to ? this : new SelectionRange(from, to, this.flags);
+		return from == this.from && to == this.to ? this : new SelectionRange(from, to, this.flags, this.goalColumn);
 	}
 	/**
 	Extend this range to cover at least `from` to `to`.
 	*/
-	extend(from, to = from) {
-		if (from <= this.anchor && to >= this.anchor) return EditorSelection.range(from, to);
+	extend(from, to = from, assoc = 0) {
+		if (from <= this.anchor && to >= this.anchor) return EditorSelection.range(from, to, void 0, void 0, assoc);
 		let head = Math.abs(from - this.anchor) > Math.abs(to - this.anchor) ? from : to;
-		return EditorSelection.range(this.anchor, head);
+		return EditorSelection.range(this.anchor, head, void 0, void 0, assoc);
 	}
 	/**
 	Compare this range to another range.
@@ -1720,8 +1725,8 @@ var SelectionRange = class SelectionRange {
 	/**
 	@internal
 	*/
-	static create(from, to, flags) {
-		return new SelectionRange(from, to, flags);
+	static create(from, to, flags, goalColumn) {
+		return new SelectionRange(from, to, flags, goalColumn);
 	}
 };
 /**
@@ -1822,14 +1827,23 @@ var EditorSelection = class EditorSelection {
 	safely ignore the optional arguments in most situations.
 	*/
 	static cursor(pos, assoc = 0, bidiLevel, goalColumn) {
-		return SelectionRange.create(pos, pos, (assoc == 0 ? 0 : assoc < 0 ? 8 : 16) | (bidiLevel == null ? 7 : Math.min(6, bidiLevel)) | (goalColumn !== null && goalColumn !== void 0 ? goalColumn : 16777215) << 6);
+		return SelectionRange.create(pos, pos, (assoc == 0 ? 0 : assoc < 0 ? 8 : 16) | (bidiLevel == null ? 7 : Math.min(6, bidiLevel)), goalColumn);
 	}
 	/**
 	Create a selection range.
 	*/
-	static range(anchor, head, goalColumn, bidiLevel) {
-		let flags = (goalColumn !== null && goalColumn !== void 0 ? goalColumn : 16777215) << 6 | (bidiLevel == null ? 7 : Math.min(6, bidiLevel));
-		return head < anchor ? SelectionRange.create(head, anchor, 48 | flags) : SelectionRange.create(anchor, head, (head > anchor ? 8 : 0) | flags);
+	static range(anchor, head, goalColumn, bidiLevel, assoc) {
+		let flags = bidiLevel == null ? 7 : Math.min(6, bidiLevel);
+		if (!assoc && anchor != head) assoc = head < anchor ? 1 : -1;
+		if (assoc) flags |= assoc < 0 ? 8 : 16;
+		return head < anchor ? SelectionRange.create(head, anchor, flags | 32, goalColumn) : SelectionRange.create(anchor, head, flags, goalColumn);
+	}
+	/**
+	Create an [undirectional](https://codemirror.net/6/docs/ref/#state.SelectionRange.undirectional)
+	selection range.
+	*/
+	static undirectionalRange(from, to) {
+		return SelectionRange.create(from, to, 64, void 0);
 	}
 	/**
 	@internal
@@ -1975,6 +1989,9 @@ var FacetProvider = class {
 			}
 		};
 	}
+	get extension() {
+		return this;
+	}
 };
 function compareArray(a, b, compare) {
 	if (a.length != b.length) return false;
@@ -2143,6 +2160,9 @@ var PrecExtension = class {
 		this.inner = inner;
 		this.prec = prec;
 	}
+	get extension() {
+		return this;
+	}
 };
 /**
 Extension compartments can be used to make a configuration
@@ -2182,6 +2202,9 @@ var CompartmentInstance = class {
 		this.compartment = compartment;
 		this.inner = inner;
 	}
+	get extension() {
+		return this;
+	}
 };
 var Configuration = class Configuration {
 	constructor(base, compartments, dynamicSlots, address, staticValues, facets) {
@@ -2270,7 +2293,8 @@ function flatten(extension, compartments, newCompartments) {
 			if (ext.facet.extensions) inner(ext.facet.extensions, Prec_.default);
 		} else {
 			let content = ext.extension;
-			if (!content) throw new Error(`Unrecognized extension value in extension set (${ext}). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.`);
+			if (!content) throw new Error(`Unrecognized extension value in extension set (${ext}).`);
+			if (content == ext) throw new Error(`Unrecognized extension value in extension set (${ext}). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.`);
 			inner(content, prec);
 		}
 	}
@@ -11511,12 +11535,13 @@ const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, on
 	});
 };
 const Items = ({ value, render, onChange, onChildChange }) => {
-	const { objectItems, primitiveItems, allElements } = useMemo(() => {
+	const { objectItems, primitiveItems, allElements, parseError } = useMemo(() => {
 		const ast = parseArrayExpression(value);
 		if (!ast) return {
 			objectItems: [],
 			primitiveItems: [],
-			allElements: []
+			allElements: [],
+			parseError: true
 		};
 		const objectItems = [];
 		const primitiveItems = [];
@@ -11564,14 +11589,21 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 		return {
 			objectItems,
 			primitiveItems,
-			allElements
+			allElements,
+			parseError: false
 		};
 	}, [value]);
+	useEffect(() => {
+		if (parseError) Toast.error("Failed to parse items", { description: "Check the console for details." });
+	}, [parseError]);
 	const isPrimitive = primitiveItems.length > 0 && objectItems.length === 0;
 	const selection = useMultiSelect(isPrimitive ? primitiveItems.length : objectItems.length);
 	const updatePrimitive = (index, next) => {
 		const ast = parseArrayExpression(value);
-		if (!ast) return;
+		if (!ast) {
+			Toast.error("Failed to update this item", { description: "Check the console for details." });
+			return;
+		}
 		const elements = ast.elements.filter(Boolean);
 		const item = primitiveItems.find((p) => p.index === index);
 		if (!item) return;
@@ -12514,26 +12546,32 @@ const Node = ({ data, onChange }) => {
 
 //#endregion
 //#region src/components/dnd/panel/panel.tsx
-const Panel = ({ item, onChange }) => {
-	const { dataAttrNodes, updatedCode } = useMemo(() => {
+const Panel = ({ item, onChange, onDelete }) => {
+	const { dataAttrNodes, updatedCode, parseError } = useMemo(() => {
 		if (!item?.code) return {
 			dataAttrNodes: [],
-			updatedCode: ""
+			updatedCode: "",
+			parseError: false
 		};
 		try {
 			const updatedCode = fillIds(item.code);
 			return {
 				dataAttrNodes: extract(updatedCode).filter((node) => node.tagName !== "section"),
-				updatedCode: updatedCode !== item.code ? updatedCode : item.code
+				updatedCode: updatedCode !== item.code ? updatedCode : item.code,
+				parseError: false
 			};
 		} catch (e) {
 			console.warn("⚠️ Parsing error", e);
 			return {
 				dataAttrNodes: [],
-				updatedCode: ""
+				updatedCode: "",
+				parseError: true
 			};
 		}
 	}, [item?.code]);
+	useEffect(() => {
+		if (parseError) Toast.error("Failed to parse this section", { description: "Check the console for details." });
+	}, [parseError]);
 	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
 		className: cn("p-4 text-sm text-gray-500"),
 		children: "Please select a section."
@@ -12541,9 +12579,16 @@ const Panel = ({ item, onChange }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("h-full space-y-4 p-4", "overflow-x-hidden overflow-y-auto"),
 		children: [
-			/* @__PURE__ */ jsx(Typography.Title, {
-				className: "text-lg font-semibold",
-				children: item.name
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx(Typography.Title, {
+					className: "text-lg font-semibold",
+					children: item.name
+				}), onDelete && /* @__PURE__ */ jsx(Button, {
+					danger: true,
+					icon: /* @__PURE__ */ jsx(Trash, {}),
+					onClick: () => onDelete(item.id)
+				})]
 			}),
 			!dataAttrNodes.length && /* @__PURE__ */ jsx(Typography.Text, {
 				className: "text-xs text-gray-400",
@@ -12552,9 +12597,14 @@ const Panel = ({ item, onChange }) => {
 			dataAttrNodes.map((node, index) => /* @__PURE__ */ jsx(Node, {
 				data: node,
 				onChange: ({ id, label, value }) => {
+					const result = update(updatedCode, id, label, value);
+					if (!result.success) {
+						Toast.error("Failed to update this field", { description: "Check the console for details." });
+						return;
+					}
 					onChange?.({
 						...item,
-						code: update(updatedCode, id, label, value)
+						code: result.code
 					});
 				}
 			}, `${item.id}-${index}`))
@@ -12578,6 +12628,7 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 	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 onDragStart = (_) => {};
 	const onDragOver = (_e) => {};
 	const onDragEnd = (event) => {
@@ -12714,16 +12765,15 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 						}) : /* @__PURE__ */ jsx(SortableContext, {
 							items: sections.map((s) => s.id),
 							strategy: verticalListSortingStrategy,
-							children: sections.map((section) => /* @__PURE__ */ jsx(Sortable, {
+							children: sections.map((section, index) => /* @__PURE__ */ jsx(Sortable, {
 								id: section.id,
 								name: section.name,
 								selected: selectedId === section.id,
 								onClick: () => onSelect(section.id),
 								onDelete,
 								onCopy,
-								children: /* @__PURE__ */ jsx(Renderer, {
-									fullCode: value,
-									code: section.code,
+								children: /* @__PURE__ */ jsx(renderer_default, {
+									preview: previews[index],
 									modules,
 									frame,
 									provider,
@@ -12737,7 +12787,8 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 					className: "hidden w-1/5 md:block",
 					children: /* @__PURE__ */ jsx(Panel, {
 						item: sections.find((s) => s.id === selectedId),
-						onChange
+						onChange,
+						onDelete
 					})
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -12767,7 +12818,8 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 					title: "Properties",
 					children: /* @__PURE__ */ jsx(Panel, {
 						item: sections.find((s) => s.id === selectedId),
-						onChange
+						onChange,
+						onDelete
 					})
 				})
 			]