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

V15: Revert "Fix: RTE markup props not up to date issue" (#18879)

Browse Source 
* Revert "simplifying the use of props (#18430)"

This reverts commit 347e898190.

* do not set value if identical check

cherry-picked from c03a8afab54c188c85beb67c86af97289b30723e

Co-authored-by: Niels Lyngsø <nsl@umbraco.dk>

---------

Co-authored-by: Niels Lyngsø <nsl@umbraco.dk>
This commit is contained in:
Jacob Overgaard
2025-03-31 13:13:00 +02:00
committed by GitHub
parent 26907f202f
commit 98e0615338
2 changed files with 19 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts
View File

@@ -61,9 +61,8 @@ export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, '
}
override set value(newValue: FormDataEntryValue | FormData) {
if (newValue === this.value) return;
super.value = newValue;
const newContent = typeof newValue === 'string' ? newValue : '';
super.value = newContent;
if (this.#editorRef && this.#editorRef.getContent() != newContent) {
this.#editorRef.setContent(newContent);

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

@@ -1,6 +1,6 @@
import type { UmbInputTinyMceElement } from '../../components/input-tiny-mce/input-tiny-mce.element.js';
import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
import { UmbPropertyEditorUiRteElementBase, UMB_BLOCK_RTE_DATA_CONTENT_KEY } from '@umbraco-cms/backoffice/rte';
import { UmbPropertyEditorUiRteElementBase } from '@umbraco-cms/backoffice/rte';
import '../../components/input-tiny-mce/input-tiny-mce.element.js';
@@ -10,37 +10,32 @@ import '../../components/input-tiny-mce/input-tiny-mce.element.js';
@customElement('umb-property-editor-ui-tiny-mce')
export class UmbPropertyEditorUITinyMceElement extends UmbPropertyEditorUiRteElementBase {
#onChange(event: CustomEvent & { target: UmbInputTinyMceElement }) {
const value = typeof event.target.value === 'string' ? event.target.value : '';
const markup = typeof event.target.value === 'string' ? event.target.value : '';
// If we don't get any markup clear the property editor value.
if (value === '') {
if (markup === '') {
this.value = undefined;
this._fireChangeEvent();
return;
}
// Clone the DOM, to remove the classes and attributes on the original:
const div = document.createElement('div');
div.innerHTML = value;
// Loop through used, to remove the classes on these.
const blockEls = div.querySelectorAll(`umb-rte-block, umb-rte-block-inline`);
blockEls.forEach((blockEl) => {
blockEl.removeAttribute('contenteditable');
blockEl.removeAttribute('class');
});
const markup = div.innerHTML;
// Remove unused Blocks of Blocks Layout. Leaving only the Blocks that are present in Markup.
//const blockElements = editor.dom.select(`umb-rte-block, umb-rte-block-inline`);
const usedContentKeys = Array.from(blockEls).map((blockElement) =>
blockElement.getAttribute(UMB_BLOCK_RTE_DATA_CONTENT_KEY),
);
const usedContentKeys: string[] = [];
if (super.value) {
super.value = {
...super.value,
// Regex matching all block elements in the markup, and extracting the content key. It's the same as the one used on the backend.
const regex = new RegExp(
/<umb-rte-block(?:-inline)?(?: class="(?:.[^"]*)")? data-content-key="(?<key>.[^"]*)">(?:<!--Umbraco-Block-->)?<\/umb-rte-block(?:-inline)?>/gi,
);
let blockElement: RegExpExecArray | null;
while ((blockElement = regex.exec(markup)) !== null) {
if (blockElement.groups?.key) {
usedContentKeys.push(blockElement.groups.key);
}
}
if (this.value) {
this.value = {
...this.value,
markup: markup,
};
} else {