@umbraco-cms/backoffice 14.0.0-rc4 → 14.0.0

package/dist-cms/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.defaults.js

@@ -1,10 +1,15 @@
+import { UMB_CONTENT_REQUEST_EVENT_TYPE } from '../../../../libs/context-api/index.js';
+import { UUIIconRequestEvent } from '../../../../external/uui/index.js';
+//export const UMB_BLOCK_ENTRY_WEB_COMPONENTS_ABSOLUTE_PATH = '/umbraco/backoffice/packages/block/block-rte/index.js';
+export const UMB_BLOCK_ENTRY_WEB_COMPONENTS_ABSOLUTE_PATH = '@umbraco-cms/backoffice/block-rte';
 //we put these as extended elements because they get merged on top of the normal allowed elements by tiny mce
 //so we don't have to specify all the normal elements again
 export const defaultFallbackConfig = {
     plugins: ['anchor', 'charmap', 'table', 'lists', 'advlist', 'autolink', 'directionality', 'searchreplace'],
     valid_elements: '+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],-strike[class|style],-s[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id],-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],small[class|style],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],figure,figcaption,cite,video[*],audio[*],picture[*],source[*],canvas[*]',
     invalid_elements: 'font',
-    extended_valid_elements: '@[id|class|style],-div[id|dir|class|align|style],ins[datetime|cite],-ul[class|style],-li[class|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align],span[id|class|style|lang],figure,figcaption',
+    extended_valid_elements: '@[id|class|style],+umb-rte-block[!data-content-udi],+umb-rte-block-inline[!data-content-udi],-div[id|dir|class|align|style],ins[datetime|cite],-ul[class|style],-li[class|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align],span[id|class|style|lang],figure,figcaption',
+    custom_elements: 'umb-rte-block,~umb-rte-block-inline',
     toolbar: [
         'styles',
         'bold',
@@ -20,6 +25,86 @@ export const defaultFallbackConfig = {
         'umbmediapicker',
         'umbembeddialog',
     ],
+    init_instance_callback: function (editor) {
+        // The following code is the context api proxy. [NL]
+        // It re-dispatches the context api request event to the origin target of this modal, in other words the element that initiated the modal. [NL]
+        editor.dom.doc.addEventListener(UMB_CONTENT_REQUEST_EVENT_TYPE, ((event) => {
+            if (!editor.iframeElement)
+                return;
+            event.stopImmediatePropagation();
+            editor.iframeElement.dispatchEvent(event.clone());
+        }));
+        // Proxy for retrieving icons from outside the iframe [NL]
+        editor.dom.doc.addEventListener(UUIIconRequestEvent.ICON_REQUEST, ((event) => {
+            if (!editor.iframeElement)
+                return;
+            const newEvent = new UUIIconRequestEvent(UUIIconRequestEvent.ICON_REQUEST, {
+                detail: event.detail,
+            });
+            editor.iframeElement.dispatchEvent(newEvent);
+            if (newEvent.icon !== null) {
+                event.acceptRequest(newEvent.icon);
+            }
+        }));
+        // Transfer our import-map to the iframe: [NL]
+        const importMapTag = document.head.querySelector('script[type="importmap"]');
+        if (importMapTag) {
+            const importMap = document.createElement('script');
+            importMap.type = 'importmap';
+            importMap.text = importMapTag.innerHTML;
+            editor.dom.doc.head.appendChild(importMap);
+        }
+        // Transfer our stylesheets to the iframe: [NL]
+        const stylesheetTags = document.head.querySelectorAll('link[rel="stylesheet"]');
+        stylesheetTags.forEach((stylesheetTag) => {
+            const stylesheet = document.createElement('link');
+            stylesheet.rel = 'stylesheet';
+            stylesheet.href = stylesheetTag.href;
+            editor.dom.doc.head.appendChild(stylesheet);
+        });
+        // TODO: Lets use/adapt the router-slot logic so we do not need to add this here [NL]
+        // TODO: When transferring this code, make sure that we check for target='_parent' or target='top' if its happening within a iframe. [NL]
+        editor.dom.doc.addEventListener('click', (e) => {
+            // If we try to open link in a new tab, then we want to skip skip:
+            //if ((isWindows && e.ctrlKey) || (!isWindows && e.metaKey)) return;
+            // Find the target by using the composed path to get the element through the shadow boundaries.
+            // Notice the difference here compared to RouterSlots implementation [NL]
+            const $anchor = ('composedPath' in e)
+                ? e
+                    .composedPath()
+                    .find(($elem) => $elem instanceof HTMLAnchorElement || $elem.tagName === 'A')
+                : e.target;
+            // Abort if the event is not about the anchor tag
+            if ($anchor == null || !($anchor instanceof HTMLAnchorElement || $anchor.tagName === 'A')) {
+                return;
+            }
+            // Get the HREF value from the anchor tag
+            const href = $anchor.href;
+            // Only handle the anchor tag if the follow holds true:
+            // - The HREF is relative to the origin of the current location.
+            // - The target is targeting the current frame.
+            // - The anchor doesn't have the attribute [data-router-slot]="disabled"
+            if (!href.startsWith(location.origin) ||
+                ($anchor.target !== '' && $anchor.target !== '_self') ||
+                $anchor.dataset['routerSlot'] === 'disabled') {
+                return;
+            }
+            // Remove the origin from the start of the HREF to get the path
+            const path = $anchor.pathname + $anchor.search + $anchor.hash;
+            // Prevent the default behavior
+            e.preventDefault();
+            // Change the history!
+            window.history.pushState(null, '', path);
+        });
+        // Load backoffice JS so we can get the umb-rte-block component registered inside the iframe [NL]
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.setAttribute('type', 'module');
+        // TODO: Check that we actually get the same extension registry, or find a way so we can make it do so. — It could be some kind of iframe detection? [NL]
+        script.text = `import "../../../core/extension-registry/index.js";`;
+        script.text = `import "${UMB_BLOCK_ENTRY_WEB_COMPONENTS_ABSOLUTE_PATH}";`;
+        editor.dom.doc.head.appendChild(script);
+    },
     style_formats: [
         {
             title: 'Headers',

package/dist-cms/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.d.ts

@@ -1,6 +1,7 @@
 import { UmbLitElement } from '../../../core/lit-element/index.js';
+import { type Editor } from '../../../../external/tinymce/index.js';
 import type { UmbPropertyEditorConfigCollection } from '../../../core/property-editor/index.js';
-declare const UmbInputTinyMceElement_base: (new (...args: any[]) => import("../../../../external/uui/index.js").UUIFormControlMixinInterface<FormDataEntryValue | FormData, string>) & typeof UmbLitElement;
+declare const UmbInputTinyMceElement_base: (new (...args: any[]) => import("../../../../external/uui/index.js").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbInputTinyMceElement extends UmbInputTinyMceElement_base {
     #private;
     configuration?: UmbPropertyEditorConfigCollection;
@@ -9,6 +10,7 @@ export declare class UmbInputTinyMceElement extends UmbInputTinyMceElement_base
     set value(newValue: FormDataEntryValue | FormData);
     get value(): FormDataEntryValue | FormData;
     private _editorElement?;
+    getEditor(): Editor | null | undefined;
     protected firstUpdated(): Promise<void>;
     disconnectedCallback(): void;
     getFormatStyles(stylesheetPaths: Array<string>): Promise<any[]>;

package/dist-cms/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.js

@@ -61,6 +61,9 @@ let UmbInputTinyMceElement = class UmbInputTinyMceElement extends UUIFormControl
     get value() {
         return super.value;
     }
+    getEditor() {
+        return this.#editorRef;
+    }
     async firstUpdated() {
         await Promise.all([...(await this.#loadPlugins())]);
         await this.#setTinyConfig();

package/dist-cms/packages/tiny-mce/plugins/tiny-mce-code-editor.plugin.js

@@ -1,11 +1,13 @@
 import { UmbTinyMcePluginBase } from '../components/input-tiny-mce/tiny-mce-plugin.js';
+import { UmbLocalizationController } from '../../../libs/localization-api/index.js';
 import { UMB_CODE_EDITOR_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '../../core/modal/index.js';
 export default class UmbTinyMceCodeEditorPlugin extends UmbTinyMcePluginBase {
     constructor(args) {
         super(args);
+        const localize = new UmbLocalizationController(args.host);
         this.editor.ui.registry.addButton('sourcecode', {
             icon: 'sourcecode',
-            tooltip: 'View Source Code',
+            tooltip: localize.term('general_viewSourceCode'),
             onAction: () => this.#showCodeEditor(),
         });
     }

package/dist-cms/packages/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.js

@@ -1,20 +1,17 @@
 import { UmbTinyMcePluginBase } from '../components/input-tiny-mce/tiny-mce-plugin.js';
+import { UmbLocalizationController } from '../../../libs/localization-api/index.js';
 import { UMB_EMBEDDED_MEDIA_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '../../core/modal/index.js';
 export default class UmbTinyMceEmbeddedMediaPlugin extends UmbTinyMcePluginBase {
     constructor(args) {
         super(args);
+        const localize = new UmbLocalizationController(args.host);
         this.editor.ui.registry.addToggleButton('umbembeddialog', {
             icon: 'embed',
-            tooltip: 'Embed',
+            tooltip: localize.term('general_embed'),
             onAction: () => this.#onAction(),
-            onSetup: (api) => {
-                const editor = this.editor;
-                const onNodeChange = () => {
-                    const selectedElm = editor.selection.getNode();
-                    api.setActive(selectedElm.nodeName.toUpperCase() === 'DIV' && selectedElm.classList.contains('umb-embed-holder'));
-                };
-                editor.on('NodeChange', onNodeChange);
-                return () => editor.off('NodeChange', onNodeChange);
+            onSetup: function (api) {
+                const changed = args.editor.selection.selectorChangedWithUnbind('div.umb-embed-holder', (state) => api.setActive(state));
+                return () => changed.unbind();
             },
         });
     }

package/dist-cms/packages/tiny-mce/plugins/tiny-mce-mediapicker.plugin.js

@@ -5,6 +5,7 @@ import { UMB_MODAL_MANAGER_CONTEXT } from '../../core/modal/index.js';
 import { UmbTemporaryFileRepository } from '../../core/temporary-file/index.js';
 import { UmbId } from '../../core/id/index.js';
 import { sizeImageInEditor, uploadBlobImages, UMB_MEDIA_PICKER_MODAL } from '../../media/media/index.js';
+import { UmbLocalizationController } from '../../../libs/localization-api/index.js';
 export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
     #currentUser;
     #currentUserContext;
@@ -12,6 +13,7 @@ export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
     #temporaryFileRepository;
     constructor(args) {
         super(args);
+        const localize = new UmbLocalizationController(args.host);
         this.#temporaryFileRepository = new UmbTemporaryFileRepository(args.host);
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
             this.#modalManager = instance;
@@ -24,7 +26,7 @@ export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
         // });
         this.editor.ui.registry.addToggleButton('umbmediapicker', {
             icon: 'image',
-            tooltip: 'Media Picker',
+            tooltip: localize.term('general_mediaPicker'),
             onAction: () => this.#onAction(),
             onSetup: (api) => {
                 const changed = this.editor.selection.selectorChangedWithUnbind('img[data-udi]', (state) => api.setActive(state));

package/dist-cms/packages/tiny-mce/property-editors/block-configuration/property-editor-ui-block-rte-type-configuration.element.d.ts

@@ -1,5 +1,6 @@
 import type { UmbBlockTypeBaseModel } from '../../../block/block-type/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../core/extension-registry/index.js';
+import { nothing } from '../../../../external/lit/index.js';
 import { type UmbPropertyEditorConfigCollection } from '../../../core/property-editor/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 /**
@@ -7,11 +8,11 @@ import { UmbLitElement } from '../../../core/lit-element/index.js';
  */
 export declare class UmbPropertyEditorUIBlockRteBlockConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement {
     #private;
-    set value(value: UmbBlockTypeBaseModel[]);
-    get value(): UmbBlockTypeBaseModel[];
-    private _value;
+    value: UmbBlockTypeBaseModel[];
     config?: UmbPropertyEditorConfigCollection;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    private _workspacePath?;
+    constructor();
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 export default UmbPropertyEditorUIBlockRteBlockConfigurationElement;
 declare global {

package/dist-cms/packages/tiny-mce/property-editors/block-configuration/property-editor-ui-block-rte-type-configuration.element.js

@@ -5,52 +5,62 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbInputBlockTypeElement } from '../../../block/block-type/index.js';
-import { html, customElement, property, state } from '../../../../external/lit/index.js';
+import { UMB_BLOCK_RTE_TYPE } from '../../../block/block-rte/index.js';
+import { html, customElement, property, state, nothing } from '../../../../external/lit/index.js';
 import { UmbPropertyValueChangeEvent, } from '../../../core/property-editor/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
+import { UMB_WORKSPACE_MODAL } from '../../../core/modal/index.js';
+import { UmbModalRouteRegistrationController } from '../../../core/router/index.js';
 /**
  * @element umb-property-editor-ui-block-rte-type-configuration
  */
 let UmbPropertyEditorUIBlockRteBlockConfigurationElement = class UmbPropertyEditorUIBlockRteBlockConfigurationElement extends UmbLitElement {
+    #blockTypeWorkspaceModalRegistration;
     constructor() {
-        super(...arguments);
-        this._value = [];
-    }
-    set value(value) {
-        this._value = value ?? [];
-    }
-    get value() {
-        return this._value;
+        super();
+        this.value = [];
+        this.#blockTypeWorkspaceModalRegistration?.destroy();
+        this.#blockTypeWorkspaceModalRegistration = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath(UMB_BLOCK_RTE_TYPE)
+            .onSetup(() => {
+            return { data: { entityType: UMB_BLOCK_RTE_TYPE, preset: {} }, modal: { size: 'large' } };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            const newpath = routeBuilder({});
+            this._workspacePath = newpath;
+        });
     }
     #onCreate(e) {
-        const key = e.detail.contentElementTypeKey;
-        this.value = [...this._value, { contentElementTypeKey: key, forceHideContentEditorInOverlay: false }];
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+        const selectedElementType = e.detail.contentElementTypeKey;
+        if (selectedElementType) {
+            this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/null');
+        }
     }
     #onChange(e) {
+        e.stopPropagation();
         this.value = e.target.value;
         this.dispatchEvent(new UmbPropertyValueChangeEvent());
     }
     render() {
         return UmbInputBlockTypeElement
             ? html `<umb-input-block-type
-					entity-type="block-rte-type"
 					.value=${this.value}
+					.workspacePath=${this._workspacePath}
 					@create=${this.#onCreate}
 					@change=${this.#onChange}
 					@delete=${this.#onChange}></umb-input-block-type>`
-            : '';
+            : nothing;
     }
 };
 __decorate([
     property({ attribute: false })
-], UmbPropertyEditorUIBlockRteBlockConfigurationElement.prototype, "value", null);
-__decorate([
-    state()
-], UmbPropertyEditorUIBlockRteBlockConfigurationElement.prototype, "_value", void 0);
+], UmbPropertyEditorUIBlockRteBlockConfigurationElement.prototype, "value", void 0);
 __decorate([
     property({ type: Object, attribute: false })
 ], UmbPropertyEditorUIBlockRteBlockConfigurationElement.prototype, "config", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockRteBlockConfigurationElement.prototype, "_workspacePath", void 0);
 UmbPropertyEditorUIBlockRteBlockConfigurationElement = __decorate([
     customElement('umb-property-editor-ui-block-rte-type-configuration')
 ], UmbPropertyEditorUIBlockRteBlockConfigurationElement);

package/dist-cms/packages/tiny-mce/property-editors/tiny-mce/manifests.d.ts

@@ -1,2 +1,4 @@
 import type { ManifestTypes } from '../../../core/extension-registry/index.js';
+export declare const UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS = "Umbraco.RichText";
+export declare const UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS = "Umb.PropertyEditorUi.TinyMCE";
 export declare const manifests: Array<ManifestTypes>;

package/dist-cms/packages/tiny-mce/property-editors/tiny-mce/manifests.js

@@ -1,12 +1,14 @@
 import { manifest as schemaManifest } from './Umbraco.RichText.js';
+export const UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS = 'Umbraco.RichText';
+export const UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS = 'Umb.PropertyEditorUi.TinyMCE';
 const manifest = {
     type: 'propertyEditorUi',
-    alias: 'Umb.PropertyEditorUi.TinyMCE',
+    alias: UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS,
     name: 'Rich Text Editor Property Editor UI',
     element: () => import('./property-editor-ui-tiny-mce.element.js'),
     meta: {
         label: 'Rich Text Editor',
-        propertyEditorSchemaAlias: 'Umbraco.RichText',
+        propertyEditorSchemaAlias: UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS,
         icon: 'icon-browser-window',
         group: 'richText',
         settings: {

package/dist-cms/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.d.ts

@@ -2,18 +2,25 @@ import { UmbLitElement } from '../../../core/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection } from '../../../core/property-editor/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../core/extension-registry/index.js';
 import '../../components/input-tiny-mce/input-tiny-mce.element.js';
-type RichTextEditorValue = {
-    blocks: object;
+import { type UmbBlockRteLayoutModel } from '../../../block/block-rte/index.js';
+import type { UmbBlockValueType } from '../../../block/block/index.js';
+export interface UmbRichTextEditorValueType {
     markup: string;
-};
+    blocks: UmbBlockValueType<UmbBlockRteLayoutModel>;
+}
 /**
  * @element umb-property-editor-ui-tiny-mce
  */
 export declare class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements UmbPropertyEditorUiElement {
     #private;
-    value?: RichTextEditorValue;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
-    get config(): UmbPropertyEditorConfigCollection | undefined;
+    set value(value: UmbRichTextEditorValueType | undefined);
+    get value(): UmbRichTextEditorValueType;
+    _config?: UmbPropertyEditorConfigCollection;
+    private _value;
+    private _markup;
+    private _latestMarkup;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
 }
 export default UmbPropertyEditorUITinyMceElement;

package/dist-cms/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.js

@@ -4,51 +4,125 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, html, property } from '../../../../external/lit/index.js';
+import { customElement, html, property, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import { UmbPropertyValueChangeEvent } from '../../../core/property-editor/index.js';
 import '../../components/input-tiny-mce/input-tiny-mce.element.js';
+import { UmbBlockRteEntriesContext, UmbBlockRteManagerContext, } from '../../../block/block-rte/index.js';
+const UMB_BLOCK_RTE_BLOCK_LAYOUT_ALIAS = 'Umbraco.TinyMCE'; // Not rich text, cause this has not been migrated [NL]
 /**
  * @element umb-property-editor-ui-tiny-mce
  */
 let UmbPropertyEditorUITinyMceElement = class UmbPropertyEditorUITinyMceElement extends UmbLitElement {
+    //
+    // No need to registerer as a LIT-property, as we are calling it directly and no need for it to be reactive [NL]
+    set config(config) {
+        if (!config)
+            return;
+        this._config = config;
+        const blocks = config.getValueByAlias('blocks') ?? [];
+        this.#managerContext.setBlockTypes(blocks);
+        this.#managerContext.setEditorConfiguration(config);
+    }
+    set value(value) {
+        const buildUpValue = value ? { ...value } : {};
+        buildUpValue.markup ??= '';
+        buildUpValue.blocks ??= { layout: {}, contentData: [], settingsData: [] };
+        buildUpValue.blocks.layout ??= {};
+        buildUpValue.blocks.contentData ??= [];
+        buildUpValue.blocks.settingsData ??= [];
+        this._value = buildUpValue;
+        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);
+    }
+    get value() {
+        return this._value;
+    }
+    #managerContext;
+    #entriesContext;
     constructor() {
-        super(...arguments);
-        this.value = {
-            blocks: {},
+        super();
+        this._value = {
             markup: '',
+            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.
+        this._markup = '';
+        this._latestMarkup = ''; // The latest value gotten from the TinyMCE editor.
+        this.#managerContext = new UmbBlockRteManagerContext(this);
+        this.#entriesContext = new UmbBlockRteEntriesContext(this);
+        this.observe(this.#managerContext.layouts, (layouts) => {
+            this._value = {
+                ...this._value,
+                blocks: { ...this._value.blocks, layout: { [UMB_BLOCK_RTE_BLOCK_LAYOUT_ALIAS]: layouts } },
+            };
+            this.#fireChangeEvent();
+        });
+        this.observe(this.#managerContext.contents, (contents) => {
+            this._value = { ...this._value, blocks: { ...this._value.blocks, contentData: contents } };
+            this.#fireChangeEvent();
+        });
+        this.observe(this.#managerContext.settings, (settings) => {
+            this._value = { ...this._value, blocks: { ...this._value.blocks, settingsData: settings } };
+            this.#fireChangeEvent();
+        });
     }
-    #configuration;
-    set config(config) {
-        this.#configuration = config;
-    }
-    get config() {
-        return this.#configuration;
+    #fireChangeEvent() {
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
     }
     #onChange(event) {
-        this.value = {
-            blocks: {},
-            markup: event.target.value,
+        const editor = this.#managerContext.getTinyMceEditor();
+        if (!editor)
+            return;
+        // Clone the DOM, to remove the classes and attributes on the original:
+        const div = document.createElement('div');
+        div.innerHTML = editor.getContent();
+        // 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 usedContentUdis = Array.from(blockEls).map((blockElement) => blockElement.getAttribute('data-content-udi'));
+        const unusedBlocks = this.#managerContext.getLayouts().filter((x) => usedContentUdis.indexOf(x.contentUdi) === -1);
+        unusedBlocks.forEach((blockLayout) => {
+            this.#managerContext.removeOneLayout(blockLayout.contentUdi);
+        });
+        // 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,
         };
         this.dispatchEvent(new UmbPropertyValueChangeEvent());
     }
     render() {
         return html `
-			<umb-input-tiny-mce
-				.configuration=${this.#configuration}
-				.value=${this.value?.markup ?? ''}
-				@change=${this.#onChange}>
+			<umb-input-tiny-mce .configuration=${this._config} .value=${this._markup} @change=${this.#onChange}>
 			</umb-input-tiny-mce>
 		`;
     }
 };
-__decorate([
-    property({ type: Object })
-], UmbPropertyEditorUITinyMceElement.prototype, "value", void 0);
 __decorate([
     property({ attribute: false })
-], UmbPropertyEditorUITinyMceElement.prototype, "config", null);
+], UmbPropertyEditorUITinyMceElement.prototype, "value", null);
+__decorate([
+    state()
+], UmbPropertyEditorUITinyMceElement.prototype, "_config", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUITinyMceElement.prototype, "_value", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUITinyMceElement.prototype, "_markup", void 0);
 UmbPropertyEditorUITinyMceElement = __decorate([
     customElement('umb-property-editor-ui-tiny-mce')
 ], UmbPropertyEditorUITinyMceElement);

package/dist-cms/packages/tiny-mce/property-editors/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.js

@@ -68,7 +68,7 @@ let UmbPropertyEditorUITinyMceToolbarConfigurationElement = class UmbPropertyEdi
                 p.meta.toolbar.forEach((t) => {
                     this._toolbarConfig.push({
                         alias: t.alias,
-                        label: t.label,
+                        label: this.localize.string(t.label),
                         icon: t.icon ?? 'icon-autofill',
                         selected: this.value.includes(t.alias),
                     });

package/dist-cms/packages/user/current-user/current-user.context.d.ts

@@ -5,6 +5,7 @@ import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
 export declare class UmbCurrentUserContext extends UmbContextBase<UmbCurrentUserContext> {
     #private;
     readonly currentUser: import("rxjs/internal/Observable").Observable<UmbCurrentUserModel | undefined>;
+    readonly allowedSections: import("rxjs/internal/Observable").Observable<string[] | undefined>;
     readonly unique: import("rxjs/internal/Observable").Observable<string | undefined>;
     readonly languageIsoCode: import("rxjs/internal/Observable").Observable<string | undefined>;
     readonly hasDocumentRootAccess: import("rxjs/internal/Observable").Observable<boolean | undefined>;

package/dist-cms/packages/user/current-user/current-user.context.js

@@ -5,6 +5,10 @@ import { firstValueFrom } from '../../../external/rxjs/index.js';
 import { UMB_AUTH_CONTEXT } from '../../core/auth/index.js';
 import { UmbObjectState } from '../../../libs/observable-api/index.js';
 import { umbLocalizationRegistry } from '../../core/localization/index.js';
+import { umbExtensionsRegistry } from '../../core/extension-registry/index.js';
+import { UMB_SECTION_PATH_PATTERN } from '../../core/section/index.js';
+import { UMB_APP_CONTEXT } from '../../../apps/app/index.js';
+import { ensurePathEndsWithSlash } from '../../core/utils/index.js';
 export class UmbCurrentUserContext extends UmbContextBase {
     #currentUser;
     #authContext;
@@ -13,6 +17,7 @@ export class UmbCurrentUserContext extends UmbContextBase {
         super(host, UMB_CURRENT_USER_CONTEXT);
         this.#currentUser = new UmbObjectState(undefined);
         this.currentUser = this.#currentUser.asObservable();
+        this.allowedSections = this.#currentUser.asObservablePart((user) => user?.allowedSections);
         this.unique = this.#currentUser.asObservablePart((user) => user?.unique);
         this.languageIsoCode = this.#currentUser.asObservablePart((user) => user?.languageIsoCode);
         this.hasDocumentRootAccess = this.#currentUser.asObservablePart((user) => user?.hasDocumentRootAccess);
@@ -36,6 +41,7 @@ export class UmbCurrentUserContext extends UmbContextBase {
         if (asObservable) {
             this.observe(asObservable(), (currentUser) => {
                 this.#currentUser?.setValue(currentUser);
+                this.#redirectToFirstAllowedSectionIfNeeded();
             });
         }
     }
@@ -66,6 +72,30 @@ export class UmbCurrentUserContext extends UmbContextBase {
             }
         });
     }
+    async #redirectToFirstAllowedSectionIfNeeded() {
+        const url = new URL(window.location.href);
+        const appContext = await this.getContext(UMB_APP_CONTEXT);
+        const backofficePath = appContext.getBackofficePath();
+        if (url.pathname === backofficePath || url.pathname === ensurePathEndsWithSlash(backofficePath)) {
+            const sectionManifest = await this.#firstAllowedSection();
+            if (!sectionManifest)
+                return;
+            const fallbackSectionPath = UMB_SECTION_PATH_PATTERN.generateLocal({
+                sectionName: sectionManifest.meta.pathname,
+            });
+            history.pushState(null, '', fallbackSectionPath);
+        }
+    }
+    async #firstAllowedSection() {
+        const currentUser = this.#currentUser.getValue();
+        if (!currentUser)
+            return;
+        /* TODO: this solution is not bullet proof as we still rely on the "correct" section to be registered at this point in time so we can get the path.
+         It probably would have been better if we used the section alias instead as the path.
+         Then we would have it available at all times and it also ensured a unique path. */
+        const sections = await this.observe(umbExtensionsRegistry.byTypeAndAliases('section', currentUser.allowedSections), () => { }).asPromise();
+        return sections[0];
+    }
 }
 export default UmbCurrentUserContext;
 export const UMB_CURRENT_USER_CONTEXT = new UmbContextToken('UmbCurrentUserContext');

package/dist-cms/packages/user/current-user/theme/current-user-theme-user-profile-app.element.js

@@ -34,7 +34,8 @@ let UmbCurrentUserThemeUserProfileAppElement = class UmbCurrentUserThemeUserProf
         if (!this._themes.length)
             return nothing;
         return html `
-			<uui-box headline="Theme (Experimental)">
+			<uui-box headline="Theme">
+				<uui-tag slot="headline" look="placeholder">Experimental</uui-tag>
 				<uui-select label="Select theme" .options=${this._themes} @change=${this.#onThemeChange}></uui-select>
 			</uui-box>
 		`;

package/dist-cms/packages/user/user/components/user-input/user-input.element.d.ts

@@ -1,5 +1,5 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-declare const UmbUserInputElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").UUIFormControlMixinInterface<FormDataEntryValue | FormData, string>) & typeof UmbLitElement;
+declare const UmbUserInputElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbUserInputElement extends UmbUserInputElement_base {
     #private;
     /**

package/dist-cms/packages/user/user/components/user-input/user-input.element.js

@@ -126,6 +126,7 @@ let UmbUserInputElement = class UmbUserInputElement extends UUIFormControlMixin(
             return nothing;
         return html `
 			<uui-ref-node-user name=${item.name} id=${item.unique}>
+				<uui-avatar slot="icon" name=${item.name}></uui-avatar>
 				<uui-action-bar slot="actions">
 					<uui-button label=${this.localize.term('general_remove')} @click=${() => this.#removeItem(item)}></uui-button>
 				</uui-action-bar>
@@ -137,6 +138,10 @@ let UmbUserInputElement = class UmbUserInputElement extends UUIFormControlMixin(
 			#btn-add {
 				width: 100%;
 			}
+
+			uui-avatar {
+				font-size: var(--uui-size-4);
+			}
 		`,
     ]; }
 };

package/dist-cms/packages/user/user-group/components/input-user-group/user-group-input.element.d.ts

@@ -1,5 +1,5 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-declare const UmbUserGroupInputElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").UUIFormControlMixinInterface<FormDataEntryValue | FormData, string>) & typeof UmbLitElement;
+declare const UmbUserGroupInputElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbUserGroupInputElement extends UmbUserGroupInputElement_base {
     #private;
     /**