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

package/dist/index.d.mts

@@ -279,12 +279,12 @@ type SelectOption = {
     value: StringPropValue['value'];
     disabled?: boolean;
 };
-type Props$5 = {
+type Props$5 = ControlProps<{
     options: SelectOption[];
     onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
     fallbackLabels?: Record<string, string>;
-};
-declare const HtmlTagControl: ControlComponent$1<({ options, onChange, fallbackLabels }: Props$5) => React$1.JSX.Element>;
+}>;
+declare const HtmlTagControl: ControlComponent$1<(props: Props$5) => React$1.JSX.Element>;
 
 type Props$4 = {
     queryOptions: {

package/dist/index.d.ts

@@ -279,12 +279,12 @@ type SelectOption = {
     value: StringPropValue['value'];
     disabled?: boolean;
 };
-type Props$5 = {
+type Props$5 = ControlProps<{
     options: SelectOption[];
     onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
     fallbackLabels?: Record<string, string>;
-};
-declare const HtmlTagControl: ControlComponent$1<({ options, onChange, fallbackLabels }: Props$5) => React$1.JSX.Element>;
+}>;
+declare const HtmlTagControl: ControlComponent$1<(props: Props$5) => React$1.JSX.Element>;
 
 type Props$4 = {
     queryOptions: {

package/dist/index.js

@@ -3813,14 +3813,20 @@ var ConditionalControlInfotip = React66.forwardRef(
 
 // src/controls/html-tag-control.tsx
 var StyledSelect = (0, import_ui52.styled)(import_ui52.Select)(() => ({ ".MuiSelect-select.Mui-disabled": { cursor: "not-allowed" } }));
-var HtmlTagControl = createControl(({ options, onChange, fallbackLabels = {} }) => {
+var HtmlTagControl = createControl((props) => {
+  const {
+    options,
+    onChange,
+    fallbackLabels = {},
+    context: { elementId }
+  } = props;
   const { value, setValue, disabled, placeholder } = useBoundProp(import_editor_props25.stringPropTypeUtil);
   const handleChange = (event) => {
     const newValue = event.target.value || null;
     onChange?.(newValue, value);
     setValue(newValue);
   };
-  const elementLabel = (0, import_editor_elements3.getElementLabel)() ?? "element";
+  const elementLabel = (0, import_editor_elements3.getElementLabel)(elementId) ?? "element";
   const infoTipProps = {
     title: (0, import_i18n24.__)("HTML Tag", "elementor"),
     /* translators: %s is the element name. */
@@ -3854,7 +3860,7 @@ var HtmlTagControl = createControl(({ options, onChange, fallbackLabels = {} })
       disabled,
       fullWidth: true
     },
-    options.map(({ label, ...props }) => /* @__PURE__ */ React67.createElement(import_editor_ui7.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
+    options.map(({ label, ...itemProps }) => /* @__PURE__ */ React67.createElement(import_editor_ui7.MenuListItem, { key: itemProps.value, ...itemProps, value: itemProps.value ?? "" }, label))
   )));
 });
 
@@ -6515,6 +6521,14 @@ function isEmpty(value = "") {
   pseudoElement.innerHTML = value;
   return !pseudoElement.textContent?.length;
 }
+function htmlToPlainText(html) {
+  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 ?? "";
+}
 
 // src/components/inline-editor.tsx
 var ITALIC_KEYBOARD_SHORTCUT = "i";
@@ -6611,7 +6625,7 @@ var InlineEditor = React100.forwardRef((props, ref) => {
       attributes: {
         ...editorProps.attributes ?? {},
         role: "textbox",
-        ...placeholder ? { "data-placeholder": placeholder } : {},
+        ...placeholder ? { "data-placeholder": htmlToPlainText(placeholder) } : {},
         ...value === null || value === "" ? { class: "is-empty" } : {}
       }
     },