@elementor/editor-controls 4.0.0-551 → 4.0.0-564

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.0.0-551",
+  "version": "4.0.0-564",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.0.0-551",
-    "@elementor/editor-elements": "4.0.0-551",
-    "@elementor/editor-props": "4.0.0-551",
-    "@elementor/editor-responsive": "4.0.0-551",
-    "@elementor/editor-ui": "4.0.0-551",
-    "@elementor/editor-v1-adapters": "4.0.0-551",
-    "@elementor/env": "4.0.0-551",
-    "@elementor/http-client": "4.0.0-551",
+    "@elementor/editor-current-user": "4.0.0-564",
+    "@elementor/editor-elements": "4.0.0-564",
+    "@elementor/editor-props": "4.0.0-564",
+    "@elementor/editor-responsive": "4.0.0-564",
+    "@elementor/editor-ui": "4.0.0-564",
+    "@elementor/editor-v1-adapters": "4.0.0-564",
+    "@elementor/env": "4.0.0-564",
+    "@elementor/http-client": "4.0.0-564",
     "@elementor/icons": "^1.63.0",
-    "@elementor/locations": "4.0.0-551",
-    "@elementor/events": "4.0.0-551",
-    "@elementor/query": "4.0.0-551",
-    "@elementor/session": "4.0.0-551",
+    "@elementor/locations": "4.0.0-564",
+    "@elementor/events": "4.0.0-564",
+    "@elementor/query": "4.0.0-564",
+    "@elementor/session": "4.0.0-564",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-551",
-    "@elementor/wp-media": "4.0.0-551",
+    "@elementor/utils": "4.0.0-564",
+    "@elementor/wp-media": "4.0.0-564",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/controls/chips-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SyntheticEvent } from 'react';
-import { stringArrayPropTypeUtil } from '@elementor/editor-props';
+import { stringArrayPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { Autocomplete, Chip, TextField } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -21,14 +21,16 @@ const SIZE = 'tiny';
 export const ChipsControl = createControl( ( { options }: ChipsControlProps ) => {
 	const { value, setValue, disabled } = useBoundProp( stringArrayPropTypeUtil );
 
-	const selectedValues: string[] = value || [];
+	const selectedValues: string[] = ( value || [] )
+		.map( ( item ) => stringPropTypeUtil.extract( item ) )
+		.filter( ( val ): val is string => val !== null );
 
 	const selectedOptions = selectedValues
 		.map( ( val ) => options.find( ( opt ) => opt.value === val ) )
 		.filter( ( opt ): opt is ChipsOption => opt !== undefined );
 
 	const handleChange = ( _: SyntheticEvent, newValue: ChipsOption[] ) => {
-		const values = newValue.map( ( option ) => option.value );
+		const values = newValue.map( ( option ) => stringPropTypeUtil.create( option.value ) );
 		setValue( values.length > 0 ? values : null );
 	};
 

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

@@ -1,13 +1,16 @@
 import * as React from 'react';
-import { type ComponentProps } from 'react';
-import { htmlPropTypeUtil } from '@elementor/editor-props';
+import { type ComponentProps, useCallback, useEffect, useMemo } from 'react';
+import { htmlV2PropTypeUtil, parseHtmlChildren } 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 { InlineEditor } from '../components/inline-editor';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
+const CHILDREN_PARSE_DEBOUNCE_MS = 300;
+
 export const InlineEditingControl = createControl(
 	( {
 		sx,
@@ -18,8 +21,37 @@ export const InlineEditingControl = createControl(
 		attributes?: Record< string, string >;
 		props?: ComponentProps< 'div' >;
 	} ) => {
-		const { value, setValue } = useBoundProp( htmlPropTypeUtil );
-		const handleChange = ( newValue: unknown ) => setValue( ( newValue ?? '' ) as string );
+		const { value, setValue } = useBoundProp( htmlV2PropTypeUtil );
+		const content = value?.content ?? '';
+
+		const debouncedParse = useMemo(
+			() =>
+				debounce( ( html: string ) => {
+					const parsed = parseHtmlChildren( html );
+
+					setValue( {
+						content: parsed.content || null,
+						children: parsed.children,
+					} );
+				}, CHILDREN_PARSE_DEBOUNCE_MS ),
+			[ setValue ]
+		);
+
+		const handleChange = useCallback(
+			( newValue: unknown ) => {
+				const html = ( newValue ?? '' ) as string;
+
+				setValue( {
+					content: html || null,
+					children: value?.children ?? [],
+				} );
+
+				debouncedParse( html );
+			},
+			[ setValue, value?.children, debouncedParse ]
+		);
+
+		useEffect( () => () => debouncedParse.cancel(), [ debouncedParse ] );
 
 		return (
 			<ControlActions>
@@ -59,7 +91,7 @@ export const InlineEditingControl = createControl(
 					{ ...attributes }
 					{ ...props }
 				>
-					<InlineEditor value={ value || '' } setValue={ handleChange } />
+					<InlineEditor value={ content } setValue={ handleChange } />
 				</Box>
 			</ControlActions>
 		);