@elementor/editor-canvas 0.15.4 → 0.18.0

package/dist/index.js

@@ -30,6 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  createTransformer: () => createTransformer,
+  init: () => init,
   settingsTransformersRegistry: () => settingsTransformersRegistry,
   styleTransformersRegistry: () => styleTransformersRegistry
 });
@@ -97,8 +99,8 @@ function useFloatingOnElement({ element, isSelected }) {
       (0, import_react3.size)({
         apply({ elements, rects }) {
           Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
-            height: `${rects.reference.height}px`
+            width: `${rects.reference.width + 2}px`,
+            height: `${rects.reference.height + 2}px`
           });
         }
       }),
@@ -164,6 +166,149 @@ function useElementsDom() {
   );
 }
 
+// src/components/style-renderer.tsx
+var React3 = __toESM(require("react"));
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_ui2 = require("@elementor/ui");
+
+// src/hooks/use-style-items.ts
+var import_react8 = require("react");
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+
+// src/utils/abort-previous-runs.ts
+function abortPreviousRuns(cb) {
+  let abortController = null;
+  return (...args) => {
+    if (abortController) {
+      abortController.abort();
+    }
+    abortController = new AbortController();
+    return cb(abortController, ...args);
+  };
+}
+
+// src/utils/signalized-process.ts
+function signalizedProcess(signal, steps = []) {
+  return {
+    then: (cb) => {
+      steps.push(cb);
+      return signalizedProcess(signal, steps);
+    },
+    execute: async () => {
+      let lastResult;
+      for (const step of steps) {
+        if (signal.aborted) {
+          break;
+        }
+        lastResult = await step(lastResult, signal);
+      }
+    }
+  };
+}
+
+// src/hooks/use-on-mount.ts
+var import_react5 = require("react");
+function useOnMount(cb) {
+  const mounted = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      cb();
+    }
+  }, []);
+}
+
+// src/hooks/use-style-prop-resolver.ts
+var import_react6 = require("react");
+var import_editor_styles = require("@elementor/editor-styles");
+
+// src/renderers/create-props-resolver.ts
+var import_editor_props = require("@elementor/editor-props");
+
+// src/renderers/multi-props.ts
+var isMultiProps = (propValue) => {
+  return !!propValue && typeof propValue === "object" && "$$multi-props" in propValue && propValue["$$multi-props"] === true;
+};
+var createMultiPropsValue = (props) => {
+  return {
+    "$$multi-props": true,
+    value: props
+  };
+};
+var getMultiPropsValue = (multiProps) => {
+  return multiProps.value;
+};
+
+// src/renderers/create-props-resolver.ts
+var TRANSFORM_DEPTH_LIMIT = 3;
+function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }) {
+  async function resolve({ props, schema, signal }) {
+    schema = schema ?? initialSchema;
+    const promises = Promise.all(
+      Object.entries(schema).map(async ([key, type]) => {
+        const value = props[key] ?? type.default;
+        const transformed = await transform({ value, key, type, signal });
+        onPropResolve?.({ key, value: transformed });
+        if (isMultiProps(transformed)) {
+          return getMultiPropsValue(transformed);
+        }
+        return { [key]: transformed };
+      })
+    );
+    return Object.assign({}, ...(await promises).filter(Boolean));
+  }
+  async function transform({ value, key, type, signal, depth = 0 }) {
+    if (value === null || value === void 0) {
+      return null;
+    }
+    if (!(0, import_editor_props.isTransformable)(value)) {
+      return value;
+    }
+    if (depth > TRANSFORM_DEPTH_LIMIT) {
+      return null;
+    }
+    if (value.disabled === true) {
+      return null;
+    }
+    if (type.kind === "union") {
+      type = type.prop_types[value.$$type];
+      if (!type) {
+        return null;
+      }
+    }
+    if (value.$$type !== type.key) {
+      return null;
+    }
+    let resolvedValue = value.value;
+    if (type.kind === "object") {
+      resolvedValue = await resolve({
+        props: resolvedValue,
+        schema: type.shape,
+        signal
+      });
+    }
+    if (type.kind === "array") {
+      resolvedValue = await Promise.all(
+        resolvedValue.map(
+          (item) => transform({ value: item, key, type: type.item_prop_type, depth, signal })
+        )
+      );
+    }
+    const transformer = transformers.get(value.$$type);
+    if (!transformer) {
+      return null;
+    }
+    try {
+      const transformed = await transformer(resolvedValue, { key, signal });
+      return transform({ value: transformed, key, type, signal, depth: depth + 1 });
+    } catch {
+      return null;
+    }
+  }
+  return resolve;
+}
+
 // src/transformers/create-transformers-registry.ts
 function createTransformersRegistry() {
   const transformers = {};
@@ -183,6 +328,176 @@ function createTransformersRegistry() {
   };
 }
 
+// src/style-transformers-registry.ts
+var styleTransformersRegistry = createTransformersRegistry();
+
+// src/sync/enqueue-font.ts
+var enqueueFont = (fontFamily, context = "preview") => {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
+};
+
+// src/hooks/use-style-prop-resolver.ts
+function useStylePropResolver() {
+  return (0, import_react6.useMemo)(() => {
+    return createPropsResolver({
+      transformers: styleTransformersRegistry,
+      schema: (0, import_editor_styles.getStylesSchema)(),
+      onPropResolve: ({ key, value }) => {
+        if (key !== "font-family" || typeof value !== "string") {
+          return;
+        }
+        enqueueFont(value);
+      }
+    });
+  }, []);
+}
+
+// src/hooks/use-style-renderer.ts
+var import_react7 = require("react");
+var import_editor_responsive = require("@elementor/editor-responsive");
+
+// src/renderers/errors.ts
+var import_utils = require("@elementor/utils");
+var UnknownStyleTypeError = (0, import_utils.createError)({
+  code: "unknown_style_type",
+  message: "Unknown style type"
+});
+
+// src/renderers/create-styles-renderer.ts
+var SELECTORS_MAP = {
+  class: "."
+};
+function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
+  return async ({ styles, signal }) => {
+    const stylesCssPromises = styles.map(async (style) => {
+      const variantCssPromises = Object.values(style.variants).map(async (variant) => {
+        const css = await propsToCss({ props: variant.props, resolve, signal });
+        return createStyleWrapper().forStyle(style).withPrefix(selectorPrefix).withState(variant.meta.state).withMediaQuery(variant.meta.breakpoint ? breakpoints[variant.meta.breakpoint] : null).wrap(css);
+      });
+      const variantsCss = await Promise.all(variantCssPromises);
+      return {
+        id: style.id,
+        value: variantsCss.join("")
+      };
+    });
+    return await Promise.all(stylesCssPromises);
+  };
+}
+function createStyleWrapper(value = "", wrapper) {
+  return {
+    forStyle: ({ id, type }) => {
+      const symbol = SELECTORS_MAP[type];
+      if (!symbol) {
+        throw new UnknownStyleTypeError({ context: { type } });
+      }
+      return createStyleWrapper(`${value}${symbol}${id}`, wrapper);
+    },
+    withPrefix: (prefix) => createStyleWrapper([prefix, value].filter(Boolean).join(" "), wrapper),
+    withState: (state) => createStyleWrapper(state ? `${value}:${state}` : value, wrapper),
+    withMediaQuery: (breakpoint) => {
+      if (!breakpoint?.type) {
+        return createStyleWrapper(value, wrapper);
+      }
+      const size2 = `${breakpoint.type}:${breakpoint.width}px`;
+      return createStyleWrapper(value, (css) => `@media(${size2}){${css}}`);
+    },
+    wrap: (css) => {
+      const res = `${value}{${css}}`;
+      if (!wrapper) {
+        return res;
+      }
+      return wrapper(res);
+    }
+  };
+}
+async function propsToCss({ props, resolve, signal }) {
+  const transformed = await resolve({ props, signal });
+  return Object.entries(transformed).reduce((acc, [propName, propValue]) => {
+    if (propValue === null) {
+      return acc;
+    }
+    acc.push(propName + ":" + propValue + ";");
+    return acc;
+  }, []).join("");
+}
+
+// src/hooks/use-style-renderer.ts
+var SELECTOR_PREFIX = ".elementor";
+function useStyleRenderer(resolve) {
+  const breakpoints = (0, import_editor_responsive.useBreakpointsMap)();
+  return (0, import_react7.useMemo)(() => {
+    return createStylesRenderer({
+      selectorPrefix: SELECTOR_PREFIX,
+      breakpoints,
+      resolve
+    });
+  }, [resolve, breakpoints]);
+}
+
+// src/hooks/use-style-items.ts
+function useStyleItems() {
+  const resolve = useStylePropResolver();
+  const renderStyles = useStyleRenderer(resolve);
+  const [styleItems, setStyleItems] = (0, import_react8.useState)({});
+  const providerAndSubscribers = (0, import_react8.useMemo)(() => {
+    return import_editor_styles_repository.stylesRepository.getProviders().map((provider) => {
+      return {
+        provider,
+        subscriber: createProviderSubscriber({
+          provider,
+          renderStyles,
+          setStyleItems
+        })
+      };
+    });
+  }, [renderStyles]);
+  (0, import_react8.useEffect)(() => {
+    const unsubscribes = providerAndSubscribers.map(
+      ({ provider, subscriber }) => provider.subscribe(subscriber)
+    );
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [providerAndSubscribers]);
+  useOnMount(() => {
+    (0, import_editor_v1_adapters2.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+      const promises = providerAndSubscribers.map(async ({ subscriber }) => subscriber());
+      await Promise.all(promises);
+    });
+  });
+  return Object.values(styleItems).sort(({ provider: providerA }, { provider: providerB }) => providerA.priority - providerB.priority).flatMap(({ items }) => items);
+}
+function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
+  return abortPreviousRuns(
+    (abortController) => signalizedProcess(abortController.signal).then((_, signal) => renderStyles({ styles: provider.actions.all(), signal })).then((items) => {
+      setStyleItems((prev) => ({
+        ...prev,
+        [provider.getKey()]: { provider, items }
+      }));
+    }).execute()
+  );
+}
+
+// src/sync/get-canvas-iframe-head.ts
+function getCanvasIframeHead() {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.$preview?.[0]?.contentDocument?.head;
+}
+
+// src/components/style-renderer.tsx
+function StyleRenderer() {
+  const container = usePortalContainer();
+  const styleItems = useStyleItems();
+  if (!container) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(import_ui2.Portal, { container }, styleItems.map((item) => /* @__PURE__ */ React3.createElement("style", { "data-e-style-id": item.id, key: item.id }, item.value)));
+}
+function usePortalContainer() {
+  return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeHead());
+}
+
 // src/settings-transformers-registry.ts
 var settingsTransformersRegistry = createTransformersRegistry();
 
@@ -247,9 +562,6 @@ function initSettingsTransformers() {
   settingsTransformersRegistry.register("classes", arrayTransformer).register("link", linkTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).registerFallback(plainTransformer);
 }
 
-// src/style-transformers-registry.ts
-var styleTransformersRegistry = createTransformersRegistry();
-
 // src/transformers/styles/background-color-overlay-transformer.ts
 var backgroundColorOverlayTransformer = createTransformer((value) => {
   const { color = null } = value;
@@ -311,20 +623,6 @@ var createCombineArrayTransformer = (delimiter) => {
   return createTransformer((value) => value.filter(Boolean).join(delimiter));
 };
 
-// src/renderers/multi-props.ts
-var isMultiProps = (propValue) => {
-  return !!propValue && typeof propValue === "object" && "$$multi-props" in propValue && propValue["$$multi-props"] === true;
-};
-var createMultiPropsValue = (props) => {
-  return {
-    "$$multi-props": true,
-    value: props
-  };
-};
-var getMultiPropsValue = (multiProps) => {
-  return multiProps.value;
-};
-
 // src/transformers/styles/create-multi-props-transformer.ts
 var createMultiPropsTransformer = (keys, keyGenerator) => {
   return createTransformer((value, { key: propKey }) => {
@@ -379,221 +677,9 @@ function initStyleTransformers() {
   ).registerFallback(plainTransformer);
 }
 
-// src/init-styles-renderer.ts
-var import_editor_responsive = require("@elementor/editor-responsive");
-var import_editor_styles = require("@elementor/editor-styles");
-var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-
-// src/renderers/create-props-resolver.ts
-var import_editor_props = require("@elementor/editor-props");
-var TRANSFORM_DEPTH_LIMIT = 3;
-function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }) {
-  async function resolve({ props, schema, signal }) {
-    schema = schema ?? initialSchema;
-    const promises = Promise.all(
-      Object.entries(schema).map(async ([key, type]) => {
-        const value = props[key] ?? type.default;
-        const transformed = await transform({ value, key, type, signal });
-        onPropResolve?.({ key, value: transformed });
-        if (isMultiProps(transformed)) {
-          return getMultiPropsValue(transformed);
-        }
-        return { [key]: transformed };
-      })
-    );
-    return Object.assign({}, ...(await promises).filter(Boolean));
-  }
-  async function transform({ value, key, type, signal, depth = 0 }) {
-    if (value === null || value === void 0) {
-      return null;
-    }
-    if (!(0, import_editor_props.isTransformable)(value)) {
-      return value;
-    }
-    if (depth > TRANSFORM_DEPTH_LIMIT) {
-      return null;
-    }
-    if (value.disabled === true) {
-      return null;
-    }
-    if (type.kind === "union") {
-      type = type.prop_types[value.$$type];
-      if (!type) {
-        return null;
-      }
-    }
-    if (value.$$type !== type.key) {
-      return null;
-    }
-    let resolvedValue = value.value;
-    if (type.kind === "object") {
-      resolvedValue = await resolve({
-        props: resolvedValue,
-        schema: type.shape,
-        signal
-      });
-    }
-    if (type.kind === "array") {
-      resolvedValue = await Promise.all(
-        resolvedValue.map(
-          (item) => transform({ value: item, key, type: type.item_prop_type, depth, signal })
-        )
-      );
-    }
-    const transformer = transformers.get(value.$$type);
-    if (!transformer) {
-      return null;
-    }
-    try {
-      const transformed = await transformer(resolvedValue, { key, signal });
-      return transform({ value: transformed, key, type, signal, depth: depth + 1 });
-    } catch {
-      return null;
-    }
-  }
-  return resolve;
-}
-
-// src/renderers/errors.ts
-var import_utils = require("@elementor/utils");
-var UnknownStyleTypeError = (0, import_utils.createError)({
-  code: "unknown_style_type",
-  message: "Unknown style type"
-});
-
-// src/renderers/render-styles.ts
-var SELECTORS_MAP = {
-  class: "."
-};
-async function renderStyles({
-  resolve,
-  styles,
-  breakpoints,
-  selectorPrefix = "",
-  signal
-}) {
-  const stylesCssPromises = styles.map(async (style) => {
-    const variantCssPromises = Object.values(style.variants).map(async (variant) => {
-      const css = await propsToCss({ props: variant.props, resolve, signal });
-      return createStyleWrapper().forStyle(style).withPrefix(selectorPrefix).withState(variant.meta.state).withMediaQuery(variant.meta.breakpoint ? breakpoints[variant.meta.breakpoint] : null).wrap(css);
-    });
-    const variantsCss = await Promise.all(variantCssPromises);
-    return wrapCssWithStyleElement(style.id, variantsCss.join(""));
-  });
-  const stylesCss = await Promise.all(stylesCssPromises);
-  return stylesCss.join("");
-}
-function createStyleWrapper(value = "", wrapper) {
-  return {
-    forStyle: ({ id, type }) => {
-      const symbol = SELECTORS_MAP[type];
-      if (!symbol) {
-        throw new UnknownStyleTypeError({ context: { type } });
-      }
-      return createStyleWrapper(`${value}${symbol}${id}`, wrapper);
-    },
-    withPrefix: (prefix) => createStyleWrapper([prefix, value].filter(Boolean).join(" "), wrapper),
-    withState: (state) => createStyleWrapper(state ? `${value}:${state}` : value, wrapper),
-    withMediaQuery: (breakpoint) => {
-      if (!breakpoint?.type) {
-        return createStyleWrapper(value, wrapper);
-      }
-      const size2 = `${breakpoint.type}:${breakpoint.width}px`;
-      return createStyleWrapper(value, (css) => `@media(${size2}){${css}}`);
-    },
-    wrap: (css) => {
-      const res = `${value}{${css}}`;
-      if (!wrapper) {
-        return res;
-      }
-      return wrapper(res);
-    }
-  };
-}
-async function propsToCss({ props, resolve, signal }) {
-  const transformed = await resolve({ props, signal });
-  return Object.entries(transformed).reduce((acc, [propName, propValue]) => {
-    if (propValue === null) {
-      return acc;
-    }
-    acc.push(propName + ":" + propValue + ";");
-    return acc;
-  }, []).join("");
-}
-function wrapCssWithStyleElement(id, css) {
-  return `<style data-style-id="${id}">${css}</style>`;
-}
-
-// src/sync/enqueue-font.ts
-var enqueueFont = (fontFamily, context = "preview") => {
-  const extendedWindow = window;
-  return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
-};
-
-// src/sync/get-canvas-iframe-body.ts
-function getCanvasIframeBody() {
-  const extendedWindow = window;
-  return extendedWindow.elementor?.$preview?.[0]?.contentDocument?.body;
-}
-
-// src/init-styles-renderer.ts
-var WRAPPER_DATA_ATTR = "data-styles-container";
-var SELECTOR_PREFIX = ".elementor";
-function initStylesRenderer() {
-  (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.v1ReadyEvent)(), () => {
-    let abortController = null;
-    const resolve = createPropsResolver({
-      transformers: styleTransformersRegistry,
-      schema: (0, import_editor_styles.getStylesSchema)(),
-      onPropResolve: enqueueUsedFonts
-    });
-    const injectStyleElements = async () => {
-      const styleContainer = getStylesContainer();
-      const styles = import_editor_styles_repository.stylesRepository.all().reverse();
-      const breakpoints = (0, import_editor_responsive.getBreakpointsMap)();
-      if (abortController) {
-        abortController.abort();
-      }
-      abortController = new AbortController();
-      styleContainer.innerHTML = await renderStyles({
-        styles,
-        resolve,
-        breakpoints,
-        selectorPrefix: SELECTOR_PREFIX,
-        signal: abortController.signal
-      });
-    };
-    import_editor_styles_repository.stylesRepository.subscribe(injectStyleElements);
-    (0, import_editor_v1_adapters2.registerDataHook)("after", "editor/documents/attach-preview", injectStyleElements);
-  });
-}
-function getStylesContainer() {
-  const preview = getCanvasIframeBody();
-  const stylesContainer = preview?.querySelector(`[${WRAPPER_DATA_ATTR}]`);
-  if (stylesContainer) {
-    return stylesContainer;
-  }
-  const el = createStylesContainer();
-  preview?.prepend(el);
-  return el;
-}
-function createStylesContainer() {
-  const el = document.createElement("div");
-  el.style.display = "none";
-  el.setAttribute(WRAPPER_DATA_ATTR, "");
-  return el;
-}
-function enqueueUsedFonts({ key, value }) {
-  if (key !== "font-family" || typeof value !== "string") {
-    return;
-  }
-  enqueueFont(value);
-}
-
 // src/legacy/init-legacy-views.ts
 var import_editor_elements2 = require("@elementor/editor-elements");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-dom-renderer.ts
 var import_twing = require("@elementor/twing");
@@ -659,11 +745,13 @@ function createElementViewClassDeclaration() {
     onRender(...args) {
       super.onRender(...args);
       this.#dispatchEvent("elementor/preview/atomic-widget/render");
+      this.#dispatchPreviewEvent("elementor/element/render");
     }
     // Dispatch `destroy` event so the overlay layer will be updated
     onDestroy(...args) {
       super.onDestroy(...args);
       this.#dispatchEvent("elementor/preview/atomic-widget/destroy");
+      this.#dispatchPreviewEvent("elementor/element/destroy");
     }
     attributes() {
       return {
@@ -697,31 +785,23 @@ function createElementViewClassDeclaration() {
         })
       );
     }
+    #dispatchPreviewEvent(eventType) {
+      legacyWindow.elementor?.$preview?.[0]?.contentWindow.dispatchEvent(
+        new CustomEvent(eventType, {
+          detail: {
+            id: this.model.get("id"),
+            type: this.model.get("widgetType"),
+            element: this.getDomElement().get(0)
+          }
+        })
+      );
+    }
     getContextMenuGroups() {
       return super.getContextMenuGroups().filter((group) => group.name !== "save");
     }
   };
 }
 
-// src/legacy/signalized-process.ts
-function signalizedProcess(signal, steps = []) {
-  return {
-    then: (cb) => {
-      steps.push(cb);
-      return signalizedProcess(signal, steps);
-    },
-    execute: async () => {
-      let lastResult;
-      for (const step of steps) {
-        if (signal.aborted) {
-          break;
-        }
-        lastResult = await step(lastResult, signal);
-      }
-    }
-  };
-}
-
 // src/legacy/create-templated-element-type.ts
 function createTemplatedElementType({ type, renderer, element }) {
   const legacyWindow = window;
@@ -802,7 +882,7 @@ function createTemplatedElementViewClassDeclaration({
 
 // src/legacy/init-legacy-views.ts
 function initLegacyViews() {
-  (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.v1ReadyEvent)(), () => {
+  (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.v1ReadyEvent)(), () => {
     const config = (0, import_editor_elements2.getWidgetsCache)() ?? {};
     const legacyWindow = window;
     const renderer = createDomRenderer();
@@ -816,19 +896,102 @@ function initLegacyViews() {
   });
 }
 
-// src/style-commands/paste-style.ts
+// 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_adapters5 = require("@elementor/editor-v1-adapters");
+var import_i18n = require("@wordpress/i18n");
+function initLinkInLinkPrevention() {
+  (0, import_editor_v1_adapters5.blockCommand)({
+    command: "document/elements/paste",
+    condition: blockLinkInLinkPaste
+  });
+  (0, import_editor_v1_adapters5.blockCommand)({
+    command: "document/elements/move",
+    condition: blockLinkInLinkMove
+  });
+}
+var learnMoreActionProps = {
+  href: "https://go.elementor.com/element-link-inside-link-infotip",
+  target: "_blank",
+  color: "inherit",
+  variant: "text",
+  sx: {
+    marginInlineStart: "20px"
+  },
+  children: "Learn more"
+};
+function blockLinkInLinkPaste(args) {
+  const { containers = [args.container], storageType } = args;
+  const targetElements = containers;
+  if (storageType !== "localstorage") {
+    return false;
+  }
+  const data = window?.elementorCommon?.storage?.get();
+  if (!data?.clipboard?.elements) {
+    return false;
+  }
+  const sourceElements = data.clipboard.elements;
+  const notification = {
+    type: "default",
+    message: (0, import_i18n.__)(
+      "To paste a link to this element, first remove the link from it's parent container.",
+      "elementor"
+    ),
+    id: "paste-in-link-blocked",
+    additionalActionProps: [learnMoreActionProps]
+  };
+  const blocked = shouldBlock(sourceElements, targetElements);
+  if (blocked) {
+    (0, import_editor_notifications.notify)(notification);
+  }
+  return blocked;
+}
+function blockLinkInLinkMove(args) {
+  const { containers = [args.container], target } = args;
+  const sourceElements = containers;
+  const targetElement = target;
+  const notification = {
+    type: "default",
+    message: (0, import_i18n.__)("To drag a link to this element, first remove the link from it's parent container.", "elementor"),
+    id: "move-in-link-blocked",
+    additionalActionProps: [learnMoreActionProps]
+  };
+  const isBlocked = shouldBlock(sourceElements, [targetElement]);
+  if (isBlocked) {
+    (0, import_editor_notifications.notify)(notification);
+  }
+  return isBlocked;
+}
+function shouldBlock(sourceElements, targetElements) {
+  if (!sourceElements?.length || !targetElements?.length) {
+    return false;
+  }
+  const isSourceContainsAnAnchor = sourceElements.some((src) => {
+    return src?.id ? (0, import_editor_elements3.isElementAnchored)(src.id) || !!(0, import_editor_elements3.getAnchoredDescendantId)(src.id) : false;
+  });
+  if (!isSourceContainsAnAnchor) {
+    return false;
+  }
+  const isTargetContainsAnAnchor = targetElements.some((target) => {
+    return target?.id ? (0, import_editor_elements3.isElementAnchored)(target.id) || !!(0, import_editor_elements3.getAnchoredAncestorId)(target.id) : false;
+  });
+  return isTargetContainsAnAnchor;
+}
+
+// src/style-commands/paste-style.ts
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var import_editor_elements4 = require("@elementor/editor-elements");
+var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var import_i18n2 = require("@wordpress/i18n");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_i18n3 = require("@wordpress/i18n");
 
 // src/style-commands/utils.ts
-var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_props2 = require("@elementor/editor-props");
-var import_i18n = require("@wordpress/i18n");
+var import_i18n2 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
   const { containers = [args.container] } = args;
   return containers.some(isAtomicWidget);
@@ -851,7 +1014,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = (0, import_editor_elements3.getWidgetsCache)();
+  const widgetsCache = (0, import_editor_elements4.getWidgetsCache)();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -864,11 +1027,11 @@ function getClipboardElements(storageKey = "clipboard") {
   }
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? (0, import_i18n.__)("Elements", "elementor") : (0, import_editor_elements3.getElementLabel)(containers[0].id);
+  return containers.length > 1 ? (0, import_i18n2.__)("Elements", "elementor") : (0, import_editor_elements4.getElementLabel)(containers[0].id);
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var undoablePasteElementStyle = () => (0, import_editor_v1_adapters4.undoable)(
+var undoablePasteElementStyle = () => (0, import_editor_v1_adapters6.undoable)(
   {
     do: ({ containers, newStyle }) => {
       return containers.map((container) => {
@@ -877,7 +1040,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters4.undoable)(
         if (!classesProp) {
           return null;
         }
-        const originalStyles = (0, import_editor_elements4.getElementStyles)(container.id);
+        const originalStyles = (0, import_editor_elements5.getElementStyles)(container.id);
         const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
         const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
         const revertData = {
@@ -886,7 +1049,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters4.undoable)(
         };
         if (styleId) {
           newStyle.variants.forEach(({ meta, props }) => {
-            (0, import_editor_elements4.updateElementStyle)({
+            (0, import_editor_elements5.updateElementStyle)({
               elementId,
               styleId,
               meta,
@@ -896,10 +1059,10 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters4.undoable)(
         } else {
           const [firstVariant] = newStyle.variants;
           const additionalVariants = newStyle.variants.slice(1);
-          revertData.styleId = (0, import_editor_elements4.createElementStyle)({
+          revertData.styleId = (0, import_editor_elements5.createElementStyle)({
             elementId,
             classesProp,
-            label: import_editor_styles_repository2.LOCAL_STYLES_RESERVED_LABEL,
+            label: import_editor_styles_repository2.ELEMENTS_STYLES_RESERVED_LABEL,
             ...firstVariant,
             additionalVariants
           });
@@ -914,7 +1077,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters4.undoable)(
           return;
         }
         if (!revertData.originalStyle) {
-          (0, import_editor_elements4.deleteElementStyle)(container.id, revertData.styleId);
+          (0, import_editor_elements5.deleteElementStyle)(container.id, revertData.styleId);
           return;
         }
         const classesProp = getClassesProp(container);
@@ -923,10 +1086,10 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters4.undoable)(
         }
         const [firstVariant] = revertData.originalStyle.variants;
         const additionalVariants = revertData.originalStyle.variants.slice(1);
-        (0, import_editor_elements4.createElementStyle)({
+        (0, import_editor_elements5.createElementStyle)({
           elementId: container.id,
           classesProp,
-          label: import_editor_styles_repository2.LOCAL_STYLES_RESERVED_LABEL,
+          label: import_editor_styles_repository2.ELEMENTS_STYLES_RESERVED_LABEL,
           styleId: revertData.styleId,
           ...firstVariant,
           additionalVariants
@@ -936,19 +1099,19 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters4.undoable)(
   },
   {
     title: ({ containers }) => getTitleForContainers(containers),
-    subtitle: (0, import_i18n2.__)("Style Pasted", "elementor")
+    subtitle: (0, import_i18n3.__)("Style Pasted", "elementor")
   }
 );
 
 // src/style-commands/paste-style.ts
 function initPasteStyleCommand() {
   const pasteElementStyleCommand = undoablePasteElementStyle();
-  (0, import_editor_v1_adapters5.blockCommand)({
+  (0, import_editor_v1_adapters7.blockCommand)({
     command: "document/elements/paste-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters5.__privateListenTo)(
-    (0, import_editor_v1_adapters5.commandStartEvent)("document/elements/paste-style"),
+  (0, import_editor_v1_adapters7.__privateListenTo)(
+    (0, import_editor_v1_adapters7.commandStartEvent)("document/elements/paste-style"),
     (e) => pasteStyles(e.args, pasteElementStyleCommand)
   );
 }
@@ -972,21 +1135,21 @@ function pasteStyles(args, pasteCallback) {
 }
 
 // src/style-commands/reset-style.ts
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
-var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_elements6 = require("@elementor/editor-elements");
 var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_i18n3 = require("@wordpress/i18n");
-var undoableResetElementStyle = () => (0, import_editor_v1_adapters6.undoable)(
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_i18n4 = require("@wordpress/i18n");
+var undoableResetElementStyle = () => (0, import_editor_v1_adapters8.undoable)(
   {
     do: ({ containers }) => {
       return containers.map((container) => {
         const elementId = container.model.get("id");
-        const containerStyles = (0, import_editor_elements5.getElementStyles)(elementId);
+        const containerStyles = (0, import_editor_elements6.getElementStyles)(elementId);
         Object.keys(containerStyles ?? {}).forEach(
-          (styleId) => (0, import_editor_elements5.deleteElementStyle)(elementId, styleId)
+          (styleId) => (0, import_editor_elements6.deleteElementStyle)(elementId, styleId)
         );
         return containerStyles;
       });
@@ -1002,11 +1165,11 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters6.undoable)(
         Object.entries(containerStyles ?? {}).forEach(([styleId, style]) => {
           const [firstVariant] = style.variants;
           const additionalVariants = style.variants.slice(1);
-          (0, import_editor_elements5.createElementStyle)({
+          (0, import_editor_elements6.createElementStyle)({
             elementId,
             classesProp,
             styleId,
-            label: import_editor_styles_repository3.LOCAL_STYLES_RESERVED_LABEL,
+            label: import_editor_styles_repository3.ELEMENTS_STYLES_RESERVED_LABEL,
             ...firstVariant,
             additionalVariants
           });
@@ -1016,19 +1179,19 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters6.undoable)(
   },
   {
     title: ({ containers }) => getTitleForContainers(containers),
-    subtitle: (0, import_i18n3.__)("Style Reset", "elementor")
+    subtitle: (0, import_i18n4.__)("Style Reset", "elementor")
   }
 );
 
 // src/style-commands/reset-style.ts
 function initResetStyleCommand() {
   const resetElementStyles = undoableResetElementStyle();
-  (0, import_editor_v1_adapters7.blockCommand)({
+  (0, import_editor_v1_adapters9.blockCommand)({
     command: "document/elements/reset-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters7.__privateListenTo)(
-    (0, import_editor_v1_adapters7.commandStartEvent)("document/elements/reset-style"),
+  (0, import_editor_v1_adapters9.__privateListenTo)(
+    (0, import_editor_v1_adapters9.commandStartEvent)("document/elements/reset-style"),
     (e) => resetStyles(e.args, resetElementStyles)
   );
 }
@@ -1050,20 +1213,23 @@ function initStyleCommands() {
 // src/init.tsx
 function init() {
   initStyleTransformers();
-  initStylesRenderer();
   initStyleCommands();
+  initLinkInLinkPrevention();
   initLegacyViews();
   initSettingsTransformers();
   (0, import_editor.injectIntoTop)({
     id: "elements-overlays",
     component: ElementsOverlays
   });
+  (0, import_editor.injectIntoTop)({
+    id: "canvas-style-render",
+    component: StyleRenderer
+  });
 }
-
-// src/index.ts
-init();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  createTransformer,
+  init,
   settingsTransformersRegistry,
   styleTransformersRegistry
 });