@tiny-mce-umbraco/backoffice 17.3.4 → 17.6.2

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

@@ -9,10 +9,10 @@ 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_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 } from '@umbraco-cms/backoffice/utils';
+import { getGuidFromUdi, splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
 import { UmbTemporaryFileRepository } from '@umbraco-cms/backoffice/temporary-file';
@@ -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
@@ -86,37 +92,51 @@ class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
         }
     }
 }
-_UmbTinyMceMediaPickerPlugin_modalManager = new WeakMap(), _UmbTinyMceMediaPickerPlugin_temporaryFileRepository = new WeakMap(), _UmbTinyMceMediaPickerPlugin_uploadImageHandler = new WeakMap(), _UmbTinyMceMediaPickerPlugin_instances = new WeakSet(), _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_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_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;
@@ -132,10 +152,12 @@ async function _UmbTinyMceMediaPickerPlugin_onAction() {
         }
     }
     */
+    const allowedIds = __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_instances, "a", _UmbTinyMceMediaPickerPlugin_allowedMediaTypeIds_get);
     const modalHandler = __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_modalManager, "f")?.open(this, UMB_MEDIA_PICKER_MODAL, {
         data: {
             multiple: false,
             //startNodeIsVirtual,
+            pickableFilter: allowedIds.length ? (item) => allowedIds.includes(item.mediaType.unique) : undefined,
         },
         value: {
             selection: currentTarget.udi ? [getGuidFromUdi(currentTarget.udi)] : [],
@@ -152,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)
@@ -167,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) {
@@ -174,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(() => {
@@ -208,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.d.ts.map

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

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

@@ -17,8 +17,9 @@ 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: {
                 properties: [
                     {

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.3.4",
-	"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,22 +40,22 @@
 		"@rollup/plugin-json": "^6.1.0",
 		"@rollup/plugin-node-resolve": "^16.0.1",
 		"@rollup/plugin-replace": "^6.0.2",
-		"@umbraco-cms/backoffice": "^17.3.4",
+		"@umbraco-cms/backoffice": "^17.6.2",
 		"chalk": "^5.3.0",
 		"cross-env": "^10.1.0",
-		"eslint": "^9.37.0",
+		"eslint": "^10.2.0",
 		"node-fetch": "^3.3.2",
 		"rollup": "^4.40.0",
 		"rollup-plugin-esbuild": "^6.2.1",
 		"rollup-plugin-import-css": "^3.5.8",
 		"tiny-glob": "^0.2.9",
 		"typescript": "^5.9.3",
-		"vite": "^7.1.11",
+		"vite": "^7.3.2",
 		"vite-plugin-static-copy": "^3.1.3",
 		"vite-tsconfig-paths": "^5.1.4"
 	},
 	"peerDependencies": {
-		"@umbraco-cms/backoffice": "^17.3.4",
+		"@umbraco-cms/backoffice": "^17.6.2",
 		"tinymce": "^6.8.5",
 		"tinymce-i18n": "^24.12.30"
 	}