@webiny/app-admin 0.0.0-unstable.e3f4727c56 → 0.0.0-unstable.eb196ccd2f

package/components/RichTextEditor/tools/paragraph/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Paragraph","data","config","api","readOnly","typography","_CSS","block","styles","settingsButton","settingsButtonActive","wrapper","onKeyUp","bind","_placeholder","placeholder","DEFAULT_PLACEHOLDER","_data","normalizeData","_element","drawView","_preserveBlank","preserveBlank","undefined","settingsButtons","alignments","ALIGNMENTS","text","innerHTML","forEach","alignment","name","textAlign","classList","add","remove","className","split","find","TextAlign","START","svg","ALIGNMENT_ICONS","start","e","code","textContent","div","document","createElement","contentEditable","dataset","i18n","t","addEventListener","holder","selectTypeButton","currentAlignment","setAlignment","appendChild","push","typographyForParagraph","Object","values","filter","item","component","input","option","Option","label","onclick","event","target","value","setTypographyClass","savedData","trim","toolsContent","getTextAlign","includes","detail","button","toggle","newData","export","import","br","tags","icon","title"],"sources":["index.ts"],"sourcesContent":["import { API, PasteEvent } from \"@editorjs/editorjs\";\nimport { Alignment, ALIGNMENTS, TextAlign, ALIGNMENT_ICONS } from \"../utils\";\nimport { HTMLPasteEventDetail } from \"@editorjs/editorjs/types/tools/paste-events\";\n\n/**\n * @typedef {object} ParagraphConfig\n * @property {string} placeholder - placeholder for the empty paragraph\n * @property {boolean} preserveBlank - Whether or not to keep blank paragraphs when saving editor data`\n */\ninterface ParagraphConfig {\n    placeholder: string;\n    preserveBlank: boolean;\n    typography?: Typography;\n}\n/**\n * @typedef {Object} ParagraphData\n * @description Tool's input and output data format\n * @property {String} text — Paragraph's content. Can include HTML tags: <a><b><i>\n */\ninterface ParagraphData {\n    text: string;\n    textAlign: TextAlign;\n    className?: string;\n}\n\ninterface Typography {\n    [key: string]: {\n        label: string;\n        component: string;\n        className: string;\n    };\n}\n\ninterface ParagraphArgs {\n    data: ParagraphData;\n    config: ParagraphConfig;\n    api: any;\n    readOnly: boolean;\n}\nclass Paragraph {\n    private readonly api: API;\n    private readonly readOnly: boolean;\n    private readonly _CSS: any;\n    // private readonly _settings: any;\n    private _data: ParagraphData;\n    private readonly _element: any;\n    private readonly _placeholder: string;\n    private readonly _preserveBlank: boolean;\n    private readonly alignments: Alignment[];\n    private readonly settingsButtons: HTMLElement[];\n    private readonly typography: Typography | null;\n\n    /**\n     * Render plugin`s main Element and fill it with saved data\n     *\n     * @param {object} params - constructor params\n     * @param {ParagraphData} params.data - previously saved data\n     * @param {ParagraphConfig} params.config - user config for Tool\n     * @param {object} params.api - editor.js api\n     * @param {boolean} readOnly - read only mode flag\n     */\n    public constructor({ data, config, api, readOnly }: ParagraphArgs) {\n        this.api = api;\n        this.readOnly = readOnly;\n        this.typography = config.typography || null;\n        this._CSS = {\n            block: this.api.styles.block,\n            settingsButton: this.api.styles.settingsButton,\n            settingsButtonActive: this.api.styles.settingsButtonActive,\n            wrapper: \"ce-paragraph\"\n        };\n\n        if (!this.readOnly) {\n            this.onKeyUp = this.onKeyUp.bind(this);\n        }\n\n        /**\n         * Placeholder for paragraph if it is first Block\n         * @type {string}\n         */\n        this._placeholder = config.placeholder ? config.placeholder : Paragraph.DEFAULT_PLACEHOLDER;\n        this._data = this.normalizeData(data);\n        this._element = this.drawView();\n        this._preserveBlank = config.preserveBlank !== undefined ? config.preserveBlank : false;\n        this.settingsButtons = [];\n        this.alignments = ALIGNMENTS;\n\n        // Call the `data` setter, to properly render the view element.\n        this.data = this._data;\n    }\n\n    /**\n     * Default placeholder for Paragraph Tool\n     *\n     * @return {string}\n     * @constructor\n     */\n    public static get DEFAULT_PLACEHOLDER(): string {\n        return \"\";\n    }\n\n    /**\n     * Enable Conversion Toolbar. Paragraph can be converted to/from other tools\n     */\n    public static get conversionConfig() {\n        return {\n            export: \"text\", // to convert Paragraph to other block, use 'text' property of saved data\n            import: \"text\" // to covert other block's exported string to Paragraph, fill 'text' property of tool data\n        };\n    }\n\n    /**\n     * Sanitizer rules\n     */\n    public static get sanitize() {\n        return {\n            text: {\n                br: true\n            }\n        };\n    }\n\n    /**\n     * Returns true to notify the core that read-only mode is supported\n     *\n     * @return {boolean}\n     */\n    public static get isReadOnlySupported(): boolean {\n        return true;\n    }\n\n    /**\n     * Get current Tools`s data\n     * @returns {ParagraphData} Current data\n     * @private\n     */\n    public get data(): ParagraphData {\n        const text = this._element.innerHTML;\n\n        // this._data.text = text;\n\n        return {\n            ...this._data,\n            text\n        };\n    }\n\n    /**\n     * Store data in plugin:\n     * - at the this._data property\n     * - at the HTML\n     *\n     * @param {ParagraphData} data — data to set\n     * @private\n     */\n    public set data(data: ParagraphData) {\n        this._data = data || ({} as ParagraphData);\n\n        this._element.innerHTML = this._data.text || \"\";\n\n        /**\n         * Add Alignment class\n         */\n        this.alignments.forEach(alignment => {\n            if (alignment.name === this._data.textAlign) {\n                this._element.classList.add(`ce-header-text--${alignment.name}`);\n            } else {\n                this._element.classList.remove(`ce-header-text--${alignment.name}`);\n            }\n        });\n\n        /**\n         * Add Typography class\n         */\n        if (this._data.className) {\n            this._element.classList.add(...this._data.className.split(\" \"));\n        }\n    }\n\n    /**\n     * Used by Editor paste handling API.\n     * Provides configuration to handle P tags.\n     *\n     * @returns {{tags: string[]}}\n     */\n    public static get pasteConfig() {\n        return {\n            tags: [\"P\"]\n        };\n    }\n\n    /**\n     * Icon and title for displaying at the Toolbox\n     *\n     * @return {{icon: string, title: string}}\n     */\n    public static get toolbox() {\n        return {\n            icon:\n                '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0.2 -0.3 9 11.4\" width=\"12\" height=\"14\">\\n' +\n                '  <path d=\"M0 2.77V.92A1 1 0 01.2.28C.35.1.56 0 .83 0h7.66c.28.01.48.1.63.28.14.17.21.38.21.64v1.85c0 .26-.08.48-.23.66-.15.17-.37.26-.66.26-.28 0-.5-.09-.64-.26a1 1 0 01-.21-.66V1.69H5.6v7.58h.5c.25 0 .45.08.6.23.17.16.25.35.25.6s-.08.45-.24.6a.87.87 0 01-.62.22H3.21a.87.87 0 01-.61-.22.78.78 0 01-.24-.6c0-.25.08-.44.24-.6a.85.85 0 01.61-.23h.5V1.7H1.73v1.08c0 .26-.08.48-.23.66-.15.17-.37.26-.66.26-.28 0-.5-.09-.64-.26A1 1 0 010 2.77z\"/>\\n' +\n                \"</svg>\",\n            title: \"Text\"\n        };\n    }\n\n    /**\n     * Get current alignment\n     *\n     * @returns {alignment}\n     */\n    public get currentAlignment(): Alignment {\n        let alignment = this.alignments.find(alignment => alignment.name === this._data.textAlign);\n\n        if (!alignment) {\n            alignment = { name: TextAlign.START, svg: ALIGNMENT_ICONS.start };\n        }\n\n        return alignment;\n    }\n\n    /**\n     * Check if text content is empty and set empty string to inner html.\n     * We need this because some browsers (e.g. Safari) insert <br> into empty contentEditable elements\n     *\n     * @param {KeyboardEvent} e - key up event\n     */\n    public onKeyUp(e: KeyboardEvent): void {\n        if (e.code !== \"Backspace\" && e.code !== \"Delete\") {\n            return;\n        }\n\n        const { textContent } = this._element;\n\n        if (textContent === \"\") {\n            this._element.innerHTML = \"\";\n        }\n    }\n\n    /**\n     * Create Tool's view\n     * @return {HTMLElement}\n     * @private\n     */\n    public drawView(): HTMLElement {\n        const div: HTMLDivElement = document.createElement(\"div\");\n        div.classList.add(this._CSS.wrapper, this._CSS.block);\n        // Add custom className to view.\n        if (this._data.className) {\n            div.classList.add(this._data.className);\n        }\n        div.contentEditable = \"false\";\n        div.dataset[\"placeholder\"] = this.api.i18n.t(this._placeholder);\n\n        if (!this.readOnly) {\n            div.contentEditable = \"true\";\n            div.addEventListener(\"keyup\", this.onKeyUp);\n        }\n\n        return div;\n    }\n\n    /**\n     * Return Tool's view\n     */\n    public render(): HTMLDivElement {\n        return this._element;\n    }\n\n    /**\n     * Create Block's settings block\n     */\n    public renderSettings(): HTMLElement {\n        const holder: HTMLDivElement = document.createElement(\"div\");\n\n        // Add alignment selectors\n        this.alignments.forEach(alignment => {\n            const selectTypeButton: HTMLSpanElement = document.createElement(\"span\");\n\n            selectTypeButton.classList.add(this._CSS.settingsButton);\n\n            /**\n             * Highlight current level button\n             */\n            if (this.currentAlignment.name === alignment.name) {\n                selectTypeButton.classList.add(this._CSS.settingsButtonActive);\n            }\n\n            /**\n             * Add SVG icon\n             */\n            selectTypeButton.innerHTML = alignment.svg;\n\n            /**\n             * Save alignment to its button\n             */\n            selectTypeButton.dataset[\"textAlign\"] = alignment.name;\n\n            /**\n             * Set up click handler\n             */\n            selectTypeButton.addEventListener(\"click\", () => {\n                this.setAlignment(alignment);\n            });\n\n            /**\n             * Append settings button to holder\n             */\n            holder.appendChild(selectTypeButton);\n\n            /**\n             * Save settings buttons\n             */\n            this.settingsButtons.push(selectTypeButton);\n        });\n\n        // Add `Typography` selector\n        if (this.typography) {\n            const typographyForParagraph = Object.values(this.typography).filter(\n                item => item.component === \"p\"\n            );\n\n            const selectTypeButton = document.createElement(\"SELECT\") as HTMLSelectElement;\n            // Add editor's default input style\n            selectTypeButton.classList.add(this.api.styles.input);\n            // Add typography options\n            typographyForParagraph.forEach(item => {\n                const option = new Option(item.label, item.className);\n\n                selectTypeButton.appendChild(option);\n            });\n            // Add \"onclick\" handler\n            selectTypeButton.onclick = event => {\n                const { value } = event.target as HTMLSelectElement;\n                this.setTypographyClass(value);\n            };\n\n            /**\n             * Append settings button to holder\n             */\n            holder.appendChild(selectTypeButton);\n\n            /**\n             * Save settings buttons\n             */\n            this.settingsButtons.push(selectTypeButton);\n        }\n\n        return holder;\n    }\n\n    /**\n     * Method that specified how to merge two Text blocks.\n     * Called by Editor.js by backspace at the beginning of the Block\n     * @param {ParagraphData} data\n     * @public\n     */\n    public merge(data: ParagraphData): void {\n        this.data = {\n            ...this.data,\n            text: this.data.text + data.text\n        };\n    }\n\n    /**\n     * Validate Paragraph block data:\n     * - check for emptiness\n     *\n     * @param {ParagraphData} savedData — data received after saving\n     * @returns {boolean} false if saved data is not correct, otherwise true\n     * @public\n     */\n    public validate(savedData: ParagraphData): boolean {\n        return !(savedData.text.trim() === \"\" && !this._preserveBlank);\n    }\n\n    /**\n     * Extract Tool's data from the view\n     * @param {HTMLDivElement} toolsContent - Paragraph tools rendered view\n     * @returns {ParagraphData} - saved data\n     * @public\n     */\n    public save(toolsContent: HTMLElement) {\n        return {\n            text: toolsContent.innerHTML,\n            textAlign: this.getTextAlign(toolsContent.className),\n            className: this.data.className\n        };\n    }\n\n    /**\n     * Extract textAlign from className\n     *\n     * @param {string} className - heading element className\n     * @returns {TextAlign} textAlign\n     */\n    public getTextAlign(className: string): TextAlign {\n        let textAlign = TextAlign.START;\n        // Match className with alignment\n        this.alignments.forEach(alignment => {\n            if (className.includes(`ce-header-text--${alignment.name}`)) {\n                textAlign = alignment.name;\n            }\n        });\n        return textAlign;\n    }\n\n    /**\n     * On paste callback fired from Editor.\n     *\n     * @param {PasteEvent} event - event with pasted data\n     */\n    public onPaste(event: PasteEvent): void {\n        const detail = event.detail as HTMLPasteEventDetail;\n        this.data = {\n            ...this.data,\n            text: detail.data.innerHTML\n        };\n    }\n\n    /**\n     * Callback for Block's settings buttons\n     *\n     * @param {number} alignment - level to set\n     */\n    public setAlignment(alignment: Alignment): void {\n        this.data = {\n            textAlign: alignment.name,\n            text: this.data.text\n        };\n\n        /**\n         * Highlight button by selected level\n         */\n        this.settingsButtons.forEach(button => {\n            button.classList.toggle(\n                this._CSS.settingsButtonActive,\n                button.dataset[\"textAlign\"] === alignment.name\n            );\n        });\n    }\n\n    /**\n     * Callback for Block's settings buttons\n     *\n     * @param {string} className - name of typography class\n     */\n    public setTypographyClass(className: string): void {\n        this.data = {\n            textAlign: this.data.textAlign,\n            text: this.data.text,\n            className: className\n        };\n    }\n\n    /**\n     * Normalize input data\n     *\n     * @param {HeaderData} data - saved data to process\n     *\n     * @returns {HeaderData}\n     * @private\n     */\n    public normalizeData(data?: Partial<ParagraphData>): ParagraphData {\n        const newData: Partial<ParagraphData> = {};\n\n        if (typeof data !== \"object\") {\n            data = {};\n        }\n\n        newData.text = data.text || \"\";\n        newData.textAlign = data.textAlign || TextAlign.START;\n        newData.className = data.className || \"\";\n\n        return newData as ParagraphData;\n    }\n}\n\nexport default Paragraph;\n"],"mappings":"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"}
+{"version":3,"names":["ALIGNMENTS","TextAlign","ALIGNMENT_ICONS","Paragraph","constructor","data","config","api","readOnly","typography","_CSS","block","styles","settingsButton","settingsButtonActive","wrapper","onKeyUp","bind","_placeholder","placeholder","DEFAULT_PLACEHOLDER","_data","normalizeData","_element","drawView","_preserveBlank","preserveBlank","undefined","settingsButtons","alignments","conversionConfig","export","import","sanitize","text","br","isReadOnlySupported","innerHTML","forEach","alignment","name","textAlign","classList","add","remove","className","split","pasteConfig","tags","toolbox","icon","title","currentAlignment","find","START","svg","start","e","code","textContent","div","document","createElement","contentEditable","dataset","i18n","t","addEventListener","render","renderSettings","holder","selectTypeButton","setAlignment","appendChild","push","typographyForParagraph","Object","values","filter","item","component","input","option","Option","label","onclick","event","value","target","setTypographyClass","merge","validate","savedData","trim","save","toolsContent","getTextAlign","includes","onPaste","detail","button","toggle","newData"],"sources":["index.ts"],"sourcesContent":["import type { API, PasteEvent } from \"@editorjs/editorjs\";\nimport type { Alignment } from \"../utils\";\nimport { ALIGNMENTS, TextAlign, ALIGNMENT_ICONS } from \"../utils\";\nimport type { HTMLPasteEventDetail } from \"@editorjs/editorjs/types/tools/paste-events\";\n\n/**\n * @typedef {object} ParagraphConfig\n * @property {string} placeholder - placeholder for the empty paragraph\n * @property {boolean} preserveBlank - Whether or not to keep blank paragraphs when saving editor data`\n */\ninterface ParagraphConfig {\n    placeholder: string;\n    preserveBlank: boolean;\n    typography?: Typography;\n}\n/**\n * @typedef {Object} ParagraphData\n * @description Tool's input and output data format\n * @property {String} text — Paragraph's content. Can include HTML tags: <a><b><i>\n */\ninterface ParagraphData {\n    text: string;\n    textAlign: TextAlign;\n    className?: string;\n}\n\ninterface Typography {\n    [key: string]: {\n        label: string;\n        component: string;\n        className: string;\n    };\n}\n\ninterface ParagraphArgs {\n    data: ParagraphData;\n    config: ParagraphConfig;\n    api: any;\n    readOnly: boolean;\n}\nclass Paragraph {\n    private readonly api: API;\n    private readonly readOnly: boolean;\n    private readonly _CSS: any;\n    // private readonly _settings: any;\n    private _data: ParagraphData;\n    private readonly _element: any;\n    private readonly _placeholder: string;\n    private readonly _preserveBlank: boolean;\n    private readonly alignments: Alignment[];\n    private readonly settingsButtons: HTMLElement[];\n    private readonly typography: Typography | null;\n\n    /**\n     * Render plugin`s main Element and fill it with saved data\n     *\n     * @param {object} params - constructor params\n     * @param {ParagraphData} params.data - previously saved data\n     * @param {ParagraphConfig} params.config - user config for Tool\n     * @param {object} params.api - editor.js api\n     * @param {boolean} readOnly - read only mode flag\n     */\n    public constructor({ data, config, api, readOnly }: ParagraphArgs) {\n        this.api = api;\n        this.readOnly = readOnly;\n        this.typography = config.typography || null;\n        this._CSS = {\n            block: this.api.styles.block,\n            settingsButton: this.api.styles.settingsButton,\n            settingsButtonActive: this.api.styles.settingsButtonActive,\n            wrapper: \"ce-paragraph\"\n        };\n\n        if (!this.readOnly) {\n            this.onKeyUp = this.onKeyUp.bind(this);\n        }\n\n        /**\n         * Placeholder for paragraph if it is first Block\n         * @type {string}\n         */\n        this._placeholder = config.placeholder ? config.placeholder : Paragraph.DEFAULT_PLACEHOLDER;\n        this._data = this.normalizeData(data);\n        this._element = this.drawView();\n        this._preserveBlank = config.preserveBlank !== undefined ? config.preserveBlank : false;\n        this.settingsButtons = [];\n        this.alignments = ALIGNMENTS;\n\n        // Call the `data` setter, to properly render the view element.\n        this.data = this._data;\n    }\n\n    /**\n     * Default placeholder for Paragraph Tool\n     *\n     * @return {string}\n     * @constructor\n     */\n    public static get DEFAULT_PLACEHOLDER(): string {\n        return \"\";\n    }\n\n    /**\n     * Enable Conversion Toolbar. Paragraph can be converted to/from other tools\n     */\n    public static get conversionConfig() {\n        return {\n            export: \"text\", // to convert Paragraph to other block, use 'text' property of saved data\n            import: \"text\" // to covert other block's exported string to Paragraph, fill 'text' property of tool data\n        };\n    }\n\n    /**\n     * Sanitizer rules\n     */\n    public static get sanitize() {\n        return {\n            text: {\n                br: true\n            }\n        };\n    }\n\n    /**\n     * Returns true to notify the core that read-only mode is supported\n     *\n     * @return {boolean}\n     */\n    public static get isReadOnlySupported(): boolean {\n        return true;\n    }\n\n    /**\n     * Get current Tools`s data\n     * @returns {ParagraphData} Current data\n     * @private\n     */\n    public get data(): ParagraphData {\n        const text = this._element.innerHTML;\n\n        // this._data.text = text;\n\n        return {\n            ...this._data,\n            text\n        };\n    }\n\n    /**\n     * Store data in plugin:\n     * - at the this._data property\n     * - at the HTML\n     *\n     * @param {ParagraphData} data — data to set\n     * @private\n     */\n    public set data(data: ParagraphData) {\n        this._data = data || ({} as ParagraphData);\n\n        this._element.innerHTML = this._data.text || \"\";\n\n        /**\n         * Add Alignment class\n         */\n        this.alignments.forEach(alignment => {\n            if (alignment.name === this._data.textAlign) {\n                this._element.classList.add(`ce-header-text--${alignment.name}`);\n            } else {\n                this._element.classList.remove(`ce-header-text--${alignment.name}`);\n            }\n        });\n\n        /**\n         * Add Typography class\n         */\n        if (this._data.className) {\n            this._element.classList.add(...this._data.className.split(\" \"));\n        }\n    }\n\n    /**\n     * Used by Editor paste handling API.\n     * Provides configuration to handle P tags.\n     *\n     * @returns {{tags: string[]}}\n     */\n    public static get pasteConfig() {\n        return {\n            tags: [\"P\"]\n        };\n    }\n\n    /**\n     * Icon and title for displaying at the Toolbox\n     *\n     * @return {{icon: string, title: string}}\n     */\n    public static get toolbox() {\n        return {\n            icon:\n                '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0.2 -0.3 9 11.4\" width=\"12\" height=\"14\">\\n' +\n                '  <path d=\"M0 2.77V.92A1 1 0 01.2.28C.35.1.56 0 .83 0h7.66c.28.01.48.1.63.28.14.17.21.38.21.64v1.85c0 .26-.08.48-.23.66-.15.17-.37.26-.66.26-.28 0-.5-.09-.64-.26a1 1 0 01-.21-.66V1.69H5.6v7.58h.5c.25 0 .45.08.6.23.17.16.25.35.25.6s-.08.45-.24.6a.87.87 0 01-.62.22H3.21a.87.87 0 01-.61-.22.78.78 0 01-.24-.6c0-.25.08-.44.24-.6a.85.85 0 01.61-.23h.5V1.7H1.73v1.08c0 .26-.08.48-.23.66-.15.17-.37.26-.66.26-.28 0-.5-.09-.64-.26A1 1 0 010 2.77z\"/>\\n' +\n                \"</svg>\",\n            title: \"Text\"\n        };\n    }\n\n    /**\n     * Get current alignment\n     *\n     * @returns {alignment}\n     */\n    public get currentAlignment(): Alignment {\n        let alignment = this.alignments.find(alignment => alignment.name === this._data.textAlign);\n\n        if (!alignment) {\n            alignment = { name: TextAlign.START, svg: ALIGNMENT_ICONS.start };\n        }\n\n        return alignment;\n    }\n\n    /**\n     * Check if text content is empty and set empty string to inner html.\n     * We need this because some browsers (e.g. Safari) insert <br> into empty contentEditable elements\n     *\n     * @param {KeyboardEvent} e - key up event\n     */\n    public onKeyUp(e: KeyboardEvent): void {\n        if (e.code !== \"Backspace\" && e.code !== \"Delete\") {\n            return;\n        }\n\n        const { textContent } = this._element;\n\n        if (textContent === \"\") {\n            this._element.innerHTML = \"\";\n        }\n    }\n\n    /**\n     * Create Tool's view\n     * @return {HTMLElement}\n     * @private\n     */\n    public drawView(): HTMLElement {\n        const div: HTMLDivElement = document.createElement(\"div\");\n        div.classList.add(this._CSS.wrapper, this._CSS.block);\n        // Add custom className to view.\n        if (this._data.className) {\n            div.classList.add(this._data.className);\n        }\n        div.contentEditable = \"false\";\n        div.dataset[\"placeholder\"] = this.api.i18n.t(this._placeholder);\n\n        if (!this.readOnly) {\n            div.contentEditable = \"true\";\n            div.addEventListener(\"keyup\", this.onKeyUp);\n        }\n\n        return div;\n    }\n\n    /**\n     * Return Tool's view\n     */\n    public render(): HTMLDivElement {\n        return this._element;\n    }\n\n    /**\n     * Create Block's settings block\n     */\n    public renderSettings(): HTMLElement {\n        const holder: HTMLDivElement = document.createElement(\"div\");\n\n        // Add alignment selectors\n        this.alignments.forEach(alignment => {\n            const selectTypeButton: HTMLSpanElement = document.createElement(\"span\");\n\n            selectTypeButton.classList.add(this._CSS.settingsButton);\n\n            /**\n             * Highlight current level button\n             */\n            if (this.currentAlignment.name === alignment.name) {\n                selectTypeButton.classList.add(this._CSS.settingsButtonActive);\n            }\n\n            /**\n             * Add SVG icon\n             */\n            selectTypeButton.innerHTML = alignment.svg;\n\n            /**\n             * Save alignment to its button\n             */\n            selectTypeButton.dataset[\"textAlign\"] = alignment.name;\n\n            /**\n             * Set up click handler\n             */\n            selectTypeButton.addEventListener(\"click\", () => {\n                this.setAlignment(alignment);\n            });\n\n            /**\n             * Append settings button to holder\n             */\n            holder.appendChild(selectTypeButton);\n\n            /**\n             * Save settings buttons\n             */\n            this.settingsButtons.push(selectTypeButton);\n        });\n\n        // Add `Typography` selector\n        if (this.typography) {\n            const typographyForParagraph = Object.values(this.typography).filter(\n                item => item.component === \"p\"\n            );\n\n            const selectTypeButton = document.createElement(\"SELECT\") as HTMLSelectElement;\n            // Add editor's default input style\n            selectTypeButton.classList.add(this.api.styles.input);\n            // Add typography options\n            typographyForParagraph.forEach(item => {\n                const option = new Option(item.label, item.className);\n\n                selectTypeButton.appendChild(option);\n            });\n            // Add \"onclick\" handler\n            selectTypeButton.onclick = event => {\n                const { value } = event.target as HTMLSelectElement;\n                this.setTypographyClass(value);\n            };\n\n            /**\n             * Append settings button to holder\n             */\n            holder.appendChild(selectTypeButton);\n\n            /**\n             * Save settings buttons\n             */\n            this.settingsButtons.push(selectTypeButton);\n        }\n\n        return holder;\n    }\n\n    /**\n     * Method that specified how to merge two Text blocks.\n     * Called by Editor.js by backspace at the beginning of the Block\n     * @param {ParagraphData} data\n     * @public\n     */\n    public merge(data: ParagraphData): void {\n        this.data = {\n            ...this.data,\n            text: this.data.text + data.text\n        };\n    }\n\n    /**\n     * Validate Paragraph block data:\n     * - check for emptiness\n     *\n     * @param {ParagraphData} savedData — data received after saving\n     * @returns {boolean} false if saved data is not correct, otherwise true\n     * @public\n     */\n    public validate(savedData: ParagraphData): boolean {\n        return !(savedData.text.trim() === \"\" && !this._preserveBlank);\n    }\n\n    /**\n     * Extract Tool's data from the view\n     * @param {HTMLDivElement} toolsContent - Paragraph tools rendered view\n     * @returns {ParagraphData} - saved data\n     * @public\n     */\n    public save(toolsContent: HTMLElement) {\n        return {\n            text: toolsContent.innerHTML,\n            textAlign: this.getTextAlign(toolsContent.className),\n            className: this.data.className\n        };\n    }\n\n    /**\n     * Extract textAlign from className\n     *\n     * @param {string} className - heading element className\n     * @returns {TextAlign} textAlign\n     */\n    public getTextAlign(className: string): TextAlign {\n        let textAlign = TextAlign.START;\n        // Match className with alignment\n        this.alignments.forEach(alignment => {\n            if (className.includes(`ce-header-text--${alignment.name}`)) {\n                textAlign = alignment.name;\n            }\n        });\n        return textAlign;\n    }\n\n    /**\n     * On paste callback fired from Editor.\n     *\n     * @param {PasteEvent} event - event with pasted data\n     */\n    public onPaste(event: PasteEvent): void {\n        const detail = event.detail as HTMLPasteEventDetail;\n        this.data = {\n            ...this.data,\n            text: detail.data.innerHTML\n        };\n    }\n\n    /**\n     * Callback for Block's settings buttons\n     *\n     * @param {number} alignment - level to set\n     */\n    public setAlignment(alignment: Alignment): void {\n        this.data = {\n            textAlign: alignment.name,\n            text: this.data.text\n        };\n\n        /**\n         * Highlight button by selected level\n         */\n        this.settingsButtons.forEach(button => {\n            button.classList.toggle(\n                this._CSS.settingsButtonActive,\n                button.dataset[\"textAlign\"] === alignment.name\n            );\n        });\n    }\n\n    /**\n     * Callback for Block's settings buttons\n     *\n     * @param {string} className - name of typography class\n     */\n    public setTypographyClass(className: string): void {\n        this.data = {\n            textAlign: this.data.textAlign,\n            text: this.data.text,\n            className: className\n        };\n    }\n\n    /**\n     * Normalize input data\n     *\n     * @param {HeaderData} data - saved data to process\n     *\n     * @returns {HeaderData}\n     * @private\n     */\n    public normalizeData(data?: Partial<ParagraphData>): ParagraphData {\n        const newData: Partial<ParagraphData> = {};\n\n        if (typeof data !== \"object\") {\n            data = {};\n        }\n\n        newData.text = data.text || \"\";\n        newData.textAlign = data.textAlign || TextAlign.START;\n        newData.className = data.className || \"\";\n\n        return newData as ParagraphData;\n    }\n}\n\nexport default Paragraph;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,4 @@
-/// <reference types="react" />
-/// <reference types="web" />
-/// <reference types="web" />
-import { API } from "@editorjs/editorjs";
+import type { API } from "@editorjs/editorjs";
 interface Config {
     themeColors: string[];
 }

package/components/RichTextEditor/tools/textColor/index.js

@@ -1,28 +1,9 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var COLOR_TOOL_CLASS = "cdx-text-color";
-var TextColorTool = /*#__PURE__*/function () {
-  function TextColorTool(_ref) {
-    var api = _ref.api,
-      config = _ref.config;
-    (0, _classCallCheck2.default)(this, TextColorTool);
-    (0, _defineProperty2.default)(this, "_state", void 0);
-    (0, _defineProperty2.default)(this, "color", void 0);
-    (0, _defineProperty2.default)(this, "api", void 0);
-    (0, _defineProperty2.default)(this, "tag", void 0);
-    (0, _defineProperty2.default)(this, "class", void 0);
-    (0, _defineProperty2.default)(this, "colorPicker", void 0);
-    (0, _defineProperty2.default)(this, "button", void 0);
-    (0, _defineProperty2.default)(this, "config", void 0);
-    (0, _defineProperty2.default)(this, "_CSS", void 0);
+const COLOR_TOOL_CLASS = "cdx-text-color";
+class TextColorTool {
+  constructor({
+    api,
+    config
+  }) {
     this.api = api;
     this.button = null;
     this.colorPicker = null;
@@ -39,207 +20,178 @@ var TextColorTool = /*#__PURE__*/function () {
       colorBoxActive: "ce-text-color-tool__color-box--active"
     };
   }
-  (0, _createClass2.default)(TextColorTool, [{
-    key: "state",
-    get: function get() {
-      return this._state;
-    },
-    set: function set(state) {
-      this._state = state;
-      if (!this.button) {
-        return;
+  static get isInline() {
+    return true;
+  }
+
+  /**
+   * Sanitize method returns rules to let Editor know which HTML tags it should respect.
+   * @returns {object} sanitizer configuration.
+   * https://editorjs.io/sanitizer
+   */
+  static get sanitize() {
+    // Block Tools are not connected with Inline ones,
+    // so markup added by Inline Tool will be removed on pasting or on saving.
+    // We need this config so that `class` & `style` attributes will remain intact for "span".
+    return {
+      /**
+       * TODO: figure out the element type
+       */
+      span: el => {
+        // Respect `class` and `style` attributes if this condition is meet.
+        if (el.classList.contains(COLOR_TOOL_CLASS)) {
+          return {
+            class: COLOR_TOOL_CLASS,
+            style: el.style
+          };
+        }
+        return {};
       }
-      this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);
-    }
-    /**
-     * Render method must return HTML element of the button for Inline Toolbar.
-     */
-  }, {
-    key: "render",
-    value: function render() {
-      this.button = document.createElement("button");
-      this.button.type = "button";
-      this.button.innerHTML = '<svg width="20" height="18"><path d="M10.458 12.04l2.919 1.686-.781 1.417-.984-.03-.974 1.687H8.674l1.49-2.583-.508-.775.802-1.401zm.546-.952l3.624-6.327a1.597 1.597 0 0 1 2.182-.59 1.632 1.632 0 0 1 .615 2.201l-3.519 6.391-2.902-1.675zm-7.73 3.467h3.465a1.123 1.123 0 1 1 0 2.247H3.273a1.123 1.123 0 1 1 0-2.247z"/></svg>';
-      this.button.classList.add(this.api.styles.inlineToolButton);
-      return this.button;
+    };
+  }
+  get state() {
+    return this._state;
+  }
+  set state(state) {
+    this._state = state;
+    if (!this.button) {
+      return;
     }
+    this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);
+  }
+  /**
+   * Render method must return HTML element of the button for Inline Toolbar.
+   */
+  render() {
+    this.button = document.createElement("button");
+    this.button.type = "button";
+    this.button.innerHTML = '<svg width="20" height="18"><path d="M10.458 12.04l2.919 1.686-.781 1.417-.984-.03-.974 1.687H8.674l1.49-2.583-.508-.775.802-1.401zm.546-.952l3.624-6.327a1.597 1.597 0 0 1 2.182-.59 1.632 1.632 0 0 1 .615 2.201l-3.519 6.391-2.902-1.675zm-7.73 3.467h3.465a1.123 1.123 0 1 1 0 2.247H3.273a1.123 1.123 0 1 1 0-2.247z"/></svg>';
+    this.button.classList.add(this.api.styles.inlineToolButton);
+    return this.button;
+  }
 
-    /**
-     * Input for the link
-     */
-  }, {
-    key: "renderActions",
-    value: function renderActions() {
-      var _this = this;
-      // Create action element
-      this.colorPicker = document.createElement("div");
-      // Add element properties
-      this.colorPicker.classList.add(this._CSS.colorPicker);
-      this.config.themeColors.forEach(function (color) {
-        // create element
-        var colorBox = document.createElement("button");
-        // add properties
-        colorBox.style.backgroundColor = color;
-        colorBox.classList.add(_this._CSS.colorBox);
-        colorBox.addEventListener("click", function () {
-          if (_this.color === color) {
-            // reset the color
-            _this.color = "unset";
-          } else {
-            // set color
-            _this.color = color;
-          }
-          if (_this.colorPicker) {
-            /**
-             * TODO @ts-refactor
-             * TS Complains there is no classList on child node.
-             */
-            _this.colorPicker.childNodes.forEach(function (node) {
-              if (node.classList.contains(_this._CSS.colorBoxActive)) {
-                // remove active class
-                node.classList.remove(_this._CSS.colorBoxActive);
-              }
-            });
-          }
-          // add active class
-          colorBox.classList.add(_this._CSS.colorBoxActive);
-        });
-        if (!_this.colorPicker) {
-          return;
+  /**
+   * Input for the link
+   */
+  renderActions() {
+    // Create action element
+    this.colorPicker = document.createElement("div");
+    // Add element properties
+    this.colorPicker.classList.add(this._CSS.colorPicker);
+    this.config.themeColors.forEach(color => {
+      // create element
+      const colorBox = document.createElement("button");
+      // add properties
+      colorBox.style.backgroundColor = color;
+      colorBox.classList.add(this._CSS.colorBox);
+      colorBox.addEventListener("click", () => {
+        if (this.color === color) {
+          // reset the color
+          this.color = "unset";
+        } else {
+          // set color
+          this.color = color;
         }
-        // save element
-        _this.colorPicker.appendChild(colorBox);
+        if (this.colorPicker) {
+          /**
+           * TODO @ts-refactor
+           * TS Complains there is no classList on child node.
+           */
+          this.colorPicker.childNodes.forEach(node => {
+            if (node.classList.contains(this._CSS.colorBoxActive)) {
+              // remove active class
+              node.classList.remove(this._CSS.colorBoxActive);
+            }
+          });
+        }
+        // add active class
+        colorBox.classList.add(this._CSS.colorBoxActive);
       });
-
-      // Return element
-      return this.colorPicker;
-    }
-
-    /**
-     * Finally, when button is pressed Editor calls
-     * surround method of the tool with Range object as an argument.
-     */
-  }, {
-    key: "surround",
-    value: function surround(range) {
-      if (this.state) {
-        this.unwrap(range);
-        return;
-      }
-      this.wrap(range);
-    }
-  }, {
-    key: "wrap",
-    value: function wrap(range) {
-      var selectedText = range.extractContents();
-      var mark = document.createElement(this.tag);
-      mark.classList.add(this.class);
-      mark.appendChild(selectedText);
-      range.insertNode(mark);
-      this.api.selection.expandToTag(mark);
-    }
-  }, {
-    key: "unwrap",
-    value: function unwrap(range) {
-      var mark = this.api.selection.findParentTag(this.tag, this.class);
-      var text = range.extractContents();
-      if (mark) {
-        mark.remove();
-      }
-      range.insertNode(text);
-    }
-  }, {
-    key: "showActions",
-    value: function showActions(mark) {
-      var _this2 = this;
       if (!this.colorPicker) {
         return;
       }
-      this.colorPicker.onclick = function () {
-        mark.style.color = _this2.color;
-      };
-      this.colorPicker.hidden = false;
+      // save element
+      this.colorPicker.appendChild(colorBox);
+    });
+
+    // Return element
+    return this.colorPicker;
+  }
+
+  /**
+   * Finally, when button is pressed Editor calls
+   * surround method of the tool with Range object as an argument.
+   */
+  surround(range) {
+    if (this.state) {
+      this.unwrap(range);
+      return;
     }
-  }, {
-    key: "hideActions",
-    value: function hideActions() {
-      if (!this.colorPicker) {
-        return;
-      }
-      this.colorPicker.onchange = null;
-      this.colorPicker.hidden = true;
+    this.wrap(range);
+  }
+  wrap(range) {
+    const selectedText = range.extractContents();
+    const mark = document.createElement(this.tag);
+    mark.classList.add(this.class);
+    mark.appendChild(selectedText);
+    range.insertNode(mark);
+    this.api.selection.expandToTag(mark);
+  }
+  unwrap(range) {
+    const mark = this.api.selection.findParentTag(this.tag, this.class);
+    const text = range.extractContents();
+    if (mark) {
+      mark.remove();
     }
-
-    /**
-     * CheckState method of each Inline Tool is called by Editor with current `Selection`
-     * when user selects some text
-     */
-  }, {
-    key: "checkState",
-    value: function checkState() {
-      var mark = this.api.selection.findParentTag(this.tag);
-      this.state = !!mark;
-      if (!!mark) {
-        this.showActions(mark);
-      } else {
-        this.hideActions();
-      }
+    range.insertNode(text);
+  }
+  showActions(mark) {
+    if (!this.colorPicker) {
+      return;
     }
-  }, {
-    key: "convertToHex",
-    value: function convertToHex(color) {
-      var rgb = color.match(/(\d+)/g);
-      if (!rgb) {
-        return "";
-      }
-      var hexR = parseInt(rgb[0]).toString(16);
-      var hexG = parseInt(rgb[1]).toString(16);
-      var hexB = parseInt(rgb[2]).toString(16);
-      hexR = hexR.length === 1 ? "0" + hexR : hexR;
-      hexG = hexG.length === 1 ? "0" + hexG : hexG;
-      hexB = hexB.length === 1 ? "0" + hexB : hexB;
-      return "#" + hexR + hexG + hexB;
+    this.colorPicker.onclick = () => {
+      mark.style.color = this.color;
+    };
+    this.colorPicker.hidden = false;
+  }
+  hideActions() {
+    if (!this.colorPicker) {
+      return;
     }
-  }, {
-    key: "clear",
-    value: function clear() {
+    this.colorPicker.onchange = null;
+    this.colorPicker.hidden = true;
+  }
+
+  /**
+   * CheckState method of each Inline Tool is called by Editor with current `Selection`
+   * when user selects some text
+   */
+  checkState() {
+    const mark = this.api.selection.findParentTag(this.tag);
+    this.state = !!mark;
+    if (!!mark) {
+      this.showActions(mark);
+    } else {
       this.hideActions();
     }
-  }], [{
-    key: "isInline",
-    get: function get() {
-      return true;
+  }
+  convertToHex(color) {
+    const rgb = color.match(/(\d+)/g);
+    if (!rgb) {
+      return "";
     }
+    let hexR = parseInt(rgb[0]).toString(16);
+    let hexG = parseInt(rgb[1]).toString(16);
+    let hexB = parseInt(rgb[2]).toString(16);
+    hexR = hexR.length === 1 ? "0" + hexR : hexR;
+    hexG = hexG.length === 1 ? "0" + hexG : hexG;
+    hexB = hexB.length === 1 ? "0" + hexB : hexB;
+    return "#" + hexR + hexG + hexB;
+  }
+  clear() {
+    this.hideActions();
+  }
+}
+export default TextColorTool;
 
-    /**
-     * Sanitize method returns rules to let Editor know which HTML tags it should respect.
-     * @returns {object} sanitizer configuration.
-     * https://editorjs.io/sanitizer
-     */
-  }, {
-    key: "sanitize",
-    get: function get() {
-      // Block Tools are not connected with Inline ones,
-      // so markup added by Inline Tool will be removed on pasting or on saving.
-      // We need this config so that `class` & `style` attributes will remain intact for "span".
-      return {
-        /**
-         * TODO: figure out the element type
-         */
-        span: function span(el) {
-          // Respect `class` and `style` attributes if this condition is meet.
-          if (el.classList.contains(COLOR_TOOL_CLASS)) {
-            return {
-              class: COLOR_TOOL_CLASS,
-              style: el.style
-            };
-          }
-          return {};
-        }
-      };
-    }
-  }]);
-  return TextColorTool;
-}();
-var _default = TextColorTool;
-exports.default = _default;
+//# sourceMappingURL=index.js.map

package/components/RichTextEditor/tools/textColor/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["COLOR_TOOL_CLASS","TextColorTool","api","config","button","colorPicker","_state","tag","color","class","themeColors","_CSS","colorBox","colorBoxActive","state","classList","toggle","styles","inlineToolButtonActive","document","createElement","type","innerHTML","add","inlineToolButton","forEach","style","backgroundColor","addEventListener","childNodes","node","contains","remove","appendChild","range","unwrap","wrap","selectedText","extractContents","mark","insertNode","selection","expandToTag","findParentTag","text","onclick","hidden","onchange","showActions","hideActions","rgb","match","hexR","parseInt","toString","hexG","hexB","length","span","el"],"sources":["index.ts"],"sourcesContent":["import { API } from \"@editorjs/editorjs\";\n\nconst COLOR_TOOL_CLASS = \"cdx-text-color\";\n\ninterface Config {\n    themeColors: string[];\n}\n\ninterface TextColorToolParams {\n    api: API;\n    config: Config;\n}\n\ninterface SanitizeResultSpanResult {\n    class?: string;\n    style?: CSSStyleDeclaration;\n}\ninterface SanitizeResult {\n    span: (element: HTMLElement) => SanitizeResultSpanResult;\n}\n\nclass TextColorTool {\n    private _state: boolean;\n    private color: string;\n    private readonly api: API;\n    private readonly tag: string;\n    private readonly class: string;\n    private colorPicker: HTMLDivElement | null;\n    private button: HTMLButtonElement | null;\n    private readonly config: Config;\n    private readonly _CSS: any;\n\n    constructor({ api, config }: TextColorToolParams) {\n        this.api = api;\n        this.button = null;\n        this.colorPicker = null;\n        this._state = false;\n        this.tag = \"SPAN\";\n        this.color = \"red\";\n        this.class = COLOR_TOOL_CLASS;\n        this.config = config || { themeColors: [\"#44bd32\"] };\n        this._CSS = {\n            colorPicker: \"ce-text-color-tool\",\n            colorBox: \"ce-text-color-tool__color-box\",\n            colorBoxActive: \"ce-text-color-tool__color-box--active\"\n        };\n    }\n\n    static get isInline(): boolean {\n        return true;\n    }\n\n    /**\n     * Sanitize method returns rules to let Editor know which HTML tags it should respect.\n     * @returns {object} sanitizer configuration.\n     * https://editorjs.io/sanitizer\n     */\n    static get sanitize(): SanitizeResult {\n        // Block Tools are not connected with Inline ones,\n        // so markup added by Inline Tool will be removed on pasting or on saving.\n        // We need this config so that `class` & `style` attributes will remain intact for \"span\".\n        return {\n            /**\n             * TODO: figure out the element type\n             */\n            span: (el: HTMLElement) => {\n                // Respect `class` and `style` attributes if this condition is meet.\n                if (el.classList.contains(COLOR_TOOL_CLASS)) {\n                    return {\n                        class: COLOR_TOOL_CLASS,\n                        style: el.style\n                    };\n                }\n                return {};\n            }\n        };\n    }\n\n    get state(): boolean {\n        return this._state;\n    }\n\n    set state(state) {\n        this._state = state;\n        if (!this.button) {\n            return;\n        }\n        this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);\n    }\n    /**\n     * Render method must return HTML element of the button for Inline Toolbar.\n     */\n    public render(): HTMLButtonElement {\n        this.button = document.createElement(\"button\");\n        this.button.type = \"button\";\n        this.button.innerHTML =\n            '<svg width=\"20\" height=\"18\"><path d=\"M10.458 12.04l2.919 1.686-.781 1.417-.984-.03-.974 1.687H8.674l1.49-2.583-.508-.775.802-1.401zm.546-.952l3.624-6.327a1.597 1.597 0 0 1 2.182-.59 1.632 1.632 0 0 1 .615 2.201l-3.519 6.391-2.902-1.675zm-7.73 3.467h3.465a1.123 1.123 0 1 1 0 2.247H3.273a1.123 1.123 0 1 1 0-2.247z\"/></svg>';\n        this.button.classList.add(this.api.styles.inlineToolButton);\n\n        return this.button;\n    }\n\n    /**\n     * Input for the link\n     */\n    public renderActions(): HTMLElement {\n        // Create action element\n        this.colorPicker = document.createElement(\"div\");\n        // Add element properties\n        this.colorPicker.classList.add(this._CSS.colorPicker);\n\n        this.config.themeColors.forEach(color => {\n            // create element\n            const colorBox = document.createElement(\"button\");\n            // add properties\n            colorBox.style.backgroundColor = color;\n            colorBox.classList.add(this._CSS.colorBox);\n\n            colorBox.addEventListener(\"click\", () => {\n                if (this.color === color) {\n                    // reset the color\n                    this.color = \"unset\";\n                } else {\n                    // set color\n                    this.color = color;\n                }\n\n                if (this.colorPicker) {\n                    /**\n                     * TODO @ts-refactor\n                     * TS Complains there is no classList on child node.\n                     */\n                    this.colorPicker.childNodes.forEach((node: any) => {\n                        if (node.classList.contains(this._CSS.colorBoxActive)) {\n                            // remove active class\n                            node.classList.remove(this._CSS.colorBoxActive);\n                        }\n                    });\n                }\n                // add active class\n                colorBox.classList.add(this._CSS.colorBoxActive);\n            });\n            if (!this.colorPicker) {\n                return;\n            }\n            // save element\n            this.colorPicker.appendChild(colorBox);\n        });\n\n        // Return element\n        return this.colorPicker;\n    }\n\n    /**\n     * Finally, when button is pressed Editor calls\n     * surround method of the tool with Range object as an argument.\n     */\n    public surround(range: Range): void {\n        if (this.state) {\n            this.unwrap(range);\n            return;\n        }\n\n        this.wrap(range);\n    }\n\n    public wrap(range: Range): void {\n        const selectedText = range.extractContents();\n        const mark = document.createElement(this.tag);\n\n        mark.classList.add(this.class);\n\n        mark.appendChild(selectedText);\n        range.insertNode(mark);\n\n        this.api.selection.expandToTag(mark);\n    }\n\n    public unwrap(range: Range): void {\n        const mark = this.api.selection.findParentTag(this.tag, this.class);\n        const text = range.extractContents();\n\n        if (mark) {\n            mark.remove();\n        }\n\n        range.insertNode(text);\n    }\n\n    public showActions(mark: HTMLElement): void {\n        if (!this.colorPicker) {\n            return;\n        }\n        this.colorPicker.onclick = () => {\n            mark.style.color = this.color;\n        };\n        this.colorPicker.hidden = false;\n    }\n\n    public hideActions(): void {\n        if (!this.colorPicker) {\n            return;\n        }\n        this.colorPicker.onchange = null;\n        this.colorPicker.hidden = true;\n    }\n\n    /**\n     * CheckState method of each Inline Tool is called by Editor with current `Selection`\n     * when user selects some text\n     */\n    public checkState(): void {\n        const mark = this.api.selection.findParentTag(this.tag);\n\n        this.state = !!mark;\n\n        if (!!mark) {\n            this.showActions(mark);\n        } else {\n            this.hideActions();\n        }\n    }\n\n    public convertToHex(color: string): string {\n        const rgb = color.match(/(\\d+)/g);\n        if (!rgb) {\n            return \"\";\n        }\n\n        let hexR = parseInt(rgb[0]).toString(16);\n        let hexG = parseInt(rgb[1]).toString(16);\n        let hexB = parseInt(rgb[2]).toString(16);\n\n        hexR = hexR.length === 1 ? \"0\" + hexR : hexR;\n        hexG = hexG.length === 1 ? \"0\" + hexG : hexG;\n        hexB = hexB.length === 1 ? \"0\" + hexB : hexB;\n\n        return \"#\" + hexR + hexG + hexB;\n    }\n\n    public clear(): void {\n        this.hideActions();\n    }\n}\n\nexport default TextColorTool;\n"],"mappings":"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"}
+{"version":3,"names":["COLOR_TOOL_CLASS","TextColorTool","constructor","api","config","button","colorPicker","_state","tag","color","class","themeColors","_CSS","colorBox","colorBoxActive","isInline","sanitize","span","el","classList","contains","style","state","toggle","styles","inlineToolButtonActive","render","document","createElement","type","innerHTML","add","inlineToolButton","renderActions","forEach","backgroundColor","addEventListener","childNodes","node","remove","appendChild","surround","range","unwrap","wrap","selectedText","extractContents","mark","insertNode","selection","expandToTag","findParentTag","text","showActions","onclick","hidden","hideActions","onchange","checkState","convertToHex","rgb","match","hexR","parseInt","toString","hexG","hexB","length","clear"],"sources":["index.ts"],"sourcesContent":["import type { API } from \"@editorjs/editorjs\";\n\nconst COLOR_TOOL_CLASS = \"cdx-text-color\";\n\ninterface Config {\n    themeColors: string[];\n}\n\ninterface TextColorToolParams {\n    api: API;\n    config: Config;\n}\n\ninterface SanitizeResultSpanResult {\n    class?: string;\n    style?: CSSStyleDeclaration;\n}\ninterface SanitizeResult {\n    span: (element: HTMLElement) => SanitizeResultSpanResult;\n}\n\nclass TextColorTool {\n    private _state: boolean;\n    private color: string;\n    private readonly api: API;\n    private readonly tag: string;\n    private readonly class: string;\n    private colorPicker: HTMLDivElement | null;\n    private button: HTMLButtonElement | null;\n    private readonly config: Config;\n    private readonly _CSS: any;\n\n    constructor({ api, config }: TextColorToolParams) {\n        this.api = api;\n        this.button = null;\n        this.colorPicker = null;\n        this._state = false;\n        this.tag = \"SPAN\";\n        this.color = \"red\";\n        this.class = COLOR_TOOL_CLASS;\n        this.config = config || { themeColors: [\"#44bd32\"] };\n        this._CSS = {\n            colorPicker: \"ce-text-color-tool\",\n            colorBox: \"ce-text-color-tool__color-box\",\n            colorBoxActive: \"ce-text-color-tool__color-box--active\"\n        };\n    }\n\n    static get isInline(): boolean {\n        return true;\n    }\n\n    /**\n     * Sanitize method returns rules to let Editor know which HTML tags it should respect.\n     * @returns {object} sanitizer configuration.\n     * https://editorjs.io/sanitizer\n     */\n    static get sanitize(): SanitizeResult {\n        // Block Tools are not connected with Inline ones,\n        // so markup added by Inline Tool will be removed on pasting or on saving.\n        // We need this config so that `class` & `style` attributes will remain intact for \"span\".\n        return {\n            /**\n             * TODO: figure out the element type\n             */\n            span: (el: HTMLElement) => {\n                // Respect `class` and `style` attributes if this condition is meet.\n                if (el.classList.contains(COLOR_TOOL_CLASS)) {\n                    return {\n                        class: COLOR_TOOL_CLASS,\n                        style: el.style\n                    };\n                }\n                return {};\n            }\n        };\n    }\n\n    get state(): boolean {\n        return this._state;\n    }\n\n    set state(state) {\n        this._state = state;\n        if (!this.button) {\n            return;\n        }\n        this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);\n    }\n    /**\n     * Render method must return HTML element of the button for Inline Toolbar.\n     */\n    public render(): HTMLButtonElement {\n        this.button = document.createElement(\"button\");\n        this.button.type = \"button\";\n        this.button.innerHTML =\n            '<svg width=\"20\" height=\"18\"><path d=\"M10.458 12.04l2.919 1.686-.781 1.417-.984-.03-.974 1.687H8.674l1.49-2.583-.508-.775.802-1.401zm.546-.952l3.624-6.327a1.597 1.597 0 0 1 2.182-.59 1.632 1.632 0 0 1 .615 2.201l-3.519 6.391-2.902-1.675zm-7.73 3.467h3.465a1.123 1.123 0 1 1 0 2.247H3.273a1.123 1.123 0 1 1 0-2.247z\"/></svg>';\n        this.button.classList.add(this.api.styles.inlineToolButton);\n\n        return this.button;\n    }\n\n    /**\n     * Input for the link\n     */\n    public renderActions(): HTMLElement {\n        // Create action element\n        this.colorPicker = document.createElement(\"div\");\n        // Add element properties\n        this.colorPicker.classList.add(this._CSS.colorPicker);\n\n        this.config.themeColors.forEach(color => {\n            // create element\n            const colorBox = document.createElement(\"button\");\n            // add properties\n            colorBox.style.backgroundColor = color;\n            colorBox.classList.add(this._CSS.colorBox);\n\n            colorBox.addEventListener(\"click\", () => {\n                if (this.color === color) {\n                    // reset the color\n                    this.color = \"unset\";\n                } else {\n                    // set color\n                    this.color = color;\n                }\n\n                if (this.colorPicker) {\n                    /**\n                     * TODO @ts-refactor\n                     * TS Complains there is no classList on child node.\n                     */\n                    this.colorPicker.childNodes.forEach((node: any) => {\n                        if (node.classList.contains(this._CSS.colorBoxActive)) {\n                            // remove active class\n                            node.classList.remove(this._CSS.colorBoxActive);\n                        }\n                    });\n                }\n                // add active class\n                colorBox.classList.add(this._CSS.colorBoxActive);\n            });\n            if (!this.colorPicker) {\n                return;\n            }\n            // save element\n            this.colorPicker.appendChild(colorBox);\n        });\n\n        // Return element\n        return this.colorPicker;\n    }\n\n    /**\n     * Finally, when button is pressed Editor calls\n     * surround method of the tool with Range object as an argument.\n     */\n    public surround(range: Range): void {\n        if (this.state) {\n            this.unwrap(range);\n            return;\n        }\n\n        this.wrap(range);\n    }\n\n    public wrap(range: Range): void {\n        const selectedText = range.extractContents();\n        const mark = document.createElement(this.tag);\n\n        mark.classList.add(this.class);\n\n        mark.appendChild(selectedText);\n        range.insertNode(mark);\n\n        this.api.selection.expandToTag(mark);\n    }\n\n    public unwrap(range: Range): void {\n        const mark = this.api.selection.findParentTag(this.tag, this.class);\n        const text = range.extractContents();\n\n        if (mark) {\n            mark.remove();\n        }\n\n        range.insertNode(text);\n    }\n\n    public showActions(mark: HTMLElement): void {\n        if (!this.colorPicker) {\n            return;\n        }\n        this.colorPicker.onclick = () => {\n            mark.style.color = this.color;\n        };\n        this.colorPicker.hidden = false;\n    }\n\n    public hideActions(): void {\n        if (!this.colorPicker) {\n            return;\n        }\n        this.colorPicker.onchange = null;\n        this.colorPicker.hidden = true;\n    }\n\n    /**\n     * CheckState method of each Inline Tool is called by Editor with current `Selection`\n     * when user selects some text\n     */\n    public checkState(): void {\n        const mark = this.api.selection.findParentTag(this.tag);\n\n        this.state = !!mark;\n\n        if (!!mark) {\n            this.showActions(mark);\n        } else {\n            this.hideActions();\n        }\n    }\n\n    public convertToHex(color: string): string {\n        const rgb = color.match(/(\\d+)/g);\n        if (!rgb) {\n            return \"\";\n        }\n\n        let hexR = parseInt(rgb[0]).toString(16);\n        let hexG = parseInt(rgb[1]).toString(16);\n        let hexB = parseInt(rgb[2]).toString(16);\n\n        hexR = hexR.length === 1 ? \"0\" + hexR : hexR;\n        hexG = hexG.length === 1 ? \"0\" + hexG : hexG;\n        hexB = hexB.length === 1 ? \"0\" + hexB : hexB;\n\n        return \"#\" + hexR + hexG + hexB;\n    }\n\n    public clear(): void {\n        this.hideActions();\n    }\n}\n\nexport default TextColorTool;\n"],"mappings":"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","ignoreList":[]}

package/components/RichTextEditor/tools/utils.d.ts

@@ -3,7 +3,7 @@ export declare enum TextAlign {
     END = "end",
     CENTER = "center"
 }
-export declare type Alignment = {
+export type Alignment = {
     name: TextAlign;
     svg: string;
 };