@elementor/editor-canvas 3.35.0-493 → 3.35.1

package/src/legacy/replacements/inline-editing/canvas-inline-editor.tsx

@@ -0,0 +1,215 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { InlineEditor, InlineEditorToolbar } from '@elementor/editor-controls';
+import { Box, ThemeProvider } from '@elementor/ui';
+import { FloatingPortal, useInteractions } from '@floating-ui/react';
+
+import { CANVAS_WRAPPER_ID, OutlineOverlay } from '../../../components/outline-overlay';
+import { useBindReactPropsToElement } from '../../../hooks/use-bind-react-props-to-element';
+import { useFloatingOnElement } from '../../../hooks/use-floating-on-element';
+import {
+	calcSelectionCenterOffsets,
+	type Editor,
+	type EditorView,
+	getComputedStyle,
+	type Offsets,
+} from './inline-editing-utils';
+
+const TOP_BAR_SELECTOR = '#elementor-editor-wrapper-v2';
+const NAVIGATOR_SELECTOR = '#elementor-navigator';
+const EDITING_PANEL = '#elementor-panel';
+
+const EDITOR_ELEMENTS_OUT_OF_IFRAME = [ TOP_BAR_SELECTOR, NAVIGATOR_SELECTOR, EDITING_PANEL ];
+
+const EDITOR_WRAPPER_SELECTOR = 'inline-editor-wrapper';
+
+export const CanvasInlineEditor = ( {
+	elementClasses,
+	initialValue,
+	expectedTag,
+	rootElement,
+	id,
+	setValue,
+	onBlur,
+}: {
+	elementClasses: string;
+	initialValue: string | null;
+	expectedTag: string | null;
+	rootElement: HTMLElement;
+	id: string;
+	setValue: ( value: string | null ) => void;
+	onBlur: () => void;
+} ) => {
+	const [ selectionOffsets, setSelectionOffsets ] = useState< Offsets | null >( null );
+	const [ editor, setEditor ] = useState< Editor | null >( null );
+
+	const onSelectionEnd = ( view: EditorView ) => {
+		const hasSelection = ! view.state.selection.empty;
+
+		setSelectionOffsets( hasSelection ? calcSelectionCenterOffsets( view ) : null );
+	};
+
+	useOnClickOutsideIframe( onBlur );
+
+	return (
+		<ThemeProvider>
+			<InlineEditingOverlay expectedTag={ expectedTag } rootElement={ rootElement } id={ id } />
+			<style>
+				{ `
+			.${ EDITOR_WRAPPER_SELECTOR }, .${ EDITOR_WRAPPER_SELECTOR } > * {
+				height: 100%;
+			}
+			.ProseMirror > * {
+				height: 100%;
+			}
+			` }
+			</style>
+			<InlineEditor
+				onEditorCreate={ setEditor }
+				editorProps={ {
+					attributes: {
+						style: 'outline: none;overflow-wrap: normal;height:100%',
+					},
+				} }
+				elementClasses={ elementClasses }
+				value={ initialValue }
+				setValue={ setValue }
+				onBlur={ onBlur }
+				autofocus
+				expectedTag={ expectedTag }
+				wrapperClassName={ EDITOR_WRAPPER_SELECTOR }
+				onSelectionEnd={ onSelectionEnd }
+			/>
+			{ selectionOffsets && editor && (
+				<InlineEditingToolbarWrapper
+					expectedTag={ expectedTag }
+					editor={ editor }
+					rootElement={ rootElement }
+					id={ id }
+					selectionOffsets={ selectionOffsets }
+				/>
+			) }
+		</ThemeProvider>
+	);
+};
+
+const InlineEditingOverlay = ( {
+	expectedTag,
+	rootElement,
+	id,
+}: {
+	expectedTag: string | null;
+	rootElement: HTMLElement;
+	id: string;
+} ) => {
+	const inlineEditedElement = getInlineEditorElement( rootElement, expectedTag );
+	const [ overlayRefElement, setOverlayElement ] = useState< HTMLDivElement | null >( inlineEditedElement );
+
+	useEffect( () => {
+		setOverlayElement( getInlineEditorElement( rootElement, expectedTag ) );
+	}, [ expectedTag, rootElement ] );
+
+	return overlayRefElement ? <OutlineOverlay element={ overlayRefElement } id={ id } isSelected /> : null;
+};
+
+const InlineEditingToolbarWrapper = ( {
+	expectedTag,
+	editor,
+	rootElement,
+	id,
+	selectionOffsets,
+}: {
+	expectedTag: string | null;
+	editor: Editor;
+	rootElement: HTMLElement;
+	id: string;
+	selectionOffsets: Offsets;
+} ) => {
+	const [ element, setElement ] = useState< HTMLElement | null >( null );
+
+	useEffect( () => {
+		setElement( getInlineEditorElement( rootElement, expectedTag ) );
+	}, [ expectedTag, rootElement ] );
+
+	return element ? (
+		<InlineEditingToolbar element={ element } editor={ editor } id={ id } selectionOffsets={ selectionOffsets } />
+	) : null;
+};
+
+const InlineEditingToolbar = ( {
+	element,
+	editor,
+	id,
+	selectionOffsets,
+}: {
+	element: HTMLElement;
+	editor: Editor;
+	id: string;
+	selectionOffsets: Offsets;
+} ) => {
+	const { floating } = useFloatingOnElement( {
+		element,
+		isSelected: true,
+	} );
+	const { getFloatingProps, getReferenceProps } = useInteractions();
+	const style = getComputedStyle( floating.styles, selectionOffsets );
+
+	useBindReactPropsToElement( element, getReferenceProps );
+
+	return (
+		<FloatingPortal id={ CANVAS_WRAPPER_ID }>
+			<Box
+				ref={ floating.setRef }
+				style={ {
+					...floating.styles,
+					pointerEvents: 'none',
+				} }
+				role="presentation"
+				{ ...getFloatingProps( { style } ) }
+			>
+				{ floating.styles.transform && (
+					<Box
+						sx={ {
+							position: 'relative',
+							transform: 'translateY(-100%)',
+							height: 'max-content',
+						} }
+					>
+						<InlineEditorToolbar
+							editor={ editor }
+							elementId={ id }
+							sx={ {
+								transform: 'translateX(-50%)',
+							} }
+						/>
+					</Box>
+				) }
+			</Box>
+		</FloatingPortal>
+	);
+};
+
+const getInlineEditorElement = ( elementWrapper: HTMLElement, expectedTag: string | null ) => {
+	return ! expectedTag ? null : ( elementWrapper.querySelector( expectedTag ) as HTMLDivElement );
+};
+
+// Elements out of iframe and canvas don't trigger "onClickAway" which unmounts the editor
+// since they are not part of the iframes owner document.
+// We need to manually add listeners to these elements to unmount the editor when they are clicked.
+const useOnClickOutsideIframe = ( handleUnmount: () => void ) => {
+	const asyncUnmountInlineEditor = React.useCallback( () => queueMicrotask( handleUnmount ), [ handleUnmount ] );
+
+	useEffect( () => {
+		EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
+			( selector ) =>
+				document?.querySelector( selector )?.addEventListener( 'mousedown', asyncUnmountInlineEditor )
+		);
+
+		return () =>
+			EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
+				( selector ) =>
+					document?.querySelector( selector )?.removeEventListener( 'mousedown', asyncUnmountInlineEditor )
+			);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+};

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

@@ -1,19 +1,14 @@
 import * as React from 'react';
-import { useEffect, useRef, useState } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
-import { InlineEditor } from '@elementor/editor-controls';
 import { getContainer, getElementLabel, getElementType } from '@elementor/editor-elements';
 import { htmlPropTypeUtil, type PropType, type PropValue, stringPropTypeUtil } from '@elementor/editor-props';
-import { __privateRunCommandSync as runCommandSync, isExperimentActive, undoable } from '@elementor/editor-v1-adapters';
-import { Box, ThemeProvider } from '@elementor/ui';
+import { __privateRunCommandSync as runCommandSync, getCurrentEditMode, undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
-import { OutlineOverlay } from '../../../components/outline-overlay';
 import { ReplacementBase, TRIGGER_TIMING } from '../base';
+import { CanvasInlineEditor } from './canvas-inline-editor';
 import { isInlineEditingAllowed } from './inline-editing-eligibility';
-import { getInitialPopoverPosition, INLINE_EDITING_PROPERTY_PER_TYPE } from './inline-editing-utils';
-
-const EXPERIMENT_KEY = 'v4-inline-text-editing';
+import { INLINE_EDITING_PROPERTY_PER_TYPE } from './inline-editing-utils';
 
 type TagPropType = PropType< 'tag' > & {
 	settings?: {
@@ -23,13 +18,6 @@ type TagPropType = PropType< 'tag' > & {
 
 const HISTORY_DEBOUNCE_WAIT = 800;
 
-const TOP_BAR_SELECTOR = '#elementor-editor-wrapper-v2';
-const NAVIGATOR_SELECTOR = '#elementor-navigator';
-const V4_EDITING_PANEL = 'main.MuiBox-root';
-const V3_EDITING_PANEL = '#elementor-panel-content-wrapper';
-
-const BLUR_TRIGGERING_SELECTORS = [ TOP_BAR_SELECTOR, NAVIGATOR_SELECTOR, V4_EDITING_PANEL, V3_EDITING_PANEL ];
-
 export default class InlineEditingReplacement extends ReplacementBase {
 	private inlineEditorRoot: Root | null = null;
 	private handlerAttached = false;
@@ -47,7 +35,7 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	}
 
 	shouldRenderReplacement() {
-		return isExperimentActive( EXPERIMENT_KEY ) && this.isInlineEditingEligible();
+		return this.isInlineEditingEligible() && getCurrentEditMode() === 'edit';
 	}
 
 	handleRenderInlineEditor = () => {
@@ -134,12 +122,12 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	getExtractedContentValue() {
 		const propValue = this.getInlineEditablePropValue();
 
-		return htmlPropTypeUtil.extract( propValue ) ?? stringPropTypeUtil.extract( propValue ) ?? '';
+		return htmlPropTypeUtil.extract( propValue ) ?? '';
 	}
 
 	setContentValue( value: string | null ) {
 		const settingKey = this.getInlineEditablePropertyName();
-		const valueToSave = value ? htmlPropTypeUtil.create( value ) : null;
+		const valueToSave = htmlPropTypeUtil.create( value || '' );
 
 		undoable(
 			{
@@ -238,77 +226,23 @@ export default class InlineEditingReplacement extends ReplacementBase {
 			this.resetInlineEditorRoot();
 		}
 
-		const InlineEditorApp = this.InlineEditorApp;
-		const wrapperClasses = 'elementor';
 		const elementClasses = this.element.children?.[ 0 ]?.classList.toString() ?? '';
+		const propValue = this.getExtractedContentValue();
+		const expectedTag = this.getExpectedTag();
 
 		this.element.innerHTML = '';
 
 		this.inlineEditorRoot = createRoot( this.element );
 		this.inlineEditorRoot.render(
-			<InlineEditorApp wrapperClasses={ wrapperClasses } elementClasses={ elementClasses } />
+			<CanvasInlineEditor
+				elementClasses={ elementClasses }
+				initialValue={ propValue }
+				expectedTag={ expectedTag }
+				rootElement={ this.element }
+				id={ this.id }
+				setValue={ this.setContentValue.bind( this ) }
+				onBlur={ this.unmountInlineEditor.bind( this ) }
+			/>
 		);
 	}
-
-	InlineEditorApp = ( { wrapperClasses, elementClasses }: { wrapperClasses: string; elementClasses: string } ) => {
-		const propValue = this.getExtractedContentValue();
-		const expectedTag = this.getExpectedTag();
-		const wrapperRef = useRef< HTMLDivElement | null >( null );
-		const [ isWrapperRendered, setIsWrapperRendered ] = useState( false );
-
-		useEffect( () => {
-			setIsWrapperRendered( !! wrapperRef.current );
-			BLUR_TRIGGERING_SELECTORS.forEach(
-				( selector ) =>
-					document?.querySelector( selector )?.addEventListener( 'mousedown', asyncUnmountInlineEditor )
-			);
-
-			return () =>
-				BLUR_TRIGGERING_SELECTORS.forEach(
-					( selector ) =>
-						document
-							?.querySelector( selector )
-							?.removeEventListener( 'mousedown', asyncUnmountInlineEditor )
-				);
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [] );
-
-		const asyncUnmountInlineEditor = React.useCallback(
-			() => queueMicrotask( this.unmountInlineEditor.bind( this ) ),
-			[]
-		);
-
-		return (
-			<ThemeProvider>
-				<Box
-					ref={ wrapperRef }
-					sx={ {
-						'& .elementor-inline-editor-reset': {
-							margin: 0,
-							padding: 0,
-						},
-					} }
-				>
-					{ isWrapperRendered && (
-						<OutlineOverlay element={ wrapperRef.current as HTMLDivElement } id={ this.id } isSelected />
-					) }
-					<InlineEditor
-						attributes={ {
-							class: wrapperClasses,
-							style: 'outline: none;',
-						} }
-						elementClasses={ elementClasses }
-						value={ propValue }
-						setValue={ this.setContentValue.bind( this ) }
-						onBlur={ this.unmountInlineEditor.bind( this ) }
-						autofocus
-						showToolbar
-						getInitialPopoverPosition={ getInitialPopoverPosition }
-						expectedTag={ expectedTag }
-						elementId={ this.id }
-					/>
-				</Box>
-			</ThemeProvider>
-		);
-	};
 }

package/src/legacy/replacements/inline-editing/inline-editing-utils.ts

@@ -1,7 +1,17 @@
+import { type CSSProperties } from 'react';
+import { type InlineEditorToolbarProps } from '@elementor/editor-controls';
 import { type V1Element } from '@elementor/editor-elements';
 
 import { type LegacyWindow } from '../../types';
 
+export type Editor = InlineEditorToolbarProps[ 'editor' ];
+export type EditorView = Editor[ 'view' ];
+
+export type Offsets = {
+	left: number;
+	top: number;
+};
+
 export const INLINE_EDITING_PROPERTY_PER_TYPE: Record< string, string > = {
 	'e-form-label': 'text',
 	'e-heading': 'title',
@@ -14,19 +24,62 @@ export const getWidgetType = ( container: V1Element | null ) => {
 	return container?.model?.get( 'widgetType' ) ?? container?.model?.get( 'elType' ) ?? null;
 };
 
-export const getInitialPopoverPosition = () => {
-	const positionFallback = { left: 0, top: 0 };
+export const calcSelectionCenterOffsets = ( view: EditorView ): Offsets | null => {
+	const frameWindow = ( view.root as Document )?.defaultView;
+	const selection = frameWindow?.getSelection();
+	const editorContainer = view.dom;
+
+	if ( ! selection || ! editorContainer ) {
+		return null;
+	}
+
+	const range = selection.getRangeAt( 0 );
+	const selectionRect = range.getBoundingClientRect();
+	const editorContainerRect = editorContainer.getBoundingClientRect();
+
+	if ( ! selectionRect || ! editorContainerRect ) {
+		return null;
+	}
+
+	const verticalOffset = selectionRect.top - editorContainerRect.top;
+
+	const selectionCenter = selectionRect?.left + selectionRect?.width / 2;
+	const horizontalOffset = selectionCenter - editorContainerRect.left;
+
+	return { left: horizontalOffset, top: verticalOffset };
+};
+
+export const getComputedStyle = ( styles: CSSProperties, offsets: Offsets ): CSSProperties => {
+	const transform = extractTransformValue( styles );
+
+	return transform
+		? {
+				...styles,
+				marginLeft: `${ offsets.left }px`,
+				marginTop: `${ offsets.top }px`,
+				pointerEvents: 'none',
+		  }
+		: {
+				display: 'none',
+		  };
+};
+
+const extractTransformValue = ( styles: CSSProperties ) => {
+	const translateRegex = /translate\([^)]*\)\s?/g;
+	const numericValuesRegex = /(-?\d+\.?\d*)/g;
+
+	const translateValue = styles?.transform?.match( translateRegex )?.[ 0 ];
+	const values = translateValue?.match( numericValuesRegex );
+
+	if ( ! translateValue || ! values ) {
+		return null;
+	}
 
-	const iFrameElement = legacyWindow?.elementor?.$preview?.get( 0 );
-	const iFramePosition = iFrameElement?.getBoundingClientRect() ?? positionFallback;
+	const [ numericX, numericY ] = values.map( Number );
 
-	const previewElement = legacyWindow?.elementor?.$previewWrapper?.get( 0 );
-	const previewPosition = previewElement
-		? { left: previewElement.scrollLeft, top: previewElement.scrollTop }
-		: positionFallback;
+	if ( ! numericX || ! numericY ) {
+		return null;
+	}
 
-	return {
-		left: iFramePosition.left + previewPosition.left,
-		top: iFramePosition.top + previewPosition.top,
-	};
+	return styles.transform;
 };