@elementor/editor-controls 3.35.0-380 → 3.35.0-382

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

package/src/components/inline-editor.tsx

@@ -31,6 +31,7 @@ type InlineEditorProps = {
 	value: string | null;
 	setValue: ( value: string | null ) => void;
 	attributes?: Record< string, string >;
+	elementClasses?: string;
 	sx?: SxProps< Theme >;
 	onBlur?: ( event: Event ) => void;
 	showToolbar?: boolean;
@@ -39,6 +40,8 @@ type InlineEditorProps = {
 	expectedTag?: string | null;
 };
 
+const INITIAL_STYLE = 'margin:0;padding:0;';
+
 const useOnUpdate = ( callback: () => void, dependencies: DependencyList ): void => {
 	const hasMounted = useRef( false );
 
@@ -110,6 +113,7 @@ export const InlineEditor = forwardRef(
 			value,
 			setValue,
 			attributes = {},
+			elementClasses = '',
 			showToolbar = false,
 			autofocus = false,
 			sx = {},
@@ -167,20 +171,24 @@ export const InlineEditor = forwardRef(
 				Paragraph.extend( {
 					renderHTML( { HTMLAttributes } ) {
 						const tag = expectedTag ?? 'p';
-						return [ tag, { ...HTMLAttributes, style: 'margin:0;padding:0;' }, 0 ];
+						return [ tag, { ...HTMLAttributes, style: INITIAL_STYLE, class: elementClasses }, 0 ];
 					},
 				} ),
 				Heading.extend( {
 					renderHTML( { node, HTMLAttributes } ) {
 						if ( expectedTag ) {
-							return [ expectedTag, { ...HTMLAttributes, style: 'margin:0;padding:0;' }, 0 ];
+							return [
+								expectedTag,
+								{ ...HTMLAttributes, style: INITIAL_STYLE, class: elementClasses },
+								0,
+							];
 						}
 
 						const level = this.options.levels.includes( node.attrs.level )
 							? node.attrs.level
 							: this.options.levels[ 0 ];
 
-						return [ `h${ level }`, { ...HTMLAttributes, style: 'margin:0;padding:0;' }, 0 ];
+						return [ `h${ level }`, { ...HTMLAttributes, style: INITIAL_STYLE, class: elementClasses }, 0 ];
 					},
 				} ).configure( {
 					levels: [ 1, 2, 3, 4, 5, 6 ],

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

@@ -1,12 +1,6 @@
 import * as React from 'react';
-import { type ComponentProps, useEffect, useState } from 'react';
-import { htmlPropTypeUtil, type HtmlPropValue } from '@elementor/editor-props';
-import {
-	__privateListenTo as listenTo,
-	commandEndEvent,
-	type CommandEvent,
-	type ListenerEvent,
-} from '@elementor/editor-v1-adapters';
+import { type ComponentProps } from 'react';
+import { htmlPropTypeUtil } from '@elementor/editor-props';
 import { Box, type SxProps, type Theme } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -24,22 +18,9 @@ export const InlineEditingControl = createControl(
 		attributes?: Record< string, string >;
 		props?: ComponentProps< 'div' >;
 	} ) => {
-		const { value, setValue, bind } = useBoundProp( htmlPropTypeUtil );
-		const [ actualValue, setActualValue ] = useState< HtmlPropValue[ 'value' ] >( value );
+		const { value, setValue } = useBoundProp( htmlPropTypeUtil );
 		const handleChange = ( newValue: unknown ) => setValue( newValue as string );
 
-		useEffect( () => {
-			return listenTo( commandEndEvent( 'document/elements/settings' ), ( e: ListenerEvent ) => {
-				const { args, type } = e as CommandEvent< { settings: Record< string, HtmlPropValue > } >;
-				const settingValue = args?.settings?.[ bind ]?.value ?? null;
-
-				if ( type !== 'command' || settingValue !== actualValue ) {
-					setActualValue( settingValue );
-				}
-			} );
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [] );
-
 		return (
 			<ControlActions>
 				<Box
@@ -74,7 +55,7 @@ export const InlineEditingControl = createControl(
 					{ ...attributes }
 					{ ...props }
 				>
-					<InlineEditor value={ actualValue || '' } setValue={ handleChange } />
+					<InlineEditor value={ value || '' } setValue={ handleChange } />
 				</Box>
 			</ControlActions>
 		);