@elementor/editor-controls 4.3.0-1058 → 4.3.0-1059

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-1058",
+  "version": "4.3.0-1059",
   "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-1058",
-    "@elementor/editor-elements": "4.3.0-1058",
-    "@elementor/editor-props": "4.3.0-1058",
-    "@elementor/editor-responsive": "4.3.0-1058",
-    "@elementor/editor-ui": "4.3.0-1058",
-    "@elementor/editor-v1-adapters": "4.3.0-1058",
-    "@elementor/env": "4.3.0-1058",
-    "@elementor/events": "4.3.0-1058",
-    "@elementor/http-client": "4.3.0-1058",
+    "@elementor/editor-current-user": "4.3.0-1059",
+    "@elementor/editor-elements": "4.3.0-1059",
+    "@elementor/editor-props": "4.3.0-1059",
+    "@elementor/editor-responsive": "4.3.0-1059",
+    "@elementor/editor-ui": "4.3.0-1059",
+    "@elementor/editor-v1-adapters": "4.3.0-1059",
+    "@elementor/env": "4.3.0-1059",
+    "@elementor/events": "4.3.0-1059",
+    "@elementor/http-client": "4.3.0-1059",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.3.0-1058",
-    "@elementor/query": "4.3.0-1058",
-    "@elementor/schema": "4.3.0-1058",
-    "@elementor/session": "4.3.0-1058",
+    "@elementor/locations": "4.3.0-1059",
+    "@elementor/query": "4.3.0-1059",
+    "@elementor/schema": "4.3.0-1059",
+    "@elementor/session": "4.3.0-1059",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1058",
-    "@elementor/wp-media": "4.3.0-1058",
+    "@elementor/utils": "4.3.0-1059",
+    "@elementor/wp-media": "4.3.0-1059",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/components/inline-editor-toolbar.tsx

@@ -32,13 +32,19 @@ export type InlineEditorToolbarProps = {
 	editor: Editor;
 	elementId?: ElementID;
 	sx?: SxProps< Theme >;
+	inControlPanel?: boolean;
 };
 
 type ToolbarButtonKeys = keyof typeof toolbarButtons;
 
 type FormatAction = Omit< ToolbarButtonKeys, 'clear' >;
 
-export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEditorToolbarProps ) => {
+export const InlineEditorToolbar = ( {
+	editor,
+	elementId,
+	sx = {},
+	inControlPanel = false,
+}: InlineEditorToolbarProps ) => {
 	const [ urlValue, setUrlValue ] = useState( '' );
 	const [ openInNewTab, setOpenInNewTab ] = useState( false );
 	const toolbarRef = useRef< HTMLDivElement >( null );
@@ -101,8 +107,10 @@ export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEdito
 	};
 
 	useEffect( () => {
-		editor?.commands?.focus();
-	}, [ editor ] );
+		if ( ! inControlPanel ) {
+			editor?.commands?.focus();
+		}
+	}, [ editor, inControlPanel ] );
 
 	return (
 		<Box
@@ -118,6 +126,20 @@ export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEdito
 				visibility: linkPopupState.isOpen ? 'hidden' : 'visible',
 				pointerEvents: linkPopupState.isOpen ? 'none' : 'all',
 				...sx,
+				...( inControlPanel && {
+					width: '100%',
+					justifyContent: 'center',
+					flexDirection: 'row',
+					backgroundColor: 'transparent',
+					boxShadow: 'none',
+					borderWidth: '0',
+					borderBottom: '1px solid',
+					borderBottomColor: 'grey.200',
+					borderRadius: '0',
+					position: 'absolute',
+					top: '0',
+					left: '0',
+				} ),
 			} }
 		>
 			<Tooltip title={ clearButton.label } placement="top" sx={ { borderRadius: '8px' } }>
@@ -144,6 +166,15 @@ export const InlineEditorToolbar = ( { editor, elementId, sx = {} }: InlineEdito
 								marginLeft: 0,
 							},
 						},
+					...( inControlPanel && {
+						justifyContent: 'space-between',
+						width: '100%',
+						'& svg': {
+							width: '0.7rem',
+							height: '0.7rem',
+							fill: 'black',
+						},
+					} ),
 				} }
 			>
 				{ formatButtonsList.map( ( button ) => (

package/src/components/inline-editor.tsx

@@ -33,6 +33,7 @@ type InlineEditorProps = {
 	autofocus?: boolean;
 	expectedTag?: string | null;
 	onEditorCreate?: Dispatch< SetStateAction< Editor | null > >;
+	onEditorDestroy?: () => void;
 	wrapperClassName?: string;
 	onSelectionEnd?: ( view: EditorView ) => void;
 	mountElement?: HTMLElement | null;
@@ -50,6 +51,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 		onBlur = undefined,
 		expectedTag = null,
 		onEditorCreate,
+		onEditorDestroy,
 		wrapperClassName,
 		onSelectionEnd,
 		mountElement = null,
@@ -146,6 +148,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 			},
 		},
 		onCreate: onEditorCreate ? ( { editor: mountedEditor } ) => onEditorCreate( mountedEditor ) : undefined,
+		onDestroy: onEditorDestroy ? () => onEditorDestroy() : undefined,
 		onBlur: mountElement ? undefined : () => onBlurRef.current?.(),
 		onSelectionUpdate: onSelectionEnd
 			? ( { editor: updatedEditor } ) => onSelectionEnd( updatedEditor.view )

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

@@ -1,39 +1,54 @@
 import * as React from 'react';
-import { type ComponentProps, useCallback } from 'react';
+import { type ComponentProps, useCallback, useState } from 'react';
 import { escapedHtmlPropTypeUtil } from '@elementor/editor-props';
 import { Box, type SxProps, type Theme } from '@elementor/ui';
+import { type Editor } from '@tiptap/react';
 
 import { useBoundProp, usePropKeyContext } from '../bound-prop-context';
 import { InlineEditor } from '../components/inline-editor';
+import { InlineEditorToolbar } from '../components/inline-editor-toolbar';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 import { extractInlineHtmlContent } from '../utils/inline-editing';
+import { type ControlProps } from '../utils/types';
 
-export const InlineEditingControl = createControl(
-	( {
-		sx,
-		attributes,
-		props,
-	}: {
-		sx?: SxProps< Theme >;
-		attributes?: Record< string, string >;
-		props?: ComponentProps< 'div' >;
-	} ) => {
-		const { setValue, placeholder, value } = useBoundProp( escapedHtmlPropTypeUtil );
-		const { value: rawValue } = usePropKeyContext();
-		const content = value ?? extractInlineHtmlContent( rawValue );
+type Props = ControlProps< {
+	sx?: SxProps< Theme >;
+	attributes?: Record< string, string >;
+	props?: ComponentProps< 'div' >;
+} >;
 
-		const handleChange = useCallback(
-			( newValue: unknown ) => {
-				const html = ( newValue ?? '' ) as string;
+export const InlineEditingControl = createControl( ( { sx, attributes, props, context: { elementId } }: Props ) => {
+	const { setValue, placeholder, value } = useBoundProp( escapedHtmlPropTypeUtil );
+	const { value: rawValue } = usePropKeyContext();
+	const content = value ?? extractInlineHtmlContent( rawValue );
+	const [ editor, setEditor ] = useState< Editor | null >( null );
 
-				setValue( html );
-			},
-			[ setValue ]
-		);
+	const handleChange = useCallback(
+		( newValue: unknown ) => {
+			const html = ( newValue ?? '' ) as string;
 
-		return (
-			<ControlActions>
+			setValue( html );
+		},
+		[ setValue ]
+	);
+
+	return (
+		<ControlActions>
+			<Box sx={ { position: 'relative' } }>
+				{ editor && editor.isEditable && (
+					<InlineEditorToolbar
+						editor={ editor }
+						elementId={ elementId }
+						sx={ {
+							boxShadow: 'none',
+							border: '1px solid',
+							borderColor: 'grey.200',
+							mb: 0.5,
+						} }
+						inControlPanel={ true }
+					/>
+				) }
 				<Box
 					sx={ {
 						p: 0.8,
@@ -52,7 +67,7 @@ export const InlineEditingControl = createControl(
 							outline: 'none',
 						},
 						'& .ProseMirror': {
-							minHeight: '70px',
+							minHeight: '100px',
 							fontSize: '12px',
 							'& a': {
 								color: 'inherit',
@@ -77,9 +92,18 @@ export const InlineEditingControl = createControl(
 					{ ...attributes }
 					{ ...props }
 				>
-					<InlineEditor value={ content } setValue={ handleChange } placeholder={ placeholder ?? null } />
+					<InlineEditor
+						value={ content }
+						setValue={ handleChange }
+						placeholder={ placeholder ?? null }
+						onEditorCreate={ setEditor }
+						onEditorDestroy={ () => setEditor( null ) }
+						sx={ {
+							paddingBlockStart: 5,
+						} }
+					/>
 				</Box>
-			</ControlActions>
-		);
-	}
-);
+			</Box>
+		</ControlActions>
+	);
+} );