@elementor/editor-canvas 3.33.0-294 → 3.33.0-296

package/dist/index.mjs

@@ -46,56 +46,60 @@ var renameClass = (oldClassName, newClassName) => {
 };
 
 // src/components/elements-overlays.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import { getElements, useSelectedElement } from "@elementor/editor-elements";
 import {
   __privateUseIsRouteActive as useIsRouteActive,
   __privateUseListenTo as useListenTo,
+  isExperimentActive,
   useEditMode,
   windowEvent
 } from "@elementor/editor-v1-adapters";
 
-// src/components/element-overlay.tsx
-import * as React from "react";
-import { Box, styled } from "@elementor/ui";
-import { FloatingPortal, useHover, useInteractions } from "@floating-ui/react";
+// src/utils/inline-editing-utils.ts
+import { getContainer, getElementType } from "@elementor/editor-elements";
+var WIDGET_PROPERTY_MAP = {
+  "e-heading": "title",
+  "e-paragraph": "paragraph"
+};
+var getHtmlPropertyName = (container) => {
+  const widgetType = container?.model?.get("widgetType") ?? container?.model?.get("elType");
+  if (!widgetType) {
+    return "";
+  }
+  if (WIDGET_PROPERTY_MAP[widgetType]) {
+    return WIDGET_PROPERTY_MAP[widgetType];
+  }
+  const propsSchema = getElementType(widgetType)?.propsSchema;
+  if (!propsSchema) {
+    return "";
+  }
+  const entry = Object.entries(propsSchema).find(([, propType]) => propType.key === "html");
+  return entry?.[0] ?? "";
+};
+var hasInlineEditableProperty = (containerId) => {
+  const container = getContainer(containerId);
+  const widgetType = container?.model?.get("widgetType") ?? container?.model?.get("elType");
+  if (!widgetType) {
+    return false;
+  }
+  return widgetType in WIDGET_PROPERTY_MAP;
+};
+var getInlineEditablePropertyName = (container) => {
+  return getHtmlPropertyName(container);
+};
 
-// src/hooks/use-bind-react-props-to-element.ts
-import { useEffect as useEffect2 } from "react";
-function useBindReactPropsToElement(element, getProps) {
-  useEffect2(() => {
-    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/components/inline-editor-overlay.tsx
+import * as React2 from "react";
+import { InlineEditor } from "@elementor/editor-controls";
+import { getContainer as getContainer2, updateElementSettings, useElementSetting } from "@elementor/editor-elements";
+import { htmlPropTypeUtil } from "@elementor/editor-props";
+import { Box as Box2 } from "@elementor/ui";
+import { debounce } from "@elementor/utils";
+import { FloatingPortal as FloatingPortal2 } from "@floating-ui/react";
 
 // src/hooks/use-floating-on-element.ts
-import { useEffect as useEffect3, useState } from "react";
+import { useEffect as useEffect2, useState } from "react";
 import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
 function useFloatingOnElement({ element, isSelected }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -121,7 +125,7 @@ function useFloatingOnElement({ element, isSelected }) {
       offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
     ]
   });
-  useEffect3(() => {
+  useEffect2(() => {
     refs.setReference(element);
   }, [element, refs]);
   return {
@@ -135,6 +139,45 @@ function useFloatingOnElement({ element, isSelected }) {
   };
 }
 
+// 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 useEffect3 } from "react";
+function useBindReactPropsToElement(element, getProps) {
+  useEffect3(() => {
+    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 = () => {
@@ -152,7 +195,7 @@ var useHasOverlapping = () => {
   return hasOverlapping;
 };
 
-// src/components/element-overlay.tsx
+// src/components/outline-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
 var OverlayBox = styled(Box, {
   shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset"
@@ -161,7 +204,7 @@ var OverlayBox = styled(Box, {
   outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
   pointerEvents: "none"
 }));
-function ElementOverlay({ element, isSelected, id }) {
+var OutlineOverlay = ({ element, isSelected, id }) => {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = useInteractions([useHover(context)]);
   const hasOverlapping = useHasOverlapping();
@@ -179,9 +222,75 @@ function ElementOverlay({ element, isSelected, id }) {
       ...getFloatingProps()
     }
   ));
-}
+};
+
+// src/components/inline-editor-overlay.tsx
+var OVERLAY_Z_INDEX = 1e3;
+var DEBOUNCE_DELAY = 100;
+var InlineEditorOverlay = ({ element, isSelected, id }) => {
+  const { floating, isVisible } = useFloatingOnElement({ element, isSelected });
+  const propertyName = React2.useMemo(() => {
+    const container = getContainer2(id);
+    return getInlineEditablePropertyName(container);
+  }, [id]);
+  const contentProp = useElementSetting(id, propertyName);
+  const value = React2.useMemo(() => htmlPropTypeUtil.extract(contentProp) || "", [contentProp]);
+  const debouncedUpdateRef = React2.useRef(null);
+  const lastValueRef = React2.useRef("");
+  React2.useEffect(() => {
+    debouncedUpdateRef.current = debounce((newValue) => {
+      const textContent = newValue.replace(/<[^>]*>/g, "").trim();
+      const valueToSave = textContent === "" ? "&nbsp;" : newValue;
+      updateElementSettings({
+        id,
+        props: {
+          [propertyName]: htmlPropTypeUtil.create(valueToSave)
+        },
+        withHistory: true
+      });
+    }, DEBOUNCE_DELAY);
+    return () => {
+      debouncedUpdateRef.current?.cancel?.();
+    };
+  }, [id, propertyName]);
+  const handleValueChange = React2.useCallback((newValue) => {
+    lastValueRef.current = newValue;
+    debouncedUpdateRef.current?.(newValue);
+  }, []);
+  React2.useEffect(() => {
+    if (!isVisible && debouncedUpdateRef.current?.pending?.()) {
+      debouncedUpdateRef.current.flush(lastValueRef.current);
+    }
+  }, [isVisible]);
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React2.createElement(
+    Box2,
+    {
+      ref: floating.setRef,
+      style: {
+        ...floating.styles,
+        zIndex: OVERLAY_Z_INDEX,
+        pointerEvents: "auto"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(InlineEditor, { value, setValue: handleValueChange })
+  ));
+};
 
 // src/components/elements-overlays.tsx
+var ELEMENTS_DATA_ATTR = "atomic";
+var overlayRegistry = [
+  {
+    component: OutlineOverlay,
+    shouldRender: () => true
+  },
+  {
+    component: InlineEditorOverlay,
+    shouldRender: ({ id, isSelected }) => isSelected && hasInlineEditableProperty(id) && isExperimentActive("v4-inline-text-editing")
+  }
+];
 function ElementsOverlays() {
   const selected = useSelectedElement();
   const elements = useElementsDom();
@@ -189,9 +298,16 @@ function ElementsOverlays() {
   const isEditMode = currentEditMode === "edit";
   const isKitRouteActive = useIsRouteActive("panel/global");
   const isActive = isEditMode && !isKitRouteActive;
-  return isActive && elements.map(([id, element]) => /* @__PURE__ */ React2.createElement(ElementOverlay, { key: id, id, element, isSelected: selected.element?.id === id }));
+  if (!isActive) {
+    return null;
+  }
+  return elements.map(([id, element]) => {
+    const isSelected = selected.element?.id === id;
+    return overlayRegistry.map(
+      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element, isSelected }) && /* @__PURE__ */ React3.createElement(Overlay, { key: `${id}-${index}`, id, element, isSelected })
+    );
+  });
 }
-var ELEMENTS_DATA_ATTR = "atomic";
 function useElementsDom() {
   return useListenTo(
     [windowEvent("elementor/editor/element-rendered"), windowEvent("elementor/editor/element-destroyed")],
@@ -202,20 +318,20 @@ function useElementsDom() {
 }
 
 // src/components/interactions-renderer.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { __privateUseListenTo as useListenTo2, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
 // src/hooks/use-interactions-items.ts
-import { useEffect as useEffect5, useMemo, useState as useState2 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo2, useState as useState2 } from "react";
 import { interactionsRepository } from "@elementor/editor-interactions";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 
 // src/hooks/use-on-mount.ts
-import { useEffect as useEffect4, useRef } from "react";
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
 function useOnMount(cb) {
-  const mounted = useRef(false);
-  useEffect4(() => {
+  const mounted = useRef2(false);
+  useEffect5(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -226,7 +342,7 @@ function useOnMount(cb) {
 // src/hooks/use-interactions-items.ts
 function useInteractionsItems() {
   const [interactionItems, setInteractionItems] = useState2({});
-  const providerAndSubscribers = useMemo(() => {
+  const providerAndSubscribers = useMemo2(() => {
     try {
       const providers = interactionsRepository.getProviders();
       const mapped = providers.map((provider) => {
@@ -243,7 +359,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -274,7 +390,7 @@ function useInteractionsItems() {
       });
     });
   });
-  return useMemo(() => {
+  return useMemo2(() => {
     const result = Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items);
     return result;
   }, [interactionItems]);
@@ -310,7 +426,7 @@ function InteractionsRenderer() {
     return null;
   }
   const interactionsData = JSON.stringify(Array.isArray(interactionItems) ? interactionItems : []);
-  return /* @__PURE__ */ React3.createElement(Portal, { container }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(Portal, { container }, /* @__PURE__ */ React4.createElement(
     "script",
     {
       type: "application/json",
@@ -326,7 +442,7 @@ function usePortalContainer() {
 }
 
 // src/components/style-renderer.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { __privateUseListenTo as useListenTo4, commandEndEvent as commandEndEvent3 } from "@elementor/editor-v1-adapters";
 import { Portal as Portal2 } from "@elementor/ui";
 
@@ -378,7 +494,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-import { useEffect as useEffect6, useMemo as useMemo4, useState as useState3 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo5, useState as useState3 } from "react";
 import { getBreakpoints } from "@elementor/editor-responsive";
 import { isClassState as isClassState2 } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
@@ -416,7 +532,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 } from "@elementor/editor-styles";
 
 // src/renderers/create-props-resolver.ts
@@ -540,7 +656,7 @@ var enqueueFont = (fontFamily, context = "preview") => {
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return useMemo2(() => {
+  return useMemo3(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: getStylesSchema(),
@@ -555,7 +671,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
@@ -659,7 +775,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = useBreakpointsMap();
-  return useMemo3(() => {
+  return useMemo4(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -673,7 +789,7 @@ function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
   const [styleItems, setStyleItems] = useState3({});
-  const providerAndSubscribers = useMemo4(() => {
+  const providerAndSubscribers = useMemo5(() => {
     return stylesRepository2.getProviders().map((provider) => {
       return {
         provider,
@@ -685,7 +801,7 @@ function useStyleItems() {
       };
     });
   }, [renderStyles]);
-  useEffect6(() => {
+  useEffect7(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -700,7 +816,7 @@ function useStyleItems() {
     });
   });
   const breakpointsOrder = getBreakpoints().map((breakpoint) => breakpoint.id);
-  return useMemo4(
+  return useMemo5(
     () => Object.values(styleItems).sort(sortByProviderPriority2).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [styleItems, breakpointsOrder.join("-")]
@@ -773,7 +889,7 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(Portal2, { container }, styleItems.map((item, i) => /* @__PURE__ */ React4.createElement("style", { key: `${item.id}-${i}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React4.createElement("link", { ...attrs, key: attrs.id })));
+  return /* @__PURE__ */ React5.createElement(Portal2, { container }, styleItems.map((item, i) => /* @__PURE__ */ React5.createElement("style", { key: `${item.id}-${i}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React5.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer2() {
   return useListenTo4(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
@@ -1620,10 +1736,10 @@ function cleanupPropType(propType) {
 
 // src/mcp/tools/build-composition/tool.ts
 import {
-  createElement as createElement5,
+  createElement as createElement6,
   deleteElement,
   generateElementId,
-  getContainer,
+  getContainer as getContainer3,
   getWidgetsCache as getWidgetsCache4
 } from "@elementor/editor-elements";
 
@@ -1632,7 +1748,7 @@ import {
   createElementStyle,
   getElementStyles,
   getWidgetsCache as getWidgetsCache3,
-  updateElementSettings,
+  updateElementSettings as updateElementSettings2,
   updateElementStyle
 } from "@elementor/editor-elements";
 import {
@@ -1733,7 +1849,7 @@ var doUpdateElementProperty = (params) => {
     );
   }
   const value = resolvePropValue(propertyValue);
-  updateElementSettings({
+  updateElementSettings2({
     id: elementId,
     props: {
       [propertyName]: value
@@ -1891,7 +2007,7 @@ var initBuildCompositionsTool = (reg) => {
       const softErrors = [];
       const rootContainers = [];
       const widgetsCache = getWidgetsCache4() || {};
-      const documentContainer = getContainer("document");
+      const documentContainer = getContainer3("document");
       try {
         const parser = new DOMParser();
         xml = parser.parseFromString(xmlStructure, "application/xml");
@@ -1906,14 +2022,14 @@ var initBuildCompositionsTool = (reg) => {
             errors.push(new Error(`Unknown widget type: ${elementTag}`));
           }
           const isContainer = elementTag === "e-flexbox" || elementTag === "e-div-block";
-          const newElement = isContainer ? createElement5({
+          const newElement = isContainer ? createElement6({
             containerId: containerElement.id,
             model: {
               elType: elementTag,
               id: generateElementId()
             },
             options: { useHistory: false }
-          }) : createElement5({
+          }) : createElement6({
             containerId: containerElement.id,
             model: {
               elType: "widget",
@@ -2177,7 +2293,7 @@ Now that you have this information, ensure you have the schema and try again.`;
 }
 
 // src/mcp/tools/get-element-config/tool.ts
-import { getContainer as getContainer2, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache5 } from "@elementor/editor-elements";
+import { getContainer as getContainer4, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache5 } from "@elementor/editor-elements";
 import { Schema as Schema3 } from "@elementor/editor-props";
 import { z as z3 } from "@elementor/schema";
 import { decodeString as decodeString2 } from "@elementor/utils";
@@ -2198,7 +2314,7 @@ var initGetElementConfigTool = (reg) => {
     schema,
     outputSchema: outputSchema3,
     handler: async ({ elementId }) => {
-      const element = getContainer2(elementId);
+      const element = getContainer4(elementId);
       if (!element) {
         throw new Error(`Element with ID ${elementId} not found.`);
       }

package/package.json

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

package/src/components/__tests__/elements-overlays.test.tsx

@@ -1,18 +1,25 @@
 import * as React from 'react';
 import { createDOMElement, createMockElement, createMockElementType, renderWithTheme } from 'test-utils';
 import { getElements, useSelectedElement } from '@elementor/editor-elements';
-import { __privateUseIsRouteActive as useIsRouteActive, useEditMode } from '@elementor/editor-v1-adapters';
-import { act, screen } from '@testing-library/react';
-
-import { CANVAS_WRAPPER_ID } from '../element-overlay';
+import {
+	__privateUseIsRouteActive as useIsRouteActive,
+	isExperimentActive,
+	useEditMode,
+} from '@elementor/editor-v1-adapters';
+import { screen, waitFor } from '@testing-library/react';
+
+import { hasInlineEditableProperty } from '../../utils/inline-editing-utils';
 import { ElementsOverlays } from '../elements-overlays';
+import { CANVAS_WRAPPER_ID } from '../outline-overlay';
 
 jest.mock( '@elementor/editor-elements' );
 jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	...jest.requireActual( '@elementor/editor-v1-adapters' ),
 	useEditMode: jest.fn(),
 	__privateUseIsRouteActive: jest.fn(),
+	isExperimentActive: jest.fn(),
 } ) );
+jest.mock( '../../utils/inline-editing-utils' );
 
 describe( '<ElementsOverlays />', () => {
 	beforeEach( () => {
@@ -23,6 +30,8 @@ describe( '<ElementsOverlays />', () => {
 
 		jest.mocked( useEditMode ).mockReturnValue( 'edit' );
 		jest.mocked( useIsRouteActive ).mockReturnValue( false );
+		jest.mocked( hasInlineEditableProperty ).mockReturnValue( false );
+		jest.mocked( isExperimentActive ).mockReturnValue( true );
 
 		jest.mocked( getElements ).mockReturnValue( [
 			createMockElement( {
@@ -68,16 +77,15 @@ describe( '<ElementsOverlays />', () => {
 		} );
 
 		// Act.
-		// eslint-disable-next-line testing-library/no-unnecessary-act
-		await act( () => renderWithTheme( <ElementsOverlays /> ) );
+		renderWithTheme( <ElementsOverlays /> );
 
 		// Assert.
-		const overlay = screen.getByRole( 'presentation' );
-
-		expect( overlay ).toHaveAttribute( 'data-element-overlay', 'atomic2' );
-
-		// eslint-disable-next-line testing-library/no-test-id-queries
-		expect( screen.getByTestId( CANVAS_WRAPPER_ID ) ).toContainElement( overlay );
+		await waitFor( () => {
+			const overlay = screen.getByRole( 'presentation' );
+			expect( overlay ).toHaveAttribute( 'data-element-overlay', 'atomic2' );
+			// eslint-disable-next-line testing-library/no-test-id-queries
+			expect( screen.getByTestId( CANVAS_WRAPPER_ID ) ).toContainElement( overlay );
+		} );
 	} );
 
 	it.each( [
@@ -128,4 +136,80 @@ describe( '<ElementsOverlays />', () => {
 		// Assert.
 		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
 	} );
+
+	it( 'should return null when editor is not in edit mode', () => {
+		// Arrange
+		jest.mocked( useEditMode ).mockReturnValue( 'preview' );
+		jest.mocked( useIsRouteActive ).mockReturnValue( false );
+		jest.mocked( useSelectedElement ).mockReturnValue( {
+			element: { id: 'atomic1', type: 'widget' },
+			elementType: createMockElementType(),
+		} );
+
+		// Act
+		const { container } = renderWithTheme( <ElementsOverlays /> );
+
+		// Assert
+		expect( container ).toBeEmptyDOMElement();
+		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should return null when panel/global route is active', () => {
+		// Arrange
+		jest.mocked( useEditMode ).mockReturnValue( 'edit' );
+		jest.mocked( useIsRouteActive ).mockReturnValue( true );
+		jest.mocked( useSelectedElement ).mockReturnValue( {
+			element: { id: 'atomic1', type: 'widget' },
+			elementType: createMockElementType(),
+		} );
+
+		// Act
+		const { container } = renderWithTheme( <ElementsOverlays /> );
+
+		// Assert
+		expect( container ).toBeEmptyDOMElement();
+		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should render OutlineOverlay for atomic elements', async () => {
+		// Arrange
+		jest.mocked( useSelectedElement ).mockReturnValue( {
+			element: { id: 'atomic1', type: 'widget' },
+			elementType: createMockElementType(),
+		} );
+
+		// Act
+		renderWithTheme( <ElementsOverlays /> );
+
+		// Assert
+		const overlay = await screen.findByRole( 'presentation' );
+		expect( overlay ).toBeInTheDocument();
+		expect( overlay ).toHaveAttribute( 'data-element-overlay', 'atomic1' );
+	} );
+
+	it( 'should render InlineEditorOverlay only for selected elements that support inline editing', async () => {
+		// Arrange
+		const headingEl = createDOMElement( { tag: 'div', attrs: { 'data-atomic': '', id: '50' } } );
+
+		jest.mocked( getElements ).mockReturnValue( [
+			createMockElement( {
+				model: { id: 'heading-element' },
+				view: { el: headingEl, getDomElement: () => ( { get: () => headingEl } ) },
+			} ),
+		] );
+
+		jest.mocked( useSelectedElement ).mockReturnValue( {
+			element: { id: 'heading-element', type: 'widget' },
+			elementType: createMockElementType(),
+		} );
+
+		// Act
+		renderWithTheme( <ElementsOverlays /> );
+
+		// Assert
+		await waitFor( () => {
+			const overlay = screen.getByRole( 'presentation' );
+			expect( overlay ).toHaveAttribute( 'data-element-overlay', 'heading-element' );
+		} );
+	} );
 } );