@tiny-mce-umbraco/backoffice 17.3.4 → 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;AAGjF,eAAO,MAAM,4CAA4C,sCAAsC,CAAC;AAEhG,eAAO,MAAM,yBAAyB,uQAmB5B,CAAC;AAMX,eAAO,MAAM,qBAAqB,EAAE,gBAiKnC,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

@@ -1,5 +1,7 @@
 import { UMB_CONTEXT_REQUEST_EVENT_TYPE } from '@umbraco-cms/backoffice/context-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UUIIconRequestEvent } from '@umbraco-cms/backoffice/external/uui';
+import { umbLocalizationManager } from '@umbraco-cms/backoffice/localization-api';
 export const UMB_BLOCK_ENTRY_WEB_COMPONENTS_ABSOLUTE_PATH = '@umbraco-cms/backoffice/block-rte';
 export const defaultPremiumPluginsList = [
     'a11ychecker',
@@ -27,9 +29,9 @@ export const defaultPremiumPluginsList = [
 //if a user removes an element from ValidElements config it would still be allowed via this list.
 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|lang],-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[*],details[*],summary[*],-code',
+    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|contenteditable|data-embed-url|data-embed-height|data-embed-width|data-embed-constrain],-span[class|align|style|lang],-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[*],details[*],summary[*],-code',
     invalid_elements: 'font',
-    extended_valid_elements: '@[id|class|style],+umb-rte-block[!data-content-key],+umb-rte-block-inline[!data-content-key],ins[datetime|cite],figure,figcaption',
+    extended_valid_elements: '@[id|class|style],+umb-rte-block[!data-content-key],+umb-rte-block-inline[!data-content-key],ins[datetime|cite],figure,figcaption,iframe[*]',
     custom_elements: 'umb-rte-block,~umb-rte-block-inline',
     toolbar: [
         'styles',
@@ -57,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) => {
@@ -124,12 +132,173 @@ export const defaultFallbackConfig = {
             // Change the history!
             window.history.pushState(null, '', path);
         });
-        // Load backoffice JS so we can get the umb-rte-block component registered inside the iframe [NL]
+        // Sync block editor localization keys into the iframe's module-scope umbLocalizationManager.
+        // The iframe has a completely separate module scope (and thus a separate umbLocalizationManager
+        // 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 = [];
+        // 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 = {
+                $code: code,
+                $dir: locSetAny['$dir'] ?? 'ltr',
+            };
+            let hasKey = false;
+            for (const key of BLOCK_LOC_KEYS) {
+                const val = locSetAny[key];
+                if (typeof val === 'string') {
+                    entry[key] = val;
+                    hasKey = true;
+                }
+            }
+            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);
+        }
+        // Expose the outer extension registry on the outer window so the injected module
+        // script below can sync blockAction manifests into the iframe's per-realm instance.
+        // umb-block-action-list reads umbExtensionsRegistry as a module-level singleton
+        // (not via context), so the context proxy alone cannot bridge it across realms.
+        window._umbOuterExtReg = umbExtensionsRegistry;
+        // Load backoffice JS so we can get the umb-rte-block component registered inside the iframe.
+        // Also:
+        // 1. Import @umbraco-cms/backoffice/block to register the blockAction kind definition
+        //    and the <umb-block-action> custom element in the iframe's realm. These are NOT
+        //    transitively imported by block-rte, but umb-block-action-list needs them to
+        //    instantiate block action extensions (kind: 'default').
+        // 2. Sync blockAction manifests from the outer registry into the iframe's registry.
+        //    Umbraco registers manifests via umbraco-package.json (not module imports), so they
+        //    only exist in the outer registry — we must copy them into the iframe's per-realm
+        //    umbExtensionsRegistry so umb-block-action-list can discover them.
         const script = document.createElement('script');
-        script.type = 'text/javascript';
         script.setAttribute('type', 'module');
-        script.text = `import "@umbraco-cms/backoffice/extension-registry";`;
-        script.text = `import "${UMB_BLOCK_ENTRY_WEB_COMPONENTS_ABSOLUTE_PATH}";`;
+        script.text = `
+			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
+			// element factory — element: () => import('./block-action.element.js') — captures
+			// the inner realm's module URL. When the extension system later calls that factory,
+			// block-action.element.js is loaded in the inner realm, registering <umb-block-action>
+			// in the inner customElements registry.
+			umbExtensionsRegistry.registerMany([UMB_BLOCK_ACTION_DEFAULT_KIND_MANIFEST]);
+
+			// Sync blockAction manifests from the outer registry into the inner realm's registry.
+			// Umbraco registers these via umbraco-package.json at backoffice startup; they only
+			// exist in the outer registry and must be copied so umb-block-action-list can discover them.
+			const outerReg = window.parent?._umbOuterExtReg;
+			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);
     },
     style_formats: [

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[];