@elementor/editor-controls 4.1.0-747 → 4.1.0-749

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.1.0-747",
+  "version": "4.1.0-749",
   "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.1.0-747",
-    "@elementor/editor-elements": "4.1.0-747",
-    "@elementor/editor-props": "4.1.0-747",
-    "@elementor/editor-responsive": "4.1.0-747",
-    "@elementor/editor-ui": "4.1.0-747",
-    "@elementor/editor-v1-adapters": "4.1.0-747",
-    "@elementor/env": "4.1.0-747",
-    "@elementor/http-client": "4.1.0-747",
+    "@elementor/editor-current-user": "4.1.0-749",
+    "@elementor/editor-elements": "4.1.0-749",
+    "@elementor/editor-props": "4.1.0-749",
+    "@elementor/editor-responsive": "4.1.0-749",
+    "@elementor/editor-ui": "4.1.0-749",
+    "@elementor/editor-v1-adapters": "4.1.0-749",
+    "@elementor/env": "4.1.0-749",
+    "@elementor/http-client": "4.1.0-749",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-747",
-    "@elementor/events": "4.1.0-747",
-    "@elementor/query": "4.1.0-747",
-    "@elementor/session": "4.1.0-747",
+    "@elementor/locations": "4.1.0-749",
+    "@elementor/events": "4.1.0-749",
+    "@elementor/query": "4.1.0-749",
+    "@elementor/session": "4.1.0-749",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-747",
-    "@elementor/wp-media": "4.1.0-747",
+    "@elementor/utils": "4.1.0-749",
+    "@elementor/wp-media": "4.1.0-749",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/inline-editor.tsx

@@ -16,7 +16,7 @@ import Underline from '@tiptap/extension-underline';
 import { type EditorProps, type EditorView } from '@tiptap/pm/view';
 import { type Editor, EditorContent, useEditor } from '@tiptap/react';
 
-import { isEmpty } from '../utils/inline-editing';
+import { htmlToPlainText, isEmpty } from '../utils/inline-editing';
 
 const ITALIC_KEYBOARD_SHORTCUT = 'i';
 const BOLD_KEYBOARD_SHORTCUT = 'b';
@@ -141,7 +141,7 @@ export const InlineEditor = React.forwardRef( ( props: InlineEditorProps, ref )
 			attributes: {
 				...( editorProps.attributes ?? {} ),
 				role: 'textbox',
-				...( placeholder ? { 'data-placeholder': placeholder } : {} ),
+				...( placeholder ? { 'data-placeholder': htmlToPlainText( placeholder ) } : {} ),
 				...( value === null || value === '' ? { class: 'is-empty' } : {} ),
 			},
 		},

package/src/controls/html-tag-control.tsx

@@ -9,6 +9,7 @@ import { useBoundProp } from '../bound-prop-context';
 import { ConditionalControlInfotip } from '../components/conditional-control-infotip';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
+import { type ControlProps } from '../utils/types';
 
 export type SelectOption = {
 	label: string;
@@ -16,15 +17,22 @@ export type SelectOption = {
 	disabled?: boolean;
 };
 
-type Props = {
+type Props = ControlProps< {
 	options: SelectOption[];
 	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
 	fallbackLabels?: Record< string, string >;
-};
+} >;
 
 const StyledSelect = styled( Select )( () => ( { '.MuiSelect-select.Mui-disabled': { cursor: 'not-allowed' } } ) );
 
-export const HtmlTagControl = createControl( ( { options, onChange, fallbackLabels = {} }: Props ) => {
+export const HtmlTagControl = createControl( ( props: Props ) => {
+	const {
+		options,
+		onChange,
+		fallbackLabels = {},
+		context: { elementId },
+	} = props;
+
 	const { value, setValue, disabled, placeholder } = useBoundProp( stringPropTypeUtil );
 	const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
 		const newValue = event.target.value || null;
@@ -33,7 +41,7 @@ export const HtmlTagControl = createControl( ( { options, onChange, fallbackLabe
 		setValue( newValue );
 	};
 
-	const elementLabel = getElementLabel() ?? 'element';
+	const elementLabel = getElementLabel( elementId ) ?? 'element';
 	const infoTipProps = {
 		title: __( 'HTML Tag', 'elementor' ),
 		/* translators: %s is the element name. */
@@ -78,8 +86,8 @@ export const HtmlTagControl = createControl( ( { options, onChange, fallbackLabe
 					disabled={ disabled }
 					fullWidth
 				>
-					{ options.map( ( { label, ...props } ) => (
-						<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
+					{ options.map( ( { label, ...itemProps } ) => (
+						<MenuListItem key={ itemProps.value } { ...itemProps } value={ itemProps.value ?? '' }>
 							{ label }
 						</MenuListItem>
 					) ) }

package/src/utils/inline-editing.ts

@@ -9,3 +9,14 @@ export function isEmpty( value: string | null = '' ) {
 
 	return ! pseudoElement.textContent?.length;
 }
+
+export function htmlToPlainText( html: string | null ): string {
+	if ( ! html ) {
+		return '';
+	}
+
+	const normalizedHtml = html.replace( /<br\s*\/?>/gi, '\n' ).replace( /<\/p>\s*<p[^>]*>/gi, '\n' );
+	const doc = new DOMParser().parseFromString( normalizedHtml, 'text/html' );
+
+	return doc.body.textContent ?? '';
+}