@reacteditor/core 0.0.6 → 0.0.7

package/dist/index.js

@@ -1846,12 +1846,14 @@ function insertAction(state, action, appStore) {
   const componentConfig = appStore.config.components[action.componentType];
   const isGlobalType = (componentConfig == null ? void 0 : componentConfig.global) === true;
   const defaultProps = (componentConfig == null ? void 0 : componentConfig.defaultProps) || {};
+  const sourceData = action.data ? __spreadProps(__spreadValues({}, action.data), { props: __spreadProps(__spreadValues({}, action.data.props), { id }) }) : __spreadValues({
+    type: action.componentType,
+    props: __spreadProps(__spreadValues({}, defaultProps), { id })
+  }, isGlobalType ? { synced: true } : {});
   const emptyComponentData = populateIds(
-    __spreadValues({
-      type: action.componentType,
-      props: __spreadProps(__spreadValues({}, defaultProps), { id })
-    }, isGlobalType ? { synced: true } : {}),
-    appStore.config
+    sourceData,
+    appStore.config,
+    !!action.data
   );
   const [parentId] = action.destinationZone.split(":");
   const idsInPath = getIdsForParent(action.destinationZone, state);
@@ -5449,7 +5451,6 @@ __export(index_exports, {
   Button: () => Button,
   ComponentList: () => ComponentList,
   Drawer: () => Drawer,
-  DropZone: () => DropZone,
   Editor: () => Editor4,
   FieldLabel: () => FieldLabel,
   Group: () => Group,
@@ -5473,6 +5474,7 @@ __export(index_exports, {
   transformProps: () => transformProps,
   useEditor: () => useEditor2,
   useGetEditor: () => useGetEditor,
+  usePropsContext: () => usePropsContext,
   walkTree: () => walkTree
 });
 module.exports = __toCommonJS(index_exports);
@@ -11274,7 +11276,7 @@ init_IconButton2();
 
 // components/Editor/index.tsx
 init_react_import();
-var import_react93 = require("react");
+var import_react94 = require("react");
 init_store();
 
 // components/Editor/components/Fields/index.tsx
@@ -12555,8 +12557,134 @@ function resolveDataBySelector(selector, getState, trigger) {
   });
 }
 
+// lib/editor-commands.ts
+init_react_import();
+init_get_item();
+init_generate_id();
+init_root_droppable_id();
+var parentToZone = (parent) => parent ? `${parent.id}:${parent.slot}` : rootDroppableId;
+var createEditorCommands = (appStore) => {
+  const { getState } = appStore;
+  const getZoneLength = (zone) => {
+    var _a, _b;
+    return (_b = (_a = getState().state.indexes.zones[zone]) == null ? void 0 : _a.contentIds.length) != null ? _b : 0;
+  };
+  const insertComponent2 = ({
+    type,
+    parent,
+    index,
+    data,
+    select = true
+  }) => {
+    var _a;
+    const id = (_a = data == null ? void 0 : data.props.id) != null ? _a : generateId(type);
+    const zone = parentToZone(parent);
+    const destIndex = index != null ? index : getZoneLength(zone);
+    const dispatch = getState().dispatch;
+    dispatch(__spreadValues({
+      type: "insert",
+      componentType: type,
+      destinationIndex: destIndex,
+      destinationZone: zone,
+      id
+    }, data ? { data: __spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { id }) }) } : {}));
+    if (select) {
+      dispatch({
+        type: "setUi",
+        ui: { itemSelector: { index: destIndex, zone } }
+      });
+    }
+    return { id };
+  };
+  const removeComponent = (id) => {
+    const sel = getSelectorForId(getState().state, id);
+    if (!(sel == null ? void 0 : sel.zone)) return;
+    getState().dispatch({ type: "remove", index: sel.index, zone: sel.zone });
+  };
+  const duplicateComponent = (id) => {
+    const sel = getSelectorForId(getState().state, id);
+    if (!(sel == null ? void 0 : sel.zone)) return;
+    getState().dispatch({
+      type: "duplicate",
+      sourceIndex: sel.index,
+      sourceZone: sel.zone
+    });
+  };
+  const moveComponent2 = (id, to) => {
+    const sel = getSelectorForId(getState().state, id);
+    if (!(sel == null ? void 0 : sel.zone)) return;
+    getState().dispatch({
+      type: "move",
+      sourceIndex: sel.index,
+      sourceZone: sel.zone,
+      destinationIndex: to.index,
+      destinationZone: parentToZone(to.parent)
+    });
+  };
+  const replaceComponent = (id, data) => {
+    const sel = getSelectorForId(getState().state, id);
+    if (!(sel == null ? void 0 : sel.zone)) return;
+    const existing = getItem(sel, getState().state);
+    if (!existing) return;
+    getState().dispatch({
+      type: "replace",
+      destinationIndex: sel.index,
+      destinationZone: sel.zone,
+      data: __spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { id: existing.props.id }) })
+    });
+  };
+  const updateProps = (id, updater) => {
+    const sel = getSelectorForId(getState().state, id);
+    if (!sel) return;
+    const existing = getItem(sel, getState().state);
+    if (!existing) return;
+    const patch = typeof updater === "function" ? updater(existing.props) : updater;
+    getState().dispatch({
+      type: "replace",
+      destinationIndex: sel.index,
+      destinationZone: sel.zone,
+      data: __spreadProps(__spreadValues({}, existing), {
+        props: __spreadProps(__spreadValues(__spreadValues({}, existing.props), patch), { id: existing.props.id })
+      })
+    });
+  };
+  const updateRoot = (updater) => {
+    var _a, _b;
+    const root = (_a = getState().state.data.root) != null ? _a : { props: {} };
+    const prevProps = (_b = root.props) != null ? _b : {};
+    const patch = typeof updater === "function" ? updater(prevProps) : updater;
+    getState().dispatch({
+      type: "replaceRoot",
+      root: __spreadProps(__spreadValues({}, root), { props: __spreadValues(__spreadValues({}, prevProps), patch) })
+    });
+  };
+  const selectComponent = (id) => {
+    const dispatch = getState().dispatch;
+    if (id === null) {
+      dispatch({ type: "setUi", ui: { itemSelector: null } });
+      return;
+    }
+    const sel = getSelectorForId(getState().state, id);
+    if (!(sel == null ? void 0 : sel.zone)) return;
+    dispatch({
+      type: "setUi",
+      ui: { itemSelector: { index: sel.index, zone: sel.zone } }
+    });
+  };
+  return {
+    insertComponent: insertComponent2,
+    removeComponent,
+    duplicateComponent,
+    moveComponent: moveComponent2,
+    replaceComponent,
+    updateProps,
+    updateRoot,
+    selectComponent
+  };
+};
+
 // lib/use-editor.ts
-var generateUseEditor = (store, getState) => {
+var generateUseEditor = (store, getState, commands) => {
   const history = {
     back: store.history.back,
     forward: store.history.forward,
@@ -12567,7 +12695,7 @@ var generateUseEditor = (store, getState) => {
     histories: store.history.histories,
     index: store.history.index
   };
-  const storeData = {
+  const storeData = __spreadProps(__spreadValues({}, commands), {
     appState: makeStatePublic(store.state),
     config: store.config,
     dispatch: store.dispatch,
@@ -12588,7 +12716,7 @@ var generateUseEditor = (store, getState) => {
       if (!parentNode) return;
       return parentNode.data;
     }
-  };
+  });
   storeData.__private = {
     appState: store.state
   };
@@ -12608,11 +12736,13 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUseEditorStore = (appStore) => {
+  const [commands] = (0, import_react81.useState)(() => createEditorCommands(appStore));
   const [useEditorStore] = (0, import_react81.useState)(
     () => (0, import_zustand7.createStore)(
       () => generateUseEditor(
         convertToPickedStore(appStore.getState()),
-        appStore.getState
+        appStore.getState,
+        commands
       )
     )
   );
@@ -12620,10 +12750,12 @@ var useRegisterUseEditorStore = (appStore) => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
-        useEditorStore.setState(generateUseEditor(pickedStore, appStore.getState));
+        useEditorStore.setState(
+          generateUseEditor(pickedStore, appStore.getState, commands)
+        );
       }
     );
-  }, []);
+  }, [commands]);
   return useEditorStore;
 };
 function createUseEditor() {
@@ -12708,7 +12840,7 @@ init_to_component();
 
 // components/Editor/components/Layout/index.tsx
 init_react_import();
-var import_react92 = require("react");
+var import_react93 = require("react");
 init_lib();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Layout/styles.module.css#css-module
@@ -13638,6 +13770,9 @@ init_react_import();
 var import_react91 = require("react");
 init_use_hotkey();
 init_store();
+
+// lib/should-block-editing-hotkey.ts
+init_react_import();
 var isElementVisible = (element) => {
   let current = element;
   while (current && current !== document.body) {
@@ -13649,7 +13784,7 @@ var isElementVisible = (element) => {
   }
   return true;
 };
-var shouldBlockDeleteHotkey = (e) => {
+var shouldBlockEditingHotkey = (e) => {
   var _a;
   if (e == null ? void 0 : e.defaultPrevented) return true;
   const origin = ((_a = e == null ? void 0 : e.composedPath) == null ? void 0 : _a.call(e)[0]) || (e == null ? void 0 : e.target) || document.activeElement;
@@ -13670,12 +13805,14 @@ var shouldBlockDeleteHotkey = (e) => {
   }
   return false;
 };
+
+// lib/use-delete-hotkeys.ts
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
   const deleteSelectedComponent = (0, import_react91.useCallback)(
     (e) => {
       var _a;
-      if (shouldBlockDeleteHotkey(e)) {
+      if (shouldBlockEditingHotkey(e)) {
         return false;
       }
       const { state, dispatch, permissions, selectedItem } = appStore.getState();
@@ -13696,6 +13833,100 @@ var useDeleteHotkeys = () => {
   useHotkey({ backspace: true }, deleteSelectedComponent);
 };
 
+// lib/use-clipboard-hotkeys.ts
+init_react_import();
+var import_react92 = require("react");
+init_use_hotkey();
+init_store();
+var CLIPBOARD_MARKER = "reacteditor/component";
+var isComponentData = (value) => {
+  var _a;
+  if (!value || typeof value !== "object") return false;
+  const v = value;
+  return typeof v.type === "string" && typeof ((_a = v.props) == null ? void 0 : _a.id) === "string";
+};
+var parsePayload = (text) => {
+  try {
+    const parsed = JSON.parse(text);
+    if (parsed && typeof parsed === "object" && parsed.__reactEditor === CLIPBOARD_MARKER && isComponentData(parsed.data)) {
+      return parsed.data;
+    }
+  } catch (e) {
+  }
+  return null;
+};
+var useClipboardHotkeys = () => {
+  const appStore = useAppStoreApi();
+  const writeSelectionToClipboard = (0, import_react92.useCallback)(() => {
+    var _a;
+    const { selectedItem } = appStore.getState();
+    if (!selectedItem) return false;
+    const payload = {
+      __reactEditor: CLIPBOARD_MARKER,
+      data: selectedItem
+    };
+    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(JSON.stringify(payload)).catch(() => {
+    });
+    return true;
+  }, [appStore]);
+  const copySelectedComponent = (0, import_react92.useCallback)(
+    (e) => {
+      if (shouldBlockEditingHotkey(e)) return false;
+      return writeSelectionToClipboard();
+    },
+    [writeSelectionToClipboard]
+  );
+  const cutSelectedComponent = (0, import_react92.useCallback)(
+    (e) => {
+      var _a;
+      if (shouldBlockEditingHotkey(e)) return false;
+      const { state, dispatch, permissions, selectedItem } = appStore.getState();
+      const sel = (_a = state.ui) == null ? void 0 : _a.itemSelector;
+      if (!(sel == null ? void 0 : sel.zone) || !selectedItem) return false;
+      if (!permissions.getPermissions({ item: selectedItem }).delete)
+        return true;
+      if (!writeSelectionToClipboard()) return false;
+      dispatch({
+        type: "remove",
+        index: sel.index,
+        zone: sel.zone
+      });
+      return true;
+    },
+    [appStore, writeSelectionToClipboard]
+  );
+  const pasteComponent = (0, import_react92.useCallback)(
+    (e) => {
+      var _a, _b;
+      if (shouldBlockEditingHotkey(e)) return false;
+      const { state, dispatch, config } = appStore.getState();
+      const sel = (_a = state.ui) == null ? void 0 : _a.itemSelector;
+      if (!(sel == null ? void 0 : sel.zone)) return false;
+      (_b = navigator.clipboard) == null ? void 0 : _b.readText().then((text) => {
+        const data = parsePayload(text);
+        if (!data) return;
+        if (!config.components[data.type]) return;
+        dispatch({
+          type: "insert",
+          componentType: data.type,
+          destinationIndex: sel.index + 1,
+          destinationZone: sel.zone,
+          data
+        });
+      }).catch(() => {
+      });
+      return true;
+    },
+    [appStore]
+  );
+  useHotkey({ meta: true, c: true }, copySelectedComponent);
+  useHotkey({ ctrl: true, c: true }, copySelectedComponent);
+  useHotkey({ meta: true, v: true }, pasteComponent);
+  useHotkey({ ctrl: true, v: true }, pasteComponent);
+  useHotkey({ meta: true, x: true }, cutSelectedComponent);
+  useHotkey({ ctrl: true, x: true }, cutSelectedComponent);
+};
+
 // components/Editor/components/Nav/index.tsx
 init_react_import();
 
@@ -13892,7 +14123,7 @@ var Layout = ({ children }) => {
     plugins,
     height
   } = usePropsContext();
-  const iframe = (0, import_react92.useMemo)(
+  const iframe = (0, import_react93.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -13918,7 +14149,7 @@ var Layout = ({ children }) => {
     sidebarRef: rightSidebarRef,
     handleResizeEnd: handleRightSidebarResizeEnd
   } = useSidebarResize("right", dispatch);
-  (0, import_react92.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -13942,17 +14173,17 @@ var Layout = ({ children }) => {
     };
   }, []);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomEditor = (0, import_react92.useMemo)(
+  const CustomEditor = (0, import_react93.useMemo)(
     () => overrides.editor || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = (0, import_react92.useState)(false);
-  (0, import_react92.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react93.useState)(false);
+  (0, import_react93.useEffect)(() => {
     setMounted(true);
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  (0, import_react92.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -13962,6 +14193,7 @@ var Layout = ({ children }) => {
   }, [ready, iframe.enabled]);
   usePreviewModeHotkeys();
   useDeleteHotkeys();
+  useClipboardHotkeys();
   const layoutOptions = {};
   if (leftWidth) {
     layoutOptions["--editor-user-left-side-bar-width"] = `${leftWidth}px`;
@@ -13975,15 +14207,15 @@ var Layout = ({ children }) => {
     return (_a = s.state.ui.plugin) == null ? void 0 : _a.current;
   });
   const appStoreApi = useAppStoreApi();
-  const [mobilePanelHeightMode, setMobilePanelHeightMode] = (0, import_react92.useState)("toggle");
-  const [mobilePanelHeight, setMobilePanelHeight] = (0, import_react92.useState)(
+  const [mobilePanelHeightMode, setMobilePanelHeightMode] = (0, import_react93.useState)("toggle");
+  const [mobilePanelHeight, setMobilePanelHeight] = (0, import_react93.useState)(
     null
   );
-  const mobilePanelRef = (0, import_react92.useRef)(null);
-  const isDraggingMobile = (0, import_react92.useRef)(false);
-  const dragStartY = (0, import_react92.useRef)(0);
-  const dragStartHeight = (0, import_react92.useRef)(0);
-  const handleMobileDragStart = (0, import_react92.useCallback)(
+  const mobilePanelRef = (0, import_react93.useRef)(null);
+  const isDraggingMobile = (0, import_react93.useRef)(false);
+  const dragStartY = (0, import_react93.useRef)(0);
+  const dragStartHeight = (0, import_react93.useRef)(0);
+  const handleMobileDragStart = (0, import_react93.useCallback)(
     (clientY) => {
       isDraggingMobile.current = true;
       dragStartY.current = clientY;
@@ -13994,7 +14226,7 @@ var Layout = ({ children }) => {
     },
     []
   );
-  const handleMobileDragMove = (0, import_react92.useCallback)((clientY) => {
+  const handleMobileDragMove = (0, import_react93.useCallback)((clientY) => {
     if (!isDraggingMobile.current) return;
     const delta = dragStartY.current - clientY;
     const viewportHeight = window.innerHeight;
@@ -14003,13 +14235,13 @@ var Layout = ({ children }) => {
     const newH = Math.min(maxH, Math.max(minH, dragStartHeight.current + delta));
     setMobilePanelHeight(newH);
   }, []);
-  const handleMobileDragEnd = (0, import_react92.useCallback)(() => {
+  const handleMobileDragEnd = (0, import_react93.useCallback)(() => {
     if (!isDraggingMobile.current) return;
     isDraggingMobile.current = false;
     document.body.style.userSelect = "";
     document.body.style.touchAction = "";
   }, []);
-  (0, import_react92.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     const onTouchMove = (e) => {
       if (isDraggingMobile.current) {
         e.preventDefault();
@@ -14035,13 +14267,13 @@ var Layout = ({ children }) => {
       document.removeEventListener("mouseup", onMouseUp);
     };
   }, [handleMobileDragMove, handleMobileDragEnd]);
-  const [theme, setTheme] = (0, import_react92.useState)(() => {
+  const [theme, setTheme] = (0, import_react93.useState)(() => {
     if (typeof window === "undefined") return "light";
     const stored = window.localStorage.getItem("editor-theme");
     if (stored === "light" || stored === "dark") return stored;
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   });
-  (0, import_react92.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (typeof window === "undefined") return;
     window.localStorage.setItem("editor-theme", theme);
   }, [theme]);
@@ -14050,11 +14282,11 @@ var Layout = ({ children }) => {
   };
   const themeIcon = theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Sun, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Moon, { size: 18 });
   const themeLabel = theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
-  const hasLegacySideBarPlugin = (0, import_react92.useMemo)(
+  const hasLegacySideBarPlugin = (0, import_react93.useMemo)(
     () => !!(plugins == null ? void 0 : plugins.find((p) => p.name === "legacy-side-bar")),
     [plugins]
   );
-  const pluginItems = (0, import_react92.useMemo)(() => {
+  const pluginItems = (0, import_react93.useMemo)(() => {
     const details = {};
     const defaultPlugins = [blocksPlugin(), outlinePlugin()];
     const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
@@ -14101,7 +14333,7 @@ var Layout = ({ children }) => {
     });
     return details;
   }, [plugins, currentPlugin, appStoreApi, leftSideBarVisible]);
-  (0, import_react92.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (!currentPlugin) {
       const names = Object.keys(pluginItems);
       setUi({ plugin: { current: names[0] } });
@@ -14241,11 +14473,11 @@ var Layout = ({ children }) => {
 
 // components/Editor/index.tsx
 var import_jsx_runtime93 = require("react/jsx-runtime");
-var propsContext = (0, import_react93.createContext)({});
+var propsContext = (0, import_react94.createContext)({});
 function PropsProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react93.useContext)(propsContext);
+var usePropsContext = () => (0, import_react94.useContext)(propsContext);
 function EditorProvider({ children }) {
   const {
     config,
@@ -14264,14 +14496,14 @@ function EditorProvider({ children }) {
     fullScreenCanvas,
     _experimentalVirtualization
   } = usePropsContext();
-  const iframe = (0, import_react93.useMemo)(
+  const iframe = (0, import_react94.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = (0, import_react93.useState)(() => {
+  const [generatedAppState] = (0, import_react94.useState)(() => {
     var _a, _b, _c, _d, _e, _f;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -14323,7 +14555,7 @@ function EditorProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = (0, import_react93.useState)(
+  const [blendedHistories] = (0, import_react94.useState)(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -14337,7 +14569,7 @@ function EditorProvider({ children }) {
       });
     })
   );
-  const initialHistoryIndex = (0, import_react93.useMemo)(() => {
+  const initialHistoryIndex = (0, import_react94.useMemo)(() => {
     if ((_initialHistory == null ? void 0 : _initialHistory.index) !== void 0 && (_initialHistory == null ? void 0 : _initialHistory.index) >= 0 && (_initialHistory == null ? void 0 : _initialHistory.index) < blendedHistories.length) {
       return _initialHistory == null ? void 0 : _initialHistory.index;
     }
@@ -14348,7 +14580,7 @@ function EditorProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = (0, import_react93.useMemo)(() => {
+  const loadedFieldTransforms = (0, import_react94.useMemo)(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
@@ -14357,7 +14589,7 @@ function EditorProvider({ children }) {
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = (0, import_react93.useCallback)(
+  const generateAppStore = (0, import_react94.useCallback)(
     (state) => {
       return {
         instanceId,
@@ -14389,15 +14621,15 @@ function EditorProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = (0, import_react93.useState)(
+  const [appStore] = (0, import_react94.useState)(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  (0, import_react93.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  (0, import_react93.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [generateAppStore]);
@@ -14406,8 +14638,8 @@ function EditorProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = (0, import_react93.useRef)(null);
-  (0, import_react93.useEffect)(() => {
+  const previousData = (0, import_react94.useRef)(null);
+  (0, import_react94.useEffect)(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -14421,7 +14653,7 @@ function EditorProvider({ children }) {
   }, [onChange, config]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uEditorStore = useRegisterUseEditorStore(appStore);
-  (0, import_react93.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     setTimeout(() => {
       resolveAndCommitData();
@@ -14732,7 +14964,6 @@ var legacySideBarPlugin = () => ({
   Button,
   ComponentList,
   Drawer,
-  DropZone,
   Editor,
   FieldLabel,
   Group,
@@ -14756,6 +14987,7 @@ var legacySideBarPlugin = () => ({
   transformProps,
   useEditor,
   useGetEditor,
+  usePropsContext,
   walkTree
 });
 /*! Bundled license information:

package/dist/index.mjs

@@ -3,7 +3,6 @@ import {
   Button,
   ComponentList,
   Drawer,
-  DropZone,
   Editor,
   FieldLabel,
   Render,
@@ -18,14 +17,15 @@ import {
   renderContext,
   setDeep,
   useEditor,
-  useGetEditor
-} from "./chunk-HCFEY5Y7.mjs";
-import "./chunk-DB4R5IWG.mjs";
+  useGetEditor,
+  usePropsContext
+} from "./chunk-W5I2Z7QS.mjs";
+import "./chunk-RNRHREWH.mjs";
 import {
   migrate,
   resolveAllData,
   transformProps
-} from "./chunk-275EJPEB.mjs";
+} from "./chunk-TI3KC54Y.mjs";
 import "./chunk-6QJ2HF4O.mjs";
 import {
   Action,
@@ -35,17 +35,17 @@ import {
   Label,
   RichTextMenu,
   Separator
-} from "./chunk-BRDUM7MJ.mjs";
-import "./chunk-Z6IIVDFY.mjs";
-import "./chunk-6LG4Q4HO.mjs";
-import "./chunk-WGPCLAZR.mjs";
-import "./chunk-CRF2GWQA.mjs";
-import "./chunk-UB2DES2O.mjs";
-import "./chunk-VOLQMQPK.mjs";
+} from "./chunk-JUC25FB7.mjs";
+import "./chunk-XI7YTBCP.mjs";
+import "./chunk-EEQGJ6FH.mjs";
+import "./chunk-ZLSPSBV3.mjs";
+import "./chunk-AAK2555H.mjs";
+import "./chunk-M4JDRFYB.mjs";
+import "./chunk-IIRJMJFU.mjs";
 import "./chunk-Y2EFNT5P.mjs";
 import {
   walkTree
-} from "./chunk-GAUBBDIR.mjs";
+} from "./chunk-JIXMPJZA.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";
@@ -59,7 +59,6 @@ export {
   Button,
   ComponentList,
   Drawer,
-  DropZone,
   Editor,
   FieldLabel,
   Group,
@@ -83,5 +82,6 @@ export {
   transformProps,
   useEditor,
   useGetEditor,
+  usePropsContext,
   walkTree
 };