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

package/dist/index.mjs

@@ -356,7 +356,7 @@ var renameClass = (oldClassName, newClassName) => {
 };
 
 // src/components/elements-overlays.tsx
-import * as React5 from "react";
+import * as React6 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 React4 from "react";
+import * as React5 from "react";
 import { useSelectedElementSettings } from "@elementor/editor-elements";
 import { booleanPropTypeUtil } from "@elementor/editor-props";
 import { Box as Box2 } from "@elementor/ui";
@@ -477,7 +477,7 @@ function useFloatingOnElement({ element, isSelected }) {
 }
 
 // src/hooks/use-grid-tracks.ts
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect5, useState as useState4 } from "react";
 import { ELEMENT_STYLE_CHANGE_EVENT } from "@elementor/editor-elements";
 import { __privateUseListenTo as useListenTo, windowEvent } from "@elementor/editor-v1-adapters";
 
@@ -514,6 +514,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;
@@ -540,6 +563,46 @@ function toPx(value) {
   return Number.isFinite(parsed) ? parsed : 0;
 }
 
+// src/hooks/use-grid-children.ts
+import { useEffect as useEffect4, useState as useState3 } from "react";
+function useGridChildren(element) {
+  const [signal, setSignal] = useState3(0);
+  useEffect4(() => {
+    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: [],
@@ -551,12 +614,13 @@ var EMPTY = {
 };
 var DEVICE_MODE_CHANGE_EVENT = "elementor/device-mode/change";
 function useGridTracks(element, rect) {
-  const [tracks, setTracks] = useState3(EMPTY);
+  const [tracks, setTracks] = useState4(EMPTY);
   const trigger = useListenTo(
     [windowEvent(ELEMENT_STYLE_CHANGE_EVENT), windowEvent(DEVICE_MODE_CHANGE_EVENT)],
     () => ({})
   );
-  useEffect4(() => {
+  const childrenTrigger = useGridChildren(element);
+  useEffect5(() => {
     const previewWindow = element?.ownerDocument?.defaultView;
     if (!element || !previewWindow) {
       setTracks(EMPTY);
@@ -568,7 +632,7 @@ function useGridTracks(element, rect) {
     return () => {
       previewWindow.cancelAnimationFrame(frame);
     };
-  }, [element, rect.width, rect.height, trigger]);
+  }, [element, rect.width, rect.height, trigger, childrenTrigger]);
   return tracks;
 }
 
@@ -578,9 +642,9 @@ import { Box, styled } from "@elementor/ui";
 import { FloatingPortal, useHover, useInteractions } from "@floating-ui/react";
 
 // src/hooks/use-bind-react-props-to-element.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 function useBindReactPropsToElement(element, getProps) {
-  useEffect5(() => {
+  useEffect6(() => {
     const el = element;
     const { events, attrs } = groupProps(getProps());
     events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
@@ -661,13 +725,12 @@ var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
 };
 
 // src/components/grid-outline/grid-outline.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 
-// src/components/grid-outline/grid-outline-cell.tsx
+// src/components/grid-outline/cell.tsx
 import * as React2 from "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",
     {
@@ -678,16 +741,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
+import * as React3 from "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,
@@ -695,17 +815,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)
   );
 }
 
@@ -722,7 +832,7 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
   if (tracks.columns.length === 0 && tracks.rows.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
     Box2,
     {
       ref: floating.setRef,
@@ -730,7 +840,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 })
   ));
 };
 
@@ -759,7 +869,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}`,
@@ -792,7 +902,7 @@ function isV4Element(dataset) {
 }
 
 // src/components/interactions-renderer.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import {
   __privateUseListenTo as useListenTo3,
   commandEndEvent,
@@ -801,15 +911,15 @@ import {
 import { Portal } from "@elementor/ui";
 
 // src/hooks/use-interactions-items.ts
-import { useEffect as useEffect7, useMemo, useState as useState4 } from "react";
+import { useEffect as useEffect8, useMemo, useState as useState5 } from "react";
 import { interactionsRepository } from "@elementor/editor-interactions";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 
 // src/hooks/use-on-mount.ts
-import { useEffect as useEffect6, useRef } from "react";
+import { useEffect as useEffect7, useRef } from "react";
 function useOnMount(cb) {
   const mounted = useRef(false);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -819,7 +929,7 @@ function useOnMount(cb) {
 
 // src/hooks/use-interactions-items.ts
 function useInteractionsItems() {
-  const [interactionItems, setInteractionItems] = useState4({});
+  const [interactionItems, setInteractionItems] = useState5({});
   const providerAndSubscribers = useMemo(() => {
     try {
       const providers = interactionsRepository.getProviders();
@@ -837,7 +947,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -898,7 +1008,7 @@ function InteractionsRenderer() {
     return null;
   }
   const interactionsData = JSON.stringify(Array.isArray(interactionItems) ? interactionItems : []);
-  return /* @__PURE__ */ React6.createElement(Portal, { container }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(Portal, { container }, /* @__PURE__ */ React7.createElement(
     "script",
     {
       type: "application/json",
@@ -914,7 +1024,7 @@ function usePortalContainer() {
 }
 
 // src/components/style-renderer.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import {
   __privateUseListenTo as useListenTo5,
   commandEndEvent as commandEndEvent3,
@@ -974,7 +1084,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef2, useState as useState5 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo4, 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";
@@ -1306,7 +1416,7 @@ function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
   const breakpoints = useBreakpoints();
-  const [styleItems, setStyleItems] = useState5({});
+  const [styleItems, setStyleItems] = useState6({});
   const styleItemsCacheRef = useRef2(/* @__PURE__ */ new Map());
   const providerAndSubscribers = useMemo4(() => {
     const createEmptyCache = () => {
@@ -1334,7 +1444,7 @@ function useStyleItems() {
       })
     );
   }, [renderStyles]);
-  useEffect8(() => {
+  useEffect9(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -1495,7 +1605,7 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(Portal2, { 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(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 })));
 }
 function usePortalContainer2() {
   return useListenTo5(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument4()?.head);
@@ -2968,7 +3078,7 @@ function createPromotionView(BaseView) {
 import { createRoot } from "react-dom/client";
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { getContainer as getContainer2, getElementLabel, getElementType as getElementType2 } from "@elementor/editor-elements";
 import {
   htmlV3PropTypeUtil as htmlV3PropTypeUtil2,
@@ -3021,14 +3131,14 @@ var ReplacementBase = class {
 };
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
-import * as React8 from "react";
-import { useCallback as useCallback2, useEffect as useEffect10, useLayoutEffect, useState as useState7 } from "react";
+import * as React9 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";
 import { autoUpdate as autoUpdate2, flip, FloatingPortal as FloatingPortal3, useFloating as useFloating2 } from "@floating-ui/react";
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
-import { useCallback, useEffect as useEffect9, useState as useState6 } from "react";
+import { useCallback, useEffect as useEffect10, useState as useState7 } from "react";
 var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
 var NAVIGATOR_SELECTOR = "#elementor-navigator";
 var EDITING_PANEL = "#elementor-panel";
@@ -3060,7 +3170,7 @@ var getInlineEditorElement = (elementWrapper, expectedTag) => {
 };
 var useOnClickOutsideIframe = (handleUnmount) => {
   const asyncUnmountInlineEditor = useCallback(() => queueMicrotask(handleUnmount), [handleUnmount]);
-  useEffect9(() => {
+  useEffect10(() => {
     EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
       (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
     );
@@ -3070,8 +3180,8 @@ var useOnClickOutsideIframe = (handleUnmount) => {
   }, []);
 };
 var useRenderToolbar = (ownerDocument, id) => {
-  const [anchor, setAnchor] = useState6(null);
-  useEffect9(() => {
+  const [anchor, setAnchor] = useState7(null);
+  useEffect10(() => {
     if (!anchor) {
       removeToolbarAnchor(ownerDocument, id);
     }
@@ -3165,10 +3275,10 @@ var CanvasInlineEditor = ({
   setValue,
   requestDestroy
 }) => {
-  const [active, setActive] = useState7(true);
-  const [editor, setEditor] = useState7(null);
+  const [active, setActive] = useState8(true);
+  const [editor, setEditor] = useState8(null);
   const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!active) {
       clearAnchor();
       requestDestroy();
@@ -3179,7 +3289,7 @@ var CanvasInlineEditor = ({
     setActive(false);
   }, []);
   useOnClickOutsideIframe(dismiss);
-  useEffect10(() => {
+  useEffect11(() => {
     const ownerDocument = contentElement.ownerDocument;
     const handleClickAway = (event) => {
       if (contentElement.contains(event.target)) {
@@ -3193,7 +3303,7 @@ var CanvasInlineEditor = ({
   if (!active) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement(ThemeProvider, null, /* @__PURE__ */ React8.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(ThemeProvider, null, /* @__PURE__ */ React9.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React9.createElement(
     InlineEditor,
     {
       onEditorCreate: setEditor,
@@ -3210,7 +3320,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,
@@ -3218,11 +3328,11 @@ var InlineEditingOverlay = ({
   id
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
-  const [overlayRefElement, setOverlayElement] = useState7(inlineEditedElement);
-  useEffect10(() => {
+  const [overlayRefElement, setOverlayElement] = useState8(inlineEditedElement);
+  useEffect11(() => {
     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 } = useFloating2({
@@ -3236,7 +3346,7 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
-  return /* @__PURE__ */ React8.createElement(FloatingPortal3, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(FloatingPortal3, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React9.createElement(
     Box3,
     {
       ref: refs.setFloating,
@@ -3246,7 +3356,7 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ React8.createElement(InlineEditorToolbar, { editor, elementId: id })
+    /* @__PURE__ */ React9.createElement(InlineEditorToolbar, { editor, elementId: id })
   ));
 };
 
@@ -3455,7 +3565,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     contentElement.innerHTML = "";
     this.editing = true;
     this.reactRoot.render(
-      /* @__PURE__ */ React9.createElement(
+      /* @__PURE__ */ React10.createElement(
         CanvasInlineEditor,
         {
           elementClasses,
@@ -4149,7 +4259,7 @@ function getElementDisplayName(container) {
 // src/mcp/tools/build-composition/tool.ts
 import { getCurrentDocument } from "@elementor/editor-documents";
 import {
-  createElement as createElement11,
+  createElement as createElement12,
   deleteElement as deleteElement2,
   getContainer as getContainer5,
   getWidgetsCache as getWidgetsCache9
@@ -4157,7 +4267,7 @@ import {
 
 // src/composition-builder/composition-builder.ts
 import {
-  createElement as createElement10,
+  createElement as createElement11,
   deleteElement,
   generateElementId as generateElementId2,
   getContainer as getContainer4,
@@ -4428,7 +4538,7 @@ var CompositionBuilder = class _CompositionBuilder {
   elementCustomCSS = {};
   rootContainers = [];
   api = {
-    createElement: createElement10,
+    createElement: createElement11,
     deleteElement,
     getWidgetsCache: getWidgetsCache8,
     generateElementId: generateElementId2,
@@ -4955,7 +5065,7 @@ var initBuildCompositionsTool = (reg) => {
       const targetContainer = getCompositionTargetContainer(documentContainer, currentDocument?.type.value);
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
-          createElement: createElement11,
+          createElement: createElement12,
           deleteElement: deleteElement2,
           getWidgetsCache: getWidgetsCache9
         });
@@ -5991,7 +6101,7 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 var GLOBAL_STYLES_IMPORTED_EVENT = "elementor/global-styles/imported";
 
 // src/components/spotlight-backdrop.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 function SpotlightBackdrop({ canvas, element, onExit, ariaLabel }) {
   const rect = useElementRect(element);
   const clipPath = element ? getRectClipPath(rect, canvas.defaultView) : void 0;
@@ -6013,7 +6123,7 @@ function SpotlightBackdrop({ canvas, element, onExit, ariaLabel }) {
       onExit();
     }
   };
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       style: backdropStyle,
@@ -6042,9 +6152,9 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-escape-on-canvas.ts
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect12 } from "react";
 function useEscapeOnCanvas(canvasDocument, onEscape) {
-  useEffect11(() => {
+  useEffect12(() => {
     if (!canvasDocument) {
       return;
     }

package/package.json

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

package/src/components/grid-outline/__tests__/grid-outline-overlay.test.tsx

@@ -122,7 +122,7 @@ describe( '<GridOutlineOverlay />', () => {
 		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'renders one <rect> per grid cell', () => {
+	it( 'renders one rect per cell when the grid has a gap', () => {
 		mockGridOutlineSetting( null );
 		jest.mocked( useGridTracks ).mockReturnValue( {
 			...NON_EMPTY_TRACKS,
@@ -139,6 +139,23 @@ describe( '<GridOutlineOverlay />', () => {
 		expect( overlay.querySelectorAll( 'rect' ) ).toHaveLength( 3 * 2 );
 	} );
 
+	it( 'renders boundary lines when the grid has no gap', () => {
+		mockGridOutlineSetting( null );
+		jest.mocked( useGridTracks ).mockReturnValue( {
+			...NON_EMPTY_TRACKS,
+			columns: [ 100, 100, 100 ],
+			rows: [ 80, 80 ],
+			columnGap: 0,
+			rowGap: 0,
+		} );
+
+		renderOverlay();
+
+		const overlay = screen.getByRole( 'presentation' );
+		// eslint-disable-next-line testing-library/no-node-access
+		expect( overlay.querySelectorAll( 'line' ).length ).toBeGreaterThan( 0 );
+	} );
+
 	it( 'mounts inside the canvas wrapper portal', () => {
 		mockGridOutlineSetting( null );