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

package/dist-cms/utils/index.d.ts

@@ -0,0 +1,26 @@
+import type { Editor } from '@umbraco-cms/backoffice/external/tinymce';
+/**
+ * Sizes an image in the editor
+ * @param editor
+ * @param imageDomElement
+ * @param imgUrl
+ */
+export declare function sizeImageInEditor(editor: Editor, imageDomElement: HTMLElement, imgUrl?: string): Promise<void>;
+/**
+ * Scales an image to the max size
+ * @param maxSize
+ * @param width
+ * @param height
+ */
+export declare function scaleToMaxSize(maxSize: number, width: number, height: number): {
+    width: number;
+    height: number;
+};
+/**
+ * Uploads blob images to the server
+ * @param editor
+ * @param newContent
+ */
+export declare function uploadBlobImages(editor: Editor, newContent?: string): Promise<void>;
+export { UmbStylesheetRuleManager } from '../stylesheets/stylesheet-rule-manager.js';
+//# sourceMappingURL=index.d.ts.map

package/dist-cms/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAEvE;;;;;GAKG;AACH,wBAAsB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,CAAC,EAAE,MAAM,iBAsBpG;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;EA4B5E;AAED;;;;GAIG;AACH,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,iBAqDzE;AAED,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC"}

package/dist-cms/utils/index.js

@@ -0,0 +1,108 @@
+// TODO => this is NOT a full reimplementation of the existing media helper service, currently
+// contains only functions referenced by the TinyMCE editor
+// TODO: This should not be done in this way, we need to split this into separate defined helper methods. This is also very specific to TinyMCE, so should be named that way. [NL]
+import { getProcessedImageUrl } from '@umbraco-cms/backoffice/utils';
+/**
+ * Sizes an image in the editor
+ * @param editor
+ * @param imageDomElement
+ * @param imgUrl
+ */
+export async function sizeImageInEditor(editor, imageDomElement, imgUrl) {
+    const size = editor.dom.getSize(imageDomElement);
+    const maxImageSize = editor.options.get('maxImageSize');
+    if (maxImageSize && maxImageSize > 0) {
+        const newSize = scaleToMaxSize(maxImageSize, size.w, size.h);
+        editor.dom.setAttribs(imageDomElement, { width: Math.round(newSize.width), height: Math.round(newSize.height) });
+        // Images inserted via Media Picker will have a URL we can use for ImageResizer QueryStrings
+        // Images pasted/dragged in are not persisted to media until saved & thus will need to be added
+        if (imgUrl) {
+            const resizedImgUrl = await getProcessedImageUrl(imgUrl, {
+                width: newSize.width,
+                height: newSize.height,
+            });
+            editor.dom.setAttrib(imageDomElement, 'data-mce-src', resizedImgUrl);
+        }
+        editor.execCommand('mceAutoResize', false);
+    }
+}
+/**
+ * Scales an image to the max size
+ * @param maxSize
+ * @param width
+ * @param height
+ */
+export function scaleToMaxSize(maxSize, width, height) {
+    const retval = { width, height };
+    const maxWidth = maxSize; // Max width for the image
+    const maxHeight = maxSize; // Max height for the image
+    let ratio = 0; // Used for aspect ratio
+    // Check if the current width is larger than the max
+    if (width > maxWidth) {
+        ratio = maxWidth / width; // get ratio for scaling image
+        retval.width = maxWidth;
+        retval.height = height * ratio;
+        height = height * ratio; // Reset height to match scaled image
+        width = width * ratio; // Reset width to match scaled image
+    }
+    // Check if current height is larger than max
+    if (height > maxHeight) {
+        ratio = maxHeight / height; // get ratio for scaling image
+        retval.height = maxHeight;
+        retval.width = width * ratio;
+        width = width * ratio; // Reset width to match scaled image
+    }
+    return retval;
+}
+/**
+ * Uploads blob images to the server
+ * @param editor
+ * @param newContent
+ */
+export async function uploadBlobImages(editor, newContent) {
+    const content = newContent ?? editor.getContent();
+    // Upload BLOB images (dragged/pasted ones)
+    // find src attribute where value starts with `blob:`
+    // search is case-insensitive and allows single or double quotes
+    if (content.search(/src=["']blob:.*?["']/gi) !== -1) {
+        const data = await editor.uploadImages();
+        // Once all images have been uploaded
+        data.forEach((item) => {
+            // Skip items that failed upload
+            if (item.status === false) {
+                return;
+            }
+            // Select img element
+            const img = item.element;
+            // Get img src
+            const imgSrc = img.getAttribute('src');
+            const tmpLocation = sessionStorage.getItem(`tinymce__${imgSrc}`);
+            // Select the img & add new attr which we can search for
+            // When its being persisted in RTE property editor
+            // To create a media item & delete this tmp one etc
+            editor.dom.setAttrib(img, 'data-tmpimg', tmpLocation);
+            // Resize the image to the max size configured
+            // NOTE: no imagesrc passed into func as the src is blob://...
+            // We will append ImageResizing Querystrings on perist to DB with node save
+            sizeImageInEditor(editor, img);
+        });
+        // Get all img where src starts with blob: AND does NOT have a data=tmpimg attribute
+        // This is most likely seen as a duplicate image that has already been uploaded
+        // editor.uploadImages() does not give us any indiciation that the image been uploaded already
+        const blobImageWithNoTmpImgAttribute = editor.dom.select('img[src^="blob:"]:not([data-tmpimg])');
+        //For each of these selected items
+        blobImageWithNoTmpImgAttribute.forEach((imageElement) => {
+            const blobSrcUri = editor.dom.getAttrib(imageElement, 'src');
+            // Find the same image uploaded (Should be in SessionStorage)
+            // May already exist in the editor as duplicate image
+            // OR added to the RTE, deleted & re-added again
+            // So lets fetch the tempurl out of sessionStorage for that blob URI item
+            const tmpLocation = sessionStorage.getItem(`tinymce__${blobSrcUri}`);
+            if (tmpLocation) {
+                sizeImageInEditor(editor, imageElement);
+                editor.dom.setAttrib(imageElement, 'data-tmpimg', tmpLocation);
+            }
+        });
+    }
+}
+export { UmbStylesheetRuleManager } from '../stylesheets/stylesheet-rule-manager.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tiny-mce-umbraco/backoffice",
-	"version": "16.0.0-rc2",
+	"version": "16.0.0-rc2.1",
 	"description": "This Umbraco CMS package enables access to the TinyMCE-based Rich Text Editor (RTE) in version 16 and above. It also supports the use of TinyMCE Premium plugins with a valid subscription. Additional features include streamlined configuration for RTE Data Types in Umbraco and enhanced settings that support direct JSON-based configuration via .NET (appsettings.config).",
 	"keywords": [
 		"umbraco",
@@ -13,12 +13,19 @@
 		"access": "public"
 	},
 	"type": "module",
+	"exports": {
+		".": null,
+		"./tiny-mce-umbraco": "./dist-cms/index.js"
+	},
 	"types": "types/index.d.ts",
-	"files": [ "dist" ],
+	"files": [
+		"dist-cms",
+		"README.md"
+	],
 	"scripts": {
 		"dev": "tsc && vite build --watch",
 		"build": "tsc && vite build",
-		"build:api": "tsc -p tsconfig.api.json && api-extractor run --verbose",
+		"build:api": "tsc -p tsconfig.api.json",
 		"pack:api": "npm pack",
 		"generate-client": "node scripts/generate-openapi.js https://localhost:44308/umbraco/swagger/tiny-mce/swagger.json"
 	},
@@ -29,7 +36,6 @@
 	"devDependencies": {
 		"@hey-api/client-fetch": "^0.10.0",
 		"@hey-api/openapi-ts": "^0.66.1",
-		"@microsoft/api-extractor": "^7.52.8",
 		"@rollup/plugin-json": "^6.1.0",
 		"@rollup/plugin-node-resolve": "^16.0.0",
 		"@rollup/plugin-replace": "^6.0.2",

package/dist/tiny-mce-umbraco.d.ts

@@ -1,252 +0,0 @@
-import type { ClassConstructor } from '@umbraco-cms/backoffice/extension-api';
-import type { Client } from '@hey-api/client-fetch';
-import { CSSResult } from 'lit';
-import { Editor } from 'tinymce';
-import type { ManifestApi } from '@umbraco-cms/backoffice/extension-api';
-import type { Options as Options_2 } from '@hey-api/client-fetch';
-import { RawEditorOptions } from 'tinymce';
-import { RequestResult } from '@hey-api/client-fetch';
-import type { TDataShape } from '@hey-api/client-fetch';
-import { TemplateResult } from 'lit-html';
-import { TinyMceConfigResponseModel as TinyMceConfigResponseModel_2 } from './types.gen';
-import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
-import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-import { UUIFormControlMixinElement } from '@umbraco-ui/uui-base';
-
-export declare const availableLanguages: string[];
-
-export declare type ClientOptions = {
-    baseUrl: 'https://localhost:44308' | (string & {});
-};
-
-export declare const defaultFallbackConfig: RawEditorOptions;
-
-export declare const defaultPremiumPluginsList: readonly ["a11ychecker", "advcode", "advtable", "advtemplate", "typography", "ai", "casechange", "checklist", "mediaembed", "export", "footnotes", "formatpainter", "mergetags", "pageembed", "powerpaste", "permanentpen", "tinymcespellchecker", "tableofcontents"];
-
-export declare type GetConfigData = {
-    body?: never;
-    path?: never;
-    query?: never;
-    url: '/umbraco/management/api/v1/tiny-mce/config';
-};
-
-export declare type GetConfigError = GetConfigErrors[keyof GetConfigErrors];
-
-export declare type GetConfigErrors = {
-    /**
-     * The resource is protected and requires an authentication token
-     */
-    401: unknown;
-    /**
-     * The authenticated user does not have access to this resource
-     */
-    403: unknown;
-    /**
-     * Not Found
-     */
-    404: ProblemDetails;
-};
-
-export declare type GetConfigResponse = GetConfigResponses[keyof GetConfigResponses];
-
-export declare type GetConfigResponses = {
-    /**
-     * OK
-     */
-    200: TinyMceConfigResponseModel;
-};
-
-/**
- * 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 declare interface ManifestTinyMcePlugin extends ManifestApi<UmbTinyMcePluginBase> {
-    type: 'tinyMcePlugin';
-    meta?: MetaTinyMcePlugin;
-}
-
-export declare 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;
-}
-
-export declare type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = Options_2<TData, ThrowOnError> & {
-    /**
-     * You can provide a client instance returned by `createClient()` instead of
-     * individual options. This might be also useful if you want to implement a
-     * custom client.
-     */
-    client?: Client;
-    /**
-     * You can pass arbitrary values through the `meta` object. This can be
-     * used to access values that aren't defined as part of the SDK function.
-     */
-    meta?: Record<string, unknown>;
-};
-
-export declare const pastePreProcessHandler: RawEditorOptions['paste_preprocess'];
-
-export declare type ProblemDetails = {
-    type?: string | null;
-    title?: string | null;
-    status?: number | null;
-    detail?: string | null;
-    instance?: string | null;
-    [key: string]: unknown | (string | null) | (string | null) | (number | null) | (string | null) | (string | null) | undefined;
-};
-
-export declare type RichTextEditorCommand = {
-    alias: string;
-    name: string;
-    mode: RichTextEditorCommandModeModel;
-};
-
-export declare enum RichTextEditorCommandModeModel {
-    INSERT = "Insert",
-    SELECTION = "Selection",
-    ALL = "All"
-}
-
-export declare type RichTextEditorSettings = {
-    commands: Array<RichTextEditorCommand>;
-    plugins: Array<string>;
-    customConfig: {
-        [key: string]: string;
-    };
-    validElements: string;
-    invalidElements: string;
-    cloudApiKey?: string | null;
-};
-
-export declare type TinyMceConfigResponseModel = {
-    richTextEditor?: RichTextEditorSettings | null;
-    config?: TinyMceSettings | null;
-};
-
-export declare type TinyMcePluginArguments = {
-    host: UmbInputTinyMceElement;
-    editor: Editor;
-};
-
-export declare interface TinyMcePluginInterface {
-    init(): Promise<void>;
-}
-
-export declare class TinyMceService {
-    static getConfig<ThrowOnError extends boolean = false>(options?: Options<GetConfigData, ThrowOnError>): RequestResult<TinyMceConfigResponseModel_2, unknown, ThrowOnError>;
-}
-
-export declare type TinyMceSettings = {
-    apikey: string;
-    tinyMceVersion: string;
-    tinyMceUrl: string;
-    openAiApikey: string;
-    pluginsToExclude: Array<string>;
-    customConfig: {};
-};
-
-export declare const UMB_BLOCK_ENTRY_WEB_COMPONENTS_ABSOLUTE_PATH = "@umbraco-cms/backoffice/block-rte";
-
-export declare const UMB_BLOCK_RTE_PROPERTY_EDITOR_UI_ALIAS = "Umb.PropertyEditorUi.TinyMCE";
-
-export declare class UmbInputTinyMceElement extends UmbInputTinyMceElement_base {
-    #private;
-    configuration?: UmbPropertyEditorConfigCollection;
-    protected getFormElement(): HTMLIFrameElement | undefined;
-    set value(newValue: FormDataEntryValue | FormData);
-    get value(): FormDataEntryValue | FormData;
-    /**
-     * 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(): boolean;
-    set readonly(value: boolean);
-    private readonly _editorElement?;
-    getEditor(): Editor | null | undefined;
-    firstUpdated(): void;
-    disconnectedCallback(): void;
-    getFormatStyles(stylesheetPaths: Array<string>): Promise<any[]>;
-    /**
-     * Nothing rendered by default - TinyMCE initialization creates
-     * a target div and binds the RTE to that element
-     */
-    render(): TemplateResult<1>;
-    static readonly styles: CSSResult[];
-}
-
-declare const UmbInputTinyMceElement_base: (new (...args: any[]) => UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
-
-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 declare interface UmbTinyMcePluginClass extends ClassConstructor<UmbTinyMcePluginBase> {
-    extendEditorConfig?: (_config: any) => Promise<void>;
-}
-
-/**
- * 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;
-
-export { }