@elementor/editor-canvas 4.0.0-607 → 4.0.0-619

package/dist/index.d.mts

@@ -61,6 +61,9 @@ type LegacyWindow = Window & {
             }
         ];
         $previewWrapper: JQueryElement;
+        helpers: {
+            hasPro: () => boolean;
+        };
     };
 };
 type JQueryStatic = (html: string) => JQueryElement;
@@ -82,6 +85,7 @@ declare class ElementView {
         length: number;
         findByIndex: (index: number) => ElementView;
         each: (callback: (view: ElementView) => void) => void;
+        map: <T>(callback: (view: ElementView) => T) => T[];
     };
     constructor(...args: unknown[]);
     onRender(...args: unknown[]): void;
@@ -177,7 +181,15 @@ type ToJSON<T> = {
 };
 type ContextMenuGroup = {
     name: string;
-    actions: unknown[];
+    actions: ContextMenuAction[];
+};
+type ContextMenuAction = {
+    name: string;
+    icon: string;
+    title: string | (() => string);
+    shortcut?: string;
+    isEnabled: () => boolean;
+    callback: (_: unknown, eventData: unknown) => void;
 };
 type ReplacementSettings = {
     getSetting: (key: string) => unknown;
@@ -324,4 +336,4 @@ declare const UnknownStyleStateError: {
     isError(error: unknown): error is Error;
 };
 
-export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type CreateNestedTemplatedElementTypeOptions, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type NamespacedRenderContext, type NestedTemplatedElementConfig, type PropsResolver, type RenderContext, type ReplacementSettings, STYLE_SCHEMA_URI, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, canBeNestedTemplated, createNestedTemplatedElementType, createNestedTemplatedElementView, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, isAtomicWidget, registerElementType, registerModelExtensions, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry, stylesInheritanceTransformersRegistry };
+export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type ContextMenuAction, type CreateNestedTemplatedElementTypeOptions, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type NamespacedRenderContext, type NestedTemplatedElementConfig, type PropsResolver, type RenderContext, type ReplacementSettings, STYLE_SCHEMA_URI, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, canBeNestedTemplated, createNestedTemplatedElementType, createNestedTemplatedElementView, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, isAtomicWidget, registerElementType, registerModelExtensions, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry, stylesInheritanceTransformersRegistry };

package/dist/index.d.ts

@@ -61,6 +61,9 @@ type LegacyWindow = Window & {
             }
         ];
         $previewWrapper: JQueryElement;
+        helpers: {
+            hasPro: () => boolean;
+        };
     };
 };
 type JQueryStatic = (html: string) => JQueryElement;
@@ -82,6 +85,7 @@ declare class ElementView {
         length: number;
         findByIndex: (index: number) => ElementView;
         each: (callback: (view: ElementView) => void) => void;
+        map: <T>(callback: (view: ElementView) => T) => T[];
     };
     constructor(...args: unknown[]);
     onRender(...args: unknown[]): void;
@@ -177,7 +181,15 @@ type ToJSON<T> = {
 };
 type ContextMenuGroup = {
     name: string;
-    actions: unknown[];
+    actions: ContextMenuAction[];
+};
+type ContextMenuAction = {
+    name: string;
+    icon: string;
+    title: string | (() => string);
+    shortcut?: string;
+    isEnabled: () => boolean;
+    callback: (_: unknown, eventData: unknown) => void;
 };
 type ReplacementSettings = {
     getSetting: (key: string) => unknown;
@@ -324,4 +336,4 @@ declare const UnknownStyleStateError: {
     isError(error: unknown): error is Error;
 };
 
-export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type CreateNestedTemplatedElementTypeOptions, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type NamespacedRenderContext, type NestedTemplatedElementConfig, type PropsResolver, type RenderContext, type ReplacementSettings, STYLE_SCHEMA_URI, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, canBeNestedTemplated, createNestedTemplatedElementType, createNestedTemplatedElementView, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, isAtomicWidget, registerElementType, registerModelExtensions, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry, stylesInheritanceTransformersRegistry };
+export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type ContextMenuAction, type CreateNestedTemplatedElementTypeOptions, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type NamespacedRenderContext, type NestedTemplatedElementConfig, type PropsResolver, type RenderContext, type ReplacementSettings, STYLE_SCHEMA_URI, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, canBeNestedTemplated, createNestedTemplatedElementType, createNestedTemplatedElementView, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, isAtomicWidget, registerElementType, registerModelExtensions, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry, stylesInheritanceTransformersRegistry };

package/dist/index.js

@@ -228,7 +228,6 @@ The css string must follow standard CSS syntax, with properties and values separ
 
 // src/init.tsx
 var import_editor = require("@elementor/editor");
-var import_editor_interactions2 = require("@elementor/editor-interactions");
 var import_editor_mcp3 = require("@elementor/editor-mcp");
 
 // src/components/classes-rename.tsx
@@ -830,7 +829,15 @@ var SELECTORS_MAP = {
 };
 function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
   return async ({ styles, signal }) => {
-    const stylesCssPromises = styles.map(async (style) => {
+    const seenIds = /* @__PURE__ */ new Set();
+    const uniqueStyles = styles.filter((style) => {
+      if (seenIds.has(style.id)) {
+        return false;
+      }
+      seenIds.add(style.id);
+      return true;
+    });
+    const stylesCssPromises = uniqueStyles.map(async (style) => {
       const variantCssPromises = Object.values(style.variants).map(async (variant) => {
         const css = await propsToCss({ props: variant.props, resolve, signal });
         const customCss = customCssToString(variant.custom_css);
@@ -912,15 +919,23 @@ function useStyleRenderer(resolve) {
 function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
+  const breakpoints = (0, import_editor_responsive2.useBreakpoints)();
   const [styleItems, setStyleItems] = (0, import_react10.useState)({});
+  const styleItemsCacheRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
   const providerAndSubscribers = (0, import_react10.useMemo)(() => {
     return import_editor_styles_repository2.stylesRepository.getProviders().map((provider) => {
+      const providerKey = provider.getKey();
+      if (!styleItemsCacheRef.current.has(providerKey)) {
+        styleItemsCacheRef.current.set(providerKey, { orderedIds: [], itemsById: /* @__PURE__ */ new Map() });
+      }
+      const cache = styleItemsCacheRef.current.get(providerKey);
       return {
         provider,
         subscriber: createProviderSubscriber2({
           provider,
           renderStyles,
-          setStyleItems
+          setStyleItems,
+          cache
         })
       };
     });
@@ -939,20 +954,19 @@ function useStyleItems() {
       await Promise.all(promises);
     });
   });
-  const breakpointsOrder = (0, import_editor_responsive2.getBreakpoints)().map((breakpoint) => breakpoint.id);
+  const breakpointSorter = (0, import_react10.useMemo)(
+    () => createBreakpointSorter(breakpoints.map((breakpoint) => breakpoint.id)),
+    [breakpoints]
+  );
   return (0, import_react10.useMemo)(
-    () => Object.values(styleItems).sort(sortByProviderPriority2).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [styleItems, breakpointsOrder.join("-")]
+    () => Object.values(styleItems).sort(prioritySorter).flatMap(({ items }) => items).sort(stateSorter).sort(breakpointSorter),
+    [styleItems, breakpointSorter]
   );
 }
-function sortByProviderPriority2({ provider: providerA }, { provider: providerB }) {
+function prioritySorter({ provider: providerA }, { provider: providerB }) {
   return providerA.priority - providerB.priority;
 }
-function sortByBreakpoint(breakpointsOrder) {
-  return ({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
-}
-function sortByStateType({ state: stateA }, { state: stateB }) {
+function stateSorter({ state: stateA }, { state: stateB }) {
   if ((0, import_editor_styles4.isClassState)(stateA) && !(0, import_editor_styles4.isClassState)(stateB)) {
     return -1;
   }
@@ -961,18 +975,18 @@ function sortByStateType({ state: stateA }, { state: stateB }) {
   }
   return 0;
 }
-function createProviderSubscriber2({ provider, renderStyles, setStyleItems }) {
+function createBreakpointSorter(breakpointsOrder) {
+  return ({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
+}
+function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cache }) {
   return abortPreviousRuns(
-    (abortController) => signalizedProcess(abortController.signal).then((_, signal) => {
-      const styles = provider.actions.all().map((__8, index, items) => {
-        const lastPosition = items.length - 1;
-        const style = items[lastPosition - index];
-        return {
-          ...style,
-          cssName: provider.actions.resolveCssName(style.id)
-        };
-      });
-      return renderStyles({ styles: breakToBreakpoints(styles), signal });
+    (abortController, previous, current) => signalizedProcess(abortController.signal).then((_, signal) => {
+      const hasDiffInfo = current !== void 0 && previous !== void 0;
+      const hasCache = cache.orderedIds.length > 0;
+      if (hasDiffInfo && hasCache) {
+        return updateItems(previous, current, signal);
+      }
+      return createItems(signal);
     }).then((items) => {
       setStyleItems((prev) => ({
         ...prev,
@@ -980,6 +994,34 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems }) {
       }));
     }).execute()
   );
+  async function updateItems(previous, current, signal) {
+    const changedIds = getChangedStyleIds(previous, current);
+    cache.orderedIds = provider.actions.all().map((style) => style.id).reverse();
+    if (changedIds.length > 0) {
+      const changedStyles = changedIds.map((id) => provider.actions.get(id)).filter((style) => !!style).map((style) => ({
+        ...style,
+        cssName: provider.actions.resolveCssName(style.id)
+      }));
+      return renderStyles({ styles: breakToBreakpoints(changedStyles), signal }).then((rendered) => {
+        updateCacheItems(cache, rendered);
+        return getOrderedItems(cache);
+      });
+    }
+    return getOrderedItems(cache);
+  }
+  async function createItems(signal) {
+    const allStyles = provider.actions.all();
+    const styles = allStyles.reverse().map((style) => {
+      return {
+        ...style,
+        cssName: provider.actions.resolveCssName(style.id)
+      };
+    });
+    return renderStyles({ styles: breakToBreakpoints(styles), signal }).then((rendered) => {
+      rebuildCache(cache, allStyles, rendered);
+      return rendered;
+    });
+  }
   function breakToBreakpoints(styles) {
     return Object.values(
       styles.reduce(
@@ -1004,6 +1046,44 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems }) {
     ).flatMap((breakpointMap) => Object.values(breakpointMap));
   }
 }
+function getChangedStyleIds(previous, current) {
+  const changedIds = [];
+  for (const id of Object.keys(current)) {
+    const currentStyle = current[id];
+    const previousStyle = previous[id];
+    if (!previousStyle || currentStyle !== previousStyle) {
+      changedIds.push(id);
+    }
+  }
+  return changedIds;
+}
+function getOrderedItems(cache) {
+  return cache.orderedIds.map((id) => cache.itemsById.get(id)).filter((items) => items !== void 0).flat();
+}
+function updateCacheItems(cache, changedItems) {
+  for (const item of changedItems) {
+    const existing = cache.itemsById.get(item.id);
+    if (existing) {
+      const idx = existing.findIndex((e) => e.breakpoint === item.breakpoint && e.state === item.state);
+      if (idx >= 0) {
+        existing[idx] = item;
+      } else {
+        existing.push(item);
+      }
+    } else {
+      cache.itemsById.set(item.id, [item]);
+    }
+  }
+}
+function rebuildCache(cache, allStyles, items) {
+  cache.orderedIds = allStyles.map((style) => style.id).reverse();
+  cache.itemsById.clear();
+  for (const item of items) {
+    const existing = cache.itemsById.get(item.id) || [];
+    existing.push(item);
+    cache.itemsById.set(item.id, existing);
+  }
+}
 
 // src/components/style-renderer.tsx
 function StyleRenderer() {
@@ -1013,11 +1093,29 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  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 })));
+  return /* @__PURE__ */ React4.createElement(import_ui3.Portal, { container }, filterUniqueStyleDefinitions(styleItems).map((item) => /* @__PURE__ */ React4.createElement("style", { key: `${item.id}-${item.breakpoint}-${item.state ?? "normal"}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React4.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer2() {
   return (0, import_editor_v1_adapters8.__privateUseListenTo)((0, import_editor_v1_adapters8.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters8.getCanvasIframeDocument)()?.head);
 }
+function filterUniqueStyleDefinitions(styleItems) {
+  const seen = /* @__PURE__ */ new Map();
+  return styleItems.filter((style) => {
+    const existingStyle = seen.get(style.id);
+    if (existingStyle) {
+      const existingStyleVariant = existingStyle.find(
+        (s) => s.breakpoint === style.breakpoint && s.state === style.state
+      );
+      if (existingStyleVariant) {
+        return false;
+      }
+      existingStyle.push(style);
+      return true;
+    }
+    seen.set(style.id, [style]);
+    return true;
+  });
+}
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var import_editor_notifications = require("@elementor/editor-notifications");
@@ -1306,9 +1404,23 @@ var plainTransformer = createTransformer((value) => {
   return value;
 });
 
+// src/transformers/shared/video-src-transformer.ts
+var import_wp_media2 = require("@elementor/wp-media");
+var videoSrcTransformer = createTransformer(async (value) => {
+  const { id, url } = value;
+  if (!id) {
+    return { id: null, url };
+  }
+  const attachment = await (0, import_wp_media2.getMediaAttachment)({ id });
+  return {
+    id,
+    url: attachment?.url ?? url
+  };
+});
+
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -4364,7 +4476,6 @@ function init() {
   initViewReplacements();
   initLegacyViews();
   initSettingsTransformers();
-  (0, import_editor_interactions2.init)();
   (0, import_editor.injectIntoTop)({
     id: "elements-overlays",
     component: ElementsOverlays

package/dist/index.mjs

@@ -173,7 +173,6 @@ The css string must follow standard CSS syntax, with properties and values separ
 
 // src/init.tsx
 import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
-import { init as initInteractionsRepository } from "@elementor/editor-interactions";
 import { getMCPByDomain } from "@elementor/editor-mcp";
 
 // src/components/classes-rename.tsx
@@ -587,8 +586,8 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-import { useEffect as useEffect6, useMemo as useMemo4, useState as useState3 } from "react";
-import { getBreakpoints } from "@elementor/editor-responsive";
+import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef2, useState as useState3 } from "react";
+import { useBreakpoints } from "@elementor/editor-responsive";
 import { isClassState } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
 import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
@@ -796,7 +795,15 @@ var SELECTORS_MAP = {
 };
 function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
   return async ({ styles, signal }) => {
-    const stylesCssPromises = styles.map(async (style) => {
+    const seenIds = /* @__PURE__ */ new Set();
+    const uniqueStyles = styles.filter((style) => {
+      if (seenIds.has(style.id)) {
+        return false;
+      }
+      seenIds.add(style.id);
+      return true;
+    });
+    const stylesCssPromises = uniqueStyles.map(async (style) => {
       const variantCssPromises = Object.values(style.variants).map(async (variant) => {
         const css = await propsToCss({ props: variant.props, resolve, signal });
         const customCss = customCssToString(variant.custom_css);
@@ -878,15 +885,23 @@ function useStyleRenderer(resolve) {
 function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
+  const breakpoints = useBreakpoints();
   const [styleItems, setStyleItems] = useState3({});
+  const styleItemsCacheRef = useRef2(/* @__PURE__ */ new Map());
   const providerAndSubscribers = useMemo4(() => {
     return stylesRepository2.getProviders().map((provider) => {
+      const providerKey = provider.getKey();
+      if (!styleItemsCacheRef.current.has(providerKey)) {
+        styleItemsCacheRef.current.set(providerKey, { orderedIds: [], itemsById: /* @__PURE__ */ new Map() });
+      }
+      const cache = styleItemsCacheRef.current.get(providerKey);
       return {
         provider,
         subscriber: createProviderSubscriber2({
           provider,
           renderStyles,
-          setStyleItems
+          setStyleItems,
+          cache
         })
       };
     });
@@ -905,20 +920,19 @@ function useStyleItems() {
       await Promise.all(promises);
     });
   });
-  const breakpointsOrder = getBreakpoints().map((breakpoint) => breakpoint.id);
+  const breakpointSorter = useMemo4(
+    () => createBreakpointSorter(breakpoints.map((breakpoint) => breakpoint.id)),
+    [breakpoints]
+  );
   return useMemo4(
-    () => Object.values(styleItems).sort(sortByProviderPriority2).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [styleItems, breakpointsOrder.join("-")]
+    () => Object.values(styleItems).sort(prioritySorter).flatMap(({ items }) => items).sort(stateSorter).sort(breakpointSorter),
+    [styleItems, breakpointSorter]
   );
 }
-function sortByProviderPriority2({ provider: providerA }, { provider: providerB }) {
+function prioritySorter({ provider: providerA }, { provider: providerB }) {
   return providerA.priority - providerB.priority;
 }
-function sortByBreakpoint(breakpointsOrder) {
-  return ({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
-}
-function sortByStateType({ state: stateA }, { state: stateB }) {
+function stateSorter({ state: stateA }, { state: stateB }) {
   if (isClassState(stateA) && !isClassState(stateB)) {
     return -1;
   }
@@ -927,18 +941,18 @@ function sortByStateType({ state: stateA }, { state: stateB }) {
   }
   return 0;
 }
-function createProviderSubscriber2({ provider, renderStyles, setStyleItems }) {
+function createBreakpointSorter(breakpointsOrder) {
+  return ({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
+}
+function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cache }) {
   return abortPreviousRuns(
-    (abortController) => signalizedProcess(abortController.signal).then((_, signal) => {
-      const styles = provider.actions.all().map((__8, index, items) => {
-        const lastPosition = items.length - 1;
-        const style = items[lastPosition - index];
-        return {
-          ...style,
-          cssName: provider.actions.resolveCssName(style.id)
-        };
-      });
-      return renderStyles({ styles: breakToBreakpoints(styles), signal });
+    (abortController, previous, current) => signalizedProcess(abortController.signal).then((_, signal) => {
+      const hasDiffInfo = current !== void 0 && previous !== void 0;
+      const hasCache = cache.orderedIds.length > 0;
+      if (hasDiffInfo && hasCache) {
+        return updateItems(previous, current, signal);
+      }
+      return createItems(signal);
     }).then((items) => {
       setStyleItems((prev) => ({
         ...prev,
@@ -946,6 +960,34 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems }) {
       }));
     }).execute()
   );
+  async function updateItems(previous, current, signal) {
+    const changedIds = getChangedStyleIds(previous, current);
+    cache.orderedIds = provider.actions.all().map((style) => style.id).reverse();
+    if (changedIds.length > 0) {
+      const changedStyles = changedIds.map((id) => provider.actions.get(id)).filter((style) => !!style).map((style) => ({
+        ...style,
+        cssName: provider.actions.resolveCssName(style.id)
+      }));
+      return renderStyles({ styles: breakToBreakpoints(changedStyles), signal }).then((rendered) => {
+        updateCacheItems(cache, rendered);
+        return getOrderedItems(cache);
+      });
+    }
+    return getOrderedItems(cache);
+  }
+  async function createItems(signal) {
+    const allStyles = provider.actions.all();
+    const styles = allStyles.reverse().map((style) => {
+      return {
+        ...style,
+        cssName: provider.actions.resolveCssName(style.id)
+      };
+    });
+    return renderStyles({ styles: breakToBreakpoints(styles), signal }).then((rendered) => {
+      rebuildCache(cache, allStyles, rendered);
+      return rendered;
+    });
+  }
   function breakToBreakpoints(styles) {
     return Object.values(
       styles.reduce(
@@ -970,6 +1012,44 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems }) {
     ).flatMap((breakpointMap) => Object.values(breakpointMap));
   }
 }
+function getChangedStyleIds(previous, current) {
+  const changedIds = [];
+  for (const id of Object.keys(current)) {
+    const currentStyle = current[id];
+    const previousStyle = previous[id];
+    if (!previousStyle || currentStyle !== previousStyle) {
+      changedIds.push(id);
+    }
+  }
+  return changedIds;
+}
+function getOrderedItems(cache) {
+  return cache.orderedIds.map((id) => cache.itemsById.get(id)).filter((items) => items !== void 0).flat();
+}
+function updateCacheItems(cache, changedItems) {
+  for (const item of changedItems) {
+    const existing = cache.itemsById.get(item.id);
+    if (existing) {
+      const idx = existing.findIndex((e) => e.breakpoint === item.breakpoint && e.state === item.state);
+      if (idx >= 0) {
+        existing[idx] = item;
+      } else {
+        existing.push(item);
+      }
+    } else {
+      cache.itemsById.set(item.id, [item]);
+    }
+  }
+}
+function rebuildCache(cache, allStyles, items) {
+  cache.orderedIds = allStyles.map((style) => style.id).reverse();
+  cache.itemsById.clear();
+  for (const item of items) {
+    const existing = cache.itemsById.get(item.id) || [];
+    existing.push(item);
+    cache.itemsById.set(item.id, existing);
+  }
+}
 
 // src/components/style-renderer.tsx
 function StyleRenderer() {
@@ -979,11 +1059,29 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  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 })));
+  return /* @__PURE__ */ React4.createElement(Portal2, { container }, filterUniqueStyleDefinitions(styleItems).map((item) => /* @__PURE__ */ React4.createElement("style", { key: `${item.id}-${item.breakpoint}-${item.state ?? "normal"}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React4.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer2() {
   return useListenTo4(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument3()?.head);
 }
+function filterUniqueStyleDefinitions(styleItems) {
+  const seen = /* @__PURE__ */ new Map();
+  return styleItems.filter((style) => {
+    const existingStyle = seen.get(style.id);
+    if (existingStyle) {
+      const existingStyleVariant = existingStyle.find(
+        (s) => s.breakpoint === style.breakpoint && s.state === style.state
+      );
+      if (existingStyleVariant) {
+        return false;
+      }
+      existingStyle.push(style);
+      return true;
+    }
+    seen.set(style.id, [style]);
+    return true;
+  });
+}
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 import { notify } from "@elementor/editor-notifications";
@@ -1272,9 +1370,23 @@ var plainTransformer = createTransformer((value) => {
   return value;
 });
 
+// src/transformers/shared/video-src-transformer.ts
+import { getMediaAttachment as getMediaAttachment2 } from "@elementor/wp-media";
+var videoSrcTransformer = createTransformer(async (value) => {
+  const { id, url } = value;
+  if (!id) {
+    return { id: null, url };
+  }
+  const attachment = await getMediaAttachment2({ id });
+  return {
+    id,
+    url: attachment?.url ?? url
+  };
+});
+
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -4367,7 +4479,6 @@ function init() {
   initViewReplacements();
   initLegacyViews();
   initSettingsTransformers();
-  initInteractionsRepository();
   injectIntoTop({
     id: "elements-overlays",
     component: ElementsOverlays

package/package.json

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