@tiny-mce-umbraco/backoffice 16.0.0-rc2 → 16.0.0-rc2.1

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

@@ -0,0 +1,102 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UmbPropertyEditorUITinyMceConfigEditorElement_instances, _UmbPropertyEditorUITinyMceConfigEditorElement_showCodeEditor;
+import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UMB_CODE_EDITOR_MODAL } from '@umbraco-cms/backoffice/code-editor';
+import { umbOpenModal } from '@umbraco-cms/backoffice/modal';
+/**
+ * @element umb-property-editor-ui-tiny-mce-config-editor
+ */
+let UmbPropertyEditorUITinyMceConfigEditorElement = class UmbPropertyEditorUITinyMceConfigEditorElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _UmbPropertyEditorUITinyMceConfigEditorElement_instances.add(this);
+        this._customConfig = JSON.parse('{}');
+    }
+    set value(value) {
+        if (!value)
+            return;
+        this._customConfig = value;
+    }
+    get value() {
+        return this._customConfig;
+    }
+    async firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this._customConfig = this.value;
+        this.requestUpdate('_customConfig');
+    }
+    render() {
+        return html `
+			<umb-body-layout>
+				<button @click=${__classPrivateFieldGet(this, _UmbPropertyEditorUITinyMceConfigEditorElement_instances, "m", _UmbPropertyEditorUITinyMceConfigEditorElement_showCodeEditor)}>Open Code Editor</button>
+				<div id="editor-box"><pre>${JSON.stringify(this.value, null, 2)}</pre></div>
+			</umb-body-layout>
+		`;
+    }
+};
+_UmbPropertyEditorUITinyMceConfigEditorElement_instances = new WeakSet();
+_UmbPropertyEditorUITinyMceConfigEditorElement_showCodeEditor = async function _UmbPropertyEditorUITinyMceConfigEditorElement_showCodeEditor() {
+    const value = await umbOpenModal(this, UMB_CODE_EDITOR_MODAL, {
+        data: {
+            headline: 'Edit custom configuration',
+            content: JSON.stringify(this._customConfig) ?? '',
+            language: 'json',
+        },
+    }).catch(() => undefined);
+    if (!value) {
+        return;
+    }
+    if (!value.content) {
+        this._customConfig = JSON.parse('{}');
+    }
+    else {
+        try {
+            this._customConfig = JSON.parse(value.content.toString());
+            console.log('Parsed object:', this._customConfig);
+            // Proceed with using jsonObj
+        }
+        catch (err) {
+            console.error('Invalid JSON:', err);
+        }
+    }
+    this.dispatchEvent(new UmbChangeEvent());
+};
+UmbPropertyEditorUITinyMceConfigEditorElement.styles = [
+    css `
+			#editor-box {
+				padding: var(--uui-box-default-padding, var(--uui-size-space-5, 18px));
+				height: 100%;
+				display: flex;
+				background: #FFFFFF;
+				padding: 1em;
+				border-radius: 4px;
+				font-family: monospace;
+			}
+		`,
+];
+__decorate([
+    property({ attribute: false })
+], UmbPropertyEditorUITinyMceConfigEditorElement.prototype, "value", null);
+__decorate([
+    property({ attribute: false })
+], UmbPropertyEditorUITinyMceConfigEditorElement.prototype, "config", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUITinyMceConfigEditorElement.prototype, "_customConfig", void 0);
+UmbPropertyEditorUITinyMceConfigEditorElement = __decorate([
+    customElement('umb-property-editor-ui-tiny-mce-config-editor')
+], UmbPropertyEditorUITinyMceConfigEditorElement);
+export { UmbPropertyEditorUITinyMceConfigEditorElement };
+export default UmbPropertyEditorUITinyMceConfigEditorElement;

package/dist-cms/property-editors/constants.d.ts

@@ -0,0 +1,2 @@
+export * from './tiny-mce/constants.js';
+//# sourceMappingURL=constants.d.ts.map

package/dist-cms/property-editors/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/property-editors/constants.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/dist-cms/property-editors/constants.js

@@ -0,0 +1 @@
+export * from './tiny-mce/constants.js';

package/dist-cms/property-editors/manifests.d.ts

@@ -0,0 +1,2 @@
+export declare const manifests: Array<UmbExtensionManifest>;
+//# sourceMappingURL=manifests.d.ts.map

package/dist-cms/property-editors/manifests.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manifests.d.ts","sourceRoot":"","sources":["../../src/property-editors/manifests.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAmCjD,CAAC"}

package/dist-cms/property-editors/manifests.js

@@ -0,0 +1,37 @@
+import { manifests as tinyMceManifest } from './tiny-mce/manifests.js';
+export const manifests = [
+    ...tinyMceManifest,
+    {
+        type: 'propertyEditorUi',
+        alias: 'TinyMCE.PropertyEditorUI.TinyMCE.PluginConfiguration',
+        name: 'TinyMCE Plugin Property Editor UI',
+        element: () => import('./plugin/property-editor-ui-tiny-mce-plugin-configuration.element.js'),
+        meta: {
+            label: 'TinyMCE Plugin Configuration',
+            icon: 'icon-autofill',
+            group: 'common',
+        },
+    },
+    {
+        type: 'propertyEditorUi',
+        alias: 'Umb.PropertyEditorUI.TinyMCE.ToolbarConfiguration',
+        name: 'TinyMCE Toolbar Property Editor UI',
+        element: () => import('./toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.js'),
+        meta: {
+            label: 'TinyMCE Toolbar Configuration',
+            icon: 'icon-autofill',
+            group: 'common',
+        },
+    },
+    {
+        type: 'propertyEditorUi',
+        alias: 'Umb.PropertyEditorUI.TinyMCE.CustomConfig',
+        name: 'TinyMCE Custom Config Property Editor UI',
+        element: () => import('./configEditor/property-editor-ui-tiny-mce-config-editor.element.js'),
+        meta: {
+            label: 'TinyMCE Custom Configuration',
+            icon: 'icon-autofill',
+            group: 'common',
+        },
+    },
+];

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

@@ -0,0 +1,25 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbPropertyEditorUiElement, UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+/**
+ * @element umb-property-editor-ui-tiny-mce-plugin-configuration
+ */
+export declare class UmbPropertyEditorUITinyMcePluginConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
+    set value(value: string | string[] | null);
+    get value(): string[];
+    config?: UmbPropertyEditorConfigCollection;
+    private _pluginConfig;
+    protected firstUpdated(_changedProperties: PropertyValueMap<unknown>): Promise<void>;
+    private getPlugins;
+    private onChange;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export default UmbPropertyEditorUITinyMcePluginConfigurationElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-property-editor-ui-tiny-mce-plugin-configuration': UmbPropertyEditorUITinyMcePluginConfigurationElement;
+    }
+}
+//# sourceMappingURL=property-editor-ui-tiny-mce-plugin-configuration.element.d.ts.map

package/dist-cms/property-editors/plugin/property-editor-ui-tiny-mce-plugin-configuration.element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-ui-tiny-mce-plugin-configuration.element.d.ts","sourceRoot":"","sources":["../../../src/property-editors/plugin/property-editor-ui-tiny-mce-plugin-configuration.element.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAEpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,KAAK,EACX,0BAA0B,EAC1B,iCAAiC,EACjC,MAAM,yCAAyC,CAAC;AAejD;;GAEG;AACH,qBACa,oDACZ,SAAQ,aACR,YAAW,0BAA0B;;IAErC,IACI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,EAexC;IACD,IAAI,KAAK,IAAI,MAAM,EAAE,CAEpB;IAGD,MAAM,CAAC,EAAE,iCAAiC,CAAC;IAG3C,OAAO,CAAC,aAAa,CAAsB;cAIlB,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,OAAO,CAAC;YAuBrE,UAAU;IA4FxB,OAAO,CAAC,QAAQ;IAaP,MAAM;IAoBf,gBAAyB,MAAM,4BAS7B;CACF;AAED,eAAe,oDAAoD,CAAC;AAEpE,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sDAAsD,EAAE,oDAAoD,CAAC;KAC7G;CACD"}

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

@@ -0,0 +1,212 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UmbPropertyEditorUITinyMcePluginConfigurationElement_instances, _UmbPropertyEditorUITinyMcePluginConfigurationElement_selectedValues, _UmbPropertyEditorUITinyMcePluginConfigurationElement_getTinyMceConfig;
+import { css, customElement, html, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
+import { TinyMceService } from '../../api/index.js';
+import { tryExecute } from '@umbraco-cms/backoffice/resources';
+import { umbHttpClient } from '@umbraco-cms/backoffice/http-client';
+//import { tinymce } from '@umbraco-cms/backoffice/external/tinymce';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { defaultFallbackConfig } from '../../components/input-tiny-mce/input-tiny-mce.defaults.js';
+import { defaultPremiumPluginsList } from '../../components/input-tiny-mce/input-tiny-mce.defaults.js';
+/**
+ * @element umb-property-editor-ui-tiny-mce-plugin-configuration
+ */
+let UmbPropertyEditorUITinyMcePluginConfigurationElement = class UmbPropertyEditorUITinyMcePluginConfigurationElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _UmbPropertyEditorUITinyMcePluginConfigurationElement_instances.add(this);
+        this._pluginConfig = [];
+        _UmbPropertyEditorUITinyMcePluginConfigurationElement_selectedValues.set(this, []);
+    }
+    set value(value) {
+        if (!value)
+            return;
+        if (typeof value === 'string') {
+            __classPrivateFieldSet(this, _UmbPropertyEditorUITinyMcePluginConfigurationElement_selectedValues, value.split(',').filter((x) => x.length > 0), "f");
+        }
+        else if (Array.isArray(value)) {
+            __classPrivateFieldSet(this, _UmbPropertyEditorUITinyMcePluginConfigurationElement_selectedValues, value, "f");
+        }
+        else {
+            __classPrivateFieldSet(this, _UmbPropertyEditorUITinyMcePluginConfigurationElement_selectedValues, [], "f");
+            return;
+        }
+        this._pluginConfig.forEach((v) => {
+            v.selected = __classPrivateFieldGet(this, _UmbPropertyEditorUITinyMcePluginConfigurationElement_selectedValues, "f").includes(v.alias);
+        });
+    }
+    get value() {
+        return __classPrivateFieldGet(this, _UmbPropertyEditorUITinyMcePluginConfigurationElement_selectedValues, "f");
+    }
+    async firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.config?.getValueByAlias('plugins')?.forEach((v) => {
+            this._pluginConfig.push({
+                ...v,
+                selected: this.value.includes(v.alias),
+            });
+        });
+        await this.getPlugins();
+        this.requestUpdate('_pluginConfig');
+    }
+    async getPlugins() {
+        // Get all the tinymce plugins
+        const plugin$ = umbExtensionsRegistry.byType('tinyMcePlugin');
+        const plugins = await firstValueFrom(plugin$);
+        const appSettingsConfig = await __classPrivateFieldGet(this, _UmbPropertyEditorUITinyMcePluginConfigurationElement_instances, "m", _UmbPropertyEditorUITinyMcePluginConfigurationElement_getTinyMceConfig).call(this);
+        // Get list of plugins to exclude from the list
+        let apiKey = '';
+        let excludeList = [];
+        let configPlugins = [];
+        if (appSettingsConfig) {
+            apiKey = appSettingsConfig.richTextEditor?.cloudApiKey || '';
+            if (appSettingsConfig.config?.apikey) {
+                apiKey = appSettingsConfig.config?.apikey;
+            }
+            if (Array.isArray(appSettingsConfig.config?.pluginsToExclude)) {
+                excludeList = appSettingsConfig.config?.pluginsToExclude;
+            }
+            if (!apiKey) {
+                // Remove pre-loaded premium plugins if no key present
+                excludeList = [...new Set([...excludeList, ...defaultPremiumPluginsList])];
+            }
+            if (Array.isArray(appSettingsConfig.richTextEditor?.plugins)) {
+                configPlugins = appSettingsConfig.richTextEditor?.plugins;
+            }
+        }
+        // Add defaultPlugins
+        if (typeof defaultFallbackConfig.plugins === 'string') {
+            this._pluginConfig.push({
+                alias: defaultFallbackConfig.plugins,
+                label: defaultFallbackConfig.plugins + ' (default plugin)',
+                icon: undefined,
+                selected: true,
+                disabled: true,
+            });
+        }
+        else if (Array.isArray(defaultFallbackConfig.plugins)) {
+            defaultFallbackConfig.plugins.forEach((pl) => {
+                this._pluginConfig.push({
+                    alias: pl,
+                    label: pl + ' (default plugin)',
+                    selected: true,
+                    disabled: true,
+                });
+            });
+        }
+        const defaultPluginAliases = this._pluginConfig.map((p) => p.alias);
+        configPlugins.forEach((p) => {
+            if (!excludeList.includes(p) && !defaultPluginAliases.includes(p)) {
+                this._pluginConfig.push({
+                    alias: p,
+                    label: p,
+                    icon: undefined,
+                    selected: this.value.includes(p),
+                    disabled: false,
+                });
+            }
+        });
+        plugins.forEach((p) => {
+            if (p.meta?.plugins) {
+                if (typeof p.meta.plugins === 'string' && !excludeList.includes(p.meta.plugins)) {
+                    this._pluginConfig.push({
+                        alias: p.meta.plugins,
+                        label: p.meta.plugins,
+                        icon: undefined,
+                        selected: this.value.includes(p.meta.plugins),
+                        disabled: false,
+                    });
+                }
+                else if (Array.isArray(p.meta.plugins)) {
+                    p.meta.plugins.forEach((pl) => {
+                        if (!excludeList.includes(pl)) {
+                            this._pluginConfig.push({
+                                alias: pl,
+                                label: pl,
+                                icon: undefined,
+                                selected: this.value.includes(pl),
+                                disabled: false,
+                            });
+                        }
+                    });
+                }
+            }
+        });
+    }
+    onChange(event) {
+        const checkbox = event.target;
+        const alias = checkbox.value;
+        const value = this._pluginConfig
+            .filter((t) => (t.alias !== alias && t.selected) || (t.alias === alias && checkbox.checked))
+            .map((v) => v.alias);
+        this.value = value;
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    render() {
+        return html `<ul>
+			${repeat(this._pluginConfig, (v) => v.alias, (v) => html `<li>
+						<uui-checkbox
+							label=${v.label}
+							value=${v.alias}
+							?disabled=${v.disabled}
+							?checked=${v.selected}
+							@change=${this.onChange}>
+							${v.label}
+						</uui-checkbox>
+					</li>`)}
+		</ul>`;
+    }
+};
+_UmbPropertyEditorUITinyMcePluginConfigurationElement_selectedValues = new WeakMap();
+_UmbPropertyEditorUITinyMcePluginConfigurationElement_instances = new WeakSet();
+_UmbPropertyEditorUITinyMcePluginConfigurationElement_getTinyMceConfig = async function _UmbPropertyEditorUITinyMcePluginConfigurationElement_getTinyMceConfig() {
+    // @ts-ignore
+    const { data } = await tryExecute(this, TinyMceService.getConfig({ client: umbHttpClient }));
+    if (!data)
+        return;
+    return data;
+};
+UmbPropertyEditorUITinyMcePluginConfigurationElement.styles = [
+    UmbTextStyles,
+    css `
+			ul {
+				list-style: none;
+				padding: 0;
+				margin: 0;
+			}
+		`,
+];
+__decorate([
+    property({ attribute: false })
+], UmbPropertyEditorUITinyMcePluginConfigurationElement.prototype, "value", null);
+__decorate([
+    property({ attribute: false })
+], UmbPropertyEditorUITinyMcePluginConfigurationElement.prototype, "config", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUITinyMcePluginConfigurationElement.prototype, "_pluginConfig", void 0);
+UmbPropertyEditorUITinyMcePluginConfigurationElement = __decorate([
+    customElement('umb-property-editor-ui-tiny-mce-plugin-configuration')
+], UmbPropertyEditorUITinyMcePluginConfigurationElement);
+export { UmbPropertyEditorUITinyMcePluginConfigurationElement };
+export default UmbPropertyEditorUITinyMcePluginConfigurationElement;

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

@@ -0,0 +1,2 @@
+export declare const UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS = "Umb.PropertyEditorUi.TinyMCE";
+//# sourceMappingURL=constants.d.ts.map

package/dist-cms/property-editors/tiny-mce/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/property-editors/tiny-mce/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sCAAsC,iCAAiC,CAAC"}

package/dist-cms/property-editors/tiny-mce/constants.js

@@ -0,0 +1 @@
+export const UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS = 'Umb.PropertyEditorUi.TinyMCE';

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

@@ -0,0 +1,2 @@
+export declare const manifests: Array<UmbExtensionManifest>;
+//# sourceMappingURL=manifests.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"manifests.d.ts","sourceRoot":"","sources":["../../../src/property-editors/tiny-mce/manifests.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAkJjD,CAAC"}

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

@@ -0,0 +1,149 @@
+import { UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS } from './constants.js';
+import { UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS } from '@umbraco-cms/backoffice/rte';
+export const manifests = [
+    {
+        type: 'propertyEditorUi',
+        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 [TinyMCE]',
+            propertyEditorSchemaAlias: UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS,
+            icon: 'icon-tinymce',
+            group: 'richContent',
+            supportsReadOnly: true,
+            settings: {
+                properties: [
+                    {
+                        alias: 'plugins',
+                        label: 'Plugins',
+                        description: 'Pick the plugins to activate for this editor',
+                        propertyEditorUiAlias: 'TinyMCE.PropertyEditorUI.TinyMCE.PluginConfiguration',
+                        weight: 5,
+                        config: [],
+                    },
+                    {
+                        alias: 'toolbar',
+                        label: 'Toolbar',
+                        description: 'Pick the toolbar options that should be available when editing',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUI.TinyMCE.ToolbarConfiguration',
+                        weight: 10,
+                        config: [
+                            {
+                                alias: 'toolbar',
+                                value: [
+                                    { alias: 'undo', label: 'Undo', icon: 'undo' },
+                                    { alias: 'redo', label: 'Redo', icon: 'redo' },
+                                    { alias: 'cut', label: 'Cut', icon: 'cut' },
+                                    { alias: 'copy', label: 'Copy', icon: 'copy' },
+                                    { alias: 'paste', label: 'Paste', icon: 'paste' },
+                                    { alias: 'styles', label: 'Style select', icon: 'permanent-pen' },
+                                    { alias: 'fontname', label: 'Font select', icon: 'text-color' },
+                                    { alias: 'fontsize', label: 'Font size', icon: 'text-color' },
+                                    { alias: 'forecolor', label: 'Text color', icon: 'text-color' },
+                                    { alias: 'backcolor', label: 'Background color', icon: 'highlight-bg-color' },
+                                    { alias: 'blockquote', label: 'Blockquote', icon: 'quote' },
+                                    { alias: 'formatblock', label: 'Format block', icon: 'format' },
+                                    { alias: 'removeformat', label: 'Remove format', icon: 'remove-formatting' },
+                                    { alias: 'bold', label: 'Bold', icon: 'bold' },
+                                    { alias: 'italic', label: 'Italic', icon: 'italic' },
+                                    { alias: 'underline', label: 'Underline', icon: 'underline' },
+                                    { alias: 'strikethrough', label: 'Strikethrough', icon: 'strike-through' },
+                                    { alias: 'alignleft', label: 'Align left', icon: 'align-left' },
+                                    { alias: 'aligncenter', label: 'Align center', icon: 'align-center' },
+                                    { alias: 'alignright', label: 'Align right', icon: 'align-right' },
+                                    { alias: 'alignjustify', label: 'Align justify', icon: 'align-justify' },
+                                    { alias: 'bullist', label: 'Bullet list', icon: 'unordered-list' },
+                                    { alias: 'numlist', label: 'Numbered list', icon: 'ordered-list' },
+                                    { alias: 'outdent', label: 'Outdent', icon: 'outdent' },
+                                    { alias: 'indent', label: 'Indent', icon: 'indent' },
+                                    { alias: 'anchor', label: 'Anchor', icon: 'bookmark' },
+                                    { alias: 'table', label: 'Table', icon: 'table' },
+                                    { alias: 'hr', label: 'Horizontal rule', icon: 'horizontal-rule' },
+                                    { alias: 'subscript', label: 'Subscript', icon: 'subscript' },
+                                    { alias: 'superscript', label: 'Superscript', icon: 'superscript' },
+                                    { alias: 'charmap', label: 'Character map', icon: 'insert-character' },
+                                    { alias: 'rtl', label: 'Right to left', icon: 'rtl' },
+                                    { alias: 'ltr', label: 'Left to right', icon: 'ltr' },
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        alias: 'stylesheets',
+                        label: '#treeHeaders_stylesheets',
+                        description: 'Pick the stylesheets whose editor styles should be available when editing',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.StylesheetPicker',
+                        weight: 20,
+                    },
+                    {
+                        alias: 'dimensions',
+                        label: '#general_dimensions',
+                        description: 'Set the editor dimensions',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUI.Dimensions',
+                        weight: 30,
+                    },
+                    {
+                        alias: 'maxImageSize',
+                        label: '#rte_config_maxImageSize',
+                        description: '{#rte_config_maxImageSize_description}',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+                        config: [{ alias: 'min', value: 0 }],
+                        weight: 40,
+                    },
+                    {
+                        alias: 'mode',
+                        label: 'Mode',
+                        description: 'Select the mode for the editor',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.RadioButtonList',
+                        config: [{ alias: 'items', value: ['Classic', 'Inline'] }],
+                        weight: 50,
+                    },
+                    {
+                        alias: 'overlaySize',
+                        label: '#rte_config_overlaySize',
+                        description: '{#rte_config_overlaySize_description}',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.OverlaySize',
+                        weight: 81,
+                    },
+                    {
+                        alias: 'hideLabel',
+                        label: 'Hide Label',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+                        weight: 82,
+                    },
+                    {
+                        alias: 'customConfig',
+                        label: 'Custom Configuration',
+                        description: 'Set specific custom configuration for this TinyMCE editor',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUI.TinyMCE.CustomConfig',
+                        weight: 90,
+                    },
+                ],
+                defaultData: [
+                    {
+                        alias: 'toolbar',
+                        value: [
+                            'styles',
+                            'bold',
+                            'italic',
+                            'alignleft',
+                            'aligncenter',
+                            'alignright',
+                            'bullist',
+                            'numlist',
+                            'outdent',
+                            'indent',
+                            'sourcecode',
+                            'link',
+                            'umbmediapicker',
+                            'umbembeddialog',
+                        ],
+                    },
+                    { alias: 'mode', value: 'Classic' },
+                    { alias: 'maxImageSize', value: 500 },
+                ],
+            },
+        },
+    },
+];

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

@@ -0,0 +1,16 @@
+import { UmbPropertyEditorUiRteElementBase } from '@umbraco-cms/backoffice/rte';
+import '../../components/input-tiny-mce/input-tiny-mce.element.js';
+/**
+ * @element umb-property-editor-ui-tiny-mce
+ */
+export declare class UmbPropertyEditorUITinyMceElement extends UmbPropertyEditorUiRteElementBase {
+    #private;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default UmbPropertyEditorUITinyMceElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-property-editor-ui-tiny-mce': UmbPropertyEditorUITinyMceElement;
+    }
+}
+//# sourceMappingURL=property-editor-ui-tiny-mce.element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-ui-tiny-mce.element.d.ts","sourceRoot":"","sources":["../../../src/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iCAAiC,EAAE,MAAM,6BAA6B,CAAC;AAEhF,OAAO,2DAA2D,CAAC;AAEnE;;GAEG;AACH,qBACa,iCAAkC,SAAQ,iCAAiC;;IAgD9E,MAAM;CAUf;AAED,eAAe,iCAAiC,CAAC;AAEjD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iCAAiC,EAAE,iCAAiC,CAAC;KACrE;CACD"}