@reacteditor/core 0.0.6 → 0.0.8

package/dist/{chunk-275EJPEB.mjs → chunk-TI3KC54Y.mjs}

@@ -4,7 +4,7 @@ import {
 import {
   defaultAppState,
   resolveComponentData
-} from "./chunk-VOLQMQPK.mjs";
+} from "./chunk-IIRJMJFU.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-Y2EFNT5P.mjs";
@@ -15,7 +15,7 @@ import {
   toComponent,
   walkAppState,
   walkTree
-} from "./chunk-GAUBBDIR.mjs";
+} from "./chunk-JIXMPJZA.mjs";
 import {
   __async,
   __objRest,
@@ -263,22 +263,6 @@ function resolveAllData(_0, _1) {
   });
 }
 
-// lib/field-transforms/default-transforms/slot-transform.tsx
-init_react_import();
-var getSlotTransform = (renderSlotEdit, renderSlotRender = renderSlotEdit) => ({
-  slot: ({ value: content, propName, field, isReadOnly }) => {
-    const render = isReadOnly ? renderSlotRender : renderSlotEdit;
-    const Slot = (dzProps) => render(__spreadProps(__spreadValues({
-      allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
-      disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
-    }, dzProps), {
-      zone: propName,
-      content
-    }));
-    return Slot;
-  }
-});
-
 // lib/use-slots.tsx
 init_react_import();
 
@@ -326,6 +310,22 @@ function useFieldTransforms(config, item, transforms, readOnly, forceReadOnly) {
   return mergedProps;
 }
 
+// lib/field-transforms/default-transforms/slot-transform.tsx
+init_react_import();
+var getSlotTransform = (renderSlotEdit, renderSlotRender = renderSlotEdit) => ({
+  slot: ({ value: content, propName, field, isReadOnly }) => {
+    const render = isReadOnly ? renderSlotRender : renderSlotEdit;
+    const Slot = (dzProps) => render(__spreadProps(__spreadValues({
+      allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
+      disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
+    }, dzProps), {
+      zone: propName,
+      content
+    }));
+    return Slot;
+  }
+});
+
 // lib/use-slots.tsx
 function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
   return useFieldTransforms(

package/dist/{chunk-BRDUM7MJ.mjs → chunk-U7VW3V3W.mjs}

@@ -1,12 +1,12 @@
 import {
   useAlignOptions
-} from "./chunk-Z6IIVDFY.mjs";
+} from "./chunk-OIFPBVSF.mjs";
 import {
   useHeadingOptions
-} from "./chunk-6LG4Q4HO.mjs";
+} from "./chunk-AD7BMXAA.mjs";
 import {
   useListOptions
-} from "./chunk-WGPCLAZR.mjs";
+} from "./chunk-FT6UFK7G.mjs";
 import {
   AlignCenter,
   AlignJustify,
@@ -26,7 +26,7 @@ import {
   Strikethrough,
   Underline,
   useControlContext
-} from "./chunk-CRF2GWQA.mjs";
+} from "./chunk-LRFRIIKG.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-Y2EFNT5P.mjs";
@@ -349,7 +349,7 @@ function AlignSelectFallback() {
 // components/RichTextMenu/controls/AlignSelect/index.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var AlignSelectLoaded = lazy(
-  () => import("./loaded-BQVZGQG2.mjs").then((m) => ({
+  () => import("./loaded-GLBLMTBL.mjs").then((m) => ({
     default: m.AlignSelectLoaded
   }))
 );
@@ -580,7 +580,7 @@ function HeadingSelectFallback() {
 // components/RichTextMenu/controls/HeadingSelect/index.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
 var HeadingSelectLoaded = lazy2(
-  () => import("./loaded-6NPDD7SF.mjs").then((m) => ({
+  () => import("./loaded-R34BR6I5.mjs").then((m) => ({
     default: m.HeadingSelectLoaded
   }))
 );
@@ -612,7 +612,7 @@ function ListSelectFallback() {
 // components/RichTextMenu/controls/ListSelect/index.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
 var ListSelectLoaded = lazy3(
-  () => import("./loaded-6IBSSOXD.mjs").then((m) => ({
+  () => import("./loaded-O4QHGE26.mjs").then((m) => ({
     default: m.ListSelectLoaded
   }))
 );

package/dist/{full-24FOTNTB.mjs → full-ZFZZ626B.mjs}

@@ -1,14 +1,14 @@
 import {
   LoadedRichTextMenuInner
-} 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-U7VW3V3W.mjs";
+import "./chunk-OIFPBVSF.mjs";
+import "./chunk-AD7BMXAA.mjs";
+import "./chunk-FT6UFK7G.mjs";
+import "./chunk-LRFRIIKG.mjs";
+import "./chunk-M4JDRFYB.mjs";
+import "./chunk-IIRJMJFU.mjs";
 import "./chunk-Y2EFNT5P.mjs";
-import "./chunk-GAUBBDIR.mjs";
+import "./chunk-JIXMPJZA.mjs";
 import {
   __spreadValues,
   init_react_import

package/dist/{index-BOP2qNVA.d.mts → index-BNsSzMCj.d.ts}

@@ -1,4 +1,4 @@
-import { H as History, f as Permissions, b as ComponentData, C as Config, U as UserGenerics, F as Fields, E as EditorAction, g as RootDataWithProps, h as ResolveDataTrigger, i as Plugin, j as Overrides, V as Viewports, I as IframeConfig, k as UiState, l as ComponentConfig, A as AppState, M as Metadata, m as FieldTransforms, n as RichtextField } from './actions-CQmL3wwa.mjs';
+import { H as History, f as Permissions, b as ComponentData, C as Config, U as UserGenerics, F as Fields, E as EditorAction, g as RootDataWithProps, h as ResolveDataTrigger, i as Plugin, j as Overrides, V as Viewports, I as IframeConfig, k as UiState, l as ComponentConfig, A as AppState, M as Metadata, m as FieldTransforms, n as RichtextField } from './actions-2L-1hQ7r.js';
 import { Editor } from '@tiptap/react';
 
 type HistorySlice<D = any> = {
@@ -112,6 +112,7 @@ type AppStore<UserConfig extends Config = Config, G extends UserGenerics<UserCon
         editor: Editor;
         id: string;
     } | null;
+    scrollToComponent: (id: string) => void;
 };
 
 export type { AppStore as A, GetPermissions as G, HistorySlice as H, RefreshPermissions as R };

package/dist/{index-_G46lHpL.d.ts → index-BXuSeNez.d.mts}

@@ -1,4 +1,4 @@
-import { H as History, f as Permissions, b as ComponentData, C as Config, U as UserGenerics, F as Fields, E as EditorAction, g as RootDataWithProps, h as ResolveDataTrigger, i as Plugin, j as Overrides, V as Viewports, I as IframeConfig, k as UiState, l as ComponentConfig, A as AppState, M as Metadata, m as FieldTransforms, n as RichtextField } from './actions-CQmL3wwa.js';
+import { H as History, f as Permissions, b as ComponentData, C as Config, U as UserGenerics, F as Fields, E as EditorAction, g as RootDataWithProps, h as ResolveDataTrigger, i as Plugin, j as Overrides, V as Viewports, I as IframeConfig, k as UiState, l as ComponentConfig, A as AppState, M as Metadata, m as FieldTransforms, n as RichtextField } from './actions-2L-1hQ7r.mjs';
 import { Editor } from '@tiptap/react';
 
 type HistorySlice<D = any> = {
@@ -112,6 +112,7 @@ type AppStore<UserConfig extends Config = Config, G extends UserGenerics<UserCon
         editor: Editor;
         id: string;
     } | null;
+    scrollToComponent: (id: string) => void;
 };
 
 export type { AppStore as A, GetPermissions as G, HistorySlice as H, RefreshPermissions as R };

package/dist/index.css

@@ -363,10 +363,10 @@ html:not(:has(.Editor)) {
 }
 
 /* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/AutoField/styles.module.css/#css-module-data */
-._InputWrapper_1hd99_1 + ._InputWrapper_1hd99_1 {
+._InputWrapper_zwh6e_1 + ._InputWrapper_zwh6e_1 {
   margin-top: 12px;
 }
-._Input-label_1hd99_5 {
+._Input-label_zwh6e_5 {
   align-items: center;
   color: var(--editor-text-secondary);
   display: flex;
@@ -375,17 +375,17 @@ html:not(:has(.Editor)) {
   font-weight: 500;
   letter-spacing: 0.005em;
 }
-._Input-labelIcon_1hd99_15 {
+._Input-labelIcon_zwh6e_15 {
   color: var(--editor-text-tertiary);
   display: flex;
   margin-inline-end: 4px;
   padding-inline-start: 4px;
 }
-._Input-disabledIcon_1hd99_22 {
+._Input-disabledIcon_zwh6e_22 {
   color: var(--editor-text-tertiary);
   margin-inline-start: auto;
 }
-._Input-input_1hd99_27 {
+._Input-input_zwh6e_27 {
   background: var(--editor-surface-panel);
   border-width: 1px;
   border-style: solid;
@@ -395,7 +395,7 @@ html:not(:has(.Editor)) {
   color: var(--editor-text-primary);
   font-family: inherit;
   font-size: 16px;
-  padding: 10px 12px;
+  padding: 11px 12px;
   transition:
     border-color var(--editor-motion-fast) var(--editor-ease),
     box-shadow var(--editor-motion-fast) var(--editor-ease),
@@ -404,11 +404,11 @@ html:not(:has(.Editor)) {
   max-width: 100%;
 }
 @media (min-width: 458px) {
-  ._Input-input_1hd99_27 {
+  ._Input-input_zwh6e_27 {
     font-size: 13px;
   }
 }
-select._Input-input_1hd99_27 {
+select._Input-input_zwh6e_27 {
   appearance: none;
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23878a93'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
   background-size: 10px;
@@ -417,30 +417,30 @@ select._Input-input_1hd99_27 {
   background-color: var(--editor-surface-panel);
   cursor: pointer;
 }
-select._Input-input_1hd99_27:dir(rtl) {
+select._Input-input_zwh6e_27:dir(rtl) {
   background-position: 12px calc(50% + 3px);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input_1hd99_1:has(> input):hover ._Input-input_1hd99_27:not([readonly]),
-  ._Input_1hd99_1:has(> textarea):hover ._Input-input_1hd99_27:not([readonly]) {
+  ._Input_zwh6e_1:has(> input):hover ._Input-input_zwh6e_27:not([readonly]),
+  ._Input_zwh6e_1:has(> textarea):hover ._Input-input_zwh6e_27:not([readonly]) {
     border-color: var(--editor-border-strong);
     transition: none;
   }
-  ._Input_1hd99_1:has(> select):hover ._Input-input_1hd99_27:not([disabled]) {
+  ._Input_zwh6e_1:has(> select):hover ._Input-input_zwh6e_27:not([disabled]) {
     background-color: var(--editor-surface-hover);
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a5a5a'><polygon points='0,0 100,0 50,50'/></svg>");
     border-color: var(--editor-border-strong);
     transition: none;
   }
 }
-._Input-input_1hd99_27:focus {
+._Input-input_zwh6e_27:focus {
   border-color: var(--editor-accent);
   outline: none;
   box-shadow: var(--editor-ring);
   transition: none;
 }
-._Input--readOnly_1hd99_87 > ._Input-input_1hd99_27,
-._Input--readOnly_1hd99_87 > select._Input-input_1hd99_27 {
+._Input--readOnly_zwh6e_87 > ._Input-input_zwh6e_27,
+._Input--readOnly_zwh6e_87 > select._Input-input_zwh6e_27 {
   background-color: var(--editor-surface-sunken);
   border-color: var(--editor-border-subtle);
   color: var(--editor-text-secondary);
@@ -449,21 +449,21 @@ select._Input-input_1hd99_27:dir(rtl) {
   outline: 0;
   transition: none;
 }
-._Input-radioGroupItems_1hd99_98 {
+._Input-radioGroupItems_zwh6e_98 {
   display: flex;
   border: 1px solid var(--editor-border-default);
   border-radius: var(--editor-radius-md);
   flex-wrap: wrap;
   overflow: hidden;
 }
-._Input-radio_1hd99_98 {
+._Input-radio_zwh6e_98 {
   border-inline-end: 1px solid var(--editor-border-default);
   flex-grow: 1;
 }
-._Input-radio_1hd99_98:last-of-type {
+._Input-radio_zwh6e_98:last-of-type {
   border-inline-end: 0;
 }
-._Input-radioInner_1hd99_115 {
+._Input-radioInner_zwh6e_115 {
   background-color: var(--editor-surface-panel);
   color: var(--editor-text-secondary);
   cursor: pointer;
@@ -472,34 +472,34 @@ select._Input-input_1hd99_27:dir(rtl) {
   text-align: center;
   transition: background-color var(--editor-motion-fast) var(--editor-ease), color var(--editor-motion-fast) var(--editor-ease);
 }
-._Input-radio_1hd99_98:has(:focus-visible) {
+._Input-radio_zwh6e_98:has(:focus-visible) {
   outline: none;
   box-shadow: var(--editor-ring);
   position: relative;
   z-index: 1;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Input-radioInner_1hd99_115:hover {
+  ._Input-radioInner_zwh6e_115:hover {
     background-color: var(--editor-surface-hover);
     color: var(--editor-text-primary);
     transition: none;
   }
 }
-._Input--readOnly_1hd99_87 ._Input-radioInner_1hd99_115 {
+._Input--readOnly_zwh6e_87 ._Input-radioInner_zwh6e_115 {
   background-color: var(--editor-surface-sunken);
   color: var(--editor-text-secondary);
   cursor: default;
 }
-._Input-radio_1hd99_98 ._Input-radioInput_1hd99_147:checked ~ ._Input-radioInner_1hd99_115 {
+._Input-radio_zwh6e_98 ._Input-radioInput_zwh6e_147:checked ~ ._Input-radioInner_zwh6e_115 {
   background-color: var(--editor-accent-soft);
   color: var(--editor-text-accent);
   font-weight: 500;
 }
-._Input--readOnly_1hd99_87 ._Input-radioInput_1hd99_147:checked ~ ._Input-radioInner_1hd99_115 {
+._Input--readOnly_zwh6e_87 ._Input-radioInput_zwh6e_147:checked ~ ._Input-radioInner_zwh6e_115 {
   background-color: var(--editor-surface-sunken);
   color: var(--editor-text-secondary);
 }
-._Input-radio_1hd99_98 ._Input-radioInput_1hd99_147 {
+._Input-radio_zwh6e_98 ._Input-radioInput_zwh6e_147 {
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
@@ -508,7 +508,7 @@ select._Input-input_1hd99_27:dir(rtl) {
   white-space: nowrap;
   width: 1px;
 }
-textarea._Input-input_1hd99_27 {
+textarea._Input-input_zwh6e_27 {
   margin-bottom: -4px;
 }
 
@@ -757,6 +757,79 @@ textarea._Input-input_1hd99_27 {
   transition: none !important;
 }
 
+/* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/AutoField/fields/ColorField/styles.module.css/#css-module-data */
+._ColorField_1nsbe_1 {
+  align-items: center;
+  background: var(--editor-surface-panel);
+  border: 1px solid var(--editor-border-default);
+  border-radius: var(--editor-radius-md);
+  box-sizing: border-box;
+  display: flex;
+  gap: 10px;
+  padding: 4px 12px 4px 4px;
+  transition: border-color var(--editor-motion-fast) var(--editor-ease), box-shadow var(--editor-motion-fast) var(--editor-ease);
+  width: 100%;
+}
+._ColorField_1nsbe_1:focus-within {
+  border-color: var(--editor-accent);
+  box-shadow: var(--editor-ring);
+  outline: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  ._ColorField_1nsbe_1:hover:not(._ColorField--readOnly_1nsbe_24) {
+    border-color: var(--editor-border-strong);
+  }
+}
+._ColorField--readOnly_1nsbe_24 {
+  background-color: var(--editor-surface-sunken);
+  border-color: var(--editor-border-subtle);
+}
+._ColorField-swatch_1nsbe_34 {
+  background-color: currentColor;
+  border: 1px solid var(--editor-border-default);
+  border-radius: 6px;
+  cursor: pointer;
+  flex-shrink: 0;
+  height: 28px;
+  padding: 0;
+  position: relative;
+  width: 28px;
+}
+._ColorField-swatch_1nsbe_34:focus-visible {
+  outline: none;
+  box-shadow: var(--editor-ring);
+}
+._ColorField--readOnly_1nsbe_24 ._ColorField-swatch_1nsbe_34 {
+  cursor: default;
+}
+._ColorField-picker_1nsbe_57 {
+  inset: 0;
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+}
+._ColorField-text_1nsbe_64 {
+  background: transparent;
+  border: 0;
+  color: var(--editor-text-primary);
+  flex: 1;
+  font-family: inherit;
+  font-size: 16px;
+  min-width: 0;
+  outline: none;
+  padding: 0;
+}
+@media (min-width: 458px) {
+  ._ColorField-text_1nsbe_64 {
+    font-size: 13px;
+  }
+}
+._ColorField-text_1nsbe_64:disabled,
+._ColorField-text_1nsbe_64[readonly] {
+  color: var(--editor-text-secondary);
+  cursor: default;
+}
+
 /* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
 ._ExternalInput-actions_142hz_1 {
   display: flex;

package/dist/index.d.mts

@@ -1,10 +1,10 @@
-import { D as Data, o as Field, p as FieldProps, q as DropZoneProps, C as Config, U as UserGenerics, k as UiState, O as OnAction, f as Permissions, i as Plugin, j as Overrides, m as FieldTransforms, E as EditorAction, V as Viewports, I as IframeConfig, r as InitialHistory, M as Metadata, h as ResolveDataTrigger, s as ItemSelector, b as ComponentData, t as PluginInternal } from './actions-CQmL3wwa.mjs';
-export { u as Adaptor, A as AppState, v as ArrayField, w as ArrayState, x as AsFieldProps, B as BaseData, y as BaseField, z as CacheOpts, l as ComponentConfig, G as ComponentConfigExtensions, J as ComponentConfigParams, K as ComponentDataMap, L as ComponentDataOptionalId, N as ComponentMetadata, Q as ConfigParams, a as Content, S as CustomField, T as CustomFieldRender, d as DefaultComponentProps, c as DefaultComponents, e as DefaultRootFieldProps, X as DefaultRootProps, Y as DefaultRootRenderProps, Z as Direction, _ as DragAxis, $ as EditorComponent, a0 as EditorContext, a1 as EditorMetadata, a2 as ExternalField, a3 as ExternalFieldWithAdaptor, a4 as ExtractConfigParams, a5 as ExtractField, a6 as FieldMetadata, a7 as FieldRenderFunctions, a8 as FieldTransformFn, a9 as FieldTransformFnParams, F as Fields, H as History, aa as ItemWithId, ab as MappedItem, ac as NumberField, ad as ObjectField, ae as OverrideKey, af as RadioField, ag as RichText, n as RichtextField, ah as RootConfig, R as RootData, g as RootDataWithProps, ai as RootDataWithoutProps, aj as SelectField, ak as Slot, al as SlotComponent, am as SlotField, an as TextField, ao as TextareaField, ap as Viewport, aq as WithChildren, ar as WithEditorProps, W as WithId, as as WithSlotProps, at as overrideKeys } from './actions-CQmL3wwa.mjs';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Dwv3c_9M.mjs';
+import { D as Data, o as Field, p as FieldProps, C as Config, U as UserGenerics, k as UiState, O as OnAction, f as Permissions, i as Plugin, j as Overrides, m as FieldTransforms, E as EditorAction, V as Viewports, I as IframeConfig, q as InitialHistory, M as Metadata, b as ComponentData, d as DefaultComponentProps, e as DefaultRootFieldProps, h as ResolveDataTrigger, r as ItemSelector, s as PluginInternal } from './actions-2L-1hQ7r.mjs';
+export { t as Adaptor, A as AppState, u as ArrayField, v as ArrayState, w as AsFieldProps, B as BaseData, x as BaseField, y as CacheOpts, z as ColorField, l as ComponentConfig, G as ComponentConfigExtensions, J as ComponentConfigParams, K as ComponentDataMap, L as ComponentDataOptionalId, N as ComponentMetadata, Q as ConfigParams, a as Content, S as CustomField, T as CustomFieldRender, c as DefaultComponents, X as DefaultRootProps, Y as DefaultRootRenderProps, Z as Direction, _ as DragAxis, $ as EditorComponent, a0 as EditorContext, a1 as EditorMetadata, a2 as ExternalField, a3 as ExternalFieldWithAdaptor, a4 as ExtractConfigParams, a5 as ExtractField, a6 as FieldMetadata, a7 as FieldRenderFunctions, a8 as FieldTransformFn, a9 as FieldTransformFnParams, F as Fields, H as History, aa as ItemWithId, ab as MappedItem, ac as NumberField, ad as ObjectField, ae as OverrideKey, af as RadioField, ag as RichText, n as RichtextField, ah as RootConfig, R as RootData, g as RootDataWithProps, ai as RootDataWithoutProps, aj as SelectField, ak as Slot, al as SlotComponent, am as SlotField, an as TextField, ao as TextareaField, ap as Viewport, aq as WithChildren, ar as WithEditorProps, W as WithId, as as WithSlotProps, at as overrideKeys } from './actions-2L-1hQ7r.mjs';
+export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-4C3ODO3X.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';
-import { A as AppStore, G as GetPermissions, R as RefreshPermissions, H as HistorySlice } from './index-BOP2qNVA.mjs';
+import { A as AppStore, G as GetPermissions, R as RefreshPermissions, H as HistorySlice } from './index-BXuSeNez.mjs';
 import '@tiptap/react';
 import '@tiptap/extension-blockquote';
 import '@tiptap/extension-bold';
@@ -141,8 +141,6 @@ declare const Drawer: {
     }) => react_jsx_runtime.JSX.Element;
 };
 
-declare const DropZone: react.ForwardRefExoticComponent<Omit<DropZoneProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-
 declare const IconButton: ({ active, children, href, onClick, type, disabled, tabIndex, newTab, fullWidth, title, suppressHydrationWarning, }: {
     active?: boolean;
     children: ReactNode;
@@ -196,6 +194,7 @@ type EditorProps<UserConfig extends Config = Config, G extends UserGenerics<User
     disableZoomControls?: boolean;
     _experimentalVirtualization?: boolean;
 };
+declare const usePropsContext: () => EditorProps<Config, UserGenerics<Config>>;
 declare function Editor<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>(props: EditorProps<UserConfig>): react_jsx_runtime.JSX.Element;
 declare namespace Editor {
     var Components: () => react_jsx_runtime.JSX.Element;
@@ -331,7 +330,36 @@ declare const registerOverlayPortal: (el: HTMLElement | null | undefined, opts?:
  */
 declare function setDeep<T extends Record<string, any>>(node: T, path: string, newVal: any): T;
 
-type UseEditorData<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>> = {
+type Parent = {
+    id: string;
+    slot: string;
+};
+type InsertComponentArgs = {
+    type: string;
+    parent?: Parent;
+    index?: number;
+    data?: ComponentData;
+    select?: boolean;
+};
+type MoveDestination = {
+    parent?: Parent;
+    index: number;
+};
+type EditorCommands = {
+    insertComponent: (args: InsertComponentArgs) => {
+        id: string;
+    };
+    removeComponent: (id: string) => void;
+    duplicateComponent: (id: string) => void;
+    moveComponent: (id: string, to: MoveDestination) => void;
+    replaceComponent: (id: string, data: ComponentData) => void;
+    updateProps: (id: string, updater: Partial<DefaultComponentProps> | ((prev: DefaultComponentProps) => Partial<DefaultComponentProps>)) => void;
+    updateRoot: (updater: Partial<DefaultRootFieldProps> | ((prev: DefaultRootFieldProps) => Partial<DefaultRootFieldProps>)) => void;
+    selectComponent: (id: string | null) => void;
+    scrollToComponent: (id: string) => void;
+};
+
+type UseEditorData<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>> = EditorCommands & {
     appState: G["UserPublicAppState"];
     config: UserConfig;
     dispatch: AppStore["dispatch"];
@@ -385,4 +413,4 @@ declare const outlinePlugin: () => Plugin;
 
 declare const legacySideBarPlugin: () => Plugin;
 
-export { Action, ActionBar, AutoField, Button, ComponentData, ComponentList, Config, Data, Drawer, DropZone, Editor, EditorAction, type EditorApi, Field, FieldLabel, FieldProps, FieldTransforms, type GlobalsMap, Group, IconButton, IframeConfig, InitialHistory, Label, Metadata, OnAction, Overrides, type PageMetadata, Permissions, Plugin, Render, ResolveDataTrigger, RichTextMenu, type Route, Separator, UiState, type UseEditorData, UserGenerics, Viewports, blocksPlugin, createUseEditor, fieldsPlugin, legacySideBarPlugin, outlinePlugin, pageMetadata, registerOverlayPortal, renderContext, setDeep, useEditor, useGetEditor };
+export { Action, ActionBar, AutoField, Button, ComponentData, ComponentList, Config, Data, DefaultComponentProps, DefaultRootFieldProps, Drawer, Editor, EditorAction, type EditorApi, type EditorCommands, Field, FieldLabel, FieldProps, FieldTransforms, type GlobalsMap, Group, IconButton, IframeConfig, InitialHistory, type InsertComponentArgs, Label, Metadata, type MoveDestination, OnAction, Overrides, type PageMetadata, type Parent, Permissions, Plugin, Render, ResolveDataTrigger, RichTextMenu, type Route, Separator, UiState, type UseEditorData, UserGenerics, Viewports, blocksPlugin, createUseEditor, fieldsPlugin, legacySideBarPlugin, outlinePlugin, pageMetadata, registerOverlayPortal, renderContext, setDeep, useEditor, useGetEditor, usePropsContext };

package/dist/index.d.ts

@@ -1,10 +1,10 @@
-import { D as Data, o as Field, p as FieldProps, q as DropZoneProps, C as Config, U as UserGenerics, k as UiState, O as OnAction, f as Permissions, i as Plugin, j as Overrides, m as FieldTransforms, E as EditorAction, V as Viewports, I as IframeConfig, r as InitialHistory, M as Metadata, h as ResolveDataTrigger, s as ItemSelector, b as ComponentData, t as PluginInternal } from './actions-CQmL3wwa.js';
-export { u as Adaptor, A as AppState, v as ArrayField, w as ArrayState, x as AsFieldProps, B as BaseData, y as BaseField, z as CacheOpts, l as ComponentConfig, G as ComponentConfigExtensions, J as ComponentConfigParams, K as ComponentDataMap, L as ComponentDataOptionalId, N as ComponentMetadata, Q as ConfigParams, a as Content, S as CustomField, T as CustomFieldRender, d as DefaultComponentProps, c as DefaultComponents, e as DefaultRootFieldProps, X as DefaultRootProps, Y as DefaultRootRenderProps, Z as Direction, _ as DragAxis, $ as EditorComponent, a0 as EditorContext, a1 as EditorMetadata, a2 as ExternalField, a3 as ExternalFieldWithAdaptor, a4 as ExtractConfigParams, a5 as ExtractField, a6 as FieldMetadata, a7 as FieldRenderFunctions, a8 as FieldTransformFn, a9 as FieldTransformFnParams, F as Fields, H as History, aa as ItemWithId, ab as MappedItem, ac as NumberField, ad as ObjectField, ae as OverrideKey, af as RadioField, ag as RichText, n as RichtextField, ah as RootConfig, R as RootData, g as RootDataWithProps, ai as RootDataWithoutProps, aj as SelectField, ak as Slot, al as SlotComponent, am as SlotField, an as TextField, ao as TextareaField, ap as Viewport, aq as WithChildren, ar as WithEditorProps, W as WithId, as as WithSlotProps, at as overrideKeys } from './actions-CQmL3wwa.js';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-DxSkPLnl.js';
+import { D as Data, o as Field, p as FieldProps, C as Config, U as UserGenerics, k as UiState, O as OnAction, f as Permissions, i as Plugin, j as Overrides, m as FieldTransforms, E as EditorAction, V as Viewports, I as IframeConfig, q as InitialHistory, M as Metadata, b as ComponentData, d as DefaultComponentProps, e as DefaultRootFieldProps, h as ResolveDataTrigger, r as ItemSelector, s as PluginInternal } from './actions-2L-1hQ7r.js';
+export { t as Adaptor, A as AppState, u as ArrayField, v as ArrayState, w as AsFieldProps, B as BaseData, x as BaseField, y as CacheOpts, z as ColorField, l as ComponentConfig, G as ComponentConfigExtensions, J as ComponentConfigParams, K as ComponentDataMap, L as ComponentDataOptionalId, N as ComponentMetadata, Q as ConfigParams, a as Content, S as CustomField, T as CustomFieldRender, c as DefaultComponents, X as DefaultRootProps, Y as DefaultRootRenderProps, Z as Direction, _ as DragAxis, $ as EditorComponent, a0 as EditorContext, a1 as EditorMetadata, a2 as ExternalField, a3 as ExternalFieldWithAdaptor, a4 as ExtractConfigParams, a5 as ExtractField, a6 as FieldMetadata, a7 as FieldRenderFunctions, a8 as FieldTransformFn, a9 as FieldTransformFnParams, F as Fields, H as History, aa as ItemWithId, ab as MappedItem, ac as NumberField, ad as ObjectField, ae as OverrideKey, af as RadioField, ag as RichText, n as RichtextField, ah as RootConfig, R as RootData, g as RootDataWithProps, ai as RootDataWithoutProps, aj as SelectField, ak as Slot, al as SlotComponent, am as SlotField, an as TextField, ao as TextareaField, ap as Viewport, aq as WithChildren, ar as WithEditorProps, W as WithId, as as WithSlotProps, at as overrideKeys } from './actions-2L-1hQ7r.js';
+export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-C9GrSWsR.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';
-import { A as AppStore, G as GetPermissions, R as RefreshPermissions, H as HistorySlice } from './index-_G46lHpL.js';
+import { A as AppStore, G as GetPermissions, R as RefreshPermissions, H as HistorySlice } from './index-BNsSzMCj.js';
 import '@tiptap/react';
 import '@tiptap/extension-blockquote';
 import '@tiptap/extension-bold';
@@ -141,8 +141,6 @@ declare const Drawer: {
     }) => react_jsx_runtime.JSX.Element;
 };
 
-declare const DropZone: react.ForwardRefExoticComponent<Omit<DropZoneProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-
 declare const IconButton: ({ active, children, href, onClick, type, disabled, tabIndex, newTab, fullWidth, title, suppressHydrationWarning, }: {
     active?: boolean;
     children: ReactNode;
@@ -196,6 +194,7 @@ type EditorProps<UserConfig extends Config = Config, G extends UserGenerics<User
     disableZoomControls?: boolean;
     _experimentalVirtualization?: boolean;
 };
+declare const usePropsContext: () => EditorProps<Config, UserGenerics<Config>>;
 declare function Editor<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>(props: EditorProps<UserConfig>): react_jsx_runtime.JSX.Element;
 declare namespace Editor {
     var Components: () => react_jsx_runtime.JSX.Element;
@@ -331,7 +330,36 @@ declare const registerOverlayPortal: (el: HTMLElement | null | undefined, opts?:
  */
 declare function setDeep<T extends Record<string, any>>(node: T, path: string, newVal: any): T;
 
-type UseEditorData<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>> = {
+type Parent = {
+    id: string;
+    slot: string;
+};
+type InsertComponentArgs = {
+    type: string;
+    parent?: Parent;
+    index?: number;
+    data?: ComponentData;
+    select?: boolean;
+};
+type MoveDestination = {
+    parent?: Parent;
+    index: number;
+};
+type EditorCommands = {
+    insertComponent: (args: InsertComponentArgs) => {
+        id: string;
+    };
+    removeComponent: (id: string) => void;
+    duplicateComponent: (id: string) => void;
+    moveComponent: (id: string, to: MoveDestination) => void;
+    replaceComponent: (id: string, data: ComponentData) => void;
+    updateProps: (id: string, updater: Partial<DefaultComponentProps> | ((prev: DefaultComponentProps) => Partial<DefaultComponentProps>)) => void;
+    updateRoot: (updater: Partial<DefaultRootFieldProps> | ((prev: DefaultRootFieldProps) => Partial<DefaultRootFieldProps>)) => void;
+    selectComponent: (id: string | null) => void;
+    scrollToComponent: (id: string) => void;
+};
+
+type UseEditorData<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>> = EditorCommands & {
     appState: G["UserPublicAppState"];
     config: UserConfig;
     dispatch: AppStore["dispatch"];
@@ -385,4 +413,4 @@ declare const outlinePlugin: () => Plugin;
 
 declare const legacySideBarPlugin: () => Plugin;
 
-export { Action, ActionBar, AutoField, Button, ComponentData, ComponentList, Config, Data, Drawer, DropZone, Editor, EditorAction, type EditorApi, Field, FieldLabel, FieldProps, FieldTransforms, type GlobalsMap, Group, IconButton, IframeConfig, InitialHistory, Label, Metadata, OnAction, Overrides, type PageMetadata, Permissions, Plugin, Render, ResolveDataTrigger, RichTextMenu, type Route, Separator, UiState, type UseEditorData, UserGenerics, Viewports, blocksPlugin, createUseEditor, fieldsPlugin, legacySideBarPlugin, outlinePlugin, pageMetadata, registerOverlayPortal, renderContext, setDeep, useEditor, useGetEditor };
+export { Action, ActionBar, AutoField, Button, ComponentData, ComponentList, Config, Data, DefaultComponentProps, DefaultRootFieldProps, Drawer, Editor, EditorAction, type EditorApi, type EditorCommands, Field, FieldLabel, FieldProps, FieldTransforms, type GlobalsMap, Group, IconButton, IframeConfig, InitialHistory, type InsertComponentArgs, Label, Metadata, type MoveDestination, OnAction, Overrides, type PageMetadata, type Parent, Permissions, Plugin, Render, ResolveDataTrigger, RichTextMenu, type Route, Separator, UiState, type UseEditorData, UserGenerics, Viewports, blocksPlugin, createUseEditor, fieldsPlugin, legacySideBarPlugin, outlinePlugin, pageMetadata, registerOverlayPortal, renderContext, setDeep, useEditor, useGetEditor, usePropsContext };