@jbpark/live-editor 6.1.0 → 6.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.ko.md +8 -0
- package/README.md +8 -0
- package/dist/{boundary-CySnDUs2.js → boundary-CLMNMZFa.js} +4 -4
- package/dist/boundary-CLMNMZFa.js.map +1 -0
- package/dist/{cn-CAnad2vL.js → compile-BWZ5U59y.js} +135 -2
- package/dist/compile-BWZ5U59y.js.map +1 -0
- package/dist/{context-Bjq0CvBE.js → context-DJxX9epB.js} +2 -3
- package/dist/context-DJxX9epB.js.map +1 -0
- package/dist/{core-BNVuH8-l.js → core-BfJwD8Jx.js} +3 -6
- package/dist/core-BfJwD8Jx.js.map +1 -0
- package/dist/dnd/index.js +2 -2
- package/dist/{dnd-COjjjuD7.js → dnd-DAGjlJ0_.js} +206 -167
- package/dist/dnd-DAGjlJ0_.js.map +1 -0
- package/dist/{document-BkGWDZGc.js → document-MkQGxfry.js} +710 -318
- package/dist/document-MkQGxfry.js.map +1 -0
- package/dist/editor/index.js +2 -2
- package/dist/{editor-CvnzrM9J.js → editor-B_VOz3Q0.js} +2 -2
- package/dist/{editor-CvnzrM9J.js.map → editor-B_VOz3Q0.js.map} +1 -1
- package/dist/editor-caches-DXYXgWeD.js +63 -0
- package/dist/editor-caches-DXYXgWeD.js.map +1 -0
- package/dist/error/index.d.ts +1 -1
- package/dist/error/index.js +2 -2
- package/dist/{error-CFzvnLCf.js → error-E3T5CS3m.js} +13 -12
- package/dist/error-E3T5CS3m.js.map +1 -0
- package/dist/{index-DfIvkht8.d.ts → index-BC9hY7dI.d.ts} +5 -5
- package/dist/{index-CqsS207F.d.ts → index-D-Dfv65w.d.ts} +3 -2
- package/dist/index.d.ts +4 -4
- package/dist/index.js +5 -5
- package/dist/preview/index.d.ts +1 -1
- package/dist/preview/index.js +1 -1
- package/dist/{preview-8ejC5VP2.js → preview-DFb1pOqJ.js} +30 -11
- package/dist/preview-DFb1pOqJ.js.map +1 -0
- package/dist/provider/index.js +1 -1
- package/dist/{sections-rD8NuRI8.js → sections-CnG7OLr8.js} +3 -3
- package/dist/{sections-rD8NuRI8.js.map → sections-CnG7OLr8.js.map} +1 -1
- package/dist/states-Ci1AvoQ9.js.map +1 -1
- package/dist/style.css +74 -74
- package/dist/ui-kit/index.js +2 -2
- package/dist/ui-kit/style.css +22 -6
- package/dist/{update-DyFnX8yE.js → update-DnX2ibYn.js} +162 -43
- package/dist/update-DnX2ibYn.js.map +1 -0
- package/dist/{use-dynamic-tailwind-0nuRN57N.js → use-dynamic-tailwind-CjXeHjsr.js} +107 -25
- package/dist/use-dynamic-tailwind-CjXeHjsr.js.map +1 -0
- package/dist/{use-field-state-iQGW0vc6.js → use-field-state-B1VLhWfr.js} +2 -2
- package/dist/{use-field-state-iQGW0vc6.js.map → use-field-state-B1VLhWfr.js.map} +1 -1
- package/dist/utils/ast/index.js +1 -86
- package/dist/utils/index.js +3 -4
- package/package.json +2 -3
- package/dist/boundary-CySnDUs2.js.map +0 -1
- package/dist/cn-CAnad2vL.js.map +0 -1
- package/dist/compile-my0AjsCw.js +0 -136
- package/dist/compile-my0AjsCw.js.map +0 -1
- package/dist/constants-st9gnJ5g.js +0 -55
- package/dist/constants-st9gnJ5g.js.map +0 -1
- package/dist/context-Bjq0CvBE.js.map +0 -1
- package/dist/core-BNVuH8-l.js.map +0 -1
- package/dist/detect-typescript-CMF0FVKD.js +0 -10
- package/dist/detect-typescript-CMF0FVKD.js.map +0 -1
- package/dist/dnd-COjjjuD7.js.map +0 -1
- package/dist/document-BkGWDZGc.js.map +0 -1
- package/dist/editor-caches-ClMvdcQF.js +0 -23
- package/dist/editor-caches-ClMvdcQF.js.map +0 -1
- package/dist/error-CFzvnLCf.js.map +0 -1
- package/dist/preview-8ejC5VP2.js.map +0 -1
- package/dist/update-DyFnX8yE.js.map +0 -1
- package/dist/use-dynamic-tailwind-0nuRN57N.js.map +0 -1
- package/dist/utils/ast/index.js.map +0 -1
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
import { C as isJSXElement, D as isJSXIdentifier, E as isJSXFragment, I as isSpreadElement, L as isStringLiteral, N as isObjectExpression, O as isJSXOpeningElement, P as isObjectProperty, S as isJSXAttribute, a as inspectDocument, at as stringLiteral, b as isExpression, ct as traverseFast, d as applyEdits, dt as parseExpression, k as isJSXSpreadAttribute, l as fillIdsFrom, n as fillSectionIds, ot as templateElement, p as nanoid, st as templateLiteral, t as createSectionPreviewCache, u as replaceIds, x as isIdentifier } from "./document-
|
|
2
|
-
import {
|
|
1
|
+
import { C as isJSXElement, D as isJSXIdentifier, E as isJSXFragment, I as isSpreadElement, L as isStringLiteral, N as isObjectExpression, O as isJSXOpeningElement, P as isObjectProperty, S as isJSXAttribute, a as inspectDocument, at as stringLiteral, b as isExpression, ct as traverseFast, d as applyEdits, dt as parseExpression, k as isJSXSpreadAttribute, l as fillIdsFrom, n as fillSectionIds, ot as templateElement, p as nanoid, st as templateLiteral, t as createSectionPreviewCache, u as replaceIds, x as isIdentifier } from "./document-MkQGxfry.js";
|
|
2
|
+
import { i as BINDING_PROP, o as DATA_ATTR, u as RESERVED_BINDING_PROPERTIES } from "./editor-caches-DXYXgWeD.js";
|
|
3
3
|
import { i as useLiveMessages } from "./messages-DrINcRdG.js";
|
|
4
4
|
import { i as usePreview } from "./states-Ci1AvoQ9.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { r as
|
|
8
|
-
import {
|
|
9
|
-
import { n as
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import { t as Core } from "./core-BNVuH8-l.js";
|
|
5
|
+
import { C as parseValue, S as parseArrayExpression, T as generateCode, _ as setEditableValue, a as getChildrenSignatures, b as extractObjectProperties, c as removeIndices, d as getStructuredValue, f as readNodeBindings, g as setEditableSource, h as isEditablePrimitive, i as valueToExpression, l as findEditableChildren, m as getEditableSource, n as updateAll, o as extract, r as createNodeFromValue, s as moveSelectedIndices, u as getCurrentValue, v as canLosslesslyEvaluateSource, w as assertJsxParses, x as isLosslesslyEvaluable, y as extractNodeValue } from "./update-DnX2ibYn.js";
|
|
6
|
+
import { a as cn, r as preloadScripts } from "./compile-BWZ5U59y.js";
|
|
7
|
+
import { a as replaceSections, i as generateSection, r as extractSections } from "./sections-CnG7OLr8.js";
|
|
8
|
+
import { n as Error$1, t as ErrorBoundary } from "./boundary-CLMNMZFa.js";
|
|
9
|
+
import { a as renderStableComponent, n as useCompiledModule, o as Frame, s as useIsClient, t as useDynamicTailwind } from "./use-dynamic-tailwind-CjXeHjsr.js";
|
|
10
|
+
import { i as getFieldKind, n as FieldIdsContext, o as FieldError, r as LABELABLE_KINDS, s as fields_module_default, t as useFieldState } from "./use-field-state-B1VLhWfr.js";
|
|
11
|
+
import { t as Core } from "./core-BfJwD8Jx.js";
|
|
13
12
|
import { Children, createContext, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
14
13
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
15
14
|
import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, PointerSensor, TouchSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
|
|
@@ -1092,8 +1091,9 @@ const SectionFallback = ({ args, builtin }) => {
|
|
|
1092
1091
|
};
|
|
1093
1092
|
//#endregion
|
|
1094
1093
|
//#region src/components/dnd/canvas/renderer.tsx
|
|
1095
|
-
const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = preview, forceFallback = false,
|
|
1096
|
-
const
|
|
1094
|
+
const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = preview, forceFallback = false, componentProps, modules, frame, dynamicTailwind = false, provider }) => {
|
|
1095
|
+
const isClient = useIsClient();
|
|
1096
|
+
const module = useCompiledModule(forceFallback || !isClient ? "" : preview, modules);
|
|
1097
1097
|
const section = {
|
|
1098
1098
|
id: sectionId,
|
|
1099
1099
|
name: sectionName,
|
|
@@ -1152,7 +1152,7 @@ const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = pre
|
|
|
1152
1152
|
})
|
|
1153
1153
|
}),
|
|
1154
1154
|
children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [renderStableComponent(Component, preview, {
|
|
1155
|
-
|
|
1155
|
+
...componentProps,
|
|
1156
1156
|
container
|
|
1157
1157
|
}), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })] }))
|
|
1158
1158
|
})
|
|
@@ -1174,25 +1174,29 @@ const sameFrame = (a, b) => {
|
|
|
1174
1174
|
return [.../* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])].every((key) => sameValue(a[key], b[key]));
|
|
1175
1175
|
};
|
|
1176
1176
|
const arePropsEqual = (prev, next) => {
|
|
1177
|
-
return [.../* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)])].every((key) =>
|
|
1177
|
+
return [.../* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)])].every((key) => {
|
|
1178
|
+
if (key === "frame") return sameFrame(prev.frame, next.frame);
|
|
1179
|
+
if (key === "componentProps") return sameValue(prev.componentProps, next.componentProps);
|
|
1180
|
+
return Object.is(prev[key], next[key]);
|
|
1181
|
+
});
|
|
1178
1182
|
};
|
|
1179
1183
|
var renderer_default = memo(Renderer, arePropsEqual);
|
|
1180
1184
|
//#endregion
|
|
1181
|
-
//#region src/components/
|
|
1185
|
+
//#region src/components/chrome/button.module.css
|
|
1182
1186
|
var button_module_default = {
|
|
1183
|
-
"button": "
|
|
1184
|
-
"circle": "
|
|
1185
|
-
"danger": "
|
|
1186
|
-
"iconOnly": "
|
|
1187
|
-
"outlined": "
|
|
1188
|
-
"primary": "
|
|
1189
|
-
"small": "
|
|
1190
|
-
"solid": "
|
|
1191
|
-
"success": "
|
|
1192
|
-
"text": "
|
|
1187
|
+
"button": "d70MaW_button",
|
|
1188
|
+
"circle": "d70MaW_circle",
|
|
1189
|
+
"danger": "d70MaW_danger",
|
|
1190
|
+
"iconOnly": "d70MaW_iconOnly",
|
|
1191
|
+
"outlined": "d70MaW_outlined",
|
|
1192
|
+
"primary": "d70MaW_primary",
|
|
1193
|
+
"small": "d70MaW_small",
|
|
1194
|
+
"solid": "d70MaW_solid",
|
|
1195
|
+
"success": "d70MaW_success",
|
|
1196
|
+
"text": "d70MaW_text"
|
|
1193
1197
|
};
|
|
1194
1198
|
//#endregion
|
|
1195
|
-
//#region src/components/
|
|
1199
|
+
//#region src/components/chrome/button.tsx
|
|
1196
1200
|
const Button = ({ variant = "outlined", tone = "neutral", size = "middle", shape = "default", icon, className, children, ...restProps }) => /* @__PURE__ */ jsxs("button", {
|
|
1197
1201
|
type: "button",
|
|
1198
1202
|
className: cn(button_module_default.button, button_module_default[variant], tone !== "neutral" && button_module_default[tone], size === "small" && button_module_default.small, shape === "circle" && button_module_default.circle, icon && !children && button_module_default.iconOnly, className),
|
|
@@ -1335,22 +1339,23 @@ const Overlay = ({ sections, isForced, renderProps }) => {
|
|
|
1335
1339
|
forceFallback: isForced?.(section) ?? false,
|
|
1336
1340
|
modules: renderProps.modules,
|
|
1337
1341
|
frame: renderProps.frame,
|
|
1338
|
-
dynamicTailwind: renderProps.dynamicTailwind
|
|
1342
|
+
dynamicTailwind: renderProps.dynamicTailwind,
|
|
1343
|
+
componentProps: renderProps.componentProps
|
|
1339
1344
|
})
|
|
1340
1345
|
});
|
|
1341
1346
|
}
|
|
1342
1347
|
return null;
|
|
1343
1348
|
};
|
|
1344
1349
|
//#endregion
|
|
1345
|
-
//#region src/components/
|
|
1350
|
+
//#region src/components/chrome/toast.module.css
|
|
1346
1351
|
var toast_module_default = {
|
|
1347
|
-
"description": "
|
|
1348
|
-
"region": "
|
|
1349
|
-
"title": "
|
|
1350
|
-
"toast": "
|
|
1352
|
+
"description": "zcJzfW_description",
|
|
1353
|
+
"region": "zcJzfW_region",
|
|
1354
|
+
"title": "zcJzfW_title",
|
|
1355
|
+
"toast": "zcJzfW_toast"
|
|
1351
1356
|
};
|
|
1352
1357
|
//#endregion
|
|
1353
|
-
//#region src/components/
|
|
1358
|
+
//#region src/components/chrome/toast.ts
|
|
1354
1359
|
const TOAST_DURATION = 6e3;
|
|
1355
1360
|
let region = null;
|
|
1356
1361
|
const getRegion = () => {
|
|
@@ -1446,17 +1451,17 @@ const viewportRect = (element) => {
|
|
|
1446
1451
|
return new DOMRect(x, y, rect.width, rect.height);
|
|
1447
1452
|
};
|
|
1448
1453
|
//#endregion
|
|
1449
|
-
//#region src/components/
|
|
1454
|
+
//#region src/components/chrome/drawer.module.css
|
|
1450
1455
|
var drawer_module_default = {
|
|
1451
|
-
"body": "
|
|
1452
|
-
"content": "
|
|
1453
|
-
"drawer": "
|
|
1454
|
-
"header": "
|
|
1455
|
-
"slide-up": "
|
|
1456
|
-
"title": "
|
|
1456
|
+
"body": "SoEwJW_body",
|
|
1457
|
+
"content": "SoEwJW_content",
|
|
1458
|
+
"drawer": "SoEwJW_drawer",
|
|
1459
|
+
"header": "SoEwJW_header",
|
|
1460
|
+
"slide-up": "SoEwJW_slide-up",
|
|
1461
|
+
"title": "SoEwJW_title"
|
|
1457
1462
|
};
|
|
1458
1463
|
//#endregion
|
|
1459
|
-
//#region src/components/
|
|
1464
|
+
//#region src/components/chrome/drawer.tsx
|
|
1460
1465
|
const Drawer = ({ open, title, closeLabel, onClose, children }) => {
|
|
1461
1466
|
const titleId = useId();
|
|
1462
1467
|
const dialogRef = useRef(null);
|
|
@@ -1505,6 +1510,121 @@ const Drawer = ({ open, title, closeLabel, onClose, children }) => {
|
|
|
1505
1510
|
});
|
|
1506
1511
|
};
|
|
1507
1512
|
//#endregion
|
|
1513
|
+
//#region src/components/chrome/split-panes.module.css
|
|
1514
|
+
var split_panes_module_default = {
|
|
1515
|
+
"center": "Z4yoxa_center",
|
|
1516
|
+
"container": "Z4yoxa_container",
|
|
1517
|
+
"handle": "Z4yoxa_handle",
|
|
1518
|
+
"pane": "Z4yoxa_pane"
|
|
1519
|
+
};
|
|
1520
|
+
//#endregion
|
|
1521
|
+
//#region src/components/chrome/split-panes.tsx
|
|
1522
|
+
const DEFAULT_SIZE = 20;
|
|
1523
|
+
const MIN_SIZE = 15;
|
|
1524
|
+
const MAX_SIZE = 35;
|
|
1525
|
+
const KEYBOARD_STEP = 2;
|
|
1526
|
+
const clampSize = (size) => {
|
|
1527
|
+
if (size < MIN_SIZE / 2) return 0;
|
|
1528
|
+
return Math.min(MAX_SIZE, Math.max(MIN_SIZE, size));
|
|
1529
|
+
};
|
|
1530
|
+
const SplitPanes = ({ start, center, end, labels }) => {
|
|
1531
|
+
const containerRef = useRef(null);
|
|
1532
|
+
const [sizes, setSizes] = useState({
|
|
1533
|
+
start: DEFAULT_SIZE,
|
|
1534
|
+
end: DEFAULT_SIZE
|
|
1535
|
+
});
|
|
1536
|
+
const restoreRef = useRef({
|
|
1537
|
+
start: DEFAULT_SIZE,
|
|
1538
|
+
end: DEFAULT_SIZE
|
|
1539
|
+
});
|
|
1540
|
+
const resize = (side, size) => {
|
|
1541
|
+
if (size > 0) restoreRef.current[side] = size;
|
|
1542
|
+
setSizes((prev) => ({
|
|
1543
|
+
...prev,
|
|
1544
|
+
[side]: size
|
|
1545
|
+
}));
|
|
1546
|
+
};
|
|
1547
|
+
const onPointerDown = (side) => (e) => {
|
|
1548
|
+
const container = containerRef.current;
|
|
1549
|
+
if (!container || e.button !== 0) return;
|
|
1550
|
+
e.preventDefault();
|
|
1551
|
+
const handle = e.currentTarget;
|
|
1552
|
+
const width = container.getBoundingClientRect().width;
|
|
1553
|
+
const startX = e.clientX;
|
|
1554
|
+
const startSize = sizes[side];
|
|
1555
|
+
handle.setPointerCapture(e.pointerId);
|
|
1556
|
+
const onMove = (move) => {
|
|
1557
|
+
const delta = (move.clientX - startX) / width * 100;
|
|
1558
|
+
resize(side, clampSize(startSize + (side === "start" ? delta : -delta)));
|
|
1559
|
+
};
|
|
1560
|
+
const onUp = () => {
|
|
1561
|
+
handle.removeEventListener("pointermove", onMove);
|
|
1562
|
+
handle.removeEventListener("pointerup", onUp);
|
|
1563
|
+
handle.removeEventListener("pointercancel", onUp);
|
|
1564
|
+
};
|
|
1565
|
+
handle.addEventListener("pointermove", onMove);
|
|
1566
|
+
handle.addEventListener("pointerup", onUp);
|
|
1567
|
+
handle.addEventListener("pointercancel", onUp);
|
|
1568
|
+
};
|
|
1569
|
+
const onKeyDown = (side) => (e) => {
|
|
1570
|
+
const grow = side === "start" ? "ArrowRight" : "ArrowLeft";
|
|
1571
|
+
const shrink = side === "start" ? "ArrowLeft" : "ArrowRight";
|
|
1572
|
+
const size = sizes[side];
|
|
1573
|
+
if (e.key === grow || e.key === shrink) {
|
|
1574
|
+
e.preventDefault();
|
|
1575
|
+
const step = e.key === grow ? KEYBOARD_STEP : -2;
|
|
1576
|
+
resize(side, Math.min(MAX_SIZE, Math.max(MIN_SIZE, size + step)));
|
|
1577
|
+
return;
|
|
1578
|
+
}
|
|
1579
|
+
if (e.key === "Home" || e.key === "End") {
|
|
1580
|
+
e.preventDefault();
|
|
1581
|
+
resize(side, e.key === "Home" ? MIN_SIZE : MAX_SIZE);
|
|
1582
|
+
return;
|
|
1583
|
+
}
|
|
1584
|
+
if (e.key === "Enter") {
|
|
1585
|
+
e.preventDefault();
|
|
1586
|
+
resize(side, size > 0 ? 0 : restoreRef.current[side]);
|
|
1587
|
+
}
|
|
1588
|
+
};
|
|
1589
|
+
const handle = (side) => /* @__PURE__ */ jsx("div", {
|
|
1590
|
+
role: "separator",
|
|
1591
|
+
tabIndex: 0,
|
|
1592
|
+
"aria-orientation": "vertical",
|
|
1593
|
+
"aria-label": labels[side],
|
|
1594
|
+
"aria-valuenow": Math.round(sizes[side]),
|
|
1595
|
+
"aria-valuemin": 0,
|
|
1596
|
+
"aria-valuemax": MAX_SIZE,
|
|
1597
|
+
className: split_panes_module_default.handle,
|
|
1598
|
+
onPointerDown: onPointerDown(side),
|
|
1599
|
+
onKeyDown: onKeyDown(side),
|
|
1600
|
+
onDoubleClick: () => resize(side, sizes[side] > 0 ? 0 : restoreRef.current[side])
|
|
1601
|
+
});
|
|
1602
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
1603
|
+
ref: containerRef,
|
|
1604
|
+
className: split_panes_module_default.container,
|
|
1605
|
+
children: [
|
|
1606
|
+
/* @__PURE__ */ jsx("div", {
|
|
1607
|
+
className: split_panes_module_default.pane,
|
|
1608
|
+
style: { flexBasis: `${sizes.start}%` },
|
|
1609
|
+
hidden: sizes.start === 0,
|
|
1610
|
+
children: start
|
|
1611
|
+
}),
|
|
1612
|
+
handle("start"),
|
|
1613
|
+
/* @__PURE__ */ jsx("div", {
|
|
1614
|
+
className: split_panes_module_default.center,
|
|
1615
|
+
children: center
|
|
1616
|
+
}),
|
|
1617
|
+
handle("end"),
|
|
1618
|
+
/* @__PURE__ */ jsx("div", {
|
|
1619
|
+
className: split_panes_module_default.pane,
|
|
1620
|
+
style: { flexBasis: `${sizes.end}%` },
|
|
1621
|
+
hidden: sizes.end === 0,
|
|
1622
|
+
children: end
|
|
1623
|
+
})
|
|
1624
|
+
]
|
|
1625
|
+
});
|
|
1626
|
+
};
|
|
1627
|
+
//#endregion
|
|
1508
1628
|
//#region src/components/dnd/layout-context.ts
|
|
1509
1629
|
const DndRegionContext = createContext(null);
|
|
1510
1630
|
const useDndRegions = (subject) => {
|
|
@@ -2026,10 +2146,14 @@ const ColorField = ({ value: source, onChange, ...controlProps }) => {
|
|
|
2026
2146
|
//#endregion
|
|
2027
2147
|
//#region src/components/dnd/panel/fields/jsx-editor-field.tsx
|
|
2028
2148
|
const JSXEditorField = ({ value, isHTML, onSave }) => {
|
|
2149
|
+
const onSaveRef = useLatest(onSave);
|
|
2150
|
+
const wrapperRef = useRef(null);
|
|
2029
2151
|
const selectionRef = useRef(null);
|
|
2030
2152
|
const focusedRef = useRef(false);
|
|
2153
|
+
const textRef = useRef(value);
|
|
2031
2154
|
const handleUpdate = useCallback((update) => {
|
|
2032
2155
|
selectionRef.current = update.state.selection;
|
|
2156
|
+
if (update.docChanged) textRef.current = update.state.doc.toString();
|
|
2033
2157
|
}, []);
|
|
2034
2158
|
const handleCreateEditor = useCallback((view) => {
|
|
2035
2159
|
if (selectionRef.current) view.dispatch({ selection: selectionRef.current });
|
|
@@ -2040,8 +2164,14 @@ const JSXEditorField = ({ value, isHTML, onSave }) => {
|
|
|
2040
2164
|
}, []);
|
|
2041
2165
|
const handleBlur = useCallback((event) => {
|
|
2042
2166
|
if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focusedRef.current = false;
|
|
2043
|
-
|
|
2167
|
+
setTimeout(() => {
|
|
2168
|
+
const wrapper = wrapperRef.current;
|
|
2169
|
+
if (!wrapper || wrapper.contains(document.activeElement)) return;
|
|
2170
|
+
onSaveRef.current(textRef.current);
|
|
2171
|
+
}, 0);
|
|
2172
|
+
}, [onSaveRef]);
|
|
2044
2173
|
return /* @__PURE__ */ jsx("div", {
|
|
2174
|
+
ref: wrapperRef,
|
|
2045
2175
|
onFocusCapture: handleFocus,
|
|
2046
2176
|
onBlurCapture: handleBlur,
|
|
2047
2177
|
children: /* @__PURE__ */ jsx(Core, {
|
|
@@ -2965,6 +3095,15 @@ const BuiltinField = ({ binding, onNodeChange }) => {
|
|
|
2965
3095
|
});
|
|
2966
3096
|
if (kind === "object") {
|
|
2967
3097
|
const objectValue = value;
|
|
3098
|
+
const commitKey = (key, next) => {
|
|
3099
|
+
const current = objectValue[key];
|
|
3100
|
+
if (Object.is(next, current)) return;
|
|
3101
|
+
const edited = isEditablePrimitive(next) && isEditablePrimitive(current) ? setEditableValue(rawValue, [key], next) : typeof next === "string" && typeof current === "object" && current !== null ? setEditableSource(rawValue, [key], next) : null;
|
|
3102
|
+
onChange(edited !== null && edited !== rawValue ? edited : {
|
|
3103
|
+
...objectValue,
|
|
3104
|
+
[key]: next
|
|
3105
|
+
});
|
|
3106
|
+
};
|
|
2968
3107
|
return /* @__PURE__ */ jsx("div", {
|
|
2969
3108
|
className: fields_module_default.object,
|
|
2970
3109
|
children: Object.entries(objectValue).map(([key, val]) => {
|
|
@@ -2983,13 +3122,8 @@ const BuiltinField = ({ binding, onNodeChange }) => {
|
|
|
2983
3122
|
...toBindingFields(nested),
|
|
2984
3123
|
id,
|
|
2985
3124
|
value: val,
|
|
2986
|
-
rawValue: typeof val === "object" && val !== null ? JSON.stringify(val) : String(val),
|
|
2987
|
-
onChange: (next) =>
|
|
2988
|
-
onChange({
|
|
2989
|
-
...objectValue,
|
|
2990
|
-
[key]: next
|
|
2991
|
-
});
|
|
2992
|
-
}
|
|
3125
|
+
rawValue: typeof val === "object" && val !== null ? getEditableSource(rawValue, [key]) ?? JSON.stringify(val) : String(val),
|
|
3126
|
+
onChange: (next) => commitKey(key, next)
|
|
2993
3127
|
},
|
|
2994
3128
|
onNodeChange
|
|
2995
3129
|
})
|
|
@@ -3259,121 +3393,6 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
|
|
|
3259
3393
|
});
|
|
3260
3394
|
};
|
|
3261
3395
|
//#endregion
|
|
3262
|
-
//#region src/components/dnd/split-panes.module.css
|
|
3263
|
-
var split_panes_module_default = {
|
|
3264
|
-
"center": "s-4F9W_center",
|
|
3265
|
-
"container": "s-4F9W_container",
|
|
3266
|
-
"handle": "s-4F9W_handle",
|
|
3267
|
-
"pane": "s-4F9W_pane"
|
|
3268
|
-
};
|
|
3269
|
-
//#endregion
|
|
3270
|
-
//#region src/components/dnd/split-panes.tsx
|
|
3271
|
-
const DEFAULT_SIZE = 20;
|
|
3272
|
-
const MIN_SIZE = 15;
|
|
3273
|
-
const MAX_SIZE = 35;
|
|
3274
|
-
const KEYBOARD_STEP = 2;
|
|
3275
|
-
const clampSize = (size) => {
|
|
3276
|
-
if (size < MIN_SIZE / 2) return 0;
|
|
3277
|
-
return Math.min(MAX_SIZE, Math.max(MIN_SIZE, size));
|
|
3278
|
-
};
|
|
3279
|
-
const SplitPanes = ({ start, center, end, labels }) => {
|
|
3280
|
-
const containerRef = useRef(null);
|
|
3281
|
-
const [sizes, setSizes] = useState({
|
|
3282
|
-
start: DEFAULT_SIZE,
|
|
3283
|
-
end: DEFAULT_SIZE
|
|
3284
|
-
});
|
|
3285
|
-
const restoreRef = useRef({
|
|
3286
|
-
start: DEFAULT_SIZE,
|
|
3287
|
-
end: DEFAULT_SIZE
|
|
3288
|
-
});
|
|
3289
|
-
const resize = (side, size) => {
|
|
3290
|
-
if (size > 0) restoreRef.current[side] = size;
|
|
3291
|
-
setSizes((prev) => ({
|
|
3292
|
-
...prev,
|
|
3293
|
-
[side]: size
|
|
3294
|
-
}));
|
|
3295
|
-
};
|
|
3296
|
-
const onPointerDown = (side) => (e) => {
|
|
3297
|
-
const container = containerRef.current;
|
|
3298
|
-
if (!container || e.button !== 0) return;
|
|
3299
|
-
e.preventDefault();
|
|
3300
|
-
const handle = e.currentTarget;
|
|
3301
|
-
const width = container.getBoundingClientRect().width;
|
|
3302
|
-
const startX = e.clientX;
|
|
3303
|
-
const startSize = sizes[side];
|
|
3304
|
-
handle.setPointerCapture(e.pointerId);
|
|
3305
|
-
const onMove = (move) => {
|
|
3306
|
-
const delta = (move.clientX - startX) / width * 100;
|
|
3307
|
-
resize(side, clampSize(startSize + (side === "start" ? delta : -delta)));
|
|
3308
|
-
};
|
|
3309
|
-
const onUp = () => {
|
|
3310
|
-
handle.removeEventListener("pointermove", onMove);
|
|
3311
|
-
handle.removeEventListener("pointerup", onUp);
|
|
3312
|
-
handle.removeEventListener("pointercancel", onUp);
|
|
3313
|
-
};
|
|
3314
|
-
handle.addEventListener("pointermove", onMove);
|
|
3315
|
-
handle.addEventListener("pointerup", onUp);
|
|
3316
|
-
handle.addEventListener("pointercancel", onUp);
|
|
3317
|
-
};
|
|
3318
|
-
const onKeyDown = (side) => (e) => {
|
|
3319
|
-
const grow = side === "start" ? "ArrowRight" : "ArrowLeft";
|
|
3320
|
-
const shrink = side === "start" ? "ArrowLeft" : "ArrowRight";
|
|
3321
|
-
const size = sizes[side];
|
|
3322
|
-
if (e.key === grow || e.key === shrink) {
|
|
3323
|
-
e.preventDefault();
|
|
3324
|
-
const step = e.key === grow ? KEYBOARD_STEP : -2;
|
|
3325
|
-
resize(side, Math.min(MAX_SIZE, Math.max(MIN_SIZE, size + step)));
|
|
3326
|
-
return;
|
|
3327
|
-
}
|
|
3328
|
-
if (e.key === "Home" || e.key === "End") {
|
|
3329
|
-
e.preventDefault();
|
|
3330
|
-
resize(side, e.key === "Home" ? MIN_SIZE : MAX_SIZE);
|
|
3331
|
-
return;
|
|
3332
|
-
}
|
|
3333
|
-
if (e.key === "Enter") {
|
|
3334
|
-
e.preventDefault();
|
|
3335
|
-
resize(side, size > 0 ? 0 : restoreRef.current[side]);
|
|
3336
|
-
}
|
|
3337
|
-
};
|
|
3338
|
-
const handle = (side) => /* @__PURE__ */ jsx("div", {
|
|
3339
|
-
role: "separator",
|
|
3340
|
-
tabIndex: 0,
|
|
3341
|
-
"aria-orientation": "vertical",
|
|
3342
|
-
"aria-label": labels[side],
|
|
3343
|
-
"aria-valuenow": Math.round(sizes[side]),
|
|
3344
|
-
"aria-valuemin": 0,
|
|
3345
|
-
"aria-valuemax": MAX_SIZE,
|
|
3346
|
-
className: split_panes_module_default.handle,
|
|
3347
|
-
onPointerDown: onPointerDown(side),
|
|
3348
|
-
onKeyDown: onKeyDown(side),
|
|
3349
|
-
onDoubleClick: () => resize(side, sizes[side] > 0 ? 0 : restoreRef.current[side])
|
|
3350
|
-
});
|
|
3351
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
3352
|
-
ref: containerRef,
|
|
3353
|
-
className: split_panes_module_default.container,
|
|
3354
|
-
children: [
|
|
3355
|
-
/* @__PURE__ */ jsx("div", {
|
|
3356
|
-
className: split_panes_module_default.pane,
|
|
3357
|
-
style: { flexBasis: `${sizes.start}%` },
|
|
3358
|
-
hidden: sizes.start === 0,
|
|
3359
|
-
children: start
|
|
3360
|
-
}),
|
|
3361
|
-
handle("start"),
|
|
3362
|
-
/* @__PURE__ */ jsx("div", {
|
|
3363
|
-
className: split_panes_module_default.center,
|
|
3364
|
-
children: center
|
|
3365
|
-
}),
|
|
3366
|
-
handle("end"),
|
|
3367
|
-
/* @__PURE__ */ jsx("div", {
|
|
3368
|
-
className: split_panes_module_default.pane,
|
|
3369
|
-
style: { flexBasis: `${sizes.end}%` },
|
|
3370
|
-
hidden: sizes.end === 0,
|
|
3371
|
-
children: end
|
|
3372
|
-
})
|
|
3373
|
-
]
|
|
3374
|
-
});
|
|
3375
|
-
};
|
|
3376
|
-
//#endregion
|
|
3377
3396
|
//#region src/components/dnd/layout.tsx
|
|
3378
3397
|
const PaletteItems = ({ subject }) => {
|
|
3379
3398
|
const { palette: { items, onAdd }, isMobile } = useDndRegions(subject);
|
|
@@ -3971,6 +3990,24 @@ const useSectionEditing = ({ selectedSection, stale, problem, missingContainer,
|
|
|
3971
3990
|
});
|
|
3972
3991
|
return;
|
|
3973
3992
|
}
|
|
3993
|
+
try {
|
|
3994
|
+
assertJsxParses(result.code);
|
|
3995
|
+
} catch (error) {
|
|
3996
|
+
const { id, label, property } = changes[0];
|
|
3997
|
+
const failure = {
|
|
3998
|
+
reason: "parse-error",
|
|
3999
|
+
error
|
|
4000
|
+
};
|
|
4001
|
+
reportError({
|
|
4002
|
+
type: "update",
|
|
4003
|
+
id,
|
|
4004
|
+
label,
|
|
4005
|
+
property,
|
|
4006
|
+
failure,
|
|
4007
|
+
...describeUpdateFailure(failure, label, messages)
|
|
4008
|
+
});
|
|
4009
|
+
return;
|
|
4010
|
+
}
|
|
3974
4011
|
if (selectedSection) onChange({
|
|
3975
4012
|
...selectedSection,
|
|
3976
4013
|
code: result.code
|
|
@@ -4010,6 +4047,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
|
|
|
4010
4047
|
const modules = useStableValue(_modules);
|
|
4011
4048
|
const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
|
|
4012
4049
|
const { breakpoint } = useResponsiveSize();
|
|
4050
|
+
const dndContextId = useId();
|
|
4013
4051
|
const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
|
|
4014
4052
|
const { code } = usePreview();
|
|
4015
4053
|
const isForced = (section) => {
|
|
@@ -4153,7 +4191,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
|
|
|
4153
4191
|
frame,
|
|
4154
4192
|
dynamicTailwind,
|
|
4155
4193
|
provider,
|
|
4156
|
-
|
|
4194
|
+
componentProps: props
|
|
4157
4195
|
})
|
|
4158
4196
|
}, section.id))
|
|
4159
4197
|
})
|
|
@@ -4164,6 +4202,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
|
|
|
4164
4202
|
return /* @__PURE__ */ jsx(SectionFallbackContext.Provider, {
|
|
4165
4203
|
value: renderSectionFallback,
|
|
4166
4204
|
children: /* @__PURE__ */ jsxs(DndContext, {
|
|
4205
|
+
id: dndContextId,
|
|
4167
4206
|
sensors,
|
|
4168
4207
|
collisionDetection: closestCenter,
|
|
4169
4208
|
accessibility: {
|
|
@@ -4207,7 +4246,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
|
|
|
4207
4246
|
modules,
|
|
4208
4247
|
frame,
|
|
4209
4248
|
dynamicTailwind,
|
|
4210
|
-
|
|
4249
|
+
componentProps: props,
|
|
4211
4250
|
containerId
|
|
4212
4251
|
}
|
|
4213
4252
|
}) })]
|
|
@@ -4226,4 +4265,4 @@ Dnd.Layout = Layout;
|
|
|
4226
4265
|
//#endregion
|
|
4227
4266
|
export { Panel as a, useDndChildren as c, useDndLayout as d, useDndPalette as f, DraggableItem as h, Palette as i, resolvePanelBindings as l, useDndInspector as m, Canvas as n, Field as o, useDndPanel as p, Layout as r, useDndItems as s, Dnd as t, withPanelCommit as u };
|
|
4228
4267
|
|
|
4229
|
-
//# sourceMappingURL=dnd-
|
|
4268
|
+
//# sourceMappingURL=dnd-DAGjlJ0_.js.map
|