@jbpark/live-editor 2.0.1 → 2.0.3

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.
Files changed (38) hide show
  1. package/dist/{ast-BmGLa00g.js → ast-BhbOxomw.js} +194 -21
  2. package/dist/ast-BhbOxomw.js.map +1 -0
  3. package/dist/{boundary-b-U70XU_.js → boundary-DOBK2HnX.js} +2 -2
  4. package/dist/{boundary-b-U70XU_.js.map → boundary-DOBK2HnX.js.map} +1 -1
  5. package/dist/{context-Yb81ZxnN.js → context-DOMX_RsU.js} +3 -3
  6. package/dist/{context-Yb81ZxnN.js.map → context-DOMX_RsU.js.map} +1 -1
  7. package/dist/{core-mdFWxqB2.js → core-D-ZvVhdn.js} +2 -2
  8. package/dist/{core-mdFWxqB2.js.map → core-D-ZvVhdn.js.map} +1 -1
  9. package/dist/dnd/index.d.ts +1 -1
  10. package/dist/dnd/index.js +1 -1
  11. package/dist/{dnd-DXI5JfwJ.js → dnd-E8LbmRfE.js} +86 -189
  12. package/dist/dnd-E8LbmRfE.js.map +1 -0
  13. package/dist/{document-DEx4WyCn.js → document-Ddw-tfnt.js} +37 -155
  14. package/dist/{document-DEx4WyCn.js.map → document-Ddw-tfnt.js.map} +1 -1
  15. package/dist/editor/index.js +2 -2
  16. package/dist/{editor-jzeeLkwi.js → editor-ka05eWyz.js} +3 -3
  17. package/dist/{editor-jzeeLkwi.js.map → editor-ka05eWyz.js.map} +1 -1
  18. package/dist/error/index.js +2 -2
  19. package/dist/{error-C47PVZgY.js → error-fzPGTaFe.js} +2 -2
  20. package/dist/{error-C47PVZgY.js.map → error-fzPGTaFe.js.map} +1 -1
  21. package/dist/{index-7J3AYBNK.d.ts → index-2CUWhF-T.d.ts} +2 -2
  22. package/dist/{index-Wh6AGoXW.d.ts → index-FKgYmeNR.d.ts} +21 -2
  23. package/dist/index.d.ts +1 -1
  24. package/dist/index.js +5 -5
  25. package/dist/preview/index.js +1 -1
  26. package/dist/{preview-8OZDsfGT.js → preview-EsfzEjis.js} +4 -4
  27. package/dist/{preview-8OZDsfGT.js.map → preview-EsfzEjis.js.map} +1 -1
  28. package/dist/provider/index.js +1 -1
  29. package/dist/{use-dynamic-tailwind-_3tC-S5j.js → use-dynamic-tailwind-CRMGuKnH.js} +2 -2
  30. package/dist/{use-dynamic-tailwind-_3tC-S5j.js.map → use-dynamic-tailwind-CRMGuKnH.js.map} +1 -1
  31. package/dist/utils/ast/index.d.ts +2 -2
  32. package/dist/utils/ast/index.js +3 -3
  33. package/dist/utils/index.js +2 -2
  34. package/dist/{utils-CXq1KaM3.js → utils-B6zpA7mT.js} +2 -2
  35. package/dist/{utils-CXq1KaM3.js.map → utils-B6zpA7mT.js.map} +1 -1
  36. package/package.json +1 -1
  37. package/dist/ast-BmGLa00g.js.map +0 -1
  38. package/dist/dnd-DXI5JfwJ.js.map +0 -1
@@ -1,2 +1,2 @@
1
- import { a as ICON_OPTIONS, c as PanelRenderData, d as DraggableItemDragState, f as DraggableItemProps, i as ICON_MAP, l as Props, n as Panel, o as PaletteRenderData, r as PanelProps, s as PanelBinding, t as Dnd, u as DraggableItem } from "../index-7J3AYBNK.js";
1
+ import { a as ICON_OPTIONS, c as PanelRenderData, d as DraggableItemDragState, f as DraggableItemProps, i as ICON_MAP, l as Props, n as Panel, o as PaletteRenderData, r as PanelProps, s as PanelBinding, t as Dnd, u as DraggableItem } from "../index-2CUWhF-T.js";
2
2
  export { Panel as DefaultPanel, DraggableItem, type DraggableItemDragState, type DraggableItemProps, ICON_MAP, ICON_OPTIONS, type PaletteRenderData, type PanelBinding, type PanelProps, type PanelRenderData, type Props, Dnd as default };
package/dist/dnd/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import { a as DraggableItem, i as ICON_OPTIONS, n as Panel, r as ICON_MAP, t as Dnd } from "../dnd-DXI5JfwJ.js";
1
+ import { a as DraggableItem, i as ICON_OPTIONS, n as Panel, r as ICON_MAP, t as Dnd } from "../dnd-E8LbmRfE.js";
2
2
  export { Panel as DefaultPanel, DraggableItem, ICON_MAP, ICON_OPTIONS, Dnd as default };
@@ -1,10 +1,10 @@
1
- import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, h as require_lib, m as require_lib$1, n as createSectionPreviewCache, r as fillSectionIds, y as DEFAULT_TEMPLATE } from "./document-DEx4WyCn.js";
2
- import { d as replaceSections, o as extractSections, r as cn, s as generateSection, u as preloadScripts } from "./utils-CXq1KaM3.js";
1
+ import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, m as require_lib, n as createSectionPreviewCache, r as fillSectionIds, y as DEFAULT_TEMPLATE } from "./document-Ddw-tfnt.js";
2
+ import { d as replaceSections, o as extractSections, r as cn, s as generateSection, u as preloadScripts } from "./utils-B6zpA7mT.js";
3
3
  import { i as usePreview } from "./states-Ci1AvoQ9.js";
4
- import { S as generateCode, _ as extractObjectProperties, b as parseValue, c as extract, d as getStructuredValue, f as parseBinding, g as extractNodeValue, h as createNodeFromValue, i as replaceIds, l as findEditableChildren, m as arrayExpressionToCode, n as clone, o as update, r as fillIds, t as validateBindingValue, u as getCurrentValue, y as parseArrayExpression } from "./ast-BmGLa00g.js";
5
- import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-_3tC-S5j.js";
6
- import { n as Error, t as ErrorBoundary } from "./boundary-b-U70XU_.js";
7
- import { t as Core } from "./core-mdFWxqB2.js";
4
+ import { A as parseValue, D as extractObjectProperties, E as extractNodeValue, M as generateCode, S as parseBinding, _ as moveSelectedIndices, a as extract, b as getCurrentValue, c as moveArrayItem, d as removeArrayItems, f as updateArrayItemProperty, g as replaceIds, h as fillIds, k as parseArrayExpression, l as moveArrayItems, o as appendArrayItem, p as updateArrayItemValue, r as update, s as duplicateArrayItems, t as validateBindingValue, v as removeIndices, x as getStructuredValue, y as findEditableChildren } from "./ast-BhbOxomw.js";
5
+ import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-CRMGuKnH.js";
6
+ import { n as Error, t as ErrorBoundary } from "./boundary-DOBK2HnX.js";
7
+ import { t as Core } from "./core-D-ZvVhdn.js";
8
8
  import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
9
9
  import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, Select, Space, Toast, Typography, Upload } from "@jbpark/ui-kit";
10
10
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -190,8 +190,7 @@ const Tiptap = ({ value = "", placeholder = "Enter text...", className, onChange
190
190
  };
191
191
  //#endregion
192
192
  //#region src/components/dnd/panel/node.tsx
193
- var import_lib = require_lib();
194
- var import_lib$1 = /* @__PURE__ */ __toESM(require_lib$1(), 1);
193
+ var import_lib = /* @__PURE__ */ __toESM(require_lib(), 1);
195
194
  const Node = ({ data, onChange }) => {
196
195
  const idAttr = data.dataAttributes.find((a) => a.name === "data-id");
197
196
  const bindingAttr = data.dataAttributes.find((a) => a.name === "data-binding");
@@ -249,33 +248,6 @@ const Node = ({ data, onChange }) => {
249
248
  });
250
249
  };
251
250
  //#endregion
252
- //#region src/components/dnd/panel/selection.ts
253
- const removeIndices = (items, indices) => {
254
- return items.filter((_, index) => !indices.has(index));
255
- };
256
- /**
257
- * Shifts every selected index up/down by one step as a block, preserving
258
- * relative order — scattered selections stop moving individually once they
259
- * hit an unselected neighbor, so the whole group slides together instead of
260
- * items passing through each other.
261
- */
262
- const moveSelectedIndices = (items, indices, direction) => {
263
- const next = [...items];
264
- const nextIndices = new Set(indices);
265
- const ordered = [...indices].sort((a, b) => direction === "up" ? a - b : b - a);
266
- for (const index of ordered) {
267
- const target = direction === "up" ? index - 1 : index + 1;
268
- if (target < 0 || target >= next.length || nextIndices.has(target)) continue;
269
- [next[index], next[target]] = [next[target], next[index]];
270
- nextIndices.delete(index);
271
- nextIndices.add(target);
272
- }
273
- return {
274
- items: next,
275
- indices: nextIndices
276
- };
277
- };
278
- //#endregion
279
251
  //#region src/components/dnd/panel/items.tsx
280
252
  const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
281
253
  if (count === 0) return null;
@@ -322,33 +294,30 @@ const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, on
322
294
  });
323
295
  };
324
296
  const Items = ({ value, render, onChange, onChildChange }) => {
325
- const { objectItems, primitiveItems, allElements, parseError } = useMemo(() => {
297
+ const { objectItems, primitiveItems, parseError } = useMemo(() => {
326
298
  const ast = parseArrayExpression(value);
327
299
  if (!ast) return {
328
300
  objectItems: [],
329
301
  primitiveItems: [],
330
- allElements: [],
331
302
  parseError: true
332
303
  };
333
304
  const objectItems = [];
334
305
  const primitiveItems = [];
335
- const allElements = ast.elements.filter(Boolean);
336
- ast.elements.forEach((element) => {
337
- if (!element) return;
338
- if (!import_lib$1.isObjectExpression(element)) {
306
+ ast.elements.filter((element) => Boolean(element)).forEach((element, elementIndex) => {
307
+ if (!import_lib.isObjectExpression(element)) {
339
308
  const extracted = extractNodeValue(element);
340
309
  primitiveItems.push({
341
310
  id: nanoid(6),
342
311
  index: primitiveItems.length,
312
+ elementIndex,
343
313
  value: extracted.value,
344
- type: extracted.type,
345
- astNode: element
314
+ type: extracted.type
346
315
  });
347
316
  return;
348
317
  }
349
318
  const jsxBindings = {};
350
319
  element.properties.forEach((prop) => {
351
- if (!import_lib$1.isObjectProperty(prop) || !import_lib$1.isIdentifier(prop.key) || !import_lib$1.isJSXElement(prop.value)) return;
320
+ if (!import_lib.isObjectProperty(prop) || !import_lib.isIdentifier(prop.key) || !import_lib.isJSXElement(prop.value)) return;
352
321
  const propertyName = prop.key.name;
353
322
  try {
354
323
  const jsxCode = generateCode(prop.value);
@@ -369,15 +338,14 @@ const Items = ({ value, render, onChange, onChildChange }) => {
369
338
  objectItems.push({
370
339
  id: nanoid(6),
371
340
  index: objectItems.length,
341
+ elementIndex,
372
342
  editableProperties: extractObjectProperties(element),
373
- originalElement: element,
374
343
  jsxBindings
375
344
  });
376
345
  });
377
346
  return {
378
347
  objectItems,
379
348
  primitiveItems,
380
- allElements,
381
349
  parseError: false
382
350
  };
383
351
  }, [value]);
@@ -386,158 +354,77 @@ const Items = ({ value, render, onChange, onChildChange }) => {
386
354
  }, [parseError]);
387
355
  const isPrimitive = primitiveItems.length > 0 && objectItems.length === 0;
388
356
  const selection = useMultiSelect(isPrimitive ? primitiveItems.length : objectItems.length);
389
- const updatePrimitive = (index, next) => {
390
- const ast = parseArrayExpression(value);
391
- if (!ast) {
357
+ const commit = (next) => {
358
+ if (next === null) {
392
359
  Toast.error("Failed to update this item", { description: "Check the console for details." });
393
360
  return;
394
361
  }
395
- const elements = ast.elements.filter(Boolean);
396
- const item = primitiveItems.find((p) => p.index === index);
397
- if (!item) return;
398
- const newNode = createNodeFromValue(item.type, parseValue(next));
399
- if (!newNode) return;
400
- elements[index] = newNode;
401
- onChange?.(generateCode(import_lib$1.arrayExpression(elements)));
362
+ onChange?.(next);
363
+ };
364
+ const elementIndicesOf = (items, indices) => {
365
+ return new Set(items.filter((item) => indices.has(item.index)).map((item) => item.elementIndex));
402
366
  };
403
- const movePrimitive = (fromIndex, toIndex) => {
404
- const nextElements = [...allElements];
405
- const [moved] = nextElements.splice(fromIndex, 1);
406
- nextElements.splice(toIndex, 0, moved);
407
- onChange?.(generateCode(import_lib$1.arrayExpression(nextElements)));
367
+ const updatePrimitive = (elementIndex, next) => {
368
+ commit(updateArrayItemValue(value, elementIndex, next));
369
+ };
370
+ const movePrimitive = (from, to) => {
371
+ const target = primitiveItems.find((item) => item.index === to);
372
+ if (!target) return;
373
+ commit(moveArrayItem(value, from, target.elementIndex));
374
+ selection.clear();
408
375
  };
409
376
  const deleteSelectedPrimitives = (indices) => {
410
- if (allElements.length - indices.size < 1) return;
411
- const nextElements = removeIndices(allElements, indices);
412
- onChange?.(generateCode(import_lib$1.arrayExpression(nextElements)));
377
+ commit(removeArrayItems(value, elementIndicesOf(primitiveItems, indices), "primitive"));
378
+ };
379
+ const deletePrimitive = (elementIndex) => {
380
+ commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), "primitive"));
381
+ selection.clear();
413
382
  };
414
- const deletePrimitive = (index) => deleteSelectedPrimitives(/* @__PURE__ */ new Set([index]));
415
383
  const addPrimitive = () => {
416
- const first = primitiveItems[0];
417
- if (!first) return;
418
- const newNode = createNodeFromValue(first.type, first.value);
419
- if (!newNode) return;
420
- onChange?.(generateCode(import_lib$1.arrayExpression([...allElements, newNode])));
384
+ commit(appendArrayItem(value, "primitive"));
421
385
  };
422
386
  const duplicateSelectedPrimitives = (indices) => {
423
- const clones = [...indices].sort((a, b) => a - b).map((index) => allElements[index]).filter((node) => Boolean(node)).map((node) => clone(node));
424
- if (clones.length === 0) return;
425
- onChange?.(generateCode(import_lib$1.arrayExpression([...allElements, ...clones])));
387
+ commit(duplicateArrayItems(value, elementIndicesOf(primitiveItems, indices)));
426
388
  };
427
389
  const moveSelectedPrimitives = (indices, direction) => {
428
- const { items: nextElements, indices: nextIndices } = moveSelectedIndices(allElements, indices, direction);
429
- selection.replace(nextIndices);
430
- onChange?.(generateCode(import_lib$1.arrayExpression(nextElements)));
431
- };
432
- const moveItem = (fromIndex, toIndex) => {
433
- const nextItems = [...objectItems];
434
- const [movedItem] = nextItems.splice(fromIndex, 1);
435
- nextItems.splice(toIndex, 0, movedItem);
436
- const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
437
- onChange?.(nextValue);
438
- };
439
- const updateProperty = (itemIndex, propertyKey, value) => {
440
- const item = objectItems[itemIndex];
441
- const property = item.editableProperties[propertyKey];
442
- const renderLeaf = render?.[propertyKey] && "type" in render[propertyKey] ? render[propertyKey] : null;
443
- const isJsx = renderLeaf?.type === "jsx";
444
- const isInnerHTML = renderLeaf?.property === BINDING_PROP.INNER_HTML;
445
- let nextAstValue = null;
446
- if (isInnerHTML) {
447
- const str = String(value);
448
- nextAstValue = import_lib$1.templateLiteral([import_lib$1.templateElement({
449
- raw: str,
450
- cooked: str
451
- }, true)], []);
452
- } else if (property.type === "array" || property.type === "object") try {
453
- nextAstValue = (0, import_lib.parseExpression)(String(value), { plugins: ["jsx", "typescript"] });
454
- } catch {
390
+ const result = moveArrayItems(value, elementIndicesOf(primitiveItems, indices), direction);
391
+ if (!result) {
392
+ commit(null);
455
393
  return;
456
394
  }
457
- else if (!isJsx) nextAstValue = createNodeFromValue(property.type, value);
458
- if (!isJsx && !nextAstValue) return;
459
- const targetProperty = item.originalElement.properties.find((prop) => import_lib$1.isObjectProperty(prop) && import_lib$1.isIdentifier(prop.key) && prop.key.name === propertyKey);
460
- const jsxPlaceholders = /* @__PURE__ */ new Map();
461
- const originalValues = /* @__PURE__ */ new Map();
462
- if (isJsx && targetProperty) {
463
- const trimmed = String(value).trim();
464
- if (trimmed.startsWith("<")) {
465
- const placeholder = `__JSX_${nanoid(6)}__`;
466
- jsxPlaceholders.set(placeholder, trimmed);
467
- targetProperty.value = import_lib$1.identifier(placeholder);
468
- } else targetProperty.value = import_lib$1.stringLiteral(trimmed);
469
- } else if (targetProperty && nextAstValue) targetProperty.value = nextAstValue;
470
- objectItems.forEach((obj) => {
471
- obj.originalElement.properties.forEach((prop) => {
472
- if (!import_lib$1.isObjectProperty(prop) || !import_lib$1.isIdentifier(prop.key)) return;
473
- if (import_lib$1.isJSXElement(prop.value) || import_lib$1.isJSXFragment(prop.value)) {
474
- const placeholder = `__JSX_${nanoid(6)}__`;
475
- jsxPlaceholders.set(placeholder, generateCode(prop.value));
476
- originalValues.set(prop, prop.value);
477
- prop.value = import_lib$1.identifier(placeholder);
478
- }
479
- });
480
- });
481
- let nextValue = arrayExpressionToCode(objectItems.map((item) => item.originalElement));
482
- for (const [prop, original] of originalValues) prop.value = original;
483
- for (const [placeholder, code] of jsxPlaceholders) nextValue = nextValue.replace(placeholder, () => code);
484
- onChange?.(nextValue);
395
+ selection.replace(result.indices);
396
+ commit(result.code);
397
+ };
398
+ const moveItem = (from, to) => {
399
+ const target = objectItems.find((item) => item.index === to);
400
+ if (!target) return;
401
+ commit(moveArrayItem(value, from, target.elementIndex));
402
+ selection.clear();
403
+ };
404
+ const updateProperty = (elementIndex, propertyKey, next) => {
405
+ commit(updateArrayItemProperty(value, elementIndex, propertyKey, next, render));
485
406
  };
486
407
  const deleteSelectedItems = (indices) => {
487
- if (objectItems.length - indices.size < 1) return;
488
- const nextItems = removeIndices(objectItems, indices);
489
- const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
490
- onChange?.(nextValue);
408
+ commit(removeArrayItems(value, elementIndicesOf(objectItems, indices), "object"));
491
409
  };
492
- const deleteItem = (index) => deleteSelectedItems(/* @__PURE__ */ new Set([index]));
493
- const cloneObjectItemElement = (source) => {
494
- const clonedElement = clone(source.originalElement);
495
- clonedElement.properties.forEach((prop) => {
496
- if (import_lib$1.isObjectProperty(prop) && import_lib$1.isIdentifier(prop.key)) {
497
- const key = prop.key.name;
498
- const editableProp = source.editableProperties[key];
499
- if (key === "key" && import_lib$1.isStringLiteral(prop.value)) {
500
- const uniqueKey = `${prop.value.value}-${nanoid(6)}`;
501
- prop.value = import_lib$1.stringLiteral(uniqueKey);
502
- return;
503
- }
504
- if (editableProp) {
505
- const nextValue = createNodeFromValue(editableProp.type, editableProp.value);
506
- if (nextValue) prop.value = nextValue;
507
- }
508
- }
509
- });
510
- return clonedElement;
410
+ const deleteItem = (elementIndex) => {
411
+ commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), "object"));
412
+ selection.clear();
511
413
  };
512
414
  const addItem = () => {
513
- const firstItem = objectItems[0];
514
- if (!firstItem) return;
515
- const clonedElement = cloneObjectItemElement(firstItem);
516
- const editableProperties = extractObjectProperties(clonedElement);
517
- const nextItems = [...objectItems];
518
- const newItemData = {
519
- id: nanoid(6),
520
- index: nextItems.length,
521
- editableProperties,
522
- originalElement: clonedElement,
523
- jsxBindings: {}
524
- };
525
- nextItems.push(newItemData);
526
- const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
527
- onChange?.(nextValue);
415
+ commit(appendArrayItem(value, "object"));
528
416
  };
529
417
  const duplicateSelectedItems = (indices) => {
530
- const sources = [...indices].sort((a, b) => a - b).map((index) => objectItems[index]).filter((item) => Boolean(item));
531
- if (sources.length === 0) return;
532
- const clonedElements = sources.map(cloneObjectItemElement);
533
- const nextValue = arrayExpressionToCode([...objectItems.map((item) => item.originalElement), ...clonedElements]);
534
- onChange?.(nextValue);
418
+ commit(duplicateArrayItems(value, elementIndicesOf(objectItems, indices)));
535
419
  };
536
420
  const moveSelectedItems = (indices, direction) => {
537
- const { items: nextItems, indices: nextIndices } = moveSelectedIndices(objectItems, indices, direction);
538
- selection.replace(nextIndices);
539
- const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
540
- onChange?.(nextValue);
421
+ const result = moveArrayItems(value, elementIndicesOf(objectItems, indices), direction);
422
+ if (!result) {
423
+ commit(null);
424
+ return;
425
+ }
426
+ selection.replace(result.indices);
427
+ commit(result.code);
541
428
  };
542
429
  if (isPrimitive) return /* @__PURE__ */ jsxs("div", {
543
430
  className: "space-y-4",
@@ -589,20 +476,20 @@ const Items = ({ value, render, onChange, onChildChange }) => {
589
476
  size: "small",
590
477
  icon: /* @__PURE__ */ jsx(ArrowUp, {}),
591
478
  disabled: i === 0,
592
- onClick: () => movePrimitive(item.index, item.index - 1)
479
+ onClick: () => movePrimitive(item.elementIndex, item.index - 1)
593
480
  }),
594
481
  /* @__PURE__ */ jsx(Button, {
595
482
  size: "small",
596
483
  icon: /* @__PURE__ */ jsx(ArrowDown, {}),
597
484
  disabled: i === primitiveItems.length - 1,
598
- onClick: () => movePrimitive(item.index, item.index + 1)
485
+ onClick: () => movePrimitive(item.elementIndex, item.index + 1)
599
486
  }),
600
487
  /* @__PURE__ */ jsx(Button, {
601
488
  danger: true,
602
489
  size: "small",
603
490
  icon: /* @__PURE__ */ jsx(X, {}),
604
491
  disabled: primitiveItems.length <= 1,
605
- onClick: () => deletePrimitive(item.index)
492
+ onClick: () => deletePrimitive(item.elementIndex)
606
493
  })
607
494
  ]
608
495
  })]
@@ -613,7 +500,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
613
500
  property: item.type,
614
501
  value: item.value ?? "",
615
502
  rawValue: String(item.value ?? ""),
616
- onChange: (next) => updatePrimitive(item.index, next)
503
+ onChange: (next) => updatePrimitive(item.elementIndex, next)
617
504
  },
618
505
  onNodeChange: onChildChange
619
506
  })]
@@ -678,20 +565,20 @@ const Items = ({ value, render, onChange, onChildChange }) => {
678
565
  size: "small",
679
566
  icon: /* @__PURE__ */ jsx(ArrowUp, {}),
680
567
  disabled: item.index === 0,
681
- onClick: () => moveItem(item.index, item.index - 1)
568
+ onClick: () => moveItem(item.elementIndex, item.index - 1)
682
569
  }),
683
570
  /* @__PURE__ */ jsx(Button, {
684
571
  size: "small",
685
572
  icon: /* @__PURE__ */ jsx(ArrowDown, {}),
686
573
  disabled: item.index === objectItems.length - 1,
687
- onClick: () => moveItem(item.index, item.index + 1)
574
+ onClick: () => moveItem(item.elementIndex, item.index + 1)
688
575
  }),
689
576
  /* @__PURE__ */ jsx(Button, {
690
577
  danger: true,
691
578
  size: "small",
692
579
  icon: /* @__PURE__ */ jsx(X, {}),
693
580
  disabled: objectItems.length <= 1,
694
- onClick: () => deleteItem(item.index)
581
+ onClick: () => deleteItem(item.elementIndex)
695
582
  })
696
583
  ]
697
584
  })]
@@ -712,7 +599,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
712
599
  render: render?.[key] && "type" in render[key] ? render[key].render : render?.[key] && !("type" in render[key]) ? render[key] : void 0,
713
600
  value: parseValue(String(prop.value)),
714
601
  rawValue: String(prop.value),
715
- onChange: (next) => updateProperty(item.index, key, parseValue(next))
602
+ onChange: (next) => updateProperty(item.elementIndex, key, next)
716
603
  },
717
604
  onNodeChange: onChildChange
718
605
  })]
@@ -1061,6 +948,12 @@ const ColorPickerField = ({ value, onChange }) => {
1061
948
  const Field = ({ binding, onNodeChange }) => {
1062
949
  const { id, value, rawValue, onChange } = binding;
1063
950
  const [validationError, setValidationError] = useState(null);
951
+ const [text, setText] = useState(rawValue);
952
+ const [prevRawValue, setPrevRawValue] = useState(rawValue);
953
+ if (rawValue !== prevRawValue) {
954
+ setPrevRawValue(rawValue);
955
+ setText(rawValue);
956
+ }
1064
957
  if (binding.property === "items" || binding.property === "data" || binding.type === "array") return /* @__PURE__ */ jsx(Items, {
1065
958
  value: rawValue,
1066
959
  render: binding.render,
@@ -1139,7 +1032,7 @@ const Field = ({ binding, onNodeChange }) => {
1139
1032
  onChange
1140
1033
  });
1141
1034
  if (binding.type === "date") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
1142
- defaultValue: parseDateValue(stringValue),
1035
+ value: parseDateValue(stringValue),
1143
1036
  onChange: (date) => {
1144
1037
  const next = date ? formatDateValue(date) : "";
1145
1038
  const result = validateBindingValue(binding, next);
@@ -1156,7 +1049,8 @@ const Field = ({ binding, onNodeChange }) => {
1156
1049
  })] });
1157
1050
  if (binding.type === "url") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
1158
1051
  type: "url",
1159
- defaultValue: stringValue,
1052
+ value: text,
1053
+ onChange: (e) => setText(e.target.value),
1160
1054
  placeholder: "https://example.com",
1161
1055
  onBlur: (e) => {
1162
1056
  const next = e.target.value.trim();
@@ -1198,7 +1092,8 @@ const Field = ({ binding, onNodeChange }) => {
1198
1092
  className: "space-y-2",
1199
1093
  children: [
1200
1094
  /* @__PURE__ */ jsx(Input, {
1201
- defaultValue: stringValue,
1095
+ value: text,
1096
+ onChange: (e) => setText(e.target.value),
1202
1097
  placeholder: "Enter an image URL",
1203
1098
  onBlur: (e) => {
1204
1099
  const next = e.target.value.trim();
@@ -1230,7 +1125,8 @@ const Field = ({ binding, onNodeChange }) => {
1230
1125
  }
1231
1126
  if (binding.type === "number" || typeof value === "number") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
1232
1127
  type: "number",
1233
- defaultValue: stringValue,
1128
+ value: text,
1129
+ onChange: (e) => setText(e.target.value),
1234
1130
  placeholder: "Enter a numeric value",
1235
1131
  onBlur: (e) => {
1236
1132
  const raw = e.target.value.trim();
@@ -1248,7 +1144,8 @@ const Field = ({ binding, onNodeChange }) => {
1248
1144
  children: validationError
1249
1145
  })] });
1250
1146
  return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input.TextArea, {
1251
- defaultValue: rawValue,
1147
+ value: text,
1148
+ onChange: (e) => setText(e.target.value),
1252
1149
  placeholder: "Enter a value",
1253
1150
  onBlur: (e) => {
1254
1151
  const raw = e.target.value.trim();
@@ -1688,4 +1585,4 @@ Dnd.DefaultPanel = Panel;
1688
1585
  //#endregion
1689
1586
  export { DraggableItem as a, ICON_OPTIONS as i, Panel as n, ICON_MAP as r, Dnd as t };
1690
1587
 
1691
- //# sourceMappingURL=dnd-DXI5JfwJ.js.map
1588
+ //# sourceMappingURL=dnd-E8LbmRfE.js.map