@elementor/editor-canvas 3.35.0-367 → 3.35.0-368

package/dist/index.js

@@ -1799,30 +1799,40 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return import_editor_props3.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props3.stringPropTypeUtil.extract(propsSchema.tag.default ?? null) ?? null;
   }
   renderInlineEditor() {
-    const propValue = this.getContentValue();
+    const InlineEditorApp = this.InlineEditorApp;
     const classes = (this.element.children?.[0]?.classList.toString() ?? "") + " strip-styles";
-    const expectedTag = this.getExpectedTag();
     this.element.innerHTML = "";
     if (this.inlineEditorRoot) {
       this.resetInlineEditorRoot();
     }
     this.inlineEditorRoot = (0, import_client.createRoot)(this.element);
-    this.inlineEditorRoot.render(
-      /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(
-        import_editor_controls2.InlineEditor,
-        {
-          attributes: { class: classes },
-          value: propValue,
-          setValue: this.setContentValue.bind(this),
-          onBlur: this.handleUnmountInlineEditor.bind(this),
-          autofocus: true,
-          showToolbar: true,
-          getInitialPopoverPosition,
-          expectedTag
-        }
-      ))
-    );
+    this.inlineEditorRoot.render(/* @__PURE__ */ React5.createElement(InlineEditorApp, { classes }));
   }
+  InlineEditorApp = ({ classes }) => {
+    const propValue = this.getContentValue();
+    const expectedTag = this.getExpectedTag();
+    const wrapperRef = React5.useRef(null);
+    const [isWrapperRendered, setIsWrapperRendered] = React5.useState(false);
+    React5.useEffect(() => {
+      setIsWrapperRendered(!!wrapperRef.current);
+    }, []);
+    return /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(import_ui4.Box, { ref: wrapperRef }, isWrapperRendered && /* @__PURE__ */ React5.createElement(OutlineOverlay, { element: wrapperRef.current, id: this.id, isSelected: true }), /* @__PURE__ */ React5.createElement(
+      import_editor_controls2.InlineEditor,
+      {
+        attributes: {
+          class: classes,
+          style: "outline: none;"
+        },
+        value: propValue,
+        setValue: this.setContentValue.bind(this),
+        onBlur: this.handleUnmountInlineEditor.bind(this),
+        autofocus: true,
+        showToolbar: true,
+        getInitialPopoverPosition,
+        expectedTag
+      }
+    )));
+  };
 };
 
 // src/legacy/replacements/manager.ts

package/dist/index.mjs

@@ -1627,7 +1627,7 @@ import {
   stringPropTypeUtil
 } from "@elementor/editor-props";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
-import { ThemeProvider } from "@elementor/ui";
+import { Box as Box2, ThemeProvider } from "@elementor/ui";
 
 // src/legacy/replacements/base.ts
 var ReplacementBase = class {
@@ -1761,30 +1761,40 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? stringPropTypeUtil.extract(propsSchema.tag.default ?? null) ?? null;
   }
   renderInlineEditor() {
-    const propValue = this.getContentValue();
+    const InlineEditorApp = this.InlineEditorApp;
     const classes = (this.element.children?.[0]?.classList.toString() ?? "") + " strip-styles";
-    const expectedTag = this.getExpectedTag();
     this.element.innerHTML = "";
     if (this.inlineEditorRoot) {
       this.resetInlineEditorRoot();
     }
     this.inlineEditorRoot = createRoot(this.element);
-    this.inlineEditorRoot.render(
-      /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(
-        InlineEditor,
-        {
-          attributes: { class: classes },
-          value: propValue,
-          setValue: this.setContentValue.bind(this),
-          onBlur: this.handleUnmountInlineEditor.bind(this),
-          autofocus: true,
-          showToolbar: true,
-          getInitialPopoverPosition,
-          expectedTag
-        }
-      ))
-    );
+    this.inlineEditorRoot.render(/* @__PURE__ */ React5.createElement(InlineEditorApp, { classes }));
   }
+  InlineEditorApp = ({ classes }) => {
+    const propValue = this.getContentValue();
+    const expectedTag = this.getExpectedTag();
+    const wrapperRef = React5.useRef(null);
+    const [isWrapperRendered, setIsWrapperRendered] = React5.useState(false);
+    React5.useEffect(() => {
+      setIsWrapperRendered(!!wrapperRef.current);
+    }, []);
+    return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(Box2, { ref: wrapperRef }, isWrapperRendered && /* @__PURE__ */ React5.createElement(OutlineOverlay, { element: wrapperRef.current, id: this.id, isSelected: true }), /* @__PURE__ */ React5.createElement(
+      InlineEditor,
+      {
+        attributes: {
+          class: classes,
+          style: "outline: none;"
+        },
+        value: propValue,
+        setValue: this.setContentValue.bind(this),
+        onBlur: this.handleUnmountInlineEditor.bind(this),
+        autofocus: true,
+        showToolbar: true,
+        getInitialPopoverPosition,
+        expectedTag
+      }
+    )));
+  };
 };
 
 // src/legacy/replacements/manager.ts

package/package.json

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

package/src/legacy/replacements/inline-editing/inline-editing-elements.tsx

@@ -9,8 +9,9 @@ import {
 	type TransformablePropValue,
 } from '@elementor/editor-props';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
-import { ThemeProvider } from '@elementor/ui';
+import { Box, ThemeProvider } from '@elementor/ui';
 
+import { OutlineOverlay } from '../../../components/outline-overlay';
 import ReplacementBase from '../base';
 import { getInitialPopoverPosition, INLINE_EDITING_PROPERTY_PER_TYPE } from './inline-editing-utils';
 
@@ -131,9 +132,8 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	}
 
 	renderInlineEditor() {
-		const propValue = this.getContentValue();
+		const InlineEditorApp = this.InlineEditorApp;
 		const classes = ( this.element.children?.[ 0 ]?.classList.toString() ?? '' ) + ' strip-styles';
-		const expectedTag = this.getExpectedTag();
 
 		this.element.innerHTML = '';
 
@@ -142,20 +142,40 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		}
 
 		this.inlineEditorRoot = createRoot( this.element );
+		this.inlineEditorRoot.render( <InlineEditorApp classes={ classes } /> );
+	}
+
+	InlineEditorApp = ( { classes }: { classes: string } ) => {
+		const propValue = this.getContentValue();
+		const expectedTag = this.getExpectedTag();
+		const wrapperRef = React.useRef< HTMLDivElement | null >( null );
+		const [ isWrapperRendered, setIsWrapperRendered ] = React.useState( false );
+
+		React.useEffect( () => {
+			setIsWrapperRendered( !! wrapperRef.current );
+		}, [] );
 
-		this.inlineEditorRoot.render(
+		return (
 			<ThemeProvider>
-				<InlineEditor
-					attributes={ { class: classes } }
-					value={ propValue }
-					setValue={ this.setContentValue.bind( this ) }
-					onBlur={ this.handleUnmountInlineEditor.bind( this ) }
-					autofocus
-					showToolbar
-					getInitialPopoverPosition={ getInitialPopoverPosition }
-					expectedTag={ expectedTag }
-				/>
+				<Box ref={ wrapperRef }>
+					{ isWrapperRendered && (
+						<OutlineOverlay element={ wrapperRef.current as HTMLDivElement } id={ this.id } isSelected />
+					) }
+					<InlineEditor
+						attributes={ {
+							class: classes,
+							style: 'outline: none;',
+						} }
+						value={ propValue }
+						setValue={ this.setContentValue.bind( this ) }
+						onBlur={ this.handleUnmountInlineEditor.bind( this ) }
+						autofocus
+						showToolbar
+						getInitialPopoverPosition={ getInitialPopoverPosition }
+						expectedTag={ expectedTag }
+					/>
+				</Box>
 			</ThemeProvider>
 		);
-	}
+	};
 }