@elementor/editor-elements 4.3.0-974 → 4.3.0-975

package/dist/index.mjs

@@ -1,6 +1,3 @@
-// src/hooks/use-element-children.ts
-import { __privateUseListenTo as useListenTo, commandEndEvent, v1ReadyEvent } from "@elementor/editor-v1-adapters";
-
 // src/sync/get-container.ts
 import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
 function getContainer(id) {
@@ -16,6 +13,233 @@ var selectElement = (elementId) => {
   }
 };
 
+// src/sync/resolve-element.ts
+function isConnected(container) {
+  if (!container) {
+    return false;
+  }
+  if (!container.view?.el) {
+    return true;
+  }
+  return container.view.el.isConnected;
+}
+function resolveContainer(container, id) {
+  const looked = container.lookup?.();
+  if (isConnected(looked)) {
+    return looked;
+  }
+  const byId = getContainer(id);
+  if (isConnected(byId)) {
+    return byId;
+  }
+  return null;
+}
+function getDocumentUtils() {
+  return window.$e?.components?.get?.("document")?.utils;
+}
+function findModelInDocument(id) {
+  return getDocumentUtils()?.findModelById?.(id) ?? null;
+}
+function addModelToParent(parentId, childData, options) {
+  return getDocumentUtils()?.addModelToParent?.(parentId, childData, options) ?? false;
+}
+function removeModelFromParent(parentId, childId) {
+  return getDocumentUtils()?.removeModelFromParent?.(parentId, childId) ?? false;
+}
+
+// src/sync/resolve-insert-index.ts
+function resolveInsertIndex(position, elements) {
+  const lastIndex = elements.length;
+  switch (position.kind) {
+    case "first":
+      return 0;
+    case "last":
+      return lastIndex;
+    case "index": {
+      const index = typeof position.value === "number" ? position.value : lastIndex;
+      return Math.max(0, Math.min(index, lastIndex));
+    }
+    case "after_type": {
+      const anchor = elements.findIndex((element) => element.elType === position.value);
+      return anchor >= 0 ? anchor + 1 : lastIndex;
+    }
+    case "before_type": {
+      const anchor = elements.findIndex((element) => element.elType === position.value);
+      return anchor >= 0 ? anchor : lastIndex;
+    }
+    default:
+      return lastIndex;
+  }
+}
+
+// src/children-dependencies/stash.ts
+import { getSessionStorageItem, removeSessionStorageItem, setSessionStorageItem } from "@elementor/session";
+var STASH_KEY_PREFIX = "elementor/editor-state";
+var STASH_KEY_SEGMENT = "children-deps";
+function createChildrenStash() {
+  return {
+    get(elementId, childType) {
+      return getSessionStorageItem(buildStashKey(elementId, childType));
+    },
+    save(elementId, childType, data) {
+      setSessionStorageItem(buildStashKey(elementId, childType), data);
+    },
+    clear(elementId, childType) {
+      removeSessionStorageItem(buildStashKey(elementId, childType));
+    },
+    clearAllForElement(elementId) {
+      const prefix = buildElementStashPrefix(elementId);
+      for (let index = sessionStorage.length - 1; index >= 0; index--) {
+        const key = sessionStorage.key(index);
+        if (key?.startsWith(prefix)) {
+          removeSessionStorageItem(key);
+        }
+      }
+    }
+  };
+}
+function buildStashKey(elementId, childType) {
+  return `${STASH_KEY_PREFIX}/${elementId}/${STASH_KEY_SEGMENT}/${childType}`;
+}
+function buildElementStashPrefix(elementId) {
+  return `${STASH_KEY_PREFIX}/${elementId}/${STASH_KEY_SEGMENT}/`;
+}
+
+// src/children-dependencies/utils.ts
+import { isDependencyMet } from "@elementor/editor-props";
+function evaluateWhen(when, settings) {
+  return isDependencyMet(when, settings).isMet;
+}
+
+// src/children-dependencies/bind-settings-reconcile.ts
+function bindSettingsReconcile({ model, elementConfig }) {
+  const stash = createChildrenStash();
+  const rules = elementConfig?.children_dependencies;
+  if (!rules?.length) {
+    return () => {
+    };
+  }
+  const settingsModel = model.get("settings");
+  const elementId = model.get("id");
+  if (!settingsModel?.on || !settingsModel?.off || !elementId) {
+    return () => {
+    };
+  }
+  const lastMet = /* @__PURE__ */ new Map();
+  rules.forEach((rule) => {
+    lastMet.set(rule.child_type, evaluateWhen(rule.when, settingsModel.toJSON()));
+  });
+  const onChange = () => {
+    const currentSettings = settingsModel.toJSON();
+    rules.forEach((rule) => {
+      const previous = lastMet.get(rule.child_type) ?? false;
+      const current = evaluateWhen(rule.when, currentSettings);
+      if (previous === current) {
+        return;
+      }
+      lastMet.set(rule.child_type, current);
+      if (current) {
+        attachChildFromRule(elementId, rule, stash);
+      } else {
+        detachChildFromRule(elementId, rule, stash);
+      }
+    });
+  };
+  settingsModel.on("change", onChange);
+  return () => {
+    settingsModel.off?.("change", onChange);
+    stash.clearAllForElement(elementId);
+  };
+}
+function attachChildFromRule(parentId, rule, stash) {
+  const parent = getContainer(parentId) ?? void 0;
+  const currentChildren = getDirectChildData(parent);
+  const alreadyPresent = currentChildren.some((child) => child.elType === rule.child_type);
+  if (alreadyPresent) {
+    return;
+  }
+  const stashed = rule.stash ? stash.get(parentId, rule.child_type) : void 0;
+  const modelData = stashed ?? rule.default_model ?? { elType: rule.child_type };
+  const insertAt = resolveInsertIndex(rule.position, currentChildren);
+  const attached = addModelToParent(parentId, modelData, { at: insertAt });
+  if (!attached) {
+    return;
+  }
+  if (stashed) {
+    stash.clear(parentId, rule.child_type);
+  }
+  requestNavigatorRefresh(parentId);
+}
+function detachChildFromRule(parentId, rule, stash) {
+  const parent = getContainer(parentId) ?? void 0;
+  const child = parent?.children?.find((candidate) => candidate.model.get("elType") === rule.child_type);
+  if (!child) {
+    return;
+  }
+  const childSnapshot = child.model.toJSON();
+  const removed = removeModelFromParent(parentId, child.id);
+  if (!removed) {
+    return;
+  }
+  if (rule.stash) {
+    stash.save(parentId, rule.child_type, childSnapshot);
+  }
+  requestNavigatorRefresh(parentId);
+}
+function requestNavigatorRefresh(parentId) {
+  if (typeof window === "undefined" || typeof window.dispatchEvent !== "function") {
+    return;
+  }
+  window.dispatchEvent(
+    new CustomEvent("elementor/navigator/refresh-children", {
+      detail: { elementId: parentId }
+    })
+  );
+}
+function getDirectChildData(parent) {
+  return (parent?.children ?? []).map((child) => child.model.toJSON());
+}
+
+// src/children-dependencies/reconcile-initial-children.ts
+function reconcileInitialChildren({
+  elementId,
+  elementConfig,
+  attributes
+}) {
+  const stash = createChildrenStash();
+  const rules = elementConfig?.children_dependencies;
+  if (!rules?.length) {
+    return;
+  }
+  const elements = [...attributes.elements ?? []];
+  const settings = attributes.settings ?? {};
+  rules.forEach((rule) => {
+    const isMet = evaluateWhen(rule.when, settings);
+    const existingIndex = elements.findIndex((element) => element.elType === rule.child_type);
+    const isPresent = existingIndex >= 0;
+    if (isMet && !isPresent) {
+      const stashed = rule.stash ? stash.get(elementId, rule.child_type) : void 0;
+      const modelData = stashed ?? rule.default_model ?? { elType: rule.child_type };
+      const insertAt = resolveInsertIndex(rule.position, elements);
+      elements.splice(insertAt, 0, modelData);
+      if (stashed) {
+        stash.clear(elementId, rule.child_type);
+      }
+      return;
+    }
+    if (!isMet && isPresent) {
+      const [removed] = elements.splice(existingIndex, 1);
+      if (rule.stash && removed) {
+        stash.save(elementId, rule.child_type, removed);
+      }
+    }
+  });
+  attributes.elements = elements;
+}
+
+// src/hooks/use-element-children.ts
+import { __privateUseListenTo as useListenTo, commandEndEvent, v1ReadyEvent } from "@elementor/editor-v1-adapters";
+
 // src/sync/model-utils.ts
 function findChildRecursive(model, predicate) {
   const childModels = model.get("elements") ?? [];
@@ -242,40 +466,6 @@ function deleteElement({ container, options = {} }) {
   });
 }
 
-// src/sync/resolve-element.ts
-function isConnected(container) {
-  if (!container) {
-    return false;
-  }
-  if (!container.view?.el) {
-    return true;
-  }
-  return container.view.el.isConnected;
-}
-function resolveContainer(container, id) {
-  const looked = container.lookup?.();
-  if (isConnected(looked)) {
-    return looked;
-  }
-  const byId = getContainer(id);
-  if (isConnected(byId)) {
-    return byId;
-  }
-  return null;
-}
-function getDocumentUtils() {
-  return window.$e?.components?.get?.("document")?.utils;
-}
-function findModelInDocument(id) {
-  return getDocumentUtils()?.findModelById?.(id) ?? null;
-}
-function addModelToParent(parentId, childData, options) {
-  return getDocumentUtils()?.addModelToParent?.(parentId, childData, options) ?? false;
-}
-function removeModelFromParent(parentId, childId) {
-  return getDocumentUtils()?.removeModelFromParent?.(parentId, childId) ?? false;
-}
-
 // src/sync/create-elements.ts
 var createElements = ({
   elements,
@@ -1216,6 +1406,7 @@ var playElementInteractions = (elementId, interactionId) => {
 export {
   ELEMENT_STYLE_CHANGE_EVENT,
   addModelToParent,
+  bindSettingsReconcile,
   createElement,
   createElementStyle,
   createElements,
@@ -1224,6 +1415,7 @@ export {
   dropElement,
   duplicateElement,
   duplicateElements,
+  evaluateWhen,
   findChildRecursive,
   findModelInDocument,
   generateElementId,
@@ -1251,10 +1443,12 @@ export {
   moveElement,
   moveElements,
   playElementInteractions,
+  reconcileInitialChildren,
   removeElements,
   removeModelFromParent,
   replaceElement,
   resolveContainer,
+  resolveInsertIndex,
   selectElement,
   shouldCreateNewLocalStyle,
   styleRerenderEvents,