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

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

This reverts commit 347e898.

* do not set value if identical check

cherry-picked from c03a8af

Co-authored-by: Niels Lyngsø <[email protected]>

---------

Co-authored-by: Niels Lyngsø <[email protected]>

Author: iOvergaard

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

@@ -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);

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

@@ -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[] = [];
+
+		// 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 (super.value) {
-			super.value = {
-				...super.value,
+		if (this.value) {
+			this.value = {
+				...this.value,
 				markup: markup,
 			};
 		} else {