diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/localization/registry/localization.registry.ts b/src/Umbraco.Web.UI.Client/src/packages/core/localization/registry/localization.registry.ts index 5fd55b451c..ef76a9af67 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/localization/registry/localization.registry.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/localization/registry/localization.registry.ts @@ -67,7 +67,9 @@ export class UmbLocalizationRegistry { if (!translations.length) return; if (diff.length) { - const filteredTranslations = translations.filter((t) => diff.some((ext) => ext.meta.culture === t.$code)); + const filteredTranslations = translations.filter((t) => + diff.some((ext) => ext.meta.culture.toLowerCase() === t.$code), + ); umbLocalizationManager.registerManyLocalizations(filteredTranslations); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts index bcd7a805bc..41739b5f9d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts +++ b/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); 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 5e796a3d85..aa63a33930 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 @@ -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)?>/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 {