@umbraco-cms/backoffice 14.0.0--preview004-4ed648fc → 14.0.0--preview004-1ec98701

package/dist-cms/custom-elements.json

@@ -1823,9 +1823,6 @@
         },
         {
           "name": "umb-rte-blur"
-        },
-        {
-          "name": "change"
         }
       ]
     },
@@ -4657,16 +4654,16 @@
       "attributes": [
         {
           "name": "value",
-          "type": "string",
-          "default": "\"\""
+          "type": "RichTextEditorValue | undefined",
+          "default": "{\"blocks\":{},\"markup\":\"\"}"
         }
       ],
       "properties": [
         {
           "name": "value",
           "attribute": "value",
-          "type": "string",
-          "default": "\"\""
+          "type": "RichTextEditorValue | undefined",
+          "default": "{\"blocks\":{},\"markup\":\"\"}"
         },
         {
           "name": "config"

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

@@ -26,7 +26,10 @@ let UmbInputColorElement = class UmbInputColorElement extends FormControlMixin(U
     }
     render() {
         return html `
-			<uui-color-swatches @change="${this._onChange}" label="Color picker">${this._renderColors()} </uui-color-swatches>
+			<uui-color-swatches
+				@change="${this._onChange}"
+				label="Color picker"
+				value=${this.value ?? ''}>${this._renderColors()}</uui-color-swatches>
 		`;
     }
     _renderColors() {

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

@@ -1,5 +1,2 @@
 import type { RawEditorOptions } from '../../../../external/tinymce/index.js';
-export type TinyStyleSheet = RawEditorOptions['style_formats'];
-export declare const defaultStyleFormats: TinyStyleSheet;
-export declare const defaultExtendedValidElements = "@[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";
 export declare const defaultFallbackConfig: RawEditorOptions;

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

@@ -1,28 +1,11 @@
-export const defaultStyleFormats = [
-    {
-        title: 'Headers',
-        items: [
-            { title: 'Page header', block: 'h2' },
-            { title: 'Section header', block: 'h3' },
-            { title: 'Paragraph header', block: 'h4' },
-        ],
-    },
-    {
-        title: 'Blocks',
-        items: [{ title: 'Normal', block: 'p' }],
-    },
-    {
-        title: 'Containers',
-        items: [
-            { title: 'Quote', block: 'blockquote' },
-            { title: 'Code', block: 'code' },
-        ],
-    },
-];
 //These are absolutely required in order for the macros to render inline
 //we put these as extended elements because they get merged on top of the normal allowed elements by tiny mce
-export const defaultExtendedValidElements = '@[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';
+//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',
     toolbar: [
         'styles',
         'bold',
@@ -39,7 +22,30 @@ export const defaultFallbackConfig = {
         'umbmacro',
         'umbembeddialog',
     ],
-    mode: 'classic',
-    stylesheets: [],
+    style_formats: [
+        {
+            title: 'Headers',
+            items: [
+                { title: 'Page header', block: 'h2' },
+                { title: 'Section header', block: 'h3' },
+                { title: 'Paragraph header', block: 'h4' },
+            ],
+        },
+        {
+            title: 'Blocks',
+            items: [{ title: 'Normal', block: 'p' }],
+        },
+        {
+            title: 'Containers',
+            items: [
+                { title: 'Quote', block: 'blockquote' },
+                { title: 'Code', block: 'code' },
+            ],
+        },
+    ],
+    /**
+     * @description The maximum image size in pixels that can be inserted into the editor.
+     * @remarks This is registered and used by the UmbMediaPicker plugin
+     */
     maxImageSize: 500,
 };

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

@@ -15,7 +15,6 @@ export declare class UmbInputTinyMceElement extends UmbInputTinyMceElement_base
     /**
      * Nothing rendered by default - TinyMCE initialisation creates
      * a target div and binds the RTE to that element
-     * @returns
      */
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];

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

@@ -15,13 +15,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _UmbInputTinyMceElement_instances, _UmbInputTinyMceElement_mediaHelper, _UmbInputTinyMceElement_currentUser, _UmbInputTinyMceElement_currentUserContext, _UmbInputTinyMceElement_plugins, _UmbInputTinyMceElement_editorRef, _UmbInputTinyMceElement_stylesheetRepository, _UmbInputTinyMceElement_serverUrl, _UmbInputTinyMceElement_observeCurrentUser, _UmbInputTinyMceElement_loadPlugins, _UmbInputTinyMceElement_setTinyConfig, _UmbInputTinyMceElement_setLanguage, _UmbInputTinyMceElement_editorSetup, _UmbInputTinyMceElement_onInit, _UmbInputTinyMceElement_onChange, _UmbInputTinyMceElement_isMediaPickerEnabled;
-import { defaultExtendedValidElements, defaultFallbackConfig, defaultStyleFormats } from './input-tiny-mce.defaults.js';
-import { pastePreProcessHandler, uploadImageHandler } from './input-tiny-mce.handlers.js';
+var _UmbInputTinyMceElement_instances, _UmbInputTinyMceElement_mediaHelper, _UmbInputTinyMceElement_plugins, _UmbInputTinyMceElement_editorRef, _UmbInputTinyMceElement_stylesheetRepository, _UmbInputTinyMceElement_serverUrl, _UmbInputTinyMceElement_loadPlugins, _UmbInputTinyMceElement_setTinyConfig, _UmbInputTinyMceElement_setLanguage, _UmbInputTinyMceElement_editorSetup, _UmbInputTinyMceElement_onInit, _UmbInputTinyMceElement_onChange;
+import { defaultFallbackConfig } from './input-tiny-mce.defaults.js';
+import { pastePreProcessHandler } from './input-tiny-mce.handlers.js';
 import { availableLanguages } from './input-tiny-mce.languages.js';
 import { uriAttributeSanitizer } from './input-tiny-mce.sanitizer.js';
+import { umbMeta } from '../../meta/index.js';
 import { FormControlMixin } from '../../../../external/uui/index.js';
-import { renderEditor, } from '../../../../external/tinymce/index.js';
+import { renderEditor } from '../../../../external/tinymce/index.js';
 import { loadManifestApi } from '../../../../libs/extension-api/index.js';
 import { umbExtensionsRegistry } from '../../extension-registry/index.js';
 import { css, customElement, html, property, query, state, } from '../../../../external/lit/index.js';
@@ -30,7 +31,7 @@ import { UmbMediaHelper } from '../../../../shared/utils/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 import { UMB_APP_CONTEXT } 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)
+import { UmbChangeEvent } from '../../event/index.js';
 let UmbInputTinyMceElement = class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
     getFormElement() {
         return this._editorElement?.querySelector('iframe') ?? undefined;
@@ -40,8 +41,6 @@ let UmbInputTinyMceElement = class UmbInputTinyMceElement extends FormControlMix
         _UmbInputTinyMceElement_instances.add(this);
         this._tinyConfig = {};
         _UmbInputTinyMceElement_mediaHelper.set(this, new UmbMediaHelper());
-        _UmbInputTinyMceElement_currentUser.set(this, void 0);
-        _UmbInputTinyMceElement_currentUserContext.set(this, void 0);
         _UmbInputTinyMceElement_plugins.set(this, []);
         _UmbInputTinyMceElement_editorRef.set(this, null);
         _UmbInputTinyMceElement_stylesheetRepository.set(this, void 0);
@@ -50,12 +49,6 @@ let UmbInputTinyMceElement = class UmbInputTinyMceElement extends FormControlMix
             __classPrivateFieldSet(this, _UmbInputTinyMceElement_serverUrl, instance.getServerUrl(), "f");
         });
         __classPrivateFieldSet(this, _UmbInputTinyMceElement_stylesheetRepository, new UmbStylesheetRepository(this), "f");
-        // TODO => this breaks tests, removing for now will ignore user language
-        // and fall back to tinymce default language
-        // this.consumeContext(UMB_AUTH, (instance) => {
-        // 	this.#auth = instance;
-        // 	this.#observeCurrentUser();
-        // });
     }
     async firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
@@ -72,17 +65,6 @@ let UmbInputTinyMceElement = class UmbInputTinyMceElement extends FormControlMix
     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");
-              }
-             */
             __classPrivateFieldGet(this, _UmbInputTinyMceElement_stylesheetRepository, "f")?.getStylesheetRules(path).then(({ data }) => {
                 data?.rules?.forEach((rule) => {
                     const r = {
@@ -120,25 +102,17 @@ let UmbInputTinyMceElement = class UmbInputTinyMceElement extends FormControlMix
     /**
      * Nothing rendered by default - TinyMCE initialisation creates
      * a target div and binds the RTE to that element
-     * @returns
      */
     render() {
         return html `<div id="editor"></div>`;
     }
 };
 _UmbInputTinyMceElement_mediaHelper = new WeakMap();
-_UmbInputTinyMceElement_currentUser = new WeakMap();
-_UmbInputTinyMceElement_currentUserContext = new WeakMap();
 _UmbInputTinyMceElement_plugins = new WeakMap();
 _UmbInputTinyMceElement_editorRef = new WeakMap();
 _UmbInputTinyMceElement_stylesheetRepository = new WeakMap();
 _UmbInputTinyMceElement_serverUrl = new WeakMap();
 _UmbInputTinyMceElement_instances = new WeakSet();
-_UmbInputTinyMceElement_observeCurrentUser = async function _UmbInputTinyMceElement_observeCurrentUser() {
-    if (!__classPrivateFieldGet(this, _UmbInputTinyMceElement_currentUserContext, "f"))
-        return;
-    this.observe(__classPrivateFieldGet(this, _UmbInputTinyMceElement_currentUserContext, "f").currentUser, (currentUser) => (__classPrivateFieldSet(this, _UmbInputTinyMceElement_currentUser, currentUser, "f")));
-};
 _UmbInputTinyMceElement_loadPlugins = 
 /**
  * Load all custom plugins - need to split loading and instantiating as these
@@ -161,26 +135,47 @@ async function _UmbInputTinyMceElement_loadPlugins() {
     }
 };
 _UmbInputTinyMceElement_setTinyConfig = async function _UmbInputTinyMceElement_setTinyConfig() {
+    const dimensions = this.configuration?.getValueByAlias('dimensions');
+    // Map the stylesheets with server url
+    const stylesheets = this.configuration
+        ?.getValueByAlias('stylesheets')
+        ?.map((stylesheetPath) => `${__classPrivateFieldGet(this, _UmbInputTinyMceElement_serverUrl, "f")}/css/${stylesheetPath.replace(/\\/g, '/')}`) ?? [];
+    const styleFormats = await this.getFormatStyles(stylesheets);
     // 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?
     const configurationOptions = {
         ...defaultFallbackConfig,
-        ...(this.configuration ? this.configuration?.toObject() : {}),
+        height: dimensions?.height,
+        width: dimensions?.width,
+        content_css: stylesheets,
+        style_formats: styleFormats,
     };
-    // Map the stylesheets with server url
-    const stylesheets = configurationOptions.stylesheets.map((stylesheetPath) => `${__classPrivateFieldGet(this, _UmbInputTinyMceElement_serverUrl, "f")}/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 ?? (configurationOptions.plugins = []);
-        configurationOptions.plugins.splice(configurationOptions.plugins.indexOf('autoresize'), 1);
+    if (!configurationOptions.height) {
+        if (Array.isArray(configurationOptions.plugins) && configurationOptions.plugins.includes('autoresize')) {
+            configurationOptions.plugins.splice(configurationOptions.plugins.indexOf('autoresize'), 1);
+        }
+    }
+    // set the configured toolbar if any
+    const toolbar = this.configuration?.getValueByAlias('toolbar');
+    if (toolbar) {
+        configurationOptions.toolbar = toolbar.join(' ');
+    }
+    // set the configured inline mode
+    const mode = this.configuration?.getValueByAlias('mode');
+    if (mode?.toLocaleLowerCase() === 'inline') {
+        configurationOptions.inline = true;
+    }
+    // set the maximum image size
+    const maxImageSize = this.configuration?.getValueByAlias('maxImageSize');
+    if (maxImageSize !== undefined) {
+        configurationOptions.maxImageSize = maxImageSize;
     }
     // set the default values that will not be modified via configuration
     this._tinyConfig = {
         autoresize_bottom_margin: 10,
         body_class: 'umb-rte',
         //see https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#cache_suffix
-        cache_suffix: '?umb__rnd=' + window.Umbraco?.Sys.ServerVariables.application.cacheBuster, // TODO: Cache buster
+        cache_suffix: `?umb__rnd=${umbMeta.clientVersion}`,
         contextMenu: false,
         inline_boundaries_selector: 'a[href],code,.mce-annotation,.umb-embed-holder,.umb-macro-holder',
         menubar: false,
@@ -191,33 +186,10 @@ _UmbInputTinyMceElement_setTinyConfig = async function _UmbInputTinyMceElement_s
         statusbar: false,
         setup: (editor) => __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_editorSetup).call(this, editor),
         target: this._editorElement,
+        paste_data_images: false,
+        // Extend with configuration options
+        ...configurationOptions,
     };
-    // extend with configuration values
-    this._tinyConfig = {
-        ...this._tinyConfig,
-        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(' '),
-        valid_elements: configurationOptions.validElements,
-        width: configurationOptions.width,
-    };
-    // Need to check if we are allowed to UPLOAD images
-    // This is done by checking if the insert image toolbar button is available
-    if (__classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_isMediaPickerEnabled).call(this)) {
-        this._tinyConfig = {
-            ...this._tinyConfig,
-            // Update the TinyMCE Config object to allow pasting
-            images_upload_handler: uploadImageHandler,
-            automatic_uploads: false,
-            images_replace_blob_uris: false,
-            // This allows images to be pasted in & stored as Base64 until they get uploaded to server
-            paste_data_images: true,
-        };
-    }
     __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_setLanguage).call(this);
     if (__classPrivateFieldGet(this, _UmbInputTinyMceElement_editorRef, "f")) {
         __classPrivateFieldGet(this, _UmbInputTinyMceElement_editorRef, "f").destroy();
@@ -226,7 +198,7 @@ _UmbInputTinyMceElement_setTinyConfig = async function _UmbInputTinyMceElement_s
     __classPrivateFieldSet(this, _UmbInputTinyMceElement_editorRef, editors.pop(), "f");
 };
 _UmbInputTinyMceElement_setLanguage = function _UmbInputTinyMceElement_setLanguage() {
-    const localeId = __classPrivateFieldGet(this, _UmbInputTinyMceElement_currentUser, "f")?.languageIsoCode;
+    const localeId = this.localize.lang();
     //try matching the language using full locale format
     let languageMatch = availableLanguages.find((x) => localeId?.localeCompare(x) === 0);
     //if no matches, try matching using only the language
@@ -243,8 +215,6 @@ _UmbInputTinyMceElement_setLanguage = function _UmbInputTinyMceElement_setLangua
 };
 _UmbInputTinyMceElement_editorSetup = function _UmbInputTinyMceElement_editorSetup(editor) {
     editor.suffix = '.min';
-    // register custom option maxImageSize
-    editor.options.register('maxImageSize', { processor: 'number', default: defaultFallbackConfig.maxImageSize });
     // instantiate plugins - these are already loaded in this.#loadPlugins
     // to ensure they are available before setting up the editor.
     // Plugins require a reference to the current editor as a param, so can not
@@ -260,7 +230,6 @@ _UmbInputTinyMceElement_editorSetup = function _UmbInputTinyMceElement_editorSet
     editor.on('Change', () => __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_onChange).call(this, editor.getContent()));
     editor.on('Dirty', () => __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_onChange).call(this, editor.getContent()));
     editor.on('Keyup', () => __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_onChange).call(this, editor.getContent()));
-    editor.on('SetContent', () => __classPrivateFieldGet(this, _UmbInputTinyMceElement_mediaHelper, "f").uploadBlobImages(editor));
     editor.on('focus', () => this.dispatchEvent(new CustomEvent('umb-rte-focus', { composed: true, bubbles: true })));
     editor.on('blur', () => {
         __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_onChange).call(this, editor.getContent());
@@ -270,22 +239,22 @@ _UmbInputTinyMceElement_editorSetup = function _UmbInputTinyMceElement_editorSet
         __classPrivateFieldGet(this, _UmbInputTinyMceElement_mediaHelper, "f").onResize(e);
         __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_onChange).call(this, editor.getContent());
     });
-    editor.on('init', () => editor.setContent(this.value?.toString() ?? ''));
-    // If we can not find the insert image/media toolbar button
-    // Then we need to add an event listener to the editor
-    // That will update native browser drag & drop events
-    // To update the icon to show you can NOT drop something into the editor
-    if (this._tinyConfig.toolbar && !__classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_isMediaPickerEnabled).call(this)) {
-        // Wire up the event listener
-        editor.on('dragstart dragend dragover draggesture dragdrop drop drag', (e) => {
-            e.preventDefault();
-            if (e.dataTransfer) {
-                e.dataTransfer.effectAllowed = 'none';
-                e.dataTransfer.dropEffect = 'none';
+    editor.on('SetContent', (e) => {
+        /**
+         * Prevent injecting arbitrary JavaScript execution in on-attributes.
+         *
+         * TODO: This used to be toggleable through server variables with window.Umbraco?.Sys.ServerVariables.umbracoSettings.sanitizeTinyMce
+         */
+        const allNodes = Array.from(editor.dom.doc.getElementsByTagName('*'));
+        allNodes.forEach((node) => {
+            for (let i = 0; i < node.attributes.length; i++) {
+                if (node.attributes[i].name.startsWith('on')) {
+                    node.removeAttribute(node.attributes[i].name);
+                }
             }
-            e.stopPropagation();
         });
-    }
+    });
+    editor.on('init', () => editor.setContent(this.value?.toString() ?? ''));
 };
 _UmbInputTinyMceElement_onInit = function _UmbInputTinyMceElement_onInit(editor) {
     //enable browser based spell checking
@@ -293,18 +262,8 @@ _UmbInputTinyMceElement_onInit = function _UmbInputTinyMceElement_onInit(editor)
     uriAttributeSanitizer(editor);
 };
 _UmbInputTinyMceElement_onChange = function _UmbInputTinyMceElement_onChange(value) {
-    super.value = value;
-    this.dispatchEvent(new CustomEvent('change'));
-};
-_UmbInputTinyMceElement_isMediaPickerEnabled = function _UmbInputTinyMceElement_isMediaPickerEnabled() {
-    const toolbar = this._tinyConfig.toolbar;
-    if (Array.isArray(toolbar) && toolbar.includes('umbmediapicker')) {
-        return true;
-    }
-    else if (typeof toolbar === 'string' && toolbar.includes('umbmediapicker')) {
-        return true;
-    }
-    return false;
+    this.value = value;
+    this.dispatchEvent(new UmbChangeEvent());
 };
 UmbInputTinyMceElement.styles = [
     css `

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

@@ -1,3 +1,2 @@
 import type { RawEditorOptions } from '../../../../external/tinymce/index.js';
 export declare const pastePreProcessHandler: RawEditorOptions['paste_preprocess'];
-export declare const uploadImageHandler: RawEditorOptions['images_upload_handler'];

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

@@ -6,33 +6,3 @@ export const pastePreProcessHandler = (_editor, args) => {
     // convert i to em
     args.content = args.content.replace(/<\s*i([^>]*)>(.*?)<\s*\/\s*i([^>]*)>/g, '<em$1>$2</em$3>');
 };
-export const uploadImageHandler = (blobInfo, progress) => {
-    return new Promise((resolve, reject) => {
-        const xhr = new XMLHttpRequest();
-        xhr.open('POST', window.Umbraco?.Sys.ServerVariables.umbracoUrls.tinyMceApiBaseUrl + 'UploadImage');
-        xhr.onloadstart = () => document.dispatchEvent(new CustomEvent('rte.file.uploading', { composed: true, bubbles: true }));
-        xhr.onloadend = () => document.dispatchEvent(new CustomEvent('rte.file.uploaded', { composed: true, bubbles: true }));
-        xhr.upload.onprogress = (e) => progress((e.loaded / e.total) * 100);
-        xhr.onerror = () => reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
-        xhr.onload = () => {
-            if (xhr.status < 200 || xhr.status >= 300) {
-                reject('HTTP Error: ' + xhr.status);
-                return;
-            }
-            const json = JSON.parse(xhr.responseText);
-            if (!json || typeof json.tmpLocation !== 'string') {
-                reject('Invalid JSON: ' + xhr.responseText);
-                return;
-            }
-            // Put temp location into localstorage (used to update the img with data-tmpimg later on)
-            localStorage.set(`tinymce__${blobInfo.blobUri()}`, json.tmpLocation);
-            // We set the img src url to be the same as we started
-            // The Blob URI is stored in TinyMce's cache
-            // so the img still shows in the editor
-            resolve(blobInfo.blobUri());
-        };
-        const formData = new FormData();
-        formData.append('file', blobInfo.blob(), blobInfo.filename());
-        xhr.send(formData);
-    });
-};

package/dist-cms/packages/core/index.d.ts

@@ -11,6 +11,7 @@ export * from './extension-registry/index.js';
 export * from './id/index.js';
 export * from './macro/index.js';
 export * from './menu/index.js';
+export * from './meta/index.js';
 export * from './modal/index.js';
 export * from './notification/index.js';
 export * from './picker-input/index.js';

package/dist-cms/packages/core/index.js

@@ -26,6 +26,7 @@ export * from './extension-registry/index.js';
 export * from './id/index.js';
 export * from './macro/index.js';
 export * from './menu/index.js';
+export * from './meta/index.js';
 export * from './modal/index.js';
 export * from './notification/index.js';
 export * from './picker-input/index.js';

package/dist-cms/packages/core/meta/index.d.ts

@@ -0,0 +1,5 @@
+export declare const umbMeta: {
+    name: string;
+    clientName: string;
+    clientVersion: string;
+};

package/dist-cms/packages/core/meta/index.js

@@ -0,0 +1,6 @@
+import packageJson from '../../../../package.json';
+export const umbMeta = {
+    name: 'Bellissima',
+    clientName: packageJson.name,
+    clientVersion: packageJson.version,
+};

package/dist-cms/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.js

@@ -34,6 +34,7 @@ let UmbPropertyEditorUIColorPickerElement = class UmbPropertyEditorUIColorPicker
     render() {
         return html `<umb-input-color
 			@change="${this._onChange}"
+			.value=${this.value ?? ''}
 			.swatches="${this._swatches}"
 			.showLabels="${this._showLabels}"></umb-input-color>`;
     }

package/dist-cms/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-mediapicker.plugin.js

@@ -9,10 +9,12 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _UmbTinyMceMediaPickerPlugin_instances, _UmbTinyMceMediaPickerPlugin_mediaHelper, _UmbTinyMceMediaPickerPlugin_currentUser, _UmbTinyMceMediaPickerPlugin_modalContext, _UmbTinyMceMediaPickerPlugin_currentUserContext, _UmbTinyMceMediaPickerPlugin_onAction, _UmbTinyMceMediaPickerPlugin_showMediaPicker, _UmbTinyMceMediaPickerPlugin_insertInEditor;
+var _UmbTinyMceMediaPickerPlugin_instances, _UmbTinyMceMediaPickerPlugin_mediaHelper, _UmbTinyMceMediaPickerPlugin_currentUser, _UmbTinyMceMediaPickerPlugin_modalContext, _UmbTinyMceMediaPickerPlugin_currentUserContext, _UmbTinyMceMediaPickerPlugin_temporaryFileRepository, _UmbTinyMceMediaPickerPlugin_onAction, _UmbTinyMceMediaPickerPlugin_showMediaPicker, _UmbTinyMceMediaPickerPlugin_insertInEditor, _UmbTinyMceMediaPickerPlugin_uploadImageHandler;
 import { UmbTinyMcePluginBase } from '../../../../components/index.js';
 import { UmbMediaHelper } from '../../../../../../shared/utils/index.js';
 import { UMB_MEDIA_TREE_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, } from '../../../../modal/index.js';
+import { UmbTemporaryFileRepository } from '../../../../temporary-file/index.js';
+import { UmbId } from '../../../../id/index.js';
 class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
     constructor(args) {
         super(args);
@@ -21,7 +23,37 @@ class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
         _UmbTinyMceMediaPickerPlugin_currentUser.set(this, void 0);
         _UmbTinyMceMediaPickerPlugin_modalContext.set(this, void 0);
         _UmbTinyMceMediaPickerPlugin_currentUserContext.set(this, void 0);
+        _UmbTinyMceMediaPickerPlugin_temporaryFileRepository.set(this, void 0);
+        _UmbTinyMceMediaPickerPlugin_uploadImageHandler.set(this, (blobInfo, progress) => {
+            return new Promise((resolve, reject) => {
+                // Fetch does not support progress, so we need to fake it.
+                progress(0);
+                const id = UmbId.new();
+                const fileBlob = blobInfo.blob();
+                const file = new File([fileBlob], blobInfo.filename(), { type: fileBlob.type });
+                progress(50);
+                document.dispatchEvent(new CustomEvent('rte.file.uploading', { composed: true, bubbles: true }));
+                __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_temporaryFileRepository, "f")
+                    .upload(id, file)
+                    .then((response) => {
+                    if (response.error) {
+                        reject(response.error);
+                        return;
+                    }
+                    // Put temp location into localstorage (used to update the img with data-tmpimg later on)
+                    const blobUri = window.URL.createObjectURL(fileBlob);
+                    sessionStorage.setItem(`tinymce__${blobUri}`, id);
+                    resolve(blobUri);
+                })
+                    .catch(reject)
+                    .finally(() => {
+                    progress(100);
+                    document.dispatchEvent(new CustomEvent('rte.file.uploaded', { composed: true, bubbles: true }));
+                });
+            });
+        });
         __classPrivateFieldSet(this, _UmbTinyMceMediaPickerPlugin_mediaHelper, new UmbMediaHelper(), "f");
+        __classPrivateFieldSet(this, _UmbTinyMceMediaPickerPlugin_temporaryFileRepository, new UmbTemporaryFileRepository(args.host), "f");
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (modalContext) => {
             __classPrivateFieldSet(this, _UmbTinyMceMediaPickerPlugin_modalContext, modalContext, "f");
         });
@@ -31,15 +63,36 @@ class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
         // 	this.#currentUserContext = instance;
         // 	this.#observeCurrentUser();
         // });
-        this.editor.ui.registry.addButton('umbmediapicker', {
+        this.editor.ui.registry.addToggleButton('umbmediapicker', {
             icon: 'image',
             tooltip: 'Media Picker',
-            //stateSelector: 'img[data-udi]', TODO => Investigate where stateselector has gone, or if it is still needed
             onAction: () => __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_instances, "m", _UmbTinyMceMediaPickerPlugin_onAction).call(this),
+            onSetup: (api) => {
+                const changed = this.editor.selection.selectorChangedWithUnbind('img[data-udi]', (state) => api.setActive(state));
+                return () => changed.unbind();
+            },
         });
+        // Register global options for the editor
+        this.editor.options.register('maxImageSize', { processor: 'number', default: 500 });
+        // Adjust Editor settings to allow pasting images
+        // but only if the umbmediapicker button is present
+        const toolbar = this.configuration?.getValueByAlias('toolbar');
+        if (toolbar?.includes('umbmediapicker')) {
+            this.editor.options.set('paste_data_images', true);
+            this.editor.options.set('automatic_uploads', false);
+            this.editor.options.set('images_upload_handler', __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_uploadImageHandler, "f"));
+            // This allows images to be pasted in & stored as Base64 until they get uploaded to server
+            this.editor.options.set('images_replace_blob_uris', true);
+            // Listen for SetContent to update images
+            this.editor.on('SetContent', async (e) => {
+                const content = e.content;
+                // Handle images that are pasted in
+                __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_mediaHelper, "f").uploadBlobImages(this.editor, content);
+            });
+        }
     }
 }
-_UmbTinyMceMediaPickerPlugin_mediaHelper = new WeakMap(), _UmbTinyMceMediaPickerPlugin_currentUser = new WeakMap(), _UmbTinyMceMediaPickerPlugin_modalContext = new WeakMap(), _UmbTinyMceMediaPickerPlugin_currentUserContext = new WeakMap(), _UmbTinyMceMediaPickerPlugin_instances = new WeakSet(), _UmbTinyMceMediaPickerPlugin_onAction = 
+_UmbTinyMceMediaPickerPlugin_mediaHelper = new WeakMap(), _UmbTinyMceMediaPickerPlugin_currentUser = new WeakMap(), _UmbTinyMceMediaPickerPlugin_modalContext = new WeakMap(), _UmbTinyMceMediaPickerPlugin_currentUserContext = new WeakMap(), _UmbTinyMceMediaPickerPlugin_temporaryFileRepository = new WeakMap(), _UmbTinyMceMediaPickerPlugin_uploadImageHandler = new WeakMap(), _UmbTinyMceMediaPickerPlugin_instances = new WeakSet(), _UmbTinyMceMediaPickerPlugin_onAction = 
 /*
 async #observeCurrentUser() {
     if (!this.#currentUserContext) return;

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

@@ -1,12 +1,16 @@
 import { UmbPropertyEditorUiElement } from '../../../extension-registry/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { UmbPropertyEditorConfigCollection } from '../../index.js';
+type RichTextEditorValue = {
+    blocks: object;
+    markup: string;
+};
 /**
  * @element umb-property-editor-ui-tiny-mce
  */
 export declare class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements UmbPropertyEditorUiElement {
     #private;
-    value: string;
+    value?: RichTextEditorValue;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];

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

@@ -27,7 +27,10 @@ let UmbPropertyEditorUITinyMceElement = class UmbPropertyEditorUITinyMceElement
         super(...arguments);
         _UmbPropertyEditorUITinyMceElement_instances.add(this);
         _UmbPropertyEditorUITinyMceElement_configuration.set(this, void 0);
-        this.value = '';
+        this.value = {
+            blocks: {},
+            markup: '',
+        };
     }
     set config(config) {
         __classPrivateFieldSet(this, _UmbPropertyEditorUITinyMceElement_configuration, config, "f");
@@ -36,18 +39,21 @@ let UmbPropertyEditorUITinyMceElement = class UmbPropertyEditorUITinyMceElement
         return html `<umb-input-tiny-mce
 			@change=${__classPrivateFieldGet(this, _UmbPropertyEditorUITinyMceElement_instances, "m", _UmbPropertyEditorUITinyMceElement_onChange)}
 			.configuration=${__classPrivateFieldGet(this, _UmbPropertyEditorUITinyMceElement_configuration, "f")}
-			.value=${this.value}></umb-input-tiny-mce>`;
+			.value=${this.value?.markup ?? ''}></umb-input-tiny-mce>`;
     }
 };
 _UmbPropertyEditorUITinyMceElement_configuration = new WeakMap();
 _UmbPropertyEditorUITinyMceElement_instances = new WeakSet();
 _UmbPropertyEditorUITinyMceElement_onChange = function _UmbPropertyEditorUITinyMceElement_onChange(event) {
-    this.value = event.target.value;
+    this.value = {
+        blocks: {},
+        markup: event.target.value,
+    };
     this.dispatchEvent(new CustomEvent('property-value-change'));
 };
 UmbPropertyEditorUITinyMceElement.styles = [UmbTextStyles];
 __decorate([
-    property({ type: String })
+    property({ type: Object })
 ], UmbPropertyEditorUITinyMceElement.prototype, "value", void 0);
 __decorate([
     property({ attribute: false })