@reacteditor/core 0.0.17 → 0.0.18

package/dist/no-external.js

@@ -3255,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),
@@ -3600,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";
@@ -3614,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 })
+        })
       );
     };
   }
@@ -6956,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
       ]
     })
   );
@@ -12807,6 +12918,9 @@ var createEditorCommands = (appStore) => {
       ui: { itemSelector: { index: sel.index, zone: sel.zone } }
     });
   };
+  const publish = () => {
+    void getState().publish();
+  };
   return {
     insertComponent: insertComponent2,
     removeComponent,
@@ -12816,7 +12930,8 @@ var createEditorCommands = (appStore) => {
     updateProps,
     updateRoot,
     selectComponent,
-    scrollToComponent
+    scrollToComponent,
+    publish
   };
 };
 
@@ -12835,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,
@@ -12869,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) => {
@@ -13311,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;
@@ -13331,7 +13451,7 @@ var UrlBar = () => {
       Combobox,
       {
         items: routes,
-        value: currentRoute,
+        value: currentKey,
         onValueChange: (next) => {
           if (typeof next === "string") submit(next);
         },
@@ -14165,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
   );
@@ -14222,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"
         }
       ) })
     ] })
@@ -14648,6 +14765,7 @@ function EditorProvider({ children }) {
     data: initialData,
     ui: initialUi,
     onChange,
+    onPublish,
     permissions = {},
     plugins,
     overrides,
@@ -14658,7 +14776,8 @@ function EditorProvider({ children }) {
     onAction,
     fieldTransforms,
     fullScreenCanvas,
-    _experimentalVirtualization
+    _experimentalVirtualization,
+    route
   } = usePropsContext();
   const iframe = (0, import_react95.useMemo)(
     () => __spreadValues({
@@ -14768,7 +14887,9 @@ function EditorProvider({ children }) {
         _experimentalVirtualization: !!_experimentalVirtualization,
         onAction,
         metadata,
-        fieldTransforms: loadedFieldTransforms
+        fieldTransforms: loadedFieldTransforms,
+        route: route != null ? route : null,
+        onPublish
       };
     },
     [
@@ -14783,7 +14904,9 @@ function EditorProvider({ children }) {
       _experimentalVirtualization,
       onAction,
       metadata,
-      loadedFieldTransforms
+      loadedFieldTransforms,
+      route,
+      onPublish
     ]
   );
   const [appStore] = (0, import_react95.useState)(
@@ -14876,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
   });
 };
@@ -14987,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,
     {
@@ -15016,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-AXB6UJ2P.mjs";
-import "./chunk-2A2HBRLV.mjs";
+} from "./chunk-WUEYD7ZN.mjs";
+import "./chunk-NABX5FH7.mjs";
 import {
   Action,
   ActionBar,
@@ -35,8 +35,8 @@ import {
   Label,
   RichTextMenu,
   Separator
-} from "./chunk-OAOKQORI.mjs";
-import "./chunk-CUGSM3PC.mjs";
+} from "./chunk-UQHR5LFK.mjs";
+import "./chunk-HR67L662.mjs";
 import {
   getRouteProps,
   migrate,
@@ -45,9 +45,9 @@ import {
   transformProps
 } from "./chunk-AD67LVXW.mjs";
 import "./chunk-6QJ2HF4O.mjs";
-import "./chunk-ESU6AYGB.mjs";
-import "./chunk-C5G7WUBQ.mjs";
-import "./chunk-NUBRSWFJ.mjs";
+import "./chunk-DGIVBKSJ.mjs";
+import "./chunk-IOAYKTDH.mjs";
+import "./chunk-LFJGTSUB.mjs";
 import "./chunk-M4JDRFYB.mjs";
 import "./chunk-FTVOCMGV.mjs";
 import "./chunk-DQU3HIP4.mjs";

package/package.json

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