@elementor/editor-controls 3.35.0-375 → 3.35.0-377

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-375",
+  "version": "3.35.0-377",
   "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-375",
-    "@elementor/editor-elements": "3.35.0-375",
-    "@elementor/editor-props": "3.35.0-375",
-    "@elementor/editor-responsive": "3.35.0-375",
-    "@elementor/editor-ui": "3.35.0-375",
-    "@elementor/editor-v1-adapters": "3.35.0-375",
-    "@elementor/env": "3.35.0-375",
-    "@elementor/http-client": "3.35.0-375",
+    "@elementor/editor-current-user": "3.35.0-377",
+    "@elementor/editor-elements": "3.35.0-377",
+    "@elementor/editor-props": "3.35.0-377",
+    "@elementor/editor-responsive": "3.35.0-377",
+    "@elementor/editor-ui": "3.35.0-377",
+    "@elementor/editor-v1-adapters": "3.35.0-377",
+    "@elementor/env": "3.35.0-377",
+    "@elementor/http-client": "3.35.0-377",
     "@elementor/icons": "^1.63.0",
-    "@elementor/locations": "3.35.0-375",
-    "@elementor/mixpanel": "3.35.0-375",
-    "@elementor/query": "3.35.0-375",
-    "@elementor/session": "3.35.0-375",
+    "@elementor/locations": "3.35.0-377",
+    "@elementor/mixpanel": "3.35.0-377",
+    "@elementor/query": "3.35.0-377",
+    "@elementor/session": "3.35.0-377",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-375",
-    "@elementor/wp-media": "3.35.0-375",
+    "@elementor/utils": "3.35.0-377",
+    "@elementor/wp-media": "3.35.0-377",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/inline-editor.tsx

@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { type DependencyList, useEffect, useRef } from 'react';
+import {
+	type DependencyList,
+	forwardRef,
+	type PropsWithChildren,
+	type RefObject,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
 import { bindPopover, Box, ClickAwayListener, Popover, type SxProps, type Theme, usePopupState } from '@elementor/ui';
 import Bold from '@tiptap/extension-bold';
 import Document from '@tiptap/extension-document';
@@ -14,7 +22,7 @@ import Superscript from '@tiptap/extension-superscript';
 import Text from '@tiptap/extension-text';
 import Underline from '@tiptap/extension-underline';
 import { type EditorView } from '@tiptap/pm/view';
-import { EditorContent, useEditor } from '@tiptap/react';
+import { type Editor, EditorContent, useEditor } from '@tiptap/react';
 
 import { isEmpty } from '../utils/inline-editing';
 import { InlineEditorToolbar } from './inline-editor-toolbar';
@@ -62,8 +70,8 @@ const calcSelectionCenter = (
 	return { left, top };
 };
 
-type WrapperProps = React.PropsWithChildren< {
-	containerRef: React.RefObject< HTMLDivElement >;
+type WrapperProps = PropsWithChildren< {
+	containerRef: RefObject< HTMLDivElement >;
 	editor: ReturnType< typeof useEditor >;
 	sx: SxProps< Theme >;
 	onBlur?: ( event: Event ) => void;
@@ -96,7 +104,7 @@ const Wrapper = ( { children, containerRef, editor, sx, onBlur }: WrapperProps )
 	);
 };
 
-export const InlineEditor = React.forwardRef(
+export const InlineEditor = forwardRef(
 	(
 		{
 			value,
@@ -111,11 +119,11 @@ export const InlineEditor = React.forwardRef(
 		}: InlineEditorProps,
 		ref
 	) => {
-		const containerRef = React.useRef< HTMLDivElement >( null );
+		const containerRef = useRef< HTMLDivElement >( null );
 		const popupState = usePopupState( { variant: 'popover', disableAutoFocus: true } );
-		const [ hasSelectedContent, setHasSelectedContent ] = React.useState( false );
+		const [ hasSelectedContent, setHasSelectedContent ] = useState( false );
 		const documentContentSettings = !! expectedTag ? 'block+' : 'inline*';
-		const [ selectionRect, setSelectionRect ] = React.useState< { left: number; top: number } | null >( null );
+		const [ selectionRect, setSelectionRect ] = useState< { left: number; top: number } | null >( null );
 
 		const onSelectionEnd = ( view: EditorView ) => {
 			const hasSelection = ! view.state.selection.empty;
@@ -145,6 +153,12 @@ export const InlineEditor = React.forwardRef(
 			  }
 			: undefined;
 
+		const onUpdate = ( { editor: updatedEditor }: { editor: Editor } ) => {
+			const newValue: string | null = updatedEditor.getHTML();
+
+			setValue( isEmpty( newValue ) ? null : newValue );
+		};
+
 		const editor = useEditor( {
 			extensions: [
 				Document.extend( {
@@ -190,11 +204,7 @@ export const InlineEditor = React.forwardRef(
 				} ),
 			],
 			content: value,
-			onUpdate: ( { editor: updatedEditor } ) => {
-				const newValue: string | null = updatedEditor.getHTML();
-
-				setValue( isEmpty( newValue ) ? null : newValue );
-			},
+			onUpdate,
 			autofocus,
 			editorProps: {
 				attributes: {

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

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { htmlPropTypeUtil } from '@elementor/editor-props';
+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 { Box, type SxProps, type Theme } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
@@ -15,11 +22,24 @@ export const InlineEditingControl = createControl(
 	}: {
 		sx?: SxProps< Theme >;
 		attributes?: Record< string, string >;
-		props?: React.ComponentProps< 'div' >;
+		props?: ComponentProps< 'div' >;
 	} ) => {
-		const { value, setValue } = useBoundProp( htmlPropTypeUtil );
+		const { value, setValue, bind } = useBoundProp( htmlPropTypeUtil );
+		const [ actualValue, setActualValue ] = useState< HtmlPropValue[ 'value' ] >( value );
 		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
@@ -54,7 +74,7 @@ export const InlineEditingControl = createControl(
 					{ ...attributes }
 					{ ...props }
 				>
-					<InlineEditor value={ value || '' } setValue={ handleChange } />
+					<InlineEditor value={ actualValue || '' } setValue={ handleChange } />
 				</Box>
 			</ControlActions>
 		);