@elementor/editor-interactions 4.0.0-667 → 4.0.0-668

package/dist/index.js

@@ -1129,37 +1129,135 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   }
 });
 
+// src/commands/paste-interactions.ts
+var import_editor_elements4 = require("@elementor/editor-elements");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_i18n6 = require("@wordpress/i18n");
+
+// src/commands/get-clipboard-elements.ts
+function getClipboardElements(storageKey = "clipboard") {
+  try {
+    const storedData = JSON.parse(localStorage.getItem("elementor") ?? "{}");
+    return storedData[storageKey]?.elements;
+  } catch {
+    return void 0;
+  }
+}
+
+// src/commands/paste-interactions.ts
+function isAtomicContainer(container) {
+  const type = container?.model.get("widgetType") || container?.model.get("elType");
+  const widgetsCache = (0, import_editor_elements4.getWidgetsCache)();
+  const elementConfig = widgetsCache?.[type];
+  return Boolean(elementConfig?.atomic_props_schema);
+}
+function getTitleForContainers(containers) {
+  return containers.length > 1 ? (0, import_i18n6.__)("Elements", "elementor") : (0, import_editor_elements4.getElementLabel)(containers[0].id);
+}
+function normalizeClipboardInteractions(raw) {
+  if (!raw) {
+    return null;
+  }
+  const parsed = typeof raw === "string" ? JSON.parse(raw) : raw;
+  if (!parsed?.items?.length) {
+    return null;
+  }
+  return { version: parsed.version ?? 1, items: parsed.items };
+}
+function regenerateInteractionIds(interactions) {
+  const cloned = structuredClone(interactions);
+  cloned.items?.forEach((item) => {
+    if (item.$$type === "interaction-item" && item.value) {
+      item.value.interaction_id = createString(generateTempInteractionId());
+    }
+  });
+  return cloned;
+}
+function initPasteInteractionsCommand() {
+  const undoablePasteInteractions = (0, import_editor_v1_adapters3.undoable)(
+    {
+      do: ({ containers, newInteractions }) => {
+        const pasted = regenerateInteractionIds(newInteractions);
+        return containers.map((container) => {
+          const elementId = container.id;
+          const previous = (0, import_editor_elements4.getElementInteractions)(elementId);
+          (0, import_editor_elements4.updateElementInteractions)({
+            elementId,
+            interactions: pasted
+          });
+          return { elementId, previous: previous ?? { version: 1, items: [] } };
+        });
+      },
+      undo: (_, revertData) => {
+        revertData.forEach(({ elementId, previous }) => {
+          (0, import_editor_elements4.updateElementInteractions)({
+            elementId,
+            interactions: previous.items?.length ? previous : void 0
+          });
+        });
+      }
+    },
+    {
+      title: ({ containers }) => getTitleForContainers(containers),
+      subtitle: (0, import_i18n6.__)("Interactions Pasted", "elementor")
+    }
+  );
+  (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.commandStartEvent)("document/elements/paste-interactions"), (e) => {
+    const args = e.args;
+    const containers = args.containers ?? (args.container ? [args.container] : []);
+    const storageKey = args.storageKey ?? "clipboard";
+    if (!containers.length) {
+      return;
+    }
+    const clipboardElements = getClipboardElements(storageKey);
+    const [clipboardElement] = clipboardElements ?? [];
+    if (!clipboardElement) {
+      return;
+    }
+    const newInteractions = normalizeClipboardInteractions(clipboardElement.interactions);
+    if (!newInteractions) {
+      return;
+    }
+    const existingContainers = containers.filter((c) => (0, import_editor_elements4.getContainer)(c.id));
+    const validContainers = existingContainers.filter(isAtomicContainer);
+    if (!validContainers.length) {
+      return;
+    }
+    undoablePasteInteractions({ containers: validContainers, newInteractions });
+  });
+}
+
 // src/components/controls/direction.tsx
 var React12 = __toESM(require("react"));
 var import_react11 = require("react");
 var import_editor_controls6 = require("@elementor/editor-controls");
 var import_icons3 = require("@elementor/icons");
-var import_i18n6 = require("@wordpress/i18n");
+var import_i18n7 = require("@wordpress/i18n");
 function Direction({ value, onChange, interactionType }) {
   const options = (0, import_react11.useMemo)(() => {
     const isIn = interactionType === "in";
     return [
       {
         value: "top",
-        label: isIn ? (0, import_i18n6.__)("From top", "elementor") : (0, import_i18n6.__)("To top", "elementor"),
+        label: isIn ? (0, import_i18n7.__)("From top", "elementor") : (0, import_i18n7.__)("To top", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowDownSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowUpSmallIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "bottom",
-        label: interactionType === "in" ? (0, import_i18n6.__)("From bottom", "elementor") : (0, import_i18n6.__)("To bottom", "elementor"),
+        label: interactionType === "in" ? (0, import_i18n7.__)("From bottom", "elementor") : (0, import_i18n7.__)("To bottom", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowUpSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowDownSmallIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "left",
-        label: interactionType === "in" ? (0, import_i18n6.__)("From left", "elementor") : (0, import_i18n6.__)("To left", "elementor"),
+        label: interactionType === "in" ? (0, import_i18n7.__)("From left", "elementor") : (0, import_i18n7.__)("To left", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowRightIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowLeftIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "right",
-        label: interactionType === "in" ? (0, import_i18n6.__)("From right", "elementor") : (0, import_i18n6.__)("To right", "elementor"),
+        label: interactionType === "in" ? (0, import_i18n7.__)("From right", "elementor") : (0, import_i18n7.__)("To right", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowLeftIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowRightIcon, { fontSize: size }),
         showTooltip: true
       }
@@ -1170,21 +1268,21 @@ function Direction({ value, onChange, interactionType }) {
 
 // src/components/controls/easing.tsx
 var React15 = __toESM(require("react"));
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/ui/promotion-select.tsx
 var React14 = __toESM(require("react"));
 var import_react13 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui9 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/ui/interactions-promotion-chip.tsx
 var React13 = __toESM(require("react"));
 var import_react12 = require("react");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui8 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_i18n8 = require("@wordpress/i18n");
 var InteractionsPromotionChip = (0, import_react12.forwardRef)(
   ({ content, upgradeUrl, anchorRef }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
@@ -1199,9 +1297,9 @@ var InteractionsPromotionChip = (0, import_react12.forwardRef)(
       import_editor_ui.PromotionPopover,
       {
         open: isOpen,
-        title: (0, import_i18n7.__)("Interactions", "elementor"),
+        title: (0, import_i18n8.__)("Interactions", "elementor"),
         content,
-        ctaText: (0, import_i18n7.__)("Upgrade now", "elementor"),
+        ctaText: (0, import_i18n8.__)("Upgrade now", "elementor"),
         ctaUrl: upgradeUrl,
         anchorRef,
         placement: anchorRef ? "right-start" : void 0,
@@ -1263,7 +1361,7 @@ function PromotionSelect({
           promotionRef.current?.toggle();
         }
       },
-      promotionLabel ?? (0, import_i18n8.__)("PRO features", "elementor"),
+      promotionLabel ?? (0, import_i18n9.__)("PRO features", "elementor"),
       /* @__PURE__ */ React14.createElement(
         InteractionsPromotionChip,
         {
@@ -1280,13 +1378,13 @@ function PromotionSelect({
 
 // src/components/controls/easing.tsx
 var EASING_OPTIONS = {
-  easeIn: (0, import_i18n9.__)("Ease In", "elementor"),
-  easeInOut: (0, import_i18n9.__)("Ease In Out", "elementor"),
-  easeOut: (0, import_i18n9.__)("Ease Out", "elementor"),
-  backIn: (0, import_i18n9.__)("Back In", "elementor"),
-  backInOut: (0, import_i18n9.__)("Back In Out", "elementor"),
-  backOut: (0, import_i18n9.__)("Back Out", "elementor"),
-  linear: (0, import_i18n9.__)("Linear", "elementor")
+  easeIn: (0, import_i18n10.__)("Ease In", "elementor"),
+  easeInOut: (0, import_i18n10.__)("Ease In Out", "elementor"),
+  easeOut: (0, import_i18n10.__)("Ease Out", "elementor"),
+  backIn: (0, import_i18n10.__)("Back In", "elementor"),
+  backInOut: (0, import_i18n10.__)("Back In Out", "elementor"),
+  backOut: (0, import_i18n10.__)("Back Out", "elementor"),
+  linear: (0, import_i18n10.__)("Linear", "elementor")
 };
 var BASE_EASINGS = ["easeIn"];
 function Easing({}) {
@@ -1302,7 +1400,7 @@ function Easing({}) {
       value: DEFAULT_VALUES.easing,
       baseOptions,
       disabledOptions,
-      promotionContent: (0, import_i18n9.__)("Upgrade to control the smoothness of the interaction.", "elementor"),
+      promotionContent: (0, import_i18n10.__)("Upgrade to control the smoothness of the interaction.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-easing-modal/"
     }
   );
@@ -1310,12 +1408,12 @@ function Easing({}) {
 
 // src/components/controls/effect.tsx
 var React16 = __toESM(require("react"));
-var import_i18n10 = require("@wordpress/i18n");
+var import_i18n11 = require("@wordpress/i18n");
 var EFFECT_OPTIONS = {
-  fade: (0, import_i18n10.__)("Fade", "elementor"),
-  slide: (0, import_i18n10.__)("Slide", "elementor"),
-  scale: (0, import_i18n10.__)("Scale", "elementor"),
-  custom: (0, import_i18n10.__)("Custom", "elementor")
+  fade: (0, import_i18n11.__)("Fade", "elementor"),
+  slide: (0, import_i18n11.__)("Slide", "elementor"),
+  scale: (0, import_i18n11.__)("Scale", "elementor"),
+  custom: (0, import_i18n11.__)("Custom", "elementor")
 };
 var BASE_EFFECTS = ["fade", "slide", "scale"];
 function Effect({ value, onChange }) {
@@ -1332,8 +1430,8 @@ function Effect({ value, onChange }) {
       onChange,
       baseOptions,
       disabledOptions,
-      promotionLabel: (0, import_i18n10.__)("PRO effects", "elementor"),
-      promotionContent: (0, import_i18n10.__)(
+      promotionLabel: (0, import_i18n11.__)("PRO effects", "elementor"),
+      promotionContent: (0, import_i18n11.__)(
         "Upgrade to further customize your animation with opacity, scale, move, rotate and more.",
         "elementor"
       ),
@@ -1345,19 +1443,19 @@ function Effect({ value, onChange }) {
 // src/components/controls/effect-type.tsx
 var React17 = __toESM(require("react"));
 var import_editor_controls7 = require("@elementor/editor-controls");
-var import_i18n11 = require("@wordpress/i18n");
+var import_i18n12 = require("@wordpress/i18n");
 function EffectType({ value, onChange }) {
   const options = [
     {
       value: "in",
-      label: (0, import_i18n11.__)("In", "elementor"),
-      renderContent: () => (0, import_i18n11.__)("In", "elementor"),
+      label: (0, import_i18n12.__)("In", "elementor"),
+      renderContent: () => (0, import_i18n12.__)("In", "elementor"),
       showTooltip: true
     },
     {
       value: "out",
-      label: (0, import_i18n11.__)("Out", "elementor"),
-      renderContent: () => (0, import_i18n11.__)("Out", "elementor"),
+      label: (0, import_i18n12.__)("Out", "elementor"),
+      renderContent: () => (0, import_i18n12.__)("Out", "elementor"),
       showTooltip: true
     }
   ];
@@ -1369,10 +1467,10 @@ var React18 = __toESM(require("react"));
 var import_editor_controls8 = require("@elementor/editor-controls");
 var import_icons4 = require("@elementor/icons");
 var import_ui10 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 var REPLAY_OPTIONS = {
-  no: (0, import_i18n12.__)("No", "elementor"),
-  yes: (0, import_i18n12.__)("Yes", "elementor")
+  no: (0, import_i18n13.__)("No", "elementor"),
+  yes: (0, import_i18n13.__)("Yes", "elementor")
 };
 var BASE_REPLAY = ["no"];
 var OVERLAY_GRID = "1 / 1";
@@ -1397,7 +1495,7 @@ function Replay({ onChange, anchorRef }) {
   return /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(import_editor_controls8.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
     InteractionsPromotionChip,
     {
-      content: (0, import_i18n12.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"),
+      content: (0, import_i18n13.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
       anchorRef
     }
@@ -1406,13 +1504,13 @@ function Replay({ onChange, anchorRef }) {
 
 // src/components/controls/trigger.tsx
 var React19 = __toESM(require("react"));
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 var TRIGGER_OPTIONS = {
-  load: (0, import_i18n13.__)("Page load", "elementor"),
-  scrollIn: (0, import_i18n13.__)("Scroll into view", "elementor"),
-  scrollOn: (0, import_i18n13.__)("While scrolling", "elementor"),
-  hover: (0, import_i18n13.__)("On hover", "elementor"),
-  click: (0, import_i18n13.__)("On click", "elementor")
+  load: (0, import_i18n14.__)("Page load", "elementor"),
+  scrollIn: (0, import_i18n14.__)("Scroll into view", "elementor"),
+  scrollOn: (0, import_i18n14.__)("While scrolling", "elementor"),
+  hover: (0, import_i18n14.__)("On hover", "elementor"),
+  click: (0, import_i18n14.__)("On click", "elementor")
 };
 var BASE_TRIGGERS = ["load", "scrollIn"];
 function Trigger({ value, onChange }) {
@@ -1429,18 +1527,18 @@ function Trigger({ value, onChange }) {
       onChange,
       baseOptions,
       disabledOptions,
-      promotionLabel: (0, import_i18n13.__)("PRO triggers", "elementor"),
-      promotionContent: (0, import_i18n13.__)("Upgrade to unlock more interactions triggers.", "elementor"),
+      promotionLabel: (0, import_i18n14.__)("PRO triggers", "elementor"),
+      promotionContent: (0, import_i18n14.__)("Upgrade to unlock more interactions triggers.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/"
     }
   );
 }
 
 // src/hooks/on-duplicate.ts
-var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 function initCleanInteractionIdsOnDuplicate() {
-  (0, import_editor_v1_adapters3.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
+  (0, import_editor_v1_adapters4.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
     const containers = Array.isArray(result) ? result : [result];
     containers.forEach((container) => {
       cleanInteractionIdsRecursive(container.id);
@@ -1448,16 +1546,16 @@ function initCleanInteractionIdsOnDuplicate() {
   });
 }
 function cleanInteractionIdsRecursive(elementId) {
-  const container = (0, import_editor_elements4.getContainer)(elementId);
+  const container = (0, import_editor_elements5.getContainer)(elementId);
   if (!container) {
     return;
   }
-  (0, import_editor_elements4.getAllDescendants)(container).forEach((element) => {
+  (0, import_editor_elements5.getAllDescendants)(container).forEach((element) => {
     cleanInteractionIds(element.id);
   });
 }
 function cleanInteractionIds(elementId) {
-  const container = (0, import_editor_elements4.getContainer)(elementId);
+  const container = (0, import_editor_elements5.getContainer)(elementId);
   if (!container) {
     return;
   }
@@ -1556,7 +1654,7 @@ var initInteractionsSchemaResource = (reg) => {
 };
 
 // src/mcp/tools/manage-element-interaction-tool.ts
-var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_elements6 = require("@elementor/editor-elements");
 var import_schema3 = require("@elementor/schema");
 var import_utils2 = require("@elementor/utils");
 var EMPTY_INTERACTIONS = {
@@ -1687,7 +1785,7 @@ var initManageElementInteractionTool = (reg) => {
         items: updatedItems
       };
       try {
-        (0, import_editor_elements5.updateElementInteractions)({ elementId, interactions: updatedInteractions });
+        (0, import_editor_elements6.updateElementInteractions)({ elementId, interactions: updatedInteractions });
       } catch (error) {
         throw new Error(
           `Failed to update interactions for element "${elementId}": ${error instanceof Error ? error.message : "Unknown error"}`
@@ -1778,6 +1876,7 @@ function init() {
   try {
     interactionsRepository.register(documentElementsInteractionsProvider);
     initCleanInteractionIdsOnDuplicate();
+    initPasteInteractionsCommand();
     registerInteractionsControl({
       type: "trigger",
       component: Trigger,