@reacteditor/core 0.0.16 → 0.0.18

package/dist/{loaded-6YKSFCCD.mjs → loaded-PYHJ6TB5.mjs}

@@ -1,14 +1,14 @@
 import {
   useHeadingOptions
-} from "./chunk-TG2KTWSB.mjs";
+} from "./chunk-IOAYKTDH.mjs";
 import {
   Heading,
   SelectControl,
   useControlContext
-} from "./chunk-JHURG5NN.mjs";
+} from "./chunk-LFJGTSUB.mjs";
 import "./chunk-M4JDRFYB.mjs";
 import "./chunk-FTVOCMGV.mjs";
-import "./chunk-Y2EFNT5P.mjs";
+import "./chunk-DQU3HIP4.mjs";
 import "./chunk-JIXMPJZA.mjs";
 import {
   init_react_import

package/dist/no-external.css

@@ -704,25 +704,19 @@ textarea._Input-input_zwh6e_27 {
 }
 
 /* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Loader/styles.module.css/#css-module-data */
-@keyframes _loader-animation_nacdm_1 {
-  0% {
-    transform: rotate(0deg) scale(1);
+@keyframes _loader-spin_6933g_1 {
+  from {
+    transform: rotate(0deg);
   }
-  50% {
-    transform: rotate(180deg) scale(0.8);
-  }
-  100% {
-    transform: rotate(360deg) scale(1);
+  to {
+    transform: rotate(360deg);
   }
 }
-._Loader_nacdm_13 {
-  background: transparent;
-  border-radius: 100%;
-  border: 2px solid currentColor;
-  border-bottom-color: transparent;
-  display: inline-block;
-  animation: _loader-animation_nacdm_1 1s 0s infinite linear;
-  animation-fill-mode: both;
+._Loader_6933g_10 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  animation: _loader-spin_6933g_1 1s linear infinite;
 }
 
 /* css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/DragIcon/styles.module.css/#css-module-data */

package/dist/no-external.d.mts

@@ -1,6 +1,7 @@
 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, G as ColorField, g as ComponentConfig, J as ComponentConfigExtensions, K as ComponentConfigParams, b as ComponentData, L as ComponentDataMap, N as ComponentDataOptionalId, Q as ComponentMetadata, C as Config, S as ConfigParams, j as Content, T as CustomField, X as CustomFieldRender, D as Data, l as DefaultComponentProps, k as DefaultComponents, m as DefaultRootFieldProps, Y as DefaultRootProps, Z as DefaultRootRenderProps, _ as Direction, $ as DragAxis, E as EditorAction, q as EditorChromeConfig, a0 as EditorComponent, a1 as EditorContext, a2 as EditorMetadata, a3 as ExternalField, a4 as ExternalFieldWithAdaptor, a5 as ExtractConfigParams, a6 as ExtractField, o as Field, a7 as FieldMetadata, p as FieldProps, a8 as FieldRenderFunctions, a9 as FieldTransformFn, aa as FieldTransformFnParams, h as FieldTransforms, F as Fields, H as History, I as IframeConfig, r as InitialHistory, ab as ItemWithId, ac as MappedItem, M as Metadata, ad as NumberField, ae as ObjectField, O as OnAction, af as OverrideKey, e as Overrides, a as Permissions, d as Plugin, ag as RadioField, c as ResolveDataTrigger, ah as RichText, i as RichtextField, ai as RootConfig, n as RootData, R as RootDataWithProps, aj as RootDataWithoutProps, ak as SelectField, al as Slot, am as SlotComponent, an as SlotField, ao as TextField, ap as TextareaField, f as UiState, U as UserGenerics, aq as Viewport, V as Viewports, ar as WithChildren, as as WithEditorProps, W as WithId, at as WithSlotProps, au as overrideKeys } from './actions-BxLinRKD.mjs';
-export { Action, ActionBar, App, AppContextValue, AppEditorProps, AppMatched, AppProps, AppProvider, AppProviderProps, AppRenderProps, AppRouterVariant, AutoField, Button, ComponentList, Drawer, Editor, EditorApi, EditorCommands, FieldLabel, GlobalsMap, Group, IconButton, InsertComponentArgs, Label, MoveDestination, PageMetadata, Parent, Render, RichTextMenu, Route, RouteKey, Separator, UseEditorData, appConfigContext, blocksPlugin, createUseEditor, fieldsPlugin, legacySideBarPlugin, outlinePlugin, pageMetadata, registerOverlayPortal, renderContext, setDeep, useApp, useEditor, useGetEditor, usePropsContext, useRouteParams, useStableValue } from './index.mjs';
+export { Action, ActionBar, App, AppContextValue, AppEditorProps, AppProps, AppProvider, AppProviderProps, AppRenderProps, AppRoute, AppRouterVariant, AutoField, Button, ComponentList, Drawer, Editor, EditorApi, EditorCommands, FieldLabel, GlobalsMap, Group, IconButton, InsertComponentArgs, Label, MoveDestination, PageMetadata, Parent, Render, RichTextMenu, Route, RouteKey, Separator, UseEditorData, appConfigContext, blocksPlugin, createUseEditor, fieldsPlugin, legacySideBarPlugin, outlinePlugin, pageMetadata, registerOverlayPortal, renderContext, setDeep, useApp, useEditor, useGetEditor, usePropsContext, useRouteParams, useStableValue } from './index.mjs';
 export { G as GetRoutePropsOptions, g as getRouteProps, m as migrate, r as resolveAllData, a as resolveRouteFromString, t as transformProps, w as walkTree } from './walk-tree-BvYigWFL.mjs';
+export { E as EditorRoute, O as OnPublish } from './index-CUe2XTb6.mjs';
 import 'react';
 import '@tiptap/react';
 import '@tiptap/extension-blockquote';
@@ -18,4 +19,3 @@ import '@tiptap/extension-strike';
 import '@tiptap/extension-text-align';
 import '@tiptap/extension-underline';
 import 'react/jsx-runtime';
-import './index-BZRpxcwy.mjs';

package/dist/no-external.d.ts

@@ -1,6 +1,7 @@
 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, G as ColorField, g as ComponentConfig, J as ComponentConfigExtensions, K as ComponentConfigParams, b as ComponentData, L as ComponentDataMap, N as ComponentDataOptionalId, Q as ComponentMetadata, C as Config, S as ConfigParams, j as Content, T as CustomField, X as CustomFieldRender, D as Data, l as DefaultComponentProps, k as DefaultComponents, m as DefaultRootFieldProps, Y as DefaultRootProps, Z as DefaultRootRenderProps, _ as Direction, $ as DragAxis, E as EditorAction, q as EditorChromeConfig, a0 as EditorComponent, a1 as EditorContext, a2 as EditorMetadata, a3 as ExternalField, a4 as ExternalFieldWithAdaptor, a5 as ExtractConfigParams, a6 as ExtractField, o as Field, a7 as FieldMetadata, p as FieldProps, a8 as FieldRenderFunctions, a9 as FieldTransformFn, aa as FieldTransformFnParams, h as FieldTransforms, F as Fields, H as History, I as IframeConfig, r as InitialHistory, ab as ItemWithId, ac as MappedItem, M as Metadata, ad as NumberField, ae as ObjectField, O as OnAction, af as OverrideKey, e as Overrides, a as Permissions, d as Plugin, ag as RadioField, c as ResolveDataTrigger, ah as RichText, i as RichtextField, ai as RootConfig, n as RootData, R as RootDataWithProps, aj as RootDataWithoutProps, ak as SelectField, al as Slot, am as SlotComponent, an as SlotField, ao as TextField, ap as TextareaField, f as UiState, U as UserGenerics, aq as Viewport, V as Viewports, ar as WithChildren, as as WithEditorProps, W as WithId, at as WithSlotProps, au as overrideKeys } from './actions-BxLinRKD.js';
-export { Action, ActionBar, App, AppContextValue, AppEditorProps, AppMatched, AppProps, AppProvider, AppProviderProps, AppRenderProps, AppRouterVariant, AutoField, Button, ComponentList, Drawer, Editor, EditorApi, EditorCommands, FieldLabel, GlobalsMap, Group, IconButton, InsertComponentArgs, Label, MoveDestination, PageMetadata, Parent, Render, RichTextMenu, Route, RouteKey, Separator, UseEditorData, appConfigContext, blocksPlugin, createUseEditor, fieldsPlugin, legacySideBarPlugin, outlinePlugin, pageMetadata, registerOverlayPortal, renderContext, setDeep, useApp, useEditor, useGetEditor, usePropsContext, useRouteParams, useStableValue } from './index.js';
+export { Action, ActionBar, App, AppContextValue, AppEditorProps, AppProps, AppProvider, AppProviderProps, AppRenderProps, AppRoute, AppRouterVariant, AutoField, Button, ComponentList, Drawer, Editor, EditorApi, EditorCommands, FieldLabel, GlobalsMap, Group, IconButton, InsertComponentArgs, Label, MoveDestination, PageMetadata, Parent, Render, RichTextMenu, Route, RouteKey, Separator, UseEditorData, appConfigContext, blocksPlugin, createUseEditor, fieldsPlugin, legacySideBarPlugin, outlinePlugin, pageMetadata, registerOverlayPortal, renderContext, setDeep, useApp, useEditor, useGetEditor, usePropsContext, useRouteParams, useStableValue } from './index.js';
 export { G as GetRoutePropsOptions, g as getRouteProps, m as migrate, r as resolveAllData, a as resolveRouteFromString, t as transformProps, w as walkTree } from './walk-tree-Clklc1Ql.js';
+export { E as EditorRoute, O as OnPublish } from './index-CYzc1n29.js';
 import 'react';
 import '@tiptap/react';
 import '@tiptap/extension-blockquote';
@@ -18,4 +19,3 @@ import '@tiptap/extension-strike';
 import '@tiptap/extension-text-align';
 import '@tiptap/extension-underline';
 import 'react/jsx-runtime';
-import './index-B_21fGrq.js';

package/dist/no-external.js

@@ -160,19 +160,29 @@ var init_get_class_name_factory = __esm({
     "use strict";
     init_react_import();
     import_classnames = __toESM(require_classnames());
-    getClassNameFactory = (rootClass, styles2, config = { baseClass: "" }) => (options = {}) => {
+    getClassNameFactory = (rootClass, styles2, config = { baseClass: "" }) => (options = {}, modifiers) => {
       if (typeof options === "string") {
         const descendant = options;
-        const style = styles2[`${rootClass}-${descendant}`];
+        const baseKey = `${rootClass}-${descendant}`;
+        const style = styles2[baseKey];
+        if (modifiers) {
+          const prefixedModifiers = {};
+          for (let modifier in modifiers) {
+            prefixedModifiers[styles2[`${baseKey}--${modifier}`]] = modifiers[modifier];
+          }
+          return config.baseClass + (0, import_classnames.default)(__spreadValues({
+            [style]: !!style
+          }, prefixedModifiers));
+        }
         if (style) {
-          return config.baseClass + styles2[`${rootClass}-${descendant}`] || "";
+          return config.baseClass + style;
         }
         return "";
       } else if (typeof options === "object") {
-        const modifiers = options;
+        const modifiers2 = options;
         const prefixedModifiers = {};
-        for (let modifier in modifiers) {
-          prefixedModifiers[styles2[`${rootClass}--${modifier}`]] = modifiers[modifier];
+        for (let modifier in modifiers2) {
+          prefixedModifiers[styles2[`${rootClass}--${modifier}`]] = modifiers2[modifier];
         }
         const c = styles2[rootClass];
         return config.baseClass + (0, import_classnames.default)(__spreadValues({
@@ -3245,7 +3255,19 @@ var init_store = __esm({
           metadata: {},
           fieldTransforms: {},
           scrollToComponent: () => {
-          }
+          },
+          route: null,
+          isPublishing: false,
+          publish: () => __async(null, null, function* () {
+            const { onPublish, state, route } = get();
+            if (!onPublish) return;
+            set({ isPublishing: true });
+            try {
+              yield onPublish({ data: state.data, route });
+            } finally {
+              set({ isPublishing: false });
+            }
+          })
         }, initialAppStore), {
           fields: createFieldsSlice(set, get),
           history: createHistorySlice(set, get),
@@ -3590,12 +3612,12 @@ var init_styles_module2 = __esm({
     "use strict";
     init_react_import();
     init_css_module_data3();
-    styles_module_default4 = { "Loader": "_Loader_nacdm_13", "loader-animation": "_loader-animation_nacdm_1" };
+    styles_module_default4 = { "Loader": "_Loader_6933g_10", "loader-spin": "_loader-spin_6933g_1" };
   }
 });
 
 // components/Loader/index.tsx
-var import_jsx_runtime3, getClassName2, Loader;
+var import_jsx_runtime3, getClassName2, LoaderIcon, Loader;
 var init_Loader = __esm({
   "components/Loader/index.tsx"() {
     "use strict";
@@ -3604,25 +3626,125 @@ var init_Loader = __esm({
     init_styles_module2();
     import_jsx_runtime3 = require("react/jsx-runtime");
     getClassName2 = get_class_name_factory_default("Loader", styles_module_default4);
+    LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "svg",
+      {
+        height: size,
+        strokeLinejoin: "round",
+        style: { color: "currentcolor" },
+        viewBox: "0 0 16 16",
+        width: size,
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { clipPath: "url(#editor-loader-clip)", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                d: "M8 16V12",
+                opacity: "0.5",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                d: "M3.29773 1.52783L5.64887 4.7639",
+                opacity: "0.9",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                d: "M12.7023 1.52783L10.3511 4.7639",
+                opacity: "0.1",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                d: "M12.7023 14.472L10.3511 11.236",
+                opacity: "0.4",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                d: "M3.29773 14.472L5.64887 11.236",
+                opacity: "0.6",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                d: "M15.6085 5.52783L11.8043 6.7639",
+                opacity: "0.2",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                d: "M0.391602 10.472L4.19583 9.23598",
+                opacity: "0.7",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                d: "M15.6085 10.4722L11.8043 9.2361",
+                opacity: "0.3",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                d: "M0.391602 5.52783L4.19583 6.7639",
+                opacity: "0.8",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("clipPath", { id: "editor-loader-clip", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { fill: "white", height: "16", width: "16" }) }) })
+        ]
+      }
+    );
     Loader = (_a) => {
       var _b = _a, {
         color,
-        size = 16
+        size = 16,
+        className,
+        style
       } = _b, props = __objRest(_b, [
         "color",
-        "size"
+        "size",
+        "className",
+        "style"
       ]);
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "span",
-        __spreadValues({
-          className: getClassName2(),
-          style: {
-            width: size,
-            height: size,
-            color
-          },
+        "div",
+        __spreadProps(__spreadValues({
+          className: [getClassName2(), className].filter(Boolean).join(" "),
+          style: __spreadValues({ color }, style),
           "aria-label": "loading"
-        }, props)
+        }, props), {
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderIcon, { size })
+        })
       );
     };
   }
@@ -6946,9 +7068,8 @@ var Button = (_a) => {
       href
     }, dataAttrs), {
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName10("icon"), children: icon }),
-        children,
-        loading && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName10("spinner"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Loader, { size: 14 }) })
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName10("spinner"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Loader, { size: 14 }) }) : icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassName10("icon"), children: icon }),
+        children
       ]
     })
   );
@@ -12797,6 +12918,9 @@ var createEditorCommands = (appStore) => {
       ui: { itemSelector: { index: sel.index, zone: sel.zone } }
     });
   };
+  const publish = () => {
+    void getState().publish();
+  };
   return {
     insertComponent: insertComponent2,
     removeComponent,
@@ -12806,7 +12930,8 @@ var createEditorCommands = (appStore) => {
     updateProps,
     updateRoot,
     selectComponent,
-    scrollToComponent
+    scrollToComponent,
+    publish
   };
 };
 
@@ -12825,6 +12950,8 @@ var generateUseEditor = (store, getState, commands) => {
   const storeData = __spreadProps(__spreadValues({}, commands), {
     appState: makeStatePublic(store.state),
     config: store.config,
+    route: store.route,
+    isPublishing: store.isPublishing,
     dispatch: store.dispatch,
     getPermissions: store.permissions.getPermissions,
     refreshPermissions: store.permissions.refreshPermissions,
@@ -12859,7 +12986,9 @@ var convertToPickedStore = (store) => {
     dispatch: store.dispatch,
     permissions: store.permissions,
     history: store.history,
-    selectedItem: store.selectedItem
+    selectedItem: store.selectedItem,
+    route: store.route,
+    isPublishing: store.isPublishing
   };
 };
 var useRegisterUseEditorStore = (appStore) => {
@@ -13301,18 +13430,19 @@ var DEVICE_VIEWPORTS = {
   mobile: { width: 360, height: "auto", icon: "Smartphone", label: "Mobile" }
 };
 var UrlBar = () => {
-  const { routes, currentRoute, onRouteChange } = usePropsContext();
+  const { routes, route, onRouteChange } = usePropsContext();
   const chrome = useChromeConfig();
-  const showRoutePicker = !!routes && currentRoute !== void 0 && !!onRouteChange;
-  const [inputValue, setInputValue] = (0, import_react87.useState)(currentRoute != null ? currentRoute : "");
-  const lastSyncedPath = (0, import_react87.useRef)(currentRoute);
-  if (lastSyncedPath.current !== currentRoute) {
-    lastSyncedPath.current = currentRoute;
-    setInputValue(currentRoute != null ? currentRoute : "");
+  const currentKey = route == null ? void 0 : route.key;
+  const showRoutePicker = !!routes && currentKey !== void 0 && !!onRouteChange;
+  const [inputValue, setInputValue] = (0, import_react87.useState)(currentKey != null ? currentKey : "");
+  const lastSyncedPath = (0, import_react87.useRef)(currentKey);
+  if (lastSyncedPath.current !== currentKey) {
+    lastSyncedPath.current = currentKey;
+    setInputValue(currentKey != null ? currentKey : "");
   }
   const submit = (raw) => {
     const next = normalizeRoute(raw);
-    if (!next || next === currentRoute) return;
+    if (!next || next === currentKey) return;
     void (onRouteChange == null ? void 0 : onRouteChange(next));
   };
   if (!chrome.showUrlBar) return null;
@@ -13321,7 +13451,7 @@ var UrlBar = () => {
       Combobox,
       {
         items: routes,
-        value: currentRoute,
+        value: currentKey,
         onValueChange: (next) => {
           if (typeof next === "string") submit(next);
         },
@@ -14155,12 +14285,12 @@ var TopHeader = ({
   pluginItems
 }) => {
   const appStore = useAppStoreApi();
-  const { onPublish, currentRoute } = usePropsContext();
   const chrome = useChromeConfig();
   const back = useAppStore((s) => s.history.back);
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
+  const isPublishing = useAppStore((s) => s.isPublishing);
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || DefaultOverride
   );
@@ -14212,11 +14342,8 @@ var TopHeader = ({
       /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         Button,
         {
-          onClick: () => {
-            const data = appStore.getState().state.data;
-            onPublish && onPublish(data, currentRoute);
-          },
-          children: "Publish"
+          onClick: () => appStore.getState().publish(),
+          children: isPublishing ? "Publishing\u2026" : "Publish"
         }
       ) })
     ] })
@@ -14638,6 +14765,7 @@ function EditorProvider({ children }) {
     data: initialData,
     ui: initialUi,
     onChange,
+    onPublish,
     permissions = {},
     plugins,
     overrides,
@@ -14648,7 +14776,8 @@ function EditorProvider({ children }) {
     onAction,
     fieldTransforms,
     fullScreenCanvas,
-    _experimentalVirtualization
+    _experimentalVirtualization,
+    route
   } = usePropsContext();
   const iframe = (0, import_react95.useMemo)(
     () => __spreadValues({
@@ -14758,7 +14887,9 @@ function EditorProvider({ children }) {
         _experimentalVirtualization: !!_experimentalVirtualization,
         onAction,
         metadata,
-        fieldTransforms: loadedFieldTransforms
+        fieldTransforms: loadedFieldTransforms,
+        route: route != null ? route : null,
+        onPublish
       };
     },
     [
@@ -14773,7 +14904,9 @@ function EditorProvider({ children }) {
       _experimentalVirtualization,
       onAction,
       metadata,
-      loadedFieldTransforms
+      loadedFieldTransforms,
+      route,
+      onPublish
     ]
   );
   const [appStore] = (0, import_react95.useState)(
@@ -14866,34 +14999,31 @@ var useApp = () => {
   const rrNavigate = (0, import_react_router.useNavigate)();
   const currentPath = location.pathname || "/";
   const isEditing = cfg.editorPath !== null && (currentPath === cfg.editorPath || currentPath.startsWith(`${cfg.editorPath}/`));
-  const matchRoute = isEditing ? stripPrefix(currentPath, cfg.editorPath) : currentPath;
-  const matched = (0, import_react97.useMemo)(() => {
+  const pagePath = isEditing ? stripPrefix(currentPath, cfg.editorPath) : currentPath;
+  const route = (0, import_react97.useMemo)(() => {
     const routeKeys = Object.keys(cfg.pages);
     if (routeKeys.length === 0) return null;
     const matches = (0, import_react_router.matchRoutes)(
       routeKeys.map((path) => ({ path })),
-      matchRoute
+      pagePath
     );
     if (!matches || matches.length === 0) return null;
     const last = matches[matches.length - 1];
-    const key = last.route.path;
     return {
-      route: key,
-      params: last.params,
-      data: cfg.pages[key]
+      key: last.route.path,
+      path: pagePath,
+      params: last.params
     };
-  }, [cfg.pages, matchRoute]);
+  }, [cfg.pages, pagePath]);
   const routes = (0, import_react97.useMemo)(() => Object.keys(cfg.pages), [cfg.pages]);
-  const navigate = (route) => {
-    const target = isEditing && cfg.editorPath ? `${cfg.editorPath}${route === "/" ? "" : route}` || "/" : route;
-    rrNavigate(target || "/");
+  const navigate = (target) => {
+    const next = isEditing && cfg.editorPath ? `${cfg.editorPath}${target === "/" ? "" : target}` || "/" : target;
+    rrNavigate(next || "/");
   };
   return __spreadProps(__spreadValues({}, cfg), {
     routes,
-    currentPath,
     isEditing,
-    matchRoute,
-    matched,
+    route,
     navigate
   });
 };
@@ -14977,9 +15107,14 @@ function EditorForKey({
   editorProps,
   children
 }) {
-  const { config, pages, routes, navigate } = useApp();
+  const { config, pages, routes, navigate, route } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
+  const editorRoute = {
+    key: routeKey,
+    path: (route == null ? void 0 : route.key) === routeKey ? route.path : routeKey,
+    params: (route == null ? void 0 : route.key) === routeKey ? route.params : {}
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     Editor4,
     {
@@ -15006,7 +15141,7 @@ function EditorForKey({
       disableZoomControls: editorProps.disableZoomControls,
       _experimentalVirtualization: editorProps._experimentalVirtualization,
       routes,
-      currentRoute: routeKey,
+      route: editorRoute,
       onRouteChange: (next) => navigate(next),
       children
     },

package/dist/no-external.mjs

@@ -25,8 +25,8 @@ import {
   usePropsContext,
   useRouteParams,
   useStableValue
-} from "./chunk-3NSI5XES.mjs";
-import "./chunk-5QKQ3LQJ.mjs";
+} from "./chunk-WUEYD7ZN.mjs";
+import "./chunk-NABX5FH7.mjs";
 import {
   Action,
   ActionBar,
@@ -35,22 +35,22 @@ import {
   Label,
   RichTextMenu,
   Separator
-} from "./chunk-Q667J2EG.mjs";
-import "./chunk-RQZQMS6E.mjs";
+} from "./chunk-UQHR5LFK.mjs";
+import "./chunk-HR67L662.mjs";
 import {
   getRouteProps,
   migrate,
   resolveAllData,
   resolveRouteFromString,
   transformProps
-} from "./chunk-4L7H4JV4.mjs";
+} from "./chunk-AD67LVXW.mjs";
 import "./chunk-6QJ2HF4O.mjs";
-import "./chunk-RGC274VM.mjs";
-import "./chunk-TG2KTWSB.mjs";
-import "./chunk-JHURG5NN.mjs";
+import "./chunk-DGIVBKSJ.mjs";
+import "./chunk-IOAYKTDH.mjs";
+import "./chunk-LFJGTSUB.mjs";
 import "./chunk-M4JDRFYB.mjs";
 import "./chunk-FTVOCMGV.mjs";
-import "./chunk-Y2EFNT5P.mjs";
+import "./chunk-DQU3HIP4.mjs";
 import {
   walkTree
 } from "./chunk-JIXMPJZA.mjs";

package/dist/rsc.js

@@ -160,19 +160,29 @@ var init_get_class_name_factory = __esm({
     "use strict";
     init_react_import();
     import_classnames = __toESM(require_classnames());
-    getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (options = {}) => {
+    getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (options = {}, modifiers) => {
       if (typeof options === "string") {
         const descendant = options;
-        const style = styles[`${rootClass}-${descendant}`];
+        const baseKey = `${rootClass}-${descendant}`;
+        const style = styles[baseKey];
+        if (modifiers) {
+          const prefixedModifiers = {};
+          for (let modifier in modifiers) {
+            prefixedModifiers[styles[`${baseKey}--${modifier}`]] = modifiers[modifier];
+          }
+          return config.baseClass + (0, import_classnames.default)(__spreadValues({
+            [style]: !!style
+          }, prefixedModifiers));
+        }
         if (style) {
-          return config.baseClass + styles[`${rootClass}-${descendant}`] || "";
+          return config.baseClass + style;
         }
         return "";
       } else if (typeof options === "object") {
-        const modifiers = options;
+        const modifiers2 = options;
         const prefixedModifiers = {};
-        for (let modifier in modifiers) {
-          prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
+        for (let modifier in modifiers2) {
+          prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers2[modifier];
         }
         const c = styles[rootClass];
         return config.baseClass + (0, import_classnames.default)(__spreadValues({

package/dist/rsc.mjs

@@ -7,10 +7,10 @@ import {
   transformProps,
   useRichtextProps,
   useSlots
-} from "./chunk-4L7H4JV4.mjs";
+} from "./chunk-AD67LVXW.mjs";
 import "./chunk-6QJ2HF4O.mjs";
 import "./chunk-FTVOCMGV.mjs";
-import "./chunk-Y2EFNT5P.mjs";
+import "./chunk-DQU3HIP4.mjs";
 import {
   rootAreaId,
   rootDroppableId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reacteditor/core",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "The open-source visual editor for React",
   "author": "Rami Bitar <rami@frontend.co>",
   "repository": "reacteditor/editor",