@elementor/editor-controls 4.3.0-1047 → 4.3.0-1049

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.3.0-1047",
+  "version": "4.3.0-1049",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.3.0-1047",
-    "@elementor/editor-elements": "4.3.0-1047",
-    "@elementor/editor-props": "4.3.0-1047",
-    "@elementor/editor-responsive": "4.3.0-1047",
-    "@elementor/editor-ui": "4.3.0-1047",
-    "@elementor/editor-v1-adapters": "4.3.0-1047",
-    "@elementor/env": "4.3.0-1047",
-    "@elementor/events": "4.3.0-1047",
-    "@elementor/http-client": "4.3.0-1047",
+    "@elementor/editor-current-user": "4.3.0-1049",
+    "@elementor/editor-elements": "4.3.0-1049",
+    "@elementor/editor-props": "4.3.0-1049",
+    "@elementor/editor-responsive": "4.3.0-1049",
+    "@elementor/editor-ui": "4.3.0-1049",
+    "@elementor/editor-v1-adapters": "4.3.0-1049",
+    "@elementor/env": "4.3.0-1049",
+    "@elementor/events": "4.3.0-1049",
+    "@elementor/http-client": "4.3.0-1049",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.3.0-1047",
-    "@elementor/query": "4.3.0-1047",
-    "@elementor/schema": "4.3.0-1047",
-    "@elementor/session": "4.3.0-1047",
+    "@elementor/locations": "4.3.0-1049",
+    "@elementor/query": "4.3.0-1049",
+    "@elementor/schema": "4.3.0-1049",
+    "@elementor/session": "4.3.0-1049",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1047",
-    "@elementor/wp-media": "4.3.0-1047",
+    "@elementor/utils": "4.3.0-1049",
+    "@elementor/wp-media": "4.3.0-1049",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/controls/inline-editing-control.tsx

@@ -1,15 +1,13 @@
 import * as React from 'react';
-import { type ComponentProps, useCallback, useEffect, useMemo } from 'react';
-import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil } from '@elementor/editor-props';
+import { type ComponentProps, useCallback } from 'react';
+import { escapedHtmlPropTypeUtil } from '@elementor/editor-props';
 import { Box, type SxProps, type Theme } from '@elementor/ui';
-import { debounce } from '@elementor/utils';
 
-import { useBoundProp } from '../bound-prop-context';
+import { useBoundProp, usePropKeyContext } from '../bound-prop-context';
 import { InlineEditor } from '../components/inline-editor';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
-
-const CHILDREN_PARSE_DEBOUNCE_MS = 300;
+import { extractInlineHtmlContent } from '../utils/inline-editing';
 
 export const InlineEditingControl = createControl(
 	( {
@@ -21,38 +19,19 @@ export const InlineEditingControl = createControl(
 		attributes?: Record< string, string >;
 		props?: ComponentProps< 'div' >;
 	} ) => {
-		const { value, setValue, placeholder } = useBoundProp( htmlV3PropTypeUtil );
-		const content = stringPropTypeUtil.extract( value?.content ?? null ) ?? '';
-
-		const debouncedParse = useMemo(
-			() =>
-				debounce( ( html: string ) => {
-					const parsed = parseHtmlChildren( html );
-
-					setValue( {
-						content: parsed.content ? stringPropTypeUtil.create( parsed.content ) : null,
-						children: parsed.children,
-					} );
-				}, CHILDREN_PARSE_DEBOUNCE_MS ),
-			[ setValue ]
-		);
+		const { setValue, placeholder, value } = useBoundProp( escapedHtmlPropTypeUtil );
+		const { value: rawValue } = usePropKeyContext();
+		const content = value ?? extractInlineHtmlContent( rawValue );
 
 		const handleChange = useCallback(
 			( newValue: unknown ) => {
 				const html = ( newValue ?? '' ) as string;
 
-				setValue( {
-					content: html ? stringPropTypeUtil.create( html ) : null,
-					children: value?.children ?? [],
-				} );
-
-				debouncedParse( html );
+				setValue( html );
 			},
-			[ setValue, value?.children, debouncedParse ]
+			[ setValue ]
 		);
 
-		useEffect( () => () => debouncedParse.cancel(), [ debouncedParse ] );
-
 		return (
 			<ControlActions>
 				<Box
@@ -98,11 +77,7 @@ export const InlineEditingControl = createControl(
 					{ ...attributes }
 					{ ...props }
 				>
-					<InlineEditor
-						value={ content }
-						setValue={ handleChange }
-						placeholder={ placeholder?.content?.value ?? null }
-					/>
+					<InlineEditor value={ content } setValue={ handleChange } placeholder={ placeholder ?? null } />
 				</Box>
 			</ControlActions>
 		);

package/src/utils/inline-editing.ts

@@ -1,3 +1,5 @@
+import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+
 export function isEmpty( value: string | null = '' ) {
 	if ( ! value ) {
 		return true;
@@ -20,3 +22,13 @@ export function htmlToPlainText( html: string | null ): string {
 
 	return doc.body.textContent ?? '';
 }
+
+export function extractInlineHtmlContent( propValue: unknown ): string {
+	if ( escapedHtmlPropTypeUtil.isValid( propValue ) ) {
+		return escapedHtmlPropTypeUtil.extract( propValue ) ?? '';
+	}
+
+	const htmlV3 = htmlV3PropTypeUtil.extract( propValue );
+
+	return stringPropTypeUtil.extract( htmlV3?.content ?? null ) ?? '';
+}