@tiny-mce-umbraco/backoffice 16.0.0-rc2 → 16.0.0-rc2.1

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

@@ -0,0 +1,74 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _UmbTinyMceEmbeddedMediaPlugin_instances, _UmbTinyMceEmbeddedMediaPlugin_onAction, _UmbTinyMceEmbeddedMediaPlugin_insertInEditor, _UmbTinyMceEmbeddedMediaPlugin_showModal;
+import { UmbTinyMcePluginBase } from '../components/input-tiny-mce/tiny-mce-plugin.js';
+import { umbOpenModal } from '@umbraco-cms/backoffice/modal';
+import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
+import { UMB_EMBEDDED_MEDIA_MODAL } from '@umbraco-cms/backoffice/embedded-media';
+class UmbTinyMceEmbeddedMediaPlugin extends UmbTinyMcePluginBase {
+    constructor(args) {
+        super(args);
+        _UmbTinyMceEmbeddedMediaPlugin_instances.add(this);
+        const localize = new UmbLocalizationController(args.host);
+        this.editor.ui.registry.addToggleButton('umbembeddialog', {
+            icon: 'embed',
+            tooltip: localize.term('general_embed'),
+            onAction: () => __classPrivateFieldGet(this, _UmbTinyMceEmbeddedMediaPlugin_instances, "m", _UmbTinyMceEmbeddedMediaPlugin_onAction).call(this),
+            onSetup: function (api) {
+                const changed = args.editor.selection.selectorChangedWithUnbind('div.umb-embed-holder', (state) => api.setActive(state));
+                return () => changed.unbind();
+            },
+        });
+    }
+}
+_UmbTinyMceEmbeddedMediaPlugin_instances = new WeakSet(), _UmbTinyMceEmbeddedMediaPlugin_onAction = function _UmbTinyMceEmbeddedMediaPlugin_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,
+        };
+    }
+    __classPrivateFieldGet(this, _UmbTinyMceEmbeddedMediaPlugin_instances, "m", _UmbTinyMceEmbeddedMediaPlugin_showModal).call(this, selectedElm, modify);
+}, _UmbTinyMceEmbeddedMediaPlugin_insertInEditor = function _UmbTinyMceEmbeddedMediaPlugin_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.markup);
+    // 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);
+    }
+}, _UmbTinyMceEmbeddedMediaPlugin_showModal = async function _UmbTinyMceEmbeddedMediaPlugin_showModal(selectedElm, embeddedMediaModalData) {
+    const result = await umbOpenModal(this, UMB_EMBEDDED_MEDIA_MODAL, { data: embeddedMediaModalData }).catch(() => undefined);
+    if (!result)
+        return;
+    __classPrivateFieldGet(this, _UmbTinyMceEmbeddedMediaPlugin_instances, "m", _UmbTinyMceEmbeddedMediaPlugin_insertInEditor).call(this, result, selectedElm);
+    this.editor.dispatch('Change');
+};
+export default UmbTinyMceEmbeddedMediaPlugin;

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

@@ -0,0 +1,7 @@
+import { UmbTinyMcePluginBase } from '../components/input-tiny-mce/tiny-mce-plugin.js';
+import type { TinyMcePluginArguments } from '../components/input-tiny-mce/tiny-mce-plugin.js';
+export default class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
+    #private;
+    constructor(args: TinyMcePluginArguments);
+}
+//# sourceMappingURL=tiny-mce-mediapicker.plugin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tiny-mce-mediapicker.plugin.d.ts","sourceRoot":"","sources":["../../src/plugins/tiny-mce-mediapicker.plugin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iDAAiD,CAAC;AACvF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AA0B9F,MAAM,CAAC,OAAO,OAAO,2BAA4B,SAAQ,oBAAoB;;gBAIhE,IAAI,EAAE,sBAAsB;CAoOxC"}

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

@@ -0,0 +1,224 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    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 __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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;
+import { sizeImageInEditor, uploadBlobImages } from '../utils/index.js';
+import { UmbTinyMcePluginBase } from '../components/input-tiny-mce/tiny-mce-plugin.js';
+import { getGuidFromUdi } 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';
+import { UMB_MEDIA_PICKER_MODAL, UMB_MEDIA_CAPTION_ALT_TEXT_MODAL } from '@umbraco-cms/backoffice/media';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+class UmbTinyMceMediaPickerPlugin extends UmbTinyMcePluginBase {
+    constructor(args) {
+        super(args);
+        _UmbTinyMceMediaPickerPlugin_instances.add(this);
+        _UmbTinyMceMediaPickerPlugin_modalManager.set(this, void 0);
+        _UmbTinyMceMediaPickerPlugin_temporaryFileRepository.set(this, void 0);
+        _UmbTinyMceMediaPickerPlugin_uploadImageHandler.set(this, (blobInfo, progress) => {
+            return new Promise((resolve, reject) => {
+                progress(0);
+                const id = UmbId.new();
+                const fileBlob = blobInfo.blob();
+                const file = new File([fileBlob], blobInfo.filename(), { type: fileBlob.type });
+                document.dispatchEvent(new CustomEvent('rte.file.uploading', { composed: true, bubbles: true }));
+                __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_temporaryFileRepository, "f")
+                    .upload(id, file, (evt) => {
+                    progress((evt.loaded / evt.total) * 100);
+                })
+                    .then((response) => {
+                    if (response.error) {
+                        reject(response.error);
+                        return;
+                    }
+                    // Put temp location into localstorage (used to update the img with data-tmpimg later on)
+                    const blobUri = window.URL.createObjectURL(fileBlob);
+                    sessionStorage.setItem(`tinymce__${blobUri}`, id);
+                    resolve(blobUri);
+                })
+                    .catch(reject)
+                    .finally(() => {
+                    progress(100);
+                    document.dispatchEvent(new CustomEvent('rte.file.uploaded', { composed: true, bubbles: true }));
+                });
+            });
+        });
+        const localize = new UmbLocalizationController(args.host);
+        __classPrivateFieldSet(this, _UmbTinyMceMediaPickerPlugin_temporaryFileRepository, new UmbTemporaryFileRepository(args.host), "f");
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
+            __classPrivateFieldSet(this, _UmbTinyMceMediaPickerPlugin_modalManager, instance, "f");
+        });
+        this.editor.ui.registry.addToggleButton('umbmediapicker', {
+            icon: 'image',
+            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();
+            },
+        });
+        // Register global options for the editor
+        this.editor.options.register('maxImageSize', { processor: 'number', default: 500 });
+        // Adjust Editor settings to allow pasting images
+        // but only if the umbmediapicker button is present
+        const toolbar = this.configuration?.getValueByAlias('toolbar');
+        if (toolbar?.includes('umbmediapicker')) {
+            this.editor.options.set('paste_data_images', true);
+            this.editor.options.set('automatic_uploads', false);
+            this.editor.options.set('images_upload_handler', __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_uploadImageHandler, "f"));
+            // This allows images to be pasted in & stored as Base64 until they get uploaded to server
+            this.editor.options.set('images_replace_blob_uris', true);
+            // Listen for SetContent to update images
+            this.editor.on('SetContent', async (e) => {
+                const content = e.content;
+                // Handle images that are pasted in
+                uploadBlobImages(this.editor, content);
+            });
+        }
+    }
+}
+_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();
+    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;
+        }
+    }
+    __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_instances, "m", _UmbTinyMceMediaPickerPlugin_showMediaPicker).call(this, currentTarget);
+}, _UmbTinyMceMediaPickerPlugin_showMediaPicker = async function _UmbTinyMceMediaPickerPlugin_showMediaPicker(currentTarget) {
+    /*
+    let startNodeId;
+    let startNodeIsVirtual;
+
+    if (!this.configuration?.getByAlias('startNodeId')) {
+        if (this.configuration?.getValueByAlias<boolean>('ignoreUserStartNodes') === true) {
+            startNodeId = -1;
+            startNodeIsVirtual = true;
+        } else {
+            startNodeId = this.#currentUser?.mediaStartNodeIds?.length !== 1 ? -1 : this.#currentUser?.mediaStartNodeIds[0];
+            startNodeIsVirtual = this.#currentUser?.mediaStartNodeIds?.length !== 1;
+        }
+    }
+    */
+    const modalHandler = __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_modalManager, "f")?.open(this, UMB_MEDIA_PICKER_MODAL, {
+        data: {
+            multiple: false,
+            //startNodeIsVirtual,
+        },
+        value: {
+            selection: currentTarget.udi ? [getGuidFromUdi(currentTarget.udi)] : [],
+        },
+    });
+    if (!modalHandler)
+        return;
+    const { selection } = await modalHandler.onSubmit().catch(() => ({ selection: undefined }));
+    if (!selection?.length)
+        return;
+    __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_instances, "m", _UmbTinyMceMediaPickerPlugin_showMediaCaptionAltText).call(this, selection[0], currentTarget);
+    this.editor.dispatch('Change');
+}, _UmbTinyMceMediaPickerPlugin_showMediaCaptionAltText = async function _UmbTinyMceMediaPickerPlugin_showMediaCaptionAltText(mediaUnique, currentTarget) {
+    if (!mediaUnique)
+        return;
+    const modalHandler = __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_modalManager, "f")?.open(this, UMB_MEDIA_CAPTION_ALT_TEXT_MODAL, {
+        data: { mediaUnique },
+        value: {
+            url: '',
+            altText: currentTarget.altText,
+            caption: currentTarget.caption,
+        },
+    });
+    const mediaData = await modalHandler?.onSubmit().catch(() => null);
+    if (!mediaData)
+        return;
+    const media = {
+        altText: mediaData?.altText,
+        caption: mediaData?.caption,
+        url: mediaData?.url,
+        udi: 'umb://media/' + mediaUnique?.replace(/-/g, ''),
+    };
+    __classPrivateFieldGet(this, _UmbTinyMceMediaPickerPlugin_instances, "m", _UmbTinyMceMediaPickerPlugin_insertInEditor).call(this, media);
+}, _UmbTinyMceMediaPickerPlugin_insertInEditor = async function _UmbTinyMceMediaPickerPlugin_insertInEditor(media) {
+    if (!media)
+        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 img = {
+        alt: media.altText,
+        src: media.url ? media.url : 'nothing.jpg',
+        id: '__mcenew',
+        'data-udi': media.udi,
+        'data-caption': media.caption,
+    };
+    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;
+        }
+    }
+    else if (parentElement?.nodeName === 'FIGURE' && parentElement.parentElement) {
+        //if caption is removed, remove the figure element
+        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 = () => {
+            sizeImageInEditor(this.editor, imgElm, img.src);
+            this.editor.dispatch('Change');
+        };
+        // Check if image already is loaded.
+        if (imgElm.complete === true) {
+            onImageLoaded();
+        }
+        else {
+            imgElm.onload = onImageLoaded;
+        }
+    });
+};
+export default UmbTinyMceMediaPickerPlugin;

package/dist-cms/plugins/tiny-mce-multi-url-picker.plugin.d.ts

@@ -0,0 +1,8 @@
+import { UmbTinyMcePluginBase } from '../components/input-tiny-mce/tiny-mce-plugin.js';
+import type { TinyMcePluginArguments } from '../components/input-tiny-mce/tiny-mce-plugin.js';
+export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase {
+    #private;
+    constructor(args: TinyMcePluginArguments);
+    showDialog(): Promise<void>;
+}
+//# sourceMappingURL=tiny-mce-multi-url-picker.plugin.d.ts.map

package/dist-cms/plugins/tiny-mce-multi-url-picker.plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiny-mce-multi-url-picker.plugin.d.ts","sourceRoot":"","sources":["../../src/plugins/tiny-mce-multi-url-picker.plugin.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iDAAiD,CAAC;AAEvF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AAiB9F,MAAM,CAAC,OAAO,OAAO,8BAA+B,SAAQ,oBAAoB;;gBAKnE,IAAI,EAAE,sBAAsB;IA0BlC,UAAU;CAmKhB"}

package/dist-cms/plugins/tiny-mce-multi-url-picker.plugin.js

@@ -0,0 +1,172 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    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 __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _UmbTinyMceMultiUrlPickerPlugin_instances, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, _UmbTinyMceMultiUrlPickerPlugin_openLinkPicker, _UmbTinyMceMultiUrlPickerPlugin_createElemAttributes, _UmbTinyMceMultiUrlPickerPlugin_insertLink, _UmbTinyMceMultiUrlPickerPlugin_updateLink;
+import { umbOpenModal } from '@umbraco-cms/backoffice/modal';
+import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
+import { UmbTinyMcePluginBase } from '../components/input-tiny-mce/tiny-mce-plugin.js';
+import { UMB_LINK_PICKER_MODAL } from '@umbraco-cms/backoffice/multi-url-picker';
+class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase {
+    constructor(args) {
+        super(args);
+        _UmbTinyMceMultiUrlPickerPlugin_instances.add(this);
+        _UmbTinyMceMultiUrlPickerPlugin_linkPickerData.set(this, void 0);
+        _UmbTinyMceMultiUrlPickerPlugin_anchorElement.set(this, void 0);
+        const localize = new UmbLocalizationController(args.host);
+        this.editor.ui.registry.addToggleButton('link', {
+            icon: 'link',
+            tooltip: localize.term('general_addEditLink'),
+            onAction: () => this.showDialog(),
+            onSetup: (api) => {
+                const changed = this.editor.selection.selectorChangedWithUnbind('a', (state) => api.setActive(state));
+                return () => changed.unbind();
+            },
+        });
+        this.editor.ui.registry.addToggleButton('unlink', {
+            icon: 'unlink',
+            tooltip: localize.term('general_removeLink'),
+            onAction: () => args.editor.execCommand('unlink'),
+            onSetup: (api) => {
+                const changed = this.editor.selection.selectorChangedWithUnbind('a', (state) => api.setActive(state));
+                return () => changed.unbind();
+            },
+        });
+    }
+    async showDialog() {
+        const selectedElm = this.editor.selection.getNode();
+        __classPrivateFieldSet(this, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, this.editor.dom.getParent(selectedElm, 'a[href]'), "f");
+        if (!__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, "f")) {
+            __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_instances, "m", _UmbTinyMceMultiUrlPickerPlugin_openLinkPicker).call(this, { name: this.editor.selection.getContent({ format: 'text' }) });
+            return;
+        }
+        let url = __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, "f").getAttribute('href') ?? __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, "f").href ?? '';
+        const queryString = __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, "f").getAttribute('data-anchor') ?? '';
+        if (queryString && url.endsWith(queryString)) {
+            url = url.substring(0, url.indexOf(queryString));
+        }
+        const currentTarget = {
+            name: __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, "f").title || __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, "f").textContent,
+            target: __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, "f").target,
+            queryString: queryString,
+            type: __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, "f").type ?? 'external',
+            unique: url.includes('localLink:') ? url.substring(url.indexOf(':') + 1, url.indexOf('}')) : null,
+            url: url,
+        };
+        __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_instances, "m", _UmbTinyMceMultiUrlPickerPlugin_openLinkPicker).call(this, currentTarget);
+    }
+}
+_UmbTinyMceMultiUrlPickerPlugin_linkPickerData = new WeakMap(), _UmbTinyMceMultiUrlPickerPlugin_anchorElement = new WeakMap(), _UmbTinyMceMultiUrlPickerPlugin_instances = new WeakSet(), _UmbTinyMceMultiUrlPickerPlugin_openLinkPicker = async function _UmbTinyMceMultiUrlPickerPlugin_openLinkPicker(currentTarget) {
+    const linkPickerData = await umbOpenModal(this, UMB_LINK_PICKER_MODAL, {
+        data: {
+            config: {},
+            index: null,
+            isNew: currentTarget?.url === undefined,
+        },
+        value: {
+            link: currentTarget ?? {},
+        },
+    }).catch(() => undefined);
+    if (!linkPickerData)
+        return;
+    // TODO: This is a workaround for the issue where the link picker modal is returning a frozen object, and we need to extract the link into smaller parts to avoid the frozen object issue.
+    __classPrivateFieldSet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, { link: { ...linkPickerData.link } }, "f");
+    __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_instances, "m", _UmbTinyMceMultiUrlPickerPlugin_updateLink).call(this);
+}, _UmbTinyMceMultiUrlPickerPlugin_createElemAttributes = function _UmbTinyMceMultiUrlPickerPlugin_createElemAttributes() {
+    const link = __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link;
+    const anchor = {
+        href: link.url ?? '',
+        title: link.name ?? link.url ?? '',
+        target: link.target,
+        type: link.type ?? 'external',
+        rel: link.target === '_blank' ? 'noopener' : null,
+    };
+    if (link.queryString) {
+        anchor['data-anchor'] = link.queryString;
+        if (link.queryString.startsWith('?')) {
+            anchor.href += !anchor.href ? '/' + link.queryString : link.queryString;
+        }
+        else if (link.queryString.startsWith('#')) {
+            anchor.href += link.queryString;
+        }
+    }
+    return anchor;
+}, _UmbTinyMceMultiUrlPickerPlugin_insertLink = function _UmbTinyMceMultiUrlPickerPlugin_insertLink() {
+    if (__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, "f")) {
+        this.editor.dom.setAttribs(__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, "f"), __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_instances, "m", _UmbTinyMceMultiUrlPickerPlugin_createElemAttributes).call(this));
+        this.editor.selection.select(__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_anchorElement, "f"));
+        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, __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_instances, "m", _UmbTinyMceMultiUrlPickerPlugin_createElemAttributes).call(this));
+        return;
+    }
+    // Using the target url as a fallback, as href might be confusing with a local link
+    const linkContent = typeof __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.name !== 'undefined' && __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.name !== ''
+        ? __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.name
+        : __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.url;
+    // only insert if link has content
+    if (linkContent) {
+        const domElement = this.editor.dom.createHTML('a', __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_instances, "m", _UmbTinyMceMultiUrlPickerPlugin_createElemAttributes).call(this), linkContent);
+        this.editor.execCommand('mceInsertContent', false, domElement);
+    }
+}, _UmbTinyMceMultiUrlPickerPlugin_updateLink = function _UmbTinyMceMultiUrlPickerPlugin_updateLink() {
+    // if an anchor exists, check that it is appropriately prefixed
+    if (__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.queryString &&
+        !__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.queryString.startsWith('?') &&
+        !__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.queryString.startsWith('#')) {
+        __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.queryString =
+            (__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.queryString.startsWith('=') ? '#' : '?') + __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").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 (__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f") && !__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.queryString) {
+        const urlParts = __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.url?.split(/(#|\?)/);
+        if (urlParts?.length === 3) {
+            __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.url = urlParts[0];
+            __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.queryString = urlParts[1] + urlParts[2];
+        }
+    }
+    if (!__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.url &&
+        !__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.queryString &&
+        !__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.unique) {
+        this.editor.execCommand('unlink');
+        return;
+    }
+    //if we have an id, it must be a locallink:id
+    if (__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.unique) {
+        __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.url = '/{localLink:' + __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.unique + '}';
+        __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_instances, "m", _UmbTinyMceMultiUrlPickerPlugin_insertLink).call(this);
+        return;
+    }
+    if (!__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.url) {
+        __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.url = '';
+    }
+    // Is email and not //user@domain.com and protocol (e.g. mailto:, sip:) is not specified
+    if (__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.url.includes('@') &&
+        !__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.url.includes('//') &&
+        !__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.url.includes(':')) {
+        // assume it's a mailto link
+        __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.url = 'mailto:' + __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.url;
+        __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_instances, "m", _UmbTinyMceMultiUrlPickerPlugin_insertLink).call(this);
+        return;
+    }
+    // Is www. prefixed
+    if (/^\s*www\./i.test(__classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f")?.link.url)) {
+        __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.url = 'http://' + __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_linkPickerData, "f").link.url;
+    }
+    __classPrivateFieldGet(this, _UmbTinyMceMultiUrlPickerPlugin_instances, "m", _UmbTinyMceMultiUrlPickerPlugin_insertLink).call(this);
+};
+export default UmbTinyMceMultiUrlPickerPlugin;

package/dist-cms/plugins/tinymce-plugin.extension.d.ts

@@ -0,0 +1,70 @@
+import type { ManifestApi } from '@umbraco-cms/backoffice/extension-api';
+import type { RawEditorOptions } from '@umbraco-cms/backoffice/external/tinymce';
+import type { UmbTinyMcePluginBase } from '../components/input-tiny-mce/tiny-mce-plugin.js';
+export interface MetaTinyMcePlugin {
+    /**
+     * If the plugin adds toolbar buttons, this property can be used to configure the buttons.
+     * This configuration will be used on the Rich Text Editor configuration page.
+     */
+    plugins?: string[];
+    /**
+     * If the plugin adds toolbar buttons, this property can be used to configure the buttons.
+     * This configuration will be used on the Rich Text Editor configuration page.
+     */
+    toolbar?: Array<{
+        /**
+         * The alias of the toolbar button that will be configured in the TinyMCE editor.
+         * @see [TinyMCE Toolbar](https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/) for more information.
+         */
+        alias: string;
+        /**
+         * The label of the option shown on the Rich Text Editor configuration page.
+         */
+        label: string;
+        /**
+         * The icon shown on the Rich Text Editor configuration page. The icon has to be a part of TinyMCE's icon set.
+         * @optional
+         * @see [TinyMCE Icon Set](https://www.tiny.cloud/docs/tinymce/6/editor-icon-identifiers/) for available default icons.
+         */
+        icon?: string;
+        /**
+         * If this is a TinyMCE plugin that can be enabled/disabled
+         */
+        isplugin?: boolean;
+        /**
+         * Name of the plugin this is a part of (links to the plugin for property editor UI)
+         */
+        pluginAlias?: string;
+    }>;
+    /**
+     * @title Sets the default configuration for the TinyMCE editor.
+     * @description This configuration will be used when the editor is initialized. See the [TinyMCE Configuration](https://www.tiny.cloud/docs/configure/) for more information.
+     * @optional
+     * @TJS-type object
+     * @examples [
+     * {
+     *   "plugins": "wordcount",
+     *   "statusbar": true
+     * }
+     * ]
+     */
+    config?: RawEditorOptions;
+}
+/**
+ * The manifest for a TinyMCE plugin.
+ * The plugin will be loaded into the TinyMCE editor.
+ * A plugin can add things like buttons, menu items, context menu items, etc. through the TinyMCE API.
+ * A plugin can also add custom commands to the editor.
+ * A plugin can also modify the behavior of the editor.
+ * @see [TinyMCE Plugin](https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.plugin/) for more information.
+ */
+export interface ManifestTinyMcePlugin extends ManifestApi<UmbTinyMcePluginBase> {
+    type: 'tinyMcePlugin';
+    meta?: MetaTinyMcePlugin;
+}
+declare global {
+    interface UmbExtensionManifestMap {
+        umbTinyMcePlugin: ManifestTinyMcePlugin;
+    }
+}
+//# sourceMappingURL=tinymce-plugin.extension.d.ts.map

package/dist-cms/plugins/tinymce-plugin.extension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinymce-plugin.extension.d.ts","sourceRoot":"","sources":["../../src/plugins/tinymce-plugin.extension.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iDAAiD,CAAC;AAE5F,MAAM,WAAW,iBAAiB;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;QACf;;;WAGG;QACH,KAAK,EAAE,MAAM,CAAC;QAEd;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QAEd;;;;WAIG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QAEd;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QAEnB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IAEH;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW,CAAC,oBAAoB,CAAC;IAC/E,IAAI,EAAE,eAAe,CAAC;IACtB,IAAI,CAAC,EAAE,iBAAiB,CAAC;CACzB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,uBAAuB;QAChC,gBAAgB,EAAE,qBAAqB,CAAC;KACxC;CACD"}

package/dist-cms/plugins/tinymce-plugin.extension.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/plugins/types.d.ts

@@ -0,0 +1,2 @@
+export type * from './tinymce-plugin.extension.js';
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/plugins/types.ts"],"names":[],"mappings":"AAAA,mBAAmB,+BAA+B,CAAC"}

package/dist-cms/plugins/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,23 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbPropertyEditorUiElement, UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+/**
+ * @element umb-property-editor-ui-tiny-mce-config-editor
+ */
+export declare class UmbPropertyEditorUITinyMceConfigEditorElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
+    set value(value: JSON | null);
+    get value(): JSON;
+    config?: UmbPropertyEditorConfigCollection;
+    private _customConfig;
+    protected firstUpdated(_changedProperties: PropertyValueMap<unknown>): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export default UmbPropertyEditorUITinyMceConfigEditorElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-property-editor-ui-tiny-mce-config-editor': UmbPropertyEditorUITinyMceConfigEditorElement;
+    }
+}
+//# sourceMappingURL=property-editor-ui-tiny-mce-config-editor.element.d.ts.map

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

@@ -0,0 +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"}