@elementor/editor-canvas 3.33.0-234 → 3.33.0-236

package/dist/index.d.mts

@@ -179,4 +179,6 @@ type ElementLegacyType = {
 };
 declare function registerElementType(type: string, elementTypeGenerator: ElementLegacyType[keyof ElementLegacyType]): void;
 
-export { type AnyTransformer, type BackboneModel, type CreateTemplatedElementTypeOptions, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };
+declare function getCanvasIframeDocument(): Document | null | undefined;
+
+export { type AnyTransformer, type BackboneModel, type CreateTemplatedElementTypeOptions, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.d.ts

@@ -179,4 +179,6 @@ type ElementLegacyType = {
 };
 declare function registerElementType(type: string, elementTypeGenerator: ElementLegacyType[keyof ElementLegacyType]): void;
 
-export { type AnyTransformer, type BackboneModel, type CreateTemplatedElementTypeOptions, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };
+declare function getCanvasIframeDocument(): Document | null | undefined;
+
+export { type AnyTransformer, type BackboneModel, type CreateTemplatedElementTypeOptions, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.js

@@ -35,6 +35,7 @@ __export(index_exports, {
   createTransformer: () => createTransformer,
   createTransformersRegistry: () => createTransformersRegistry,
   endDragElementFromPanel: () => endDragElementFromPanel,
+  getCanvasIframeDocument: () => getCanvasIframeDocument,
   init: () => init,
   registerElementType: () => registerElementType,
   settingsTransformersRegistry: () => settingsTransformersRegistry,
@@ -45,6 +46,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/init.tsx
 var import_editor = require("@elementor/editor");
+var import_editor_interactions2 = require("@elementor/editor-interactions");
 
 // src/components/classes-rename.tsx
 var import_react = require("react");
@@ -239,27 +241,143 @@ function useElementsDom() {
   );
 }
 
-// src/components/style-renderer.tsx
+// src/components/interactions-renderer.tsx
 var React3 = __toESM(require("react"));
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_ui2 = require("@elementor/ui");
 
-// src/hooks/use-documents-css-links.ts
+// src/hooks/use-interactions-items.ts
+var import_react7 = require("react");
+var import_editor_interactions = require("@elementor/editor-interactions");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
+// src/hooks/use-on-mount.ts
+var import_react6 = require("react");
+function useOnMount(cb) {
+  const mounted = (0, import_react6.useRef)(false);
+  (0, import_react6.useEffect)(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      cb();
+    }
+  }, []);
+}
+
+// src/hooks/use-interactions-items.ts
+function useInteractionsItems() {
+  const [interactionItems, setInteractionItems] = (0, import_react7.useState)({});
+  const providerAndSubscribers = (0, import_react7.useMemo)(() => {
+    try {
+      const providers = import_editor_interactions.interactionsRepository.getProviders();
+      const mapped = providers.map((provider) => {
+        return {
+          provider,
+          subscriber: createProviderSubscriber({
+            provider,
+            setInteractionItems
+          })
+        };
+      });
+      return mapped;
+    } catch {
+      return [];
+    }
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    if (providerAndSubscribers.length === 0) {
+      return;
+    }
+    const unsubscribes = providerAndSubscribers.map(({ provider, subscriber }) => {
+      const safeSubscriber = () => {
+        try {
+          subscriber();
+        } catch {
+        }
+      };
+      const unsubscribe = provider.subscribe(safeSubscriber);
+      return unsubscribe;
+    });
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [providerAndSubscribers]);
+  useOnMount(() => {
+    if (providerAndSubscribers.length === 0) {
+      return;
+    }
+    (0, import_editor_v1_adapters2.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+      providerAndSubscribers.forEach(({ subscriber }) => {
+        try {
+          subscriber();
+        } catch {
+        }
+      });
+    });
+  });
+  return (0, import_react7.useMemo)(
+    () => Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items),
+    [interactionItems]
+  );
+}
+function sortByProviderPriority({ provider: providerA }, { provider: providerB }) {
+  return providerA.priority - providerB.priority;
+}
+function createProviderSubscriber({ provider, setInteractionItems }) {
+  return () => {
+    try {
+      const items = provider.actions.all();
+      const providerKey = provider.getKey();
+      setInteractionItems((prev) => ({
+        ...prev,
+        [providerKey]: { provider, items }
+      }));
+    } catch {
+    }
+  };
+}
+
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
   const extendedWindow = window;
   return extendedWindow.elementor?.$preview?.[0]?.contentDocument;
 }
 
+// src/components/interactions-renderer.tsx
+function InteractionsRenderer() {
+  const container = usePortalContainer();
+  const interactionItems = useInteractionsItems();
+  if (!container) {
+    return null;
+  }
+  const interactionsData = JSON.stringify(interactionItems);
+  return /* @__PURE__ */ React3.createElement(import_ui2.Portal, { container }, /* @__PURE__ */ React3.createElement(
+    "script",
+    {
+      type: "application/json",
+      "data-e-interactions": "true",
+      dangerouslySetInnerHTML: {
+        __html: interactionsData
+      }
+    }
+  ));
+}
+function usePortalContainer() {
+  return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+}
+
+// src/components/style-renderer.tsx
+var React4 = __toESM(require("react"));
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_ui3 = require("@elementor/ui");
+
 // src/hooks/use-documents-css-links.ts
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var REMOVED_ATTR = "data-e-removed";
 var DOCUMENT_WRAPPER_ATTR = "data-elementor-id";
 var CSS_LINK_ID_PREFIX = "elementor-post-";
 var CSS_LINK_ID_SUFFIX = "-css";
 function useDocumentsCssLinks() {
-  return (0, import_editor_v1_adapters2.__privateUseListenTo)((0, import_editor_v1_adapters2.commandEndEvent)("editor/documents/attach-preview"), () => {
+  return (0, import_editor_v1_adapters4.__privateUseListenTo)((0, import_editor_v1_adapters4.commandEndEvent)("editor/documents/attach-preview"), () => {
     const iframeDocument = getCanvasIframeDocument();
     if (!iframeDocument) {
       return [];
@@ -300,11 +418,11 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_editor_styles3 = require("@elementor/editor-styles");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 
 // src/utils/abort-previous-runs.ts
 function abortPreviousRuns(cb) {
@@ -337,20 +455,8 @@ function signalizedProcess(signal, steps = []) {
   };
 }
 
-// src/hooks/use-on-mount.ts
-var import_react6 = require("react");
-function useOnMount(cb) {
-  const mounted = (0, import_react6.useRef)(false);
-  (0, import_react6.useEffect)(() => {
-    if (!mounted.current) {
-      mounted.current = true;
-      cb();
-    }
-  }, []);
-}
-
 // src/hooks/use-style-prop-resolver.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_editor_styles = require("@elementor/editor-styles");
 
 // src/renderers/create-props-resolver.ts
@@ -472,7 +578,7 @@ var enqueueFont = (fontFamily, context = "preview") => {
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return (0, import_react7.useMemo)(() => {
+  return (0, import_react8.useMemo)(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: (0, import_editor_styles.getStylesSchema)(),
@@ -487,7 +593,7 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 
 // src/renderers/create-styles-renderer.ts
@@ -588,7 +694,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = (0, import_editor_responsive.useBreakpointsMap)();
-  return (0, import_react8.useMemo)(() => {
+  return (0, import_react9.useMemo)(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -601,12 +707,12 @@ function useStyleRenderer(resolve) {
 function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
-  const [styleItems, setStyleItems] = (0, import_react9.useState)({});
-  const providerAndSubscribers = (0, import_react9.useMemo)(() => {
+  const [styleItems, setStyleItems] = (0, import_react10.useState)({});
+  const providerAndSubscribers = (0, import_react10.useMemo)(() => {
     return import_editor_styles_repository2.stylesRepository.getProviders().map((provider) => {
       return {
         provider,
-        subscriber: createProviderSubscriber({
+        subscriber: createProviderSubscriber2({
           provider,
           renderStyles,
           setStyleItems
@@ -614,7 +720,7 @@ function useStyleItems() {
       };
     });
   }, [renderStyles]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -623,20 +729,20 @@ function useStyleItems() {
     };
   }, [providerAndSubscribers]);
   useOnMount(() => {
-    (0, import_editor_v1_adapters3.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+    (0, import_editor_v1_adapters5.registerDataHook)("after", "editor/documents/attach-preview", async () => {
       const promises = providerAndSubscribers.map(async ({ subscriber }) => subscriber());
       await Promise.all(promises);
     });
   });
   const breakpointsOrder = (0, import_editor_responsive2.getBreakpoints)().map((breakpoint) => breakpoint.id);
-  return (0, import_react9.useMemo)(
-    () => Object.values(styleItems).sort(sortByProviderPriority).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
+  return (0, import_react10.useMemo)(
+    () => Object.values(styleItems).sort(sortByProviderPriority2).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
     // eslint-disable-next-line
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [styleItems, breakpointsOrder.join("-")]
   );
 }
-function sortByProviderPriority({ provider: providerA }, { provider: providerB }) {
+function sortByProviderPriority2({ provider: providerA }, { provider: providerB }) {
   return providerA.priority - providerB.priority;
 }
 function sortByBreakpoint(breakpointsOrder) {
@@ -651,7 +757,7 @@ function sortByStateType({ state: stateA }, { state: stateB }) {
   }
   return 0;
 }
-function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
+function createProviderSubscriber2({ provider, renderStyles, setStyleItems }) {
   return abortPreviousRuns(
     (abortController) => signalizedProcess(abortController.signal).then((_, signal) => {
       const styles = provider.actions.all().map((__5, index, items) => {
@@ -697,16 +803,16 @@ function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
 
 // src/components/style-renderer.tsx
 function StyleRenderer() {
-  const container = usePortalContainer();
+  const container = usePortalContainer2();
   const styleItems = useStyleItems();
   const linksAttrs = useDocumentsCssLinks();
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement(import_ui2.Portal, { container }, styleItems.map((item, i) => /* @__PURE__ */ React3.createElement("style", { key: `${item.id}-${i}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React3.createElement("link", { ...attrs, key: attrs.id })));
+  return /* @__PURE__ */ React4.createElement(import_ui3.Portal, { container }, styleItems.map((item, i) => /* @__PURE__ */ React4.createElement("style", { key: `${item.id}-${i}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React4.createElement("link", { ...attrs, key: attrs.id })));
 }
-function usePortalContainer() {
-  return (0, import_editor_v1_adapters4.__privateUseListenTo)((0, import_editor_v1_adapters4.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+function usePortalContainer2() {
+  return (0, import_editor_v1_adapters6.__privateUseListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 
 // src/settings-transformers-registry.ts
@@ -1127,7 +1233,7 @@ function initStyleTransformers() {
 
 // src/legacy/init-legacy-views.ts
 var import_editor_elements2 = require("@elementor/editor-elements");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-dom-renderer.ts
 var import_twing = require("@elementor/twing");
@@ -1354,7 +1460,7 @@ function registerElementType(type, elementTypeGenerator) {
   elementsLegacyTypes[type] = elementTypeGenerator;
 }
 function initLegacyViews() {
-  (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.v1ReadyEvent)(), () => {
+  (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.v1ReadyEvent)(), () => {
     const config = (0, import_editor_elements2.getWidgetsCache)() ?? {};
     const legacyWindow = window;
     const renderer = createDomRenderer();
@@ -1378,14 +1484,14 @@ function initLegacyViews() {
 // src/prevent-link-in-link-commands.ts
 var import_editor_elements3 = require("@elementor/editor-elements");
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 var import_i18n = require("@wordpress/i18n");
 function initLinkInLinkPrevention() {
-  (0, import_editor_v1_adapters6.blockCommand)({
+  (0, import_editor_v1_adapters8.blockCommand)({
     command: "document/elements/paste",
     condition: blockLinkInLinkPaste
   });
-  (0, import_editor_v1_adapters6.blockCommand)({
+  (0, import_editor_v1_adapters8.blockCommand)({
     command: "document/elements/move",
     condition: blockLinkInLinkMove
   });
@@ -1459,12 +1565,12 @@ function shouldBlock(sourceElements, targetElements) {
 }
 
 // src/style-commands/paste-style.ts
-var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/paste-element-style.ts
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
 // src/style-commands/utils.ts
@@ -1510,7 +1616,7 @@ function getTitleForContainers(containers) {
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var undoablePasteElementStyle = () => (0, import_editor_v1_adapters7.undoable)(
+var undoablePasteElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
   {
     do: ({ containers, newStyle }) => {
       return containers.map((container) => {
@@ -1586,12 +1692,12 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters7.undoable)(
 // src/style-commands/paste-style.ts
 function initPasteStyleCommand() {
   const pasteElementStyleCommand = undoablePasteElementStyle();
-  (0, import_editor_v1_adapters8.blockCommand)({
+  (0, import_editor_v1_adapters10.blockCommand)({
     command: "document/elements/paste-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters8.__privateListenTo)(
-    (0, import_editor_v1_adapters8.commandStartEvent)("document/elements/paste-style"),
+  (0, import_editor_v1_adapters10.__privateListenTo)(
+    (0, import_editor_v1_adapters10.commandStartEvent)("document/elements/paste-style"),
     (e) => pasteStyles(e.args, pasteElementStyleCommand)
   );
 }
@@ -1615,14 +1721,14 @@ function pasteStyles(args, pasteCallback) {
 }
 
 // src/style-commands/reset-style.ts
-var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
 var import_editor_elements6 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
-var undoableResetElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
+var undoableResetElementStyle = () => (0, import_editor_v1_adapters11.undoable)(
   {
     do: ({ containers }) => {
       return containers.map((container) => {
@@ -1666,12 +1772,12 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
 // src/style-commands/reset-style.ts
 function initResetStyleCommand() {
   const resetElementStyles = undoableResetElementStyle();
-  (0, import_editor_v1_adapters10.blockCommand)({
+  (0, import_editor_v1_adapters12.blockCommand)({
     command: "document/elements/reset-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters10.__privateListenTo)(
-    (0, import_editor_v1_adapters10.commandStartEvent)("document/elements/reset-style"),
+  (0, import_editor_v1_adapters12.__privateListenTo)(
+    (0, import_editor_v1_adapters12.commandStartEvent)("document/elements/reset-style"),
     (e) => resetStyles(e.args, resetElementStyles)
   );
 }
@@ -1697,6 +1803,7 @@ function init() {
   initLinkInLinkPrevention();
   initLegacyViews();
   initSettingsTransformers();
+  (0, import_editor_interactions2.init)();
   (0, import_editor.injectIntoTop)({
     id: "elements-overlays",
     component: ElementsOverlays
@@ -1705,6 +1812,10 @@ function init() {
     id: "canvas-style-render",
     component: StyleRenderer
   });
+  (0, import_editor.injectIntoTop)({
+    id: "canvas-interactions-render",
+    component: InteractionsRenderer
+  });
   (0, import_editor.injectIntoLogic)({
     id: "classes-rename",
     component: ClassesRename
@@ -1752,6 +1863,7 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
   createTransformer,
   createTransformersRegistry,
   endDragElementFromPanel,
+  getCanvasIframeDocument,
   init,
   registerElementType,
   settingsTransformersRegistry,

package/dist/index.mjs

@@ -1,5 +1,6 @@
 // src/init.tsx
 import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
+import { init as initInteractionsRepository } from "@elementor/editor-interactions";
 
 // src/components/classes-rename.tsx
 import { useEffect } from "react";
@@ -199,13 +200,100 @@ function useElementsDom() {
   );
 }
 
-// src/components/style-renderer.tsx
+// src/components/interactions-renderer.tsx
 import * as React3 from "react";
-import { __privateUseListenTo as useListenTo3, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
+import { __privateUseListenTo as useListenTo2, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
-// src/hooks/use-documents-css-links.ts
-import { __privateUseListenTo as useListenTo2, commandEndEvent } from "@elementor/editor-v1-adapters";
+// src/hooks/use-interactions-items.ts
+import { useEffect as useEffect5, useMemo, useState as useState2 } from "react";
+import { interactionsRepository } from "@elementor/editor-interactions";
+import { registerDataHook } from "@elementor/editor-v1-adapters";
+
+// src/hooks/use-on-mount.ts
+import { useEffect as useEffect4, useRef } from "react";
+function useOnMount(cb) {
+  const mounted = useRef(false);
+  useEffect4(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      cb();
+    }
+  }, []);
+}
+
+// src/hooks/use-interactions-items.ts
+function useInteractionsItems() {
+  const [interactionItems, setInteractionItems] = useState2({});
+  const providerAndSubscribers = useMemo(() => {
+    try {
+      const providers = interactionsRepository.getProviders();
+      const mapped = providers.map((provider) => {
+        return {
+          provider,
+          subscriber: createProviderSubscriber({
+            provider,
+            setInteractionItems
+          })
+        };
+      });
+      return mapped;
+    } catch {
+      return [];
+    }
+  }, []);
+  useEffect5(() => {
+    if (providerAndSubscribers.length === 0) {
+      return;
+    }
+    const unsubscribes = providerAndSubscribers.map(({ provider, subscriber }) => {
+      const safeSubscriber = () => {
+        try {
+          subscriber();
+        } catch {
+        }
+      };
+      const unsubscribe = provider.subscribe(safeSubscriber);
+      return unsubscribe;
+    });
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [providerAndSubscribers]);
+  useOnMount(() => {
+    if (providerAndSubscribers.length === 0) {
+      return;
+    }
+    registerDataHook("after", "editor/documents/attach-preview", async () => {
+      providerAndSubscribers.forEach(({ subscriber }) => {
+        try {
+          subscriber();
+        } catch {
+        }
+      });
+    });
+  });
+  return useMemo(
+    () => Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items),
+    [interactionItems]
+  );
+}
+function sortByProviderPriority({ provider: providerA }, { provider: providerB }) {
+  return providerA.priority - providerB.priority;
+}
+function createProviderSubscriber({ provider, setInteractionItems }) {
+  return () => {
+    try {
+      const items = provider.actions.all();
+      const providerKey = provider.getKey();
+      setInteractionItems((prev) => ({
+        ...prev,
+        [providerKey]: { provider, items }
+      }));
+    } catch {
+    }
+  };
+}
 
 // src/sync/get-canvas-iframe-document.ts
 function getCanvasIframeDocument() {
@@ -213,13 +301,42 @@ function getCanvasIframeDocument() {
   return extendedWindow.elementor?.$preview?.[0]?.contentDocument;
 }
 
+// src/components/interactions-renderer.tsx
+function InteractionsRenderer() {
+  const container = usePortalContainer();
+  const interactionItems = useInteractionsItems();
+  if (!container) {
+    return null;
+  }
+  const interactionsData = JSON.stringify(interactionItems);
+  return /* @__PURE__ */ React3.createElement(Portal, { container }, /* @__PURE__ */ React3.createElement(
+    "script",
+    {
+      type: "application/json",
+      "data-e-interactions": "true",
+      dangerouslySetInnerHTML: {
+        __html: interactionsData
+      }
+    }
+  ));
+}
+function usePortalContainer() {
+  return useListenTo2(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+}
+
+// src/components/style-renderer.tsx
+import * as React4 from "react";
+import { __privateUseListenTo as useListenTo4, commandEndEvent as commandEndEvent3 } from "@elementor/editor-v1-adapters";
+import { Portal as Portal2 } from "@elementor/ui";
+
 // src/hooks/use-documents-css-links.ts
+import { __privateUseListenTo as useListenTo3, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
 var REMOVED_ATTR = "data-e-removed";
 var DOCUMENT_WRAPPER_ATTR = "data-elementor-id";
 var CSS_LINK_ID_PREFIX = "elementor-post-";
 var CSS_LINK_ID_SUFFIX = "-css";
 function useDocumentsCssLinks() {
-  return useListenTo2(commandEndEvent("editor/documents/attach-preview"), () => {
+  return useListenTo3(commandEndEvent2("editor/documents/attach-preview"), () => {
     const iframeDocument = getCanvasIframeDocument();
     if (!iframeDocument) {
       return [];
@@ -260,11 +377,11 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-import { useEffect as useEffect5, useMemo as useMemo3, useState as useState2 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo4, useState as useState3 } from "react";
 import { getBreakpoints } from "@elementor/editor-responsive";
 import { isClassState as isClassState2 } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
-import { registerDataHook } from "@elementor/editor-v1-adapters";
+import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 
 // src/utils/abort-previous-runs.ts
 function abortPreviousRuns(cb) {
@@ -297,20 +414,8 @@ function signalizedProcess(signal, steps = []) {
   };
 }
 
-// src/hooks/use-on-mount.ts
-import { useEffect as useEffect4, useRef } from "react";
-function useOnMount(cb) {
-  const mounted = useRef(false);
-  useEffect4(() => {
-    if (!mounted.current) {
-      mounted.current = true;
-      cb();
-    }
-  }, []);
-}
-
 // src/hooks/use-style-prop-resolver.ts
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 import { getStylesSchema } from "@elementor/editor-styles";
 
 // src/renderers/create-props-resolver.ts
@@ -434,7 +539,7 @@ var enqueueFont = (fontFamily, context = "preview") => {
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return useMemo(() => {
+  return useMemo2(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: getStylesSchema(),
@@ -449,7 +554,7 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { useBreakpointsMap } from "@elementor/editor-responsive";
 
 // src/renderers/create-styles-renderer.ts
@@ -553,7 +658,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = useBreakpointsMap();
-  return useMemo2(() => {
+  return useMemo3(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -566,12 +671,12 @@ function useStyleRenderer(resolve) {
 function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
-  const [styleItems, setStyleItems] = useState2({});
-  const providerAndSubscribers = useMemo3(() => {
+  const [styleItems, setStyleItems] = useState3({});
+  const providerAndSubscribers = useMemo4(() => {
     return stylesRepository2.getProviders().map((provider) => {
       return {
         provider,
-        subscriber: createProviderSubscriber({
+        subscriber: createProviderSubscriber2({
           provider,
           renderStyles,
           setStyleItems
@@ -579,7 +684,7 @@ function useStyleItems() {
       };
     });
   }, [renderStyles]);
-  useEffect5(() => {
+  useEffect6(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -588,20 +693,20 @@ function useStyleItems() {
     };
   }, [providerAndSubscribers]);
   useOnMount(() => {
-    registerDataHook("after", "editor/documents/attach-preview", async () => {
+    registerDataHook2("after", "editor/documents/attach-preview", async () => {
       const promises = providerAndSubscribers.map(async ({ subscriber }) => subscriber());
       await Promise.all(promises);
     });
   });
   const breakpointsOrder = getBreakpoints().map((breakpoint) => breakpoint.id);
-  return useMemo3(
-    () => Object.values(styleItems).sort(sortByProviderPriority).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
+  return useMemo4(
+    () => Object.values(styleItems).sort(sortByProviderPriority2).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
     // eslint-disable-next-line
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [styleItems, breakpointsOrder.join("-")]
   );
 }
-function sortByProviderPriority({ provider: providerA }, { provider: providerB }) {
+function sortByProviderPriority2({ provider: providerA }, { provider: providerB }) {
   return providerA.priority - providerB.priority;
 }
 function sortByBreakpoint(breakpointsOrder) {
@@ -616,7 +721,7 @@ function sortByStateType({ state: stateA }, { state: stateB }) {
   }
   return 0;
 }
-function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
+function createProviderSubscriber2({ provider, renderStyles, setStyleItems }) {
   return abortPreviousRuns(
     (abortController) => signalizedProcess(abortController.signal).then((_, signal) => {
       const styles = provider.actions.all().map((__5, index, items) => {
@@ -662,16 +767,16 @@ function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
 
 // src/components/style-renderer.tsx
 function StyleRenderer() {
-  const container = usePortalContainer();
+  const container = usePortalContainer2();
   const styleItems = useStyleItems();
   const linksAttrs = useDocumentsCssLinks();
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement(Portal, { container }, styleItems.map((item, i) => /* @__PURE__ */ React3.createElement("style", { key: `${item.id}-${i}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React3.createElement("link", { ...attrs, key: attrs.id })));
+  return /* @__PURE__ */ React4.createElement(Portal2, { container }, styleItems.map((item, i) => /* @__PURE__ */ React4.createElement("style", { key: `${item.id}-${i}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React4.createElement("link", { ...attrs, key: attrs.id })));
 }
-function usePortalContainer() {
-  return useListenTo3(commandEndEvent2("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+function usePortalContainer2() {
+  return useListenTo4(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 
 // src/settings-transformers-registry.ts
@@ -1679,6 +1784,7 @@ function init() {
   initLinkInLinkPrevention();
   initLegacyViews();
   initSettingsTransformers();
+  initInteractionsRepository();
   injectIntoTop({
     id: "elements-overlays",
     component: ElementsOverlays
@@ -1687,6 +1793,10 @@ function init() {
     id: "canvas-style-render",
     component: StyleRenderer
   });
+  injectIntoTop({
+    id: "canvas-interactions-render",
+    component: InteractionsRenderer
+  });
   injectIntoLogic({
     id: "classes-rename",
     component: ClassesRename
@@ -1733,6 +1843,7 @@ export {
   createTransformer,
   createTransformersRegistry,
   endDragElementFromPanel,
+  getCanvasIframeDocument,
   init,
   registerElementType,
   settingsTransformersRegistry,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.33.0-234",
+  "version": "3.33.0-236",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,20 +37,21 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-234",
-    "@elementor/editor-controls": "3.33.0-234",
-    "@elementor/editor-documents": "3.33.0-234",
-    "@elementor/editor-elements": "3.33.0-234",
-    "@elementor/editor-notifications": "3.33.0-234",
-    "@elementor/editor-props": "3.33.0-234",
-    "@elementor/editor-responsive": "3.33.0-234",
-    "@elementor/editor-styles": "3.33.0-234",
-    "@elementor/editor-styles-repository": "3.33.0-234",
-    "@elementor/editor-v1-adapters": "3.33.0-234",
-    "@elementor/twing": "3.33.0-234",
+    "@elementor/editor": "3.33.0-236",
+    "@elementor/editor-controls": "3.33.0-236",
+    "@elementor/editor-documents": "3.33.0-236",
+    "@elementor/editor-elements": "3.33.0-236",
+    "@elementor/editor-interactions": "3.33.0-236",
+    "@elementor/editor-notifications": "3.33.0-236",
+    "@elementor/editor-props": "3.33.0-236",
+    "@elementor/editor-responsive": "3.33.0-236",
+    "@elementor/editor-styles": "3.33.0-236",
+    "@elementor/editor-styles-repository": "3.33.0-236",
+    "@elementor/editor-v1-adapters": "3.33.0-236",
+    "@elementor/twing": "3.33.0-236",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-234",
-    "@elementor/wp-media": "3.33.0-234",
+    "@elementor/utils": "3.33.0-236",
+    "@elementor/wp-media": "3.33.0-236",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/interactions-renderer.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+import { Portal } from '@elementor/ui';
+
+import { useInteractionsItems } from '../hooks/use-interactions-items';
+import { getCanvasIframeDocument } from '../sync/get-canvas-iframe-document';
+
+export function InteractionsRenderer() {
+	const container = usePortalContainer();
+	const interactionItems = useInteractionsItems();
+
+	if ( ! container ) {
+		return null;
+	}
+
+	const interactionsData = JSON.stringify( interactionItems );
+
+	return (
+		<Portal container={ container }>
+			<script
+				type="application/json"
+				data-e-interactions="true"
+				dangerouslySetInnerHTML={ {
+					__html: interactionsData,
+				} }
+			/>
+		</Portal>
+	);
+}
+
+function usePortalContainer() {
+	return useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => getCanvasIframeDocument()?.head );
+}

package/src/hooks/use-interactions-items.ts

@@ -0,0 +1,107 @@
+import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
+import { type InteractionItem, interactionsRepository } from '@elementor/editor-interactions';
+import { registerDataHook } from '@elementor/editor-v1-adapters';
+
+import { useOnMount } from './use-on-mount';
+
+type ProviderAndInteractionItems = {
+	provider: ReturnType< typeof interactionsRepository.getProviders >[ 0 ];
+	items: InteractionItem[];
+};
+
+type ProviderAndSubscriber = {
+	provider: ReturnType< typeof interactionsRepository.getProviders >[ 0 ];
+	subscriber: () => void;
+};
+
+type ProviderAndInteractionItemsMap = Record< string, ProviderAndInteractionItems >;
+
+export function useInteractionsItems() {
+	const [ interactionItems, setInteractionItems ] = useState< ProviderAndInteractionItemsMap >( {} );
+
+	const providerAndSubscribers = useMemo( () => {
+		try {
+			const providers = interactionsRepository.getProviders();
+			const mapped = providers.map( ( provider ): ProviderAndSubscriber => {
+				return {
+					provider,
+					subscriber: createProviderSubscriber( {
+						provider,
+						setInteractionItems,
+					} ),
+				};
+			} );
+			return mapped;
+		} catch {
+			return [];
+		}
+	}, [] );
+
+	useEffect( () => {
+		if ( providerAndSubscribers.length === 0 ) {
+			return;
+		}
+
+		const unsubscribes = providerAndSubscribers.map( ( { provider, subscriber } ) => {
+			const safeSubscriber = () => {
+				try {
+					subscriber();
+				} catch {}
+			};
+			const unsubscribe = provider.subscribe( safeSubscriber );
+			return unsubscribe;
+		} );
+
+		return () => {
+			unsubscribes.forEach( ( unsubscribe ) => unsubscribe() );
+		};
+	}, [ providerAndSubscribers ] );
+
+	useOnMount( () => {
+		if ( providerAndSubscribers.length === 0 ) {
+			return;
+		}
+
+		registerDataHook( 'after', 'editor/documents/attach-preview', async () => {
+			providerAndSubscribers.forEach( ( { subscriber } ) => {
+				try {
+					subscriber();
+				} catch {}
+			} );
+		} );
+	} );
+
+	return useMemo(
+		() =>
+			Object.values( interactionItems )
+				.sort( sortByProviderPriority )
+				.flatMap( ( { items } ) => items ),
+		[ interactionItems ]
+	);
+}
+
+function sortByProviderPriority(
+	{ provider: providerA }: ProviderAndInteractionItems,
+	{ provider: providerB }: ProviderAndInteractionItems
+) {
+	return providerA.priority - providerB.priority;
+}
+
+type CreateProviderSubscriberArgs = {
+	provider: ReturnType< typeof interactionsRepository.getProviders >[ 0 ];
+	setInteractionItems: Dispatch< SetStateAction< ProviderAndInteractionItemsMap > >;
+};
+
+function createProviderSubscriber( { provider, setInteractionItems }: CreateProviderSubscriberArgs ) {
+	return () => {
+		try {
+			const items = provider.actions.all();
+			const providerKey = provider.getKey();
+
+			setInteractionItems( ( prev ) => ( {
+				...prev,
+				[ providerKey ]: { provider, items },
+			} ) );
+		} catch {}
+	};
+}

package/src/index.ts

@@ -12,4 +12,5 @@ export {
 	createTemplatedElementView,
 	type CreateTemplatedElementTypeOptions,
 } from './legacy/create-templated-element-type';
+export { getCanvasIframeDocument } from './sync/get-canvas-iframe-document';
 export * from './legacy/types';

package/src/init.tsx

@@ -1,7 +1,9 @@
 import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
+import { init as initInteractionsRepository } from '@elementor/editor-interactions';
 
 import { ClassesRename } from './components/classes-rename';
 import { ElementsOverlays } from './components/elements-overlays';
+import { InteractionsRenderer } from './components/interactions-renderer';
 import { StyleRenderer } from './components/style-renderer';
 import { initSettingsTransformers } from './init-settings-transformers';
 import { initStyleTransformers } from './init-style-transformers';
@@ -19,6 +21,8 @@ export function init() {
 
 	initSettingsTransformers();
 
+	initInteractionsRepository();
+
 	injectIntoTop( {
 		id: 'elements-overlays',
 		component: ElementsOverlays,
@@ -29,6 +33,11 @@ export function init() {
 		component: StyleRenderer,
 	} );
 
+	injectIntoTop( {
+		id: 'canvas-interactions-render',
+		component: InteractionsRenderer,
+	} );
+
 	injectIntoLogic( {
 		id: 'classes-rename',
 		component: ClassesRename,

package/src/sync/types.ts

@@ -39,5 +39,10 @@ export type CanvasExtendedWindow = Window & {
 		storage?: {
 			get: ( key?: string ) => StorageContent;
 		};
+		config?: {
+			urls?: {
+				assets?: string;
+			};
+		};
 	};
 };