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

package/dist/index.mjs

@@ -1058,37 +1058,145 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   }
 });
 
+// src/commands/paste-interactions.ts
+import {
+  getContainer,
+  getElementInteractions as getElementInteractions3,
+  getElementLabel,
+  getWidgetsCache,
+  updateElementInteractions as updateElementInteractions2
+} from "@elementor/editor-elements";
+import {
+  __privateListenTo as listenTo2,
+  commandStartEvent,
+  undoable
+} from "@elementor/editor-v1-adapters";
+import { __ as __6 } from "@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 = getWidgetsCache();
+  const elementConfig = widgetsCache?.[type];
+  return Boolean(elementConfig?.atomic_props_schema);
+}
+function getTitleForContainers(containers) {
+  return containers.length > 1 ? __6("Elements", "elementor") : 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 = undoable(
+    {
+      do: ({ containers, newInteractions }) => {
+        const pasted = regenerateInteractionIds(newInteractions);
+        return containers.map((container) => {
+          const elementId = container.id;
+          const previous = getElementInteractions3(elementId);
+          updateElementInteractions2({
+            elementId,
+            interactions: pasted
+          });
+          return { elementId, previous: previous ?? { version: 1, items: [] } };
+        });
+      },
+      undo: (_, revertData) => {
+        revertData.forEach(({ elementId, previous }) => {
+          updateElementInteractions2({
+            elementId,
+            interactions: previous.items?.length ? previous : void 0
+          });
+        });
+      }
+    },
+    {
+      title: ({ containers }) => getTitleForContainers(containers),
+      subtitle: __6("Interactions Pasted", "elementor")
+    }
+  );
+  listenTo2(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) => getContainer(c.id));
+    const validContainers = existingContainers.filter(isAtomicContainer);
+    if (!validContainers.length) {
+      return;
+    }
+    undoablePasteInteractions({ containers: validContainers, newInteractions });
+  });
+}
+
 // src/components/controls/direction.tsx
 import * as React12 from "react";
 import { useMemo as useMemo4 } from "react";
 import { ToggleButtonGroupUi } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 function Direction({ value, onChange, interactionType }) {
   const options = useMemo4(() => {
     const isIn = interactionType === "in";
     return [
       {
         value: "top",
-        label: isIn ? __6("From top", "elementor") : __6("To top", "elementor"),
+        label: isIn ? __7("From top", "elementor") : __7("To top", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(ArrowDownSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(ArrowUpSmallIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "bottom",
-        label: interactionType === "in" ? __6("From bottom", "elementor") : __6("To bottom", "elementor"),
+        label: interactionType === "in" ? __7("From bottom", "elementor") : __7("To bottom", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(ArrowUpSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(ArrowDownSmallIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "left",
-        label: interactionType === "in" ? __6("From left", "elementor") : __6("To left", "elementor"),
+        label: interactionType === "in" ? __7("From left", "elementor") : __7("To left", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(ArrowRightIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(ArrowLeftIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "right",
-        label: interactionType === "in" ? __6("From right", "elementor") : __6("To right", "elementor"),
+        label: interactionType === "in" ? __7("From right", "elementor") : __7("To right", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(ArrowLeftIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(ArrowRightIcon, { fontSize: size }),
         showTooltip: true
       }
@@ -1099,21 +1207,21 @@ function Direction({ value, onChange, interactionType }) {
 
 // src/components/controls/easing.tsx
 import * as React15 from "react";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/ui/promotion-select.tsx
 import * as React14 from "react";
 import { useRef as useRef4 } from "react";
 import { MenuListItem } from "@elementor/editor-ui";
 import { MenuSubheader, Select } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/ui/interactions-promotion-chip.tsx
 import * as React13 from "react";
 import { forwardRef, useImperativeHandle, useState as useState5 } from "react";
 import { PromotionChip, PromotionPopover, useCanvasClickHandler } from "@elementor/editor-ui";
 import { Box as Box3 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 var InteractionsPromotionChip = forwardRef(
   ({ content, upgradeUrl, anchorRef }, ref) => {
     const [isOpen, setIsOpen] = useState5(false);
@@ -1128,9 +1236,9 @@ var InteractionsPromotionChip = forwardRef(
       PromotionPopover,
       {
         open: isOpen,
-        title: __7("Interactions", "elementor"),
+        title: __8("Interactions", "elementor"),
         content,
-        ctaText: __7("Upgrade now", "elementor"),
+        ctaText: __8("Upgrade now", "elementor"),
         ctaUrl: upgradeUrl,
         anchorRef,
         placement: anchorRef ? "right-start" : void 0,
@@ -1192,7 +1300,7 @@ function PromotionSelect({
           promotionRef.current?.toggle();
         }
       },
-      promotionLabel ?? __8("PRO features", "elementor"),
+      promotionLabel ?? __9("PRO features", "elementor"),
       /* @__PURE__ */ React14.createElement(
         InteractionsPromotionChip,
         {
@@ -1209,13 +1317,13 @@ function PromotionSelect({
 
 // src/components/controls/easing.tsx
 var EASING_OPTIONS = {
-  easeIn: __9("Ease In", "elementor"),
-  easeInOut: __9("Ease In Out", "elementor"),
-  easeOut: __9("Ease Out", "elementor"),
-  backIn: __9("Back In", "elementor"),
-  backInOut: __9("Back In Out", "elementor"),
-  backOut: __9("Back Out", "elementor"),
-  linear: __9("Linear", "elementor")
+  easeIn: __10("Ease In", "elementor"),
+  easeInOut: __10("Ease In Out", "elementor"),
+  easeOut: __10("Ease Out", "elementor"),
+  backIn: __10("Back In", "elementor"),
+  backInOut: __10("Back In Out", "elementor"),
+  backOut: __10("Back Out", "elementor"),
+  linear: __10("Linear", "elementor")
 };
 var BASE_EASINGS = ["easeIn"];
 function Easing({}) {
@@ -1231,7 +1339,7 @@ function Easing({}) {
       value: DEFAULT_VALUES.easing,
       baseOptions,
       disabledOptions,
-      promotionContent: __9("Upgrade to control the smoothness of the interaction.", "elementor"),
+      promotionContent: __10("Upgrade to control the smoothness of the interaction.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-easing-modal/"
     }
   );
@@ -1239,12 +1347,12 @@ function Easing({}) {
 
 // src/components/controls/effect.tsx
 import * as React16 from "react";
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 var EFFECT_OPTIONS = {
-  fade: __10("Fade", "elementor"),
-  slide: __10("Slide", "elementor"),
-  scale: __10("Scale", "elementor"),
-  custom: __10("Custom", "elementor")
+  fade: __11("Fade", "elementor"),
+  slide: __11("Slide", "elementor"),
+  scale: __11("Scale", "elementor"),
+  custom: __11("Custom", "elementor")
 };
 var BASE_EFFECTS = ["fade", "slide", "scale"];
 function Effect({ value, onChange }) {
@@ -1261,8 +1369,8 @@ function Effect({ value, onChange }) {
       onChange,
       baseOptions,
       disabledOptions,
-      promotionLabel: __10("PRO effects", "elementor"),
-      promotionContent: __10(
+      promotionLabel: __11("PRO effects", "elementor"),
+      promotionContent: __11(
         "Upgrade to further customize your animation with opacity, scale, move, rotate and more.",
         "elementor"
       ),
@@ -1274,19 +1382,19 @@ function Effect({ value, onChange }) {
 // src/components/controls/effect-type.tsx
 import * as React17 from "react";
 import { ToggleButtonGroupUi as ToggleButtonGroupUi2 } from "@elementor/editor-controls";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 function EffectType({ value, onChange }) {
   const options = [
     {
       value: "in",
-      label: __11("In", "elementor"),
-      renderContent: () => __11("In", "elementor"),
+      label: __12("In", "elementor"),
+      renderContent: () => __12("In", "elementor"),
       showTooltip: true
     },
     {
       value: "out",
-      label: __11("Out", "elementor"),
-      renderContent: () => __11("Out", "elementor"),
+      label: __12("Out", "elementor"),
+      renderContent: () => __12("Out", "elementor"),
       showTooltip: true
     }
   ];
@@ -1298,10 +1406,10 @@ import * as React18 from "react";
 import { ToggleButtonGroupUi as ToggleButtonGroupUi3 } from "@elementor/editor-controls";
 import { CheckIcon, MinusIcon } from "@elementor/icons";
 import { Box as Box4 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __13 } from "@wordpress/i18n";
 var REPLAY_OPTIONS = {
-  no: __12("No", "elementor"),
-  yes: __12("Yes", "elementor")
+  no: __13("No", "elementor"),
+  yes: __13("Yes", "elementor")
 };
 var BASE_REPLAY = ["no"];
 var OVERLAY_GRID = "1 / 1";
@@ -1326,7 +1434,7 @@ function Replay({ onChange, anchorRef }) {
   return /* @__PURE__ */ React18.createElement(Box4, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(Box4, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(ToggleButtonGroupUi3, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(Box4, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
     InteractionsPromotionChip,
     {
-      content: __12("Upgrade to run the animation every time its trigger occurs.", "elementor"),
+      content: __13("Upgrade to run the animation every time its trigger occurs.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
       anchorRef
     }
@@ -1335,13 +1443,13 @@ function Replay({ onChange, anchorRef }) {
 
 // src/components/controls/trigger.tsx
 import * as React19 from "react";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 var TRIGGER_OPTIONS = {
-  load: __13("Page load", "elementor"),
-  scrollIn: __13("Scroll into view", "elementor"),
-  scrollOn: __13("While scrolling", "elementor"),
-  hover: __13("On hover", "elementor"),
-  click: __13("On click", "elementor")
+  load: __14("Page load", "elementor"),
+  scrollIn: __14("Scroll into view", "elementor"),
+  scrollOn: __14("While scrolling", "elementor"),
+  hover: __14("On hover", "elementor"),
+  click: __14("On click", "elementor")
 };
 var BASE_TRIGGERS = ["load", "scrollIn"];
 function Trigger({ value, onChange }) {
@@ -1358,15 +1466,15 @@ function Trigger({ value, onChange }) {
       onChange,
       baseOptions,
       disabledOptions,
-      promotionLabel: __13("PRO triggers", "elementor"),
-      promotionContent: __13("Upgrade to unlock more interactions triggers.", "elementor"),
+      promotionLabel: __14("PRO triggers", "elementor"),
+      promotionContent: __14("Upgrade to unlock more interactions triggers.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/"
     }
   );
 }
 
 // src/hooks/on-duplicate.ts
-import { getAllDescendants, getContainer } from "@elementor/editor-elements";
+import { getAllDescendants, getContainer as getContainer2 } from "@elementor/editor-elements";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 function initCleanInteractionIdsOnDuplicate() {
   registerDataHook("after", "document/elements/duplicate", (_args, result) => {
@@ -1377,7 +1485,7 @@ function initCleanInteractionIdsOnDuplicate() {
   });
 }
 function cleanInteractionIdsRecursive(elementId) {
-  const container = getContainer(elementId);
+  const container = getContainer2(elementId);
   if (!container) {
     return;
   }
@@ -1386,7 +1494,7 @@ function cleanInteractionIdsRecursive(elementId) {
   });
 }
 function cleanInteractionIds(elementId) {
-  const container = getContainer(elementId);
+  const container = getContainer2(elementId);
   if (!container) {
     return;
   }
@@ -1485,7 +1593,7 @@ var initInteractionsSchemaResource = (reg) => {
 };
 
 // src/mcp/tools/manage-element-interaction-tool.ts
-import { updateElementInteractions as updateElementInteractions2 } from "@elementor/editor-elements";
+import { updateElementInteractions as updateElementInteractions3 } from "@elementor/editor-elements";
 import { z as z2 } from "@elementor/schema";
 import { isProActive as isProActive2 } from "@elementor/utils";
 var EMPTY_INTERACTIONS = {
@@ -1616,7 +1724,7 @@ var initManageElementInteractionTool = (reg) => {
         items: updatedItems
       };
       try {
-        updateElementInteractions2({ elementId, interactions: updatedInteractions });
+        updateElementInteractions3({ elementId, interactions: updatedInteractions });
       } catch (error) {
         throw new Error(
           `Failed to update interactions for element "${elementId}": ${error instanceof Error ? error.message : "Unknown error"}`
@@ -1707,6 +1815,7 @@ function init() {
   try {
     interactionsRepository.register(documentElementsInteractionsProvider);
     initCleanInteractionIdsOnDuplicate();
+    initPasteInteractionsCommand();
     registerInteractionsControl({
       type: "trigger",
       component: Trigger,