@elementor/editor-canvas 4.2.0-913 → 4.2.0-915

package/dist/index.js

@@ -422,16 +422,16 @@ var renameClass = (oldClassName, newClassName) => {
 };
 
 // src/components/elements-overlays.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 
 // src/components/grid-outline/grid-outline-overlay.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_props2 = require("@elementor/editor-props");
 var import_ui2 = require("@elementor/ui");
-var import_react8 = require("@floating-ui/react");
+var import_react9 = require("@floating-ui/react");
 
 // src/hooks/use-element-rect.ts
 var import_react2 = require("react");
@@ -538,7 +538,7 @@ function useFloatingOnElement({ element, isSelected }) {
 }
 
 // src/hooks/use-grid-tracks.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_editor_elements3 = require("@elementor/editor-elements");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
@@ -575,6 +575,29 @@ function computeCellRects(tracks, width, height) {
   }
   return cells;
 }
+function computeGridLines(tracks, width, height) {
+  const { columns, rows, columnGap, rowGap, padding } = tracks;
+  const hasColumns = columns.length > 0;
+  const hasRows = rows.length > 0;
+  if (!hasColumns && !hasRows) {
+    return { vertical: [], horizontal: [] };
+  }
+  const columnSegments = hasColumns ? computeTrackSegments(columns, columnGap, padding.left) : [{ start: padding.left, size: width - padding.left - padding.right }];
+  const rowSegments = hasRows ? computeTrackSegments(rows, rowGap, padding.top) : [{ start: padding.top, size: height - padding.top - padding.bottom }];
+  const xs = uniqueSorted(columnSegments.flatMap((s) => [s.start, s.start + s.size]));
+  const ys = uniqueSorted(rowSegments.flatMap((s) => [s.start, s.start + s.size]));
+  const yTop = ys[0];
+  const yBottom = ys[ys.length - 1];
+  const xLeft = xs[0];
+  const xRight = xs[xs.length - 1];
+  return {
+    vertical: xs.map((x) => ({ x1: x, y1: yTop, x2: x, y2: yBottom })),
+    horizontal: ys.map((y) => ({ x1: xLeft, y1: y, x2: xRight, y2: y }))
+  };
+}
+function uniqueSorted(values) {
+  return Array.from(new Set(values)).sort((a, b) => a - b);
+}
 function computeTrackSegments(sizes, gap, offset2) {
   const segments = [];
   let cursor = offset2;
@@ -601,6 +624,46 @@ function toPx(value) {
   return Number.isFinite(parsed) ? parsed : 0;
 }
 
+// src/hooks/use-grid-children.ts
+var import_react5 = require("react");
+function useGridChildren(element) {
+  const [signal, setSignal] = (0, import_react5.useState)(0);
+  (0, import_react5.useEffect)(() => {
+    if (!element) {
+      return;
+    }
+    const bump = () => setSignal((previous) => previous + 1);
+    const resizeObserver = new ResizeObserver(bump);
+    const observed = /* @__PURE__ */ new Set();
+    const syncChildren = () => {
+      for (const child of Array.from(element.children)) {
+        if (!observed.has(child)) {
+          resizeObserver.observe(child);
+          observed.add(child);
+        }
+      }
+      for (const child of observed) {
+        if (child.parentElement !== element) {
+          resizeObserver.unobserve(child);
+          observed.delete(child);
+        }
+      }
+    };
+    syncChildren();
+    const mutationObserver = new MutationObserver(() => {
+      syncChildren();
+      bump();
+    });
+    mutationObserver.observe(element, { childList: true });
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      observed.clear();
+    };
+  }, [element]);
+  return signal;
+}
+
 // src/hooks/use-grid-tracks.ts
 var EMPTY = {
   columns: [],
@@ -612,12 +675,13 @@ var EMPTY = {
 };
 var DEVICE_MODE_CHANGE_EVENT = "elementor/device-mode/change";
 function useGridTracks(element, rect) {
-  const [tracks, setTracks] = (0, import_react5.useState)(EMPTY);
+  const [tracks, setTracks] = (0, import_react6.useState)(EMPTY);
   const trigger = (0, import_editor_v1_adapters2.__privateUseListenTo)(
     [(0, import_editor_v1_adapters2.windowEvent)(import_editor_elements3.ELEMENT_STYLE_CHANGE_EVENT), (0, import_editor_v1_adapters2.windowEvent)(DEVICE_MODE_CHANGE_EVENT)],
     () => ({})
   );
-  (0, import_react5.useEffect)(() => {
+  const childrenTrigger = useGridChildren(element);
+  (0, import_react6.useEffect)(() => {
     const previewWindow = element?.ownerDocument?.defaultView;
     if (!element || !previewWindow) {
       setTracks(EMPTY);
@@ -629,19 +693,19 @@ function useGridTracks(element, rect) {
     return () => {
       previewWindow.cancelAnimationFrame(frame);
     };
-  }, [element, rect.width, rect.height, trigger]);
+  }, [element, rect.width, rect.height, trigger, childrenTrigger]);
   return tracks;
 }
 
 // src/components/outline-overlay.tsx
 var React = __toESM(require("react"));
 var import_ui = require("@elementor/ui");
-var import_react7 = require("@floating-ui/react");
+var import_react8 = require("@floating-ui/react");
 
 // src/hooks/use-bind-react-props-to-element.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useBindReactPropsToElement(element, getProps) {
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const el = element;
     const { events, attrs } = groupProps(getProps());
     events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
@@ -702,11 +766,11 @@ var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
 );
 var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
-  const { getFloatingProps, getReferenceProps } = (0, import_react7.useInteractions)([(0, import_react7.useHover)(context)]);
+  const { getFloatingProps, getReferenceProps } = (0, import_react8.useInteractions)([(0, import_react8.useHover)(context)]);
   const hasOverlapping = useHasOverlapping();
   useBindReactPropsToElement(element, getReferenceProps);
   const isSmallerOffset = element.offsetHeight <= 1;
-  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(import_react7.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
+  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(import_react8.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
       ref: floating.setRef,
@@ -722,13 +786,12 @@ var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
 };
 
 // src/components/grid-outline/grid-outline.tsx
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 
-// src/components/grid-outline/grid-outline-cell.tsx
+// src/components/grid-outline/cell.tsx
 var React2 = __toESM(require("react"));
 var FALLBACK_COLOR = "rgba(0, 0, 0, 0.12)";
-var DASH = "2 2";
-function GridOutlineCell({ x, y, width, height, color }) {
+function Cell({ x, y, width, height, color }) {
   return /* @__PURE__ */ React2.createElement(
     "rect",
     {
@@ -739,16 +802,73 @@ function GridOutlineCell({ x, y, width, height, color }) {
       fill: "none",
       stroke: color || FALLBACK_COLOR,
       strokeWidth: 1,
-      strokeDasharray: DASH,
+      strokeDasharray: "2 2",
+      vectorEffect: "non-scaling-stroke"
+    }
+  );
+}
+
+// src/components/grid-outline/line.tsx
+var React3 = __toESM(require("react"));
+var FALLBACK_COLOR2 = "rgba(0, 0, 0, 0.12)";
+function Line({ x1, y1, x2, y2, color }) {
+  return /* @__PURE__ */ React3.createElement(
+    "line",
+    {
+      x1,
+      y1,
+      x2,
+      y2,
+      stroke: color || FALLBACK_COLOR2,
+      strokeWidth: 1,
+      strokeDasharray: "2 2",
       vectorEffect: "non-scaling-stroke"
     }
   );
 }
 
 // src/components/grid-outline/grid-outline.tsx
+var renderCells = (tracks, width, height) => computeCellRects(tracks, width, height).map((cell, i) => /* @__PURE__ */ React4.createElement(
+  Cell,
+  {
+    key: i,
+    x: snapToHalfPixel(cell.x),
+    y: snapToHalfPixel(cell.y),
+    width: Math.round(cell.width),
+    height: Math.round(cell.height),
+    color: tracks.borderColor
+  }
+));
+var renderLines = (tracks, width, height) => {
+  const { vertical, horizontal } = computeGridLines(tracks, width, height);
+  return [
+    ...vertical.map((line, i) => /* @__PURE__ */ React4.createElement(
+      Line,
+      {
+        key: `v${i}`,
+        x1: snapToHalfPixel(line.x1),
+        y1: Math.round(line.y1),
+        x2: snapToHalfPixel(line.x2),
+        y2: Math.round(line.y2),
+        color: tracks.borderColor
+      }
+    )),
+    ...horizontal.map((line, i) => /* @__PURE__ */ React4.createElement(
+      Line,
+      {
+        key: `h${i}`,
+        x1: Math.round(line.x1),
+        y1: snapToHalfPixel(line.y1),
+        x2: Math.round(line.x2),
+        y2: snapToHalfPixel(line.y2),
+        color: tracks.borderColor
+      }
+    ))
+  ];
+};
 function GridOutline({ tracks, width, height }) {
-  const cells = computeCellRects(tracks, width, height);
-  return /* @__PURE__ */ React3.createElement(
+  const hasGap = tracks.columnGap > 0 || tracks.rowGap > 0;
+  return /* @__PURE__ */ React4.createElement(
     "svg",
     {
       width,
@@ -756,17 +876,7 @@ function GridOutline({ tracks, width, height }) {
       style: { position: "absolute", inset: 0, overflow: "visible" },
       xmlns: "http://www.w3.org/2000/svg"
     },
-    cells.map((cell, i) => /* @__PURE__ */ React3.createElement(
-      GridOutlineCell,
-      {
-        key: i,
-        x: snapToHalfPixel(cell.x),
-        y: snapToHalfPixel(cell.y),
-        width: Math.round(cell.width),
-        height: Math.round(cell.height),
-        color: tracks.borderColor
-      }
-    ))
+    hasGap ? renderCells(tracks, width, height) : renderLines(tracks, width, height)
   );
 }
 
@@ -783,7 +893,7 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
   if (tracks.columns.length === 0 && tracks.rows.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(import_react8.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(import_react9.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
     import_ui2.Box,
     {
       ref: floating.setRef,
@@ -791,7 +901,7 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
       "data-grid-outline": id,
       role: "presentation"
     },
-    /* @__PURE__ */ React4.createElement(GridOutline, { tracks, width: rect.width, height: rect.height })
+    /* @__PURE__ */ React5.createElement(GridOutline, { tracks, width: rect.width, height: rect.height })
   ));
 };
 
@@ -820,7 +930,7 @@ function ElementsOverlays() {
   return elements.map(({ id, domElement, isGlobal }) => {
     const isSelected = selected.element?.id === id;
     return overlayRegistry.map(
-      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected }) && /* @__PURE__ */ React5.createElement(
+      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected }) && /* @__PURE__ */ React6.createElement(
         Overlay,
         {
           key: `${id}-${index}`,
@@ -853,20 +963,20 @@ function isV4Element(dataset) {
 }
 
 // src/components/interactions-renderer.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_ui3 = require("@elementor/ui");
 
 // src/hooks/use-interactions-items.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_editor_interactions = require("@elementor/editor-interactions");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 
 // src/hooks/use-on-mount.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useOnMount(cb) {
-  const mounted = (0, import_react9.useRef)(false);
-  (0, import_react9.useEffect)(() => {
+  const mounted = (0, import_react10.useRef)(false);
+  (0, import_react10.useEffect)(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -876,8 +986,8 @@ function useOnMount(cb) {
 
 // src/hooks/use-interactions-items.ts
 function useInteractionsItems() {
-  const [interactionItems, setInteractionItems] = (0, import_react10.useState)({});
-  const providerAndSubscribers = (0, import_react10.useMemo)(() => {
+  const [interactionItems, setInteractionItems] = (0, import_react11.useState)({});
+  const providerAndSubscribers = (0, import_react11.useMemo)(() => {
     try {
       const providers = import_editor_interactions.interactionsRepository.getProviders();
       const mapped = providers.map((provider) => {
@@ -894,7 +1004,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -925,7 +1035,7 @@ function useInteractionsItems() {
       });
     });
   });
-  return (0, import_react10.useMemo)(() => {
+  return (0, import_react11.useMemo)(() => {
     const result = Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items);
     return result;
   }, [interactionItems]);
@@ -955,7 +1065,7 @@ function InteractionsRenderer() {
     return null;
   }
   const interactionsData = JSON.stringify(Array.isArray(interactionItems) ? interactionItems : []);
-  return /* @__PURE__ */ React6.createElement(import_ui3.Portal, { container }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(import_ui3.Portal, { container }, /* @__PURE__ */ React7.createElement(
     "script",
     {
       type: "application/json",
@@ -971,7 +1081,7 @@ function usePortalContainer() {
 }
 
 // src/components/style-renderer.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 var import_ui4 = require("@elementor/ui");
 
@@ -1023,7 +1133,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_editor_styles4 = require("@elementor/editor-styles");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
@@ -1085,7 +1195,7 @@ function signalizedProcess(signal, steps = []) {
 }
 
 // src/hooks/use-style-prop-resolver.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_editor_styles2 = require("@elementor/editor-styles");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 
@@ -1213,7 +1323,7 @@ var styleTransformersRegistry = createTransformersRegistry();
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return (0, import_react11.useMemo)(() => {
+  return (0, import_react12.useMemo)(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: (0, import_editor_styles2.getStylesSchema)(),
@@ -1228,7 +1338,7 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 
 // src/renderers/create-styles-renderer.ts
@@ -1337,7 +1447,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = (0, import_editor_responsive.useBreakpointsMap)();
-  return (0, import_react12.useMemo)(() => {
+  return (0, import_react13.useMemo)(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -1351,9 +1461,9 @@ function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
   const breakpoints = (0, import_editor_responsive2.useBreakpoints)();
-  const [styleItems, setStyleItems] = (0, import_react13.useState)({});
-  const styleItemsCacheRef = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
-  const providerAndSubscribers = (0, import_react13.useMemo)(() => {
+  const [styleItems, setStyleItems] = (0, import_react14.useState)({});
+  const styleItemsCacheRef = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
+  const providerAndSubscribers = (0, import_react14.useMemo)(() => {
     const createEmptyCache = () => {
       return { orderedIds: [], itemsById: /* @__PURE__ */ new Map() };
     };
@@ -1379,7 +1489,7 @@ function useStyleItems() {
       })
     );
   }, [renderStyles]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -1394,11 +1504,11 @@ function useStyleItems() {
       await Promise.all(promises);
     });
   });
-  const breakpointSorter = (0, import_react13.useMemo)(
+  const breakpointSorter = (0, import_react14.useMemo)(
     () => createBreakpointSorter(breakpoints.map((breakpoint) => breakpoint.id)),
     [breakpoints]
   );
-  return (0, import_react13.useMemo)(
+  return (0, import_react14.useMemo)(
     () => Object.values(styleItems).sort(prioritySorter).flatMap(({ items }) => items).sort(stateSorter).sort(breakpointSorter),
     [styleItems, breakpointSorter]
   );
@@ -1540,7 +1650,7 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(import_ui4.Portal, { container }, filterUniqueStyleDefinitions(styleItems).map((item) => /* @__PURE__ */ React7.createElement("style", { key: `${item.id}-${item.breakpoint}-${item.state ?? "normal"}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React7.createElement("link", { ...attrs, key: attrs.id })));
+  return /* @__PURE__ */ React8.createElement(import_ui4.Portal, { container }, filterUniqueStyleDefinitions(styleItems).map((item) => /* @__PURE__ */ React8.createElement("style", { key: `${item.id}-${item.breakpoint}-${item.state ?? "normal"}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React8.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer2() {
   return (0, import_editor_v1_adapters10.__privateUseListenTo)((0, import_editor_v1_adapters10.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters10.getCanvasIframeDocument)()?.head);
@@ -3008,7 +3118,7 @@ function createPromotionView(BaseView) {
 var import_client = require("react-dom/client");
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_props5 = require("@elementor/editor-props");
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
@@ -3057,14 +3167,14 @@ var ReplacementBase = class {
 };
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
-var React8 = __toESM(require("react"));
-var import_react15 = require("react");
+var React9 = __toESM(require("react"));
+var import_react16 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_ui5 = require("@elementor/ui");
-var import_react16 = require("@floating-ui/react");
+var import_react17 = require("@floating-ui/react");
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
 var NAVIGATOR_SELECTOR = "#elementor-navigator";
 var EDITING_PANEL = "#elementor-panel";
@@ -3095,8 +3205,8 @@ var getInlineEditorElement = (elementWrapper, expectedTag) => {
   return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
 };
 var useOnClickOutsideIframe = (handleUnmount) => {
-  const asyncUnmountInlineEditor = (0, import_react14.useCallback)(() => queueMicrotask(handleUnmount), [handleUnmount]);
-  (0, import_react14.useEffect)(() => {
+  const asyncUnmountInlineEditor = (0, import_react15.useCallback)(() => queueMicrotask(handleUnmount), [handleUnmount]);
+  (0, import_react15.useEffect)(() => {
     EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
       (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
     );
@@ -3106,8 +3216,8 @@ var useOnClickOutsideIframe = (handleUnmount) => {
   }, []);
 };
 var useRenderToolbar = (ownerDocument, id) => {
-  const [anchor, setAnchor] = (0, import_react14.useState)(null);
-  (0, import_react14.useEffect)(() => {
+  const [anchor, setAnchor] = (0, import_react15.useState)(null);
+  (0, import_react15.useEffect)(() => {
     if (!anchor) {
       removeToolbarAnchor(ownerDocument, id);
     }
@@ -3121,7 +3231,7 @@ var useRenderToolbar = (ownerDocument, id) => {
       setAnchor(null);
     }
   };
-  const clearAnchor = (0, import_react14.useCallback)(() => {
+  const clearAnchor = (0, import_react15.useCallback)(() => {
     setAnchor(null);
   }, []);
   return { onSelectionEnd, anchor, clearAnchor };
@@ -3201,21 +3311,21 @@ var CanvasInlineEditor = ({
   setValue,
   requestDestroy
 }) => {
-  const [active, setActive] = (0, import_react15.useState)(true);
-  const [editor, setEditor] = (0, import_react15.useState)(null);
+  const [active, setActive] = (0, import_react16.useState)(true);
+  const [editor, setEditor] = (0, import_react16.useState)(null);
   const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!active) {
       clearAnchor();
       requestDestroy();
     }
   }, [active, clearAnchor, requestDestroy]);
-  const dismiss = (0, import_react15.useCallback)(() => {
+  const dismiss = (0, import_react16.useCallback)(() => {
     setEditor(null);
     setActive(false);
   }, []);
   useOnClickOutsideIframe(dismiss);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const ownerDocument = contentElement.ownerDocument;
     const handleClickAway = (event) => {
       if (contentElement.contains(event.target)) {
@@ -3229,7 +3339,7 @@ var CanvasInlineEditor = ({
   if (!active) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement(import_ui5.ThemeProvider, null, /* @__PURE__ */ React8.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(import_ui5.ThemeProvider, null, /* @__PURE__ */ React9.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React9.createElement(
     import_editor_controls2.InlineEditor,
     {
       onEditorCreate: setEditor,
@@ -3246,7 +3356,7 @@ var CanvasInlineEditor = ({
       autofocus: true,
       onSelectionEnd
     }
-  ), toolbarAnchor && editor && /* @__PURE__ */ React8.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
+  ), toolbarAnchor && editor && /* @__PURE__ */ React9.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
 };
 var InlineEditingOverlay = ({
   expectedTag,
@@ -3254,25 +3364,25 @@ var InlineEditingOverlay = ({
   id
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
-  const [overlayRefElement, setOverlayElement] = (0, import_react15.useState)(inlineEditedElement);
-  (0, import_react15.useEffect)(() => {
+  const [overlayRefElement, setOverlayElement] = (0, import_react16.useState)(inlineEditedElement);
+  (0, import_react16.useEffect)(() => {
     setOverlayElement(getInlineEditorElement(rootElement, expectedTag));
   }, [expectedTag, rootElement]);
-  return overlayRefElement ? /* @__PURE__ */ React8.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
+  return overlayRefElement ? /* @__PURE__ */ React9.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
 };
 var InlineEditingToolbar = ({ anchor, editor, id }) => {
-  const { refs, floatingStyles } = (0, import_react16.useFloating)({
+  const { refs, floatingStyles } = (0, import_react17.useFloating)({
     placement: "top",
     strategy: "fixed",
     transform: false,
-    whileElementsMounted: import_react16.autoUpdate,
-    middleware: [horizontalShifterMiddleware, (0, import_react16.flip)()]
+    whileElementsMounted: import_react17.autoUpdate,
+    middleware: [horizontalShifterMiddleware, (0, import_react17.flip)()]
   });
-  (0, import_react15.useLayoutEffect)(() => {
+  (0, import_react16.useLayoutEffect)(() => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
-  return /* @__PURE__ */ React8.createElement(import_react16.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(import_react17.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React9.createElement(
     import_ui5.Box,
     {
       ref: refs.setFloating,
@@ -3282,7 +3392,7 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ React8.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })
+    /* @__PURE__ */ React9.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })
   ));
 };
 
@@ -3491,7 +3601,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     contentElement.innerHTML = "";
     this.editing = true;
     this.reactRoot.render(
-      /* @__PURE__ */ React9.createElement(
+      /* @__PURE__ */ React10.createElement(
         CanvasInlineEditor,
         {
           elementClasses,
@@ -5988,7 +6098,7 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 var GLOBAL_STYLES_IMPORTED_EVENT = "elementor/global-styles/imported";
 
 // src/components/spotlight-backdrop.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 function SpotlightBackdrop({ canvas, element, onExit, ariaLabel }) {
   const rect = useElementRect(element);
   const clipPath = element ? getRectClipPath(rect, canvas.defaultView) : void 0;
@@ -6010,7 +6120,7 @@ function SpotlightBackdrop({ canvas, element, onExit, ariaLabel }) {
       onExit();
     }
   };
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       style: backdropStyle,
@@ -6035,9 +6145,9 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-escape-on-canvas.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 function useEscapeOnCanvas(canvasDocument, onEscape) {
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!canvasDocument) {
       return;
     }