yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

only update value on actual change

Browse Source
This commit is contained in:
Niels Lyngsø
2024-05-28 08:50:30 +02:00
parent 831c57212d
commit cfbf43215c
1 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts
View File

@@ -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`
<umb-input-tiny-mce .configuration=${this._config} .value=${this._value?.markup ?? ''} @change=${this.#onChange}>
<umb-input-tiny-mce .configuration=${this._config} .value=${this._markup} @change=${this.#onChange}>
</umb-input-tiny-mce>
`;
}