@tiny-mce-umbraco/backoffice 17.5.0 → 17.6.2

package/dist-cms/README.md

@@ -0,0 +1 @@
+This is an Umbraco CMS package that enables access to the paid features in the TinyMCE-based Rich Text Editor (RTE) in version 12+ with a license. It also adds a new TinyMCE Premium property editor with additional settings, providing a more targeted configuration setup for RTE Data Types in Umbraco. Finally, it allows for additional settings that support JSON directly in the configuration for .NET (appsettings.config).

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

@@ -1 +1 @@
-{"version":3,"file":"input-tiny-mce.defaults.d.ts","sourceRoot":"","sources":["../../../src/components/input-tiny-mce/input-tiny-mce.defaults.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAKjF,eAAO,MAAM,4CAA4C,sCAAsC,CAAC;AAEhG,eAAO,MAAM,yBAAyB,uQAmB5B,CAAC;AAMX,eAAO,MAAM,qBAAqB,EAAE,gBAmOnC,CAAC"}
+{"version":3,"file":"input-tiny-mce.defaults.d.ts","sourceRoot":"","sources":["../../../src/components/input-tiny-mce/input-tiny-mce.defaults.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAKjF,eAAO,MAAM,4CAA4C,sCAAsC,CAAC;AAEhG,eAAO,MAAM,yBAAyB,uQAmB5B,CAAC;AAMX,eAAO,MAAM,qBAAqB,EAAE,gBA0UnC,CAAC"}

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

@@ -59,6 +59,12 @@ export const defaultFallbackConfig = {
     //	});
     //},
     init_instance_callback: function (editor) {
+        // Everything below bootstraps the editor's *iframe* realm through `editor.dom.doc.head`. Inline
+        // mode has no iframe and `editor.dom.doc` IS the backoffice document, so running any of it would
+        // inject a duplicate import map and re-register live manifests into the running registry - and
+        // none of it is needed there, since the components it bootstraps already live in this realm.
+        if (!editor.iframeElement)
+            return;
         // The following code is the context api proxy. [NL]
         // It re-dispatches the context api request event to the origin target of this modal, in other words the element that initiated the modal. [NL]
         editor.dom.doc.addEventListener(UMB_CONTEXT_REQUEST_EVENT_TYPE, ((event) => {
@@ -131,7 +137,25 @@ export const defaultFallbackConfig = {
         // instance) from the outer document. Without this, requestDelete() in UmbBlockEntryContext
         // falls back to returning raw keys because the iframe's manager has no registered translations.
         const locSetsToSync = [];
-        const BLOCK_LOC_KEYS = ['blockEditor_confirmDeleteBlockTitle', 'blockEditor_confirmDeleteBlockMessage'];
+        // Keys needed by components that render INSIDE the TinyMCE iframe. The iframe has its own
+        // per-realm umbLocalizationManager, so anything not copied across renders blank there.
+        // The unsupported-block pair is read by Umbraco 17.6's <umb-unsupported-rte-block>.
+        const BLOCK_LOC_KEYS = [
+            // Rendered by the block components themselves.
+            'blockEditor_confirmDeleteBlockTitle',
+            'blockEditor_confirmDeleteBlockMessage',
+            'blockEditor_unsupportedBlockName',
+            'blockEditor_unsupportedBlockDescription',
+            // Labels declared by Umbraco's `blockAction` manifests, which `umb-block-action-list`
+            // renders inside the iframe. Enumerated from
+            // `packages/block/block/action/common/*/manifests.ts` — kept complete deliberately, so a
+            // newly reachable action does not show a raw `#key` the way copy-to-clipboard did.
+            'clipboard_labelForCopyToClipboard',
+            'general_delete',
+            'general_edit',
+            'general_settings',
+            'actions_create',
+        ];
         umbLocalizationManager.localizations.forEach((locSet, code) => {
             const locSetAny = locSet;
             const entry = {
@@ -149,11 +173,42 @@ export const defaultFallbackConfig = {
             if (hasKey)
                 locSetsToSync.push(entry);
         });
+        // The active language must cross the realm boundary too, not just the dictionaries.
+        // Without this the iframe resolves every term through UmbLocalizationController's
+        // primary -> secondary -> `en` fallback chain, so the synced Danish set sits in the
+        // iframe's map unused and the placeholder renders in English.
+        //
+        // This must go through `umbLocalizationRegistry.loadLanguage()`, not a direct write to
+        // `umbLocalizationManager.documentLanguage`. The registry is a module side-effect
+        // (`export const umbLocalizationRegistry = new UmbLocalizationRegistry(...)`), and the
+        // block script below imports `@umbraco-cms/backoffice/block-rte`, whose module graph pulls
+        // the localization package into the iframe realm. Constructing the registry there emits
+        // its `UMB_DEFAULT_LOCALIZATION_CULTURE` bootstrap value synchronously, whose `tap` stamps
+        // `'en'` onto the manager — overwriting a direct assignment. Both scripts are dynamically
+        // inserted and therefore `async` with no guaranteed order, and the block script's larger
+        // graph reliably lands last. Importing the registry here instead means it is constructed
+        // before this script's body runs, so `loadLanguage()` always wins regardless of order.
+        // Nothing inside the iframe ever calls `loadLanguage()` otherwise — that is driven by
+        // `<umb-app>` and the current-user context, neither of which exists in this realm.
+        const outerLang = umbLocalizationManager.documentLanguage;
+        const outerDir = umbLocalizationManager.documentDirection;
         if (locSetsToSync.length > 0) {
             const locScript = document.createElement('script');
             locScript.setAttribute('type', 'module');
             locScript.text = `
 				import { umbLocalizationManager } from "@umbraco-cms/backoffice/localization-api";
+				import { umbLocalizationRegistry } from "@umbraco-cms/backoffice/localization";
+
+				// Sets documentLanguage via the registry's synchronous \`tap\`. The load that
+				// follows finds no localization extensions in this realm's registry, so the
+				// pipeline stops at its own length guard and never writes the language again.
+				umbLocalizationRegistry.loadLanguage(${JSON.stringify(outerLang)});
+				// Direction is only set by #setBrowserLanguage, which that stalled pipeline never
+				// reaches, so carry it across by hand — it matters for an RTL backoffice.
+				umbLocalizationManager.documentDirection = ${JSON.stringify(outerDir)};
+				// Register last: registerLocalization's keysChanged pass is what re-renders any
+				// consumer that connected before this script ran, and setting the language
+				// notifies nobody on its own.
 				${JSON.stringify(locSetsToSync)}.forEach(s => umbLocalizationManager.registerLocalization(s));
 			`;
             editor.dom.doc.head.appendChild(locScript);
@@ -179,6 +234,13 @@ export const defaultFallbackConfig = {
 			import { umbExtensionsRegistry } from "@umbraco-cms/backoffice/extension-registry";
 			import { UMB_BLOCK_ACTION_DEFAULT_KIND_MANIFEST } from "@umbraco-cms/backoffice/block";
 			import "${UMB_BLOCK_ENTRY_WEB_COMPONENTS_ABSOLUTE_PATH}";
+			// Defines <umb-icon>, which umb-ref-rte-block renders for the block's element-type icon.
+			// block-rte does not pull it in transitively, so without this it stays an un-upgraded
+			// unknown element: the .name property binding still lands, but nothing ever renders.
+			// The existing UUIIconRequestEvent proxy is not involved — uui-icon is already defined
+			// in this realm, and the action-bar icons resolve through that proxy correctly.
+			// This is the whole components barrel because the export map exposes no narrower path.
+			import "@umbraco-cms/backoffice/components";
 
 			// Register the blockAction default kind definition in the inner realm's registry.
 			// UMB_BLOCK_ACTION_DEFAULT_KIND_MANIFEST is imported here (inner realm), so its
@@ -195,6 +257,46 @@ export const defaultFallbackConfig = {
 			if (outerReg) {
 				const blockActions = outerReg.getByType('blockAction') ?? [];
 				if (blockActions.length) umbExtensionsRegistry.registerMany(blockActions);
+
+				// Block actions declare their \`conditions\` by alias, and the extension system resolves
+				// each alias against the registry the action was registered in. Copying the actions
+				// without the condition manifests they name leaves every conditional action permanently
+				// un-initialized — delete, edit content, edit settings and expose content all have
+				// conditions, copy-to-clipboard does not, which is why it was the only one that rendered.
+				// Derived from the copied manifests rather than hard-coded, so an action that gains a
+				// new condition in a future Umbraco version is covered without another fix here.
+				const conditionAliases = new Set(
+					blockActions.flatMap((a) => (a.conditions ?? []).map((c) => c.alias)),
+				);
+				const conditions = (outerReg.getByType('condition') ?? []).filter((c) =>
+					conditionAliases.has(c.alias),
+				);
+				if (conditions.length) umbExtensionsRegistry.registerMany(conditions);
+			}
+
+			// Define the ufm-* elements in the inner realm so {=alias} block labels interpolate. Unlike
+			// umb-icon these are in no importable barrel - the outer document defines them by running
+			// each ufmComponent manifest's api(). Two constraints when editing this:
+			//   1. The manifests are on the package's \`manifests\` export, NOT \`extensions\`, which is a
+			//      single bundle wrapper - filtering that matches nothing and fails silently.
+			//   2. This is the only top-level await in the script, so it must stay LAST or everything
+			//      above it waits on the ufm package plus one dynamic import per component. Custom
+			//      element upgrade is retroactive, so defining these last costs nothing.
+			try {
+				const ufmPkg = await import("/umbraco/backoffice/packages/ufm/umbraco-package.js");
+				const loaded = new Set();
+				for (const manifest of (ufmPkg.manifests ?? []).filter((m) => m.type === "ufmComponent")) {
+					if (loaded.has(manifest.alias)) continue;
+					loaded.add(manifest.alias);
+					try {
+						await manifest.api?.();
+					} catch {
+						// A single component failing to load should not break the rest.
+					}
+				}
+			} catch {
+				// If the ufm package is ever restructured, block labels degrade back to empty
+				// rather than breaking the editor.
 			}
 		`;
         editor.dom.doc.head.appendChild(script);

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

@@ -1,7 +1,8 @@
+import type { PropertyValues } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { Editor } from '@tiny-mce-umbraco/backoffice/external/tinymce';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-declare const UmbInputTinyMceElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
+declare const UmbInputTinyMceElement_base: (new (...args: any[]) => import("@umbraco-ui/uui").UUIFormControlWithBasicsMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbInputTinyMceElement extends UmbInputTinyMceElement_base {
     #private;
     configuration?: UmbPropertyEditorConfigCollection;
@@ -17,7 +18,9 @@ export declare class UmbInputTinyMceElement extends UmbInputTinyMceElement_base
     get readonly(): boolean;
     set readonly(value: boolean);
     private readonly _editorElement?;
+    private _inline;
     getEditor(): Editor | null | undefined;
+    willUpdate(changedProperties: PropertyValues): void;
     firstUpdated(): void;
     disconnectedCallback(): void;
     getFormatStyles(stylesheetPaths: Array<string>): Promise<any[]>;

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

@@ -1 +1 @@
-{"version":3,"file":"input-tiny-mce.element.d.ts","sourceRoot":"","sources":["../../../src/components/input-tiny-mce/input-tiny-mce.element.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAIpE,OAAO,KAAK,EAAe,MAAM,EAAoB,MAAM,+CAA+C,CAAC;AAE3G,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,yCAAyC,CAAC;;AA8DjG,qBACa,sBAAuB,SAAQ,2BAAsC;;IAEjF,aAAa,CAAC,EAAE,iCAAiC,CAAC;cAS/B,cAAc;IAIjC,IAAa,KAAK,CAAC,QAAQ,EAAE,kBAAkB,GAAG,QAAQ,EAOzD;IAED,IAAa,KAAK,IAAI,kBAAkB,GAAG,QAAQ,CAElD;IAED;;;;;OAKG;IACH,IACW,QAAQ,YAElB;IACD,IAAW,QAAQ,CAAC,KAAK,SAAA,EAOxB;IAID,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAc;IAE9C,SAAS;IAIA,YAAY;IAsBZ,oBAAoB;IA0BvB,eAAe,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC;IA+UpD;;;OAGG;IACM,MAAM;IAIf,gBAAyB,MAAM,4BAkB7B;CACF;AAED,eAAe,sBAAsB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,sBAAsB,CAAC;KAC7C;CACD"}
+{"version":3,"file":"input-tiny-mce.element.d.ts","sourceRoot":"","sources":["../../../src/components/input-tiny-mce/input-tiny-mce.element.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAO3E,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAKpE,OAAO,KAAK,EAAe,MAAM,EAAoB,MAAM,+CAA+C,CAAC;AAE3G,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,yCAAyC,CAAC;;AA6EjG,qBACa,sBAAuB,SAAQ,2BAAsC;;IAEjF,aAAa,CAAC,EAAE,iCAAiC,CAAC;cAe/B,cAAc;IAIjC,IAAa,KAAK,CAAC,QAAQ,EAAE,kBAAkB,GAAG,QAAQ,EAOzD;IAED,IAAa,KAAK,IAAI,kBAAkB,GAAG,QAAQ,CAElD;IAED;;;;;OAKG;IACH,IACW,QAAQ,YAElB;IACD,IAAW,QAAQ,CAAC,KAAK,SAAA,EAOxB;IAID,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAc;IAG9C,OAAO,CAAC,OAAO,CAAS;IAExB,SAAS;IAIA,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAU5C,YAAY;IA+BZ,oBAAoB;IA0BvB,eAAe,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC;IAiXpD;;;OAGG;IACM,MAAM;IAMf,gBAAyB,MAAM,4BAiC7B;CACF;AAED,eAAe,sBAAsB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,sBAAsB,CAAC;KAC7C;CACD"}

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

@@ -15,13 +15,13 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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 _UmbInputTinyMceElement_instances, _UmbInputTinyMceElement_plugins, _UmbInputTinyMceElement_editorRef, _UmbInputTinyMceElement_sanitizeTinyMce, _UmbInputTinyMceElement_stylesheetRepository, _UmbInputTinyMceElement_umbStylesheetRuleManager, _UmbInputTinyMceElement_readonly, _UmbInputTinyMceElement_loadEditor, _UmbInputTinyMceElement_loadPlugins, _UmbInputTinyMceElement_getTinyMceConfig, _UmbInputTinyMceElement_setTinyConfig, _UmbInputTinyMceElement_getLanguage, _UmbInputTinyMceElement_editorSetup, _UmbInputTinyMceElement_onInit, _UmbInputTinyMceElement_onChange;
+var _UmbInputTinyMceElement_instances, _UmbInputTinyMceElement_plugins, _UmbInputTinyMceElement_editorRef, _UmbInputTinyMceElement_sanitizeTinyMce, _UmbInputTinyMceElement_stylesheetRootPath, _UmbInputTinyMceElement_stylesheetRepository, _UmbInputTinyMceElement_umbStylesheetRuleManager, _UmbInputTinyMceElement_readonly, _UmbInputTinyMceElement_loadStylesheetRootPath, _UmbInputTinyMceElement_loadEditor, _UmbInputTinyMceElement_loadPlugins, _UmbInputTinyMceElement_getTinyMceConfig, _UmbInputTinyMceElement_setTinyConfig, _UmbInputTinyMceElement_getLanguage, _UmbInputTinyMceElement_editorSetup, _UmbInputTinyMceElement_onInit, _UmbInputTinyMceElement_onChange;
 import { availableLanguages } from '@tiny-mce-umbraco/backoffice/core';
 import { defaultFallbackConfig, defaultPremiumPluginsList } from '@tiny-mce-umbraco/backoffice/core';
 import { pastePreProcessHandler } from '@tiny-mce-umbraco/backoffice/core';
 import { uriAttributeSanitizer } from '@tiny-mce-umbraco/backoffice/core';
 import { UmbStylesheetRuleManager } from '@tiny-mce-umbraco/backoffice/core';
-import { css, customElement, html, property, query } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property, query, state } from '@umbraco-cms/backoffice/external/lit';
 import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api';
 import { getProcessedImageUrl, umbDeepMerge } from '@umbraco-cms/backoffice/utils';
 import { renderEditor } from '@umbraco-cms/backoffice/external/tinymce';
@@ -30,7 +30,9 @@ import { ImageCropModeModel } from '@umbraco-cms/backoffice/external/backend-api
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbStylesheetDetailRepository } from '@umbraco-cms/backoffice/stylesheet';
+import { UMB_SERVER_CONTEXT } from '@umbraco-cms/backoffice/server';
 import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { bridgeInlineEditor } from './shadow-dom-selection.js';
 import { TinyMceService } from '../../api/index.js';
 import { tryExecute } from '@umbraco-cms/backoffice/resources';
 // @ts-ignore
@@ -52,10 +54,24 @@ async function onResize(e) {
     });
     e.target.setAttribute('data-mce-src', resizedPath);
 }
+// Merges plugin lists into the flat `string[]` TinyMCE expects, dropping anything that is not a
+// string. That filtering is load-bearing, not defensive dressing: TinyMCE trims every plugin name with
+// `String.replace` (`trim$4`, called from its plugin-list parser), so a single non-string entry throws
+// during editor construction and the editor never renders at all.
+//
+// Non-strings do reach here from configuration. `Umbraco:CMS:RichTextEditor:CustomConfig` binds into an
+// `IDictionary<string, object>`, so a value written as a real JSON array has no scalar to bind and
+// arrives as an object rather than a list. The supported way to express a list there is a JSON *string*
+// - `"plugins": "[\"fullscreen\"]"` - which `parseJsonStringValues` turns back into a real array.
 function mergeArrays(arr1, arr2) {
-    const a1 = Array.isArray(arr1) ? arr1 : arr1 ? [arr1] : [];
-    const a2 = Array.isArray(arr2) ? arr2 : arr2 ? [arr2] : [];
-    return Array.from(new Set([...a1, ...a2]));
+    const toStringList = (value) => {
+        if (typeof value === 'string')
+            return [value];
+        if (!Array.isArray(value))
+            return [];
+        return value.filter((entry) => typeof entry === 'string');
+    };
+    return Array.from(new Set([...toStringList(arr1), ...toStringList(arr2)]));
 }
 // Some config paths (e.g. Umbraco:CMS:RichTextEditor:CustomConfig) can only store scalar string
 // values via the .NET config binder. Complex TinyMCE options like style_formats were historically
@@ -86,9 +102,15 @@ let UmbInputTinyMceElement = class UmbInputTinyMceElement extends UUIFormControl
         _UmbInputTinyMceElement_plugins.set(this, []);
         _UmbInputTinyMceElement_editorRef.set(this, null);
         _UmbInputTinyMceElement_sanitizeTinyMce.set(this, true);
+        /**
+         * Where the picked stylesheets are served from. Configurable as `Global:UmbracoCssPath`; `/css` is
+         * the fallback Umbraco itself uses when the server has not reported one yet.
+         */
+        _UmbInputTinyMceElement_stylesheetRootPath.set(this, '/css');
         _UmbInputTinyMceElement_stylesheetRepository.set(this, new UmbStylesheetDetailRepository(this));
         _UmbInputTinyMceElement_umbStylesheetRuleManager.set(this, new UmbStylesheetRuleManager());
         _UmbInputTinyMceElement_readonly.set(this, false);
+        this._inline = false;
     }
     getFormElement() {
         return this._editorElement?.querySelector('iframe') ?? undefined;
@@ -123,7 +145,16 @@ let UmbInputTinyMceElement = class UmbInputTinyMceElement extends UUIFormControl
     getEditor() {
         return __classPrivateFieldGet(this, _UmbInputTinyMceElement_editorRef, "f");
     }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        // Resolved before the first render so the target element carries the right classes from the
+        // start - TinyMCE takes it over during init and `render()` cannot usefully re-run after that.
+        if (changedProperties.has('configuration')) {
+            this._inline = this.configuration?.getValueByAlias('mode')?.toLocaleLowerCase() === 'inline';
+        }
+    }
     firstUpdated() {
+        __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_loadStylesheetRootPath).call(this);
         __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_loadEditor).call(this);
     }
     disconnectedCallback() {
@@ -177,16 +208,27 @@ let UmbInputTinyMceElement = class UmbInputTinyMceElement extends UUIFormControl
      * a target div and binds the RTE to that element
      */
     render() {
-        return html `<div class="editor"></div>`;
+        // `umb-rte` stands in for `body_class`, which TinyMCE only applies to the iframe body - in
+        // inline mode this element *is* the editable body.
+        return html `<div class=${this._inline ? 'editor inline umb-rte' : 'editor'}></div>`;
     }
 };
 _UmbInputTinyMceElement_plugins = new WeakMap();
 _UmbInputTinyMceElement_editorRef = new WeakMap();
 _UmbInputTinyMceElement_sanitizeTinyMce = new WeakMap();
+_UmbInputTinyMceElement_stylesheetRootPath = new WeakMap();
 _UmbInputTinyMceElement_stylesheetRepository = new WeakMap();
 _UmbInputTinyMceElement_umbStylesheetRuleManager = new WeakMap();
 _UmbInputTinyMceElement_readonly = new WeakMap();
 _UmbInputTinyMceElement_instances = new WeakSet();
+_UmbInputTinyMceElement_loadStylesheetRootPath = function _UmbInputTinyMceElement_loadStylesheetRootPath() {
+    this.consumeContext(UMB_SERVER_CONTEXT, (serverContext) => {
+        this.observe(serverContext?.getServerConnection()?.umbracoCssPath, (umbracoCssPath) => {
+            if (umbracoCssPath)
+                __classPrivateFieldSet(this, _UmbInputTinyMceElement_stylesheetRootPath, umbracoCssPath, "f");
+        });
+    });
+};
 _UmbInputTinyMceElement_loadEditor = async function _UmbInputTinyMceElement_loadEditor() {
     this.observe(umbExtensionsRegistry.byType('tinyMcePlugin'), async (manifests) => {
         __classPrivateFieldGet(this, _UmbInputTinyMceElement_plugins, "f").length = 0;
@@ -234,8 +276,16 @@ _UmbInputTinyMceElement_setTinyConfig = async function _UmbInputTinyMceElement_s
     const stylesheetPaths = this.configuration?.getValueByAlias('stylesheets') ?? [];
     const styleFormats = await this.getFormatStyles(stylesheetPaths);
     const preValueCustomConfig = this.configuration?.getValueByAlias('customConfig') ?? {};
-    // Map the stylesheets with server url
-    const stylesheets = stylesheetPaths?.map((stylesheetPath) => `/css${stylesheetPath.replace(/\\/g, '/')}`) ?? [];
+    // Map the stylesheets with server url, matching what Umbraco's own rich text editor does in
+    // `input-tiptap.element.ts`. Prefixing unconditionally is wrong in two cases: a path that is
+    // already rooted (older configurations stored the full `/css/foo.css`, which became
+    // `/css/css/foo.css` and 404'd), and an absolute URL to an external stylesheet.
+    const stylesheets = stylesheetPaths?.map((stylesheetPath) => {
+        const path = stylesheetPath.replace(/\\/g, '/');
+        return path.startsWith('http') || path.startsWith(__classPrivateFieldGet(this, _UmbInputTinyMceElement_stylesheetRootPath, "f"))
+            ? path
+            : `${__classPrivateFieldGet(this, _UmbInputTinyMceElement_stylesheetRootPath, "f")}${path}`;
+    }) ?? [];
     stylesheets.push('/umbraco/backoffice/css/rte-content.css');
     const appSettingsConfig = await __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_getTinyMceConfig).call(this);
     let apiKey = 'no-origin';
@@ -300,9 +350,14 @@ _UmbInputTinyMceElement_setTinyConfig = async function _UmbInputTinyMceElement_s
         configurationOptions.toolbar = false;
     }
     // set the configured inline mode
-    const mode = this.configuration?.getValueByAlias('mode');
-    if (mode?.toLocaleLowerCase() === 'inline') {
+    if (this._inline) {
         configurationOptions.inline = true;
+        // Inline mode makes the target element itself the editable body, so there is no editor
+        // chrome to size and TinyMCE drops height/width on the floor. Left unset, the empty
+        // target div collapses to 0px and the editor is invisible until it happens to be
+        // clicked - so hand the sizing to our own CSS instead (see the `.editor.inline` rule).
+        delete configurationOptions.height;
+        delete configurationOptions.width;
     }
     // set the maximum image size
     const maxImageSize = this.configuration?.getValueByAlias('maxImageSize');
@@ -343,8 +398,15 @@ _UmbInputTinyMceElement_setTinyConfig = async function _UmbInputTinyMceElement_s
     }
     if (appSettingsConfig) {
         if (appSettingsConfig.richTextEditor) {
-            const mergedPlugins = mergeArrays(appSettingsConfig.richTextEditor.plugins, config.plugins);
-            config = umbDeepMerge(parseJsonStringValues(appSettingsConfig.richTextEditor.customConfig), config);
+            // Plugins reach this section from two places: the dedicated `Plugins` setting, and a
+            // `plugins` entry inside `CustomConfig`. Both must be folded in before the assignment
+            // below, which overwrites whatever the deep merge produced. Miss the CustomConfig one
+            // and a plugin configured only there is silently dropped - the toolbar still lists its
+            // button, because the merged `toolbar` does survive, but TinyMCE never loaded the
+            // plugin so nothing renders for it.
+            const richTextEditorCustomConfig = parseJsonStringValues(appSettingsConfig.richTextEditor.customConfig);
+            const mergedPlugins = mergeArrays(mergeArrays(appSettingsConfig.richTextEditor.plugins, richTextEditorCustomConfig['plugins']), config.plugins);
+            config = umbDeepMerge(richTextEditorCustomConfig, config);
             config.plugins = mergedPlugins;
             if (appSettingsConfig.richTextEditor.validElements.length > 0) {
                 config.valid_elements = appSettingsConfig.richTextEditor.validElements;
@@ -446,6 +508,11 @@ _UmbInputTinyMceElement_editorSetup = async function _UmbInputTinyMceElement_edi
     //console.log('#editorSetup end');
 };
 _UmbInputTinyMceElement_onInit = function _UmbInputTinyMceElement_onInit(editor) {
+    // Inline mode leaves the editable element in the backoffice's shadow DOM, which TinyMCE's
+    // document-scoped selection and id lookups cannot reach - see `shadow-dom-selection.ts`.
+    if (this._inline) {
+        bridgeInlineEditor(editor);
+    }
     //enable browser based spell checking
     editor.getBody().setAttribute('spellcheck', 'true');
     uriAttributeSanitizer(editor);
@@ -470,6 +537,21 @@ UmbInputTinyMceElement.styles = [
 				position: absolute;
 			}
 
+			/* Inline mode edits this element directly - TinyMCE renders no chrome around it and
+			   ignores the configured height, so it needs to look like a field on its own. */
+			.editor.inline {
+				box-sizing: border-box;
+				min-height: 100px;
+				padding: var(--uui-size-space-3, 9px);
+				background-color: var(--uui-color-surface, #fff);
+				border: var(--uui-input-border-width, 1px) solid var(--uui-input-border-color, var(--uui-color-border, #d8d7d9));
+			}
+
+			.editor.inline:focus {
+				outline: none;
+				border-color: var(--uui-color-focus, #3544b1);
+			}
+
 			/* FIXME: Remove this workaround when https://github.com/tinymce/tinymce/issues/6431 has been fixed */
 			.tox .tox-collection__item-label {
 				line-height: 1 !important;
@@ -485,6 +567,9 @@ __decorate([
 __decorate([
     query('.editor', true)
 ], UmbInputTinyMceElement.prototype, "_editorElement", void 0);
+__decorate([
+    state()
+], UmbInputTinyMceElement.prototype, "_inline", void 0);
 UmbInputTinyMceElement = __decorate([
     customElement('umb-input-tiny-mce')
 ], UmbInputTinyMceElement);

package/dist-cms/components/input-tiny-mce/shadow-dom-selection.d.ts

@@ -0,0 +1,16 @@
+/**
+ * TinyMCE's inline mode assumes its editable element is somewhere document-level APIs can reach. In the
+ * backoffice it sits some twenty shadow roots deep (`umb-input-tiny-mce` -> ... -> `umb-app`), so three
+ * of those APIs silently fail and are bridged here. Classic mode needs none of it: its editable body is
+ * a plain document body inside the editor's own iframe.
+ *
+ * Every failure mode below is silent - no exception, no stack trace. See **Inline Mode and Shadow DOM**
+ * in this project's CLAUDE.md for the symptoms and how to test them.
+ */
+import type { Editor } from '@tiny-mce-umbraco/backoffice/external/tinymce';
+/**
+ * Applies the shadow-DOM bridges to a freshly initialized inline editor. Call for inline editors only.
+ * @param editor The inline editor to bridge.
+ */
+export declare function bridgeInlineEditor(editor: Editor): void;
+//# sourceMappingURL=shadow-dom-selection.d.ts.map

package/dist-cms/components/input-tiny-mce/shadow-dom-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow-dom-selection.d.ts","sourceRoot":"","sources":["../../../src/components/input-tiny-mce/shadow-dom-selection.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,+CAA+C,CAAC;AAwG5E;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,QAUhD"}

package/dist-cms/components/input-tiny-mce/shadow-dom-selection.js

@@ -0,0 +1,112 @@
+/**
+ * TinyMCE's inline mode assumes its editable element is somewhere document-level APIs can reach. In the
+ * backoffice it sits some twenty shadow roots deep (`umb-input-tiny-mce` -> ... -> `umb-app`), so three
+ * of those APIs silently fail and are bridged here. Classic mode needs none of it: its editable body is
+ * a plain document body inside the editor's own iframe.
+ *
+ * Every failure mode below is silent - no exception, no stack trace. See **Inline Mode and Shadow DOM**
+ * in this project's CLAUDE.md for the symptoms and how to test them.
+ */
+/** Editable elements of the live inline editors; read by both document-level bridges. */
+const inlineBodies = new Set();
+let installed = false;
+/**
+ * Resolved per call, never cached from focus/blur events: TinyMCE moves the selection while its own
+ * focus bookkeeping is mid-flight, and a stale flag there sends `setRng` to the wrong selection. This is
+ * the same liveness check TinyMCE's own `hasInlineFocus` makes.
+ */
+function getFocusedInlineBody() {
+    for (const body of inlineBodies) {
+        if (body.getRootNode().activeElement === body)
+            return body;
+    }
+    return null;
+}
+/**
+ * TinyMCE reads the caret through `win.getSelection()` (`getSel` in `Selection.getRng`), which in
+ * Chromium never descends into a shadow root; `ShadowRoot.getSelection()` does. Firefox is the reverse -
+ * see the note on the fallback below.
+ *
+ * Diverts only while one of our inline editors holds focus, so every other caller gets the native
+ * selection untouched.
+ */
+function installShadowDomSelectionBridge() {
+    const nativeGetSelection = window.getSelection.bind(window);
+    window.getSelection = function () {
+        const body = getFocusedInlineBody();
+        if (!body)
+            return nativeGetSelection();
+        // `ShadowRoot.getSelection()` is Chromium-only. The fallback is not a safety net - it is the
+        // working path in Firefox, whose `window.getSelection()` already pierces shadow roots. Removing
+        // it breaks Firefox. (Safari has neither and is unsupported.)
+        const selection = body.getRootNode().getSelection?.();
+        return selection ?? nativeGetSelection();
+    };
+}
+/**
+ * `Selection.setRng` guards with `isValidRange` -> `isAttachedToDom` -> Sugar's `contains`, a plain
+ * `d1.contains(d2)` that does not cross shadow boundaries. Every range inside the editor is therefore
+ * judged detached, and `setRng` returns before it dispatches anything.
+ *
+ * Patched on the document object rather than `Node.prototype` because that is the exact call being
+ * made. Only ever turns `false` into `true`, and only for nodes inside a live inline editor.
+ */
+function installShadowDomAttachmentBridge() {
+    const nativeContains = document.contains.bind(document);
+    document.contains = (node) => {
+        if (nativeContains(node))
+            return true;
+        if (!node)
+            return false;
+        for (const body of inlineBodies) {
+            if (body === node || body.contains(node))
+                return true;
+        }
+        return false;
+    };
+}
+/** Installs the document-level bridges, once per page. */
+function installBridges() {
+    if (installed)
+        return;
+    installed = true;
+    installShadowDomSelectionBridge();
+    installShadowDomAttachmentBridge();
+}
+/**
+ * `DOMUtils.get(id)` is `doc.getElementById(id)`, which cannot see into a shadow root. TinyMCE's
+ * bookmarks depend on it: operations that restructure the DOM drop `<span data-mce-type="bookmark">`
+ * markers and call `moveToBookmark` to restore the caret afterwards. Unresolvable markers mean the caret
+ * is never restored *and* the markers are never removed - they accumulate in the content and get saved.
+ *
+ * Searching the editor body first also scopes ids per editor rather than first-match-in-document.
+ * @param editor The inline editor to patch.
+ */
+function bridgeEditorLookups(editor) {
+    const dom = editor.dom;
+    const nativeGet = dom.get.bind(dom);
+    dom.get = (elm) => {
+        if (typeof elm !== 'string')
+            return nativeGet(elm);
+        const body = editor.getBody();
+        if (!body)
+            return nativeGet(elm);
+        // Inline mode's body is the target element itself, so it can be the id being asked for.
+        if (body.id === elm)
+            return body;
+        return body.querySelector(`#${CSS.escape(elm)}`) ?? nativeGet(elm);
+    };
+}
+/**
+ * Applies the shadow-DOM bridges to a freshly initialized inline editor. Call for inline editors only.
+ * @param editor The inline editor to bridge.
+ */
+export function bridgeInlineEditor(editor) {
+    const body = editor.getBody();
+    if (!body)
+        return;
+    bridgeEditorLookups(editor);
+    inlineBodies.add(body);
+    installBridges();
+    editor.on('remove', () => inlineBodies.delete(body));
+}

package/dist-cms/components/stylesheet-rule-input/stylesheet-rule-input.element.d.ts

@@ -1,6 +1,6 @@
 import type { UmbStylesheetRule } from '../../types.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-declare const UmbStylesheetRuleInputElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
+declare const UmbStylesheetRuleInputElement_base: (new (...args: any[]) => import("@umbraco-ui/uui").UUIFormControlWithBasicsMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbStylesheetRuleInputElement extends UmbStylesheetRuleInputElement_base {
     #private;
     rules: UmbStylesheetRule[];

package/dist-cms/entry-points/blob-download-router-fix.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Workaround: let blob:/data: downloads through Umbraco's router.
+ *
+ * ## The problem
+ *
+ * Umbraco's router (`router-slot`) installs a global click listener that converts any same-origin
+ * anchor click into a history navigation — see
+ * `packages/core/router/router-slot/util/anchor.ts` (`ensureAnchorHistory`):
+ *
+ * ```js
+ * fullUrl = new URL(href, document.baseURI);
+ * if (fullUrl.origin !== location.origin || ...) return;
+ * e.preventDefault();
+ * history.pushState(null, '', fullUrl);
+ * ```
+ *
+ * Blob URLs inherit the origin of the document that created them, so
+ * `new URL('blob:https://site:44308/<uuid>').origin` is `https://site:44308` — the origin guard
+ * passes and the anchor is treated as an internal navigation. The router then:
+ *
+ * 1. calls `e.preventDefault()`, which **cancels the download**, and
+ * 2. calls `history.pushState` with a `blob:` URL, which is invalid and throws
+ *    `SecurityError: A history state object with URL 'blob:…' cannot be created in a document
+ *    with origin '…'`.
+ *
+ * The net effect is that any download served from a `blob:` or `data:` URL inside the backoffice
+ * silently fails. TinyMCE's `export` plugin (PDF export via `clientpdf`) hits this on every
+ * download attempt.
+ *
+ * ## The fix
+ *
+ * The router deliberately skips anchors carrying `data-router-slot="disabled"`. We cannot set that
+ * at creation time because the anchor is created inside TinyMCE's minified plugin bundle, so we tag
+ * it in flight instead: this listener is registered in the **capture** phase on `window`, which runs
+ * before the router's own bubble-phase listener on that same target. By the time the router sees the
+ * event, the anchor is marked and the router leaves it alone.
+ *
+ * Only `blob:` and `data:` are tagged. Ordinary links are untouched, so in-app navigation is
+ * unaffected.
+ *
+ * ## Upstream
+ *
+ * This is arguably an Umbraco defect: the router should not attempt to route non-`http(s)` schemes
+ * at all, which would also cover `mailto:` and `tel:`. It affects any blob-based download in the
+ * backoffice, not only TinyMCE. Verified present in Umbraco 17.6.2, and `anchor.ts` is byte-identical
+ * back to at least 17.5.0 — so this is long-standing, not a regression. Remove this workaround once
+ * the router gains a scheme guard.
+ */
+/**
+ * Starts tagging `blob:`/`data:` anchors so Umbraco's router does not cancel the download.
+ * Safe to call more than once; only the first call registers a listener.
+ */
+export declare function enableBlobDownloadWorkaround(): void;
+/** Removes the listener registered by {@link enableBlobDownloadWorkaround}. */
+export declare function disableBlobDownloadWorkaround(): void;
+//# sourceMappingURL=blob-download-router-fix.d.ts.map

package/dist-cms/entry-points/blob-download-router-fix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blob-download-router-fix.d.ts","sourceRoot":"","sources":["../../src/entry-points/blob-download-router-fix.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAqBH;;;GAGG;AACH,wBAAgB,4BAA4B,IAAI,IAAI,CAKnD;AAED,+EAA+E;AAC/E,wBAAgB,6BAA6B,IAAI,IAAI,CAIpD"}

package/dist-cms/entry-points/blob-download-router-fix.js

@@ -0,0 +1,81 @@
+/**
+ * Workaround: let blob:/data: downloads through Umbraco's router.
+ *
+ * ## The problem
+ *
+ * Umbraco's router (`router-slot`) installs a global click listener that converts any same-origin
+ * anchor click into a history navigation — see
+ * `packages/core/router/router-slot/util/anchor.ts` (`ensureAnchorHistory`):
+ *
+ * ```js
+ * fullUrl = new URL(href, document.baseURI);
+ * if (fullUrl.origin !== location.origin || ...) return;
+ * e.preventDefault();
+ * history.pushState(null, '', fullUrl);
+ * ```
+ *
+ * Blob URLs inherit the origin of the document that created them, so
+ * `new URL('blob:https://site:44308/<uuid>').origin` is `https://site:44308` — the origin guard
+ * passes and the anchor is treated as an internal navigation. The router then:
+ *
+ * 1. calls `e.preventDefault()`, which **cancels the download**, and
+ * 2. calls `history.pushState` with a `blob:` URL, which is invalid and throws
+ *    `SecurityError: A history state object with URL 'blob:…' cannot be created in a document
+ *    with origin '…'`.
+ *
+ * The net effect is that any download served from a `blob:` or `data:` URL inside the backoffice
+ * silently fails. TinyMCE's `export` plugin (PDF export via `clientpdf`) hits this on every
+ * download attempt.
+ *
+ * ## The fix
+ *
+ * The router deliberately skips anchors carrying `data-router-slot="disabled"`. We cannot set that
+ * at creation time because the anchor is created inside TinyMCE's minified plugin bundle, so we tag
+ * it in flight instead: this listener is registered in the **capture** phase on `window`, which runs
+ * before the router's own bubble-phase listener on that same target. By the time the router sees the
+ * event, the anchor is marked and the router leaves it alone.
+ *
+ * Only `blob:` and `data:` are tagged. Ordinary links are untouched, so in-app navigation is
+ * unaffected.
+ *
+ * ## Upstream
+ *
+ * This is arguably an Umbraco defect: the router should not attempt to route non-`http(s)` schemes
+ * at all, which would also cover `mailto:` and `tel:`. It affects any blob-based download in the
+ * backoffice, not only TinyMCE. Verified present in Umbraco 17.6.2, and `anchor.ts` is byte-identical
+ * back to at least 17.5.0 — so this is long-standing, not a regression. Remove this workaround once
+ * the router gains a scheme guard.
+ */
+/** Schemes that must never be handed to `history.pushState`. */
+const NON_ROUTABLE_SCHEME = /^(?:blob|data):/i;
+let isListening = false;
+const onClickCapture = (event) => {
+    // composedPath() is required to see through shadow boundaries — the same approach the
+    // router itself uses.
+    const anchor = event
+        .composedPath()
+        .find((target) => target instanceof HTMLAnchorElement);
+    if (!anchor || !NON_ROUTABLE_SCHEME.test(anchor.href))
+        return;
+    // Opt this anchor out of router-slot handling. The router reads
+    // `$anchor.dataset['routerSlot'] === 'disabled'` and returns early.
+    anchor.dataset['routerSlot'] = 'disabled';
+};
+/**
+ * Starts tagging `blob:`/`data:` anchors so Umbraco's router does not cancel the download.
+ * Safe to call more than once; only the first call registers a listener.
+ */
+export function enableBlobDownloadWorkaround() {
+    if (isListening)
+        return;
+    // Capture phase, so this runs before router-slot's bubble-phase listener on `window`.
+    window.addEventListener('click', onClickCapture, true);
+    isListening = true;
+}
+/** Removes the listener registered by {@link enableBlobDownloadWorkaround}. */
+export function disableBlobDownloadWorkaround() {
+    if (!isListening)
+        return;
+    window.removeEventListener('click', onClickCapture, true);
+    isListening = false;
+}

package/dist-cms/entry-points/entry-point.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entry-point.d.ts","sourceRoot":"","sources":["../../src/entry-points/entry-point.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAExG,eAAO,MAAM,MAAM,EAAE,mBAuBpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,qBAAyD,CAAC"}
+{"version":3,"file":"entry-point.d.ts","sourceRoot":"","sources":["../../src/entry-points/entry-point.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAExG,eAAO,MAAM,MAAM,EAAE,mBA2BpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,qBAEtB,CAAC"}

package/dist-cms/entry-points/entry-point.js

@@ -1,6 +1,10 @@
 import { client } from '../api/client.gen.js';
+import { disableBlobDownloadWorkaround, enableBlobDownloadWorkaround, } from './blob-download-router-fix.js';
 import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth';
 export const onInit = (_host, _extensionRegistry) => {
+    // Let blob:/data: downloads (e.g. TinyMCE's PDF export) through Umbraco's router.
+    // See blob-download-router-fix.ts for why this is needed.
+    enableBlobDownloadWorkaround();
     // Will use only to add in Open API config with generated TS OpenAPI HTTPS Client
     // Do the OAuth token handshake stuff
     _host.consumeContext(UMB_AUTH_CONTEXT, async (authContext) => {
@@ -22,4 +26,6 @@ export const onInit = (_host, _extensionRegistry) => {
         });
     });
 };
-export const onUnload = (_host, _extensionRegistry) => { };
+export const onUnload = (_host, _extensionRegistry) => {
+    disableBlobDownloadWorkaround();
+};

package/dist-cms/plugins/manifests.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"manifests.d.ts","sourceRoot":"","sources":["../../src/plugins/manifests.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE/E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,qBAAqB,CA0flD,CAAC"}
+{"version":3,"file":"manifests.d.ts","sourceRoot":"","sources":["../../src/plugins/manifests.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE/E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,qBAAqB,CA2gBlD,CAAC"}

package/dist-cms/plugins/manifests.js

@@ -136,6 +136,23 @@ export const manifests = [
             ],
         },
     },
+    {
+        type: 'tinyMcePlugin',
+        alias: 'Umb.TinyMcePlugin.Fullscreen',
+        name: 'TinyMCE Fullscreen Plugin',
+        meta: {
+            plugins: ['fullscreen'],
+            toolbar: [
+                {
+                    alias: 'fullscreen',
+                    label: 'Fullscreen',
+                    icon: 'fullscreen',
+                    isplugin: true,
+                    pluginAlias: 'fullscreen',
+                },
+            ],
+        },
+    },
     {
         type: 'tinyMcePlugin',
         alias: 'Umb.TinyMcePlugin.Help',

package/dist-cms/plugins/tiny-mce-mediapicker.plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tiny-mce-mediapicker.plugin.d.ts","sourceRoot":"","sources":["../../src/plugins/tiny-mce-mediapicker.plugin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AA0BhF,MAAM,CAAC,OAAO,OAAO,2BAA4B,SAAQ,oBAAoB;;gBAQhE,IAAI,EAAE,sBAAsB;CAsOxC"}
+{"version":3,"file":"tiny-mce-mediapicker.plugin.d.ts","sourceRoot":"","sources":["../../src/plugins/tiny-mce-mediapicker.plugin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAyChF,MAAM,CAAC,OAAO,OAAO,2BAA4B,SAAQ,oBAAoB;;gBAQhE,IAAI,EAAE,sBAAsB;CA2VxC"}

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

@@ -9,7 +9,7 @@ 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_modalManager, _UmbTinyMceMediaPickerPlugin_temporaryFileRepository, _UmbTinyMceMediaPickerPlugin_allowedMediaTypeIds_get, _UmbTinyMceMediaPickerPlugin_onAction, _UmbTinyMceMediaPickerPlugin_showMediaPicker, _UmbTinyMceMediaPickerPlugin_showMediaCaptionAltText, _UmbTinyMceMediaPickerPlugin_insertInEditor, _UmbTinyMceMediaPickerPlugin_uploadImageHandler;
+var _UmbTinyMceMediaPickerPlugin_instances, _UmbTinyMceMediaPickerPlugin_modalManager, _UmbTinyMceMediaPickerPlugin_temporaryFileRepository, _UmbTinyMceMediaPickerPlugin_allowedMediaTypeIds_get, _UmbTinyMceMediaPickerPlugin_resolveExistingMedia, _UmbTinyMceMediaPickerPlugin_onAction, _UmbTinyMceMediaPickerPlugin_parseDimension, _UmbTinyMceMediaPickerPlugin_showMediaPicker, _UmbTinyMceMediaPickerPlugin_showMediaCaptionAltText, _UmbTinyMceMediaPickerPlugin_insertInEditor, _UmbTinyMceMediaPickerPlugin_uploadImageHandler;
 import { sizeImageInEditor, uploadBlobImages } from '@tiny-mce-umbraco/backoffice/core';
 import { UmbTinyMcePluginBase } from '@tiny-mce-umbraco/backoffice/core';
 import { getGuidFromUdi, splitStringToArray } from '@umbraco-cms/backoffice/utils';
@@ -62,8 +62,14 @@ class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
             tooltip: localize.term('general_mediaPicker'),
             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();
+                // Drive the active state from the SAME resolution the action uses. A selector of
+                // `img[data-udi]` only lights up when the image itself is selected, so with the caret in
+                // the figcaption the button looked like "nothing selected" while the action would happily
+                // have edited that image. Button state and action behaviour must agree.
+                const syncActiveState = () => api.setActive(!!__classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_instances, "m", _UmbTinyMceMediaPickerPlugin_resolveExistingMedia).call(this).image);
+                this.editor.on('NodeChange', syncActiveState);
+                syncActiveState();
+                return () => this.editor.off('NodeChange', syncActiveState);
             },
         });
         // Register global options for the editor
@@ -88,37 +94,49 @@ class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
 }
 _UmbTinyMceMediaPickerPlugin_modalManager = new WeakMap(), _UmbTinyMceMediaPickerPlugin_temporaryFileRepository = new WeakMap(), _UmbTinyMceMediaPickerPlugin_uploadImageHandler = new WeakMap(), _UmbTinyMceMediaPickerPlugin_instances = new WeakSet(), _UmbTinyMceMediaPickerPlugin_allowedMediaTypeIds_get = function _UmbTinyMceMediaPickerPlugin_allowedMediaTypeIds_get() {
     return splitStringToArray(this.configuration?.getValueByAlias('allowedMediaTypes'));
-}, _UmbTinyMceMediaPickerPlugin_onAction = 
-/*
-async #observeCurrentUser() {
-    if (!this.#currentUserContext) return;
-
-    this.observe(this.#currentUserContext.currentUser, (currentUser) => (this.#currentUser = currentUser));
-}
-*/
-async function _UmbTinyMceMediaPickerPlugin_onAction() {
-    const selectedElm = this.editor.selection.getNode();
+}, _UmbTinyMceMediaPickerPlugin_resolveExistingMedia = function _UmbTinyMceMediaPickerPlugin_resolveExistingMedia() {
+    const dom = this.editor.dom;
+    const selectedNode = this.editor.selection.getNode();
+    const figure = dom.getParent(selectedNode, 'figure');
+    const image = selectedNode.nodeName === 'IMG'
+        ? selectedNode
+        : (figure?.querySelector('img') ?? null);
+    const anchor = image ? dom.getParent(image, 'a') : null;
+    // The `<figcaption>` is what the editor actually sees and edits, so it wins over the
+    // `data-caption` attribute, which is only written when the picker last ran and goes stale as
+    // soon as someone edits the caption directly in the editor.
+    const figcaptionText = figure?.querySelector('figcaption')?.textContent?.trim();
+    const caption = figcaptionText || image?.dataset.caption || undefined;
+    return { selectedNode, figure, image, anchor, caption };
+}, _UmbTinyMceMediaPickerPlugin_onAction = async function _UmbTinyMceMediaPickerPlugin_onAction() {
+    const { image, caption } = __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_instances, "m", _UmbTinyMceMediaPickerPlugin_resolveExistingMedia).call(this);
     let currentTarget = {};
-    if (selectedElm.nodeName === 'IMG') {
-        const img = selectedElm;
-        const hasUdi = img.hasAttribute('data-udi');
-        const hasDataTmpImg = img.hasAttribute('data-tmpimg');
+    if (image) {
         currentTarget = {
-            altText: img.alt,
-            url: img.src,
-            caption: img.dataset.caption,
+            altText: image.alt,
+            url: image.src,
+            caption,
+            // Carry the current dimensions in so the dialog opens showing the real size rather
+            // than defaulting, and so an unchanged dialog round-trips the size unchanged.
+            width: __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_instances, "m", _UmbTinyMceMediaPickerPlugin_parseDimension).call(this, image.getAttribute('width')),
+            height: __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_instances, "m", _UmbTinyMceMediaPickerPlugin_parseDimension).call(this, image.getAttribute('height')),
         };
-        if (hasUdi) {
-            currentTarget['udi'] = img.dataset.udi;
+        if (image.hasAttribute('data-udi')) {
+            currentTarget['udi'] = image.dataset.udi;
         }
         else {
-            currentTarget['id'] = img.getAttribute('rel') ?? undefined;
+            currentTarget['id'] = image.getAttribute('rel') ?? undefined;
         }
-        if (hasDataTmpImg) {
-            currentTarget['tmpimg'] = img.dataset.tmpimg;
+        if (image.hasAttribute('data-tmpimg')) {
+            currentTarget['tmpimg'] = image.dataset.tmpimg;
         }
     }
     __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_instances, "m", _UmbTinyMceMediaPickerPlugin_showMediaPicker).call(this, currentTarget);
+}, _UmbTinyMceMediaPickerPlugin_parseDimension = function _UmbTinyMceMediaPickerPlugin_parseDimension(value) {
+    if (!value)
+        return undefined;
+    const parsed = Number.parseInt(value, 10);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined;
 }, _UmbTinyMceMediaPickerPlugin_showMediaPicker = async function _UmbTinyMceMediaPickerPlugin_showMediaPicker(currentTarget) {
     /*
     let startNodeId;
@@ -156,12 +174,20 @@ async function _UmbTinyMceMediaPickerPlugin_onAction() {
     if (!mediaUnique)
         return;
     const modalHandler = __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_modalManager, "f")?.open(this, UMB_MEDIA_CAPTION_ALT_TEXT_MODAL, {
-        data: { mediaUnique },
+        // The dialog needs maxImageSize to offer sensible sizes; without it the size it hands back
+        // is unconstrained and we have no idea what the editor's limit was meant to be.
+        data: { mediaUnique, maxImageSize: this.editor.options.get('maxImageSize') },
         value: {
             url: '',
             altText: currentTarget.altText,
             caption: currentTarget.caption,
+            width: currentTarget.width,
+            height: currentTarget.height,
         },
+        // The token defaults this sidebar to `small`, which is too narrow for the width/height row —
+        // the unit suffix on the height field gets clipped. Umbraco's own tiptap RTE overrides it the
+        // same way for the same reason ("Override default sidebar size for better UX").
+        modal: { size: 'medium' },
     });
     const mediaData = await modalHandler?.onSubmit().catch(() => null);
     if (!mediaData)
@@ -171,6 +197,9 @@ async function _UmbTinyMceMediaPickerPlugin_onAction() {
         caption: mediaData?.caption,
         url: mediaData?.url,
         udi: 'umb://media/' + mediaUnique?.replace(/-/g, ''),
+        // The dialog is the authority on size once the editor has chosen one.
+        width: mediaData?.width,
+        height: mediaData?.height,
     };
     __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_instances, "m", _UmbTinyMceMediaPickerPlugin_insertInEditor).call(this, media);
 }, _UmbTinyMceMediaPickerPlugin_insertInEditor = async function _UmbTinyMceMediaPickerPlugin_insertInEditor(media) {
@@ -178,32 +207,78 @@ async function _UmbTinyMceMediaPickerPlugin_onAction() {
         return;
     // We need to create a NEW DOM <img> element to insert
     // setting an attribute of ID to __mcenew, so we can gather a reference to the node, to be able to update its size accordingly to the size of the image.
+    // An explicit size from the dialog is authoritative. Stamping it on the markup up front means
+    // the editor never briefly renders at the wrong size, and it tells the post-insert sizing step
+    // below to leave the dimensions alone.
+    const explicitSize = media.width && media.height ? { width: media.width, height: media.height } : undefined;
     const img = {
         alt: media.altText,
         src: media.url ? media.url : 'nothing.jpg',
         id: '__mcenew',
         'data-udi': media.udi,
         'data-caption': media.caption,
+        ...(explicitSize
+            ? { width: String(explicitSize.width), height: String(explicitSize.height) }
+            : {}),
     };
-    const newImage = this.editor.dom.createHTML('img', img);
-    const parentElement = this.editor.selection.getNode().parentElement;
-    if (img['data-caption'] && parentElement) {
-        const figCaption = this.editor.dom.createHTML('figcaption', {}, img['data-caption']);
-        const combined = newImage + figCaption;
-        if (parentElement.nodeName !== 'FIGURE') {
-            const fragment = this.editor.dom.createHTML('figure', {}, combined);
-            this.editor.selection.setContent(fragment);
-        }
-        else {
-            parentElement.innerHTML = combined;
+    const dom = this.editor.dom;
+    // Same resolution the edit path used, so both agree on what is being replaced. The caret may
+    // be on the image, on an <a> wrapping it, or inside the figcaption.
+    //
+    // The anchor matters because Umbraco fixed this same class of bug in its own RTE in 17.6
+    // (media-picker.tiptap-toolbar.utils.ts); re-picking used to silently drop the <a>.
+    const { selectedNode, figure: existingFigure, image: existingImage, anchor: existingAnchor, } = __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_instances, "m", _UmbTinyMceMediaPickerPlugin_resolveExistingMedia).call(this);
+    let markup = dom.createHTML('img', img);
+    if (existingAnchor) {
+        // Rebuild the wrapping link. `data-mce-*` attributes are TinyMCE's own bookkeeping and are
+        // skipped so they get regenerated rather than staling.
+        //
+        // Because the new markup now CONTAINS the link, whatever we replace below must be the
+        // element the old link lived in — never the image inside it. Replacing just the image would
+        // nest an <a> inside an <a>; the parser rejects that and splits it, leaving an empty
+        // duplicate link behind.
+        const anchorAttrs = {};
+        for (const attr of Array.from(existingAnchor.attributes)) {
+            if (!attr.name.startsWith('data-mce-')) {
+                anchorAttrs[attr.name] = attr.value;
+            }
         }
+        markup = dom.createHTML('a', anchorAttrs, markup);
     }
-    else if (parentElement?.nodeName === 'FIGURE' && parentElement.parentElement) {
-        //if caption is removed, remove the figure element
-        parentElement.parentElement.innerHTML = newImage;
+    const caption = img['data-caption'];
+    if (caption && existingFigure) {
+        // Replace only the figure's children, so the figure's own attributes survive along with
+        // every sibling elsewhere in the container.
+        existingFigure.innerHTML = markup + dom.createHTML('figcaption', {}, caption);
     }
     else {
-        this.editor.selection.setContent(newImage);
+        const content = caption ? dom.createHTML('figure', {}, markup + dom.createHTML('figcaption', {}, caption)) : markup;
+        // Replace the OUTERMOST element whose markup we have just rebuilt: the figure if there was
+        // one, otherwise the link, otherwise the image. Anything narrower would leave a fragment of
+        // the old structure behind; anything wider would take out unrelated siblings — the bug in
+        // the previous implementation, which assigned to `figure.parentElement.innerHTML`.
+        let replaceTarget = existingFigure ?? existingAnchor ?? existingImage;
+        if (caption && !existingFigure) {
+            // A <figure> is block-level and cannot legally sit inside a <p>. Replacing something
+            // *within* the paragraph makes the parser split it, leaving an empty <p> either side of
+            // the figure. So when the paragraph holds nothing but this image, promote the target to
+            // the paragraph and consume it.
+            //
+            // Guarded on the paragraph having no text of its own and at most one image, so a figure
+            // never swallows a paragraph that has other content in it. `length <= 1` rather than
+            // `=== 1` because a brand new insert at a caret has no image in the paragraph yet.
+            const paragraph = dom.getParent(replaceTarget ?? selectedNode, 'p');
+            if (paragraph && !paragraph.textContent?.trim() && paragraph.querySelectorAll('img').length <= 1) {
+                replaceTarget = paragraph;
+            }
+        }
+        if (replaceTarget) {
+            dom.setOuterHTML(replaceTarget, content);
+        }
+        else {
+            // Nothing existing to replace: a brand new insert at the caret.
+            this.editor.selection.setContent(content);
+        }
     }
     // Using settimeout to wait for a DoM-render, so we can find the new element by ID.
     setTimeout(() => {
@@ -212,8 +287,13 @@ async function _UmbTinyMceMediaPickerPlugin_onAction() {
             return;
         this.editor.dom.setAttrib(imgElm, 'id', null);
         // When image is loaded we are ready to call sizeImageInEditor.
+        //
+        // `sizeImageInEditor` reads the image's natural size and scales it down to maxImageSize,
+        // overwriting the width/height attributes. That is right for pasted or dragged images, but
+        // it used to silently discard whatever size the editor chose in the dialog. Passing the
+        // explicit size keeps it — the sizer then only refreshes the processed image URL.
         const onImageLoaded = () => {
-            sizeImageInEditor(this.editor, imgElm, img.src);
+            sizeImageInEditor(this.editor, imgElm, img.src, explicitSize);
             this.editor.dispatch('Change');
         };
         // Check if image already is loaded.

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

@@ -1 +1 @@
-{"version":3,"file":"property-editor-ui-tiny-mce-config-editor.element.d.ts","sourceRoot":"","sources":["../../../src/property-editors/configEditor/property-editor-ui-tiny-mce-config-editor.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,KAAK,EACX,0BAA0B,EAC1B,iCAAiC,EACjC,MAAM,yCAAyC,CAAC;AAKjD;;GAEG;AACH,qBACa,6CAA8C,SAAQ,aAAc,YAAW,0BAA0B;;IAErH,IACI,KAAK,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAI3B;IACD,IAAI,KAAK,IAAI,IAAI,CAEhB;IAGD,MAAM,CAAC,EAAE,iCAAiC,CAAC;IAG3C,OAAO,CAAC,aAAa,CAA0B;cAEtB,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAqC1E,MAAM;IASf,gBAAyB,MAAM,4BAY7B;CACF;AAED,eAAe,6CAA6C,CAAC;AAE7D,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+CAA+C,EAAE,6CAA6C,CAAC;KAC/F;CACD"}
+{"version":3,"file":"property-editor-ui-tiny-mce-config-editor.element.d.ts","sourceRoot":"","sources":["../../../src/property-editors/configEditor/property-editor-ui-tiny-mce-config-editor.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,KAAK,EACX,0BAA0B,EAC1B,iCAAiC,EACjC,MAAM,yCAAyC,CAAC;AAKjD;;GAEG;AACH,qBACa,6CAA8C,SAAQ,aAAc,YAAW,0BAA0B;;IAErH,IACI,KAAK,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAI3B;IACD,IAAI,KAAK,IAAI,IAAI,CAEhB;IAGD,MAAM,CAAC,EAAE,iCAAiC,CAAC;IAG3C,OAAO,CAAC,aAAa,CAA0B;cAEtB,YAAY,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAoC1E,MAAM;IASf,gBAAyB,MAAM,4BAY7B;CACF;AAED,eAAe,6CAA6C,CAAC;AAE7D,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+CAA+C,EAAE,6CAA6C,CAAC;KAC/F;CACD"}

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

@@ -64,7 +64,6 @@ _UmbPropertyEditorUITinyMceConfigEditorElement_showCodeEditor = async function _
     else {
         try {
             this._customConfig = JSON.parse(value.content.toString());
-            console.log('Parsed object:', this._customConfig);
             // Proceed with using jsonObj
         }
         catch (err) {

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

@@ -9,7 +9,7 @@ export const manifests = [
         meta: {
             label: 'TinyMCE Plugin Configuration',
             icon: 'icon-autofill',
-            group: 'common',
+            group: '#propertyEditorUIGroups_common',
         },
     },
     {
@@ -20,7 +20,7 @@ export const manifests = [
         meta: {
             label: 'TinyMCE Toolbar Configuration',
             icon: 'icon-autofill',
-            group: 'common',
+            group: '#propertyEditorUIGroups_common',
         },
     },
     {
@@ -31,7 +31,7 @@ export const manifests = [
         meta: {
             label: 'TinyMCE Custom Configuration',
             icon: 'icon-autofill',
-            group: 'common',
+            group: '#propertyEditorUIGroups_common',
         },
     },
 ];

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

@@ -1 +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"}
+{"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;IAqGxB,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

@@ -114,10 +114,20 @@ let UmbPropertyEditorUITinyMcePluginConfigurationElement = class UmbPropertyEdit
                 });
             });
         }
-        const defaultPluginAliases = this._pluginConfig.map((p) => p.alias);
+        // A plugin can be named by more than one source - the fallback defaults, the appsettings
+        // `Plugins` list, and a `tinyMcePlugin` manifest. Each source used to push its own row, so a
+        // plugin named twice appeared twice in the picker and handed lit's keyed `repeat()` a duplicate
+        // key. First source wins, which keeps the defaults' "(default plugin)" label and disabled state.
+        const seen = new Set(this._pluginConfig.map((p) => p.alias));
+        const addPlugin = (entry) => {
+            if (seen.has(entry.alias))
+                return;
+            seen.add(entry.alias);
+            this._pluginConfig.push(entry);
+        };
         configPlugins.forEach((p) => {
-            if (!excludeList.includes(p) && !defaultPluginAliases.includes(p)) {
-                this._pluginConfig.push({
+            if (!excludeList.includes(p)) {
+                addPlugin({
                     alias: p,
                     label: p,
                     icon: undefined,
@@ -129,7 +139,7 @@ let UmbPropertyEditorUITinyMcePluginConfigurationElement = class UmbPropertyEdit
         plugins.forEach((p) => {
             if (p.meta?.plugins) {
                 if (typeof p.meta.plugins === 'string' && !excludeList.includes(p.meta.plugins)) {
-                    this._pluginConfig.push({
+                    addPlugin({
                         alias: p.meta.plugins,
                         label: p.meta.plugins,
                         icon: undefined,
@@ -140,7 +150,7 @@ let UmbPropertyEditorUITinyMcePluginConfigurationElement = class UmbPropertyEdit
                 else if (Array.isArray(p.meta.plugins)) {
                     p.meta.plugins.forEach((pl) => {
                         if (!excludeList.includes(pl)) {
-                            this._pluginConfig.push({
+                            addPlugin({
                                 alias: pl,
                                 label: pl,
                                 icon: undefined,

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

@@ -17,7 +17,7 @@ export const manifests = [
             label: 'Rich Text Editor [TinyMCE]',
             propertyEditorSchemaAlias: UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS,
             icon: 'icon-tinymce',
-            group: 'richContent',
+            group: '#propertyEditorUIGroups_richContent',
             supportsReadOnly: true,
             keywords: ['content', 'article', 'body', 'html', 'wysiwyg', 'richtext', 'rte', 'tinymce', 'editor', 'formatted', 'paragraph'],
             settings: {

package/dist-cms/utils/index.d.ts

@@ -1,11 +1,21 @@
 import type { Editor } from '@umbraco-cms/backoffice/external/tinymce';
 /**
- * Sizes an image in the editor
- * @param editor
- * @param imageDomElement
- * @param imgUrl
+ * Sizes an image in the editor.
+ *
+ * By default the image is scaled down to the editor's `maxImageSize`, which is what pasted and
+ * dragged images need. Pass `explicitSize` when the size has already been chosen deliberately (for
+ * example in the media picker's caption/alt-text dialog) — those dimensions are then used as-is and
+ * only the processed image URL is refreshed. Without it, a deliberately chosen size is silently
+ * overwritten by the max-size scaling.
+ * @param editor The TinyMCE editor instance.
+ * @param imageDomElement The image element to size.
+ * @param imgUrl Source URL, used to generate a resized `data-mce-src`.
+ * @param explicitSize Dimensions to apply verbatim instead of scaling to `maxImageSize`.
  */
-export declare function sizeImageInEditor(editor: Editor, imageDomElement: HTMLElement, imgUrl?: string): Promise<void>;
+export declare function sizeImageInEditor(editor: Editor, imageDomElement: HTMLElement, imgUrl?: string, explicitSize?: {
+    width: number;
+    height: number;
+}): Promise<void>;
 /**
  * Scales an image to the max size
  * @param maxSize

package/dist-cms/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAEvE;;;;;GAKG;AACH,wBAAsB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,CAAC,EAAE,MAAM,iBAsBpG;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;EA4B5E;AAED;;;;GAIG;AACH,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,iBAqDzE;AAED,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAEvE;;;;;;;;;;;;GAYG;AACH,wBAAsB,iBAAiB,CACtC,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,WAAW,EAC5B,MAAM,CAAC,EAAE,MAAM,EACf,YAAY,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,iBA0ChD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;EA4B5E;AAED;;;;GAIG;AACH,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,iBAqDzE;AAED,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC"}

package/dist-cms/utils/index.js

@@ -3,14 +3,36 @@
 // TODO: This should not be done in this way, we need to split this into separate defined helper methods. This is also very specific to TinyMCE, so should be named that way. [NL]
 import { getProcessedImageUrl } from '@umbraco-cms/backoffice/utils';
 /**
- * Sizes an image in the editor
- * @param editor
- * @param imageDomElement
- * @param imgUrl
+ * Sizes an image in the editor.
+ *
+ * By default the image is scaled down to the editor's `maxImageSize`, which is what pasted and
+ * dragged images need. Pass `explicitSize` when the size has already been chosen deliberately (for
+ * example in the media picker's caption/alt-text dialog) — those dimensions are then used as-is and
+ * only the processed image URL is refreshed. Without it, a deliberately chosen size is silently
+ * overwritten by the max-size scaling.
+ * @param editor The TinyMCE editor instance.
+ * @param imageDomElement The image element to size.
+ * @param imgUrl Source URL, used to generate a resized `data-mce-src`.
+ * @param explicitSize Dimensions to apply verbatim instead of scaling to `maxImageSize`.
  */
-export async function sizeImageInEditor(editor, imageDomElement, imgUrl) {
+export async function sizeImageInEditor(editor, imageDomElement, imgUrl, explicitSize) {
     const size = editor.dom.getSize(imageDomElement);
     const maxImageSize = editor.options.get('maxImageSize');
+    if (explicitSize) {
+        editor.dom.setAttribs(imageDomElement, {
+            width: Math.round(explicitSize.width),
+            height: Math.round(explicitSize.height),
+        });
+        if (imgUrl) {
+            const resizedImgUrl = await getProcessedImageUrl(imgUrl, {
+                width: Math.round(explicitSize.width),
+                height: Math.round(explicitSize.height),
+            });
+            editor.dom.setAttrib(imageDomElement, 'data-mce-src', resizedImgUrl);
+        }
+        editor.execCommand('mceAutoResize', false);
+        return;
+    }
     if (maxImageSize && maxImageSize > 0) {
         const newSize = scaleToMaxSize(maxImageSize, size.w, size.h);
         editor.dom.setAttribs(imageDomElement, { width: Math.round(newSize.width), height: Math.round(newSize.height) });

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@tiny-mce-umbraco/backoffice",
-	"version": "17.5.0",
-	"description": "This Umbraco CMS package enables access to the TinyMCE-based Rich Text Editor (RTE) in version 16 and above. It also supports the use of TinyMCE Premium plugins with a valid subscription. Additional features include streamlined configuration for RTE Data Types in Umbraco and enhanced settings that support direct JSON-based configuration via .NET (appsettings.config).",
+	"version": "17.6.2",
+	"description": "This Umbraco CMS package enables access to the TinyMCE-based Rich Text Editor (RTE). It requires Umbraco 17.6.2 or later - for Umbraco 16 use the 16.x package versions, for Umbraco 18 use 18.x. It also supports the use of TinyMCE Premium plugins with a valid subscription. Additional features include streamlined configuration for RTE Data Types in Umbraco and enhanced settings that support direct JSON-based configuration via .NET (appsettings.config).",
 	"keywords": [
 		"Umbraco",
 		"TinyMCE",
@@ -40,7 +40,7 @@
 		"@rollup/plugin-json": "^6.1.0",
 		"@rollup/plugin-node-resolve": "^16.0.1",
 		"@rollup/plugin-replace": "^6.0.2",
-		"@umbraco-cms/backoffice": "^17.5.0",
+		"@umbraco-cms/backoffice": "^17.6.2",
 		"chalk": "^5.3.0",
 		"cross-env": "^10.1.0",
 		"eslint": "^10.2.0",
@@ -55,7 +55,7 @@
 		"vite-tsconfig-paths": "^5.1.4"
 	},
 	"peerDependencies": {
-		"@umbraco-cms/backoffice": "^17.5.0",
+		"@umbraco-cms/backoffice": "^17.6.2",
 		"tinymce": "^6.8.5",
 		"tinymce-i18n": "^24.12.30"
 	}