@elementor/editor-canvas 4.2.0-927 → 4.2.0-928

package/dist/index.js

@@ -422,16 +422,16 @@ var renameClass = (oldClassName, newClassName) => {
 };
 
 // src/components/elements-overlays.tsx
-var React6 = __toESM(require("react"));
+var React7 = __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 React5 = __toESM(require("react"));
+var React6 = __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_react9 = require("@floating-ui/react");
+var import_react10 = require("@floating-ui/react");
 
 // src/hooks/use-element-rect.ts
 var import_react2 = require("react");
@@ -786,7 +786,170 @@ var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
 };
 
 // src/components/grid-outline/grid-outline.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
+var import_react9 = require("react");
+
+// src/utils/find-first-empty-cell.ts
+function findFirstEmptyCell(element, columnCount, rowCount) {
+  if (!element || columnCount === 0 || rowCount === 0) {
+    return null;
+  }
+  const previewWindow = element.ownerDocument?.defaultView;
+  if (!previewWindow) {
+    return null;
+  }
+  const containerStyle = previewWindow.getComputedStyle(element);
+  const flowsByColumn = containerStyle.gridAutoFlow.trim().startsWith("column");
+  const matrix = Array.from({ length: rowCount }, () => new Array(columnCount).fill(false));
+  const explicit = [];
+  const autoPlaced = [];
+  for (const child of Array.from(element.children)) {
+    if (!child.classList.contains("elementor-element")) {
+      continue;
+    }
+    const style = previewWindow.getComputedStyle(child);
+    if (style.display === "none") {
+      continue;
+    }
+    const col = resolvePlacement(style.gridColumnStart, style.gridColumnEnd);
+    const row = resolvePlacement(style.gridRowStart, style.gridRowEnd);
+    if (col.start !== null || row.start !== null) {
+      explicit.push({ col: col.start, colSpan: col.span, row: row.start, rowSpan: row.span });
+    } else {
+      autoPlaced.push({ colSpan: col.span, rowSpan: row.span });
+    }
+  }
+  for (const child of explicit) {
+    fillMatrix(matrix, child.col ?? 0, child.row ?? 0, child.colSpan, child.rowSpan);
+  }
+  for (const child of autoPlaced) {
+    const slot = findNextFreeSlot(matrix, child.colSpan, child.rowSpan, flowsByColumn);
+    if (slot) {
+      fillMatrix(matrix, slot.col, slot.row, child.colSpan, child.rowSpan);
+    }
+  }
+  return scanFirstEmpty(matrix, flowsByColumn);
+}
+function resolvePlacement(startRaw, endRaw) {
+  const start = parseLineValue(startRaw);
+  const end = parseLineValue(endRaw);
+  if (typeof start === "number") {
+    const zeroIndexedStart = start - 1;
+    if (typeof end === "number") {
+      return { start: zeroIndexedStart, span: Math.max(1, end - start) };
+    }
+    if (isSpan(end)) {
+      return { start: zeroIndexedStart, span: end.n };
+    }
+    return { start: zeroIndexedStart, span: 1 };
+  }
+  if (isSpan(start)) {
+    if (typeof end === "number") {
+      const zeroIndexedStart = end - 1 - start.n;
+      return { start: zeroIndexedStart >= 0 ? zeroIndexedStart : null, span: start.n };
+    }
+    return { start: null, span: start.n };
+  }
+  if (typeof end === "number") {
+    const zeroIndexedStart = end - 2;
+    return { start: zeroIndexedStart >= 0 ? zeroIndexedStart : null, span: 1 };
+  }
+  if (isSpan(end)) {
+    return { start: null, span: end.n };
+  }
+  return { start: null, span: 1 };
+}
+function parseLineValue(raw) {
+  const trimmed = raw.trim();
+  if (trimmed === "" || trimmed === "auto") {
+    return "auto";
+  }
+  const spanMatch = trimmed.match(/^span\s+(\d+)$/);
+  if (spanMatch) {
+    const n = parseInt(spanMatch[1], 10);
+    return { kind: "span", n: Math.max(1, n) };
+  }
+  const parsed = parseInt(trimmed, 10);
+  if (Number.isFinite(parsed) && parsed > 0) {
+    return parsed;
+  }
+  return "auto";
+}
+function isSpan(value) {
+  return typeof value === "object" && value !== null && "kind" in value && value.kind === "span";
+}
+function fillMatrix(matrix, col, row, colSpan, rowSpan) {
+  const rows = matrix.length;
+  const cols = rows > 0 ? matrix[0].length : 0;
+  const startRow = Math.max(0, row);
+  const startCol = Math.max(0, col);
+  const endRow = Math.min(rows, row + rowSpan);
+  const endCol = Math.min(cols, col + colSpan);
+  for (let r = startRow; r < endRow; r++) {
+    for (let c = startCol; c < endCol; c++) {
+      matrix[r][c] = true;
+    }
+  }
+}
+function findNextFreeSlot(matrix, colSpan, rowSpan, flowsByColumn) {
+  const rows = matrix.length;
+  const cols = rows > 0 ? matrix[0].length : 0;
+  const maxCol = cols - colSpan;
+  const maxRow = rows - rowSpan;
+  if (maxCol < 0 || maxRow < 0) {
+    return null;
+  }
+  if (flowsByColumn) {
+    for (let col = 0; col <= maxCol; col++) {
+      for (let row = 0; row <= maxRow; row++) {
+        if (canFit(matrix, col, row, colSpan, rowSpan)) {
+          return { row, col };
+        }
+      }
+    }
+  } else {
+    for (let row = 0; row <= maxRow; row++) {
+      for (let col = 0; col <= maxCol; col++) {
+        if (canFit(matrix, col, row, colSpan, rowSpan)) {
+          return { row, col };
+        }
+      }
+    }
+  }
+  return null;
+}
+function canFit(matrix, col, row, colSpan, rowSpan) {
+  for (let r = row; r < row + rowSpan; r++) {
+    for (let c = col; c < col + colSpan; c++) {
+      if (matrix[r][c]) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function scanFirstEmpty(matrix, flowsByColumn) {
+  const rows = matrix.length;
+  const cols = rows > 0 ? matrix[0].length : 0;
+  if (flowsByColumn) {
+    for (let col = 0; col < cols; col++) {
+      for (let row = 0; row < rows; row++) {
+        if (!matrix[row][col]) {
+          return { row, col };
+        }
+      }
+    }
+  } else {
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        if (!matrix[row][col]) {
+          return { row, col };
+        }
+      }
+    }
+  }
+  return null;
+}
 
 // src/components/grid-outline/cell.tsx
 var React2 = __toESM(require("react"));
@@ -808,11 +971,40 @@ function Cell({ x, y, width, height, color }) {
   );
 }
 
-// src/components/grid-outline/line.tsx
+// src/components/grid-outline/first-empty-cell.tsx
 var React3 = __toESM(require("react"));
+var GLYPH_SIZE = 19;
+function FirstEmptyCell({ rect, color }) {
+  const size2 = Math.min(GLYPH_SIZE, rect.width, rect.height);
+  if (size2 <= 0) {
+    return null;
+  }
+  const centerX = rect.x + rect.width / 2;
+  const centerY = rect.y + rect.height / 2;
+  return /* @__PURE__ */ React3.createElement(
+    "i",
+    {
+      className: "eicon-plus",
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        left: centerX,
+        top: centerY,
+        transform: "translate(-50%, -50%)",
+        fontSize: size2,
+        color,
+        lineHeight: 1,
+        pointerEvents: "none"
+      }
+    }
+  );
+}
+
+// src/components/grid-outline/line.tsx
+var React4 = __toESM(require("react"));
 var FALLBACK_COLOR2 = "rgba(0, 0, 0, 0.12)";
 function Line({ x1, y1, x2, y2, color }) {
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "line",
     {
       x1,
@@ -828,7 +1020,7 @@ function Line({ x1, y1, x2, y2, color }) {
 }
 
 // src/components/grid-outline/grid-outline.tsx
-var renderCells = (tracks, width, height) => computeCellRects(tracks, width, height).map((cell, i) => /* @__PURE__ */ React4.createElement(
+var renderCells = (cells, color) => cells.map((cell, i) => /* @__PURE__ */ React5.createElement(
   Cell,
   {
     key: i,
@@ -836,13 +1028,13 @@ var renderCells = (tracks, width, height) => computeCellRects(tracks, width, hei
     y: snapToHalfPixel(cell.y),
     width: Math.round(cell.width),
     height: Math.round(cell.height),
-    color: tracks.borderColor
+    color
   }
 ));
 var renderLines = (tracks, width, height) => {
   const { vertical, horizontal } = computeGridLines(tracks, width, height);
   return [
-    ...vertical.map((line, i) => /* @__PURE__ */ React4.createElement(
+    ...vertical.map((line, i) => /* @__PURE__ */ React5.createElement(
       Line,
       {
         key: `v${i}`,
@@ -853,7 +1045,7 @@ var renderLines = (tracks, width, height) => {
         color: tracks.borderColor
       }
     )),
-    ...horizontal.map((line, i) => /* @__PURE__ */ React4.createElement(
+    ...horizontal.map((line, i) => /* @__PURE__ */ React5.createElement(
       Line,
       {
         key: `h${i}`,
@@ -866,9 +1058,15 @@ var renderLines = (tracks, width, height) => {
     ))
   ];
 };
-function GridOutline({ tracks, width, height }) {
+function GridOutline({ element, tracks, width, height }) {
+  const cells = (0, import_react9.useMemo)(() => computeCellRects(tracks, width, height), [tracks, width, height]);
   const hasGap = tracks.columnGap > 0 || tracks.rowGap > 0;
-  return /* @__PURE__ */ React4.createElement(
+  const firstEmpty = (0, import_react9.useMemo)(
+    () => findFirstEmptyCell(element, tracks.columns.length, tracks.rows.length),
+    [element, tracks]
+  );
+  const emptyCellRect = firstEmpty && tracks.columns.length > 0 ? cells[firstEmpty.row * tracks.columns.length + firstEmpty.col] : null;
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
     "svg",
     {
       width,
@@ -876,8 +1074,8 @@ function GridOutline({ tracks, width, height }) {
       style: { position: "absolute", inset: 0, overflow: "visible" },
       xmlns: "http://www.w3.org/2000/svg"
     },
-    hasGap ? renderCells(tracks, width, height) : renderLines(tracks, width, height)
-  );
+    hasGap ? renderCells(cells, tracks.borderColor) : renderLines(tracks, width, height)
+  ), emptyCellRect && /* @__PURE__ */ React5.createElement(FirstEmptyCell, { rect: emptyCellRect, color: tracks.borderColor }));
 }
 
 // src/components/grid-outline/grid-outline-overlay.tsx
@@ -893,7 +1091,7 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
   if (tracks.columns.length === 0 && tracks.rows.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement(import_react9.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(import_react10.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React6.createElement(
     import_ui2.Box,
     {
       ref: floating.setRef,
@@ -901,7 +1099,7 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
       "data-grid-outline": id,
       role: "presentation"
     },
-    /* @__PURE__ */ React5.createElement(GridOutline, { tracks, width: rect.width, height: rect.height })
+    /* @__PURE__ */ React6.createElement(GridOutline, { element, tracks, width: rect.width, height: rect.height })
   ));
 };
 
@@ -930,7 +1128,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__ */ React6.createElement(
+      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected }) && /* @__PURE__ */ React7.createElement(
         Overlay,
         {
           key: `${id}-${index}`,
@@ -963,20 +1161,20 @@ function isV4Element(dataset) {
 }
 
 // src/components/interactions-renderer.tsx
-var React7 = __toESM(require("react"));
+var React8 = __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_react11 = require("react");
+var import_react12 = 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_react10 = require("react");
+var import_react11 = require("react");
 function useOnMount(cb) {
-  const mounted = (0, import_react10.useRef)(false);
-  (0, import_react10.useEffect)(() => {
+  const mounted = (0, import_react11.useRef)(false);
+  (0, import_react11.useEffect)(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -986,8 +1184,8 @@ function useOnMount(cb) {
 
 // src/hooks/use-interactions-items.ts
 function useInteractionsItems() {
-  const [interactionItems, setInteractionItems] = (0, import_react11.useState)({});
-  const providerAndSubscribers = (0, import_react11.useMemo)(() => {
+  const [interactionItems, setInteractionItems] = (0, import_react12.useState)({});
+  const providerAndSubscribers = (0, import_react12.useMemo)(() => {
     try {
       const providers = import_editor_interactions.interactionsRepository.getProviders();
       const mapped = providers.map((provider) => {
@@ -1004,7 +1202,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -1035,7 +1233,7 @@ function useInteractionsItems() {
       });
     });
   });
-  return (0, import_react11.useMemo)(() => {
+  return (0, import_react12.useMemo)(() => {
     const result = Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items);
     return result;
   }, [interactionItems]);
@@ -1065,7 +1263,7 @@ function InteractionsRenderer() {
     return null;
   }
   const interactionsData = JSON.stringify(Array.isArray(interactionItems) ? interactionItems : []);
-  return /* @__PURE__ */ React7.createElement(import_ui3.Portal, { container }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(import_ui3.Portal, { container }, /* @__PURE__ */ React8.createElement(
     "script",
     {
       type: "application/json",
@@ -1081,7 +1279,7 @@ function usePortalContainer() {
 }
 
 // src/components/style-renderer.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 var import_ui4 = require("@elementor/ui");
 
@@ -1133,7 +1331,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-var import_react14 = require("react");
+var import_react15 = 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");
@@ -1195,7 +1393,7 @@ function signalizedProcess(signal, steps = []) {
 }
 
 // src/hooks/use-style-prop-resolver.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_editor_styles2 = require("@elementor/editor-styles");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 
@@ -1323,7 +1521,7 @@ var styleTransformersRegistry = createTransformersRegistry();
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return (0, import_react12.useMemo)(() => {
+  return (0, import_react13.useMemo)(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: (0, import_editor_styles2.getStylesSchema)(),
@@ -1338,7 +1536,7 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 
 // src/renderers/create-styles-renderer.ts
@@ -1447,7 +1645,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = (0, import_editor_responsive.useBreakpointsMap)();
-  return (0, import_react13.useMemo)(() => {
+  return (0, import_react14.useMemo)(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -1461,9 +1659,9 @@ function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
   const breakpoints = (0, import_editor_responsive2.useBreakpoints)();
-  const [styleItems, setStyleItems] = (0, import_react14.useState)({});
-  const styleItemsCacheRef = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
-  const providerAndSubscribers = (0, import_react14.useMemo)(() => {
+  const [styleItems, setStyleItems] = (0, import_react15.useState)({});
+  const styleItemsCacheRef = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
+  const providerAndSubscribers = (0, import_react15.useMemo)(() => {
     const createEmptyCache = () => {
       return { orderedIds: [], itemsById: /* @__PURE__ */ new Map() };
     };
@@ -1489,7 +1687,7 @@ function useStyleItems() {
       })
     );
   }, [renderStyles]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -1504,11 +1702,11 @@ function useStyleItems() {
       await Promise.all(promises);
     });
   });
-  const breakpointSorter = (0, import_react14.useMemo)(
+  const breakpointSorter = (0, import_react15.useMemo)(
     () => createBreakpointSorter(breakpoints.map((breakpoint) => breakpoint.id)),
     [breakpoints]
   );
-  return (0, import_react14.useMemo)(
+  return (0, import_react15.useMemo)(
     () => Object.values(styleItems).sort(prioritySorter).flatMap(({ items }) => items).sort(stateSorter).sort(breakpointSorter),
     [styleItems, breakpointSorter]
   );
@@ -1650,7 +1848,7 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  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 })));
+  return /* @__PURE__ */ React9.createElement(import_ui4.Portal, { container }, filterUniqueStyleDefinitions(styleItems).map((item) => /* @__PURE__ */ React9.createElement("style", { key: `${item.id}-${item.breakpoint}-${item.state ?? "normal"}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React9.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);
@@ -3122,7 +3320,7 @@ function createPromotionView(BaseView) {
 var import_client = require("react-dom/client");
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
-var React10 = __toESM(require("react"));
+var React11 = __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");
@@ -3171,14 +3369,14 @@ var ReplacementBase = class {
 };
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
-var React9 = __toESM(require("react"));
-var import_react16 = require("react");
+var React10 = __toESM(require("react"));
+var import_react17 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_ui5 = require("@elementor/ui");
-var import_react17 = require("@floating-ui/react");
+var import_react18 = require("@floating-ui/react");
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
 var NAVIGATOR_SELECTOR = "#elementor-navigator";
 var EDITING_PANEL = "#elementor-panel";
@@ -3209,8 +3407,8 @@ var getInlineEditorElement = (elementWrapper, expectedTag) => {
   return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
 };
 var useOnClickOutsideIframe = (handleUnmount) => {
-  const asyncUnmountInlineEditor = (0, import_react15.useCallback)(() => queueMicrotask(handleUnmount), [handleUnmount]);
-  (0, import_react15.useEffect)(() => {
+  const asyncUnmountInlineEditor = (0, import_react16.useCallback)(() => queueMicrotask(handleUnmount), [handleUnmount]);
+  (0, import_react16.useEffect)(() => {
     EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
       (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
     );
@@ -3220,8 +3418,8 @@ var useOnClickOutsideIframe = (handleUnmount) => {
   }, []);
 };
 var useRenderToolbar = (ownerDocument, id) => {
-  const [anchor, setAnchor] = (0, import_react15.useState)(null);
-  (0, import_react15.useEffect)(() => {
+  const [anchor, setAnchor] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
     if (!anchor) {
       removeToolbarAnchor(ownerDocument, id);
     }
@@ -3235,7 +3433,7 @@ var useRenderToolbar = (ownerDocument, id) => {
       setAnchor(null);
     }
   };
-  const clearAnchor = (0, import_react15.useCallback)(() => {
+  const clearAnchor = (0, import_react16.useCallback)(() => {
     setAnchor(null);
   }, []);
   return { onSelectionEnd, anchor, clearAnchor };
@@ -3315,21 +3513,21 @@ var CanvasInlineEditor = ({
   setValue,
   requestDestroy
 }) => {
-  const [active, setActive] = (0, import_react16.useState)(true);
-  const [editor, setEditor] = (0, import_react16.useState)(null);
+  const [active, setActive] = (0, import_react17.useState)(true);
+  const [editor, setEditor] = (0, import_react17.useState)(null);
   const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!active) {
       clearAnchor();
       requestDestroy();
     }
   }, [active, clearAnchor, requestDestroy]);
-  const dismiss = (0, import_react16.useCallback)(() => {
+  const dismiss = (0, import_react17.useCallback)(() => {
     setEditor(null);
     setActive(false);
   }, []);
   useOnClickOutsideIframe(dismiss);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const ownerDocument = contentElement.ownerDocument;
     const handleClickAway = (event) => {
       if (contentElement.contains(event.target)) {
@@ -3343,7 +3541,7 @@ var CanvasInlineEditor = ({
   if (!active) {
     return null;
   }
-  return /* @__PURE__ */ React9.createElement(import_ui5.ThemeProvider, null, /* @__PURE__ */ React9.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(import_ui5.ThemeProvider, null, /* @__PURE__ */ React10.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React10.createElement(
     import_editor_controls2.InlineEditor,
     {
       onEditorCreate: setEditor,
@@ -3360,7 +3558,7 @@ var CanvasInlineEditor = ({
       autofocus: true,
       onSelectionEnd
     }
-  ), toolbarAnchor && editor && /* @__PURE__ */ React9.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
+  ), toolbarAnchor && editor && /* @__PURE__ */ React10.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
 };
 var InlineEditingOverlay = ({
   expectedTag,
@@ -3368,25 +3566,25 @@ var InlineEditingOverlay = ({
   id
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
-  const [overlayRefElement, setOverlayElement] = (0, import_react16.useState)(inlineEditedElement);
-  (0, import_react16.useEffect)(() => {
+  const [overlayRefElement, setOverlayElement] = (0, import_react17.useState)(inlineEditedElement);
+  (0, import_react17.useEffect)(() => {
     setOverlayElement(getInlineEditorElement(rootElement, expectedTag));
   }, [expectedTag, rootElement]);
-  return overlayRefElement ? /* @__PURE__ */ React9.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
+  return overlayRefElement ? /* @__PURE__ */ React10.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
 };
 var InlineEditingToolbar = ({ anchor, editor, id }) => {
-  const { refs, floatingStyles } = (0, import_react17.useFloating)({
+  const { refs, floatingStyles } = (0, import_react18.useFloating)({
     placement: "top",
     strategy: "fixed",
     transform: false,
-    whileElementsMounted: import_react17.autoUpdate,
-    middleware: [horizontalShifterMiddleware, (0, import_react17.flip)()]
+    whileElementsMounted: import_react18.autoUpdate,
+    middleware: [horizontalShifterMiddleware, (0, import_react18.flip)()]
   });
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
-  return /* @__PURE__ */ React9.createElement(import_react17.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(import_react18.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React10.createElement(
     import_ui5.Box,
     {
       ref: refs.setFloating,
@@ -3396,7 +3594,7 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ React9.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })
+    /* @__PURE__ */ React10.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })
   ));
 };
 
@@ -3605,7 +3803,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     contentElement.innerHTML = "";
     this.editing = true;
     this.reactRoot.render(
-      /* @__PURE__ */ React10.createElement(
+      /* @__PURE__ */ React11.createElement(
         CanvasInlineEditor,
         {
           elementClasses,
@@ -6249,7 +6447,7 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 var GLOBAL_STYLES_IMPORTED_EVENT = "elementor/global-styles/imported";
 
 // src/components/spotlight-backdrop.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 function SpotlightBackdrop({ canvas, element, onExit, ariaLabel }) {
   const rect = useElementRect(element);
   const clipPath = element ? getRectClipPath(rect, canvas.defaultView) : void 0;
@@ -6271,7 +6469,7 @@ function SpotlightBackdrop({ canvas, element, onExit, ariaLabel }) {
       onExit();
     }
   };
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     "div",
     {
       style: backdropStyle,
@@ -6296,9 +6494,9 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-escape-on-canvas.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 function useEscapeOnCanvas(canvasDocument, onEscape) {
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!canvasDocument) {
       return;
     }