@elementor/editor-canvas 4.3.0-951 → 4.3.0-953

package/dist/index.mjs

@@ -384,12 +384,8 @@ import {
   windowEvent as windowEvent2
 } from "@elementor/editor-v1-adapters";
 
-// src/components/grid-outline/grid-outline-overlay.tsx
-import * as React6 from "react";
-import { useSelectedElementSettings } from "@elementor/editor-elements";
-import { booleanPropTypeUtil } from "@elementor/editor-props";
-import { Box as Box2 } from "@elementor/ui";
-import { FloatingPortal as FloatingPortal2 } from "@floating-ui/react";
+// src/components/grid-outline/grid-empty-cell-positioner.tsx
+import { useEffect as useEffect5 } from "react";
 
 // src/hooks/use-element-rect.ts
 import { useEffect as useEffect2, useState } from "react";
@@ -454,49 +450,8 @@ function useMutationsListener({ element, onChange }) {
   }, [element, onChange]);
 }
 
-// src/hooks/use-floating-on-element.ts
-import { useEffect as useEffect3, useState as useState2 } from "react";
-import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
-function useFloatingOnElement({ element, isSelected }) {
-  const [isOpen, setIsOpen] = useState2(false);
-  const sizeModifier = 2;
-  const { refs, floatingStyles, context } = useFloating({
-    // Must be controlled for interactions (like hover) to work.
-    open: isOpen || isSelected,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      // Match the floating element's size to the reference element.
-      size(() => {
-        return {
-          apply({ elements, rects }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width + sizeModifier}px`,
-              height: `${rects.reference.height + sizeModifier}px`
-            });
-          }
-        };
-      }),
-      // Center the floating element on the reference element.
-      offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
-    ]
-  });
-  useEffect3(() => {
-    refs.setReference(element);
-  }, [element, refs]);
-  return {
-    isVisible: isOpen || isSelected,
-    context,
-    floating: {
-      setRef: refs.setFloating,
-      ref: refs.floating,
-      styles: floatingStyles
-    }
-  };
-}
-
 // src/hooks/use-grid-tracks.ts
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 import { ELEMENT_STYLE_CHANGE_EVENT } from "@elementor/editor-elements";
 import { __privateUseListenTo as useListenTo, windowEvent } from "@elementor/editor-v1-adapters";
 
@@ -583,10 +538,10 @@ function toPx(value) {
 }
 
 // src/hooks/use-grid-children.ts
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState2 } from "react";
 function useGridChildren(element) {
-  const [signal, setSignal] = useState3(0);
-  useEffect4(() => {
+  const [signal, setSignal] = useState2(0);
+  useEffect3(() => {
     if (!element) {
       return;
     }
@@ -633,13 +588,13 @@ var EMPTY = {
 };
 var DEVICE_MODE_CHANGE_EVENT = "elementor/device-mode/change";
 function useGridTracks(element, rect) {
-  const [tracks, setTracks] = useState4(EMPTY);
+  const [tracks, setTracks] = useState3(EMPTY);
   const trigger = useListenTo(
     [windowEvent(ELEMENT_STYLE_CHANGE_EVENT), windowEvent(DEVICE_MODE_CHANGE_EVENT)],
     () => ({})
   );
   const childrenTrigger = useGridChildren(element);
-  useEffect5(() => {
+  useEffect4(() => {
     const previewWindow = element?.ownerDocument?.defaultView;
     if (!element || !previewWindow) {
       setTracks(EMPTY);
@@ -655,98 +610,6 @@ function useGridTracks(element, rect) {
   return tracks;
 }
 
-// src/components/outline-overlay.tsx
-import * as React from "react";
-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 useEffect6 } from "react";
-function useBindReactPropsToElement(element, getProps) {
-  useEffect6(() => {
-    const el = element;
-    const { events, attrs } = groupProps(getProps());
-    events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
-    attrs.forEach(([attrName, attrValue]) => el.setAttribute(attrName, attrValue));
-    return () => {
-      events.forEach(([eventName, listener]) => el.removeEventListener(eventName, listener));
-      attrs.forEach(([attrName]) => el.removeAttribute(attrName));
-    };
-  }, [getProps, element]);
-}
-function groupProps(props) {
-  const eventRegex = /^on(?=[A-Z])/;
-  return Object.entries(props).reduce(
-    (acc, [propName, propValue]) => {
-      if (!eventRegex.test(propName)) {
-        acc.attrs.push([propName, propValue]);
-        return acc;
-      }
-      const eventName = propName.replace(eventRegex, "").toLowerCase();
-      const listener = propValue;
-      acc.events.push([eventName, listener]);
-      return acc;
-    },
-    {
-      events: [],
-      attrs: []
-    }
-  );
-}
-
-// src/hooks/use-has-overlapping.ts
-var possibleOverlappingSelectors = [".e-off-canvas"];
-var useHasOverlapping = () => {
-  const preview = window.elementor?.$preview?.[0];
-  if (!preview) {
-    return false;
-  }
-  const hasOverlapping = possibleOverlappingSelectors.map((selector) => Array.from(preview?.contentWindow?.document.body.querySelectorAll(selector) ?? [])).flat().some(
-    (elem) => elem.checkVisibility({
-      opacityProperty: true,
-      visibilityProperty: true,
-      contentVisibilityAuto: true
-    })
-  );
-  return hasOverlapping;
-};
-
-// src/components/outline-overlay.tsx
-var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
-var OverlayBox = styled(Box, {
-  shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset" && prop !== "isGlobal"
-})(
-  ({ theme, isSelected, isSmallerOffset, isGlobal }) => ({
-    outline: `${isSelected ? "2px" : "1px"} solid ${isGlobal ? theme.palette.global.main : theme.palette.primary.light}`,
-    outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
-    pointerEvents: "none"
-  })
-);
-var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
-  const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
-  const { getFloatingProps, getReferenceProps } = useInteractions([useHover(context)]);
-  const hasOverlapping = useHasOverlapping();
-  useBindReactPropsToElement(element, getReferenceProps);
-  const isSmallerOffset = element.offsetHeight <= 1;
-  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
-    OverlayBox,
-    {
-      ref: floating.setRef,
-      isSelected,
-      isGlobal,
-      style: floating.styles,
-      "data-element-overlay": id,
-      role: "presentation",
-      isSmallerOffset,
-      ...getFloatingProps()
-    }
-  ));
-};
-
-// src/components/grid-outline/grid-outline.tsx
-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) {
@@ -909,6 +772,179 @@ function scanFirstEmpty(matrix, flowsByColumn) {
   return null;
 }
 
+// src/components/grid-outline/grid-empty-cell-positioner.tsx
+var CSS_VAR_ROW = "--e-grid-empty-cell-row";
+var CSS_VAR_COL = "--e-grid-empty-cell-col";
+var CSS_VAR_VISIBILITY = "--e-grid-empty-cell-visibility";
+var clearGridEmptyCellStyles = (target) => {
+  target.style.removeProperty(CSS_VAR_ROW);
+  target.style.removeProperty(CSS_VAR_COL);
+  target.style.removeProperty(CSS_VAR_VISIBILITY);
+};
+var GridEmptyCellPositioner = ({ element }) => {
+  const rect = useElementRect(element);
+  const tracks = useGridTracks(element, rect);
+  useEffect5(() => {
+    if (!element) {
+      return;
+    }
+    const firstEmpty = findFirstEmptyCell(element, tracks.columns.length, tracks.rows.length);
+    if (!firstEmpty) {
+      element.style.removeProperty(CSS_VAR_ROW);
+      element.style.removeProperty(CSS_VAR_COL);
+      element.style.setProperty(CSS_VAR_VISIBILITY, "hidden");
+      return () => clearGridEmptyCellStyles(element);
+    }
+    element.style.setProperty(CSS_VAR_ROW, String(firstEmpty.row + 1));
+    element.style.setProperty(CSS_VAR_COL, String(firstEmpty.col + 1));
+    element.style.setProperty(CSS_VAR_VISIBILITY, "visible");
+    return () => {
+      clearGridEmptyCellStyles(element);
+    };
+  }, [element, tracks]);
+  return null;
+};
+
+// src/components/grid-outline/grid-outline-overlay.tsx
+import * as React6 from "react";
+import { useSelectedElementSettings } from "@elementor/editor-elements";
+import { booleanPropTypeUtil } from "@elementor/editor-props";
+import { Box as Box2 } from "@elementor/ui";
+import { FloatingPortal as FloatingPortal2 } from "@floating-ui/react";
+
+// src/hooks/use-floating-on-element.ts
+import { useEffect as useEffect6, useState as useState4 } from "react";
+import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
+function useFloatingOnElement({ element, isSelected }) {
+  const [isOpen, setIsOpen] = useState4(false);
+  const sizeModifier = 2;
+  const { refs, floatingStyles, context } = useFloating({
+    // Must be controlled for interactions (like hover) to work.
+    open: isOpen || isSelected,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      // Match the floating element's size to the reference element.
+      size(() => {
+        return {
+          apply({ elements, rects }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width + sizeModifier}px`,
+              height: `${rects.reference.height + sizeModifier}px`
+            });
+          }
+        };
+      }),
+      // Center the floating element on the reference element.
+      offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
+    ]
+  });
+  useEffect6(() => {
+    refs.setReference(element);
+  }, [element, refs]);
+  return {
+    isVisible: isOpen || isSelected,
+    context,
+    floating: {
+      setRef: refs.setFloating,
+      ref: refs.floating,
+      styles: floatingStyles
+    }
+  };
+}
+
+// src/components/outline-overlay.tsx
+import * as React from "react";
+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 useEffect7 } from "react";
+function useBindReactPropsToElement(element, getProps) {
+  useEffect7(() => {
+    const el = element;
+    const { events, attrs } = groupProps(getProps());
+    events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
+    attrs.forEach(([attrName, attrValue]) => el.setAttribute(attrName, attrValue));
+    return () => {
+      events.forEach(([eventName, listener]) => el.removeEventListener(eventName, listener));
+      attrs.forEach(([attrName]) => el.removeAttribute(attrName));
+    };
+  }, [getProps, element]);
+}
+function groupProps(props) {
+  const eventRegex = /^on(?=[A-Z])/;
+  return Object.entries(props).reduce(
+    (acc, [propName, propValue]) => {
+      if (!eventRegex.test(propName)) {
+        acc.attrs.push([propName, propValue]);
+        return acc;
+      }
+      const eventName = propName.replace(eventRegex, "").toLowerCase();
+      const listener = propValue;
+      acc.events.push([eventName, listener]);
+      return acc;
+    },
+    {
+      events: [],
+      attrs: []
+    }
+  );
+}
+
+// src/hooks/use-has-overlapping.ts
+var possibleOverlappingSelectors = [".e-off-canvas"];
+var useHasOverlapping = () => {
+  const preview = window.elementor?.$preview?.[0];
+  if (!preview) {
+    return false;
+  }
+  const hasOverlapping = possibleOverlappingSelectors.map((selector) => Array.from(preview?.contentWindow?.document.body.querySelectorAll(selector) ?? [])).flat().some(
+    (elem) => elem.checkVisibility({
+      opacityProperty: true,
+      visibilityProperty: true,
+      contentVisibilityAuto: true
+    })
+  );
+  return hasOverlapping;
+};
+
+// src/components/outline-overlay.tsx
+var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
+var OverlayBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset" && prop !== "isGlobal"
+})(
+  ({ theme, isSelected, isSmallerOffset, isGlobal }) => ({
+    outline: `${isSelected ? "2px" : "1px"} solid ${isGlobal ? theme.palette.global.main : theme.palette.primary.light}`,
+    outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
+    pointerEvents: "none"
+  })
+);
+var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
+  const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
+  const { getFloatingProps, getReferenceProps } = useInteractions([useHover(context)]);
+  const hasOverlapping = useHasOverlapping();
+  useBindReactPropsToElement(element, getReferenceProps);
+  const isSmallerOffset = element.offsetHeight <= 1;
+  return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
+    OverlayBox,
+    {
+      ref: floating.setRef,
+      isSelected,
+      isGlobal,
+      style: floating.styles,
+      "data-element-overlay": id,
+      role: "presentation",
+      isSmallerOffset,
+      ...getFloatingProps()
+    }
+  ));
+};
+
+// src/components/grid-outline/grid-outline.tsx
+import * as React5 from "react";
+import { useMemo } from "react";
+
 // src/components/grid-outline/cell.tsx
 import * as React2 from "react";
 var FALLBACK_COLOR = "rgba(0, 0, 0, 0.12)";
@@ -1016,6 +1052,13 @@ var renderLines = (tracks, width, height) => {
     ))
   ];
 };
+var isDragActiveFromDom = (element) => {
+  return Boolean(
+    element?.querySelector(
+      ".e-dragging-over, .elementor-dragging-on-child, .elementor-draggable-over, .elementor-widget-placeholder, .elementor-sortable-placeholder"
+    )
+  );
+};
 function GridOutline({ element, tracks, width, height }) {
   const cells = useMemo(() => computeCellRects(tracks, width, height), [tracks, width, height]);
   const hasGap = tracks.columnGap > 0 || tracks.rowGap > 0;
@@ -1033,7 +1076,7 @@ function GridOutline({ element, tracks, width, height }) {
       xmlns: "http://www.w3.org/2000/svg"
     },
     hasGap ? renderCells(cells, tracks.borderColor) : renderLines(tracks, width, height)
-  ), emptyCellRect && /* @__PURE__ */ React5.createElement(FirstEmptyCell, { rect: emptyCellRect, color: tracks.borderColor }));
+  ), emptyCellRect && !isDragActiveFromDom(element) && /* @__PURE__ */ React5.createElement(FirstEmptyCell, { rect: emptyCellRect, color: tracks.borderColor }));
 }
 
 // src/components/grid-outline/grid-outline-overlay.tsx
@@ -1063,14 +1106,20 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
 
 // src/components/elements-overlays.tsx
 var ELEMENTS_DATA_ATTR = "atomic";
+var E_GRID_TYPE = "e-grid";
+var isGridElement = (element) => [element.dataset.eType, element.dataset.element_type].includes(E_GRID_TYPE);
 var overlayRegistry = [
   {
     component: OutlineOverlay,
     shouldRender: () => true
   },
+  {
+    component: GridEmptyCellPositioner,
+    shouldRender: ({ element }) => isGridElement(element)
+  },
   {
     component: GridOutlineOverlay,
-    shouldRender: ({ element, isSelected }) => isSelected && element.dataset.eType === "e-grid"
+    shouldRender: ({ element, isSelected }) => isSelected && isGridElement(element)
   }
 ];
 function ElementsOverlays() {
@@ -1128,15 +1177,15 @@ import {
 import { Portal } from "@elementor/ui";
 
 // src/hooks/use-interactions-items.ts
-import { useEffect as useEffect8, useMemo as useMemo2, useState as useState5 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo2, 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 useEffect7, useRef } from "react";
+import { useEffect as useEffect8, useRef } from "react";
 function useOnMount(cb) {
   const mounted = useRef(false);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -1164,7 +1213,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -1301,7 +1350,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-import { useEffect as useEffect9, useMemo as useMemo5, useRef as useRef2, useState as useState6 } from "react";
+import { useEffect as useEffect10, 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";
@@ -1679,7 +1728,7 @@ function useStyleItems() {
       })
     );
   }, [renderStyles]);
-  useEffect9(() => {
+  useEffect10(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -3387,13 +3436,13 @@ var ReplacementBase = class {
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 import * as React10 from "react";
-import { useCallback as useCallback2, useEffect as useEffect11, useLayoutEffect, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect12, 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 useEffect10, useState as useState7 } from "react";
+import { useCallback, useEffect as useEffect11, useState as useState7 } from "react";
 var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
 var NAVIGATOR_SELECTOR = "#elementor-navigator";
 var EDITING_PANEL = "#elementor-panel";
@@ -3425,7 +3474,7 @@ var getInlineEditorElement = (elementWrapper, expectedTag) => {
 };
 var useOnClickOutsideIframe = (handleUnmount) => {
   const asyncUnmountInlineEditor = useCallback(() => queueMicrotask(handleUnmount), [handleUnmount]);
-  useEffect10(() => {
+  useEffect11(() => {
     EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
       (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
     );
@@ -3436,7 +3485,7 @@ var useOnClickOutsideIframe = (handleUnmount) => {
 };
 var useRenderToolbar = (ownerDocument, id) => {
   const [anchor, setAnchor] = useState7(null);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!anchor) {
       removeToolbarAnchor(ownerDocument, id);
     }
@@ -3533,7 +3582,7 @@ var CanvasInlineEditor = ({
   const [active, setActive] = useState8(true);
   const [editor, setEditor] = useState8(null);
   const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!active) {
       clearAnchor();
       requestDestroy();
@@ -3544,7 +3593,7 @@ var CanvasInlineEditor = ({
     setActive(false);
   }, []);
   useOnClickOutsideIframe(dismiss);
-  useEffect11(() => {
+  useEffect12(() => {
     const ownerDocument = contentElement.ownerDocument;
     const handleClickAway = (event) => {
       if (contentElement.contains(event.target)) {
@@ -3584,7 +3633,7 @@ var InlineEditingOverlay = ({
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
   const [overlayRefElement, setOverlayElement] = useState8(inlineEditedElement);
-  useEffect11(() => {
+  useEffect12(() => {
     setOverlayElement(getInlineEditorElement(rootElement, expectedTag));
   }, [expectedTag, rootElement]);
   return overlayRefElement ? /* @__PURE__ */ React10.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
@@ -6563,9 +6612,9 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-escape-on-canvas.ts
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect13 } from "react";
 function useEscapeOnCanvas(canvasDocument, onEscape) {
-  useEffect12(() => {
+  useEffect13(() => {
     if (!canvasDocument) {
       return;
     }

package/package.json

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

package/src/components/elements-overlays.tsx

@@ -8,19 +8,27 @@ import {
 } from '@elementor/editor-v1-adapters';
 
 import type { ElementOverlayConfig } from '../types/element-overlay';
-import { GridOutlineOverlay } from './grid-outline';
+import { GridEmptyCellPositioner, GridOutlineOverlay } from './grid-outline';
 import { OutlineOverlay } from './outline-overlay';
 
 const ELEMENTS_DATA_ATTR = 'atomic';
+const E_GRID_TYPE = 'e-grid';
+
+const isGridElement = ( element: HTMLElement ): boolean =>
+	[ element.dataset.eType, element.dataset.element_type ].includes( E_GRID_TYPE );
 
 const overlayRegistry: ElementOverlayConfig[] = [
 	{
 		component: OutlineOverlay,
 		shouldRender: () => true,
 	},
+	{
+		component: GridEmptyCellPositioner,
+		shouldRender: ( { element } ) => isGridElement( element ),
+	},
 	{
 		component: GridOutlineOverlay,
-		shouldRender: ( { element, isSelected } ) => isSelected && element.dataset.eType === 'e-grid',
+		shouldRender: ( { element, isSelected } ) => isSelected && isGridElement( element ),
 	},
 ];
 

package/src/components/grid-outline/grid-empty-cell-positioner.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+
+import { useElementRect } from '../../hooks/use-element-rect';
+import { useGridTracks } from '../../hooks/use-grid-tracks';
+import type { ElementOverlayProps } from '../../types/element-overlay';
+import { findFirstEmptyCell } from '../../utils/find-first-empty-cell';
+
+const CSS_VAR_ROW = '--e-grid-empty-cell-row';
+const CSS_VAR_COL = '--e-grid-empty-cell-col';
+const CSS_VAR_VISIBILITY = '--e-grid-empty-cell-visibility';
+
+const clearGridEmptyCellStyles = ( target: HTMLElement ): void => {
+	target.style.removeProperty( CSS_VAR_ROW );
+	target.style.removeProperty( CSS_VAR_COL );
+	target.style.removeProperty( CSS_VAR_VISIBILITY );
+};
+
+export const GridEmptyCellPositioner = ( { element }: ElementOverlayProps ): null => {
+	const rect = useElementRect( element );
+	const tracks = useGridTracks( element, rect );
+
+	useEffect( () => {
+		if ( ! element ) {
+			return;
+		}
+
+		const firstEmpty = findFirstEmptyCell( element, tracks.columns.length, tracks.rows.length );
+
+		if ( ! firstEmpty ) {
+			element.style.removeProperty( CSS_VAR_ROW );
+			element.style.removeProperty( CSS_VAR_COL );
+			element.style.setProperty( CSS_VAR_VISIBILITY, 'hidden' );
+			return () => clearGridEmptyCellStyles( element );
+		}
+
+		element.style.setProperty( CSS_VAR_ROW, String( firstEmpty.row + 1 ) );
+		element.style.setProperty( CSS_VAR_COL, String( firstEmpty.col + 1 ) );
+		element.style.setProperty( CSS_VAR_VISIBILITY, 'visible' );
+
+		return () => {
+			clearGridEmptyCellStyles( element );
+		};
+	}, [ element, tracks ] );
+
+	return null;
+};