@webiny/app-admin 5.24.0 → 5.25.0-beta.2

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

@@ -166,7 +166,7 @@ var Header = /*#__PURE__*/function () {
          * Save level to its button
          */
 
-        selectTypeButton.dataset.level = level.number + "";
+        selectTypeButton.dataset["level"] = level.number + "";
         /**
          * Set up click handler
          */
@@ -209,7 +209,7 @@ var Header = /*#__PURE__*/function () {
          * Save alignment to its button
          */
 
-        selectTypeButton.dataset.textAlign = alignment.name;
+        selectTypeButton.dataset["textAlign"] = alignment.name;
         /**
          * Set up click handler
          */
@@ -474,7 +474,7 @@ var Header = /*#__PURE__*/function () {
        * Add Placeholder
        */
 
-      tag.dataset.placeholder = this.api.i18n.t(this._settings.placeholder || "");
+      tag.dataset["placeholder"] = this.api.i18n.t(this._settings.placeholder || "");
       return tag;
     }
     /**

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["ALIGNMENTS","ALIGNMENT_ICONS","TextAlign","Header","data","config","api","readOnly","alignments","typography","_CSS","block","styles","settingsButton","settingsButtonActive","wrapper","_settings","_data","normalizeData","settingsButtons","_element","getTag","newData","text","level","parseInt","defaultLevel","number","textAlign","START","holder","document","createElement","levels","length","forEach","selectTypeButton","classList","add","currentLevel","innerHTML","svg","dataset","addEventListener","setLevel","appendChild","push","alignment","currentAlignment","name","setAlignment","button","toggle","blockData","trim","toolsContent","getTextAlign","className","includes","undefined","parentNode","newHeader","replaceChild","tag","component","toLowerCase","typographyConfig","textAlignClass","remove","contentEditable","i18n","t","placeholder","find","levelItem","start","userSpecified","console","warn","availableLevels","filter","l","event","content","detail","tagName","reduce","prevLevel","currLevel","Math","abs","export","import","tags","icon","title"],"mappings":"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","sourcesContent":["import { API, HTMLPasteEvent } from \"@editorjs/editorjs\";\nimport { ALIGNMENTS, ALIGNMENT_ICONS, TextAlign, Alignment } from \"../utils\";\n\ninterface Typography {\n    [key: string]: {\n        label: string;\n        component: string;\n        className: string;\n    };\n}\n\nexport interface HeaderData {\n    text: string;\n    level: number;\n    textAlign?: TextAlign;\n    alignment?: Alignment;\n    className?: string;\n}\n\ninterface HeaderConfig {\n    levels: number[];\n    typography: Typography;\n    placeholder?: string;\n    defaultLevel?: number;\n}\n\ninterface HeaderArgs {\n    data: HeaderData;\n    config: HeaderConfig;\n    api: any;\n    readOnly: boolean;\n}\n\nclass Header {\n    private readonly api: API;\n    private readonly readOnly: boolean;\n    private readonly settingsButtons: any[];\n    private readonly _CSS: any;\n    private readonly _settings: HeaderConfig;\n    private _data: HeaderData;\n    private _element: any;\n    private readonly alignments: Alignment[];\n    private readonly typography: Typography;\n    /**\n     * Render plugin`s main Element and fill it with saved data\n     *\n     * @param {{data: HeaderData, config: HeaderConfig, api: object}}\n     *   data — previously saved data\n     *   config - user config for Tool\n     *   api - Editor.js API\n     *   readOnly - read only mode flag\n     */\n    constructor({ data, config, api, readOnly }: HeaderArgs) {\n        this.api = api;\n        this.readOnly = readOnly;\n\n        this.alignments = ALIGNMENTS;\n        /**\n         * Import typography from theme\n         */\n        this.typography = config.typography || null;\n\n        /**\n         * Styles\n         *\n         * @type {object}\n         */\n        this._CSS = {\n            block: this.api.styles.block,\n            settingsButton: this.api.styles.settingsButton,\n            settingsButtonActive: this.api.styles.settingsButtonActive,\n            wrapper: \"ce-header\"\n        };\n\n        /**\n         * Tool's settings passed from Editor\n         *\n         * @type {HeaderConfig}\n         * @private\n         */\n        this._settings = config;\n\n        /**\n         * Block's data\n         *\n         * @type {HeaderData}\n         * @private\n         */\n        this._data = this.normalizeData(data);\n\n        /**\n         * List of settings buttons\n         *\n         * @type {HTMLElement[]}\n         */\n        this.settingsButtons = [];\n\n        /**\n         * Main Block wrapper\n         *\n         * @type {HTMLElement}\n         * @private\n         */\n        this._element = this.getTag();\n    }\n\n    /**\n     * Normalize input data\n     *\n     * @param {HeaderData} data - saved data to process\n     *\n     * @returns {HeaderData}\n     * @private\n     */\n    normalizeData(data: Partial<HeaderData>): HeaderData {\n        const newData: Partial<HeaderData> = {};\n\n        if (typeof data !== \"object\") {\n            data = {};\n        }\n\n        newData.text = data.text || \"\";\n        newData.level = parseInt(data.level as unknown as string) || this.defaultLevel.number;\n        newData.textAlign = data.textAlign || TextAlign.START;\n\n        return newData as HeaderData;\n    }\n\n    /**\n     * Return Tool's view\n     *\n     * @returns {HTMLHeadingElement}\n     * @public\n     */\n    render() {\n        return this._element;\n    }\n\n    /**\n     * Create Block's settings block\n     *\n     * @returns {HTMLElement}\n     */\n    renderSettings() {\n        const holder = document.createElement(\"DIV\");\n\n        // do not add settings button, when only one level is configured\n        if (this.levels.length <= 1) {\n            return holder;\n        }\n\n        /** Add type selectors */\n        this.levels.forEach(level => {\n            const selectTypeButton = document.createElement(\"SPAN\");\n\n            selectTypeButton.classList.add(this._CSS.settingsButton);\n\n            /**\n             * Highlight current level button\n             */\n            if (this.currentLevel.number === level.number) {\n                selectTypeButton.classList.add(this._CSS.settingsButtonActive);\n            }\n\n            /**\n             * Add SVG icon\n             */\n            selectTypeButton.innerHTML = level.svg;\n\n            /**\n             * Save level to its button\n             */\n            selectTypeButton.dataset[\"level\"] = level.number + \"\";\n\n            /**\n             * Set up click handler\n             */\n            selectTypeButton.addEventListener(\"click\", () => {\n                this.setLevel(level.number);\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        /**\n         * Add alignment selectors\n         * */\n        this.alignments.forEach(alignment => {\n            const selectTypeButton = 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        return holder;\n    }\n\n    /**\n     * Callback for Block's settings buttons\n     *\n     * @param {number} level - level to set\n     */\n    setLevel(level: number): void {\n        this.data = {\n            level: level,\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                parseInt(button.dataset.level) === level\n            );\n        });\n    }\n\n    /**\n     * Callback for Block's settings buttons\n     *\n     * @param {number} alignment - level to set\n     */\n    setAlignment(alignment: Alignment) {\n        this.data = {\n            textAlign: alignment.name,\n            text: this.data.text,\n            level: this.data.level\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     * Method that specified how to merge two Text blocks.\n     * Called by Editor.js by backspace at the beginning of the Block\n     *\n     * @param {HeaderData} data - saved data to merger with current block\n     * @public\n     */\n    merge(data: HeaderData): void {\n        this.data = {\n            text: this.data.text + data.text,\n            level: this.data.level,\n            alignment: this.data.alignment\n        };\n    }\n\n    /**\n     * Validate Text block data:\n     * - check for emptiness\n     *\n     * @param {HeaderData} blockData — data received after saving\n     * @returns {boolean} false if saved data is not correct, otherwise true\n     * @public\n     */\n    validate(blockData: HeaderData): boolean {\n        return blockData.text.trim() !== \"\";\n    }\n\n    /**\n     * Extract Tool's data from the view\n     *\n     * @param {HTMLHeadingElement} toolsContent - Text tools rendered view\n     * @returns {HeaderData} - saved data\n     * @public\n     */\n    save(toolsContent: HTMLHeadingElement): HeaderData {\n        return {\n            text: toolsContent.innerHTML,\n            level: this.currentLevel.number,\n            textAlign: this.getTextAlign(toolsContent.className),\n            className: toolsContent.className\n        };\n    }\n\n    /**\n     * Extract textAlign from className\n     *\n     * @param {string} className - heading element className\n     * @returns {TextAlign} textAlign\n     */\n    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     * Allow Header to be converted to/from other blocks\n     */\n    static get conversionConfig() {\n        return {\n            export: \"text\", // use 'text' property for other blocks\n            import: \"text\" // fill 'text' property from other block's export string\n        };\n    }\n\n    /**\n     * Sanitizer Rules\n     */\n    static get sanitize() {\n        return {\n            level: false,\n            text: {}\n        };\n    }\n\n    /**\n     * Returns true to notify core that read-only is supported\n     *\n     * @returns {boolean}\n     */\n    static get isReadOnlySupported() {\n        return true;\n    }\n\n    /**\n     * Get current Tools`s data\n     *\n     * @returns {HeaderData} Current data\n     * @private\n     */\n    get data(): HeaderData {\n        this._data.text = this._element.innerHTML;\n        this._data.level = this.currentLevel.number;\n        this._data.textAlign = this.currentAlignment.name;\n\n        return this._data;\n    }\n\n    /**\n     * Store data in plugin:\n     * - at the this._data property\n     * - at the HTML\n     *\n     * @param {HeaderData} data — data to set\n     * @private\n     */\n    set data(data: HeaderData) {\n        this._data = this.normalizeData(data);\n\n        /**\n         * If level is set and block in DOM\n         * then replace it to a new block\n         */\n        if (data.level !== undefined && this._element.parentNode) {\n            /**\n             * Create a new tag\n             *\n             * @type {HTMLHeadingElement}\n             */\n            const newHeader = this.getTag();\n\n            /**\n             * Save Block's content\n             */\n            newHeader.innerHTML = this._element.innerHTML;\n\n            /**\n             * Replace blocks\n             */\n            this._element.parentNode.replaceChild(newHeader, this._element);\n\n            /**\n             * Save new block to private variable\n             *\n             * @type {HTMLHeadingElement}\n             * @private\n             */\n            this._element = newHeader;\n        }\n\n        /**\n         * If data.text was passed then update block's content\n         */\n        if (data.text !== undefined) {\n            this._element.innerHTML = this._data.text || \"\";\n        }\n    }\n\n    /**\n     * Get tag for target level\n     * By default returns second-leveled header\n     *\n     * @returns {HTMLElement}\n     */\n    getTag() {\n        /**\n         * Create element for current Block's level\n         */\n        const tag = document.createElement(this.currentLevel.tag);\n\n        /**\n         * Add text to block\n         */\n        tag.innerHTML = this._data.text || \"\";\n\n        /**\n         * Add styles class from typography\n         */\n        if (this.typography) {\n            const component = this.currentLevel.tag.toLowerCase();\n            const typographyConfig = this.typography[component];\n            tag.classList.add(typographyConfig.className);\n        } else {\n            /**\n             * Add styles class\n             */\n            tag.classList.add(this._CSS.wrapper);\n        }\n\n        /**\n         * Add Alignment class\n         */\n        this.alignments.forEach(alignment => {\n            const textAlignClass = `ce-header-text--${alignment.name}`;\n            if (alignment.name === this._data.textAlign) {\n                tag.classList.add(textAlignClass);\n            } else {\n                tag.classList.remove(textAlignClass);\n            }\n        });\n\n        /**\n         * Make tag editable\n         */\n        tag.contentEditable = this.readOnly ? \"false\" : \"true\";\n\n        /**\n         * Add Placeholder\n         */\n        tag.dataset[\"placeholder\"] = this.api.i18n.t(this._settings.placeholder || \"\");\n\n        return tag;\n    }\n\n    /**\n     * Get current level\n     *\n     * @returns {level}\n     */\n    get currentLevel() {\n        let level = this.levels.find(levelItem => levelItem.number === this._data.level);\n\n        if (!level) {\n            level = this.defaultLevel;\n        }\n\n        return level;\n    }\n\n    /**\n     * Get current alignment\n     *\n     * @returns {alignment}\n     */\n    get currentAlignment() {\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     * Return default level\n     *\n     * @returns {level}\n     */\n    get defaultLevel() {\n        /**\n         * User can specify own default level value\n         */\n        if (this._settings.defaultLevel) {\n            const userSpecified = this.levels.find(levelItem => {\n                return levelItem.number === this._settings.defaultLevel;\n            });\n\n            if (userSpecified) {\n                return userSpecified;\n            } else {\n                console.warn(\n                    \"(ง'̀-'́)ง Heading Tool: the default level specified was not found in available levels\"\n                );\n            }\n        }\n\n        /**\n         * With no additional options, there will be H2 by default\n         *\n         * @type {level}\n         */\n        return this.levels[1];\n    }\n\n    /**\n     * @typedef {object} level\n     * @property {number} number - level number\n     * @property {string} tag - tag corresponds with level number\n     * @property {string} svg - icon\n     */\n\n    /**\n     * Available header levels\n     *\n     * @returns {level[]}\n     */\n    get levels() {\n        const availableLevels = [\n            {\n                number: 1,\n                tag: \"H1\",\n                svg: '<svg width=\"16\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.14 1.494V4.98h4.62V1.494c0-.498.098-.871.293-1.12A.927.927 0 0 1 7.82 0c.322 0 .583.123.782.37.2.246.3.62.3 1.124v9.588c0 .503-.101.88-.303 1.128a.957.957 0 0 1-.779.374.921.921 0 0 1-.77-.378c-.193-.251-.29-.626-.29-1.124V6.989H2.14v4.093c0 .503-.1.88-.302 1.128a.957.957 0 0 1-.778.374.921.921 0 0 1-.772-.378C.096 11.955 0 11.58 0 11.082V1.494C0 .996.095.623.285.374A.922.922 0 0 1 1.06 0c.321 0 .582.123.782.37.199.246.299.62.299 1.124zm11.653 9.985V5.27c-1.279.887-2.14 1.33-2.583 1.33a.802.802 0 0 1-.563-.228.703.703 0 0 1-.245-.529c0-.232.08-.402.241-.511.161-.11.446-.25.854-.424.61-.259 1.096-.532 1.462-.818a5.84 5.84 0 0 0 .97-.962c.282-.355.466-.573.552-.655.085-.082.246-.123.483-.123.267 0 .481.093.642.28.161.186.242.443.242.77v7.813c0 .914-.345 1.371-1.035 1.371-.307 0-.554-.093-.74-.28-.187-.186-.28-.461-.28-.825z\"/></svg>'\n            },\n            {\n                number: 2,\n                tag: \"H2\",\n                svg: '<svg width=\"18\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.152 1.494V4.98h4.646V1.494c0-.498.097-.871.293-1.12A.934.934 0 0 1 7.863 0c.324 0 .586.123.786.37.2.246.301.62.301 1.124v9.588c0 .503-.101.88-.304 1.128a.964.964 0 0 1-.783.374.928.928 0 0 1-.775-.378c-.194-.251-.29-.626-.29-1.124V6.989H2.152v4.093c0 .503-.101.88-.304 1.128a.964.964 0 0 1-.783.374.928.928 0 0 1-.775-.378C.097 11.955 0 11.58 0 11.082V1.494C0 .996.095.623.286.374A.929.929 0 0 1 1.066 0c.323 0 .585.123.786.37.2.246.3.62.3 1.124zm10.99 9.288h3.527c.351 0 .62.072.804.216.185.144.277.34.277.588 0 .22-.073.408-.22.56-.146.154-.368.23-.665.23h-4.972c-.338 0-.601-.093-.79-.28a.896.896 0 0 1-.284-.659c0-.162.06-.377.182-.645s.255-.478.399-.631a38.617 38.617 0 0 1 1.621-1.598c.482-.444.827-.735 1.034-.875.369-.261.676-.523.922-.787.245-.263.432-.534.56-.81.129-.278.193-.549.193-.815 0-.288-.069-.546-.206-.773a1.428 1.428 0 0 0-.56-.53 1.618 1.618 0 0 0-.774-.19c-.59 0-1.054.26-1.392.777-.045.068-.12.252-.226.554-.106.302-.225.534-.358.696-.133.162-.328.243-.585.243a.76.76 0 0 1-.56-.223c-.149-.148-.223-.351-.223-.608 0-.31.07-.635.21-.972.139-.338.347-.645.624-.92a3.093 3.093 0 0 1 1.054-.665c.426-.169.924-.253 1.496-.253.69 0 1.277.108 1.764.324.315.144.592.343.83.595.24.252.425.544.558.875.133.33.2.674.2 1.03 0 .558-.14 1.066-.416 1.523-.277.457-.56.815-.848 1.074-.288.26-.771.666-1.45 1.22-.677.554-1.142.984-1.394 1.29a3.836 3.836 0 0 0-.331.44z\"/></svg>'\n            },\n            {\n                number: 3,\n                tag: \"H3\",\n                svg: '<svg width=\"18\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.152 1.494V4.98h4.646V1.494c0-.498.097-.871.293-1.12A.934.934 0 0 1 7.863 0c.324 0 .586.123.786.37.2.246.301.62.301 1.124v9.588c0 .503-.101.88-.304 1.128a.964.964 0 0 1-.783.374.928.928 0 0 1-.775-.378c-.194-.251-.29-.626-.29-1.124V6.989H2.152v4.093c0 .503-.101.88-.304 1.128a.964.964 0 0 1-.783.374.928.928 0 0 1-.775-.378C.097 11.955 0 11.58 0 11.082V1.494C0 .996.095.623.286.374A.929.929 0 0 1 1.066 0c.323 0 .585.123.786.37.2.246.3.62.3 1.124zm11.61 4.919c.418 0 .778-.123 1.08-.368.301-.245.452-.597.452-1.055 0-.35-.12-.65-.36-.902-.241-.252-.566-.378-.974-.378-.277 0-.505.038-.684.116a1.1 1.1 0 0 0-.426.306 2.31 2.31 0 0 0-.296.49c-.093.2-.178.388-.255.565a.479.479 0 0 1-.245.225.965.965 0 0 1-.409.081.706.706 0 0 1-.5-.22c-.152-.148-.228-.345-.228-.59 0-.236.071-.484.214-.745a2.72 2.72 0 0 1 .627-.746 3.149 3.149 0 0 1 1.024-.568 4.122 4.122 0 0 1 1.368-.214c.44 0 .842.06 1.205.18.364.12.679.294.947.52.267.228.47.49.606.79.136.3.204.622.204.967 0 .454-.099.843-.296 1.168-.198.324-.48.64-.848.95.354.19.653.408.895.653.243.245.426.516.548.813.123.298.184.619.184.964 0 .413-.083.812-.248 1.198-.166.386-.41.73-.732 1.031a3.49 3.49 0 0 1-1.147.708c-.443.17-.932.256-1.467.256a3.512 3.512 0 0 1-1.464-.293 3.332 3.332 0 0 1-1.699-1.64c-.142-.314-.214-.573-.214-.777 0-.263.085-.475.255-.636a.89.89 0 0 1 .637-.242c.127 0 .25.037.367.112a.53.53 0 0 1 .232.27c.236.63.489 1.099.759 1.405.27.306.65.46 1.14.46a1.714 1.714 0 0 0 1.46-.824c.17-.273.256-.588.256-.947 0-.53-.145-.947-.436-1.249-.29-.302-.694-.453-1.212-.453-.09 0-.231.01-.422.028-.19.018-.313.027-.367.027-.25 0-.443-.062-.579-.187-.136-.125-.204-.299-.204-.521 0-.218.081-.394.245-.528.163-.134.406-.2.728-.2h.28z\"/></svg>'\n            },\n            {\n                number: 4,\n                tag: \"H4\",\n                svg: '<svg width=\"20\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.152 1.494V4.98h4.646V1.494c0-.498.097-.871.293-1.12A.934.934 0 0 1 7.863 0c.324 0 .586.123.786.37.2.246.301.62.301 1.124v9.588c0 .503-.101.88-.304 1.128a.964.964 0 0 1-.783.374.928.928 0 0 1-.775-.378c-.194-.251-.29-.626-.29-1.124V6.989H2.152v4.093c0 .503-.101.88-.304 1.128a.964.964 0 0 1-.783.374.928.928 0 0 1-.775-.378C.097 11.955 0 11.58 0 11.082V1.494C0 .996.095.623.286.374A.929.929 0 0 1 1.066 0c.323 0 .585.123.786.37.2.246.3.62.3 1.124zm13.003 10.09v-1.252h-3.38c-.427 0-.746-.097-.96-.29-.213-.193-.32-.456-.32-.788 0-.085.016-.171.048-.259.031-.088.078-.18.141-.276.063-.097.128-.19.195-.28.068-.09.15-.2.25-.33l3.568-4.774a5.44 5.44 0 0 1 .576-.683.763.763 0 0 1 .542-.212c.682 0 1.023.39 1.023 1.171v5.212h.29c.346 0 .623.047.832.142.208.094.313.3.313.62 0 .26-.086.45-.256.568-.17.12-.427.179-.768.179h-.41v1.252c0 .346-.077.603-.23.771-.152.168-.356.253-.612.253a.78.78 0 0 1-.61-.26c-.154-.173-.232-.427-.232-.764zm-2.895-2.76h2.895V4.91L12.26 8.823z\"/></svg>'\n            },\n            {\n                number: 5,\n                tag: \"H5\",\n                svg: '<svg width=\"18\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.152 1.494V4.98h4.646V1.494c0-.498.097-.871.293-1.12A.934.934 0 0 1 7.863 0c.324 0 .586.123.786.37.2.246.301.62.301 1.124v9.588c0 .503-.101.88-.304 1.128a.964.964 0 0 1-.783.374.928.928 0 0 1-.775-.378c-.194-.251-.29-.626-.29-1.124V6.989H2.152v4.093c0 .503-.101.88-.304 1.128a.964.964 0 0 1-.783.374.928.928 0 0 1-.775-.378C.097 11.955 0 11.58 0 11.082V1.494C0 .996.095.623.286.374A.929.929 0 0 1 1.066 0c.323 0 .585.123.786.37.2.246.3.62.3 1.124zm14.16 2.645h-3.234l-.388 2.205c.644-.344 1.239-.517 1.783-.517.436 0 .843.082 1.222.245.38.164.712.39.998.677.286.289.51.63.674 1.025.163.395.245.82.245 1.273 0 .658-.148 1.257-.443 1.797-.295.54-.72.97-1.276 1.287-.556.318-1.197.477-1.923.477-.813 0-1.472-.15-1.978-.45-.506-.3-.865-.643-1.076-1.031-.21-.388-.316-.727-.316-1.018 0-.177.073-.345.22-.504a.725.725 0 0 1 .556-.238c.381 0 .665.22.85.66.182.404.427.719.736.943.309.225.654.337 1.035.337.35 0 .656-.09.919-.272.263-.182.466-.431.61-.749.142-.318.214-.678.214-1.082 0-.436-.078-.808-.232-1.117a1.607 1.607 0 0 0-.62-.69 1.674 1.674 0 0 0-.864-.229c-.39 0-.67.048-.837.143-.168.095-.41.262-.725.5-.316.239-.576.358-.78.358a.843.843 0 0 1-.592-.242c-.173-.16-.259-.344-.259-.548 0-.022.025-.177.075-.463l.572-3.26c.063-.39.181-.675.354-.852.172-.177.454-.265.844-.265h3.595c.708 0 1.062.27 1.062.81a.711.711 0 0 1-.26.572c-.172.145-.426.218-.762.218z\"/></svg>'\n            },\n            {\n                number: 6,\n                tag: \"H6\",\n                svg: '<svg width=\"18\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.152 1.494V4.98h4.646V1.494c0-.498.097-.871.293-1.12A.934.934 0 0 1 7.863 0c.324 0 .586.123.786.37.2.246.301.62.301 1.124v9.588c0 .503-.101.88-.304 1.128a.964.964 0 0 1-.783.374.928.928 0 0 1-.775-.378c-.194-.251-.29-.626-.29-1.124V6.989H2.152v4.093c0 .503-.101.88-.304 1.128a.964.964 0 0 1-.783.374.928.928 0 0 1-.775-.378C.097 11.955 0 11.58 0 11.082V1.494C0 .996.095.623.286.374A.929.929 0 0 1 1.066 0c.323 0 .585.123.786.37.2.246.3.62.3 1.124zM12.53 7.058a3.093 3.093 0 0 1 1.004-.814 2.734 2.734 0 0 1 1.214-.264c.43 0 .827.08 1.19.24.365.161.684.39.957.686.274.296.485.645.635 1.048a3.6 3.6 0 0 1 .223 1.262c0 .637-.145 1.216-.437 1.736-.292.52-.699.926-1.221 1.218-.522.292-1.114.438-1.774.438-.76 0-1.416-.186-1.967-.557-.552-.37-.974-.919-1.265-1.645-.292-.726-.438-1.613-.438-2.662 0-.855.088-1.62.265-2.293.176-.674.43-1.233.76-1.676.33-.443.73-.778 1.2-1.004.47-.226 1.006-.339 1.608-.339.579 0 1.089.113 1.53.34.44.225.773.506.997.84.224.335.335.656.335.964 0 .185-.07.354-.21.505a.698.698 0 0 1-.536.227.874.874 0 0 1-.529-.18 1.039 1.039 0 0 1-.36-.498 1.42 1.42 0 0 0-.495-.655 1.3 1.3 0 0 0-.786-.247c-.24 0-.479.069-.716.207a1.863 1.863 0 0 0-.6.56c-.33.479-.525 1.333-.584 2.563zm1.832 4.213c.456 0 .834-.186 1.133-.56.298-.373.447-.862.447-1.468 0-.412-.07-.766-.21-1.062a1.584 1.584 0 0 0-.577-.678 1.47 1.47 0 0 0-.807-.234c-.28 0-.548.074-.804.224-.255.149-.461.365-.617.647a2.024 2.024 0 0 0-.234.994c0 .61.158 1.12.475 1.527.316.407.714.61 1.194.61z\"/></svg>'\n            }\n        ];\n\n        return this._settings.levels\n            ? availableLevels.filter(l => this._settings.levels.includes(l.number))\n            : availableLevels;\n    }\n\n    /**\n     * Handle H1-H6 tags on paste to substitute it with header Tool\n     *\n     * @param {HTMLPasteEvent} event - event with pasted content\n     */\n    onPaste(event: HTMLPasteEvent) {\n        const content = event.detail.data;\n\n        /**\n         * Define default level value\n         *\n         * @type {number}\n         */\n        let level = this.defaultLevel.number;\n\n        switch (content.tagName) {\n            case \"H1\":\n                level = 1;\n                break;\n            case \"H2\":\n                level = 2;\n                break;\n            case \"H3\":\n                level = 3;\n                break;\n            case \"H4\":\n                level = 4;\n                break;\n            case \"H5\":\n                level = 5;\n                break;\n            case \"H6\":\n                level = 6;\n                break;\n        }\n\n        if (this._settings.levels) {\n            // Fallback to nearest level when specified not available\n            level = this._settings.levels.reduce((prevLevel, currLevel) => {\n                return Math.abs(currLevel - level) < Math.abs(prevLevel - level)\n                    ? currLevel\n                    : prevLevel;\n            });\n        }\n\n        this.data = {\n            level,\n            text: content.innerHTML\n        };\n    }\n\n    /**\n     * Used by Editor.js paste handling API.\n     * Provides configuration to handle H1-H6 tags.\n     *\n     * @returns {{handler: (function(HTMLElement): {text: string}), tags: string[]}}\n     */\n    static get pasteConfig() {\n        return {\n            tags: [\"H1\", \"H2\", \"H3\", \"H4\", \"H5\", \"H6\"]\n        };\n    }\n\n    /**\n     * Get Tool toolbox settings\n     * icon - Tool icon's SVG\n     * title - title to show in toolbox\n     *\n     * @returns {{icon: string, title: string}}\n     */\n    static get toolbox() {\n        return {\n            icon:\n                '<svg width=\"10\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 10 14\">\\n' +\n                '  <path d=\"M7.6 8.15H2.25v4.525a1.125 1.125 0 0 1-2.25 0V1.125a1.125 1.125 0 1 1 2.25 0V5.9H7.6V1.125a1.125 1.125 0 0 1 2.25 0v11.55a1.125 1.125 0 0 1-2.25 0V8.15z\"/>\\n' +\n                \"</svg>\",\n            title: \"Heading\"\n        };\n    }\n}\n\nexport default Header;\n"]}

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

@@ -23,7 +23,9 @@ interface Config {
     getFileSrc: GetFileSourceCallable;
     onSelectFile: OnSelectFileCallable;
     actions: Tune[];
-    context: Record<string, any>;
+    context: {
+        showFileManager: (cb: (file: File) => void) => void;
+    };
 }
 export default class ImageTool {
     private readonly api;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["Ui","Tunes","svgs","defaultGetFileSrc","file","src","defaultOnSelectFile","ImageTool","data","config","api","readOnly","getFileSrc","onSelectFile","actions","context","ui","showFileManager","image","tunes","onChange","tuneName","tuneToggled","_data","render","caption","nodes","innerHTML","fillCaption","forEach","name","tune","initialValue","value","setTune","fillImage","applyTune","Promise","resolve","then","blockId","blocks","getCurrentBlockIndex","stretchBlock","catch","err","console","error","icon","toolbox","title"],"mappings":";;;AACA,OAAOA,EAAP;AACA,OAAOC,KAAP;AACA,OAAOC,IAAP;;AASA,IAAMC,iBAAwC,GAAG,SAA3CA,iBAA2C,CAAAC,IAAI,EAAI;AACrD,MAAI,OAAOA,IAAP,KAAgB,QAApB,EAA8B;AAC1B,WAAOA,IAAP;AACH;;AAED,SAAOA,IAAI,CAACC,GAAZ;AACH,CAND;;AAUA,IAAMC,mBAAyC,GAAG,SAA5CA,mBAA4C,CAAAF,IAAI,EAAI;AACtD,SAAOA,IAAI,CAACC,GAAZ;AACH,CAFD;;IAsBqBE,S;AA+BjB,2BAA8D;AAAA;;AAAA,QAAhDC,IAAgD,QAAhDA,IAAgD;AAAA,QAA1CC,MAA0C,QAA1CA,MAA0C;AAAA,QAAlCC,GAAkC,QAAlCA,GAAkC;AAAA,QAA7BC,QAA6B,QAA7BA,QAA6B;;AAAA;;AAAA;;AAAA;;AAAA;;AAAA;;AAAA;;AAAA;;AAC1D,SAAKD,GAAL,GAAWA,GAAX;AACA,SAAKC,QAAL,GAAgBA,QAAhB;AAEA,SAAKF,MAAL,GAAc;AACVG,MAAAA,UAAU,EAAEH,MAAM,CAACG,UAAP,IAAqBT,iBADvB;AAEVU,MAAAA,YAAY,EAAEJ,MAAM,CAACI,YAAP,IAAuBP,mBAF3B;AAGVQ,MAAAA,OAAO,EAAEL,MAAM,CAACK,OAAP,IAAkB,EAHjB;AAIVC,MAAAA,OAAO,EAAEN,MAAM,CAACM;AAJN,KAAd;AAOA;AACR;AACA;;AACQ,SAAKC,EAAL,GAAU,IAAIhB,EAAJ,CAAO;AACbU,MAAAA,GAAG,EAAHA,GADa;AAEbD,MAAAA,MAAM,EAAE,KAAKA,MAFA;AAGbI,MAAAA,YAAY,EAAE,wBAAM;AAChB,QAAA,KAAI,CAACJ,MAAL,CAAYM,OAAZ,CAAoBE,eAApB,CAAoC,UAACb,IAAD,EAAgB;AAChD,UAAA,KAAI,CAACc,KAAL,GAAa,KAAI,CAACT,MAAL,CAAYI,YAAZ,CAAyBT,IAAzB,CAAb;AACH,SAFD;AAGH,OAPY;AAQbO,MAAAA,QAAQ,EAARA;AARa,KAAP,CAAV;AAWA;AACR;AACA;;AACQ,SAAKQ,KAAL,GAAa,IAAIlB,KAAJ,CAAU;AACnBS,MAAAA,GAAG,EAAHA,GADmB;AAEnBI,MAAAA,OAAO,EAAE,KAAKL,MAAL,CAAYK,OAFF;AAGnBM,MAAAA,QAAQ,EAAE,kBAACC,QAAD;AAAA,eAAsB,KAAI,CAACC,WAAL,CAAiBD,QAAjB,CAAtB;AAAA;AAHS,KAAV,CAAb;AAMA;AACR;AACA;;AACQ,SAAKE,KAAL,GAAa,EAAb;AACA,SAAKf,IAAL,GAAYA,IAAZ;AACH;AAED;AACJ;AACA;AACA;AACA;AACA;AACA;;;;;WACI,kBAAS;AACL,aAAO,KAAKQ,EAAL,CAAQQ,MAAR,CAAe,KAAKhB,IAApB,CAAP;AACH;AAED;AACJ;AACA;AACA;AACA;AACA;AACA;;;;WACI,gBAAO;AACH,UAAMiB,OAAO,GAAG,KAAKT,EAAL,CAAQU,KAAR,CAAcD,OAA9B;AAEA,WAAKF,KAAL,CAAWE,OAAX,GAAqBA,OAAO,CAACE,SAA7B;AAEA,aAAO,KAAKnB,IAAZ;AACH;AAED;AACJ;AACA;AACA;AACA;AACA;AACA;;;;WACI,0BAAiB;AACb,aAAO,KAAKW,KAAL,CAAWK,MAAX,CAAkB,KAAKhB,IAAvB,CAAP;AACH;AAED;AACJ;AACA;AACA;AACA;AACA;AACA;;;;;AAkBI;AACJ;AACA;AACA;AACA;AACA;AACA;AACI,mBAA0B;AACtB,aAAO,KAAKe,KAAZ;AACH;AAED;AACJ;AACA;AACA;AACA;AACA;AACA;;SAlCI,aAASf,IAAT,EAAe;AAAA;;AACX,WAAKU,KAAL,GAAaV,IAAI,CAACJ,IAAlB;AAEA,WAAKmB,KAAL,CAAWE,OAAX,GAAqBjB,IAAI,CAACiB,OAAL,IAAgB,EAArC;AACA,WAAKT,EAAL,CAAQY,WAAR,CAAoB,KAAKL,KAAL,CAAWE,OAA/B;AAEAxB,MAAAA,KAAK,CAACkB,KAAN,CAAYU,OAAZ,CAAoB,iBAAc;AAAA,YAAXC,IAAW,SAAXA,IAAW;AAC9B,YAAMC,IAAI,GAAGD,IAAb;AAEA,YAAME,YAAY,GAAGxB,IAAI,CAACuB,IAAD,CAAzB;AAEA,YAAME,KAAK,GAAGD,YAAY,KAAK,IAAjB,IAAyBA,YAAY,KAAK,MAAxD;;AAEA,QAAA,MAAI,CAACE,OAAL,CAAaH,IAAb,EAAmBE,KAAnB;AACH,OARD;AASH;;;SAoBD,aAAU7B,IAAV,EAA+B;AAC3B,WAAKmB,KAAL,CAAWnB,IAAX,GAAkBA,IAAI,IAAI,EAA1B;;AAEA,UAAIA,IAAJ,EAAU;AACN,aAAKY,EAAL,CAAQmB,SAAR,CAAkB,KAAK1B,MAAL,CAAYG,UAAZ,CAAuBR,IAAvB,CAAlB;AACH;AACJ;AAED;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;;;;WACI,qBAAmBiB,QAAnB,EAA2C;AACvC;AACA,WAAKa,OAAL,CAAab,QAAb,EAAuB,CAAC,KAAKE,KAAL,CAAWF,QAAX,CAAxB;AACH;AAED;AACJ;AACA;AACA;AACA;AACA;AACA;;;;WACI,iBAAeA,QAAf,EAAiCY,KAAjC,EAAuD;AAAA;;AACnD,WAAKV,KAAL,CAAWF,QAAX,IAAuBY,KAAvB;AAEA,WAAKjB,EAAL,CAAQoB,SAAR,CAAkBf,QAAlB,EAA4BY,KAA5B;;AAEA,UAAIZ,QAAQ,KAAK,WAAjB,EAA8B;AAC1B;AACZ;AACA;AACYgB,QAAAA,OAAO,CAACC,OAAR,GACKC,IADL,CACU,YAAM;AACR,cAAMC,OAAO,GAAG,MAAI,CAAC9B,GAAL,CAAS+B,MAAT,CAAgBC,oBAAhB,EAAhB;;AAEA,UAAA,MAAI,CAAChC,GAAL,CAAS+B,MAAT,CAAgBE,YAAhB,CAA6BH,OAA7B,EAAsCP,KAAtC;AACH,SALL,EAMKW,KANL,CAMW,UAAAC,GAAG,EAAI;AACVC,UAAAA,OAAO,CAACC,KAAR,CAAcF,GAAd;AACH,SARL;AASH;AACJ;;;WAED,sBAA6B;AACzB,aAAO,KAAKlC,QAAZ;AACH;;;;AAlMD;AACJ;AACA;AACA;AACA;AACI,mBAAiC;AAC7B,aAAO,IAAP;AACH;AAED;AACJ;AACA;AACA;AACA;AACA;AACA;;;;SACI,eAAqB;AACjB,aAAO;AACHqC,QAAAA,IAAI,EAAE9C,IAAI,CAAC+C,OADR;AAEHC,QAAAA,KAAK,EAAE;AAFJ,OAAP;AAIH;;;;;;SA7BgB3C,S","sourcesContent":["import { API } from \"@editorjs/editorjs\";\nimport Ui from \"./ui\";\nimport Tunes from \"./tunes\";\nimport svgs from \"./svgs\";\nimport { Tune } from \"./types\";\n\ninterface File {\n    src: string;\n}\ninterface GetFileSourceCallable {\n    (file: File | string): string;\n}\nconst defaultGetFileSrc: GetFileSourceCallable = file => {\n    if (typeof file === \"string\") {\n        return file;\n    }\n\n    return file.src;\n};\ninterface OnSelectFileCallable {\n    (file: File): string;\n}\nconst defaultOnSelectFile: OnSelectFileCallable = file => {\n    return file.src;\n};\n\ninterface ImageToolData {\n    caption: string;\n    file: string;\n}\ninterface ImageToolParams {\n    data: ImageToolData;\n    config: Config;\n    api: API;\n    readOnly: boolean;\n}\ninterface Config {\n    getFileSrc: GetFileSourceCallable;\n    onSelectFile: OnSelectFileCallable;\n    actions: Tune[];\n    context: {\n        showFileManager: (cb: (file: File) => void) => void;\n    };\n}\nexport default class ImageTool {\n    private readonly api: API;\n    private readonly readOnly: boolean;\n    private readonly config: Config;\n    private readonly tunes: Tunes;\n    private readonly ui: Ui;\n    private readonly _data: any;\n\n    /**\n     * Notify core that read-only mode is supported\n     *\n     * @returns {boolean}\n     */\n    static get isReadOnlySupported() {\n        return true;\n    }\n\n    /**\n     * Get Tool toolbox settings\n     * icon - Tool icon's SVG\n     * title - title to show in toolbox\n     *\n     * @returns {{icon: string, title: string}}\n     */\n    static get toolbox() {\n        return {\n            icon: svgs.toolbox,\n            title: \"Image\"\n        };\n    }\n\n    constructor({ data, config, api, readOnly }: ImageToolParams) {\n        this.api = api;\n        this.readOnly = readOnly;\n\n        this.config = {\n            getFileSrc: config.getFileSrc || defaultGetFileSrc,\n            onSelectFile: config.onSelectFile || defaultOnSelectFile,\n            actions: config.actions || [],\n            context: config.context\n        };\n\n        /**\n         * Module for working with UI\n         */\n        this.ui = new Ui({\n            api,\n            config: this.config,\n            onSelectFile: () => {\n                this.config.context.showFileManager((file: File) => {\n                    this.image = this.config.onSelectFile(file);\n                });\n            },\n            readOnly\n        });\n\n        /**\n         * Module for working with tunes\n         */\n        this.tunes = new Tunes({\n            api,\n            actions: this.config.actions,\n            onChange: (tuneName: string) => this.tuneToggled(tuneName)\n        });\n\n        /**\n         * Set saved state\n         */\n        this._data = {};\n        this.data = data;\n    }\n\n    /**\n     * Renders Block content\n     *\n     * @public\n     *\n     * @returns {HTMLDivElement}\n     */\n    render() {\n        return this.ui.render(this.data);\n    }\n\n    /**\n     * Return Block data\n     *\n     * @public\n     *\n     * @returns {ImageToolData}\n     */\n    save() {\n        const caption = this.ui.nodes.caption;\n\n        this._data.caption = caption.innerHTML;\n\n        return this.data;\n    }\n\n    /**\n     * Makes buttons with tunes: stretch image\n     *\n     * @public\n     *\n     * @returns {Element}\n     */\n    renderSettings() {\n        return this.tunes.render(this.data);\n    }\n\n    /**\n     * Stores all Tool's data\n     *\n     * @private\n     *\n     * @param {ImageToolData} data - data in Image Tool format\n     */\n    set data(data) {\n        this.image = data.file;\n\n        this._data.caption = data.caption || \"\";\n        this.ui.fillCaption(this._data.caption);\n\n        Tunes.tunes.forEach(({ name }) => {\n            const tune = name as keyof ImageToolData;\n\n            const initialValue = data[tune] as unknown as string | boolean;\n\n            const value = initialValue === true || initialValue === \"true\";\n\n            this.setTune(tune, value);\n        });\n    }\n\n    /**\n     * Return Tool data\n     *\n     * @private\n     *\n     * @returns {ImageToolData}\n     */\n    get data(): ImageToolData {\n        return this._data;\n    }\n\n    /**\n     * Set new image file\n     *\n     * @private\n     *\n     * @param {object} file - uploaded file data\n     */\n    set image(file: File | string) {\n        this._data.file = file || {};\n\n        if (file) {\n            this.ui.fillImage(this.config.getFileSrc(file));\n        }\n    }\n\n    /**\n     * Callback fired when Block Tune is activated\n     *\n     * @private\n     *\n     * @param {string} tuneName - tune that has been clicked\n     * @returns {void}\n     */\n    public tuneToggled(tuneName: string): void {\n        // inverse tune state\n        this.setTune(tuneName, !this._data[tuneName]);\n    }\n\n    /**\n     * Set one tune\n     *\n     * @param {string} tuneName - {@link Tunes.tunes}\n     * @param {boolean} value - tune state\n     * @returns {void}\n     */\n    public setTune(tuneName: string, value: boolean): void {\n        this._data[tuneName] = value;\n\n        this.ui.applyTune(tuneName, value);\n\n        if (tuneName === \"stretched\") {\n            /**\n             * Wait until the API is ready\n             */\n            Promise.resolve()\n                .then(() => {\n                    const blockId = this.api.blocks.getCurrentBlockIndex();\n\n                    this.api.blocks.stretchBlock(blockId, value);\n                })\n                .catch(err => {\n                    console.error(err);\n                });\n        }\n    }\n\n    public isReadOnly(): boolean {\n        return this.readOnly;\n    }\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["svgs.ts"],"names":["buttonIcon","stretched","toolbox"],"mappings":"AAAA,eAAe;AACXA,EAAAA,UAAU,8ZADC;AAEXC,EAAAA,SAAS,sZAFE;AAGXC,EAAAA,OAAO;AAHI,CAAf","sourcesContent":["export default {\n    buttonIcon: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.15 13.628A7.749 7.749 0 0 0 10 17.75a7.74 7.74 0 0 0 6.305-3.242l-2.387-2.127-2.765 2.244-4.389-4.496-3.614 3.5zm-.787-2.303l4.446-4.371 4.52 4.63 2.534-2.057 3.533 2.797c.23-.734.354-1.514.354-2.324a7.75 7.75 0 1 0-15.387 1.325zM10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z\"/>`,\n    stretched: `<svg width=\"17\" height=\"10\" viewBox=\"0 0 17 10\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.568 5.925H4.056l1.703 1.703a1.125 1.125 0 0 1-1.59 1.591L.962 6.014A1.069 1.069 0 0 1 .588 4.26L4.38.469a1.069 1.069 0 0 1 1.512 1.511L4.084 3.787h9.606l-1.85-1.85a1.069 1.069 0 1 1 1.512-1.51l3.792 3.791a1.069 1.069 0 0 1-.475 1.788L13.514 9.16a1.125 1.125 0 0 1-1.59-1.591l1.644-1.644z\"/></svg>`,\n    toolbox: `<svg width=\"17\" height=\"15\" viewBox=\"0 0 336 276\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M291 150.242V79c0-18.778-15.222-34-34-34H79c-18.778 0-34 15.222-34 34v42.264l67.179-44.192 80.398 71.614 56.686-29.14L291 150.242zm-.345 51.622l-42.3-30.246-56.3 29.884-80.773-66.925L45 174.187V197c0 18.778 15.222 34 34 34h178c17.126 0 31.295-12.663 33.655-29.136zM79 0h178c43.63 0 79 35.37 79 79v118c0 43.63-35.37 79-79 79H79c-43.63 0-79-35.37-79-79V79C0 35.37 35.37 0 79 0z\"/></svg>`\n};\n"]}

package/components/RichTextEditor/tools/image/tunes.js

@@ -82,7 +82,7 @@ var Tunes = /*#__PURE__*/function () {
         el.addEventListener("click", function () {
           _this.tuneClicked(tune.name, tune.action);
         });
-        el.dataset.tune = tune.name;
+        el.dataset["tune"] = tune.name;
         var name = tune.name;
         el.classList.toggle(_this.CSS.buttonActive, !!toolData[name]);
 
@@ -113,9 +113,13 @@ var Tunes = /*#__PURE__*/function () {
       }
 
       var button = this.buttons.find(function (el) {
-        return el.dataset.tune === tuneName;
+        return el.dataset["tune"] === tuneName;
       });
-      button.classList.toggle(this.CSS.buttonActive, !button.classList.contains(this.CSS.buttonActive));
+
+      if (button) {
+        button.classList.toggle(this.CSS.buttonActive, !button.classList.contains(this.CSS.buttonActive));
+      }
+
       this.onChange(tuneName);
       return true;
     }

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

@@ -0,0 +1 @@
+{"version":3,"sources":["tunes.ts"],"names":["make","svgs","Tunes","api","actions","onChange","buttons","wrapper","buttonBase","styles","settingsButton","button","buttonActive","settingsButtonActive","toolData","CSS","tunes","concat","forEach","tune","title","i18n","t","el","innerHTML","icon","addEventListener","tuneClicked","name","action","dataset","classList","toggle","push","tooltip","onHover","placement","appendChild","tuneName","customFunction","find","contains","stretched"],"mappings":";;;AACA,SAASA,IAAT;AACA,OAAOC,IAAP;;AAQA;AACA;AACA;IACqBC,K;AAKjB;AACJ;AACA;AACA;AACA;AACA;AACI,uBAAqD;AAAA,QAAvCC,GAAuC,QAAvCA,GAAuC;AAAA,QAAlCC,OAAkC,QAAlCA,OAAkC;AAAA,QAAzBC,QAAyB,QAAzBA,QAAyB;;AAAA;;AAAA;;AAAA;;AAAA;;AAAA;;AACjD,SAAKF,GAAL,GAAWA,GAAX;AACA,SAAKC,OAAL,GAAeA,OAAf;AACA,SAAKC,QAAL,GAAgBA,QAAhB;AACA,SAAKC,OAAL,GAAe,EAAf;AACH;AAED;AACJ;AACA;AACA;AACA;;;;;;AAWI;AACJ;AACA;AACA;AACA;AACI,mBAAU;AACN,aAAO;AACHC,QAAAA,OAAO,EAAE,EADN;AAEHC,QAAAA,UAAU,EAAE,KAAKL,GAAL,CAASM,MAAT,CAAgBC,cAFzB;AAGHC,QAAAA,MAAM,EAAE,kBAHL;AAIHC,QAAAA,YAAY,EAAE,KAAKT,GAAL,CAASM,MAAT,CAAgBI;AAJ3B,OAAP;AAMH;AAED;AACJ;AACA;AACA;AACA;AACA;;;;WACI,gBAAOC,QAAP,EAA6C;AAAA;;AACzC,UAAMP,OAAO,GAAGP,IAAI,CAAC,KAAD,EAAQ,KAAKe,GAAL,CAASR,OAAjB,CAApB;AAEA,WAAKD,OAAL,GAAe,EAAf;AAEA,UAAMU,KAAK,GAAGd,KAAK,CAACc,KAAN,CAAYC,MAAZ,CAAmB,KAAKb,OAAxB,CAAd;AAEAY,MAAAA,KAAK,CAACE,OAAN,CAAc,UAAAC,IAAI,EAAI;AAClB,YAAMC,KAAK,GAAG,KAAI,CAACjB,GAAL,CAASkB,IAAT,CAAcC,CAAd,CAAgBH,IAAI,CAACC,KAArB,CAAd;;AACA,YAAMG,EAAE,GAAGvB,IAAI,CAAC,KAAD,EAAQ,CAAC,KAAI,CAACe,GAAL,CAASP,UAAV,EAAsB,KAAI,CAACO,GAAL,CAASJ,MAA/B,CAAR,EAAgD;AAC3Da,UAAAA,SAAS,EAAEL,IAAI,CAACM,IAD2C;AAE3DL,UAAAA,KAAK,EAALA;AAF2D,SAAhD,CAAf;AAKAG,QAAAA,EAAE,CAACG,gBAAH,CAAoB,OAApB,EAA6B,YAAM;AAC/B,UAAA,KAAI,CAACC,WAAL,CAAiBR,IAAI,CAACS,IAAtB,EAA4BT,IAAI,CAACU,MAAjC;AACH,SAFD;AAIAN,QAAAA,EAAE,CAACO,OAAH,CAAW,MAAX,IAAqBX,IAAI,CAACS,IAA1B;AACA,YAAMA,IAAI,GAAGT,IAAI,CAACS,IAAlB;AACAL,QAAAA,EAAE,CAACQ,SAAH,CAAaC,MAAb,CAAoB,KAAI,CAACjB,GAAL,CAASH,YAA7B,EAA2C,CAAC,CAACE,QAAQ,CAACc,IAAD,CAArD;;AAEA,QAAA,KAAI,CAACtB,OAAL,CAAa2B,IAAb,CAAkBV,EAAlB;;AAEA,QAAA,KAAI,CAACpB,GAAL,CAAS+B,OAAT,CAAiBC,OAAjB,CAAyBZ,EAAzB,EAA6BH,KAA7B,EAAoC;AAChCgB,UAAAA,SAAS,EAAE;AADqB,SAApC;;AAIA7B,QAAAA,OAAO,CAAC8B,WAAR,CAAoBd,EAApB;AACH,OAtBD;AAwBA,aAAOhB,OAAP;AACH;AAED;AACJ;AACA;AACA;AACA;AACA;;;;WACI,qBAAY+B,QAAZ,EAA8BC,cAA9B,EAA8E;AAC1E,UAAI,OAAOA,cAAP,KAA0B,UAA9B,EAA0C;AACtC,YAAI,CAACA,cAAc,CAACD,QAAD,CAAnB,EAA+B;AAC3B,iBAAO,KAAP;AACH;AACJ;;AAED,UAAM3B,MAAM,GAAG,KAAKL,OAAL,CAAakC,IAAb,CAAkB,UAAAjB,EAAE;AAAA,eAAIA,EAAE,CAACO,OAAH,CAAW,MAAX,MAAuBQ,QAA3B;AAAA,OAApB,CAAf;;AAEA,UAAI3B,MAAJ,EAAY;AACRA,QAAAA,MAAM,CAACoB,SAAP,CAAiBC,MAAjB,CACI,KAAKjB,GAAL,CAASH,YADb,EAEI,CAACD,MAAM,CAACoB,SAAP,CAAiBU,QAAjB,CAA0B,KAAK1B,GAAL,CAASH,YAAnC,CAFL;AAIH;;AAED,WAAKP,QAAL,CAAciC,QAAd;AACA,aAAO,IAAP;AACH;;;SAxFD,eAA2B;AACvB,aAAO,CACH;AACIV,QAAAA,IAAI,EAAE,WADV;AAEIH,QAAAA,IAAI,EAAExB,IAAI,CAACyC,SAFf;AAGItB,QAAAA,KAAK,EAAE;AAHX,OADG,CAAP;AAOH;;;;;;SA/BgBlB,K","sourcesContent":["import { API } from \"@editorjs/editorjs\";\nimport { make } from \"./ui\";\nimport svgs from \"./svgs\";\nimport { ImageToolData, Tune, TuneOnChangeCallable } from \"./types\";\n\ninterface TunesParams {\n    api: API;\n    actions: Tune[];\n    onChange: TuneOnChangeCallable;\n}\n/**\n * Working with Block Tunes\n */\nexport default class Tunes {\n    private api: API;\n    private readonly actions: Tune[];\n    private readonly onChange: TuneOnChangeCallable;\n    private buttons: Array<HTMLElement>;\n    /**\n     * @param {object} tune - image tool Tunes managers\n     * @param {object} tune.api - Editor API\n     * @param {object} tune.actions - list of user defined tunes\n     * @param {Function} tune.onChange - tune toggling callback\n     */\n    constructor({ api, actions, onChange }: TunesParams) {\n        this.api = api;\n        this.actions = actions;\n        this.onChange = onChange;\n        this.buttons = [];\n    }\n\n    /**\n     * Available Image tunes\n     *\n     * @returns {{name: string, icon: string, title: string}[]}\n     */\n    static get tunes(): Tune[] {\n        return [\n            {\n                name: \"stretched\",\n                icon: svgs.stretched,\n                title: \"Stretch image\"\n            }\n        ];\n    }\n\n    /**\n     * Styles\n     *\n     * @returns {{wrapper: string, buttonBase: *, button: string, buttonActive: *}}\n     */\n    get CSS() {\n        return {\n            wrapper: \"\",\n            buttonBase: this.api.styles.settingsButton,\n            button: \"image-tool__tune\",\n            buttonActive: this.api.styles.settingsButtonActive\n        };\n    }\n\n    /**\n     * Makes buttons with tunes: stretch image\n     *\n     * @param {ImageToolData} toolData - generate Elements of tunes\n     * @returns {Element}\n     */\n    render(toolData: ImageToolData): HTMLElement {\n        const wrapper = make(\"div\", this.CSS.wrapper);\n\n        this.buttons = [];\n\n        const tunes = Tunes.tunes.concat(this.actions);\n\n        tunes.forEach(tune => {\n            const title = this.api.i18n.t(tune.title);\n            const el = make(\"div\", [this.CSS.buttonBase, this.CSS.button], {\n                innerHTML: tune.icon,\n                title\n            });\n\n            el.addEventListener(\"click\", () => {\n                this.tuneClicked(tune.name, tune.action);\n            });\n\n            el.dataset[\"tune\"] = tune.name;\n            const name = tune.name as keyof ImageToolData;\n            el.classList.toggle(this.CSS.buttonActive, !!toolData[name]);\n\n            this.buttons.push(el);\n\n            this.api.tooltip.onHover(el, title, {\n                placement: \"top\"\n            });\n\n            wrapper.appendChild(el);\n        });\n\n        return wrapper;\n    }\n\n    /**\n     * Clicks to one of the tunes\n     *\n     * @param {string} tuneName - clicked tune name\n     * @param {Function} customFunction - function to execute on click\n     */\n    tuneClicked(tuneName: string, customFunction?: TuneOnChangeCallable): boolean {\n        if (typeof customFunction === \"function\") {\n            if (!customFunction(tuneName)) {\n                return false;\n            }\n        }\n\n        const button = this.buttons.find(el => el.dataset[\"tune\"] === tuneName);\n\n        if (button) {\n            button.classList.toggle(\n                this.CSS.buttonActive,\n                !button.classList.contains(this.CSS.buttonActive)\n            );\n        }\n\n        this.onChange(tuneName);\n        return true;\n    }\n}\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/components/RichTextEditor/tools/image/ui.d.ts

@@ -4,6 +4,8 @@ interface OnSelectFileCallable {
     (): void;
 }
 interface UiStatus {
+    EMPTY: "empty";
+    FILLED: "filled";
     [key: string]: string;
 }
 interface UiParams {
@@ -27,7 +29,7 @@ export default class Ui {
         wrapper: HTMLElement;
         imageContainer: HTMLElement;
         fileButton: HTMLElement;
-        imageEl: HTMLElement;
+        imageEl?: HTMLElement;
         caption: HTMLElement;
     };
     /**
@@ -114,5 +116,5 @@ export default class Ui {
  * @param  {object} attributes        - any attributes
  * @returns {HTMLElement}
  */
-export declare const make: (tagName: string, classNames?: string[] | string, attributes?: Record<string, string | number | boolean>) => HTMLElement;
+export declare const make: (tagName: string, classNames?: string[] | string | null, attributes?: Record<string, string | number | boolean> | undefined) => HTMLElement;
 export {};

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

@@ -56,7 +56,7 @@ var Ui = /*#__PURE__*/function () {
      *  </wrapper>
      */
 
-    this.nodes.caption.dataset.placeholder = this.config.captionPlaceholder;
+    this.nodes.caption.dataset["placeholder"] = this.config.captionPlaceholder;
     this.nodes.wrapper.appendChild(this.nodes.imageContainer);
     this.nodes.wrapper.appendChild(this.nodes.caption);
     this.nodes.wrapper.appendChild(this.nodes.fileButton);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ui.ts"],"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"],"mappings":"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","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"]}

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

@@ -136,14 +136,10 @@ declare class Paragraph {
     drawView(): HTMLElement;
     /**
      * Return Tool's view
-     *
-     * @returns {HTMLDivElement}
      */
     render(): HTMLDivElement;
     /**
      * Create Block's settings block
-     *
-     * @returns {HTMLElement}
      */
     renderSettings(): HTMLElement;
     /**
@@ -170,8 +166,8 @@ declare class Paragraph {
      */
     save(toolsContent: HTMLElement): {
         text: string;
-        textAlign: TextAlign.START;
-        className: string;
+        textAlign: TextAlign;
+        className: string | undefined;
     };
     /**
      * Extract textAlign from className
@@ -179,7 +175,7 @@ declare class Paragraph {
      * @param {string} className - heading element className
      * @returns {TextAlign} textAlign
      */
-    getTextAlign(className: string): TextAlign.START;
+    getTextAlign(className: string): TextAlign;
     /**
      * On paste callback fired from Editor.
      *

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

@@ -191,7 +191,7 @@ var Paragraph = /*#__PURE__*/function () {
   }, {
     key: "drawView",
     value: function drawView() {
-      var div = document.createElement("DIV");
+      var div = document.createElement("div");
       div.classList.add(this._CSS.wrapper, this._CSS.block); // Add custom className to view.
 
       if (this._data.className) {
@@ -199,7 +199,7 @@ var Paragraph = /*#__PURE__*/function () {
       }
 
       div.contentEditable = "false";
-      div.dataset.placeholder = this.api.i18n.t(this._placeholder);
+      div.dataset["placeholder"] = this.api.i18n.t(this._placeholder);
 
       if (!this.readOnly) {
         div.contentEditable = "true";
@@ -210,8 +210,6 @@ var Paragraph = /*#__PURE__*/function () {
     }
     /**
      * Return Tool's view
-     *
-     * @returns {HTMLDivElement}
      */
 
   }, {
@@ -221,8 +219,6 @@ var Paragraph = /*#__PURE__*/function () {
     }
     /**
      * Create Block's settings block
-     *
-     * @returns {HTMLElement}
      */
 
   }, {
@@ -230,10 +226,10 @@ var Paragraph = /*#__PURE__*/function () {
     value: function renderSettings() {
       var _this3 = this;
 
-      var holder = document.createElement("DIV"); // Add alignment selectors
+      var holder = document.createElement("div"); // Add alignment selectors
 
       this.alignments.forEach(function (alignment) {
-        var selectTypeButton = document.createElement("SPAN");
+        var selectTypeButton = document.createElement("span");
         selectTypeButton.classList.add(_this3._CSS.settingsButton);
         /**
          * Highlight current level button
@@ -252,7 +248,7 @@ var Paragraph = /*#__PURE__*/function () {
          * Save alignment to its button
          */
 
-        selectTypeButton.dataset.textAlign = alignment.name;
+        selectTypeButton.dataset["textAlign"] = alignment.name;
         /**
          * Set up click handler
          */
@@ -403,7 +399,7 @@ var Paragraph = /*#__PURE__*/function () {
        */
 
       this.settingsButtons.forEach(function (button) {
-        button.classList.toggle(_this4._CSS.settingsButtonActive, button.dataset.textAlign === alignment.name);
+        button.classList.toggle(_this4._CSS.settingsButtonActive, button.dataset["textAlign"] === alignment.name);
       });
     }
     /**

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["ALIGNMENTS","TextAlign","ALIGNMENT_ICONS","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","text","innerHTML","forEach","alignment","name","textAlign","classList","add","remove","className","split","find","START","svg","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"],"mappings":"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","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"]}

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

@@ -1,3 +1,4 @@
+/// <reference types="web" />
 import { API } from "@editorjs/editorjs";
 interface Config {
     themeColors: string[];
@@ -6,6 +7,13 @@ interface TextColorToolParams {
     api: API;
     config: Config;
 }
+interface SanitizeResultSpanResult {
+    class?: string;
+    style?: CSSStyleDeclaration;
+}
+interface SanitizeResult {
+    span: (element: HTMLElement) => SanitizeResultSpanResult;
+}
 declare class TextColorTool {
     private _state;
     private color;
@@ -23,7 +31,7 @@ declare class TextColorTool {
      * @returns {object} sanitizer configuration.
      * https://editorjs.io/sanitizer
      */
-    static get sanitize(): Record<string, any>;
+    static get sanitize(): SanitizeResult;
     get state(): boolean;
     set state(state: boolean);
     /**

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

@@ -30,6 +30,7 @@ var TextColorTool = /*#__PURE__*/function () {
 
     this.api = api;
     this.button = null;
+    this.colorPicker = null;
     this._state = false;
     this.tag = "SPAN";
     this.color = "red";
@@ -51,6 +52,11 @@ var TextColorTool = /*#__PURE__*/function () {
     },
     set: function set(state) {
       this._state = state;
+
+      if (!this.button) {
+        return;
+      }
+
       this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);
     }
     /**
@@ -94,16 +100,27 @@ var TextColorTool = /*#__PURE__*/function () {
             _this.color = color;
           }
 
-          _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
+          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);
-        }); // save element
+        });
+
+        if (!_this.colorPicker) {
+          return;
+        } // save element
+
 
         _this.colorPicker.appendChild(colorBox);
       }); // Return element
@@ -140,7 +157,11 @@ var TextColorTool = /*#__PURE__*/function () {
     value: function unwrap(range) {
       var mark = this.api.selection.findParentTag(this.tag, this.class);
       var text = range.extractContents();
-      mark.remove();
+
+      if (mark) {
+        mark.remove();
+      }
+
       range.insertNode(text);
     }
   }, {
@@ -148,6 +169,10 @@ var TextColorTool = /*#__PURE__*/function () {
     value: function showActions(mark) {
       var _this2 = this;
 
+      if (!this.colorPicker) {
+        return;
+      }
+
       this.colorPicker.onclick = function () {
         mark.style.color = _this2.color;
       };
@@ -157,6 +182,10 @@ var TextColorTool = /*#__PURE__*/function () {
   }, {
     key: "hideActions",
     value: function hideActions() {
+      if (!this.colorPicker) {
+        return;
+      }
+
       this.colorPicker.onchange = null;
       this.colorPicker.hidden = true;
     }
@@ -171,7 +200,7 @@ var TextColorTool = /*#__PURE__*/function () {
       var mark = this.api.selection.findParentTag(this.tag);
       this.state = !!mark;
 
-      if (this.state) {
+      if (!!mark) {
         this.showActions(mark);
       } else {
         this.hideActions();
@@ -181,6 +210,11 @@ var TextColorTool = /*#__PURE__*/function () {
     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);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"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"],"mappings":"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","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"]}