@elementor/editor-elements 4.2.0-beta2 → 4.3.0-1000

package/dist/index.js

@@ -22,6 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   ELEMENT_STYLE_CHANGE_EVENT: () => ELEMENT_STYLE_CHANGE_EVENT,
   addModelToParent: () => addModelToParent,
+  bindSettingsReconcile: () => bindSettingsReconcile,
   createElement: () => createElement,
   createElementStyle: () => createElementStyle,
   createElements: () => createElements,
@@ -30,6 +31,7 @@ __export(index_exports, {
   dropElement: () => dropElement,
   duplicateElement: () => duplicateElement,
   duplicateElements: () => duplicateElements,
+  evaluateWhen: () => evaluateWhen,
   findChildRecursive: () => findChildRecursive,
   findModelInDocument: () => findModelInDocument,
   generateElementId: () => generateElementId,
@@ -41,11 +43,13 @@ __export(index_exports, {
   getCurrentDocumentId: () => getCurrentDocumentId,
   getElementChildrenWithFallback: () => getElementChildren,
   getElementEditorSettings: () => getElementEditorSettings,
+  getElementIcon: () => getElementIcon,
   getElementInteractions: () => getElementInteractions,
   getElementLabel: () => getElementLabel,
   getElementSetting: () => getElementSetting,
   getElementSettings: () => getElementSettings,
   getElementStyles: () => getElementStyles,
+  getElementTitle: () => getElementTitle,
   getElementType: () => getElementType,
   getElements: () => getElements,
   getLinkInLinkRestriction: () => getLinkInLinkRestriction,
@@ -55,10 +59,12 @@ __export(index_exports, {
   moveElement: () => moveElement,
   moveElements: () => moveElements,
   playElementInteractions: () => playElementInteractions,
+  reconcileInitialChildren: () => reconcileInitialChildren,
   removeElements: () => removeElements,
   removeModelFromParent: () => removeModelFromParent,
   replaceElement: () => replaceElement,
   resolveContainer: () => resolveContainer,
+  resolveInsertIndex: () => resolveInsertIndex,
   selectElement: () => selectElement,
   shouldCreateNewLocalStyle: () => shouldCreateNewLocalStyle,
   styleRerenderEvents: () => styleRerenderEvents,
@@ -74,9 +80,6 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/hooks/use-element-children.ts
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-
 // src/sync/get-container.ts
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 function getContainer(id) {
@@ -92,6 +95,250 @@ 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
+var import_session = require("@elementor/session");
+var STASH_KEY_PREFIX = "elementor/editor-state";
+var STASH_KEY_SEGMENT = "children-deps";
+function createChildrenStash() {
+  return {
+    get(elementId, childType) {
+      return (0, import_session.getSessionStorageItem)(buildStashKey(elementId, childType));
+    },
+    save(elementId, childType, data) {
+      (0, import_session.setSessionStorageItem)(buildStashKey(elementId, childType), data);
+    },
+    clear(elementId, childType) {
+      (0, import_session.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)) {
+          (0, import_session.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
+var import_editor_props = require("@elementor/editor-props");
+
+// src/sync/generate-element-id.ts
+var generateElementId = () => {
+  const extendedWindow = window;
+  return extendedWindow.elementorCommon?.helpers?.getUniqueId?.() ?? `el-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+};
+
+// src/children-dependencies/utils.ts
+function evaluateWhen(when, settings) {
+  return (0, import_editor_props.isDependencyMet)(when, settings).isMet;
+}
+function ensureModelId(model) {
+  const { skipDefaultChildren: _skipDefaultChildren, ...rest } = model;
+  return rest.id ? rest : { ...rest, id: generateElementId() };
+}
+function resolveChildModelData(elementId, rule, stash) {
+  const stashed = rule.stash ? stash.get(elementId, rule.child_type) : void 0;
+  const modelData = ensureModelId(
+    stashed ?? rule.default_model ?? { elType: rule.child_type }
+  );
+  return { modelData, wasStashed: Boolean(stashed) };
+}
+
+// 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 { modelData, wasStashed } = resolveChildModelData(parentId, rule, stash);
+  const insertAt = resolveInsertIndex(rule.position, currentChildren);
+  const attached = addModelToParent(parentId, modelData, { at: insertAt });
+  if (!attached) {
+    return;
+  }
+  if (wasStashed) {
+    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 { modelData, wasStashed } = resolveChildModelData(elementId, rule, stash);
+      const insertAt = resolveInsertIndex(rule.position, elements);
+      elements.splice(insertAt, 0, modelData);
+      if (wasStashed) {
+        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
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+
 // src/sync/model-utils.ts
 function findChildRecursive(model, predicate) {
   const childModels = model.get("elements") ?? [];
@@ -318,40 +565,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,
@@ -556,12 +769,6 @@ var duplicateElements = ({
   return undoableDuplicate({ elementIds });
 };
 
-// src/sync/generate-element-id.ts
-var generateElementId = () => {
-  const extendedWindow = window;
-  return extendedWindow.elementorCommon?.helpers?.getUniqueId?.() ?? `el-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
-};
-
 // src/sync/get-current-document-container.ts
 function getCurrentDocumentContainer() {
   const extendedWindow = window;
@@ -578,29 +785,39 @@ function getCurrentDocumentId() {
   }
 }
 
+// src/sync/get-element-icon.ts
+function getElementIcon(elementId) {
+  const container = getContainer(elementId);
+  const type = container?.model.get("widgetType") || container?.model.get("elType");
+  if (!type) {
+    return null;
+  }
+  return getWidgetsCache()?.[type]?.icon ?? null;
+}
+
 // src/errors.ts
-var import_utils = require("@elementor/utils");
-var ElementNotFoundError = (0, import_utils.createError)({
+var import_utils4 = require("@elementor/utils");
+var ElementNotFoundError = (0, import_utils4.createError)({
   code: "element_not_found",
   message: "Element not found."
 });
-var StyleNotFoundError = (0, import_utils.createError)({
+var StyleNotFoundError = (0, import_utils4.createError)({
   code: "style_not_found",
   message: "Style not found."
 });
-var ElementTypeNotExistsError = (0, import_utils.createError)({
+var ElementTypeNotExistsError = (0, import_utils4.createError)({
   code: "element_type_not_exists",
   message: "Element type does not exist."
 });
-var ElementLabelNotExistsError = (0, import_utils.createError)({
+var ElementLabelNotExistsError = (0, import_utils4.createError)({
   code: "element_label_not_exists",
   message: "Element label does not exist."
 });
-var ElementParentNotFoundError = (0, import_utils.createError)({
+var ElementParentNotFoundError = (0, import_utils4.createError)({
   code: "element_parent_not_found",
   message: "Element parent not found."
 });
-var ElementIndexNotFoundError = (0, import_utils.createError)({
+var ElementIndexNotFoundError = (0, import_utils4.createError)({
   code: "element_index_not_found",
   message: "Element index not found."
 });
@@ -622,6 +839,37 @@ function getElementLabel(elementId) {
   return label;
 }
 
+// src/sync/get-element-title.ts
+function extractString(value) {
+  if (typeof value === "string") {
+    return value || null;
+  }
+  if (value && typeof value === "object" && "value" in value && typeof value.value === "string") {
+    return value.value || null;
+  }
+  return null;
+}
+function getElementTitle(elementId) {
+  const editorSettings = getElementEditorSettings(elementId);
+  const editorTitle = extractString(editorSettings?.title);
+  if (editorTitle) {
+    return editorTitle;
+  }
+  const legacyTitle = extractString(getElementSetting(elementId, "_title"));
+  if (legacyTitle) {
+    return legacyTitle;
+  }
+  const presetTitle = extractString(getElementSetting(elementId, "presetTitle"));
+  if (presetTitle) {
+    return presetTitle;
+  }
+  try {
+    return getElementLabel(elementId);
+  } catch {
+    return null;
+  }
+}
+
 // src/sync/get-element-styles.ts
 var getElementStyles = (elementID) => {
   const container = getContainer(elementID);
@@ -1075,11 +1323,11 @@ var styleRerenderEvents = [
 ];
 
 // src/styles/create-element-style.ts
-var import_editor_props2 = require("@elementor/editor-props");
+var import_editor_props3 = require("@elementor/editor-props");
 var import_editor_styles = require("@elementor/editor-styles");
 
 // src/styles/mutate-element-styles.ts
-var import_editor_props = require("@elementor/editor-props");
+var import_editor_props2 = require("@elementor/editor-props");
 var import_editor_v1_adapters18 = require("@elementor/editor-v1-adapters");
 function mutateElementStyles(elementId, mutator) {
   const container = getContainer(elementId);
@@ -1131,7 +1379,7 @@ function clearRemovedClasses(container, { oldIds, newIds }) {
 function getClassesProps(container) {
   return Object.entries(container.settings.toJSON()).filter((prop) => {
     const [, value] = prop;
-    return import_editor_props.classesPropTypeUtil.isValid(value);
+    return import_editor_props2.classesPropTypeUtil.isValid(value);
   });
 }
 function notifyChanges() {
@@ -1170,7 +1418,7 @@ function createElementStyle({
 }
 function addStyleToClassesProp(elementId, classesProp, styleId) {
   const base = getElementSetting(elementId, classesProp);
-  const classesPropValue = import_editor_props2.classesPropTypeUtil.create(
+  const classesPropValue = import_editor_props3.classesPropTypeUtil.create(
     (prev) => {
       return [...prev ?? [], styleId];
     },
@@ -1197,7 +1445,7 @@ function deleteElementStyle(elementId, styleId) {
 }
 
 // src/styles/update-element-style.ts
-var import_editor_props3 = require("@elementor/editor-props");
+var import_editor_props4 = require("@elementor/editor-props");
 var import_editor_styles2 = require("@elementor/editor-styles");
 function updateElementStyle(args) {
   mutateElementStyles(args.elementId, (styles) => {
@@ -1208,7 +1456,7 @@ function updateElementStyle(args) {
     const variant = (0, import_editor_styles2.getVariantByMeta)(style, args.meta);
     const customCss = ("custom_css" in args ? args.custom_css : variant?.custom_css) ?? null;
     if (variant) {
-      variant.props = (0, import_editor_props3.mergeProps)(variant.props, args.props);
+      variant.props = (0, import_editor_props4.mergeProps)(variant.props, args.props);
       variant.custom_css = customCss?.raw ? customCss : null;
     } else {
       style.variants.push({ meta: args.meta, props: args.props, custom_css: customCss });
@@ -1250,6 +1498,7 @@ var playElementInteractions = (elementId, interactionId) => {
 0 && (module.exports = {
   ELEMENT_STYLE_CHANGE_EVENT,
   addModelToParent,
+  bindSettingsReconcile,
   createElement,
   createElementStyle,
   createElements,
@@ -1258,6 +1507,7 @@ var playElementInteractions = (elementId, interactionId) => {
   dropElement,
   duplicateElement,
   duplicateElements,
+  evaluateWhen,
   findChildRecursive,
   findModelInDocument,
   generateElementId,
@@ -1269,11 +1519,13 @@ var playElementInteractions = (elementId, interactionId) => {
   getCurrentDocumentId,
   getElementChildrenWithFallback,
   getElementEditorSettings,
+  getElementIcon,
   getElementInteractions,
   getElementLabel,
   getElementSetting,
   getElementSettings,
   getElementStyles,
+  getElementTitle,
   getElementType,
   getElements,
   getLinkInLinkRestriction,
@@ -1283,10 +1535,12 @@ var playElementInteractions = (elementId, interactionId) => {
   moveElement,
   moveElements,
   playElementInteractions,
+  reconcileInitialChildren,
   removeElements,
   removeModelFromParent,
   replaceElement,
   resolveContainer,
+  resolveInsertIndex,
   selectElement,
   shouldCreateNewLocalStyle,
   styleRerenderEvents,