@elementor/editor-components 4.3.0-999 → 4.3.0-beta2

package/dist/index.js

@@ -91,11 +91,11 @@ module.exports = __toCommonJS(index_exports);
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_canvas6 = require("@elementor/editor-canvas");
-var import_editor_documents6 = require("@elementor/editor-documents");
+var import_editor_documents5 = require("@elementor/editor-documents");
 var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_embedded_documents_manager2 = require("@elementor/editor-embedded-documents-manager");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 var import_store28 = require("@elementor/store");
 var import_i18n16 = require("@wordpress/i18n");
 
@@ -417,14 +417,21 @@ var useIsSanitizedComponent = (componentId, key) => {
 };
 
 // src/utils/component-document-data.ts
-var import_editor_documents = require("@elementor/editor-documents");
-var getComponentDocumentData = async (id) => {
-  const documentManager = (0, import_editor_documents.getV1DocumentsManager)();
-  try {
-    return await documentManager.request(id);
-  } catch {
-    return null;
-  }
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var getComponentDocumentParams = (id) => ({
+  action: "get_document_config",
+  unique_id: `document-${id}`,
+  data: { id }
+});
+var pendingRequests = /* @__PURE__ */ new Map();
+var getComponentDocumentData = (id) => {
+  const pendingRequest = pendingRequests.get(id);
+  if (pendingRequest) {
+    return pendingRequest;
+  }
+  const request = import_editor_v1_adapters2.ajax.load(getComponentDocumentParams(id)).catch(() => null).finally(() => pendingRequests.delete(id));
+  pendingRequests.set(id, request);
+  return request;
 };
 
 // src/component-instance-transformer.ts
@@ -458,23 +465,27 @@ var import_editor_canvas2 = require("@elementor/editor-canvas");
 var componentOverridableTransformer = (0, import_editor_canvas2.createTransformer)(
   (value, options) => {
     const { overrides } = options.renderContext ?? {};
+    const originValue = normalizeOriginValue(value.origin_value);
     const overrideValue = overrides?.[value.override_key];
     if (overrideValue) {
-      const isOverride = isOriginValueOverride(value.origin_value);
-      if (isOverride) {
-        return transformOverride(value, options, overrideValue);
+      if (isOriginValueOverride(originValue)) {
+        return transformOverride(originValue, options, overrideValue);
       }
       return overrideValue;
     }
-    return value.origin_value;
+    return originValue;
   }
 );
-function transformOverride(value, options, overrideValue) {
+function normalizeOriginValue(originValue) {
+  const isEmpty = !!originValue && Object.keys(originValue).length === 0;
+  return isEmpty ? null : originValue;
+}
+function transformOverride(originValue, options, overrideValue) {
   const transformer = import_editor_canvas2.settingsTransformersRegistry.get("override");
   if (!transformer) {
     return null;
   }
-  const transformedValue = transformer(value.origin_value.value, options);
+  const transformedValue = transformer(originValue.value, options);
   if (!transformedValue) {
     return null;
   }
@@ -484,7 +495,7 @@ function transformOverride(value, options, overrideValue) {
   };
 }
 function isOriginValueOverride(originValue) {
-  return originValue.$$type === "override";
+  return originValue?.$$type === "override";
 }
 
 // src/component-override-transformer.ts
@@ -1126,7 +1137,7 @@ var import_i18n10 = require("@wordpress/i18n");
 // src/utils/detach-component-instance/detach-component-instance.ts
 var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_elements3 = require("@elementor/editor-elements");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_store10 = require("@elementor/store");
 var import_i18n9 = require("@wordpress/i18n");
 
@@ -1406,7 +1417,7 @@ async function detachComponentInstance({
   if (!rootElement) {
     throw new Error(`Component with ID "${componentId}" has no root element.`);
   }
-  const undoableDetach = (0, import_editor_v1_adapters2.undoable)(
+  const undoableDetach = (0, import_editor_v1_adapters3.undoable)(
     {
       do: () => {
         const overrides = extractInstanceOverrides(instanceContainer);
@@ -2548,7 +2559,7 @@ var import_react10 = require("react");
 var import_editor_templates = require("@elementor/editor-templates");
 
 // src/store/actions/load-components-assets.ts
-var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_documents = require("@elementor/editor-documents");
 var import_editor_embedded_documents_manager = require("@elementor/editor-embedded-documents-manager");
 
 // src/utils/get-component-documents.ts
@@ -2624,9 +2635,9 @@ async function loadComponentsAssets(elements) {
   await loadComponentsOverridableProps([...documents.keys()]);
 }
 function updateDocumentState(documents) {
-  const isDrafted = [...documents.values()].some(import_editor_documents2.isDocumentDirty);
+  const isDrafted = [...documents.values()].some(import_editor_documents.isDocumentDirty);
   if (isDrafted) {
-    (0, import_editor_documents2.setDocumentModifiedStatus)(true);
+    (0, import_editor_documents.setDocumentModifiedStatus)(true);
   }
 }
 
@@ -2647,10 +2658,10 @@ function LoadTemplateComponentsInternal() {
 
 // src/create-component-type.ts
 var import_editor_canvas5 = require("@elementor/editor-canvas");
-var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_notifications2 = require("@elementor/editor-notifications");
 var import_store23 = require("@elementor/store");
-var import_utils5 = require("@elementor/utils");
+var import_utils6 = require("@elementor/utils");
 var import_i18n13 = require("@wordpress/i18n");
 
 // src/utils/format-component-elements-id.ts
@@ -2669,29 +2680,85 @@ function formatComponentElementsId(elements, path) {
   });
 }
 
-// src/utils/switch-to-component.ts
-var import_editor_documents3 = require("@elementor/editor-documents");
+// src/utils/reconcile-component-instance-elements.ts
 var import_editor_elements8 = require("@elementor/editor-elements");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_utils5 = require("@elementor/utils");
+var ELEMENT_ID_LENGTH2 = 7;
+function overridesRecordToMapping(overrides) {
+  const mapping = {};
+  for (const [key, value] of Object.entries(overrides)) {
+    mapping[key] = { value };
+  }
+  return mapping;
+}
+function getElementConfig(element) {
+  const type = element.elType === "widget" ? element.widgetType : element.elType;
+  if (!type) {
+    return void 0;
+  }
+  return (0, import_editor_elements8.getWidgetsCache)()?.[type];
+}
+function deriveIds(element, seed) {
+  const id = (0, import_utils5.hashString)(seed, ELEMENT_ID_LENGTH2);
+  return {
+    ...element,
+    id,
+    elements: (element.elements ?? []).map((child, index) => deriveIds(child, `${id}_${index}`))
+  };
+}
+function reconcileElementTree(element, overridesMapping) {
+  const elementConfig = getElementConfig(element);
+  const withOverrides = applyOverridesToSettings(element.settings ?? {}, overridesMapping);
+  const effectiveSettings = unwrapOverridableSettings(withOverrides);
+  const originalChildren = element.elements ?? [];
+  const originalChildIds = new Set(originalChildren.map((child) => child.id));
+  const attributes = {
+    elements: [...originalChildren],
+    settings: effectiveSettings
+  };
+  if (elementConfig?.children_dependencies?.length) {
+    (0, import_editor_elements8.reconcileInitialChildren)({
+      elementId: element.id,
+      elementConfig,
+      attributes
+    });
+  }
+  const reconciledChildren = (attributes.elements ?? []).map(
+    (child) => originalChildIds.has(child.id) ? child : deriveIds(child, `${element.id}_${child.elType}`)
+  ).map((child) => reconcileElementTree(child, overridesMapping));
+  return {
+    ...element,
+    elements: reconciledChildren
+  };
+}
+function reconcileComponentInstanceElements(elements, overrides = {}) {
+  const overridesMapping = overridesRecordToMapping(overrides);
+  return elements.map((element) => reconcileElementTree(element, overridesMapping));
+}
+
+// src/utils/switch-to-component.ts
+var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_elements9 = require("@elementor/editor-elements");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 async function switchToComponent(componentId, componentInstanceId, element) {
   const selector = getSelector(element, componentInstanceId);
-  (0, import_editor_documents3.invalidateDocumentData)(componentId);
-  await (0, import_editor_documents3.switchToDocument)(componentId, {
+  (0, import_editor_documents2.invalidateDocumentData)(componentId);
+  await (0, import_editor_documents2.switchToDocument)(componentId, {
     selector,
     mode: "autosave",
     setAsInitial: false,
     shouldScroll: false
   });
   await loadComponentsOverridableProps([componentId], { force: true });
-  const currentDocumentContainer = (0, import_editor_elements8.getCurrentDocumentContainer)();
+  const currentDocumentContainer = (0, import_editor_elements9.getCurrentDocumentContainer)();
   const topLevelElement = currentDocumentContainer?.children?.[0];
   if (topLevelElement) {
-    (0, import_editor_elements8.selectElement)(topLevelElement.id);
+    (0, import_editor_elements9.selectElement)(topLevelElement.id);
     expandNavigator();
   }
 }
 async function expandNavigator() {
-  await (0, import_editor_v1_adapters3.__privateRunCommand)("navigator/expand-all");
+  await (0, import_editor_v1_adapters4.__privateRunCommand)("navigator/expand-all");
 }
 function getSelector(element, componentInstanceId) {
   if (element) {
@@ -2802,7 +2869,7 @@ function createComponentView(options) {
     eventsManagerConfig = legacyWindow.elementorCommon.eventsManager.config;
     #componentRenderContext;
     isComponentCurrentlyEdited() {
-      const currentDocument = (0, import_editor_documents4.getCurrentDocument)();
+      const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
       return currentDocument?.id === this.getComponentId();
     }
     getRenderContext() {
@@ -2845,7 +2912,11 @@ function createComponentView(options) {
         };
         const instanceId = this.model.get("id");
         const elements = componentInstance.elements ?? [];
-        const formattedElements = formatComponentElementsId(elements, [instanceId]);
+        const reconciledElements = reconcileComponentInstanceElements(
+          elements,
+          componentInstance.overrides ?? {}
+        );
+        const formattedElements = formatComponentElementsId(reconciledElements, [instanceId]);
         this.collection = legacyWindow.elementor.createBackboneElementsCollection(formattedElements);
         this.collection.models.forEach(setInactiveRecursively);
         settings.component_instance = "<template data-children-placeholder></template>";
@@ -2881,7 +2952,7 @@ function createComponentView(options) {
     }
     _getContextMenuConfig() {
       const isAdministrator = isUserAdministrator();
-      const hasPro = (0, import_utils5.hasProInstalled)();
+      const hasPro = (0, import_utils6.hasProInstalled)();
       const isOutdated = isProOutdatedForComponents();
       const showPromoBadge = !hasPro && !isOutdated;
       const badgeClass = "elementor-context-menu-list__item__shortcut__promotion-badge";
@@ -2975,7 +3046,7 @@ function createComponentView(options) {
         notifyComponentEditUpdate();
         return;
       }
-      if (!(0, import_utils5.hasProInstalled)()) {
+      if (!(0, import_utils6.hasProInstalled)()) {
         notifyComponentEditUpgrade();
         return;
       }
@@ -3072,9 +3143,9 @@ function PopulateStore() {
 }
 
 // src/prevent-circular-nesting.ts
-var import_editor_elements9 = require("@elementor/editor-elements");
+var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_store26 = require("@elementor/store");
 var import_i18n14 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
@@ -3084,15 +3155,15 @@ var COMPONENT_CIRCULAR_NESTING_ALERT = {
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
-  (0, import_editor_v1_adapters4.blockCommand)({
+  (0, import_editor_v1_adapters5.blockCommand)({
     command: "document/elements/create",
     condition: blockCircularCreate
   });
-  (0, import_editor_v1_adapters4.blockCommand)({
+  (0, import_editor_v1_adapters5.blockCommand)({
     command: "document/elements/move",
     condition: blockCircularMove
   });
-  (0, import_editor_v1_adapters4.blockCommand)({
+  (0, import_editor_v1_adapters5.blockCommand)({
     command: "document/elements/paste",
     condition: blockCircularPaste
   });
@@ -3167,7 +3238,7 @@ function blockCircularMove(args) {
     if (!container) {
       return false;
     }
-    const allElements = (0, import_editor_elements9.getAllDescendants)(container);
+    const allElements = (0, import_editor_elements10.getAllDescendants)(container);
     return allElements.some((element) => {
       const componentId = extractComponentIdFromContainer(element);
       if (componentId === null) {
@@ -3204,7 +3275,7 @@ function removeComponentStyles(id) {
 }
 
 // src/sync/publish-draft-components-in-page-before-save.ts
-var import_editor_documents5 = require("@elementor/editor-documents");
+var import_editor_documents4 = require("@elementor/editor-documents");
 var import_editor_notifications4 = require("@elementor/editor-notifications");
 var import_http_client2 = require("@elementor/http-client");
 var import_i18n15 = require("@wordpress/i18n");
@@ -3216,7 +3287,7 @@ async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
     return;
   }
   const documents = await getComponentDocuments({ elements });
-  const draftIds = [...documents.values()].filter(import_editor_documents5.isDocumentDirty).map((document2) => document2.id);
+  const draftIds = [...documents.values()].filter(import_editor_documents4.isDocumentDirty).map((document2) => document2.id);
   if (draftIds.length === 0) {
     return;
   }
@@ -3229,7 +3300,7 @@ async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
     }
     throw error;
   }
-  draftIds.forEach((id) => (0, import_editor_documents5.invalidateDocumentData)(id));
+  draftIds.forEach((id) => (0, import_editor_documents4.invalidateDocumentData)(id));
 }
 function isInsufficientPermissionsError(error) {
   return error instanceof import_http_client2.AxiosError && error.response?.data?.code === INSUFFICIENT_PERMISSIONS_ERROR_CODE;
@@ -3262,12 +3333,12 @@ var beforeSave = ({ container, status }) => {
 };
 
 // src/sync/load-component-data-after-instance-added.ts
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 function initLoadComponentDataAfterInstanceAdded() {
-  (0, import_editor_v1_adapters5.registerDataHook)("after", "document/elements/paste", (_args, result) => {
+  (0, import_editor_v1_adapters6.registerDataHook)("after", "document/elements/paste", (_args, result) => {
     load(result);
   });
-  (0, import_editor_v1_adapters5.registerDataHook)("after", "document/elements/import", (_args, result) => {
+  (0, import_editor_v1_adapters6.registerDataHook)("after", "document/elements/import", (_args, result) => {
     load(result);
   });
 }
@@ -3302,8 +3373,8 @@ function init() {
     id: "components-populate-store",
     component: PopulateStore
   });
-  (0, import_editor_v1_adapters6.registerDataHook)("after", "editor/documents/attach-preview", () => {
-    const { id, config } = (0, import_editor_documents6.getV1CurrentDocument)() ?? {};
+  (0, import_editor_v1_adapters7.registerDataHook)("after", "editor/documents/attach-preview", () => {
+    const { id, config } = (0, import_editor_documents5.getV1CurrentDocument)() ?? {};
     if (!id) {
       return;
     }