@elementor/editor-canvas 4.0.0-manual → 4.0.1

package/package.json

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

package/src/components/__tests__/style-renderer.test.tsx

@@ -13,6 +13,10 @@ jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	commandEndEvent: jest.fn(),
 } ) );
 
+jest.mock( '@elementor/editor-documents', () => ( {
+	getCurrentDocument: jest.fn().mockReturnValue( { id: 1 } ),
+} ) );
+
 jest.mock( '@elementor/ui', () => ( {
 	Portal: jest.fn( ( { children } ) => <div data-testid="portal">{ children }</div> ),
 } ) );

package/src/hooks/__tests__/use-style-items.test.ts

@@ -128,6 +128,9 @@ describe( 'useStyleItems', () => {
 
 		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider1, mockProvider2 ] );
 
+		const provider1OriginalOrder = mockProvider1.actions.all().map( ( s ) => s.id );
+		const provider2OriginalOrder = mockProvider2.actions.all().map( ( s ) => s.id );
+
 		let attachPreviewCallback: () => Promise< void >;
 
 		jest.mocked( registerDataHook ).mockImplementation( ( position, command, callback ) => {
@@ -156,6 +159,9 @@ describe( 'useStyleItems', () => {
 			{ id: 'style2', breakpoint: 'desktop' },
 			{ id: 'style1', breakpoint: 'desktop' },
 		] );
+
+		expect( mockProvider1.actions.all().map( ( s ) => s.id ) ).toEqual( provider1OriginalOrder );
+		expect( mockProvider2.actions.all().map( ( s ) => s.id ) ).toEqual( provider2OriginalOrder );
 	} );
 
 	it( 'should return style items ordered by provider priority and breakpoint', async () => {
@@ -283,6 +289,125 @@ describe( 'useStyleItems', () => {
 		expect( result.current ).toHaveLength( 2 );
 	} );
 
+	it( 'should maintain breakpoint order after style update', async () => {
+		// Arrange.
+		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>
+			Promise.resolve(
+				styles.map( ( style: StyleDefinition ) => ( {
+					id: style.id,
+					breakpoint: style?.variants[ 0 ]?.meta.breakpoint || 'desktop',
+				} ) )
+			)
+		);
+
+		jest.mocked( useStyleRenderer ).mockReturnValue( renderStylesMock );
+
+		const mockProvider = createMockStylesProvider( { key: 'provider1', priority: 1 }, [
+			createMockStyleDefinitionWithVariants( {
+				id: 'style1',
+				variants: [
+					{ meta: { breakpoint: null, state: null }, props: { padding: '10px' }, custom_css: null },
+					{ meta: { breakpoint: 'tablet', state: null }, props: { padding: '8px' }, custom_css: null },
+					{ meta: { breakpoint: 'mobile', state: null }, props: { padding: '5px' }, custom_css: null },
+				],
+			} ),
+		] );
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider ] );
+
+		// Act - initial render.
+		const { result } = renderHook( () => useStyleItems() );
+
+		await act( async () => {
+			mockProvider.actions.updateProps?.( {
+				id: 'style1',
+				meta: { breakpoint: 'tablet', state: null },
+				props: { padding: '12px' },
+			} );
+		} );
+
+		// Assert - items should be ordered by breakpoint (desktop, tablet, mobile).
+		const breakpointOrder = result.current.map( ( item ) => item.breakpoint );
+		expect( breakpointOrder ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+
+		// Act - update again (should maintain order).
+		await act( async () => {
+			mockProvider.actions.update?.( { id: 'style1', label: 'Updated' } );
+		} );
+
+		// Assert - order should still be maintained.
+		const breakpointOrderAfterUpdate = result.current.map( ( item ) => item.breakpoint );
+		expect( breakpointOrderAfterUpdate ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+	} );
+
+	it( 'should recover and render styles when a provider key becomes available after initial failure', async () => {
+		// Arrange.
+		let shouldThrow = true;
+
+		const dynamicKey: () => string = () => {
+			if ( shouldThrow ) {
+				throw new Error( 'Document not ready' );
+			}
+
+			return 'late-provider';
+		};
+
+		const failingThenSucceedingProvider = createMockStylesProvider(
+			{
+				key: dynamicKey,
+				priority: 2,
+			},
+			[ createMockStyleDefinition( { id: 'late-style1' } ), createMockStyleDefinition( { id: 'late-style2' } ) ]
+		);
+
+		const stableProvider = createMockStylesProvider(
+			{
+				key: 'stable-provider',
+				priority: 1,
+			},
+			[
+				createMockStyleDefinition( { id: 'stable-style1' } ),
+				createMockStyleDefinition( { id: 'stable-style2' } ),
+			]
+		);
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [
+			failingThenSucceedingProvider,
+			stableProvider,
+		] );
+
+		let attachPreviewCallback: () => Promise< void >;
+
+		jest.mocked( registerDataHook ).mockImplementation( ( position, command, callback ) => {
+			if ( command === 'editor/documents/attach-preview' && position === 'after' ) {
+				attachPreviewCallback = callback as never;
+			}
+
+			return null as never;
+		} );
+
+		// Act.
+		const { result } = renderHook( () => useStyleItems() );
+
+		// Assert - hook should not crash, should return empty initially.
+		expect( result.current ).toEqual( [] );
+
+		// Act - simulate document becoming ready, then trigger attach-preview.
+		shouldThrow = false;
+
+		await act( async () => {
+			await attachPreviewCallback?.();
+		} );
+
+		// Assert - both providers' styles should render in correct priority order.
+		expect( result.current ).toEqual( [
+			{ id: 'stable-style2', breakpoint: 'desktop' },
+			{ id: 'stable-style1', breakpoint: 'desktop' },
+			{ id: 'late-style2', breakpoint: 'desktop' },
+			{ id: 'late-style1', breakpoint: 'desktop' },
+		] );
+	} );
+
 	it( 'should only re-render changed styles on differential update', async () => {
 		// Arrange.
 		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>

package/src/hooks/use-style-items.ts

@@ -36,25 +36,35 @@ export function useStyleItems() {
 	const styleItemsCacheRef = useRef< Map< string, StyleItemsCache > >( new Map() );
 
 	const providerAndSubscribers = useMemo( () => {
-		return stylesRepository.getProviders().map( ( provider ): ProviderAndSubscriber => {
-			const providerKey = provider.getKey();
+		const createEmptyCache = () => {
+			return { orderedIds: [], itemsById: new Map() };
+		};
+
+		const getCache = ( provider: StylesProvider ): StyleItemsCache => {
+			const providerKey = safeGetKey( provider );
+
+			if ( ! providerKey ) {
+				return createEmptyCache();
+			}
 
 			if ( ! styleItemsCacheRef.current.has( providerKey ) ) {
-				styleItemsCacheRef.current.set( providerKey, { orderedIds: [], itemsById: new Map() } );
+				styleItemsCacheRef.current.set( providerKey, createEmptyCache() );
 			}
 
-			const cache = styleItemsCacheRef.current.get( providerKey ) as StyleItemsCache;
+			return styleItemsCacheRef.current.get( providerKey ) as StyleItemsCache;
+		};
 
-			return {
+		return stylesRepository.getProviders().map(
+			( provider ): ProviderAndSubscriber => ( {
 				provider,
 				subscriber: createProviderSubscriber( {
 					provider,
 					renderStyles,
 					setStyleItems,
-					cache,
+					getCache: () => getCache( provider ),
 				} ),
-			};
-		} );
+			} )
+		);
 	}, [ renderStyles ] );
 
 	useEffect( () => {
@@ -122,25 +132,34 @@ function createBreakpointSorter( breakpointsOrder: BreakpointId[] ) {
 		breakpointsOrder.indexOf( breakpointB as BreakpointId );
 }
 
+function safeGetKey( provider: StylesProvider ): string | null {
+	try {
+		return provider.getKey();
+	} catch {
+		return null;
+	}
+}
+
 type CreateProviderSubscriberArgs = {
 	provider: StylesProvider;
 	renderStyles: StyleRenderer;
 	setStyleItems: Dispatch< SetStateAction< ProviderAndStyleItemsMap > >;
-	cache: StyleItemsCache;
+	getCache: () => StyleItemsCache;
 };
 
-function createProviderSubscriber( { provider, renderStyles, setStyleItems, cache }: CreateProviderSubscriberArgs ) {
+function createProviderSubscriber( { provider, renderStyles, setStyleItems, getCache }: CreateProviderSubscriberArgs ) {
 	return abortPreviousRuns( ( abortController, previous?: StylesCollection, current?: StylesCollection ) =>
 		signalizedProcess( abortController.signal )
 			.then( ( _, signal ) => {
+				const cache = getCache();
 				const hasDiffInfo = current !== undefined && previous !== undefined;
 				const hasCache = cache.orderedIds.length > 0;
 
 				if ( hasDiffInfo && hasCache ) {
-					return updateItems( previous, current, signal );
+					return updateItems( cache, previous, current, signal );
 				}
 
-				return createItems( signal );
+				return createItems( cache, signal );
 			} )
 			.then( ( items ) => {
 				setStyleItems( ( prev ) => ( {
@@ -151,7 +170,12 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, cach
 			.execute()
 	);
 
-	async function updateItems( previous: StylesCollection, current: StylesCollection, signal: AbortSignal ) {
+	async function updateItems(
+		cache: StyleItemsCache,
+		previous: StylesCollection,
+		current: StylesCollection,
+		signal: AbortSignal
+	) {
 		const changedIds = getChangedStyleIds( previous, current );
 
 		cache.orderedIds = provider.actions
@@ -178,10 +202,10 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, cach
 		return getOrderedItems( cache );
 	}
 
-	async function createItems( signal: AbortSignal ) {
+	async function createItems( cache: StyleItemsCache, signal: AbortSignal ) {
 		const allStyles = provider.actions.all();
 
-		const styles = allStyles.reverse().map( ( style ) => {
+		const styles = [ ...allStyles ].reverse().map( ( style ) => {
 			return {
 				...style,
 				cssName: provider.actions.resolveCssName( style.id ),
@@ -191,7 +215,7 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, cach
 		return renderStyles( { styles: breakToBreakpoints( styles ), signal } ).then( ( rendered ) => {
 			rebuildCache( cache, allStyles, rendered );
 
-			return rendered;
+			return getOrderedItems( cache );
 		} );
 	}
 

package/src/index.ts

@@ -2,7 +2,7 @@ export { BREAKPOINTS_SCHEMA_URI } from './mcp/resources/breakpoints-resource';
 export { STYLE_SCHEMA_URI } from './mcp/resources/widgets-schema-resource';
 
 export { init } from './init';
-export { isAtomicWidget } from './style-commands/utils';
+export { isAtomicWidget } from './utils/command-utils';
 
 export {
 	createTemplatedElementView,

package/src/init-settings-transformers.ts

@@ -9,6 +9,7 @@ import { queryTransformer } from './transformers/settings/query-transformer';
 import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
 import { imageTransformer } from './transformers/shared/image-transformer';
 import { plainTransformer } from './transformers/shared/plain-transformer';
+import { svgSrcTransformer } from './transformers/shared/svg-src-transformer';
 import { videoSrcTransformer } from './transformers/shared/video-src-transformer';
 
 export function initSettingsTransformers() {
@@ -18,6 +19,7 @@ export function initSettingsTransformers() {
 		.register( 'query', queryTransformer )
 		.register( 'image', imageTransformer )
 		.register( 'image-src', imageSrcTransformer )
+		.register( 'svg-src', svgSrcTransformer )
 		.register( 'video-src', videoSrcTransformer )
 		.register( 'attributes', attributesTransformer )
 		.register( 'date-time', dateTimeTransformer )

package/src/legacy/create-nested-templated-element-type.ts

@@ -61,13 +61,14 @@ export function createNestedTemplatedElementType( {
 	};
 }
 
-function buildEditorAttributes( model: { get: ( key: 'id' ) => string; cid?: string } ): string {
+function buildEditorAttributes( model: ElementView[ 'model' ] ): string {
 	const id = model.get( 'id' );
+	const originId = model.get( 'originId' );
 	const cid = model.cid ?? '';
 
 	const attrs: Record< string, string > = {
 		'data-model-cid': cid,
-		'data-interaction-id': id,
+		'data-interaction-id': originId ?? id,
 		'x-ignore': 'true',
 	};
 
@@ -116,6 +117,10 @@ export function createNestedTemplatedElementView( {
 			this._lastResolvedSettingsHash = null;
 		},
 
+		renderOnChange() {
+			this.render();
+		},
+
 		render() {
 			this._abortController?.abort();
 			this._abortController = new AbortController();
@@ -181,6 +186,7 @@ export function createNestedTemplatedElementView( {
 
 					const context = {
 						id: model.get( 'id' ),
+						interaction_id: this.getInteractionId(),
 						type,
 						settings,
 						base_styles: baseStylesDictionary,
@@ -361,5 +367,12 @@ export function createNestedTemplatedElementView( {
 		_openEditingPanel( options?: { scrollIntoView: boolean } ) {
 			this._doAfterRender( () => parentOpenEditingPanel.call( this, options ) );
 		},
+
+		getInteractionId() {
+			const originId = this.model.get( 'originId' );
+			const id = this.model.get( 'id' );
+
+			return originId ?? id;
+		},
 	} ) as unknown as typeof ElementView;
 }

package/src/legacy/create-templated-element-type.ts

@@ -162,6 +162,7 @@ export function createTemplatedElementView( {
 
 					const context = {
 						id: this.model.get( 'id' ),
+						interaction_id: this.getInteractionId(),
 						type,
 						settings,
 						base_styles: baseStylesDictionary,
@@ -206,5 +207,12 @@ export function createTemplatedElementView( {
 		_openEditingPanel( options?: { scrollIntoView: boolean } ) {
 			this._doAfterRender( () => super._openEditingPanel( options ) );
 		}
+
+		getInteractionId() {
+			const originId = this.model.get( 'originId' );
+			const id = this.model.get( 'id' );
+
+			return originId ?? id;
+		}
 	};
 }

package/src/legacy/replacements/base.ts

@@ -26,6 +26,8 @@ export class ReplacementBase implements ReplacementBaseInterface {
 	protected type: ReplacementSettings[ 'type' ];
 	protected id: ReplacementSettings[ 'id' ];
 	protected refreshView: ReplacementSettings[ 'refreshView' ];
+	protected reactRoot: ReplacementSettings[ 'reactRoot' ];
+	protected reactContainer: ReplacementSettings[ 'reactContainer' ];
 
 	constructor( settings: ReplacementSettings ) {
 		this.getSetting = settings.getSetting;
@@ -34,6 +36,8 @@ export class ReplacementBase implements ReplacementBaseInterface {
 		this.type = settings.type;
 		this.id = settings.id;
 		this.refreshView = settings.refreshView;
+		this.reactRoot = settings.reactRoot;
+		this.reactContainer = settings.reactContainer;
 	}
 
 	static getTypes(): string[] | null {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { InlineEditor, InlineEditorToolbar } from '@elementor/editor-controls';
 import { Box, ThemeProvider } from '@elementor/ui';
 import { autoUpdate, flip, FloatingPortal, useFloating } from '@floating-ui/react';
@@ -9,68 +9,83 @@ import {
 	type Editor,
 	getInlineEditorElement,
 	horizontalShifterMiddleware as horizontalShifter,
-	removeToolbarAnchor,
 	useOnClickOutsideIframe,
 	useRenderToolbar,
 } from './inline-editing-utils';
 
-const EDITOR_WRAPPER_SELECTOR = 'inline-editor-wrapper';
-
 export const CanvasInlineEditor = ( {
 	elementClasses,
 	initialValue,
 	expectedTag,
 	rootElement,
+	contentElement,
 	id,
 	setValue,
-	...props
+	requestDestroy,
 }: {
 	elementClasses: string;
 	initialValue: string | null;
 	expectedTag: string | null;
 	rootElement: HTMLElement;
+	contentElement: HTMLElement;
 	id: string;
 	setValue: ( value: string | null ) => void;
-	onBlur: () => void;
+	requestDestroy: () => void;
 } ) => {
+	const [ active, setActive ] = useState( true );
 	const [ editor, setEditor ] = useState< Editor | null >( null );
-	const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar( rootElement.ownerDocument, id );
+	const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar( rootElement.ownerDocument, id );
+
+	useEffect( () => {
+		if ( ! active ) {
+			clearAnchor();
+			requestDestroy();
+		}
+	}, [ active, clearAnchor, requestDestroy ] );
+
+	const dismiss = useCallback( () => {
+		setEditor( null );
+		setActive( false );
+	}, [] );
 
-	const onBlur = () => {
-		removeToolbarAnchor( rootElement.ownerDocument, id );
+	useOnClickOutsideIframe( dismiss );
 
-		props.onBlur();
-	};
+	useEffect( () => {
+		const ownerDocument = contentElement.ownerDocument;
+
+		const handleClickAway = ( event: MouseEvent ) => {
+			if ( contentElement.contains( event.target as Node ) ) {
+				return;
+			}
 
-	useOnClickOutsideIframe( onBlur );
+			dismiss();
+		};
+
+		ownerDocument.addEventListener( 'mousedown', handleClickAway );
+
+		return () => ownerDocument.removeEventListener( 'mousedown', handleClickAway );
+	}, [ contentElement, dismiss ] );
+
+	if ( ! active ) {
+		return null;
+	}
 
 	return (
 		<ThemeProvider>
 			<InlineEditingOverlay expectedTag={ expectedTag } rootElement={ rootElement } id={ id } />
-			<style>
-				{ `
-			.ProseMirror > * {
-				height: 100%;
-			}
-			.${ EDITOR_WRAPPER_SELECTOR } .ProseMirror > button[contenteditable="true"] {
-				height: auto;
-				cursor: text;
-			}
-			` }
-			</style>
 			<InlineEditor
 				onEditorCreate={ setEditor }
+				mountElement={ contentElement }
 				editorProps={ {
 					attributes: {
-						style: 'outline: none;overflow-wrap: normal;height:100%',
+						style: 'outline: none; display: inherit; justify-content: inherit; align-items: inherit; flex-direction: inherit; text-align: inherit;',
 					},
 				} }
 				elementClasses={ elementClasses }
 				value={ initialValue }
 				setValue={ setValue }
-				onBlur={ onBlur }
+				onBlur={ dismiss }
 				autofocus
-				expectedTag={ expectedTag }
 				onSelectionEnd={ onSelectionEnd }
 			/>
 			{ toolbarAnchor && editor && <InlineEditingToolbar anchor={ toolbarAnchor } editor={ editor } id={ id } /> }
@@ -114,7 +129,14 @@ const InlineEditingToolbar = ( { anchor, editor, id }: { anchor: HTMLElement; ed
 
 	return (
 		<FloatingPortal id={ CANVAS_WRAPPER_ID }>
-			<Box ref={ refs.setFloating } role="presentation" style={ { ...floatingStyles, pointerEvents: 'none' } }>
+			<Box
+				ref={ refs.setFloating }
+				role="presentation"
+				style={ {
+					...floatingStyles,
+					pointerEvents: 'none',
+				} }
+			>
 				<InlineEditorToolbar editor={ editor } elementId={ id } />
 			</Box>
 		</FloatingPortal>

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createRoot, type Root } from 'react-dom/client';
 import { getContainer, getElementLabel, getElementType } from '@elementor/editor-elements';
 import {
 	htmlV3PropTypeUtil,
@@ -25,8 +24,8 @@ type TagPropType = PropType< 'tag' > & {
 const HISTORY_DEBOUNCE_WAIT = 800;
 
 export default class InlineEditingReplacement extends ReplacementBase {
-	private inlineEditorRoot: Root | null = null;
 	private handlerAttached = false;
+	private editing = false;
 
 	getReplacementKey() {
 		return 'inline-editing';
@@ -37,7 +36,7 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	}
 
 	isEditingModeActive() {
-		return !! this.inlineEditorRoot;
+		return this.editing;
 	}
 
 	shouldRenderReplacement() {
@@ -91,8 +90,8 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	resetInlineEditorRoot() {
 		this.element.removeEventListener( 'click', this.handleRenderInlineEditor );
 		this.handlerAttached = false;
-		this.inlineEditorRoot?.unmount?.();
-		this.inlineEditorRoot = null;
+		this.reactRoot.render( null );
+		this.editing = false;
 	}
 
 	unmountInlineEditor() {
@@ -239,22 +238,29 @@ export default class InlineEditingReplacement extends ReplacementBase {
 			this.resetInlineEditorRoot();
 		}
 
-		const elementClasses = this.element.children?.[ 0 ]?.classList.toString() ?? '';
+		const contentElement = this.element.children?.[ 0 ] as HTMLElement | undefined;
+
+		if ( ! contentElement ) {
+			return;
+		}
+
+		const elementClasses = contentElement.classList.toString();
 		const propValue = this.getExtractedContentValue();
 		const expectedTag = this.getExpectedTag();
 
-		this.element.innerHTML = '';
+		contentElement.innerHTML = '';
+		this.editing = true;
 
-		this.inlineEditorRoot = createRoot( this.element );
-		this.inlineEditorRoot.render(
+		this.reactRoot.render(
 			<CanvasInlineEditor
 				elementClasses={ elementClasses }
 				initialValue={ propValue }
 				expectedTag={ expectedTag }
 				rootElement={ this.element }
+				contentElement={ contentElement }
 				id={ this.id }
 				setValue={ this.setContentValue.bind( this ) }
-				onBlur={ this.unmountInlineEditor.bind( this ) }
+				requestDestroy={ this.unmountInlineEditor.bind( this ) }
 			/>
 		);
 	}

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

@@ -43,6 +43,7 @@ export const INLINE_EDITING_PROPERTY_PER_TYPE: Record< string, string > = {
 	'e-form-label': 'text',
 	'e-heading': 'title',
 	'e-paragraph': 'paragraph',
+	'e-form-submit-button': 'text',
 };
 
 export const legacyWindow = window as unknown as LegacyWindow;
@@ -79,6 +80,12 @@ export const useOnClickOutsideIframe = ( handleUnmount: () => void ) => {
 export const useRenderToolbar = ( ownerDocument: Document, id: string ) => {
 	const [ anchor, setAnchor ] = useState< HTMLElement | null >( null );
 
+	useEffect( () => {
+		if ( ! anchor ) {
+			removeToolbarAnchor( ownerDocument, id );
+		}
+	}, [ anchor, ownerDocument, id ] );
+
 	const onSelectionEnd = ( view: EditorView ) => {
 		const hasSelection = ! view.state.selection.empty;
 
@@ -91,7 +98,11 @@ export const useRenderToolbar = ( ownerDocument: Document, id: string ) => {
 		}
 	};
 
-	return { onSelectionEnd, anchor };
+	const clearAnchor = useCallback( () => {
+		setAnchor( null );
+	}, [] );
+
+	return { onSelectionEnd, anchor, clearAnchor };
 };
 
 const createAnchorBasedOnSelection = ( ownerDocument: Document, id: string ): HTMLElement | null => {