@webiny/app-admin 0.0.0-ee-vpcs.549378cf03

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

@@ -0,0 +1,514 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+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 _utils = require("../utils");
+
+var Paragraph = /*#__PURE__*/function () {
+  // private readonly _settings: any;
+
+  /**
+   * Render plugin`s main Element and fill it with saved data
+   *
+   * @param {object} params - constructor params
+   * @param {ParagraphData} params.data - previously saved data
+   * @param {ParagraphConfig} params.config - user config for Tool
+   * @param {object} params.api - editor.js api
+   * @param {boolean} readOnly - read only mode flag
+   */
+  function Paragraph(_ref) {
+    var data = _ref.data,
+        config = _ref.config,
+        api = _ref.api,
+        readOnly = _ref.readOnly;
+    (0, _classCallCheck2.default)(this, Paragraph);
+    (0, _defineProperty2.default)(this, "api", void 0);
+    (0, _defineProperty2.default)(this, "readOnly", void 0);
+    (0, _defineProperty2.default)(this, "_CSS", void 0);
+    (0, _defineProperty2.default)(this, "_data", void 0);
+    (0, _defineProperty2.default)(this, "_element", void 0);
+    (0, _defineProperty2.default)(this, "_placeholder", void 0);
+    (0, _defineProperty2.default)(this, "_preserveBlank", void 0);
+    (0, _defineProperty2.default)(this, "alignments", void 0);
+    (0, _defineProperty2.default)(this, "settingsButtons", void 0);
+    (0, _defineProperty2.default)(this, "typography", void 0);
+    this.api = api;
+    this.readOnly = readOnly;
+    this.typography = config.typography || null;
+    this._CSS = {
+      block: this.api.styles.block,
+      settingsButton: this.api.styles.settingsButton,
+      settingsButtonActive: this.api.styles.settingsButtonActive,
+      wrapper: "ce-paragraph"
+    };
+
+    if (!this.readOnly) {
+      this.onKeyUp = this.onKeyUp.bind(this);
+    }
+    /**
+     * Placeholder for paragraph if it is first Block
+     * @type {string}
+     */
+
+
+    this._placeholder = config.placeholder ? config.placeholder : Paragraph.DEFAULT_PLACEHOLDER;
+    this._data = this.normalizeData(data);
+    this._element = this.drawView();
+    this._preserveBlank = config.preserveBlank !== undefined ? config.preserveBlank : false;
+    this.settingsButtons = [];
+    this.alignments = _utils.ALIGNMENTS; // Call the `data` setter, to properly render the view element.
+
+    this.data = this._data;
+  }
+  /**
+   * Default placeholder for Paragraph Tool
+   *
+   * @return {string}
+   * @constructor
+   */
+
+
+  (0, _createClass2.default)(Paragraph, [{
+    key: "data",
+    get:
+    /**
+     * Get current Tools`s data
+     * @returns {ParagraphData} Current data
+     * @private
+     */
+    function get() {
+      var text = this._element.innerHTML; // this._data.text = text;
+
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this._data), {}, {
+        text: text
+      });
+    }
+    /**
+     * Store data in plugin:
+     * - at the this._data property
+     * - at the HTML
+     *
+     * @param {ParagraphData} data — data to set
+     * @private
+     */
+    ,
+    set: function set(data) {
+      var _this = this;
+
+      this._data = data || {};
+      this._element.innerHTML = this._data.text || "";
+      /**
+       * Add Alignment class
+       */
+
+      this.alignments.forEach(function (alignment) {
+        if (alignment.name === _this._data.textAlign) {
+          _this._element.classList.add("ce-header-text--".concat(alignment.name));
+        } else {
+          _this._element.classList.remove("ce-header-text--".concat(alignment.name));
+        }
+      });
+      /**
+       * Add Typography class
+       */
+
+      if (this._data.className) {
+        var _this$_element$classL;
+
+        (_this$_element$classL = this._element.classList).add.apply(_this$_element$classL, (0, _toConsumableArray2.default)(this._data.className.split(" ")));
+      }
+    }
+    /**
+     * Used by Editor paste handling API.
+     * Provides configuration to handle P tags.
+     *
+     * @returns {{tags: string[]}}
+     */
+
+  }, {
+    key: "currentAlignment",
+    get:
+    /**
+     * Get current alignment
+     *
+     * @returns {alignment}
+     */
+    function get() {
+      var _this2 = this;
+
+      var alignment = this.alignments.find(function (alignment) {
+        return alignment.name === _this2._data.textAlign;
+      });
+
+      if (!alignment) {
+        alignment = {
+          name: _utils.TextAlign.START,
+          svg: _utils.ALIGNMENT_ICONS.start
+        };
+      }
+
+      return alignment;
+    }
+    /**
+     * Check if text content is empty and set empty string to inner html.
+     * We need this because some browsers (e.g. Safari) insert <br> into empty contentEditable elements
+     *
+     * @param {KeyboardEvent} e - key up event
+     */
+
+  }, {
+    key: "onKeyUp",
+    value: function onKeyUp(e) {
+      if (e.code !== "Backspace" && e.code !== "Delete") {
+        return;
+      }
+
+      var textContent = this._element.textContent;
+
+      if (textContent === "") {
+        this._element.innerHTML = "";
+      }
+    }
+    /**
+     * Create Tool's view
+     * @return {HTMLElement}
+     * @private
+     */
+
+  }, {
+    key: "drawView",
+    value: function drawView() {
+      var div = document.createElement("div");
+      div.classList.add(this._CSS.wrapper, this._CSS.block); // Add custom className to view.
+
+      if (this._data.className) {
+        div.classList.add(this._data.className);
+      }
+
+      div.contentEditable = "false";
+      div.dataset["placeholder"] = this.api.i18n.t(this._placeholder);
+
+      if (!this.readOnly) {
+        div.contentEditable = "true";
+        div.addEventListener("keyup", this.onKeyUp);
+      }
+
+      return div;
+    }
+    /**
+     * Return Tool's view
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      return this._element;
+    }
+    /**
+     * Create Block's settings block
+     */
+
+  }, {
+    key: "renderSettings",
+    value: function renderSettings() {
+      var _this3 = this;
+
+      var holder = document.createElement("div"); // Add alignment selectors
+
+      this.alignments.forEach(function (alignment) {
+        var selectTypeButton = document.createElement("span");
+        selectTypeButton.classList.add(_this3._CSS.settingsButton);
+        /**
+         * Highlight current level button
+         */
+
+        if (_this3.currentAlignment.name === alignment.name) {
+          selectTypeButton.classList.add(_this3._CSS.settingsButtonActive);
+        }
+        /**
+         * Add SVG icon
+         */
+
+
+        selectTypeButton.innerHTML = alignment.svg;
+        /**
+         * Save alignment to its button
+         */
+
+        selectTypeButton.dataset["textAlign"] = alignment.name;
+        /**
+         * Set up click handler
+         */
+
+        selectTypeButton.addEventListener("click", function () {
+          _this3.setAlignment(alignment);
+        });
+        /**
+         * Append settings button to holder
+         */
+
+        holder.appendChild(selectTypeButton);
+        /**
+         * Save settings buttons
+         */
+
+        _this3.settingsButtons.push(selectTypeButton);
+      }); // Add `Typography` selector
+
+      if (this.typography) {
+        var typographyForParagraph = Object.values(this.typography).filter(function (item) {
+          return item.component === "p";
+        });
+        var selectTypeButton = document.createElement("SELECT"); // Add editor's default input style
+
+        selectTypeButton.classList.add(this.api.styles.input); // Add typography options
+
+        typographyForParagraph.forEach(function (item) {
+          var option = new Option(item.label, item.className);
+          selectTypeButton.appendChild(option);
+        }); // Add "onclick" handler
+
+        selectTypeButton.onclick = function (event) {
+          var _ref2 = event.target,
+              value = _ref2.value;
+
+          _this3.setTypographyClass(value);
+        };
+        /**
+         * Append settings button to holder
+         */
+
+
+        holder.appendChild(selectTypeButton);
+        /**
+         * Save settings buttons
+         */
+
+        this.settingsButtons.push(selectTypeButton);
+      }
+
+      return holder;
+    }
+    /**
+     * Method that specified how to merge two Text blocks.
+     * Called by Editor.js by backspace at the beginning of the Block
+     * @param {ParagraphData} data
+     * @public
+     */
+
+  }, {
+    key: "merge",
+    value: function merge(data) {
+      this.data = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.data), {}, {
+        text: this.data.text + data.text
+      });
+    }
+    /**
+     * Validate Paragraph block data:
+     * - check for emptiness
+     *
+     * @param {ParagraphData} savedData — data received after saving
+     * @returns {boolean} false if saved data is not correct, otherwise true
+     * @public
+     */
+
+  }, {
+    key: "validate",
+    value: function validate(savedData) {
+      return !(savedData.text.trim() === "" && !this._preserveBlank);
+    }
+    /**
+     * Extract Tool's data from the view
+     * @param {HTMLDivElement} toolsContent - Paragraph tools rendered view
+     * @returns {ParagraphData} - saved data
+     * @public
+     */
+
+  }, {
+    key: "save",
+    value: function save(toolsContent) {
+      return {
+        text: toolsContent.innerHTML,
+        textAlign: this.getTextAlign(toolsContent.className),
+        className: this.data.className
+      };
+    }
+    /**
+     * Extract textAlign from className
+     *
+     * @param {string} className - heading element className
+     * @returns {TextAlign} textAlign
+     */
+
+  }, {
+    key: "getTextAlign",
+    value: function getTextAlign(className) {
+      var textAlign = _utils.TextAlign.START; // Match className with alignment
+
+      this.alignments.forEach(function (alignment) {
+        if (className.includes("ce-header-text--".concat(alignment.name))) {
+          textAlign = alignment.name;
+        }
+      });
+      return textAlign;
+    }
+    /**
+     * On paste callback fired from Editor.
+     *
+     * @param {PasteEvent} event - event with pasted data
+     */
+
+  }, {
+    key: "onPaste",
+    value: function onPaste(event) {
+      var detail = event.detail;
+      this.data = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.data), {}, {
+        text: detail.data.innerHTML
+      });
+    }
+    /**
+     * Callback for Block's settings buttons
+     *
+     * @param {number} alignment - level to set
+     */
+
+  }, {
+    key: "setAlignment",
+    value: function setAlignment(alignment) {
+      var _this4 = this;
+
+      this.data = {
+        textAlign: alignment.name,
+        text: this.data.text
+      };
+      /**
+       * Highlight button by selected level
+       */
+
+      this.settingsButtons.forEach(function (button) {
+        button.classList.toggle(_this4._CSS.settingsButtonActive, button.dataset["textAlign"] === alignment.name);
+      });
+    }
+    /**
+     * Callback for Block's settings buttons
+     *
+     * @param {string} className - name of typography class
+     */
+
+  }, {
+    key: "setTypographyClass",
+    value: function setTypographyClass(className) {
+      this.data = {
+        textAlign: this.data.textAlign,
+        text: this.data.text,
+        className: className
+      };
+    }
+    /**
+     * Normalize input data
+     *
+     * @param {HeaderData} data - saved data to process
+     *
+     * @returns {HeaderData}
+     * @private
+     */
+
+  }, {
+    key: "normalizeData",
+    value: function normalizeData(data) {
+      var newData = {};
+
+      if (typeof data !== "object") {
+        data = {};
+      }
+
+      newData.text = data.text || "";
+      newData.textAlign = data.textAlign || _utils.TextAlign.START;
+      newData.className = data.className || "";
+      return newData;
+    }
+  }], [{
+    key: "DEFAULT_PLACEHOLDER",
+    get: function get() {
+      return "";
+    }
+    /**
+     * Enable Conversion Toolbar. Paragraph can be converted to/from other tools
+     */
+
+  }, {
+    key: "conversionConfig",
+    get: function get() {
+      return {
+        export: "text",
+        // to convert Paragraph to other block, use 'text' property of saved data
+        import: "text" // to covert other block's exported string to Paragraph, fill 'text' property of tool data
+
+      };
+    }
+    /**
+     * Sanitizer rules
+     */
+
+  }, {
+    key: "sanitize",
+    get: function get() {
+      return {
+        text: {
+          br: true
+        }
+      };
+    }
+    /**
+     * Returns true to notify the core that read-only mode is supported
+     *
+     * @return {boolean}
+     */
+
+  }, {
+    key: "isReadOnlySupported",
+    get: function get() {
+      return true;
+    }
+  }, {
+    key: "pasteConfig",
+    get: function get() {
+      return {
+        tags: ["P"]
+      };
+    }
+    /**
+     * Icon and title for displaying at the Toolbox
+     *
+     * @return {{icon: string, title: string}}
+     */
+
+  }, {
+    key: "toolbox",
+    get: function get() {
+      return {
+        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.2 -0.3 9 11.4" width="12" height="14">\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' + "</svg>",
+        title: "Text"
+      };
+    }
+  }]);
+  return Paragraph;
+}();
+
+var _default = Paragraph;
+exports.default = _default;

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

@@ -0,0 +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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"}

package/components/RichTextEditor/tools/paragraph/styles.scss

@@ -0,0 +1,29 @@
+.ce-paragraph {
+  line-height: 1.6em;
+  outline: none;
+}
+
+.ce-paragraph[data-placeholder]:empty::before {
+  content: attr(data-placeholder);
+  color: #707684;
+  font-weight: normal;
+  opacity: 0;
+}
+
+/** Show placeholder at the first paragraph if Editor is empty */
+.codex-editor--empty .ce-block:first-of-type .ce-paragraph[data-placeholder]:empty::before {
+  opacity: 1;
+}
+
+.codex-editor--toolbox-opened .ce-block:first-of-type .ce-paragraph[data-placeholder]:empty::before,
+.codex-editor--empty .ce-block:first-of-type .ce-paragraph[data-placeholder]:empty:focus::before {
+  opacity: 0;
+}
+
+.ce-paragraph p:first-of-type {
+  margin-top: 0;
+}
+
+.ce-paragraph p:last-of-type {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+/// <reference types="web" />
+/// <reference types="web" />
+import { API } from "@editorjs/editorjs";
+interface Config {
+    themeColors: string[];
+}
+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;
+    private readonly api;
+    private readonly tag;
+    private readonly class;
+    private colorPicker;
+    private button;
+    private readonly config;
+    private readonly _CSS;
+    constructor({ api, config }: TextColorToolParams);
+    static get isInline(): boolean;
+    /**
+     * 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(): SanitizeResult;
+    get state(): boolean;
+    set state(state: boolean);
+    /**
+     * Render method must return HTML element of the button for Inline Toolbar.
+     */
+    render(): HTMLButtonElement;
+    /**
+     * Input for the link
+     */
+    renderActions(): HTMLElement;
+    /**
+     * Finally, when button is pressed Editor calls
+     * surround method of the tool with Range object as an argument.
+     */
+    surround(range: Range): void;
+    wrap(range: Range): void;
+    unwrap(range: Range): void;
+    showActions(mark: HTMLElement): void;
+    hideActions(): void;
+    /**
+     * CheckState method of each Inline Tool is called by Editor with current `Selection`
+     * when user selects some text
+     */
+    checkState(): void;
+    convertToHex(color: string): string;
+    clear(): void;
+}
+export default TextColorTool;