@webiny/app-admin 0.0.0-mt-2 → 0.0.0-unstable.085ff6572f

package/components/RichTextEditor/tools/image/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Ui","api","config","onSelectFile","readOnly","nodes","wrapper","make","CSS","baseClass","imageContainer","fileButton","createFileButton","imageEl","undefined","caption","input","contentEditable","dataset","captionPlaceholder","appendChild","styles","block","button","toolData","file","Object","keys","length","toggleStatus","status","EMPTY","innerHTML","i18n","t","addEventListener","url","tag","test","attributes","src","eventName","autoplay","loop","muted","playsinline","FILLED","text","statusType","prototype","hasOwnProperty","call","newStatus","classList","toggle","tuneName","tagName","classNames","el","document","createElement","Array","isArray","add","attrName"],"sources":["ui.ts"],"sourcesContent":["import { API } from \"@editorjs/editorjs\";\nimport { ImageToolConfig, ImageToolData } from \"./types\";\n\ninterface OnSelectFileCallable {\n    (): void;\n}\ninterface UiStatus {\n    EMPTY: \"empty\";\n    FILLED: \"filled\";\n    [key: string]: string;\n}\ninterface UiParams {\n    api: API;\n    config: ImageToolConfig;\n    onSelectFile: OnSelectFileCallable;\n    readOnly: boolean;\n}\n/**\n * Class for working with UI:\n *  - rendering base structure\n *  - show/hide preview\n *  - apply tune view\n */\nexport default class Ui {\n    private api: API;\n    private config: ImageToolConfig;\n    private readonly readOnly: boolean;\n    private readonly onSelectFile: OnSelectFileCallable;\n\n    public readonly nodes: {\n        wrapper: HTMLElement;\n        imageContainer: HTMLElement;\n        fileButton: HTMLElement;\n        imageEl?: HTMLElement;\n        caption: HTMLElement;\n    };\n\n    /**\n     * @param ui - image tool Ui module\n     * @param ui.api - Editor.js API\n     * @param ui.config - user config\n     * @param ui.onSelectFile - callback for clicks on Select file button\n     * @param ui.readOnly - read-only mode flag\n     */\n    constructor({ api, config, onSelectFile, readOnly }: UiParams) {\n        this.api = api;\n        this.config = config;\n        this.onSelectFile = onSelectFile;\n        this.readOnly = readOnly;\n        this.nodes = {\n            wrapper: make(\"div\", [this.CSS.baseClass, this.CSS.wrapper]),\n            imageContainer: make(\"div\", [this.CSS.imageContainer]),\n            fileButton: this.createFileButton(),\n            imageEl: undefined,\n            caption: make(\"div\", [this.CSS.input, this.CSS.caption], {\n                contentEditable: !this.readOnly\n            })\n        };\n\n        /**\n         * Create base structure\n         *  <wrapper>\n         *    <image-container/>\n         *    <caption />\n         *  </wrapper>\n         */\n        this.nodes.caption.dataset[\"placeholder\"] = this.config.captionPlaceholder;\n        this.nodes.wrapper.appendChild(this.nodes.imageContainer);\n        this.nodes.wrapper.appendChild(this.nodes.caption);\n        this.nodes.wrapper.appendChild(this.nodes.fileButton);\n    }\n\n    /**\n     * CSS classes\n     *\n     * @returns {object}\n     */\n    get CSS() {\n        return {\n            baseClass: this.api.styles.block,\n            input: this.api.styles.input,\n            button: this.api.styles.button,\n\n            /**\n             * Tool's classes\n             */\n            wrapper: \"image-tool\",\n            imageContainer: \"image-tool__image\",\n            imageEl: \"image-tool__image-picture\",\n            caption: \"image-tool__caption\"\n        };\n    }\n\n    /**\n     * Ui statuses:\n     * - empty\n     * - filled\n     *\n     * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}\n     */\n    static get status(): UiStatus {\n        return {\n            EMPTY: \"empty\",\n            FILLED: \"filled\"\n        };\n    }\n\n    /**\n     * Renders tool UI\n     *\n     * @param {ImageToolData} toolData - saved tool data\n     * @returns {Element}\n     */\n    render(toolData: ImageToolData) {\n        if (!toolData.file || Object.keys(toolData.file).length === 0) {\n            this.toggleStatus(Ui.status.EMPTY);\n        }\n\n        return this.nodes.wrapper;\n    }\n\n    /**\n     * Creates upload-file button\n     *\n     * @returns {Element}\n     */\n    createFileButton() {\n        const button = make(\"div\", [this.CSS.button]);\n\n        button.innerHTML = this.api.i18n.t(\"Select an Image\");\n\n        button.addEventListener(\"click\", () => {\n            this.onSelectFile();\n        });\n\n        return button;\n    }\n\n    /**\n     * Shows an image\n     *\n     * @param {string} url - image source\n     * @returns {void}\n     */\n    public fillImage(url: string): void {\n        /**\n         * Check for a source extension to compose element correctly: video tag for mp4, img — for others\n         */\n        const tag = /\\.mp4$/.test(url) ? \"VIDEO\" : \"IMG\";\n\n        const attributes: any = {\n            src: url\n        };\n\n        /**\n         * We use eventName variable because IMG and VIDEO tags have different event to be called on source load\n         * - IMG: load\n         * - VIDEO: loadeddata\n         *\n         * @type {string}\n         */\n        let eventName = \"load\";\n\n        /**\n         * Update attributes and eventName if source is a mp4 video\n         */\n        if (tag === \"VIDEO\") {\n            /**\n             * Add attributes for playing muted mp4 as a gif\n             *\n             * @type {boolean}\n             */\n            attributes.autoplay = true;\n            attributes.loop = true;\n            attributes.muted = true;\n            attributes.playsinline = true;\n\n            /**\n             * Change event to be listened\n             *\n             * @type {string}\n             */\n            eventName = \"loadeddata\";\n        }\n\n        /**\n         * Compose tag with defined attributes\n         *\n         * @type {Element}\n         */\n        this.nodes.imageEl = make(tag, this.CSS.imageEl, attributes);\n\n        /**\n         * Add load event listener\n         */\n        this.nodes.imageEl.addEventListener(eventName, () => {\n            this.toggleStatus(Ui.status.FILLED);\n        });\n\n        this.nodes.imageContainer.appendChild(this.nodes.imageEl);\n    }\n\n    /**\n     * Shows caption input\n     *\n     * @param {string} text - caption text\n     * @returns {void}\n     */\n    public fillCaption(text: string): void {\n        if (!this.nodes.caption) {\n            return;\n        }\n        this.nodes.caption.innerHTML = text;\n    }\n\n    /**\n     * Changes UI status\n     *\n     * @param {string} status - see {@link Ui.status} constants\n     * @returns {void}\n     */\n    public toggleStatus(status: string): void {\n        for (const statusType in Ui.status) {\n            if (Object.prototype.hasOwnProperty.call(Ui.status, statusType) === false) {\n                continue;\n            }\n            const newStatus = Ui.status[statusType];\n            this.nodes.wrapper.classList.toggle(\n                `${this.CSS.wrapper}--${newStatus}`,\n                status === newStatus\n            );\n        }\n    }\n\n    /**\n     * Apply visual representation of activated tune\n     *\n     * @param {string} tuneName - one of available tunes {@link Tunes.tunes}\n     * @param {boolean} status - true for enable, false for disable\n     * @returns {void}\n     */\n    public applyTune(tuneName: string, status: boolean) {\n        this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--${tuneName}`, status);\n    }\n}\n\n/**\n * Helper for making Elements with attributes\n *\n * @param  {string} tagName           - new Element tag name\n * @param  {Array|string} classNames  - list or name of CSS class\n * @param  {object} attributes        - any attributes\n * @returns {HTMLElement}\n */\nexport const make = function make(\n    tagName: string,\n    classNames: string[] | string | null = null,\n    attributes?: Record<string, string | number | boolean>\n): HTMLElement {\n    const el: HTMLElement = document.createElement(tagName);\n\n    if (Array.isArray(classNames)) {\n        el.classList.add(...classNames);\n    } else if (classNames) {\n        el.classList.add(classNames);\n    }\n\n    if (!attributes) {\n        return el;\n    }\n    for (const attrName in attributes) {\n        /**\n         * Unfortunately it is a problem to map attributes to element because element is complaining\n         * that attrName is a string, which cannot index the HTMLElement\n         */\n        (el as any)[attrName] = (attributes as any)[attrName];\n    }\n\n    return el;\n};\n"],"mappings":"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"}

package/components/RichTextEditor/tools/paragraph/index.d.ts

@@ -1,31 +1,34 @@
-import { API } from "@editorjs/editorjs";
+/// <reference types="react" />
+/// <reference types="web" />
+import { PasteEvent } from "@editorjs/editorjs";
 import { Alignment, TextAlign } from "../utils";
 /**
  * @typedef {object} ParagraphConfig
  * @property {string} placeholder - placeholder for the empty paragraph
  * @property {boolean} preserveBlank - Whether or not to keep blank paragraphs when saving editor data`
  */
-declare type ParagraphConfig = {
+interface ParagraphConfig {
     placeholder: string;
     preserveBlank: boolean;
     typography?: Typography;
-};
+}
 /**
  * @typedef {Object} ParagraphData
  * @description Tool's input and output data format
  * @property {String} text — Paragraph's content. Can include HTML tags: <a><b><i>
  */
-declare type ParagraphData = {
+interface ParagraphData {
     text: string;
     textAlign: TextAlign;
-};
-declare type Typography = {
+    className?: string;
+}
+interface Typography {
     [key: string]: {
         label: string;
         component: string;
         className: string;
     };
-};
+}
 interface ParagraphArgs {
     data: ParagraphData;
     config: ParagraphConfig;
@@ -33,17 +36,16 @@ interface ParagraphArgs {
     readOnly: boolean;
 }
 declare class Paragraph {
-    api: API;
-    readOnly: boolean;
-    _CSS: any;
-    _settings: any;
-    _data: any;
-    _element: any;
-    _placeholder: string;
-    _preserveBlank: boolean;
-    alignments: Alignment[];
-    settingsButtons: HTMLElement[];
-    typography: Typography;
+    private readonly api;
+    private readonly readOnly;
+    private readonly _CSS;
+    private _data;
+    private readonly _element;
+    private readonly _placeholder;
+    private readonly _preserveBlank;
+    private readonly alignments;
+    private readonly settingsButtons;
+    private readonly typography;
     /**
      * Render plugin`s main Element and fill it with saved data
      *
@@ -87,7 +89,7 @@ declare class Paragraph {
      * @returns {ParagraphData} Current data
      * @private
      */
-    get data(): any;
+    get data(): ParagraphData;
     /**
      * Store data in plugin:
      * - at the this._data property
@@ -96,7 +98,7 @@ declare class Paragraph {
      * @param {ParagraphData} data — data to set
      * @private
      */
-    set data(data: any);
+    set data(data: ParagraphData);
     /**
      * Used by Editor paste handling API.
      * Provides configuration to handle P tags.
@@ -127,7 +129,7 @@ declare class Paragraph {
      *
      * @param {KeyboardEvent} e - key up event
      */
-    onKeyUp(e: any): void;
+    onKeyUp(e: KeyboardEvent): void;
     /**
      * Create Tool's view
      * @return {HTMLElement}
@@ -136,14 +138,10 @@ declare class Paragraph {
     drawView(): HTMLElement;
     /**
      * Return Tool's view
-     *
-     * @returns {HTMLDivElement}
      */
-    render(): any;
+    render(): HTMLDivElement;
     /**
      * Create Block's settings block
-     *
-     * @returns {HTMLElement}
      */
     renderSettings(): HTMLElement;
     /**
@@ -152,7 +150,7 @@ declare class Paragraph {
      * @param {ParagraphData} data
      * @public
      */
-    merge(data: any): void;
+    merge(data: ParagraphData): void;
     /**
      * Validate Paragraph block data:
      * - check for emptiness
@@ -161,17 +159,17 @@ declare class Paragraph {
      * @returns {boolean} false if saved data is not correct, otherwise true
      * @public
      */
-    validate(savedData: any): boolean;
+    validate(savedData: ParagraphData): boolean;
     /**
      * Extract Tool's data from the view
      * @param {HTMLDivElement} toolsContent - Paragraph tools rendered view
      * @returns {ParagraphData} - saved data
      * @public
      */
-    save(toolsContent: any): {
-        text: any;
-        textAlign: TextAlign.START;
-        className: any;
+    save(toolsContent: HTMLElement): {
+        text: string;
+        textAlign: TextAlign;
+        className: string | undefined;
     };
     /**
      * Extract textAlign from className
@@ -179,19 +177,19 @@ declare class Paragraph {
      * @param {string} className - heading element className
      * @returns {TextAlign} textAlign
      */
-    getTextAlign(className: any): TextAlign.START;
+    getTextAlign(className: string): TextAlign;
     /**
      * On paste callback fired from Editor.
      *
      * @param {PasteEvent} event - event with pasted data
      */
-    onPaste(event: any): void;
+    onPaste(event: PasteEvent): void;
     /**
      * Callback for Block's settings buttons
      *
      * @param {number} alignment - level to set
      */
-    setAlignment(alignment: any): void;
+    setAlignment(alignment: Alignment): void;
     /**
      * Callback for Block's settings buttons
      *
@@ -206,6 +204,6 @@ declare class Paragraph {
      * @returns {HeaderData}
      * @private
      */
-    normalizeData(data: any): any;
+    normalizeData(data?: Partial<ParagraphData>): ParagraphData;
 }
 export default Paragraph;