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

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

@@ -0,0 +1,449 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 __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 _UmbInputTinyMceElement_instances, _UmbInputTinyMceElement_plugins, _UmbInputTinyMceElement_editorRef, _UmbInputTinyMceElement_stylesheetRepository, _UmbInputTinyMceElement_umbStylesheetRuleManager, _UmbInputTinyMceElement_readonly, _UmbInputTinyMceElement_loadEditor, _UmbInputTinyMceElement_loadPlugins, _UmbInputTinyMceElement_getTinyMceConfig, _UmbInputTinyMceElement_setTinyConfig, _UmbInputTinyMceElement_getLanguage, _UmbInputTinyMceElement_editorSetup, _UmbInputTinyMceElement_onInit, _UmbInputTinyMceElement_onChange;
+import { availableLanguages } from './input-tiny-mce.languages.js';
+import { defaultFallbackConfig, defaultPremiumPluginsList } from './input-tiny-mce.defaults.js';
+import { pastePreProcessHandler } from './input-tiny-mce.handlers.js';
+import { uriAttributeSanitizer } from './input-tiny-mce.sanitizer.js';
+import { UmbStylesheetRuleManager } from '../../stylesheets/stylesheet-rule-manager.js';
+import { css, customElement, html, property, query } from '@umbraco-cms/backoffice/external/lit';
+import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api';
+import { getProcessedImageUrl, umbDeepMerge } from '@umbraco-cms/backoffice/utils';
+import { renderEditor } from '@umbraco-cms/backoffice/external/tinymce';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { ImageCropModeModel } from '@umbraco-cms/backoffice/external/backend-api';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbStylesheetDetailRepository } from '@umbraco-cms/backoffice/stylesheet';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { TinyMceService } from '../../api/index.js';
+import { tryExecute } from '@umbraco-cms/backoffice/resources';
+// @ts-ignore
+import { umbHttpClient } from '@umbraco-cms/backoffice/http-client';
+/**
+ * Handles the resize event
+ * @param e
+ */
+async function onResize(e) {
+    const srcAttr = e.target.getAttribute('src');
+    if (!srcAttr) {
+        return;
+    }
+    const path = srcAttr.split('?')[0];
+    const resizedPath = await getProcessedImageUrl(path, {
+        width: e.width,
+        height: e.height,
+        mode: ImageCropModeModel.MAX,
+    });
+    e.target.setAttribute('data-mce-src', resizedPath);
+}
+let UmbInputTinyMceElement = class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, '') {
+    constructor() {
+        super(...arguments);
+        _UmbInputTinyMceElement_instances.add(this);
+        //#plugins: Array<ClassConstructor<UmbTinyMcePluginBase> | undefined> = [];
+        _UmbInputTinyMceElement_plugins.set(this, []);
+        _UmbInputTinyMceElement_editorRef.set(this, null);
+        _UmbInputTinyMceElement_stylesheetRepository.set(this, new UmbStylesheetDetailRepository(this));
+        _UmbInputTinyMceElement_umbStylesheetRuleManager.set(this, new UmbStylesheetRuleManager());
+        _UmbInputTinyMceElement_readonly.set(this, false);
+    }
+    getFormElement() {
+        return this._editorElement?.querySelector('iframe') ?? undefined;
+    }
+    set value(newValue) {
+        const newContent = typeof newValue === 'string' ? newValue : '';
+        super.value = newContent;
+        if (__classPrivateFieldGet(this, _UmbInputTinyMceElement_editorRef, "f") && __classPrivateFieldGet(this, _UmbInputTinyMceElement_editorRef, "f").getContent() != newContent) {
+            __classPrivateFieldGet(this, _UmbInputTinyMceElement_editorRef, "f").setContent(newContent);
+        }
+    }
+    get value() {
+        return super.value;
+    }
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    get readonly() {
+        return __classPrivateFieldGet(this, _UmbInputTinyMceElement_readonly, "f");
+    }
+    set readonly(value) {
+        __classPrivateFieldSet(this, _UmbInputTinyMceElement_readonly, value, "f");
+        const editor = this.getEditor();
+        const mode = value ? 'readonly' : 'design';
+        editor?.mode.set(mode);
+    }
+    getEditor() {
+        return __classPrivateFieldGet(this, _UmbInputTinyMceElement_editorRef, "f");
+    }
+    firstUpdated() {
+        __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_loadEditor).call(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        __classPrivateFieldGet(this, _UmbInputTinyMceElement_editorRef, "f")?.destroy();
+    }
+    async getFormatStyles(stylesheetPaths) {
+        if (!stylesheetPaths)
+            return [];
+        const formatStyles = [];
+        const promises = stylesheetPaths.map((path) => __classPrivateFieldGet(this, _UmbInputTinyMceElement_stylesheetRepository, "f")?.requestByUnique(path));
+        const stylesheetResponses = await Promise.all(promises);
+        stylesheetResponses.forEach(({ data }) => {
+            if (!data?.content)
+                return;
+            const rulesFromContent = __classPrivateFieldGet(this, _UmbInputTinyMceElement_umbStylesheetRuleManager, "f").extractRules(data.content);
+            rulesFromContent.forEach((rule) => {
+                const r = {
+                    title: rule.name,
+                };
+                if (!rule.selector)
+                    return;
+                if (rule.selector.startsWith('.')) {
+                    r.inline = 'span';
+                    r.classes = rule.selector.substring(1);
+                }
+                else if (rule.selector.startsWith('#')) {
+                    r.inline = 'span';
+                    r.attributes = { id: rule.selector.substring(1) };
+                }
+                else if (rule.selector.includes('.')) {
+                    const [block, ...classes] = rule.selector.split('.');
+                    r.block = block;
+                    r.classes = classes.join(' ').replace(/\./g, ' ');
+                }
+                else if (rule.selector.includes('#')) {
+                    const [block, id] = rule.selector.split('#');
+                    r.block = block;
+                    r.classes = id;
+                }
+                else {
+                    r.block = rule.selector;
+                }
+                formatStyles.push(r);
+            });
+        });
+        return formatStyles;
+    }
+    /**
+     * Nothing rendered by default - TinyMCE initialization creates
+     * a target div and binds the RTE to that element
+     */
+    render() {
+        return html `<div class="editor"></div>`;
+    }
+};
+_UmbInputTinyMceElement_plugins = new WeakMap();
+_UmbInputTinyMceElement_editorRef = new WeakMap();
+_UmbInputTinyMceElement_stylesheetRepository = new WeakMap();
+_UmbInputTinyMceElement_umbStylesheetRuleManager = new WeakMap();
+_UmbInputTinyMceElement_readonly = new WeakMap();
+_UmbInputTinyMceElement_instances = new WeakSet();
+_UmbInputTinyMceElement_loadEditor = async function _UmbInputTinyMceElement_loadEditor() {
+    this.observe(umbExtensionsRegistry.byType('tinyMcePlugin'), async (manifests) => {
+        __classPrivateFieldGet(this, _UmbInputTinyMceElement_plugins, "f").length = 0;
+        __classPrivateFieldSet(this, _UmbInputTinyMceElement_plugins, await __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_loadPlugins).call(this, manifests), "f");
+        //console.log('#plugins', [this.#plugins, manifests]);
+        let config = {};
+        manifests.forEach((manifest) => {
+            if (manifest.meta?.config) {
+                config = umbDeepMerge(manifest.meta.config, config);
+            }
+        });
+        __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_setTinyConfig).call(this, config);
+    });
+};
+_UmbInputTinyMceElement_loadPlugins = 
+/**
+ * Load all custom plugins - need to split loading and instantiating as these
+ * need the editor instance as a ctor argument. If we load them in the editor
+ * setup method, the asynchronous nature means the editor is loaded before
+ * the plugins are ready and so are not associated with the editor.
+ * @param manifests
+ */
+async function _UmbInputTinyMceElement_loadPlugins(manifests) {
+    const promises = [];
+    for (const manifest of manifests) {
+        if (manifest.js) {
+            promises.push(await loadManifestApi(manifest.js));
+        }
+        if (manifest.api) {
+            promises.push(await loadManifestApi(manifest.api));
+        }
+    }
+    return await Promise.all(promises); // await all together;
+};
+_UmbInputTinyMceElement_getTinyMceConfig = async function _UmbInputTinyMceElement_getTinyMceConfig() {
+    // @ts-ignore
+    const { data } = await tryExecute(this, TinyMceService.getConfig({ client: umbHttpClient }));
+    if (!data)
+        return;
+    return data;
+};
+_UmbInputTinyMceElement_setTinyConfig = async function _UmbInputTinyMceElement_setTinyConfig(additionalConfig) {
+    //console.log('#setTinyConfig start');
+    const dimensions = this.configuration?.getValueByAlias('dimensions');
+    const stylesheetPaths = this.configuration?.getValueByAlias('stylesheets') ?? [];
+    const styleFormats = await this.getFormatStyles(stylesheetPaths);
+    const preValueCustomConfig = this.configuration?.getValueByAlias('customConfig') ?? {};
+    // Map the stylesheets with server url
+    const stylesheets = stylesheetPaths?.map((stylesheetPath) => `/css${stylesheetPath.replace(/\\/g, '/')}`) ?? [];
+    stylesheets.push('/umbraco/backoffice/css/rte-content.css');
+    const appSettingsConfig = await __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_getTinyMceConfig).call(this);
+    let apiKey = 'no-origin';
+    let version = '6';
+    let url = '';
+    let excludeList = [];
+    if (appSettingsConfig) {
+        // @ts-ignore
+        apiKey = appSettingsConfig.richTextEditor?.cloudApiKey || 'no-origin';
+        if (appSettingsConfig.config?.apikey) {
+            apiKey = appSettingsConfig.config?.apikey;
+        }
+        version = appSettingsConfig.config?.tinyMceVersion || '6';
+        // @ts-ignore
+        if (apiKey && apiKey != 'no-origin') {
+            url = appSettingsConfig.config?.tinyMceUrl || `https://cdn.tiny.cloud/1/${apiKey}/tinymce/${version}/`;
+        }
+        if (Array.isArray(appSettingsConfig.config?.pluginsToExclude)) {
+            excludeList = appSettingsConfig.config?.pluginsToExclude;
+            if (!apiKey || apiKey == 'no-origin') {
+                // Remove pre-loaded premium plugins if no key present
+                excludeList = [...new Set([...excludeList, ...defaultPremiumPluginsList])];
+            }
+        }
+    }
+    //console.log('#setTinyConfig 1', [appSettingsConfig, this.configuration, additionalConfig]);
+    // create an object by merging the configuration onto the fallback config
+    const configurationOptions = {
+        ...defaultFallbackConfig,
+        height: dimensions?.height ?? defaultFallbackConfig.height,
+        width: dimensions?.width ?? defaultFallbackConfig.width,
+        content_css: stylesheets.length ? stylesheets : defaultFallbackConfig.content_css,
+        style_formats: styleFormats.length ? styleFormats : defaultFallbackConfig.style_formats,
+    };
+    // no auto resize when a fixed height is set
+    if (!configurationOptions.height) {
+        if (Array.isArray(configurationOptions.plugins) && configurationOptions.plugins.includes('autoresize')) {
+            configurationOptions.plugins.splice(configurationOptions.plugins.indexOf('autoresize'), 1);
+        }
+    }
+    // set the configured plugins if any, otherwise false
+    const plugins = this.configuration?.getValueByAlias('plugins');
+    if (plugins && plugins.length) {
+        if (typeof configurationOptions.plugins === 'string' || Array.isArray(configurationOptions.plugins)) {
+            configurationOptions.plugins = plugins.concat(configurationOptions.plugins);
+        }
+        else {
+            configurationOptions.plugins = plugins;
+        }
+    }
+    // Exclude plugins explicitly excluded by configuration
+    if (Array.isArray(configurationOptions.plugins)) {
+        configurationOptions.plugins = configurationOptions.plugins.filter((item) => !excludeList.includes(item));
+    }
+    // set the configured toolbar if any, otherwise false
+    const toolbar = this.configuration?.getValueByAlias('toolbar');
+    if (toolbar?.length) {
+        configurationOptions.toolbar = toolbar.join(' ');
+    }
+    else {
+        configurationOptions.toolbar = false;
+    }
+    // set the configured inline mode
+    const mode = this.configuration?.getValueByAlias('mode');
+    if (mode?.toLocaleLowerCase() === 'inline') {
+        configurationOptions.inline = true;
+    }
+    // set the maximum image size
+    const maxImageSize = this.configuration?.getValueByAlias('maxImageSize');
+    if (maxImageSize) {
+        configurationOptions.maxImageSize = maxImageSize;
+    }
+    //console.log('#setTinyConfig 2', [configurationOptions]);
+    // set the default values that will not be modified via configuration
+    let config = {
+        autoresize_bottom_margin: 10,
+        body_class: 'umb-rte',
+        contextMenu: false,
+        inline_boundaries_selector: 'a[href],code,.mce-annotation,.umb-embed-holder,.umb-macro-holder',
+        menubar: false,
+        paste_remove_styles_if_webkit: true,
+        paste_preprocess: pastePreProcessHandler,
+        relative_urls: false,
+        resize: false,
+        statusbar: false,
+        setup: (editor) => __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_editorSetup).call(this, editor),
+        target: this._editorElement,
+        paste_data_images: false,
+        language: __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_getLanguage).call(this),
+        promotion: false,
+        convert_unsafe_embeds: true, // [JOV] Workaround for CVE-2024-29881
+        readonly: __classPrivateFieldGet(this, _UmbInputTinyMceElement_readonly, "f"),
+        // Extend with configuration options
+        ...configurationOptions,
+    };
+    if (appSettingsConfig && url.length > 0) {
+        config.base_url = url;
+    }
+    // Extend with additional configuration options
+    if (additionalConfig) {
+        config = umbDeepMerge(additionalConfig, config);
+    }
+    if (appSettingsConfig) {
+        if (appSettingsConfig.richTextEditor) {
+            config = umbDeepMerge(appSettingsConfig.richTextEditor.customConfig, config);
+        }
+        if (appSettingsConfig.config) {
+            config = umbDeepMerge(appSettingsConfig.config.customConfig, config);
+        }
+    }
+    if (preValueCustomConfig) {
+        config = umbDeepMerge(preValueCustomConfig, config);
+    }
+    // Loop through plugins and call extendEditorConfig if it exists to allow plugins to
+    // setup some advanced config like javascript before the editor is initialized.
+    const promises = [];
+    for (const pluginClass of __classPrivateFieldGet(this, _UmbInputTinyMceElement_plugins, "f")) {
+        if (pluginClass) {
+            if (typeof pluginClass.extendEditorConfig === 'function') {
+                promises.push(await pluginClass.extendEditorConfig(config));
+            }
+        }
+    }
+    await Promise.all(promises); // await all together;
+    //console.log('#setTinyConfig before init', [config]);
+    __classPrivateFieldGet(this, _UmbInputTinyMceElement_editorRef, "f")?.destroy();
+    const editors = await renderEditor(config).catch((error) => {
+        console.error('Failed to render TinyMCE', error);
+        return [];
+    });
+    __classPrivateFieldSet(this, _UmbInputTinyMceElement_editorRef, editors.pop(), "f");
+    //	console.log('#setTinyConfig end');
+};
+_UmbInputTinyMceElement_getLanguage = function _UmbInputTinyMceElement_getLanguage() {
+    const localeId = this.localize.lang();
+    //try matching the language using full locale format
+    let languageMatch = availableLanguages.find((x) => localeId?.localeCompare(x) === 0);
+    //if no matches, try matching using only the language
+    if (!languageMatch) {
+        const localeParts = localeId?.split('_');
+        if (localeParts) {
+            languageMatch = availableLanguages.find((x) => x === localeParts[0]);
+        }
+    }
+    return languageMatch;
+};
+_UmbInputTinyMceElement_editorSetup = async function _UmbInputTinyMceElement_editorSetup(editor) {
+    //console.log('#editorSetup start');
+    editor.suffix = '.min';
+    // define keyboard shortcuts
+    editor.addShortcut('Ctrl+S', '', () => this.dispatchEvent(new CustomEvent('rte.shortcut.save', { composed: true, bubbles: true })));
+    editor.addShortcut('Ctrl+P', '', () => this.dispatchEvent(new CustomEvent('rte.shortcut.saveAndPublish', { composed: true, bubbles: true })));
+    // bind editor events
+    editor.on('init', () => __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_onInit).call(this, editor));
+    editor.on('Change', () => __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_onChange).call(this, editor.getContent()));
+    editor.on('Dirty', () => __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_onChange).call(this, editor.getContent()));
+    editor.on('Keyup', () => __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_onChange).call(this, editor.getContent()));
+    editor.on('focus', () => this.dispatchEvent(new CustomEvent('umb-rte-focus', { composed: true, bubbles: true })));
+    editor.on('blur', () => {
+        __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_onChange).call(this, editor.getContent());
+        this.dispatchEvent(new CustomEvent('umb-rte-blur', { composed: true, bubbles: true }));
+    });
+    editor.on('ObjectResized', (e) => {
+        onResize(e);
+        __classPrivateFieldGet(this, _UmbInputTinyMceElement_instances, "m", _UmbInputTinyMceElement_onChange).call(this, editor.getContent());
+    });
+    editor.on('SetContent', () => {
+        /**
+         * Prevent injecting arbitrary JavaScript execution in on-attributes.
+         *
+         */
+        const allNodes = Array.from(editor.dom.doc.getElementsByTagName('*'));
+        allNodes.forEach((node) => {
+            for (const attr of node.attributes) {
+                if (attr.name.startsWith('on')) {
+                    node.removeAttribute(attr.name);
+                }
+            }
+        });
+    });
+    // instantiate plugins to ensure they are available before setting up the editor.
+    // Plugins require a reference to the current editor as a param, so can not
+    // be instantiated until we have an editor
+    for (const plugin of __classPrivateFieldGet(this, _UmbInputTinyMceElement_plugins, "f")) {
+        if (plugin) {
+            // [v15]: This might be improved by changing to `createExtensionApi` and avoiding the `#loadPlugins` method altogether, but that would require a breaking change
+            // because that function sends the UmbControllerHost as the first argument, which is not the case here.
+            const instance = new plugin({ host: this, editor });
+            // [Jason]: Added this to allow for some initialization in the plugins before the TinyMCE editor is initialized
+            if (typeof instance.init === 'function') {
+                await instance.init(); // await only if async init exists
+            }
+        }
+    }
+    //console.log('#editorSetup end');
+};
+_UmbInputTinyMceElement_onInit = function _UmbInputTinyMceElement_onInit(editor) {
+    //enable browser based spell checking
+    editor.getBody().setAttribute('spellcheck', 'true');
+    uriAttributeSanitizer(editor);
+    editor.setContent(typeof this.value === 'string' ? this.value : '');
+};
+_UmbInputTinyMceElement_onChange = function _UmbInputTinyMceElement_onChange(value) {
+    if (this.value === value)
+        return;
+    this.value = value;
+    this.dispatchEvent(new UmbChangeEvent());
+};
+UmbInputTinyMceElement.styles = [
+    css `
+			.tox-tinymce {
+				position: relative;
+				min-height: 100px;
+				border-radius: 0;
+				border: var(--uui-input-border-width, 1px) solid var(--uui-input-border-color, var(--uui-color-border, #d8d7d9));
+			}
+
+			.tox-tinymce-fullscreen {
+				position: absolute;
+			}
+
+			/* FIXME: Remove this workaround when https://github.com/tinymce/tinymce/issues/6431 has been fixed */
+			.tox .tox-collection__item-label {
+				line-height: 1 !important;
+			}
+		`,
+];
+__decorate([
+    property({ attribute: false })
+], UmbInputTinyMceElement.prototype, "configuration", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbInputTinyMceElement.prototype, "readonly", null);
+__decorate([
+    query('.editor', true)
+], UmbInputTinyMceElement.prototype, "_editorElement", void 0);
+UmbInputTinyMceElement = __decorate([
+    customElement('umb-input-tiny-mce')
+], UmbInputTinyMceElement);
+export { UmbInputTinyMceElement };
+export default UmbInputTinyMceElement;

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

@@ -0,0 +1,3 @@
+import type { RawEditorOptions } from '@umbraco-cms/backoffice/external/tinymce';
+export declare const pastePreProcessHandler: RawEditorOptions['paste_preprocess'];
+//# sourceMappingURL=input-tiny-mce.handlers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-tiny-mce.handlers.d.ts","sourceRoot":"","sources":["../../../src/components/input-tiny-mce/input-tiny-mce.handlers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAEjF,eAAO,MAAM,sBAAsB,EAAE,gBAAgB,CAAC,kBAAkB,CAOvE,CAAC"}

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

@@ -0,0 +1,8 @@
+export const pastePreProcessHandler = (_editor, args) => {
+    // Remove spans
+    args.content = args.content.replace(/<\s*span[^>]*>(.*?)<\s*\/\s*span>/g, '$1');
+    // Convert b to strong.
+    args.content = args.content.replace(/<\s*b([^>]*)>(.*?)<\s*\/\s*b([^>]*)>/g, '<strong$1>$2</strong$3>');
+    // convert i to em
+    args.content = args.content.replace(/<\s*i([^>]*)>(.*?)<\s*\/\s*i([^>]*)>/g, '<em$1>$2</em$3>');
+};

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

@@ -0,0 +1,2 @@
+export declare const availableLanguages: string[];
+//# sourceMappingURL=input-tiny-mce.languages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-tiny-mce.languages.d.ts","sourceRoot":"","sources":["../../../src/components/input-tiny-mce/input-tiny-mce.languages.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,UA6E9B,CAAC"}

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

@@ -0,0 +1,78 @@
+export const availableLanguages = [
+    'ar',
+    'ar_SA',
+    'hy',
+    'az',
+    'eu',
+    'be',
+    'bn_BD',
+    'bs',
+    'bg_BG',
+    'ca',
+    'zh_CN',
+    'zh_TW',
+    'hr',
+    'cs',
+    'da',
+    'dv',
+    'nl',
+    'en_CA',
+    'en_GB',
+    'et',
+    'fo',
+    'fi',
+    'fr_FR',
+    'gd',
+    'gl',
+    'ka_GE',
+    'de',
+    'de_AT',
+    'el',
+    'he_IL',
+    'hi_IN',
+    'hu_HU',
+    'is_IS',
+    'id',
+    'it',
+    'ja',
+    'kab',
+    'kk',
+    'km_KH',
+    'ko_KR',
+    'ku',
+    'ku_IQ',
+    'lv',
+    'lt',
+    'lb',
+    'ml',
+    'ml_IN',
+    'mn_MN',
+    'nb_NO',
+    'fa',
+    'fa_IR',
+    'pl',
+    'pt_BR',
+    'pt_PT',
+    'ro',
+    'ru',
+    'sr',
+    'si_LK',
+    'sk',
+    'sl_SI',
+    'es',
+    'es_MX',
+    'sv_SE',
+    'tg',
+    'ta',
+    'ta_IN',
+    'tt',
+    'th_TH',
+    'tr',
+    'tr_TR',
+    'ug',
+    'uk',
+    'uk_UA',
+    'vi',
+    'vi_VN',
+    'cy',
+];

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

@@ -0,0 +1,9 @@
+import type { Editor } from '@umbraco-cms/backoffice/external/tinymce';
+/**
+ * Setup sanitization for preventing injecting arbitrary JavaScript execution in attributes:
+ * https://github.com/advisories/GHSA-w7jx-j77m-wp65
+ * https://github.com/advisories/GHSA-5vm8-hhgr-jcjp
+ * @param editor
+ */
+export declare const uriAttributeSanitizer: (editor: Editor) => void;
+//# sourceMappingURL=input-tiny-mce.sanitizer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-tiny-mce.sanitizer.d.ts","sourceRoot":"","sources":["../../../src/components/input-tiny-mce/input-tiny-mce.sanitizer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAEvE;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,QAAQ,MAAM,SA6CnD,CAAC"}

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

@@ -0,0 +1,47 @@
+/**
+ * Setup sanitization for preventing injecting arbitrary JavaScript execution in attributes:
+ * https://github.com/advisories/GHSA-w7jx-j77m-wp65
+ * https://github.com/advisories/GHSA-5vm8-hhgr-jcjp
+ * @param editor
+ */
+export const uriAttributeSanitizer = (editor) => {
+    const uriAttributesToSanitize = ['src', 'href', 'data', 'background', 'action', 'formaction', 'poster', 'xlink:href'];
+    const parseUri = (function () {
+        // Encapsulated JS logic.
+        const safeSvgDataUrlElements = ['img', 'video'];
+        const scriptUriRegExp = /((java|vb)script|mhtml):/i;
+        // eslint-disable-next-line no-control-regex
+        const trimRegExp = /[\s\u0000-\u001F]+/g;
+        const isInvalidUri = (uri, tagName) => {
+            if (/^data:image\//i.test(uri)) {
+                return safeSvgDataUrlElements.indexOf(tagName) !== -1 && /^data:image\/svg\+xml/i.test(uri);
+            }
+            else {
+                return /^data:/i.test(uri);
+            }
+        };
+        return function parseUri(uri, tagName) {
+            uri = uri.replace(trimRegExp, '');
+            uri = decodeURIComponent(uri);
+            if (scriptUriRegExp.test(uri)) {
+                return;
+            }
+            if (isInvalidUri(uri, tagName)) {
+                return;
+            }
+            return uri;
+        };
+    })();
+    editor.serializer.addAttributeFilter('uriAttributesToSanitize', function (nodes) {
+        nodes.forEach(function (node) {
+            if (!node.attributes)
+                return;
+            for (const attr of node.attributes) {
+                const attrName = attr.name.toLowerCase();
+                if (uriAttributesToSanitize.indexOf(attrName) !== -1) {
+                    attr.value = parseUri(attr.value, node.name) ?? '';
+                }
+            }
+        });
+    });
+};

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

@@ -0,0 +1,24 @@
+import type { UmbInputTinyMceElement } from './input-tiny-mce.element.js';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
+import type { Editor } from '@umbraco-cms/backoffice/external/tinymce';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { ClassConstructor } from '@umbraco-cms/backoffice/extension-api';
+export declare class UmbTinyMcePluginBase extends UmbControllerBase implements UmbApi, TinyMcePluginInterface {
+    editor: Editor;
+    configuration?: UmbPropertyEditorConfigCollection;
+    constructor(arg: TinyMcePluginArguments);
+    static extendEditorConfig(_config: any): Promise<void>;
+    init(): Promise<void>;
+}
+export type TinyMcePluginArguments = {
+    host: UmbInputTinyMceElement;
+    editor: Editor;
+};
+export interface TinyMcePluginInterface {
+    init(): Promise<void>;
+}
+export interface UmbTinyMcePluginClass extends ClassConstructor<UmbTinyMcePluginBase> {
+    extendEditorConfig?: (_config: any) => Promise<void>;
+}
+//# sourceMappingURL=tiny-mce-plugin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tiny-mce-plugin.d.ts","sourceRoot":"","sources":["../../../src/components/input-tiny-mce/tiny-mce-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,yCAAyC,CAAC;AACjG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAE9E,qBAAa,oBAAqB,SAAQ,iBAAkB,YAAW,MAAM,EAAE,sBAAsB;IACpG,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,iCAAiC,CAAC;gBAEtC,GAAG,EAAE,sBAAsB;WAO1B,kBAAkB,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;IAKtD,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;CAG3B;AAED,MAAM,MAAM,sBAAsB,GAAG;IACpC,IAAI,EAAE,sBAAsB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AACF,MAAM,WAAW,sBAAsB;IACtC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACtB;AACD,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACpF,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACrD"}

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

@@ -0,0 +1,16 @@
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+export class UmbTinyMcePluginBase extends UmbControllerBase {
+    constructor(arg) {
+        super(arg.host);
+        this.editor = arg.editor;
+        this.configuration = arg.host.configuration;
+    }
+    // Called before the editor is created
+    static async extendEditorConfig(_config) {
+        // No-op by default
+    }
+    // Default (empty) implementation so subclasses can override it
+    async init() {
+        // No-op by default
+    }
+}

package/dist-cms/components/manifests.d.ts

@@ -0,0 +1,2 @@
+export declare const manifests: Array<UmbExtensionManifest>;
+//# sourceMappingURL=manifests.d.ts.map