@elementor/editor-canvas 4.3.0-1046 → 4.3.0-1048

package/dist/index.js

@@ -2037,6 +2037,40 @@ var dateTimeTransformer = createTransformer((values) => {
   }).join(" ");
 });
 
+// src/utils/sanitize-escaped-html.ts
+var import_dompurify = __toESM(require("dompurify"));
+var ALLOWED_NON_OPERATIONAL_ATTRS = [
+  "href",
+  "target",
+  "class",
+  "id",
+  "style",
+  "title",
+  "lang",
+  "dir",
+  "role"
+];
+function getAllowedHtmlWrapperTags() {
+  return window.elementorCommon?.config?.allowedHTMLWrapperTags ?? [];
+}
+function sanitizeEscapedHtml(value) {
+  if (!value) {
+    return "";
+  }
+  const allowedTags = [...getAllowedHtmlWrapperTags()];
+  return import_dompurify.default.sanitize(value, {
+    ALLOWED_TAGS: allowedTags,
+    ALLOWED_ATTR: [...ALLOWED_NON_OPERATIONAL_ATTRS],
+    ALLOW_DATA_ATTR: true,
+    ALLOW_ARIA_ATTR: true
+  });
+}
+
+// src/transformers/settings/escaped-html-transformer.ts
+var escapedHtmlTransformer = createTransformer((value) => {
+  return sanitizeEscapedHtml(value);
+});
+
 // src/transformers/settings/html-v2-transformer.ts
 var htmlV2Transformer = createTransformer((value) => {
   return value?.content ?? "";
@@ -2114,11 +2148,11 @@ var plainTransformer = createTransformer((value) => {
 });
 
 // src/transformers/shared/svg-src-transformer.ts
-var import_dompurify = __toESM(require("dompurify"));
+var import_dompurify2 = __toESM(require("dompurify"));
 var import_wp_media2 = require("@elementor/wp-media");
 var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
 function processSvgContent(svgText) {
-  const sanitized = import_dompurify.default.sanitize(svgText, {
+  const sanitized = import_dompurify2.default.sanitize(svgText, {
     USE_PROFILES: { svg: true, svgFilters: true }
   });
   const parser = new DOMParser();
@@ -2189,7 +2223,7 @@ var videoSrcTransformer = createTransformer(async (value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).register("date-range", dateRangeTransformer).register("time-range", timeRangeTransformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).register("escaped-html", escapedHtmlTransformer).register("date-range", dateRangeTransformer).register("time-range", timeRangeTransformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -2578,11 +2612,11 @@ function createDomRenderer() {
     render: environment.render
   };
 }
-function getAllowedHtmlWrapperTags() {
+function getAllowedHtmlWrapperTags2() {
   return window.elementorCommon?.config?.allowedHTMLWrapperTags ?? [];
 }
 function escapeHtmlTag(value) {
-  const allowedTags = getAllowedHtmlWrapperTags();
+  const allowedTags = getAllowedHtmlWrapperTags2();
   const normalizedTag = value?.toLowerCase?.() ?? "";
   return allowedTags.includes(normalizedTag) ? value : "div";
 }
@@ -3516,7 +3550,7 @@ var import_editor_props3 = require("@elementor/editor-props");
 var hasKey = (propType) => {
   return "key" in propType;
 };
-var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props3.htmlV3PropTypeUtil.key, import_editor_props3.stringPropTypeUtil.key]);
+var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props3.escapedHtmlPropTypeUtil.key, import_editor_props3.htmlV3PropTypeUtil.key, import_editor_props3.stringPropTypeUtil.key]);
 var isCoreTextPropTypeKey = (key) => {
   return TEXT_PROP_TYPE_KEYS.has(key);
 };
@@ -3536,7 +3570,7 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   if (rawValue === null || rawValue === void 0) {
     return isAllowedBySchema(propTypeFromSchema);
   }
-  return import_editor_props3.htmlV3PropTypeUtil.isValid(rawValue) || import_editor_props3.stringPropTypeUtil.isValid(rawValue);
+  return import_editor_props3.escapedHtmlPropTypeUtil.isValid(rawValue) || import_editor_props3.htmlV3PropTypeUtil.isValid(rawValue) || import_editor_props3.stringPropTypeUtil.isValid(rawValue);
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
@@ -3621,17 +3655,26 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
+    if (import_editor_props4.escapedHtmlPropTypeUtil.isValid(propValue)) {
+      return import_editor_props4.escapedHtmlPropTypeUtil.extract(propValue) ?? "";
+    }
     const extracted = import_editor_props4.htmlV3PropTypeUtil.extract(propValue);
     return import_editor_props4.stringPropTypeUtil.extract(extracted?.content ?? null) ?? "";
   }
+  createContentPropValue(value) {
+    const content = value || "";
+    const propTypeKey = this.getInlineEditablePropTypeKey();
+    if (propTypeKey === import_editor_props4.htmlV3PropTypeUtil.key) {
+      return import_editor_props4.htmlV3PropTypeUtil.create({
+        content: import_editor_props4.stringPropTypeUtil.create(content),
+        children: []
+      });
+    }
+    return import_editor_props4.escapedHtmlPropTypeUtil.create(content);
+  }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
-    const html = value || "";
-    const parsed = (0, import_editor_props4.parseHtmlChildren)(html);
-    const valueToSave = import_editor_props4.htmlV3PropTypeUtil.create({
-      content: parsed.content ? import_editor_props4.stringPropTypeUtil.create(parsed.content) : null,
-      children: parsed.children
-    });
+    const valueToSave = this.createContentPropValue(value);
     (0, import_editor_v1_adapters13.undoable)(
       {
         do: () => {
@@ -3660,7 +3703,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
       return null;
     }
     if (propType.kind === "union") {
-      const textKeys = [import_editor_props4.htmlV3PropTypeUtil.key, import_editor_props4.stringPropTypeUtil.key];
+      const textKeys = [import_editor_props4.escapedHtmlPropTypeUtil.key, import_editor_props4.htmlV3PropTypeUtil.key, import_editor_props4.stringPropTypeUtil.key];
       for (const key of textKeys) {
         if (propType.prop_types[key]) {
           return key;
@@ -3932,10 +3975,7 @@ var tabModelExtensions = {
       ...paragraphElement,
       settings: {
         ...paragraphElement.settings,
-        paragraph: import_editor_props5.htmlV3PropTypeUtil.create({
-          content: import_editor_props5.stringPropTypeUtil.create(`Tab ${position}`),
-          children: []
-        })
+        paragraph: import_editor_props5.escapedHtmlPropTypeUtil.create(`Tab ${position}`)
       }
     };
     return [updatedParagraph, ...elements.slice(1)];

package/dist/index.mjs

@@ -1989,6 +1989,40 @@ var dateTimeTransformer = createTransformer((values) => {
   }).join(" ");
 });
 
+// src/utils/sanitize-escaped-html.ts
+import DOMPurify from "dompurify";
+var ALLOWED_NON_OPERATIONAL_ATTRS = [
+  "href",
+  "target",
+  "class",
+  "id",
+  "style",
+  "title",
+  "lang",
+  "dir",
+  "role"
+];
+function getAllowedHtmlWrapperTags() {
+  return window.elementorCommon?.config?.allowedHTMLWrapperTags ?? [];
+}
+function sanitizeEscapedHtml(value) {
+  if (!value) {
+    return "";
+  }
+  const allowedTags = [...getAllowedHtmlWrapperTags()];
+  return DOMPurify.sanitize(value, {
+    ALLOWED_TAGS: allowedTags,
+    ALLOWED_ATTR: [...ALLOWED_NON_OPERATIONAL_ATTRS],
+    ALLOW_DATA_ATTR: true,
+    ALLOW_ARIA_ATTR: true
+  });
+}
+
+// src/transformers/settings/escaped-html-transformer.ts
+var escapedHtmlTransformer = createTransformer((value) => {
+  return sanitizeEscapedHtml(value);
+});
+
 // src/transformers/settings/html-v2-transformer.ts
 var htmlV2Transformer = createTransformer((value) => {
   return value?.content ?? "";
@@ -2066,11 +2100,11 @@ var plainTransformer = createTransformer((value) => {
 });
 
 // src/transformers/shared/svg-src-transformer.ts
-import DOMPurify from "dompurify";
+import DOMPurify2 from "dompurify";
 import { getMediaAttachment as getMediaAttachment2 } from "@elementor/wp-media";
 var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
 function processSvgContent(svgText) {
-  const sanitized = DOMPurify.sanitize(svgText, {
+  const sanitized = DOMPurify2.sanitize(svgText, {
     USE_PROFILES: { svg: true, svgFilters: true }
   });
   const parser = new DOMParser();
@@ -2141,7 +2175,7 @@ var videoSrcTransformer = createTransformer(async (value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).register("date-range", dateRangeTransformer).register("time-range", timeRangeTransformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).register("escaped-html", escapedHtmlTransformer).register("date-range", dateRangeTransformer).register("time-range", timeRangeTransformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -2530,11 +2564,11 @@ function createDomRenderer() {
     render: environment.render
   };
 }
-function getAllowedHtmlWrapperTags() {
+function getAllowedHtmlWrapperTags2() {
   return window.elementorCommon?.config?.allowedHTMLWrapperTags ?? [];
 }
 function escapeHtmlTag(value) {
-  const allowedTags = getAllowedHtmlWrapperTags();
+  const allowedTags = getAllowedHtmlWrapperTags2();
   const normalizedTag = value?.toLowerCase?.() ?? "";
   return allowedTags.includes(normalizedTag) ? value : "div";
 }
@@ -3193,8 +3227,8 @@ import { createRoot } from "react-dom/client";
 import * as React11 from "react";
 import { getContainer as getContainer2, getElementLabel, getElementType as getElementType2 } from "@elementor/editor-elements";
 import {
+  escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2,
   htmlV3PropTypeUtil as htmlV3PropTypeUtil2,
-  parseHtmlChildren,
   stringPropTypeUtil as stringPropTypeUtil2
 } from "@elementor/editor-props";
 import { __privateRunCommandSync as runCommandSync, getCurrentEditMode, undoable } from "@elementor/editor-v1-adapters";
@@ -3473,11 +3507,15 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
-import { htmlV3PropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
+import {
+  escapedHtmlPropTypeUtil,
+  htmlV3PropTypeUtil,
+  stringPropTypeUtil
+} from "@elementor/editor-props";
 var hasKey = (propType) => {
   return "key" in propType;
 };
-var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([htmlV3PropTypeUtil.key, stringPropTypeUtil.key]);
+var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([escapedHtmlPropTypeUtil.key, htmlV3PropTypeUtil.key, stringPropTypeUtil.key]);
 var isCoreTextPropTypeKey = (key) => {
   return TEXT_PROP_TYPE_KEYS.has(key);
 };
@@ -3497,7 +3535,7 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   if (rawValue === null || rawValue === void 0) {
     return isAllowedBySchema(propTypeFromSchema);
   }
-  return htmlV3PropTypeUtil.isValid(rawValue) || stringPropTypeUtil.isValid(rawValue);
+  return escapedHtmlPropTypeUtil.isValid(rawValue) || htmlV3PropTypeUtil.isValid(rawValue) || stringPropTypeUtil.isValid(rawValue);
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
@@ -3582,17 +3620,26 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
+    if (escapedHtmlPropTypeUtil2.isValid(propValue)) {
+      return escapedHtmlPropTypeUtil2.extract(propValue) ?? "";
+    }
     const extracted = htmlV3PropTypeUtil2.extract(propValue);
     return stringPropTypeUtil2.extract(extracted?.content ?? null) ?? "";
   }
+  createContentPropValue(value) {
+    const content = value || "";
+    const propTypeKey = this.getInlineEditablePropTypeKey();
+    if (propTypeKey === htmlV3PropTypeUtil2.key) {
+      return htmlV3PropTypeUtil2.create({
+        content: stringPropTypeUtil2.create(content),
+        children: []
+      });
+    }
+    return escapedHtmlPropTypeUtil2.create(content);
+  }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
-    const html = value || "";
-    const parsed = parseHtmlChildren(html);
-    const valueToSave = htmlV3PropTypeUtil2.create({
-      content: parsed.content ? stringPropTypeUtil2.create(parsed.content) : null,
-      children: parsed.children
-    });
+    const valueToSave = this.createContentPropValue(value);
     undoable(
       {
         do: () => {
@@ -3621,7 +3668,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
       return null;
     }
     if (propType.kind === "union") {
-      const textKeys = [htmlV3PropTypeUtil2.key, stringPropTypeUtil2.key];
+      const textKeys = [escapedHtmlPropTypeUtil2.key, htmlV3PropTypeUtil2.key, stringPropTypeUtil2.key];
       for (const key of textKeys) {
         if (propType.prop_types[key]) {
           return key;
@@ -3877,7 +3924,7 @@ function createNestedTemplatedType(type, renderer, element) {
 }
 
 // src/legacy/tabs-model-extensions.ts
-import { htmlV3PropTypeUtil as htmlV3PropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
+import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil3 } from "@elementor/editor-props";
 var tabModelExtensions = {
   modifyDefaultChildren(elements) {
     if (!Array.isArray(elements) || elements.length === 0) {
@@ -3893,10 +3940,7 @@ var tabModelExtensions = {
       ...paragraphElement,
       settings: {
         ...paragraphElement.settings,
-        paragraph: htmlV3PropTypeUtil3.create({
-          content: stringPropTypeUtil3.create(`Tab ${position}`),
-          children: []
-        })
+        paragraph: escapedHtmlPropTypeUtil3.create(`Tab ${position}`)
       }
     };
     return [updatedParagraph, ...elements.slice(1)];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.3.0-1046",
+  "version": "4.3.0-1048",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,26 +37,26 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-1046",
-    "@elementor/editor-controls": "4.3.0-1046",
-    "@elementor/editor-documents": "4.3.0-1046",
-    "@elementor/editor-elements": "4.3.0-1046",
-    "@elementor/editor-interactions": "4.3.0-1046",
-    "@elementor/editor-mcp": "4.3.0-1046",
-    "@elementor/editor-notifications": "4.3.0-1046",
-    "@elementor/editor-props": "4.3.0-1046",
-    "@elementor/editor-responsive": "4.3.0-1046",
-    "@elementor/editor-styles": "4.3.0-1046",
-    "@elementor/editor-styles-repository": "4.3.0-1046",
-    "@elementor/editor-ui": "4.3.0-1046",
-    "@elementor/editor-v1-adapters": "4.3.0-1046",
-    "@elementor/events": "4.3.0-1046",
-    "@elementor/http-client": "4.3.0-1046",
-    "@elementor/schema": "4.3.0-1046",
-    "@elementor/twing": "4.3.0-1046",
+    "@elementor/editor": "4.3.0-1048",
+    "@elementor/editor-controls": "4.3.0-1048",
+    "@elementor/editor-documents": "4.3.0-1048",
+    "@elementor/editor-elements": "4.3.0-1048",
+    "@elementor/editor-interactions": "4.3.0-1048",
+    "@elementor/editor-mcp": "4.3.0-1048",
+    "@elementor/editor-notifications": "4.3.0-1048",
+    "@elementor/editor-props": "4.3.0-1048",
+    "@elementor/editor-responsive": "4.3.0-1048",
+    "@elementor/editor-styles": "4.3.0-1048",
+    "@elementor/editor-styles-repository": "4.3.0-1048",
+    "@elementor/editor-ui": "4.3.0-1048",
+    "@elementor/editor-v1-adapters": "4.3.0-1048",
+    "@elementor/events": "4.3.0-1048",
+    "@elementor/http-client": "4.3.0-1048",
+    "@elementor/schema": "4.3.0-1048",
+    "@elementor/twing": "4.3.0-1048",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1046",
-    "@elementor/wp-media": "4.3.0-1046",
+    "@elementor/utils": "4.3.0-1048",
+    "@elementor/wp-media": "4.3.0-1048",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0",
     "dompurify": "^3.2.6"

package/src/init-settings-transformers.ts

@@ -3,6 +3,7 @@ import { attributesTransformer } from './transformers/settings/attributes-transf
 import { createClassesTransformer } from './transformers/settings/classes-transformer';
 import { dateRangeTransformer } from './transformers/settings/date-range-transformer';
 import { dateTimeTransformer } from './transformers/settings/date-time-transformer';
+import { escapedHtmlTransformer } from './transformers/settings/escaped-html-transformer';
 import { htmlV2Transformer } from './transformers/settings/html-v2-transformer';
 import { htmlV3Transformer } from './transformers/settings/html-v3-transformer';
 import { linkTransformer } from './transformers/settings/link-transformer';
@@ -27,6 +28,7 @@ export function initSettingsTransformers() {
 		.register( 'date-time', dateTimeTransformer )
 		.register( 'html-v2', htmlV2Transformer )
 		.register( 'html-v3', htmlV3Transformer )
+		.register( 'escaped-html', escapedHtmlTransformer )
 		.register( 'date-range', dateRangeTransformer )
 		.register( 'time-range', timeRangeTransformer )
 		.registerFallback( plainTransformer );

package/src/legacy/replacements/inline-editing/__tests__/inline-editing-eligibility.test.ts

@@ -13,10 +13,10 @@ const createUnionPropType = ( keys: string[] ): PropType =>
 	} ) as PropType;
 
 describe( 'isInlineEditingAllowed', () => {
-	it( 'should allow inline editing for html-v3 prop values', () => {
+	it( 'should allow inline editing for escaped-html prop values', () => {
 		expect(
 			isInlineEditingAllowed( {
-				rawValue: { $$type: 'html-v3', value: { content: { $$type: 'string', value: 'Hello' }, children: [] } },
+				rawValue: { $$type: 'escaped-html', value: 'Hello' },
 				propTypeFromSchema: null,
 			} )
 		).toBe( true );
@@ -40,11 +40,11 @@ describe( 'isInlineEditingAllowed', () => {
 		).toBe( false );
 	} );
 
-	it( 'should allow when value is unset but schema key is html-v3', () => {
+	it( 'should allow when value is unset but schema key is escaped-html', () => {
 		expect(
 			isInlineEditingAllowed( {
 				rawValue: undefined,
-				propTypeFromSchema: createPlainPropType( 'html-v3' ),
+				propTypeFromSchema: createPlainPropType( 'escaped-html' ),
 			} )
 		).toBe( true );
 	} );
@@ -67,16 +67,16 @@ describe( 'isInlineEditingAllowed', () => {
 		).toBe( false );
 	} );
 
-	it( 'should allow when value is unset and union schema includes html-v3', () => {
+	it( 'should allow when value is unset and union schema includes escaped-html', () => {
 		expect(
 			isInlineEditingAllowed( {
 				rawValue: undefined,
-				propTypeFromSchema: createUnionPropType( [ 'dynamic', 'html-v3' ] ),
+				propTypeFromSchema: createUnionPropType( [ 'dynamic', 'escaped-html' ] ),
 			} )
 		).toBe( true );
 	} );
 
-	it( 'should disallow when value is unset and union schema does not include html-v3/string', () => {
+	it( 'should disallow when value is unset and union schema does not include escaped-html/html-v3/string', () => {
 		expect(
 			isInlineEditingAllowed( {
 				rawValue: undefined,

package/src/legacy/replacements/inline-editing/inline-editing-elements.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { getContainer, getElementLabel, getElementType } from '@elementor/editor-elements';
 import {
+	escapedHtmlPropTypeUtil,
 	htmlV3PropTypeUtil,
-	parseHtmlChildren,
 	type PropType,
 	type PropValue,
 	stringPropTypeUtil,
@@ -126,20 +126,33 @@ export default class InlineEditingReplacement extends ReplacementBase {
 
 	getExtractedContentValue() {
 		const propValue = this.getInlineEditablePropValue();
+
+		if ( escapedHtmlPropTypeUtil.isValid( propValue ) ) {
+			return escapedHtmlPropTypeUtil.extract( propValue ) ?? '';
+		}
+
 		const extracted = htmlV3PropTypeUtil.extract( propValue );
 
 		return stringPropTypeUtil.extract( extracted?.content ?? null ) ?? '';
 	}
 
+	createContentPropValue( value: string | null ): PropValue {
+		const content = value || '';
+		const propTypeKey = this.getInlineEditablePropTypeKey();
+
+		if ( propTypeKey === htmlV3PropTypeUtil.key ) {
+			return htmlV3PropTypeUtil.create( {
+				content: stringPropTypeUtil.create( content ),
+				children: [],
+			} );
+		}
+
+		return escapedHtmlPropTypeUtil.create( content );
+	}
+
 	setContentValue( value: string | null ) {
 		const settingKey = this.getInlineEditablePropertyName();
-		const html = value || '';
-		const parsed = parseHtmlChildren( html );
-
-		const valueToSave = htmlV3PropTypeUtil.create( {
-			content: parsed.content ? stringPropTypeUtil.create( parsed.content ) : null,
-			children: parsed.children,
-		} );
+		const valueToSave = this.createContentPropValue( value );
 
 		undoable(
 			{
@@ -174,7 +187,7 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		}
 
 		if ( propType.kind === 'union' ) {
-			const textKeys = [ htmlV3PropTypeUtil.key, stringPropTypeUtil.key ];
+			const textKeys = [ escapedHtmlPropTypeUtil.key, htmlV3PropTypeUtil.key, stringPropTypeUtil.key ];
 
 			for ( const key of textKeys ) {
 				if ( propType.prop_types[ key ] ) {

package/src/legacy/replacements/inline-editing/inline-editing-eligibility.ts

@@ -1,4 +1,9 @@
-import { htmlV3PropTypeUtil, type PropType, stringPropTypeUtil } from '@elementor/editor-props';
+import {
+	escapedHtmlPropTypeUtil,
+	htmlV3PropTypeUtil,
+	type PropType,
+	stringPropTypeUtil,
+} from '@elementor/editor-props';
 
 type InlineEditingEligibilityArgs = {
 	rawValue: unknown;
@@ -9,7 +14,7 @@ const hasKey = ( propType: PropType ): propType is PropType & { key: unknown } =
 	return 'key' in propType;
 };
 
-const TEXT_PROP_TYPE_KEYS = new Set( [ htmlV3PropTypeUtil.key, stringPropTypeUtil.key ] );
+const TEXT_PROP_TYPE_KEYS = new Set( [ escapedHtmlPropTypeUtil.key, htmlV3PropTypeUtil.key, stringPropTypeUtil.key ] );
 
 const isCoreTextPropTypeKey = ( key: unknown ): boolean => {
 	return ( TEXT_PROP_TYPE_KEYS as Set< unknown > ).has( key );
@@ -36,5 +41,9 @@ export const isInlineEditingAllowed = ( { rawValue, propTypeFromSchema }: Inline
 		return isAllowedBySchema( propTypeFromSchema );
 	}
 
-	return htmlV3PropTypeUtil.isValid( rawValue ) || stringPropTypeUtil.isValid( rawValue );
+	return (
+		escapedHtmlPropTypeUtil.isValid( rawValue ) ||
+		htmlV3PropTypeUtil.isValid( rawValue ) ||
+		stringPropTypeUtil.isValid( rawValue )
+	);
 };

package/src/legacy/tabs-model-extensions.ts

@@ -1,4 +1,4 @@
-import { htmlV3PropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import { escapedHtmlPropTypeUtil } from '@elementor/editor-props';
 
 import { type ModelExtensions } from './create-nested-templated-element-type';
 import { registerModelExtensions } from './init-legacy-views';
@@ -23,10 +23,7 @@ const tabModelExtensions: ModelExtensions = {
 			...paragraphElement,
 			settings: {
 				...paragraphElement.settings,
-				paragraph: htmlV3PropTypeUtil.create( {
-					content: stringPropTypeUtil.create( `Tab ${ position }` ),
-					children: [],
-				} ),
+				paragraph: escapedHtmlPropTypeUtil.create( `Tab ${ position }` ),
 			},
 		};
 

package/src/transformers/settings/escaped-html-transformer.ts

@@ -0,0 +1,6 @@
+import { sanitizeEscapedHtml } from '../../utils/sanitize-escaped-html';
+import { createTransformer } from '../create-transformer';
+
+export const escapedHtmlTransformer = createTransformer( ( value: string | null ) => {
+	return sanitizeEscapedHtml( value );
+} );

package/src/utils/__tests__/sanitize-escaped-html.test.ts

@@ -0,0 +1,105 @@
+import { sanitizeEscapedHtml } from '../sanitize-escaped-html';
+
+const TEST_ALLOWED_HTML_WRAPPER_TAGS = [ 'a', 'div', 'span', 'strong' ];
+
+describe( 'sanitizeEscapedHtml', () => {
+	beforeEach( () => {
+		window.elementorCommon = {
+			config: {
+				allowedHTMLWrapperTags: TEST_ALLOWED_HTML_WRAPPER_TAGS,
+			},
+		};
+	} );
+
+	afterEach( () => {
+		delete window.elementorCommon;
+	} );
+
+	it( 'returns an empty string for nullish values', () => {
+		// Arrange & Act & Assert.
+		expect( sanitizeEscapedHtml( null ) ).toBe( '' );
+		expect( sanitizeEscapedHtml( '' ) ).toBe( '' );
+	} );
+
+	it( 'keeps allowed tags and strips disallowed tags', () => {
+		// Arrange.
+		const value = 'Hello <script>alert(1)</script><strong>world</strong>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).toBe( 'Hello <strong>world</strong>' );
+	} );
+
+	it( 'fails closed when the localized allowlist is missing', () => {
+		// Arrange.
+		delete window.elementorCommon;
+		const value = '<strong>world</strong>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).toBe( 'world' );
+	} );
+
+	it( 'strips javascript href from links', () => {
+		// Arrange.
+		const value = '<a href="javascript:alert(1)">click</a>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).not.toContain( 'javascript:' );
+		expect( result ).toContain( 'click' );
+	} );
+
+	it( 'strips data href from links', () => {
+		// Arrange.
+		const value = '<a href="data:text/html,<script>alert(1)</script>">click</a>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).not.toMatch( /<a\s+href=/i );
+		expect( result ).toContain( 'click' );
+	} );
+
+	it( 'preserves non-operational attributes', () => {
+		// Arrange.
+		const value =
+			'<span id="e-1" class="foo bar" style="color: red;" title="t" lang="en" dir="ltr" role="text" data-x="1" aria-label="label">world</span>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).toContain( 'id="e-1"' );
+		expect( result ).toContain( 'class="foo bar"' );
+		expect( result ).toContain( 'style="color: red;"' );
+		expect( result ).toContain( 'title="t"' );
+		expect( result ).toContain( 'lang="en"' );
+		expect( result ).toContain( 'dir="ltr"' );
+		expect( result ).toContain( 'role="text"' );
+		expect( result ).toContain( 'data-x="1"' );
+		expect( result ).toContain( 'aria-label="label"' );
+		expect( result ).toContain( 'world' );
+	} );
+
+	it( 'strips functional event-handler attributes', () => {
+		// Arrange.
+		const value = '<span id="e-1" onclick="evil()" onmouseover="evil()">world</span>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).toContain( 'id="e-1"' );
+		expect( result ).not.toContain( 'onclick' );
+		expect( result ).not.toContain( 'onmouseover' );
+		expect( result ).toContain( 'world' );
+	} );
+} );

package/src/utils/sanitize-escaped-html.ts

@@ -0,0 +1,32 @@
+import DOMPurify from 'dompurify';
+
+const ALLOWED_NON_OPERATIONAL_ATTRS = [
+	'href',
+	'target',
+	'class',
+	'id',
+	'style',
+	'title',
+	'lang',
+	'dir',
+	'role',
+] as const;
+
+function getAllowedHtmlWrapperTags(): readonly string[] {
+	return window.elementorCommon?.config?.allowedHTMLWrapperTags ?? [];
+}
+
+export function sanitizeEscapedHtml( value: string | null ): string {
+	if ( ! value ) {
+		return '';
+	}
+
+	const allowedTags = [ ...getAllowedHtmlWrapperTags() ];
+
+	return DOMPurify.sanitize( value, {
+		ALLOWED_TAGS: allowedTags,
+		ALLOWED_ATTR: [ ...ALLOWED_NON_OPERATIONAL_ATTRS ],
+		ALLOW_DATA_ATTR: true,
+		ALLOW_ARIA_ATTR: true,
+	} );
+}