@elementor/editor-canvas 4.0.0-573 → 4.0.0-597

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

@@ -1,26 +1,19 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { InlineEditor, InlineEditorToolbar } from '@elementor/editor-controls';
 import { Box, ThemeProvider } from '@elementor/ui';
-import { FloatingPortal, useInteractions } from '@floating-ui/react';
+import { autoUpdate, flip, FloatingPortal, useFloating } 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,
+	getInlineEditorElement,
+	horizontalShifterMiddleware as horizontalShifter,
+	removeToolbarAnchor,
+	useOnClickOutsideIframe,
+	useRenderToolbar,
 } 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 = ( {
@@ -30,7 +23,7 @@ export const CanvasInlineEditor = ( {
 	rootElement,
 	id,
 	setValue,
-	onBlur,
+	...props
 }: {
 	elementClasses: string;
 	initialValue: string | null;
@@ -40,13 +33,13 @@ export const CanvasInlineEditor = ( {
 	setValue: ( value: string | null ) => void;
 	onBlur: () => void;
 } ) => {
-	const [ selectionOffsets, setSelectionOffsets ] = useState< Offsets | null >( null );
 	const [ editor, setEditor ] = useState< Editor | null >( null );
+	const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar( rootElement.ownerDocument, id );
 
-	const onSelectionEnd = ( view: EditorView ) => {
-		const hasSelection = ! view.state.selection.empty;
+	const onBlur = () => {
+		removeToolbarAnchor( rootElement.ownerDocument, id );
 
-		setSelectionOffsets( hasSelection ? calcSelectionCenterOffsets( view ) : null );
+		props.onBlur();
 	};
 
 	useOnClickOutsideIframe( onBlur );
@@ -59,10 +52,10 @@ export const CanvasInlineEditor = ( {
 			.ProseMirror > * {
 				height: 100%;
 			}
-		.${ EDITOR_WRAPPER_SELECTOR } .ProseMirror > button[contenteditable="true"] {
-			height: auto;
-			cursor: text;
-		}
+			.${ EDITOR_WRAPPER_SELECTOR } .ProseMirror > button[contenteditable="true"] {
+				height: auto;
+				cursor: text;
+			}
 			` }
 			</style>
 			<InlineEditor
@@ -78,18 +71,9 @@ export const CanvasInlineEditor = ( {
 				onBlur={ onBlur }
 				autofocus
 				expectedTag={ expectedTag }
-				wrapperClassName={ EDITOR_WRAPPER_SELECTOR }
 				onSelectionEnd={ onSelectionEnd }
 			/>
-			{ selectionOffsets && editor && (
-				<InlineEditingToolbarWrapper
-					expectedTag={ expectedTag }
-					editor={ editor }
-					rootElement={ rootElement }
-					id={ id }
-					selectionOffsets={ selectionOffsets }
-				/>
-			) }
+			{ toolbarAnchor && editor && <InlineEditingToolbar anchor={ toolbarAnchor } editor={ editor } id={ id } /> }
 		</ThemeProvider>
 	);
 };
@@ -113,104 +97,26 @@ const InlineEditingOverlay = ( {
 	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 InlineEditingToolbar = ( { anchor, editor, id }: { anchor: HTMLElement; editor: Editor; id: string } ) => {
+	const { refs, floatingStyles } = useFloating( {
+		placement: 'top',
+		strategy: 'fixed',
+		transform: false,
+		whileElementsMounted: autoUpdate,
+		middleware: [ horizontalShifter, flip() ],
 	} );
-	const { getFloatingProps, getReferenceProps } = useInteractions();
-	const style = getComputedStyle( floating.styles, selectionOffsets );
 
-	useBindReactPropsToElement( element, getReferenceProps );
+	useLayoutEffect( () => {
+		refs.setReference( anchor );
+
+		return () => refs.setReference( null );
+	}, [ anchor, refs ] );
 
 	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 ref={ refs.setFloating } role="presentation" style={ { ...floatingStyles, pointerEvents: 'none' } }>
+				<InlineEditorToolbar editor={ editor } elementId={ id } />
 			</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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { getContainer, getElementLabel, getElementType } from '@elementor/editor-elements';
 import {
-	htmlV2PropTypeUtil,
+	htmlV3PropTypeUtil,
 	parseHtmlChildren,
 	type PropType,
 	type PropValue,
@@ -127,8 +127,9 @@ export default class InlineEditingReplacement extends ReplacementBase {
 
 	getExtractedContentValue() {
 		const propValue = this.getInlineEditablePropValue();
+		const extracted = htmlV3PropTypeUtil.extract( propValue );
 
-		return htmlV2PropTypeUtil.extract( propValue )?.content ?? '';
+		return stringPropTypeUtil.extract( extracted?.content ?? null ) ?? '';
 	}
 
 	setContentValue( value: string | null ) {
@@ -136,8 +137,8 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		const html = value || '';
 		const parsed = parseHtmlChildren( html );
 
-		const valueToSave = htmlV2PropTypeUtil.create( {
-			content: parsed.content || null,
+		const valueToSave = htmlV3PropTypeUtil.create( {
+			content: parsed.content ? stringPropTypeUtil.create( parsed.content ) : null,
 			children: parsed.children,
 		} );
 
@@ -174,7 +175,7 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		}
 
 		if ( propType.kind === 'union' ) {
-			const textKeys = [ htmlV2PropTypeUtil.key, stringPropTypeUtil.key ];
+			const textKeys = [ htmlV3PropTypeUtil.key, stringPropTypeUtil.key ];
 
 			for ( const key of textKeys ) {
 				if ( propType.prop_types[ key ] ) {

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

@@ -1,4 +1,4 @@
-import { htmlV2PropTypeUtil, type PropType, stringPropTypeUtil } from '@elementor/editor-props';
+import { htmlV3PropTypeUtil, type PropType, stringPropTypeUtil } from '@elementor/editor-props';
 
 type InlineEditingEligibilityArgs = {
 	rawValue: unknown;
@@ -9,7 +9,7 @@ const hasKey = ( propType: PropType ): propType is PropType & { key: unknown } =
 	return 'key' in propType;
 };
 
-const TEXT_PROP_TYPE_KEYS = new Set( [ htmlV2PropTypeUtil.key, stringPropTypeUtil.key ] );
+const TEXT_PROP_TYPE_KEYS = new Set( [ htmlV3PropTypeUtil.key, stringPropTypeUtil.key ] );
 
 const isCoreTextPropTypeKey = ( key: unknown ): boolean => {
 	return ( TEXT_PROP_TYPE_KEYS as Set< unknown > ).has( key );
@@ -36,5 +36,5 @@ export const isInlineEditingAllowed = ( { rawValue, propTypeFromSchema }: Inline
 		return isAllowedBySchema( propTypeFromSchema );
 	}
 
-	return htmlV2PropTypeUtil.isValid( rawValue ) || stringPropTypeUtil.isValid( rawValue );
+	return htmlV3PropTypeUtil.isValid( rawValue ) || stringPropTypeUtil.isValid( rawValue );
 };

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

@@ -1,9 +1,35 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, useCallback, useEffect, useState } from 'react';
 import { type InlineEditorToolbarProps } from '@elementor/editor-controls';
 import { type V1Element } from '@elementor/editor-elements';
+import { type MiddlewareReturn, type MiddlewareState } from '@floating-ui/react';
 
 import { type LegacyWindow } from '../../types';
 
+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 ];
+
+export const EDITOR_WRAPPER_SELECTOR = 'inline-editor-wrapper';
+
+const TOOLBAR_ANCHOR_ID_PREFIX = 'inline-editing-toolbar-anchor';
+
+const TOOLBAR_ANCHOR_STATIC_STYLES: CSSProperties = {
+	backgroundColor: 'transparent',
+	border: 'none',
+	outline: 'none',
+	boxShadow: 'none',
+	padding: '0',
+	margin: '0',
+	borderRadius: '0',
+	overflow: 'hidden',
+	opacity: '0',
+	pointerEvents: 'none',
+	position: 'absolute',
+	display: 'block',
+};
+
 export type Editor = InlineEditorToolbarProps[ 'editor' ];
 export type EditorView = Editor[ 'view' ];
 
@@ -25,62 +51,134 @@ export const getWidgetType = ( container: V1Element | null ) => {
 	return container?.model?.get( 'widgetType' ) ?? container?.model?.get( 'elType' ) ?? null;
 };
 
-export const calcSelectionCenterOffsets = ( view: EditorView ): Offsets | null => {
-	const frameWindow = ( view.root as Document )?.defaultView;
+export 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.
+export const useOnClickOutsideIframe = ( handleUnmount: () => void ) => {
+	const asyncUnmountInlineEditor = 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
+	}, [] );
+};
+
+export const useRenderToolbar = ( ownerDocument: Document, id: string ) => {
+	const [ anchor, setAnchor ] = useState< HTMLElement | null >( null );
+
+	const onSelectionEnd = ( view: EditorView ) => {
+		const hasSelection = ! view.state.selection.empty;
+
+		removeToolbarAnchor( ownerDocument, id );
+
+		if ( hasSelection ) {
+			setAnchor( createAnchorBasedOnSelection( ownerDocument, id ) );
+		} else {
+			setAnchor( null );
+		}
+	};
+
+	return { onSelectionEnd, anchor };
+};
+
+const createAnchorBasedOnSelection = ( ownerDocument: Document, id: string ): HTMLElement | null => {
+	const frameWindow = ownerDocument.defaultView;
 	const selection = frameWindow?.getSelection();
-	const editorContainer = view.dom;
 
-	if ( ! selection || ! editorContainer ) {
+	if ( ! selection ) {
 		return null;
 	}
 
 	const range = selection.getRangeAt( 0 );
 	const selectionRect = range.getBoundingClientRect();
-	const editorContainerRect = editorContainer.getBoundingClientRect();
+	const bodyRect = ownerDocument.body.getBoundingClientRect();
+	const toolbarAnchor = ownerDocument.createElement( 'span' );
 
-	if ( ! selectionRect || ! editorContainerRect ) {
-		return null;
-	}
+	styleToolbarAnchor( toolbarAnchor, selectionRect, bodyRect );
+	toolbarAnchor.setAttribute( 'id', getToolbarAnchorId( id ) );
 
-	const verticalOffset = selectionRect.top - editorContainerRect.top;
+	ownerDocument.body.appendChild( toolbarAnchor );
 
-	const selectionCenter = selectionRect?.left + selectionRect?.width / 2;
-	const horizontalOffset = selectionCenter - editorContainerRect.left;
+	return toolbarAnchor;
+};
+
+export const removeToolbarAnchor = ( ownerDocument: Document, id: string ) => {
+	const toolbarAnchor = getToolbarAnchor( ownerDocument, id );
 
-	return { left: horizontalOffset, top: verticalOffset };
+	if ( toolbarAnchor ) {
+		ownerDocument.body.removeChild( toolbarAnchor );
+	}
 };
 
-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 getToolbarAnchorId = ( id: string ) => `${ TOOLBAR_ANCHOR_ID_PREFIX }-${ id }`;
+
+export const getToolbarAnchor = ( ownerDocument: Document, id: string ) =>
+	ownerDocument.getElementById( getToolbarAnchorId( id ) ) as HTMLElement | null;
+
+const styleToolbarAnchor = ( anchor: HTMLElement, selectionRect: DOMRect, bodyRect: DOMRect ) => {
+	const { width, height } = selectionRect;
+
+	Object.assign( anchor.style, {
+		...TOOLBAR_ANCHOR_STATIC_STYLES,
+		top: `${ selectionRect.top - bodyRect.top }px`,
+		left: `${ selectionRect.left - bodyRect.left }px`,
+		width: `${ width }px`,
+		height: `${ height }px`,
+	} );
 };
 
-const extractTransformValue = ( styles: CSSProperties ) => {
-	const translateRegex = /translate\([^)]*\)\s?/g;
-	const numericValuesRegex = /(-?\d+\.?\d*)/g;
+export const horizontalShifterMiddleware: {
+	name: string;
+	fn: ( state: MiddlewareState ) => MiddlewareReturn;
+} = {
+	name: 'horizontalShifter',
+	fn( state ) {
+		const {
+			x: left,
+			y: top,
+			elements: { reference: anchor, floating },
+		} = state;
 
-	const translateValue = styles?.transform?.match( translateRegex )?.[ 0 ];
-	const values = translateValue?.match( numericValuesRegex );
+		const newState: MiddlewareReturn = {
+			...state,
+			x: left,
+			y: top,
+		};
 
-	if ( ! translateValue || ! values ) {
-		return null;
-	}
+		const isLeftOverflown = left < 0;
 
-	const [ numericX, numericY ] = values.map( Number );
+		if ( isLeftOverflown ) {
+			newState.x = 0;
 
-	if ( ! numericX || ! numericY ) {
-		return null;
-	}
+			return newState;
+		}
+
+		const anchorRect = anchor.getBoundingClientRect();
+		const right = left + floating.offsetWidth;
+		const documentWidth = ( anchor as HTMLElement ).ownerDocument.body.offsetWidth;
+		const isRightOverflown = right > documentWidth && anchorRect.right < right;
+
+		if ( isRightOverflown ) {
+			const diff = right - documentWidth;
+
+			newState.x = left - diff;
+
+			return newState;
+		}
 
-	return styles.transform;
+		return newState;
+	},
 };

package/src/legacy/tabs-model-extensions.ts

@@ -1,4 +1,4 @@
-import { htmlV2PropTypeUtil } from '@elementor/editor-props';
+import { htmlV3PropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 
 import { type ModelExtensions } from './create-nested-templated-element-type';
 import { registerModelExtensions } from './init-legacy-views';
@@ -23,7 +23,10 @@ const tabModelExtensions: ModelExtensions = {
 			...paragraphElement,
 			settings: {
 				...paragraphElement.settings,
-				paragraph: htmlV2PropTypeUtil.create( { content: `Tab ${ position }`, children: [] } ),
+				paragraph: htmlV3PropTypeUtil.create( {
+					content: stringPropTypeUtil.create( `Tab ${ position }` ),
+					children: [],
+				} ),
 			},
 		};
 

package/src/mcp/tools/build-composition/schema.ts

@@ -26,3 +26,17 @@ export const inputSchema = {
 		)
 		.default( {} ),
 };
+
+export const outputSchema = {
+	errors: z.string().describe( 'Error message if the composition building failed' ).optional(),
+	xmlStructure: z
+		.string()
+		.describe(
+			'The built XML structure as a string. Must use this XML after completion of building the composition, it contains real IDs.'
+		)
+		.optional(),
+	llm_instructions: z
+		.string()
+		.describe( 'Instructions what to do next, Important to follow these instructions!' )
+		.optional(),
+};

package/src/mcp/tools/build-composition/tool.ts

@@ -11,7 +11,7 @@ import { CompositionBuilder } from '../../../composition-builder/composition-bui
 import { BEST_PRACTICES_URI, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 import { doUpdateElementProperty } from '../../utils/do-update-element-property';
 import { generatePrompt } from './prompt';
-import { inputSchema as schema } from './schema';
+import { inputSchema as schema, outputSchema } from './schema';
 
 export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 	const { addTool } = reg;
@@ -27,7 +27,7 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 			{ description: 'Global Variables', uri: 'elementor://global-variables' },
 			{ description: 'Styles best practices', uri: BEST_PRACTICES_URI },
 		],
-		// outputSchema: '',
+		outputSchema,
 		modelPreferences: {
 			hints: [ { name: 'claude-sonnet-4-5' } ],
 		},
@@ -116,11 +116,12 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 				) }\n\n"Missing $$type" errors indicate that the configuration objects are invalid. Try again and apply **ALL** object entries with correct $$type.\nNow that you have these errors, fix them and try again. Errors regarding configuration objects, please check against the PropType schemas`;
 				throw new Error( errorText );
 			}
-			if ( errors.length ) {
-				throw new Error( errors.map( ( e ) => ( typeof e === 'string' ? e : e.message ) ).join( '\n' ) );
-			}
-			// Why text? Until there will be a stable versioning to OutputSchema, it is better to send string to the response.
-			return `The composition was built successfully with element IDs embedded in the XML.
+			return {
+				xmlStructure: generatedXML,
+				errors: errors?.length
+					? errors.map( ( e ) => ( typeof e === 'string' ? e : e.message ) ).join( '\n\n' )
+					: undefined,
+				llm_instructions: `The composition was built successfully with element IDs embedded in the XML.
 
 **CRITICAL NEXT STEPS** (Follow in order):
 1. **Apply Global Classes**: Use "apply-global-class" tool to apply the global classes you created BEFORE building this composition
@@ -130,10 +131,8 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 2. **Fine-tune if needed**: Use "configure-element" tool only for element-specific adjustments that don't warrant global classes
 
 Remember: Global classes ensure design consistency and reusability. Don't skip applying them!
-
-Updated XML structure:
-${ generatedXML }
-`;
+`,
+			};
 		},
 	} );
 };

package/src/transformers/settings/html-v3-transformer.ts

@@ -0,0 +1,10 @@
+import { createTransformer } from '../create-transformer';
+
+type HtmlV3Value = {
+	content: string | null;
+	children: unknown[];
+};
+
+export const htmlV3Transformer = createTransformer( ( value: HtmlV3Value ) => {
+	return value?.content ?? '';
+} );