@umbraco-cms/backoffice 14.0.0-a353ecfe → 14.0.0-e0d20272

package/dist-cms/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.js

@@ -0,0 +1,69 @@
+import { UmbTinyMcePluginBase } from '../../../../components/index.js';
+import { UMB_EMBEDDED_MEDIA_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, } from '../../../../modal/index.js';
+export default class UmbTinyMceEmbeddedMediaPlugin extends UmbTinyMcePluginBase {
+    #modalContext;
+    constructor(args) {
+        super(args);
+        this.host.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (modalContext) => {
+            this.#modalContext = modalContext;
+        });
+        this.editor.ui.registry.addButton('umbembeddialog', {
+            icon: 'embed',
+            tooltip: 'Embed',
+            onAction: () => this.#onAction(),
+        });
+    }
+    #onAction() {
+        // Get the selected element
+        // Check nodename is a DIV and the claslist contains 'umb-embed-holder'
+        const selectedElm = this.editor.selection.getNode();
+        let modify = {
+            width: 360,
+            height: 240,
+        };
+        if (selectedElm.nodeName.toUpperCase() === 'DIV' && selectedElm.classList.contains('umb-embed-holder')) {
+            // See if we can go and get the attributes
+            const url = this.editor.dom.getAttrib(selectedElm, 'data-embed-url');
+            const embedWidth = this.editor.dom.getAttrib(selectedElm, 'data-embed-width');
+            const embedHeight = this.editor.dom.getAttrib(selectedElm, 'data-embed-height');
+            const constrain = this.editor.dom.getAttrib(selectedElm, 'data-embed-constrain') === 'true';
+            modify = {
+                url,
+                constrain,
+                width: parseInt(embedWidth) || modify.width,
+                height: parseInt(embedHeight) || modify.height,
+            };
+        }
+        this.#showModal(selectedElm, modify);
+    }
+    #insertInEditor(embed, activeElement) {
+        // Wrap HTML preview content here in a DIV with non-editable class of .mceNonEditable
+        // This turns it into a selectable/cutable block to move about
+        const wrapper = this.editor.dom.create('div', {
+            class: 'mceNonEditable umb-embed-holder',
+            'data-embed-url': embed.url ?? '',
+            'data-embed-height': embed.height,
+            'data-embed-width': embed.width,
+            'data-embed-constrain': embed.constrain ?? false,
+            contenteditable: false,
+        }, embed.preview);
+        // Only replace if activeElement is an Embed element.
+        if (activeElement?.nodeName.toUpperCase() === 'DIV' && activeElement.classList.contains('umb-embed-holder')) {
+            activeElement.replaceWith(wrapper); // directly replaces the html node
+        }
+        else {
+            this.editor.selection.setNode(wrapper);
+        }
+    }
+    async #showModal(selectedElm, embeddedMediaModalData) {
+        const modalHandler = this.#modalContext?.open(UMB_EMBEDDED_MEDIA_MODAL, embeddedMediaModalData);
+        if (!modalHandler)
+            return;
+        const result = await modalHandler.onSubmit();
+        if (!result)
+            return;
+        this.#insertInEditor(result, selectedElm);
+        this.editor.dispatch('Change');
+    }
+}
+//# sourceMappingURL=tiny-mce-embeddedmedia.plugin.js.map

package/dist-cms/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiny-mce-embeddedmedia.plugin.js","sourceRoot":"","sources":["../../../../../../../src/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts"],"names":[],"mappings":"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"}

package/dist-cms/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.d.ts

@@ -0,0 +1,6 @@
+import { TinyMcePluginArguments, UmbTinyMcePluginBase } from '../../../../components/index.js';
+export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase {
+    #private;
+    constructor(args: TinyMcePluginArguments);
+    showDialog(): Promise<void>;
+}

package/dist-cms/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.js

@@ -0,0 +1,168 @@
+import { UmbTinyMcePluginBase } from '../../../../components/index.js';
+import { UMB_LINK_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, } from '../../../../modal/index.js';
+export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase {
+    #modalContext;
+    #linkPickerData;
+    #anchorElement;
+    constructor(args) {
+        super(args);
+        this.host.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (modalContext) => {
+            this.#modalContext = modalContext;
+        });
+        // const editorEventSetupCallback = (buttonApi: { setEnabled: (state: boolean) => void }) => {
+        // 	const editorEventCallback = (eventApi: { element: Element}) => {
+        // 		buttonApi.setEnabled(eventApi.element.nodeName.toLowerCase() === 'a' && eventApi.element.hasAttribute('href'));
+        // 	};
+        // 	editor.on('NodeChange', editorEventCallback);
+        // 	return () => editor.off('NodeChange', editorEventCallback);
+        // };
+        args.editor.ui.registry.addButton('link', {
+            icon: 'link',
+            tooltip: 'Insert/edit link',
+            onAction: () => this.showDialog(),
+        });
+        args.editor.ui.registry.addButton('unlink', {
+            icon: 'unlink',
+            tooltip: 'Remove link',
+            onAction: () => args.editor.execCommand('unlink'),
+        });
+    }
+    async showDialog() {
+        const selectedElm = this.editor.selection.getNode();
+        this.#anchorElement = this.editor.dom.getParent(selectedElm, 'a[href]');
+        const data = {
+            text: this.#anchorElement
+                ? this.#anchorElement.innerText || (this.#anchorElement.textContent ?? '')
+                : this.editor.selection.getContent({ format: 'text' }),
+            href: this.#anchorElement?.getAttribute('href') ?? '',
+            target: this.#anchorElement?.target ?? '',
+            rel: this.#anchorElement?.rel ?? '',
+        };
+        if (selectedElm.nodeName === 'IMG') {
+            data.text = ' ';
+        }
+        if (!this.#anchorElement) {
+            this.#openLinkPicker();
+            return;
+        }
+        //if we already have a link selected, we want to pass that data over to the dialog
+        const currentTarget = {
+            name: this.#anchorElement.title,
+            url: this.#anchorElement.getAttribute('href') ?? '',
+            target: this.#anchorElement.target,
+        };
+        // drop the lead char from the anchor text, if it has a value
+        const anchorVal = this.#anchorElement.dataset.anchor;
+        if (anchorVal) {
+            currentTarget.queryString = anchorVal.substring(1);
+        }
+        if (currentTarget.url?.includes('localLink:')) {
+            currentTarget.udi =
+                currentTarget.url?.substring(currentTarget.url.indexOf(':') + 1, currentTarget.url.lastIndexOf('}')) ?? '';
+        }
+        this.#openLinkPicker(currentTarget);
+    }
+    // TODO => get anchors to provide to link picker?
+    async #openLinkPicker(currentTarget) {
+        const modalHandler = this.#modalContext?.open(UMB_LINK_PICKER_MODAL, {
+            config: {
+                ignoreUserStartNodes: this.configuration?.getValueByAlias('ignoreUserStartNodes') ?? false,
+            },
+            link: currentTarget ?? {},
+            index: null,
+        });
+        if (!modalHandler)
+            return;
+        const linkPickerData = await modalHandler.onSubmit();
+        if (!linkPickerData)
+            return;
+        this.#linkPickerData = linkPickerData;
+        this.#updateLink();
+    }
+    //Create a json obj used to create the attributes for the tag
+    // TODO => where has rel gone?
+    #createElemAttributes() {
+        const a = Object.assign({}, this.#linkPickerData?.link, { 'data-anchor': null });
+        // always need to map back to href for tinymce to render correctly
+        // do this first as checking querystring below may modify the href property
+        if (this.#linkPickerData?.link.url) {
+            a.href = this.#linkPickerData.link.url;
+        }
+        if (this.#linkPickerData?.link.queryString?.startsWith('#')) {
+            a['data-anchor'] = this.#linkPickerData?.link.queryString;
+            a.href += this.#linkPickerData?.link.queryString;
+        }
+        return a;
+    }
+    #insertLink() {
+        if (this.#anchorElement) {
+            this.editor.dom.setAttribs(this.#anchorElement, this.#createElemAttributes());
+            this.editor.selection.select(this.#anchorElement);
+            this.editor.execCommand('mceEndTyping');
+            return;
+        }
+        // If there is no selected content, we can't insert a link
+        // as TinyMCE needs selected content for this, so instead we
+        // create a new dom element and insert it, using the chosen
+        // link name as the content.
+        if (this.editor.selection.getContent() !== '') {
+            this.editor.execCommand('CreateLink', false, this.#createElemAttributes());
+            return;
+        }
+        // Using the target url as a fallback, as href might be confusing with a local link
+        const linkContent = typeof this.#linkPickerData?.link.name !== 'undefined' && this.#linkPickerData?.link.name !== ''
+            ? this.#linkPickerData?.link.name
+            : this.#linkPickerData?.link.url;
+        // only insert if link has content
+        if (linkContent) {
+            const domElement = this.editor.dom.createHTML('a', this.#createElemAttributes(), linkContent);
+            this.editor.execCommand('mceInsertContent', false, domElement);
+        }
+    }
+    #updateLink() {
+        // if an anchor exists, check that it is appropriately prefixed
+        if (this.#linkPickerData?.link.queryString &&
+            !this.#linkPickerData.link.queryString.startsWith('?') &&
+            !this.#linkPickerData.link.queryString.startsWith('#')) {
+            this.#linkPickerData.link.queryString =
+                (this.#linkPickerData.link.queryString.startsWith('=') ? '#' : '?') + this.#linkPickerData.link.queryString;
+        }
+        // the href might be an external url, so check the value for an anchor/qs
+        // href has the anchor re-appended later, hence the reset here to avoid duplicating the anchor
+        if (this.#linkPickerData && !this.#linkPickerData?.link.queryString) {
+            const urlParts = this.#linkPickerData?.link.url?.split(/(#|\?)/);
+            if (urlParts?.length === 3) {
+                this.#linkPickerData.link.url = urlParts[0];
+                this.#linkPickerData.link.queryString = urlParts[1] + urlParts[2];
+            }
+        }
+        if (!this.#linkPickerData?.link.url && !this.#linkPickerData?.link.queryString) {
+            this.editor.execCommand('unlink');
+            return;
+        }
+        //if we have an id, it must be a locallink:id
+        if (this.#linkPickerData?.link.udi) {
+            this.#linkPickerData.link.url = '/{localLink:' + this.#linkPickerData.link.udi + '}';
+            this.#insertLink();
+            return;
+        }
+        if (!this.#linkPickerData?.link.url) {
+            this.#linkPickerData.link.url = '';
+        }
+        // Is email and not //user@domain.com and protocol (e.g. mailto:, sip:) is not specified
+        if (this.#linkPickerData?.link.url.includes('@') &&
+            !this.#linkPickerData.link.url.includes('//') &&
+            !this.#linkPickerData.link.url.includes(':')) {
+            // assume it's a mailto link
+            this.#linkPickerData.link.url = 'mailto:' + this.#linkPickerData?.link.url;
+            this.#insertLink();
+            return;
+        }
+        // Is www. prefixed
+        if (/^\s*www\./i.test(this.#linkPickerData?.link.url)) {
+            this.#linkPickerData.link.url = 'http://' + this.#linkPickerData.link.url;
+        }
+        this.#insertLink();
+    }
+}
+//# sourceMappingURL=tiny-mce-linkpicker.plugin.js.map

package/dist-cms/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiny-mce-linkpicker.plugin.js","sourceRoot":"","sources":["../../../../../../../src/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts"],"names":[],"mappings":"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"}

package/dist-cms/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-macropicker.plugin.d.ts

@@ -0,0 +1,5 @@
+import { TinyMcePluginArguments, UmbTinyMcePluginBase } from '../../../../components/index.js';
+export default class UmbTinyMceMacroPickerPlugin extends UmbTinyMcePluginBase {
+    #private;
+    constructor(args: TinyMcePluginArguments);
+}

package/dist-cms/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-macropicker.plugin.js

@@ -0,0 +1,166 @@
+import { UmbMacroService } from '../../../../macro/index.js';
+import { UmbTinyMcePluginBase } from '../../../../components/index.js';
+import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, } from '../../../../modal/index.js';
+// TODO => This is a quick transplant of the existing macro plugin - needs to be finished, and need to
+// determine how to replicate the existing macro service
+export default class UmbTinyMceMacroPickerPlugin extends UmbTinyMcePluginBase {
+    #macroService = new UmbMacroService();
+    #modalContext;
+    constructor(args) {
+        super(args);
+        this.host.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (modalContext) => {
+            this.#modalContext = modalContext;
+        });
+        /** Adds custom rules for the macro plugin and custom serialization */
+        this.editor.on('preInit', () => {
+            //this is requires so that we tell the serializer that a 'div' is actually allowed in the root,
+            // otherwise the cleanup will strip it out
+            this.editor.serializer.addRules('div');
+            /** This checks if the div is a macro container, if so, checks if its wrapped in a p tag and then unwraps it (removes p tag) */
+            this.editor.serializer.addNodeFilter('div', (nodes) => {
+                for (let i = 0; i < nodes.length; i++) {
+                    if (nodes[i].attr('class') === 'umb-macro-holder' && nodes[i].parent?.name.toLowerCase() === 'p') {
+                        nodes[i].parent?.unwrap();
+                    }
+                }
+            });
+        });
+        /** when the contents load we need to find any macros declared and load in their content */
+        this.editor.on('SetContent', () => {
+            //get all macro divs and load their content
+            this.editor.dom.select('.umb-macro-holder.mceNonEditable').forEach((macroElement) => {
+                this.#loadMacroContent(macroElement, null);
+            });
+        });
+        /** Adds the button instance */
+        this.editor.ui.registry.addButton('umbmacro', {
+            icon: 'preferences',
+            tooltip: 'Insert macro',
+            /** The insert macro button click event handler */
+            onAction: () => {
+                let dialogData = {
+                    //flag for use in rte so we only show macros flagged for the editor
+                    richTextEditor: true,
+                };
+                //when we click we could have a macro already selected and in that case we'll want to edit the current parameters
+                //so we'll need to extract them and submit them to the dialog.
+                const activeMacroElement = this.#getRealMacroElem();
+                if (activeMacroElement) {
+                    //we have a macro selected so we'll need to parse it's alias and parameters
+                    const comment = Array.from(activeMacroElement.childNodes).find((x) => x.nodeType === 8);
+                    if (!comment) {
+                        throw 'Cannot parse the current macro, the syntax in the editor is invalid';
+                    }
+                    const syntax = comment.textContent?.trim();
+                    const parsed = this.#macroService?.parseMacroSyntax(syntax);
+                    dialogData = {
+                        richTextEditor: false,
+                        macroData: parsed,
+                        activeMacroElement, //pass the active element along so we can retrieve it later
+                    };
+                }
+                this.#showMacroPicker(dialogData);
+            },
+        });
+    }
+    /** loads in the macro content async from the server */
+    #loadMacroContent(macroDiv, macroData) {
+        //if we don't have the macroData, then we'll need to parse it from the macro div
+        if (!macroData && macroDiv) {
+            const comment = Array.from(macroDiv.childNodes).find((x) => x.nodeType === 8);
+            if (!comment) {
+                throw 'Cannot parse the current macro, the syntax in the editor is invalid';
+            }
+            const syntax = comment.textContent?.trim();
+            const parsed = this.#macroService?.parseMacroSyntax(syntax);
+            macroData = parsed;
+        }
+        //show the throbber
+        macroDiv?.classList.add('loading');
+        // Add the contenteditable="false" attribute
+        // As just the CSS class of .mceNonEditable is not working by itself?!
+        macroDiv?.setAttribute('contenteditable', 'false');
+        // TODO => macro data service?
+        // const contentId = $routeParams.id;
+        // //need to wrap in safe apply since this might be occuring outside of angular
+        // angularHelper.safeApply($rootScope, function () {
+        // 	tryExecuteAndNotify(this, macroResource
+        // 		.getMacroResultAsHtmlForEditor(macroData.macroAlias, contentId, macroData.macroParamsDictionary))
+        // 		.then(function (htmlResult) {
+        // 			$macroDiv.removeClass('loading');
+        // 			htmlResult = htmlResult.trim();
+        // 			if (htmlResult !== '') {
+        // 				const wasDirty = editor.isDirty();
+        //              const $ins = macroDiv?.querySelector('ins');
+        // 				$ins.html(htmlResult);
+        // 				if (!wasDirty) {
+        // 					editor.undoManager.clear();
+        // 				}
+        // 			}
+        // 		});
+        // });
+    }
+    #insertInEditor(macroObject, activeMacroElement) {
+        //Important note: the TinyMce plugin "noneditable" is used here so that the macro cannot be edited,
+        // for this to work the mceNonEditable class needs to come last and we also need to use the attribute contenteditable = false
+        // (even though all the docs and examples say that is not necessary)
+        //put the macro syntax in comments, we will parse this out on the server side to be used
+        //for persisting.
+        const macroSyntaxComment = `<!-- ${macroObject.syntax} -->`;
+        //create an id class for this element so we can re-select it after inserting
+        const uniqueId = 'umb-macro-' + this.editor.dom.uniqueId();
+        let macroDiv = this.editor.dom.create('div', {
+            class: `umb-macro-holder ${macroObject.macroAlias} ${uniqueId} mceNonEditable`,
+            contenteditable: 'false',
+        }, `${macroSyntaxComment}<ins>Macro alias: <strong>${macroObject.macroAlias}</strong></ins>`);
+        //if there's an activeMacroElement then replace it, otherwise set the contents of the selected node
+        if (activeMacroElement) {
+            activeMacroElement.replaceWith(macroDiv); //directly replaces the html node
+        }
+        else {
+            this.editor.selection.setNode(macroDiv);
+        }
+        macroDiv = this.editor.dom.select('div.umb-macro-holder.' + uniqueId)[0];
+        this.editor.setDirty(true);
+        //async load the macro content
+        this.#loadMacroContent(macroDiv, macroObject);
+    }
+    /**
+     * Because the macro got wrapped in a P tag because of the way 'enter' works in older versions of Umbraco, this
+     * method will return the macro element if not wrapped in a p, or the p if the macro
+     * element is the only one inside of it even if we are deep inside an element inside the macro
+     */
+    #getRealMacroElem() {
+        // Ask the editor for the currently selected element
+        const element = this.editor?.selection.getNode();
+        if (!element) {
+            return null;
+        }
+        const e = element.closest('.umb-macro-holder');
+        if (!e || e === null)
+            return null;
+        if (e.parentNode?.nodeName === 'P') {
+            //now check if we're the only element
+            if (element.parentNode?.childNodes.length === 1) {
+                return e.parentNode;
+            }
+        }
+        return e;
+    }
+    // TODO => depends on macro picker, which doesn't exist, just showing a generic modal for now
+    async #showMacroPicker(dialogData) {
+        const modalHandler = this.#modalContext?.open(UMB_CONFIRM_MODAL, {
+            headline: 'Macro picker',
+            content: 'Yet to be implemented',
+        });
+        if (!modalHandler)
+            return;
+        const result = await modalHandler.onSubmit();
+        if (!result)
+            return;
+        // TODO => object here should be the response from the modal
+        this.#insertInEditor({}, dialogData.activeMacroElement);
+        this.editor.dispatch('Change');
+    }
+}
+//# sourceMappingURL=tiny-mce-macropicker.plugin.js.map

package/dist-cms/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-macropicker.plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiny-mce-macropicker.plugin.js","sourceRoot":"","sources":["../../../../../../../src/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-macropicker.plugin.ts"],"names":[],"mappings":"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"}

package/dist-cms/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-mediapicker.plugin.d.ts

@@ -0,0 +1,5 @@
+import { TinyMcePluginArguments, UmbTinyMcePluginBase } from '../../../../components/index.js';
+export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
+    #private;
+    constructor(args: TinyMcePluginArguments);
+}

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

@@ -0,0 +1,141 @@
+import { UmbTinyMcePluginBase } from '../../../../components/index.js';
+import { UmbMediaHelper } from '../../../../../../shared/utils/index.js';
+import { UMB_MEDIA_TREE_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, } from '../../../../modal/index.js';
+export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
+    #mediaHelper;
+    #currentUser;
+    #modalContext;
+    #auth;
+    constructor(args) {
+        super(args);
+        this.#mediaHelper = new UmbMediaHelper();
+        this.host.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (modalContext) => {
+            this.#modalContext = modalContext;
+        });
+        // TODO => this breaks tests. disabling for now
+        // will ignore user media start nodes
+        // this.host.consumeContext(UMB_AUTH, (instance) => {
+        // 	this.#auth = instance;
+        // 	this.#observeCurrentUser();
+        // });
+        this.editor.ui.registry.addButton('umbmediapicker', {
+            icon: 'image',
+            tooltip: 'Media Picker',
+            //stateSelector: 'img[data-udi]', TODO => Investigate where stateselector has gone, or if it is still needed
+            onAction: () => this.#onAction(),
+        });
+    }
+    async #observeCurrentUser() {
+        if (!this.#auth)
+            return;
+        this.host.observe(this.#auth.currentUser, (currentUser) => (this.#currentUser = currentUser));
+    }
+    async #onAction() {
+        const selectedElm = this.editor.selection.getNode();
+        let currentTarget = {};
+        if (selectedElm.nodeName === 'IMG') {
+            const img = selectedElm;
+            const hasUdi = img.hasAttribute('data-udi');
+            const hasDataTmpImg = img.hasAttribute('data-tmpimg');
+            currentTarget = {
+                altText: img.alt,
+                url: img.src,
+                caption: img.dataset.caption,
+            };
+            if (hasUdi) {
+                currentTarget['udi'] = img.dataset.udi;
+            }
+            else {
+                currentTarget['id'] = img.getAttribute('rel') ?? undefined;
+            }
+            if (hasDataTmpImg) {
+                currentTarget['tmpimg'] = img.dataset.tmpimg;
+            }
+        }
+        this.#showMediaPicker(currentTarget);
+    }
+    async #showMediaPicker(currentTarget) {
+        let startNodeId;
+        let startNodeIsVirtual;
+        if (!this.configuration?.getByAlias('startNodeId')) {
+            if (this.configuration?.getValueByAlias('ignoreUserStartNodes') === true) {
+                startNodeId = -1;
+                startNodeIsVirtual = true;
+            }
+            else {
+                startNodeId = this.#currentUser?.mediaStartNodeIds?.length !== 1 ? -1 : this.#currentUser?.mediaStartNodeIds[0];
+                startNodeIsVirtual = this.#currentUser?.mediaStartNodeIds?.length !== 1;
+            }
+        }
+        // TODO => startNodeId and startNodeIsVirtual do not exist on ContentTreeItemResponseModel
+        const modalHandler = this.#modalContext?.open(UMB_MEDIA_TREE_PICKER_MODAL, {
+            selection: currentTarget.udi ? [...currentTarget.udi] : [],
+            multiple: false,
+            //startNodeId,
+            //startNodeIsVirtual,
+        });
+        if (!modalHandler)
+            return;
+        const { selection } = await modalHandler.onSubmit();
+        if (!selection.length)
+            return;
+        this.#insertInEditor(selection[0]);
+        this.editor.dispatch('Change');
+    }
+    // TODO => mediaPicker returns a UDI, so need to fetch it. Wait for backend CLI before implementing
+    async #insertInEditor(img) {
+        if (!img)
+            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.
+        const data = {
+            alt: img.altText || '',
+            src: img.url ? img.url : 'nothing.jpg',
+            id: '__mcenew',
+            'data-udi': img.udi,
+            'data-caption': img.caption,
+        };
+        const newImage = this.editor.dom.createHTML('img', data);
+        const parentElement = this.editor.selection.getNode().parentElement;
+        if (img.caption && parentElement) {
+            const figCaption = this.editor.dom.createHTML('figcaption', {}, img.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;
+            }
+        }
+        else {
+            //if caption is removed, remove the figure element
+            if (parentElement?.nodeName === 'FIGURE' && parentElement.parentElement) {
+                parentElement.parentElement.innerHTML = newImage;
+            }
+            else {
+                this.editor.selection.setContent(newImage);
+            }
+        }
+        // Using settimeout to wait for a DoM-render, so we can find the new element by ID.
+        setTimeout(() => {
+            const imgElm = this.editor.dom.get('__mcenew');
+            if (!imgElm)
+                return;
+            this.editor.dom.setAttrib(imgElm, 'id', null);
+            // When image is loaded we are ready to call sizeImageInEditor.
+            const onImageLoaded = () => {
+                this.#mediaHelper?.sizeImageInEditor(this.editor, imgElm, img.url);
+                this.editor.dispatch('Change');
+            };
+            // Check if image already is loaded.
+            if (imgElm.complete === true) {
+                onImageLoaded();
+            }
+            else {
+                imgElm.onload = onImageLoaded;
+            }
+        });
+    }
+}
+//# sourceMappingURL=tiny-mce-mediapicker.plugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tiny-mce-mediapicker.plugin.js","sourceRoot":"","sources":["../../../../../../../src/packages/core/property-editors/uis/tiny-mce/plugins/tiny-mce-mediapicker.plugin.ts"],"names":[],"mappings":"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"}

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

@@ -5,8 +5,9 @@ import { UmbDataTypePropertyCollection } from '../../../components/index.js';
  * @element umb-property-editor-ui-tiny-mce
  */
 export declare class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
+    #private;
     value: string;
-    config: UmbDataTypePropertyCollection;
+    set config(config: UmbDataTypePropertyCollection);
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }