@umbraco-cms/backoffice 14.0.0--preview004-2834a107 → 14.0.0--preview004-27d9edfc

package/dist-cms/custom-elements.json

@@ -2428,6 +2428,16 @@
       "name": "umb-link-picker-modal",
       "path": "./../src/packages/core/modal/common/link-picker/link-picker-modal.element.ts",
       "properties": [
+        {
+          "name": "documentExpand",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "mediaExpanded",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "styles",
           "type": "array",
@@ -3864,11 +3874,21 @@
           "type": "never[]",
           "default": "[]"
         },
+        {
+          "name": "stylesheetList",
+          "type": "array",
+          "default": "[]"
+        },
         {
           "name": "styles",
           "type": "array",
           "default": "[\"UmbTextStyles\",null]"
         }
+      ],
+      "events": [
+        {
+          "name": "property-value-change"
+        }
       ]
     },
     {
@@ -7588,7 +7608,7 @@
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"UUITextStyles\",null]"
+          "default": "[\"UmbTextStyles\",null]"
         }
       ]
     },
@@ -7620,8 +7640,8 @@
       "properties": [
         {
           "name": "styles",
-          "type": "CSSResult[]",
-          "default": "[\"UUITextStyles\",null]"
+          "type": "array",
+          "default": "[\"UmbTextStyles\",null]"
         }
       ]
     },
@@ -7642,7 +7662,7 @@
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"UUITextStyles\",null]"
+          "default": "[\"UmbTextStyles\",null]"
         }
       ]
     },
@@ -7653,7 +7673,7 @@
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"UUITextStyles\",null]"
+          "default": "[\"UmbTextStyles\",null]"
         }
       ]
     },
@@ -7673,8 +7693,8 @@
         },
         {
           "name": "styles",
-          "type": "CSSResult[]",
-          "default": "[\"UUITextStyles\",null]"
+          "type": "array",
+          "default": "[\"UmbTextStyles\",null]"
         }
       ]
     },

package/dist-cms/mocks/data/data-type.data.js

@@ -507,7 +507,7 @@ export const data = [
         name: 'Rich Text Editor',
         id: 'dt-richTextEditor',
         parentId: null,
-        propertyEditorAlias: 'Umbraco.TinyMCE',
+        propertyEditorAlias: 'Umbraco.RichText',
         propertyEditorUiAlias: 'Umb.PropertyEditorUi.TinyMCE',
         values: [
             {

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

@@ -11,6 +11,7 @@ export declare class UmbInputTinyMceElement extends UmbInputTinyMceElement_base
     constructor();
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
     disconnectedCallback(): void;
+    getFormatStyles(stylesheetPath: Array<string>): Promise<any[]>;
     /**
      * Nothing rendered by default - TinyMCE initialisation creates
      * a target div and binds the RTE to that element

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

@@ -16,6 +16,8 @@ import { css, customElement, html, property, query, state, } from '../../../../e
 import { firstValueFrom } from '../../../../external/rxjs/index.js';
 import { UmbMediaHelper } from '../../../../shared/utils/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import { UMB_APP } from '../../../../apps/app/index.js';
+import { UmbStylesheetRepository } from '../../../templating/stylesheets/index.js';
 // TODO => integrate macro picker, update stylesheet fetch when backend CLI exists (ref tinymce.service.js in existing backoffice)
 export let UmbInputTinyMceElement = class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
     #mediaHelper;
@@ -23,6 +25,8 @@ export let UmbInputTinyMceElement = class UmbInputTinyMceElement extends FormCon
     #auth;
     #plugins;
     #editorRef;
+    #stylesheetRepository;
+    #serverUrl;
     getFormElement() {
         return this._editorElement?.querySelector('iframe') ?? undefined;
     }
@@ -32,6 +36,10 @@ export let UmbInputTinyMceElement = class UmbInputTinyMceElement extends FormCon
         this.#mediaHelper = new UmbMediaHelper();
         this.#plugins = [];
         this.#editorRef = null;
+        this.consumeContext(UMB_APP, (instance) => {
+            this.#serverUrl = instance.getServerUrl();
+        });
+        this.#stylesheetRepository = new UmbStylesheetRepository(this);
         // TODO => this breaks tests, removing for now will ignore user language
         // and fall back to tinymce default language
         // this.consumeContext(UMB_AUTH, (instance) => {
@@ -72,6 +80,54 @@ export let UmbInputTinyMceElement = class UmbInputTinyMceElement extends FormCon
             }
         }
     }
+    async getFormatStyles(stylesheetPath) {
+        const rules = [];
+        stylesheetPath.forEach((path) => {
+            //TODO => Legacy path?
+            /**
+             * if (val.indexOf(Umbraco.Sys.ServerVariables.umbracoSettings.cssPath + "/") === 0) {
+                // current format (full path to stylesheet)
+                stylesheets.push(val);
+              }
+              else {
+                // legacy format (stylesheet name only) - must prefix with stylesheet folder and postfix with ".css"
+                stylesheets.push(Umbraco.Sys.ServerVariables.umbracoSettings.cssPath + "/" + val + ".css");
+              }
+             */
+            this.#stylesheetRepository?.getStylesheetRules(path).then(({ data }) => {
+                data?.rules?.forEach((rule) => {
+                    const r = {
+                        title: rule.name,
+                    };
+                    if (!rule.selector)
+                        return;
+                    if (rule.selector.startsWith('.')) {
+                        r.inline = 'span';
+                        r.classes = rule.selector.substring(1);
+                    }
+                    else if (rule.selector.startsWith('#')) {
+                        r.inline = 'span';
+                        r.attributes = { id: rule.selector.substring(1) };
+                    }
+                    else if (rule.selector.includes('.')) {
+                        const [block, ...classes] = rule.selector.split('.');
+                        r.block = block;
+                        r.classes = classes.join(' ').replace(/\./g, ' ');
+                    }
+                    else if (rule.selector.includes('#')) {
+                        const [block, id] = rule.selector.split('#');
+                        r.block = block;
+                        r.classes = id;
+                    }
+                    else {
+                        r.block = rule.selector;
+                    }
+                    rules.push(r);
+                });
+            });
+        });
+        return rules;
+    }
     async #setTinyConfig() {
         // create an object by merging the configuration onto the fallback config
         // TODO: Seems like a too tight coupling between DataTypeConfigCollection and TinyMceConfig, I would love it begin more explicit what we take from DataTypeConfigCollection and parse on, but I understand that this gives some flexibility. Is this flexibility on purpose?
@@ -79,6 +135,9 @@ export let UmbInputTinyMceElement = class UmbInputTinyMceElement extends FormCon
             ...defaultFallbackConfig,
             ...(this.configuration ? this.configuration?.toObject() : {}),
         };
+        // Map the stylesheets with server url
+        const stylesheets = configurationOptions.stylesheets.map((stylesheetPath) => `${this.#serverUrl}/css/${stylesheetPath.replace(/\\/g, '/')}`);
+        const styleFormats = await this.getFormatStyles(configurationOptions.stylesheets);
         // no auto resize when a fixed height is set
         if (!configurationOptions.dimensions?.height) {
             configurationOptions.plugins ??= [];
@@ -104,13 +163,13 @@ export let UmbInputTinyMceElement = class UmbInputTinyMceElement extends FormCon
         // extend with configuration values
         this._tinyConfig = {
             ...this._tinyConfig,
-            content_css: configurationOptions.stylesheets.join(','),
+            content_css: stylesheets,
+            style_formats: styleFormats || defaultStyleFormats,
             extended_valid_elements: defaultExtendedValidElements,
             height: configurationOptions.height ?? 500,
             invalid_elements: configurationOptions.invalidElements,
             plugins: configurationOptions.plugins.map((x) => x.name),
             toolbar: configurationOptions.toolbar.join(' '),
-            style_formats: defaultStyleFormats,
             valid_elements: configurationOptions.validElements,
             width: configurationOptions.width,
         };

package/dist-cms/packages/core/modal/common/link-picker/link-picker-modal.element.d.ts

@@ -4,6 +4,8 @@ export declare class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLi
     _index: number | null;
     _link: UmbLinkPickerLink;
     _layout: UmbLinkPickerConfig;
+    documentExpand: boolean;
+    mediaExpanded: boolean;
     private _linkInput;
     private _linkQueryInput?;
     private _linkTitleInput;

package/dist-cms/packages/core/modal/common/link-picker/link-picker-modal.element.js

@@ -4,7 +4,7 @@ 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 { css, html, nothing, customElement, query, state } from '../../../../../external/lit/index.js';
+import { css, html, nothing, customElement, query, state, styleMap } from '../../../../../external/lit/index.js';
 import { UmbModalBaseElement, } from '../../index.js';
 import { buildUdi, getKeyFromUdi } from '../../../../../shared/utils/index.js';
 export let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModalBaseElement {
@@ -25,6 +25,8 @@ export let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends U
             hideAnchor: false,
             ignoreUserStartNodes: false,
         };
+        this.documentExpand = false;
+        this.mediaExpanded = false;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -41,20 +43,33 @@ export let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends U
         if (!this._linkQueryInput)
             return;
         const query = this._linkQueryInput.value;
-        //TODO: Handle query strings (add # etc)
-        this._link.queryString = query;
+        if (query.startsWith('#') || query.startsWith('?')) {
+            this._link.queryString = query;
+            return;
+        }
+        if (query.includes('=')) {
+            this._link.queryString = `?${query}`;
+        }
+        else {
+            this._link.queryString = `#${query}`;
+        }
     }
     _handleSelectionChange(e, entityType) {
         //TODO: Update icon, published, trashed
         e.stopPropagation();
         const element = e.target;
         const selectedKey = element.selection[element.selection.length - 1];
-        if (!selectedKey)
+        if (!selectedKey) {
+            this._link.url = '';
+            this._link.udi = undefined;
+            this._selectedKey = undefined;
+            this.requestUpdate();
             return;
+        }
         const udi = buildUdi(entityType, selectedKey);
         this._selectedKey = selectedKey;
         this._link.udi = udi;
-        this._link.url = udi; // TODO
+        this._link.url = udi;
         this.requestUpdate();
     }
     _submit() {
@@ -69,21 +84,21 @@ export let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends U
 				<uui-box>
 					<div class="url-link">${this._renderLinkUrlInput()} ${this._renderAnchorInput()}</div>
 
-					<uui-label for="link-title-input">Link Title</uui-label>
+					<uui-label for="link-title-input">${this.localize.term('defaultdialogs_nodeNameLinkPicker')}</uui-label>
 					<uui-input
 						id="link-title-input"
-						placeholder="Enter a title"
-						label="link title"
+						placeholder=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}
+						label=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}
 						@input=${() => (this._link.name = this._linkTitleInput.value)}
 						.value="${this._link.name ?? ''}"></uui-input>
 
-					<uui-label>Target</uui-label>
+					<uui-label>${this.localize.term('content_target')}</uui-label>
 					<uui-toggle
 						id="#target-toggle"
-						label="Toggle if link should open in a new tab"
+						label=${this.localize.term('defaultdialogs_openInNewWindow')}
 						.checked="${this._link.target === '_blank' ? true : false}"
 						@change="${(e) => e.target.checked ? (this._link.target = '_blank') : (this._link.target = '')}">
-						Open the link in a new tab
+						${this.localize.term('defaultdialogs_openInNewWindow')}
 					</uui-toggle>
 
 					<hr />
@@ -91,57 +106,78 @@ export let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends U
 					${this._renderTrees()}
 				</uui-box>
 				<div slot="actions">
-					<uui-button label="Close" @click=${this._close}></uui-button>
-					<uui-button label="Submit" look="primary" color="positive" @click=${this._submit}></uui-button>
+					<uui-button label=${this.localize.term('general_close')} @click=${this._close}></uui-button>
+					<uui-button
+						label=${this.localize.term('general_submit')}
+						look="primary"
+						color="positive"
+						@click=${this._submit}></uui-button>
 				</div>
 			</umb-body-layout>
 		`;
     }
     _renderLinkUrlInput() {
         return html `<span>
-			<uui-label for="link-input">Link</uui-label>
+			<uui-label for="link-input">${this.localize.term('defaultdialogs_link')}</uui-label>
 			<uui-input
 				id="link-input"
-				placeholder="URL"
-				label="URL"
+				placeholder=${this.localize.term('general_url')}
+				label=${this.localize.term('general_url')}
 				.value="${this._link.udi ?? this._link.url ?? ''}"
 				@input=${() => (this._link.url = this._linkInput.value)}
-				.disabled="${this._link.udi ? true : false}"></uui-input>
+				?disabled="${this._link.udi ? true : false}"></uui-input>
 		</span>`;
     }
     _renderAnchorInput() {
         if (this._layout.hideAnchor)
             return nothing;
         return html `<span>
-			<uui-label for="anchor-input">Anchor / querystring</uui-label>
+			<uui-label for="anchor-input">${this.localize.term('defaultdialogs_anchorLinkPicker')}</uui-label>
 			<uui-input
 				id="anchor-input"
-				placeholder="#value or ?key=value"
-				label="#value or ?key=value"
+				placeholder=${this.localize.term('placeholders_anchor')}
+				label=${this.localize.term('placeholders_anchor')}
 				@input=${this._handleQueryString}
 				.value="${this._link.queryString ?? ''}"></uui-input>
 		</span>`;
     }
     _renderTrees() {
-        return html `<uui-label for="search-input">Link to page</uui-label>
-			<uui-input id="search-input" placeholder="Type to search" label="Type to search"></uui-input>
-			<umb-tree
-				?multiple=${false}
-				alias="Umb.Tree.Documents"
-				@selection-change=${(event) => this._handleSelectionChange(event, 'document')}
-				.selection=${[this._selectedKey ?? '']}
-				selectable></umb-tree>
-
+        //TODO: Make search work
+        return html `
+			<uui-symbol-expand
+				id="document-expand"
+				@click=${() => (this.documentExpand = !this.documentExpand)}
+				.open=${!this.documentExpand}></uui-symbol-expand>
+			<uui-label for="document-expand">${this.localize.term('defaultdialogs_linkToPage')}</uui-label>
+			<div style="${styleMap({ display: !this.documentExpand ? 'block' : 'none' })}">
+				<uui-input
+					id="search-input"
+					placeholder=${this.localize.term('placeholders_search')}
+					label=${this.localize.term('placeholders_search')}></uui-input>
+				<umb-tree
+					?hide-tree-root=${true}
+					?multiple=${false}
+					alias="Umb.Tree.Documents"
+					@selection-change=${(event) => this._handleSelectionChange(event, 'document')}
+					.selection=${[this._selectedKey ?? '']}
+					selectable></umb-tree>
+			</div>
 			<hr />
-
-			<uui-label>Link to media</uui-label>
-
-			<umb-tree
-				?multiple=${false}
-				alias="Umb.Tree.Media"
-				@selection-change=${(event) => this._handleSelectionChange(event, 'media')}
-				.selection=${[this._selectedKey ?? '']}
-				selectable></umb-tree>`;
+			<uui-symbol-expand
+				id="media-expand"
+				@click=${() => (this.mediaExpanded = !this.mediaExpanded)}
+				.open=${!this.mediaExpanded}></uui-symbol-expand>
+			<uui-label for="media-expand">${this.localize.term('defaultdialogs_linkToMedia')}</uui-label>
+			<div style="${styleMap({ display: !this.mediaExpanded ? 'block' : 'none' })}">
+				<umb-tree
+					?hide-tree-root=${true}
+					?multiple=${false}
+					alias="Umb.Tree.Media"
+					@selection-change=${(event) => this._handleSelectionChange(event, 'media')}
+					.selection=${[this._selectedKey ?? '']}
+					selectable></umb-tree>
+			</div>
+		`;
     }
     static { this.styles = [
         css `
@@ -157,7 +193,7 @@ export let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends U
 				width: 100%;
 			}
 
-			uui-input,
+			uui-input:not(#search-input),
 			uui-label {
 				margin-bottom: var(--uui-size-space-6);
 			}
@@ -188,6 +224,12 @@ __decorate([
 __decorate([
     state()
 ], UmbLinkPickerModalElement.prototype, "_layout", void 0);
+__decorate([
+    state()
+], UmbLinkPickerModalElement.prototype, "documentExpand", void 0);
+__decorate([
+    state()
+], UmbLinkPickerModalElement.prototype, "mediaExpanded", void 0);
 __decorate([
     query('#link-input')
 ], UmbLinkPickerModalElement.prototype, "_linkInput", void 0);

package/dist-cms/packages/core/property-editor/schemas/Umbraco.RichText.js

@@ -1,7 +1,7 @@
 export const manifest = {
     type: 'propertyEditorSchema',
     name: 'Rich Text',
-    alias: 'Umbraco.TinyMCE',
+    alias: 'Umbraco.RichText',
     meta: {
         defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.TinyMCE',
         settings: {

package/dist-cms/packages/core/property-editor/uis/tiny-mce/config/dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.js

@@ -4,7 +4,7 @@ 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 { UmbTextStyles } from "../../../../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../../../../shared/style/index.js';
 import { customElement, html, property } from '../../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../../../shared/lit-element/index.js';
 /**
@@ -16,8 +16,18 @@ export let UmbPropertyEditorUITinyMceDimensionsConfigurationElement = class UmbP
         this.value = {};
     }
     render() {
-        return html `<uui-input type="number" placeholder="Width" .value=${this.value.width}></uui-input> x
-			<uui-input type="number" placeholder="Height" .value=${this.value.height}></uui-input> pixels`;
+        return html `<uui-input
+				type="number"
+				label=${this.localize.term('general_width')}
+				placeholder=${this.localize.term('general_width')}
+				.value=${this.value?.width}></uui-input>
+			x
+			<uui-input
+				type="number"
+				label=${this.localize.term('general_height')}
+				placeholder=${this.localize.term('general_height')}
+				.value=${this.value?.height}></uui-input>
+			pixels`;
     }
     static { this.styles = [UmbTextStyles]; }
 };

package/dist-cms/packages/core/property-editor/uis/tiny-mce/config/manifests.js

@@ -6,7 +6,7 @@ const configurationManifests = [
         loader: () => import('./toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.js'),
         meta: {
             label: 'TinyMCE Toolbar Configuration',
-            propertyEditorSchemaAlias: 'Umbraco.TinyMCE.Configuration',
+            propertyEditorSchemaAlias: 'Umbraco.RichText.Configuration',
             icon: 'umb:autofill',
             group: 'common',
         },
@@ -18,7 +18,7 @@ const configurationManifests = [
         loader: () => import('./stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.js'),
         meta: {
             label: 'TinyMCE Stylesheets Configuration',
-            propertyEditorSchemaAlias: 'Umbraco.TinyMCE.Configuration',
+            propertyEditorSchemaAlias: 'Umbraco.RichText.Configuration',
             icon: 'umb:autofill',
             group: 'common',
         },
@@ -30,7 +30,7 @@ const configurationManifests = [
         loader: () => import('./dimensions/property-editor-ui-tiny-mce-dimensions-configuration.element.js'),
         meta: {
             label: 'TinyMCE Dimensions Configuration',
-            propertyEditorSchemaAlias: 'Umbraco.TinyMCE.Configuration',
+            propertyEditorSchemaAlias: 'Umbraco.RichText.Configuration',
             icon: 'umb:autofill',
             group: 'common',
         },
@@ -42,7 +42,7 @@ const configurationManifests = [
         loader: () => import('./max-image-size/property-editor-ui-tiny-mce-maximagesize-configuration.element.js'),
         meta: {
             label: 'TinyMCE Max Image Size Configuration',
-            propertyEditorSchemaAlias: 'Umbraco.TinyMCE.Configuration',
+            propertyEditorSchemaAlias: 'Umbraco.RichText.Configuration',
             icon: 'umb:autofill',
             group: 'common',
         },

package/dist-cms/packages/core/property-editor/uis/tiny-mce/config/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.d.ts

@@ -1,10 +1,16 @@
 import { UmbLitElement } from '../../../../../../../shared/lit-element/index.js';
+import { StylesheetOverviewResponseModel } from '../../../../../../../external/backend-api/index.js';
 /**
  * @element umb-property-editor-ui-tiny-mce-stylesheets-configuration
  */
 export declare class UmbPropertyEditorUITinyMceStylesheetsConfigurationElement extends UmbLitElement {
+    #private;
     value: string[];
     config: never[];
+    stylesheetList: Array<StylesheetOverviewResponseModel & Partial<{
+        selected: boolean;
+    }>>;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }

package/dist-cms/packages/core/property-editor/uis/tiny-mce/config/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.js

@@ -4,21 +4,59 @@ 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 { UmbTextStyles } from "../../../../../../../shared/style/index.js";
-import { css, customElement, html, property } from '../../../../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../../../../../shared/style/index.js';
+import { css, customElement, html, property, state } from '../../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../../../shared/lit-element/index.js';
+import { UmbStylesheetRepository } from '../../../../../../templating/stylesheets/index.js';
 /**
  * @element umb-property-editor-ui-tiny-mce-stylesheets-configuration
  */
 export let UmbPropertyEditorUITinyMceStylesheetsConfigurationElement = class UmbPropertyEditorUITinyMceStylesheetsConfigurationElement extends UmbLitElement {
+    #repository;
     constructor() {
-        super(...arguments);
+        super();
         this.value = [];
         this.config = [];
+        this.stylesheetList = [];
+        this.#repository = new UmbStylesheetRepository(this);
+        this.#getAllStylesheets();
+    }
+    async #getAllStylesheets() {
+        const { data } = await this.#repository.getAll();
+        if (!data)
+            return;
+        const styles = data.items;
+        this.stylesheetList = styles.map((stylesheet) => ({
+            ...stylesheet,
+            selected: this.value?.some((path) => path === stylesheet.path),
+        }));
+    }
+    #onChange(event) {
+        const checkbox = event.target;
+        if (checkbox.checked) {
+            if (this.value) {
+                this.value = [...this.value, checkbox.value];
+            }
+            else {
+                this.value = [checkbox.value];
+            }
+        }
+        else {
+            this.value = this.value.filter((v) => v !== checkbox.value);
+        }
+        this.dispatchEvent(new CustomEvent('property-value-change'));
     }
     render() {
         return html `<ul>
-			${this.value?.map((v) => html `<li><uui-checkbox value=${v}>${v}</uui-checkbox></li>`)}
+			${this.stylesheetList.map((stylesheet) => html `<li>
+						<uui-checkbox
+							.label=${stylesheet.name}
+							.value=${stylesheet.path ?? ''}
+							@change=${this.#onChange}
+							?checked=${stylesheet.selected}>
+							${stylesheet.name}
+						</uui-checkbox>
+					</li>`)}
 		</ul>`;
     }
     static { this.styles = [
@@ -33,11 +71,14 @@ export let UmbPropertyEditorUITinyMceStylesheetsConfigurationElement = class Umb
     ]; }
 };
 __decorate([
-    property()
+    property({ type: Array })
 ], UmbPropertyEditorUITinyMceStylesheetsConfigurationElement.prototype, "value", void 0);
 __decorate([
     property({ type: Array, attribute: false })
 ], UmbPropertyEditorUITinyMceStylesheetsConfigurationElement.prototype, "config", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUITinyMceStylesheetsConfigurationElement.prototype, "stylesheetList", void 0);
 UmbPropertyEditorUITinyMceStylesheetsConfigurationElement = __decorate([
     customElement('umb-property-editor-ui-tiny-mce-stylesheets-configuration')
 ], UmbPropertyEditorUITinyMceStylesheetsConfigurationElement);

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

@@ -4,7 +4,7 @@ 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 { UmbTextStyles } from "../../../../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../../../../shared/style/index.js';
 import { customElement, css, html, property, map, state } from '../../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../../../shared/lit-element/index.js';
 import { umbExtensionsRegistry } from '../../../../../extension-registry/index.js';
@@ -89,11 +89,11 @@ export let UmbPropertyEditorUITinyMceToolbarConfigurationElement = class UmbProp
     render() {
         return html `<ul>
 			${map(this._toolbarConfig, (v) => html `<li>
-					<uui-checkbox value=${v.alias} ?checked=${v.selected} @change=${this.onChange}>
-						<uui-icon .svg=${tinyIconSet?.icons[v.icon ?? 'alignjustify']}></uui-icon>
-						${v.label}
-					</uui-checkbox>
-				</li>`)}
+						<uui-checkbox label=${v.label} value=${v.alias} ?checked=${v.selected} @change=${this.onChange}>
+							<uui-icon .svg=${tinyIconSet?.icons[v.icon ?? 'alignjustify']}></uui-icon>
+							${v.label}
+						</uui-checkbox>
+					</li>`)}
 		</ul>`;
     }
     static { this.styles = [

package/dist-cms/packages/core/property-editor/uis/tiny-mce/manifests.js

@@ -6,7 +6,7 @@ const manifest = {
     loader: () => import('./property-editor-ui-tiny-mce.element.js'),
     meta: {
         label: 'Rich Text Editor',
-        propertyEditorSchemaAlias: 'Umbraco.TinyMCE',
+        propertyEditorSchemaAlias: 'Umbraco.RichText',
         icon: 'umb:browser-window',
         group: 'richText',
         settings: {