diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts index 5b514bb727..66cf065c46 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts @@ -48,6 +48,10 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements buildUpValue.blocks.settingsData ??= []; this._value = buildUpValue as UmbRichTextEditorValueType; + if (this._latestMarkup !== this._value.markup) { + this._markup = this._value.markup; + } + this.#managerContext.setLayouts(buildUpValue.blocks.layout[UMB_BLOCK_RTE_BLOCK_LAYOUT_ALIAS] ?? []); this.#managerContext.setContents(buildUpValue.blocks.contentData); this.#managerContext.setSettings(buildUpValue.blocks.settingsData); @@ -65,6 +69,11 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements blocks: { layout: {}, contentData: [], settingsData: [] }, }; + // Separate state for markup, to avoid re-rendering/re-setting the value of the TinyMCE editor when the value does not really change. + @state() + private _markup = ''; + private _latestMarkup = ''; // The latest value gotten from the TinyMCE editor. + #managerContext = new UmbBlockRteManagerContext(this); #entriesContext = new UmbBlockRteEntriesContext(this); @@ -123,6 +132,8 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements // Then get the content of the editor and update the value. // maybe in this way doc.body.innerHTML; + this._latestMarkup = markup; + this._value = { ...this._value, markup: markup, @@ -132,7 +143,7 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements render() { return html` - + `; }