@elementor/editor-components 3.33.0-252 → 3.33.0-253

package/dist/index.js

@@ -41,7 +41,7 @@ var import_editor_documents2 = 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_adapters5 = require("@elementor/editor-v1-adapters");
-var import_store20 = require("@elementor/store");
+var import_store18 = require("@elementor/store");
 var import_i18n8 = require("@wordpress/i18n");
 
 // src/component-id-transformer.ts
@@ -102,7 +102,8 @@ var initialState = {
   data: [],
   unpublishedData: [],
   loadStatus: "idle",
-  styles: {}
+  styles: {},
+  createdThisSession: []
 };
 var SLICE_NAME = "components";
 var slice = (0, import_store2.__createSlice)({
@@ -131,6 +132,9 @@ var slice = (0, import_store2.__createSlice)({
     },
     addStyles: (state, { payload }) => {
       state.styles = { ...state.styles, ...payload };
+    },
+    addCreatedThisSession: (state, { payload }) => {
+      state.createdThisSession.push(payload);
     }
   },
   extraReducers: (builder) => {
@@ -150,11 +154,12 @@ var selectData = (state) => state[SLICE_NAME].data;
 var selectLoadStatus = (state) => state[SLICE_NAME].loadStatus;
 var selectStylesDefinitions = (state) => state[SLICE_NAME].styles ?? {};
 var selectUnpublishedData = (state) => state[SLICE_NAME].unpublishedData;
+var getCreatedThisSession = (state) => state[SLICE_NAME].createdThisSession;
 var selectComponents = (0, import_store2.__createSelector)(
   selectData,
   selectUnpublishedData,
   (data, unpublishedData) => [
-    ...unpublishedData.map((item) => ({ id: item.id, name: item.name })),
+    ...unpublishedData.map((item) => ({ uid: item.uid, name: item.name })),
     ...data
   ]
 );
@@ -162,18 +167,14 @@ var selectUnpublishedComponents = (0, import_store2.__createSelector)(
   selectUnpublishedData,
   (unpublishedData) => unpublishedData
 );
-var selectComponentsObject = (0, import_store2.__createSelector)(
-  selectData,
-  selectUnpublishedData,
-  (data, unpublishedData) => data.concat(unpublishedData).reduce((acc, component) => {
-    acc[component.id] = component;
-    return acc;
-  }, {})
-);
 var selectLoadIsPending = (0, import_store2.__createSelector)(selectLoadStatus, (status) => status === "pending");
 var selectLoadIsError = (0, import_store2.__createSelector)(selectLoadStatus, (status) => status === "error");
 var selectStyles = (state) => state[SLICE_NAME].styles ?? {};
 var selectFlatStyles = (0, import_store2.__createSelector)(selectStylesDefinitions, (data) => Object.values(data).flat());
+var selectCreatedThisSession = (0, import_store2.__createSelector)(
+  getCreatedThisSession,
+  (createdThisSession) => createdThisSession
+);
 
 // src/utils/component-document-data.ts
 var getComponentDocumentData = async (id) => {
@@ -198,15 +199,20 @@ function getDocumentsManager() {
 }
 
 // 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.elements);
+var componentIdTransformer = (0, import_editor_canvas.createTransformer)(
+  async (id) => {
+    const unpublishedComponents = selectUnpublishedComponents((0, import_store3.__getState)());
+    const unpublishedComponent = unpublishedComponents.find(({ uid }) => uid === id);
+    if (unpublishedComponent) {
+      return structuredClone(unpublishedComponent.elements);
+    }
+    if (typeof id !== "number") {
+      throw new Error(`Component ID "${id}" not found.`);
+    }
+    const data = await getComponentDocumentData(id);
+    return data?.elements ?? [];
   }
-  const data = await getComponentDocumentData(id);
-  return data?.elements ?? [];
-});
+);
 
 // src/components/components-tab/components.tsx
 var React6 = __toESM(require("react"));
@@ -386,18 +392,19 @@ var createComponentModel = (component) => {
     settings: {
       component: {
         $$type: "component-id",
-        value: component.id
+        value: component.id ?? component.uid
       }
     },
     editor_settings: {
-      title: component.name
+      title: component.name,
+      component_uid: component.uid
     }
   };
 };
 
 // src/components/components-tab/components-item.tsx
 var ComponentItem = ({ component }) => {
-  const componentModel = createComponentModel({ id: component.id, name: component.name });
+  const componentModel = createComponentModel(component);
   const handleClick = () => {
     addComponentToPage(componentModel);
   };
@@ -488,7 +495,7 @@ function ComponentsList() {
     }
     return /* @__PURE__ */ React5.createElement(EmptyState, null);
   }
-  return /* @__PURE__ */ React5.createElement(import_ui4.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React5.createElement(ComponentItem, { key: component.id, component })));
+  return /* @__PURE__ */ React5.createElement(import_ui4.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React5.createElement(ComponentItem, { key: component.uid, component })));
 }
 var EmptyState = () => {
   return /* @__PURE__ */ React5.createElement(
@@ -599,6 +606,7 @@ var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
 var import_store9 = require("@elementor/store");
 var import_ui5 = require("@elementor/ui");
+var import_utils2 = require("@elementor/utils");
 var import_i18n4 = require("@wordpress/i18n");
 
 // src/components/create-component-form/hooks/use-form.ts
@@ -693,27 +701,25 @@ function CreateComponentForm() {
       window.removeEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup);
     };
   }, []);
-  const handleSave = async (values) => {
+  const handleSave = (values) => {
     try {
       if (!element) {
         throw new Error(`Can't save element as component: element not found`);
       }
-      const tempId = generateTempId();
+      const uid = (0, import_utils2.generateUniqueId)("component");
       dispatch5(
         slice.actions.addUnpublished({
-          id: tempId,
+          uid,
           name: values.componentName,
           elements: [element.element.model.toJSON({ remove: ["default"] })]
         })
       );
-      replaceElementWithComponent(element.element, {
-        id: tempId,
-        name: values.componentName
-      });
+      dispatch5(slice.actions.addCreatedThisSession(uid));
+      replaceElementWithComponent(element.element, { uid, name: values.componentName });
       setResultNotification({
         show: true,
-        // 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()),
+        // Translators: %1$s: Component name, %2$s: Component UID
+        message: (0, import_i18n4.__)("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
         type: "success"
       });
       resetAndClosePopup();
@@ -730,11 +736,14 @@ function CreateComponentForm() {
     setElement(null);
     setAnchorPosition(void 0);
   };
+  const cancelSave = () => {
+    resetAndClosePopup();
+  };
   return /* @__PURE__ */ React7.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React7.createElement(
     import_ui5.Popover,
     {
       open: element !== null,
-      onClose: resetAndClosePopup,
+      onClose: cancelSave,
       anchorReference: "anchorPosition",
       anchorPosition
     },
@@ -743,7 +752,7 @@ function CreateComponentForm() {
       {
         initialValues: { componentName: element.elementLabel },
         handleSave,
-        closePopup: resetAndClosePopup
+        closePopup: cancelSave
       }
     )
   ), /* @__PURE__ */ React7.createElement(import_ui5.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React7.createElement(
@@ -816,16 +825,15 @@ var Form = ({
     (0, import_i18n4.__)("Create", "elementor")
   )));
 };
-var generateTempId = () => {
-  return Date.now() + Math.floor(Math.random() * 1e6);
-};
 
 // src/components/edit-component/edit-component.tsx
 var React9 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_editor_documents = require("@elementor/editor-documents");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_store11 = require("@elementor/store");
+
+// src/components/consts.ts
+var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 
 // src/components/edit-component/component-modal.tsx
 var React8 = __toESM(require("react"));
@@ -842,10 +850,10 @@ function useCanvasDocument() {
 
 // src/hooks/use-element-rect.ts
 var import_react4 = require("react");
-var import_utils2 = require("@elementor/utils");
+var import_utils3 = require("@elementor/utils");
 function useElementRect(element) {
   const [rect, setRect] = (0, import_react4.useState)(new DOMRect(0, 0, 0, 0));
-  const onChange = (0, import_utils2.throttle)(
+  const onChange = (0, import_utils3.throttle)(
     () => {
       setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
     },
@@ -1022,7 +1030,6 @@ function EditComponent() {
   return /* @__PURE__ */ React9.createElement(ComponentModal, { element: elementDom, onClose: onBack });
 }
 function useHandleDocumentSwitches(path, setPath) {
-  const components = (0, import_store11.__useSelector)(selectComponentsObject);
   const documentsManager = (0, import_editor_documents.getV1DocumentsManager)();
   (0, import_react6.useEffect)(
     () => (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => {
@@ -1035,14 +1042,14 @@ function useHandleDocumentSwitches(path, setPath) {
       if (currentComponentId) {
         apiClient.unlockComponent(currentComponentId);
       }
-      const isComponent = !!components?.[nextDocument.id];
+      const isComponent = nextDocument.config.type === COMPONENT_DOCUMENT_TYPE;
       if (!isComponent) {
         setPath([]);
         return;
       }
       setPath(getUpdatedComponentPath(path, nextDocument));
     }),
-    [path, setPath, components, documentsManager]
+    [path, setPath, documentsManager]
   );
 }
 function getUpdatedComponentPath(path, nextDocument) {
@@ -1210,21 +1217,21 @@ function setInactiveRecursively(model) {
 
 // src/populate-store.ts
 var import_react7 = require("react");
-var import_store13 = require("@elementor/store");
+var import_store11 = require("@elementor/store");
 function PopulateStore() {
   (0, import_react7.useEffect)(() => {
-    (0, import_store13.__dispatch)(loadComponents());
+    (0, import_store11.__dispatch)(loadComponents());
   }, []);
   return null;
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store14 = require("@elementor/store");
+var import_store12 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store14.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store12.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -1232,45 +1239,46 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store14.__getState)());
+      return selectFlatStyles((0, import_store12.__getState)());
     },
     get: (id) => {
-      return selectFlatStyles((0, import_store14.__getState)()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles((0, import_store12.__getState)()).find((style) => style.id === id) ?? null;
     }
   }
 });
 
 // src/store/remove-component-styles.ts
-var import_store16 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 function removeComponentStyles(id) {
   apiClient.invalidateComponentConfigCache(id);
-  (0, import_store16.__dispatch)(slice.actions.removeStyles({ id }));
+  (0, import_store14.__dispatch)(slice.actions.removeStyles({ id }));
 }
 
 // src/sync/create-components-before-save.ts
 var import_editor_elements5 = require("@elementor/editor-elements");
-var import_store18 = require("@elementor/store");
+var import_store16 = require("@elementor/store");
 async function createComponentsBeforeSave({
   container,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store18.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store16.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
-    const tempIdToComponentId = await createComponents(unpublishedComponents, status);
+    const uidToComponentId = await createComponents(unpublishedComponents, status);
     const elements = container.model.get("elements").toJSON();
-    updateComponentInstances(elements, tempIdToComponentId);
-    (0, import_store18.__dispatch)(
+    updateComponentInstances(elements, uidToComponentId);
+    (0, import_store16.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
-          id: tempIdToComponentId.get(component.id),
-          name: component.name
+          id: uidToComponentId.get(component.uid),
+          name: component.name,
+          uid: component.uid
         }))
       )
     );
-    (0, import_store18.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store16.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -1279,33 +1287,33 @@ async function createComponents(components, status) {
   const response = await apiClient.create({
     status,
     items: components.map((component) => ({
-      temp_id: component.id,
+      uid: component.uid,
       title: component.name,
       elements: component.elements
     }))
   });
   const map = /* @__PURE__ */ new Map();
   Object.entries(response).forEach(([key, value]) => {
-    map.set(Number(key), value);
+    map.set(key, value);
   });
   return map;
 }
-function updateComponentInstances(elements, tempIdToComponentId) {
+function updateComponentInstances(elements, uidToComponentId) {
   elements.forEach((element) => {
-    const { shouldUpdate, newComponentId } = shouldUpdateElement(element, tempIdToComponentId);
+    const { shouldUpdate, newComponentId } = shouldUpdateElement(element, uidToComponentId);
     if (shouldUpdate) {
       updateElementComponentId(element.id, newComponentId);
     }
     if (element.elements) {
-      updateComponentInstances(element.elements, tempIdToComponentId);
+      updateComponentInstances(element.elements, uidToComponentId);
     }
   });
 }
-function shouldUpdateElement(element, tempIdToComponentId) {
+function shouldUpdateElement(element, uidToComponentId) {
   if (element.widgetType === "e-component") {
     const currentComponentId = element.settings?.component?.value;
-    if (currentComponentId && tempIdToComponentId.has(currentComponentId)) {
-      return { shouldUpdate: true, newComponentId: tempIdToComponentId.get(currentComponentId) };
+    if (currentComponentId && uidToComponentId.has(currentComponentId)) {
+      return { shouldUpdate: true, newComponentId: uidToComponentId.get(currentComponentId) };
     }
   }
   return { shouldUpdate: false, newComponentId: null };
@@ -1353,17 +1361,17 @@ var beforeSave = ({ container, status }) => {
 };
 
 // src/init.ts
-var COMPONENT_DOCUMENT_TYPE = "elementor_component";
+var COMPONENT_DOCUMENT_TYPE2 = "elementor_component";
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store20.__registerSlice)(slice);
+  (0, import_store18.__registerSlice)(slice);
   (0, import_editor_canvas5.registerElementType)(
     TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
   (0, import_editor_v1_adapters5.registerDataHook)("dependency", "editor/documents/close", (args) => {
     const document = (0, import_editor_documents2.getV1CurrentDocument)();
-    if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
+    if (document.config.type === COMPONENT_DOCUMENT_TYPE2) {
       args.mode = "autosave";
     }
     return true;