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

package/dist/index.mjs

@@ -356,7 +356,7 @@ var renameClass = (oldClassName, newClassName) => {
 };
 
 // src/components/elements-overlays.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { getElements, useSelectedElement } from "@elementor/editor-elements";
 import {
   __privateUseIsRouteActive as useIsRouteActive,
@@ -366,7 +366,7 @@ import {
 } from "@elementor/editor-v1-adapters";
 
 // src/components/grid-outline/grid-outline-overlay.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { useSelectedElementSettings } from "@elementor/editor-elements";
 import { booleanPropTypeUtil } from "@elementor/editor-props";
 import { Box as Box2 } from "@elementor/ui";
@@ -725,7 +725,170 @@ var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
 };
 
 // src/components/grid-outline/grid-outline.tsx
-import * as React4 from "react";
+import * as React5 from "react";
+import { useMemo } from "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
 import * as React2 from "react";
@@ -747,11 +910,40 @@ function Cell({ x, y, width, height, color }) {
   );
 }
 
-// src/components/grid-outline/line.tsx
+// src/components/grid-outline/first-empty-cell.tsx
 import * as React3 from "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
+import * as React4 from "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,
@@ -767,7 +959,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,
@@ -775,13 +967,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}`,
@@ -792,7 +984,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}`,
@@ -805,9 +997,15 @@ var renderLines = (tracks, width, height) => {
     ))
   ];
 };
-function GridOutline({ tracks, width, height }) {
+function GridOutline({ element, tracks, width, height }) {
+  const cells = useMemo(() => computeCellRects(tracks, width, height), [tracks, width, height]);
   const hasGap = tracks.columnGap > 0 || tracks.rowGap > 0;
-  return /* @__PURE__ */ React4.createElement(
+  const firstEmpty = 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,
@@ -815,8 +1013,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
@@ -832,7 +1030,7 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
   if (tracks.columns.length === 0 && tracks.rows.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React6.createElement(
     Box2,
     {
       ref: floating.setRef,
@@ -840,7 +1038,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 })
   ));
 };
 
@@ -869,7 +1067,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}`,
@@ -902,7 +1100,7 @@ function isV4Element(dataset) {
 }
 
 // src/components/interactions-renderer.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import {
   __privateUseListenTo as useListenTo3,
   commandEndEvent,
@@ -911,7 +1109,7 @@ import {
 import { Portal } from "@elementor/ui";
 
 // src/hooks/use-interactions-items.ts
-import { useEffect as useEffect8, useMemo, useState as useState5 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo2, useState as useState5 } from "react";
 import { interactionsRepository } from "@elementor/editor-interactions";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 
@@ -930,7 +1128,7 @@ function useOnMount(cb) {
 // src/hooks/use-interactions-items.ts
 function useInteractionsItems() {
   const [interactionItems, setInteractionItems] = useState5({});
-  const providerAndSubscribers = useMemo(() => {
+  const providerAndSubscribers = useMemo2(() => {
     try {
       const providers = interactionsRepository.getProviders();
       const mapped = providers.map((provider) => {
@@ -978,7 +1176,7 @@ function useInteractionsItems() {
       });
     });
   });
-  return useMemo(() => {
+  return useMemo2(() => {
     const result = Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items);
     return result;
   }, [interactionItems]);
@@ -1008,7 +1206,7 @@ function InteractionsRenderer() {
     return null;
   }
   const interactionsData = JSON.stringify(Array.isArray(interactionItems) ? interactionItems : []);
-  return /* @__PURE__ */ React7.createElement(Portal, { container }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(Portal, { container }, /* @__PURE__ */ React8.createElement(
     "script",
     {
       type: "application/json",
@@ -1024,7 +1222,7 @@ function usePortalContainer() {
 }
 
 // src/components/style-renderer.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import {
   __privateUseListenTo as useListenTo5,
   commandEndEvent as commandEndEvent3,
@@ -1084,7 +1282,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-import { useEffect as useEffect9, useMemo as useMemo4, useRef as useRef2, useState as useState6 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo5, useRef as useRef2, useState as useState6 } from "react";
 import { useBreakpoints } from "@elementor/editor-responsive";
 import { isClassState } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
@@ -1146,7 +1344,7 @@ function signalizedProcess(signal, steps = []) {
 }
 
 // src/hooks/use-style-prop-resolver.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
 import { enqueueFont } from "@elementor/editor-v1-adapters";
 
@@ -1276,7 +1474,7 @@ var styleTransformersRegistry = createTransformersRegistry();
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return useMemo2(() => {
+  return useMemo3(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: getStylesSchema2(),
@@ -1291,7 +1489,7 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 import { useBreakpointsMap } from "@elementor/editor-responsive";
 
 // src/renderers/create-styles-renderer.ts
@@ -1402,7 +1600,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = useBreakpointsMap();
-  return useMemo3(() => {
+  return useMemo4(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -1418,7 +1616,7 @@ function useStyleItems() {
   const breakpoints = useBreakpoints();
   const [styleItems, setStyleItems] = useState6({});
   const styleItemsCacheRef = useRef2(/* @__PURE__ */ new Map());
-  const providerAndSubscribers = useMemo4(() => {
+  const providerAndSubscribers = useMemo5(() => {
     const createEmptyCache = () => {
       return { orderedIds: [], itemsById: /* @__PURE__ */ new Map() };
     };
@@ -1459,11 +1657,11 @@ function useStyleItems() {
       await Promise.all(promises);
     });
   });
-  const breakpointSorter = useMemo4(
+  const breakpointSorter = useMemo5(
     () => createBreakpointSorter(breakpoints.map((breakpoint) => breakpoint.id)),
     [breakpoints]
   );
-  return useMemo4(
+  return useMemo5(
     () => Object.values(styleItems).sort(prioritySorter).flatMap(({ items }) => items).sort(stateSorter).sort(breakpointSorter),
     [styleItems, breakpointSorter]
   );
@@ -1605,7 +1803,7 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement(Portal2, { 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(Portal2, { 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 useListenTo5(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument4()?.head);
@@ -3082,7 +3280,7 @@ function createPromotionView(BaseView) {
 import { createRoot } from "react-dom/client";
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { getContainer as getContainer2, getElementLabel, getElementType as getElementType2 } from "@elementor/editor-elements";
 import {
   htmlV3PropTypeUtil as htmlV3PropTypeUtil2,
@@ -3135,7 +3333,7 @@ var ReplacementBase = class {
 };
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { useCallback as useCallback2, useEffect as useEffect11, useLayoutEffect, useState as useState8 } from "react";
 import { InlineEditor, InlineEditorToolbar } from "@elementor/editor-controls";
 import { Box as Box3, ThemeProvider } from "@elementor/ui";
@@ -3307,7 +3505,7 @@ var CanvasInlineEditor = ({
   if (!active) {
     return null;
   }
-  return /* @__PURE__ */ React9.createElement(ThemeProvider, null, /* @__PURE__ */ React9.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(ThemeProvider, null, /* @__PURE__ */ React10.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React10.createElement(
     InlineEditor,
     {
       onEditorCreate: setEditor,
@@ -3324,7 +3522,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,
@@ -3336,7 +3534,7 @@ var InlineEditingOverlay = ({
   useEffect11(() => {
     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 } = useFloating2({
@@ -3350,7 +3548,7 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
-  return /* @__PURE__ */ React9.createElement(FloatingPortal3, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(FloatingPortal3, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React10.createElement(
     Box3,
     {
       ref: refs.setFloating,
@@ -3360,7 +3558,7 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ React9.createElement(InlineEditorToolbar, { editor, elementId: id })
+    /* @__PURE__ */ React10.createElement(InlineEditorToolbar, { editor, elementId: id })
   ));
 };
 
@@ -3569,7 +3767,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     contentElement.innerHTML = "";
     this.editing = true;
     this.reactRoot.render(
-      /* @__PURE__ */ React10.createElement(
+      /* @__PURE__ */ React11.createElement(
         CanvasInlineEditor,
         {
           elementClasses,
@@ -4374,7 +4572,7 @@ function getElementDisplayName(container) {
 // src/mcp/tools/build-composition/tool.ts
 import { getCurrentDocument } from "@elementor/editor-documents";
 import {
-  createElement as createElement12,
+  createElement as createElement13,
   deleteElement as deleteElement2,
   getContainer as getContainer5,
   getWidgetsCache as getWidgetsCache9
@@ -4382,7 +4580,7 @@ import {
 
 // src/composition-builder/composition-builder.ts
 import {
-  createElement as createElement11,
+  createElement as createElement12,
   deleteElement,
   generateElementId as generateElementId2,
   getContainer as getContainer4,
@@ -4682,7 +4880,7 @@ var CompositionBuilder = class _CompositionBuilder {
   elementCustomCSS = {};
   rootContainers = [];
   api = {
-    createElement: createElement11,
+    createElement: createElement12,
     deleteElement,
     getWidgetsCache: getWidgetsCache8,
     generateElementId: generateElementId2,
@@ -5218,7 +5416,7 @@ var initBuildCompositionsTool = (reg) => {
       const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
-          createElement: createElement12,
+          createElement: createElement13,
           deleteElement: deleteElement2,
           getWidgetsCache: getWidgetsCache9
         });
@@ -6252,7 +6450,7 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 var GLOBAL_STYLES_IMPORTED_EVENT = "elementor/global-styles/imported";
 
 // src/components/spotlight-backdrop.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 function SpotlightBackdrop({ canvas, element, onExit, ariaLabel }) {
   const rect = useElementRect(element);
   const clipPath = element ? getRectClipPath(rect, canvas.defaultView) : void 0;
@@ -6274,7 +6472,7 @@ function SpotlightBackdrop({ canvas, element, onExit, ariaLabel }) {
       onExit();
     }
   };
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     "div",
     {
       style: backdropStyle,

package/package.json

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