@elementor/editor-components 3.33.0-201 → 3.33.0-202

package/dist/index.js

@@ -41,80 +41,11 @@ var import_editor_documents = require("@elementor/editor-documents");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_store14 = require("@elementor/store");
+var import_store18 = require("@elementor/store");
 var import_i18n6 = require("@wordpress/i18n");
 
 // src/component-id-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
-var componentIdTransformer = (0, import_editor_canvas.createTransformer)(async (id) => {
-  const extendedWindow = window;
-  const documentManager = extendedWindow.elementor?.documents;
-  if (!documentManager) {
-    throw new Error("Elementor documents manager not found");
-  }
-  const data = await documentManager.request(id);
-  return data.elements ?? [];
-});
-
-// src/components/components-tab/components.tsx
-var React6 = __toESM(require("react"));
-var import_editor_ui = require("@elementor/editor-ui");
-
-// src/components/components-tab/component-search.tsx
-var React2 = __toESM(require("react"));
-var import_icons = require("@elementor/icons");
-var import_ui = require("@elementor/ui");
-var import_i18n = require("@wordpress/i18n");
-
-// src/components/components-tab/search-provider.tsx
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_utils = require("@elementor/utils");
-var SearchContext = (0, import_react.createContext)(void 0);
-var SearchProvider = ({
-  children,
-  localStorageKey
-}) => {
-  const { debouncedValue, handleChange, inputValue } = (0, import_utils.useSearchState)({ localStorageKey });
-  const clearSearch = () => {
-    handleChange("");
-  };
-  return /* @__PURE__ */ React.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
-};
-var useSearch = () => {
-  const context = (0, import_react.useContext)(SearchContext);
-  if (!context) {
-    throw new Error("useSearch must be used within a SearchProvider");
-  }
-  return context;
-};
-
-// src/components/components-tab/component-search.tsx
-var ComponentSearch = () => {
-  const { inputValue, handleChange } = useSearch();
-  return /* @__PURE__ */ React2.createElement(import_ui.Stack, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React2.createElement(import_ui.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React2.createElement(
-    import_ui.TextField,
-    {
-      role: "search",
-      fullWidth: true,
-      size: "tiny",
-      value: inputValue,
-      placeholder: (0, import_i18n.__)("Search", "elementor"),
-      onChange: (e) => handleChange(e.target.value),
-      InputProps: {
-        startAdornment: /* @__PURE__ */ React2.createElement(import_ui.InputAdornment, { position: "start" }, /* @__PURE__ */ React2.createElement(import_icons.SearchIcon, { fontSize: "tiny" }))
-      }
-    }
-  )));
-};
-
-// src/components/components-tab/components-list.tsx
-var React5 = __toESM(require("react"));
-var import_icons3 = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
-
-// src/hooks/use-components.ts
 var import_store3 = require("@elementor/store");
 
 // src/store/store.ts
@@ -155,6 +86,7 @@ var loadComponents = (0, import_store.__createAsyncThunk)("components/load", asy
 // src/store/store.ts
 var initialState = {
   data: [],
+  unpublishedData: [],
   loadStatus: "idle",
   createStatus: "idle",
   styles: {}
@@ -165,11 +97,21 @@ var slice = (0, import_store2.__createSlice)({
   initialState,
   reducers: {
     add: (state, { payload }) => {
-      state.data = { ...payload };
+      if (Array.isArray(payload)) {
+        state.data = [...state.data, ...payload];
+      } else {
+        state.data.unshift(payload);
+      }
     },
     load: (state, { payload }) => {
       state.data = payload;
     },
+    addUnpublished: (state, { payload }) => {
+      state.unpublishedData.unshift(payload);
+    },
+    resetUnpublished: (state) => {
+      state.unpublishedData = [];
+    },
     removeStyles(state, { payload }) {
       const { [payload.id]: _, ...rest } = state.styles;
       state.styles = rest;
@@ -208,7 +150,19 @@ var selectData = (state) => state[SLICE_NAME].data;
 var selectLoadStatus = (state) => state[SLICE_NAME].loadStatus;
 var selectCreateStatus = (state) => state[SLICE_NAME].createStatus;
 var selectStylesDefinitions = (state) => state[SLICE_NAME].styles ?? {};
-var selectComponents = (0, import_store2.__createSelector)(selectData, (data) => data);
+var selectUnpublishedData = (state) => state[SLICE_NAME].unpublishedData;
+var selectComponents = (0, import_store2.__createSelector)(
+  selectData,
+  selectUnpublishedData,
+  (data, unpublishedData) => [
+    ...unpublishedData.map((item) => ({ id: item.id, name: item.name })),
+    ...data
+  ]
+);
+var selectUnpublishedComponents = (0, import_store2.__createSelector)(
+  selectUnpublishedData,
+  (unpublishedData) => unpublishedData
+);
 var selectLoadIsPending = (0, import_store2.__createSelector)(selectLoadStatus, (status) => status === "pending");
 var selectLoadIsError = (0, import_store2.__createSelector)(selectLoadStatus, (status) => status === "error");
 var selectCreateIsPending = (0, import_store2.__createSelector)(selectCreateStatus, (status) => status === "pending");
@@ -216,10 +170,85 @@ var selectCreateIsError = (0, import_store2.__createSelector)(selectCreateStatus
 var selectStyles = (state) => state[SLICE_NAME].styles ?? {};
 var selectFlatStyles = (0, import_store2.__createSelector)(selectStylesDefinitions, (data) => Object.values(data).flat());
 
+// src/component-id-transformer.ts
+var componentIdTransformer = (0, import_editor_canvas.createTransformer)(async (id) => {
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store3.__getState)());
+  const unpublishedComponent = unpublishedComponents.find((component) => component.id === id);
+  if (unpublishedComponent) {
+    return structuredClone(unpublishedComponent.content);
+  }
+  const extendedWindow = window;
+  const documentManager = extendedWindow.elementor?.documents;
+  if (!documentManager) {
+    throw new Error("Elementor documents manager not found");
+  }
+  const data = await documentManager.request(id);
+  return data.elements ?? [];
+});
+
+// src/components/components-tab/components.tsx
+var React6 = __toESM(require("react"));
+var import_editor_ui = require("@elementor/editor-ui");
+
+// src/components/components-tab/component-search.tsx
+var React2 = __toESM(require("react"));
+var import_icons = require("@elementor/icons");
+var import_ui = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+
+// src/components/components-tab/search-provider.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_utils = require("@elementor/utils");
+var SearchContext = (0, import_react.createContext)(void 0);
+var SearchProvider = ({
+  children,
+  localStorageKey
+}) => {
+  const { debouncedValue, handleChange, inputValue } = (0, import_utils.useSearchState)({ localStorageKey });
+  const clearSearch = () => {
+    handleChange("");
+  };
+  return /* @__PURE__ */ React.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
+};
+var useSearch = () => {
+  const context = (0, import_react.useContext)(SearchContext);
+  if (!context) {
+    throw new Error("useSearch must be used within a SearchProvider");
+  }
+  return context;
+};
+
+// src/components/components-tab/component-search.tsx
+var ComponentSearch = () => {
+  const { inputValue, handleChange } = useSearch();
+  return /* @__PURE__ */ React2.createElement(import_ui.Stack, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React2.createElement(import_ui.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React2.createElement(
+    import_ui.TextField,
+    {
+      role: "search",
+      fullWidth: true,
+      size: "tiny",
+      value: inputValue,
+      placeholder: (0, import_i18n.__)("Search", "elementor"),
+      onChange: (e) => handleChange(e.target.value),
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React2.createElement(import_ui.InputAdornment, { position: "start" }, /* @__PURE__ */ React2.createElement(import_icons.SearchIcon, { fontSize: "tiny" }))
+      }
+    }
+  )));
+};
+
+// src/components/components-tab/components-list.tsx
+var React5 = __toESM(require("react"));
+var import_icons3 = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+
 // src/hooks/use-components.ts
+var import_store5 = require("@elementor/store");
 var useComponents = () => {
-  const components = (0, import_store3.__useSelector)(selectComponents);
-  const isLoading = (0, import_store3.__useSelector)(selectLoadIsPending);
+  const components = (0, import_store5.__useSelector)(selectComponents);
+  const isLoading = (0, import_store5.__useSelector)(selectLoadIsPending);
   return { components, isLoading };
 };
 
@@ -268,7 +297,7 @@ function getSelectedElementContainer() {
 
 // src/components/create-component-form/utils/replace-element-with-component.ts
 var import_editor_elements2 = require("@elementor/editor-elements");
-var replaceElementWithComponent = async (element, component) => {
+var replaceElementWithComponent = (element, component) => {
   (0, import_editor_elements2.replaceElement)({
     currentElement: element,
     newElement: createComponentModel(component),
@@ -488,26 +517,10 @@ var import_react3 = require("react");
 var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
+var import_store7 = require("@elementor/store");
 var import_ui5 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
 
-// src/hooks/use-create-component.ts
-var import_store5 = require("@elementor/store");
-var useCreateComponent = () => {
-  const dispatch4 = (0, import_store5.__useDispatch)();
-  const isPending = (0, import_store5.__useSelector)(selectCreateIsPending);
-  const isError = (0, import_store5.__useSelector)(selectCreateIsError);
-  const createComponentAction = async (payload) => {
-    const result = await dispatch4(createComponent(payload));
-    return result.payload;
-  };
-  return {
-    createComponent: createComponentAction,
-    isPending,
-    isError
-  };
-};
-
 // src/components/create-component-form/hooks/use-form.ts
 var import_react2 = require("react");
 var useForm = (initialValues) => {
@@ -588,7 +601,7 @@ function CreateComponentForm() {
   const [element, setElement] = (0, import_react3.useState)(null);
   const [anchorPosition, setAnchorPosition] = (0, import_react3.useState)();
   const [resultNotification, setResultNotification] = (0, import_react3.useState)(null);
-  const { createComponent: createComponent2, isPending } = useCreateComponent();
+  const dispatch5 = (0, import_store7.__useDispatch)();
   (0, import_react3.useEffect)(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
@@ -601,25 +614,26 @@ function CreateComponentForm() {
     };
   }, []);
   const handleSave = async (values) => {
-    if (!element) {
-      throw new Error(`Can't save element as component: element not found`);
-    }
     try {
-      const result = await createComponent2({
-        name: values.componentName,
-        content: [element.element.model.toJSON({ remove: ["default"] })]
-      });
       if (!element) {
-        throw new Error(`Can't replace element with component: element not found`);
+        throw new Error(`Can't save element as component: element not found`);
       }
+      const tempId = generateTempId();
+      dispatch5(
+        slice.actions.addUnpublished({
+          id: tempId,
+          name: values.componentName,
+          content: [element.element.model.toJSON({ remove: ["default"] })]
+        })
+      );
       replaceElementWithComponent(element.element, {
-        id: result.component_id,
+        id: tempId,
         name: values.componentName
       });
       setResultNotification({
         show: true,
-        // Translators: %1$s: Component name, %2$s: Component ID
-        message: (0, import_i18n4.__)("Component saved successfully as: %1$s (ID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", result.component_id.toString()),
+        // Translators: %1$s: Component name, %2$s: Component temp ID
+        message: (0, import_i18n4.__)("Component saved successfully as: %1$s (temp ID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", tempId.toString()),
         type: "success"
       });
       resetAndClosePopup();
@@ -649,7 +663,6 @@ function CreateComponentForm() {
       {
         initialValues: { componentName: element.elementLabel },
         handleSave,
-        isSubmitting: isPending,
         closePopup: resetAndClosePopup
       }
     )
@@ -667,7 +680,6 @@ var FONT_SIZE = "tiny";
 var Form = ({
   initialValues,
   handleSave,
-  isSubmitting,
   closePopup
 }) => {
   const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
@@ -712,18 +724,21 @@ var Form = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__PURE__ */ React7.createElement(import_ui5.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui5.Button, { onClick: closePopup, disabled: isSubmitting, color: "secondary", variant: "text", size: "small" }, (0, import_i18n4.__)("Cancel", "elementor")), /* @__PURE__ */ React7.createElement(
+  ))), /* @__PURE__ */ React7.createElement(import_ui5.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui5.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, (0, import_i18n4.__)("Cancel", "elementor")), /* @__PURE__ */ React7.createElement(
     import_ui5.Button,
     {
       onClick: handleSubmit,
-      disabled: isSubmitting || !isValid,
+      disabled: !isValid,
       variant: "contained",
       color: "primary",
       size: "small"
     },
-    isSubmitting ? (0, import_i18n4.__)("Creating\u2026", "elementor") : (0, import_i18n4.__)("Create", "elementor")
+    (0, import_i18n4.__)("Create", "elementor")
   )));
 };
+var generateTempId = () => {
+  return Date.now() + Math.floor(Math.random() * 1e6);
+};
 
 // src/create-component-type.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
@@ -806,21 +821,21 @@ function createComponentView(options) {
 
 // src/populate-store.ts
 var import_react4 = require("react");
-var import_store7 = require("@elementor/store");
+var import_store9 = require("@elementor/store");
 function PopulateStore() {
   (0, import_react4.useEffect)(() => {
-    (0, import_store7.__dispatch)(loadComponents());
+    (0, import_store9.__dispatch)(loadComponents());
   }, []);
   return null;
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store8 = require("@elementor/store");
+var import_store10 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store8.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store10.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -828,16 +843,16 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store8.__getState)());
+      return selectFlatStyles((0, import_store10.__getState)());
     },
     get: (id) => {
-      return selectFlatStyles((0, import_store8.__getState)()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles((0, import_store10.__getState)()).find((style) => style.id === id) ?? null;
     }
   }
 });
 
 // src/store/load-components-styles.ts
-var import_store10 = require("@elementor/store");
+var import_store12 = require("@elementor/store");
 
 // src/utils/get-component-ids.ts
 var import_editor_props = require("@elementor/editor-props");
@@ -861,7 +876,7 @@ async function loadComponentsStyles(elements) {
   if (!componentIds.length) {
     return;
   }
-  const knownComponents = selectStyles((0, import_store10.__getState)());
+  const knownComponents = selectStyles((0, import_store12.__getState)());
   const unknownComponentIds = componentIds.filter((id) => !knownComponents[id]);
   if (!unknownComponentIds.length) {
     return;
@@ -882,24 +897,92 @@ function addStyles(data) {
   const styles = Object.fromEntries(
     data.map(([componentId, componentData]) => [componentId, extractStyles(componentData)])
   );
-  (0, import_store10.__dispatch)(slice.actions.addStyles(styles));
+  (0, import_store12.__dispatch)(slice.actions.addStyles(styles));
 }
 function extractStyles(element) {
   return [...Object.values(element.styles ?? {}), ...(element.elements ?? []).flatMap(extractStyles)];
 }
 
 // src/store/remove-component-styles.ts
-var import_store12 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 function removeComponentStyles(id) {
   apiClient.invalidateComponentConfigCache(id);
-  (0, import_store12.__dispatch)(slice.actions.removeStyles({ id }));
+  (0, import_store14.__dispatch)(slice.actions.removeStyles({ id }));
+}
+
+// src/utils/before-save.ts
+var import_editor_elements5 = require("@elementor/editor-elements");
+var import_store16 = require("@elementor/store");
+var beforeSave = async ({ container, status }) => {
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store16.__getState)());
+  if (!unpublishedComponents.length) {
+    return;
+  }
+  try {
+    const tempIdToComponentId = await createComponents(unpublishedComponents, status);
+    const elements = container.model.get("elements").toJSON();
+    updateComponentInstances(elements, tempIdToComponentId);
+    (0, import_store16.__dispatch)(
+      slice.actions.add(
+        unpublishedComponents.map((component) => ({
+          id: tempIdToComponentId.get(component.id),
+          name: component.name
+        }))
+      )
+    );
+    (0, import_store16.__dispatch)(slice.actions.resetUnpublished());
+  } catch (error) {
+    throw new Error(`Failed to publish components and update component instances: ${error}`);
+  }
+};
+async function createComponents(components, status) {
+  const tempIdToComponentId = /* @__PURE__ */ new Map();
+  const promises = components.map((component) => {
+    return apiClient.create({ name: component.name, content: component.content, status }).then((response) => {
+      tempIdToComponentId.set(component.id, response.component_id);
+    });
+  });
+  await Promise.all(promises);
+  return tempIdToComponentId;
+}
+function updateComponentInstances(elements, tempIdToComponentId) {
+  elements.forEach((element) => {
+    const { shouldUpdate, newComponentId } = shouldUpdateElement(element, tempIdToComponentId);
+    if (shouldUpdate) {
+      updateElementComponentId(element.id, newComponentId);
+    }
+    if (element.elements) {
+      updateComponentInstances(element.elements, tempIdToComponentId);
+    }
+  });
+}
+function shouldUpdateElement(element, tempIdToComponentId) {
+  if (element.widgetType === "e-component") {
+    const currentComponentId = element.settings?.component?.value;
+    if (currentComponentId && tempIdToComponentId.has(currentComponentId)) {
+      return { shouldUpdate: true, newComponentId: tempIdToComponentId.get(currentComponentId) };
+    }
+  }
+  return { shouldUpdate: false, newComponentId: null };
+}
+function updateElementComponentId(elementId, componentId) {
+  (0, import_editor_elements5.updateElementSettings)({
+    id: elementId,
+    props: {
+      component: {
+        $$type: "component-id",
+        value: componentId
+      }
+    },
+    withHistory: false
+  });
 }
 
 // src/init.ts
 var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store14.__registerSlice)(slice);
+  (0, import_store18.__registerSlice)(slice);
   (0, import_editor_canvas4.registerElementType)(TYPE, createComponentType);
   (0, import_editor_v1_adapters3.registerDataHook)("dependency", "editor/documents/close", (args) => {
     const document = (0, import_editor_documents.getV1CurrentDocument)();
@@ -908,6 +991,7 @@ function init() {
     }
     return true;
   });
+  window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
     label: (0, import_i18n6.__)("Components", "elementor"),