@elementor/editor-canvas 0.15.4 → 0.17.0

package/dist/index.mjs

@@ -132,6 +132,151 @@ function useElementsDom() {
   );
 }
 
+// src/components/style-renderer.tsx
+import * as React3 from "react";
+import { __privateUseListenTo as useListenTo2, commandEndEvent } from "@elementor/editor-v1-adapters";
+import { Portal } from "@elementor/ui";
+
+// src/hooks/use-style-items.ts
+import { useEffect as useEffect4, useMemo as useMemo3, useState as useState2 } from "react";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { registerDataHook } from "@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
+import { useEffect as useEffect3, useRef } from "react";
+function useOnMount(cb) {
+  const mounted = useRef(false);
+  useEffect3(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      cb();
+    }
+  }, []);
+}
+
+// src/hooks/use-style-prop-resolver.ts
+import { useMemo } from "react";
+import { getStylesSchema } from "@elementor/editor-styles";
+
+// src/renderers/create-props-resolver.ts
+import {
+  isTransformable
+} from "@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 (!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 = {};
@@ -151,6 +296,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 useMemo(() => {
+    return createPropsResolver({
+      transformers: styleTransformersRegistry,
+      schema: getStylesSchema(),
+      onPropResolve: ({ key, value }) => {
+        if (key !== "font-family" || typeof value !== "string") {
+          return;
+        }
+        enqueueFont(value);
+      }
+    });
+  }, []);
+}
+
+// src/hooks/use-style-renderer.ts
+import { useMemo as useMemo2 } from "react";
+import { useBreakpointsMap } from "@elementor/editor-responsive";
+
+// src/renderers/errors.ts
+import { createError } from "@elementor/utils";
+var UnknownStyleTypeError = 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 = useBreakpointsMap();
+  return useMemo2(() => {
+    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] = useState2({});
+  const providerAndSubscribers = useMemo3(() => {
+    return stylesRepository.getProviders().map((provider) => {
+      return {
+        provider,
+        subscriber: createProviderSubscriber({
+          provider,
+          renderStyles,
+          setStyleItems
+        })
+      };
+    });
+  }, [renderStyles]);
+  useEffect4(() => {
+    const unsubscribes = providerAndSubscribers.map(
+      ({ provider, subscriber }) => provider.subscribe(subscriber)
+    );
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [providerAndSubscribers]);
+  useOnMount(() => {
+    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.get(), signal })).then((items) => {
+      setStyleItems((prev) => ({
+        ...prev,
+        [provider.key]: { 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(Portal, { container }, /* @__PURE__ */ React3.createElement(React3.Fragment, null, styleItems.map((item) => /* @__PURE__ */ React3.createElement("style", { "data-e-style-id": item.id, key: item.id }, item.value))));
+}
+function usePortalContainer() {
+  return useListenTo2(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeHead());
+}
+
 // src/settings-transformers-registry.ts
 var settingsTransformersRegistry = createTransformersRegistry();
 
@@ -215,9 +530,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;
@@ -279,20 +591,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 }) => {
@@ -347,223 +645,9 @@ function initStyleTransformers() {
   ).registerFallback(plainTransformer);
 }
 
-// src/init-styles-renderer.ts
-import { getBreakpointsMap } from "@elementor/editor-responsive";
-import { getStylesSchema } from "@elementor/editor-styles";
-import { stylesRepository } from "@elementor/editor-styles-repository";
-import { __privateListenTo as listenTo, registerDataHook, v1ReadyEvent } from "@elementor/editor-v1-adapters";
-
-// src/renderers/create-props-resolver.ts
-import {
-  isTransformable
-} from "@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 (!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
-import { createError } from "@elementor/utils";
-var UnknownStyleTypeError = 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() {
-  listenTo(v1ReadyEvent(), () => {
-    let abortController = null;
-    const resolve = createPropsResolver({
-      transformers: styleTransformersRegistry,
-      schema: getStylesSchema(),
-      onPropResolve: enqueueUsedFonts
-    });
-    const injectStyleElements = async () => {
-      const styleContainer = getStylesContainer();
-      const styles = stylesRepository.all().reverse();
-      const breakpoints = getBreakpointsMap();
-      if (abortController) {
-        abortController.abort();
-      }
-      abortController = new AbortController();
-      styleContainer.innerHTML = await renderStyles({
-        styles,
-        resolve,
-        breakpoints,
-        selectorPrefix: SELECTOR_PREFIX,
-        signal: abortController.signal
-      });
-    };
-    stylesRepository.subscribe(injectStyleElements);
-    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
 import { getWidgetsCache } from "@elementor/editor-elements";
-import { __privateListenTo, v1ReadyEvent as v1ReadyEvent2 } from "@elementor/editor-v1-adapters";
+import { __privateListenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 
 // src/renderers/create-dom-renderer.ts
 import { createArrayLoader, createEnvironment } from "@elementor/twing";
@@ -629,11 +713,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 {
@@ -667,31 +753,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;
@@ -772,7 +850,7 @@ function createTemplatedElementViewClassDeclaration({
 
 // src/legacy/init-legacy-views.ts
 function initLegacyViews() {
-  __privateListenTo(v1ReadyEvent2(), () => {
+  __privateListenTo(v1ReadyEvent(), () => {
     const config = getWidgetsCache() ?? {};
     const legacyWindow = window;
     const renderer = createDomRenderer();
@@ -786,10 +864,97 @@ function initLegacyViews() {
   });
 }
 
+// src/prevent-link-in-link-commands.ts
+import {
+  getAnchoredAncestorId,
+  getAnchoredDescendantId,
+  isElementAnchored
+} from "@elementor/editor-elements";
+import { notify } from "@elementor/editor-notifications";
+import { blockCommand } from "@elementor/editor-v1-adapters";
+import { __ } from "@wordpress/i18n";
+function initLinkInLinkPrevention() {
+  blockCommand({
+    command: "document/elements/paste",
+    condition: blockLinkInLinkPaste
+  });
+  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: __(
+      "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) {
+    notify(notification);
+  }
+  return blocked;
+}
+function blockLinkInLinkMove(args) {
+  const { containers = [args.container], target } = args;
+  const sourceElements = containers;
+  const targetElement = target;
+  const notification = {
+    type: "default",
+    message: __("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) {
+    notify(notification);
+  }
+  return isBlocked;
+}
+function shouldBlock(sourceElements, targetElements) {
+  if (!sourceElements?.length || !targetElements?.length) {
+    return false;
+  }
+  const isSourceContainsAnAnchor = sourceElements.some((src) => {
+    return src?.id ? isElementAnchored(src.id) || !!getAnchoredDescendantId(src.id) : false;
+  });
+  if (!isSourceContainsAnAnchor) {
+    return false;
+  }
+  const isTargetContainsAnAnchor = targetElements.some((target) => {
+    return target?.id ? isElementAnchored(target.id) || !!getAnchoredAncestorId(target.id) : false;
+  });
+  return isTargetContainsAnAnchor;
+}
+
 // src/style-commands/paste-style.ts
 import {
-  __privateListenTo as listenTo2,
-  blockCommand,
+  __privateListenTo as listenTo,
+  blockCommand as blockCommand2,
   commandStartEvent
 } from "@elementor/editor-v1-adapters";
 
@@ -802,12 +967,12 @@ import {
 } from "@elementor/editor-elements";
 import { LOCAL_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
 import { undoable } from "@elementor/editor-v1-adapters";
-import { __ as __2 } from "@wordpress/i18n";
+import { __ as __3 } from "@wordpress/i18n";
 
 // src/style-commands/utils.ts
 import { getElementLabel, getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
-import { __ } from "@wordpress/i18n";
+import { __ as __2 } from "@wordpress/i18n";
 function hasAtomicWidgets(args) {
   const { containers = [args.container] } = args;
   return containers.some(isAtomicWidget);
@@ -843,7 +1008,7 @@ function getClipboardElements(storageKey = "clipboard") {
   }
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? __("Elements", "elementor") : getElementLabel(containers[0].id);
+  return containers.length > 1 ? __2("Elements", "elementor") : getElementLabel(containers[0].id);
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
@@ -915,18 +1080,18 @@ var undoablePasteElementStyle = () => undoable(
   },
   {
     title: ({ containers }) => getTitleForContainers(containers),
-    subtitle: __2("Style Pasted", "elementor")
+    subtitle: __3("Style Pasted", "elementor")
   }
 );
 
 // src/style-commands/paste-style.ts
 function initPasteStyleCommand() {
   const pasteElementStyleCommand = undoablePasteElementStyle();
-  blockCommand({
+  blockCommand2({
     command: "document/elements/paste-style",
     condition: hasAtomicWidgets
   });
-  listenTo2(
+  listenTo(
     commandStartEvent("document/elements/paste-style"),
     (e) => pasteStyles(e.args, pasteElementStyleCommand)
   );
@@ -952,8 +1117,8 @@ function pasteStyles(args, pasteCallback) {
 
 // src/style-commands/reset-style.ts
 import {
-  __privateListenTo as listenTo3,
-  blockCommand as blockCommand2,
+  __privateListenTo as listenTo2,
+  blockCommand as blockCommand3,
   commandStartEvent as commandStartEvent2
 } from "@elementor/editor-v1-adapters";
 
@@ -961,7 +1126,7 @@ import {
 import { createElementStyle as createElementStyle2, deleteElementStyle as deleteElementStyle2, getElementStyles as getElementStyles2 } from "@elementor/editor-elements";
 import { LOCAL_STYLES_RESERVED_LABEL as LOCAL_STYLES_RESERVED_LABEL2 } from "@elementor/editor-styles-repository";
 import { undoable as undoable2 } from "@elementor/editor-v1-adapters";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __4 } from "@wordpress/i18n";
 var undoableResetElementStyle = () => undoable2(
   {
     do: ({ containers }) => {
@@ -999,18 +1164,18 @@ var undoableResetElementStyle = () => undoable2(
   },
   {
     title: ({ containers }) => getTitleForContainers(containers),
-    subtitle: __3("Style Reset", "elementor")
+    subtitle: __4("Style Reset", "elementor")
   }
 );
 
 // src/style-commands/reset-style.ts
 function initResetStyleCommand() {
   const resetElementStyles = undoableResetElementStyle();
-  blockCommand2({
+  blockCommand3({
     command: "document/elements/reset-style",
     condition: hasAtomicWidgets
   });
-  listenTo3(
+  listenTo2(
     commandStartEvent2("document/elements/reset-style"),
     (e) => resetStyles(e.args, resetElementStyles)
   );
@@ -1033,19 +1198,24 @@ function initStyleCommands() {
 // src/init.tsx
 function init() {
   initStyleTransformers();
-  initStylesRenderer();
   initStyleCommands();
+  initLinkInLinkPrevention();
   initLegacyViews();
   initSettingsTransformers();
   injectIntoTop({
     id: "elements-overlays",
     component: ElementsOverlays
   });
+  injectIntoTop({
+    id: "canvas-style-render",
+    component: StyleRenderer
+  });
 }
 
 // src/index.ts
 init();
 export {
+  createTransformer,
   settingsTransformersRegistry,
   styleTransformersRegistry
 };