@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.1e66d121db

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

@@ -1,7 +1,19 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.make = exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 /**
  * Class for working with UI:
@@ -11,30 +23,23 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 var Ui = /*#__PURE__*/function () {
   /**
-   * @param {object} ui - image tool Ui module
-   * @param {object} ui.api - Editor.js API
-   * @param {ImageConfig} ui.config - user config
-   * @param {Function} ui.onSelectFile - callback for clicks on Select file button
-   * @param {boolean} ui.readOnly - read-only mode flag
+   * @param ui - image tool Ui module
+   * @param ui.api - Editor.js API
+   * @param ui.config - user config
+   * @param ui.onSelectFile - callback for clicks on Select file button
+   * @param ui.readOnly - read-only mode flag
    */
   function Ui(_ref) {
     var api = _ref.api,
         config = _ref.config,
         onSelectFile = _ref.onSelectFile,
         readOnly = _ref.readOnly;
-
-    _classCallCheck(this, Ui);
-
-    _defineProperty(this, "api", void 0);
-
-    _defineProperty(this, "config", void 0);
-
-    _defineProperty(this, "readOnly", void 0);
-
-    _defineProperty(this, "onSelectFile", void 0);
-
-    _defineProperty(this, "nodes", void 0);
-
+    (0, _classCallCheck2.default)(this, Ui);
+    (0, _defineProperty2.default)(this, "api", void 0);
+    (0, _defineProperty2.default)(this, "config", void 0);
+    (0, _defineProperty2.default)(this, "readOnly", void 0);
+    (0, _defineProperty2.default)(this, "onSelectFile", void 0);
+    (0, _defineProperty2.default)(this, "nodes", void 0);
     this.api = api;
     this.config = config;
     this.onSelectFile = onSelectFile;
@@ -56,7 +61,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);
@@ -68,7 +73,7 @@ var Ui = /*#__PURE__*/function () {
    */
 
 
-  _createClass(Ui, [{
+  (0, _createClass2.default)(Ui, [{
     key: "CSS",
     get: function get() {
       return {
@@ -204,9 +209,11 @@ var Ui = /*#__PURE__*/function () {
   }, {
     key: "fillCaption",
     value: function fillCaption(text) {
-      if (this.nodes.caption) {
-        this.nodes.caption.innerHTML = text;
+      if (!this.nodes.caption) {
+        return;
       }
+
+      this.nodes.caption.innerHTML = text;
     }
     /**
      * Changes UI status
@@ -219,9 +226,12 @@ var Ui = /*#__PURE__*/function () {
     key: "toggleStatus",
     value: function toggleStatus(status) {
       for (var statusType in Ui.status) {
-        if (Object.prototype.hasOwnProperty.call(Ui.status, statusType)) {
-          this.nodes.wrapper.classList.toggle("".concat(this.CSS.wrapper, "--").concat(Ui.status[statusType]), status === Ui.status[statusType]);
+        if (Object.prototype.hasOwnProperty.call(Ui.status, statusType) === false) {
+          continue;
         }
+
+        var newStatus = Ui.status[statusType];
+        this.nodes.wrapper.classList.toggle("".concat(this.CSS.wrapper, "--").concat(newStatus), status === newStatus);
       }
     }
     /**
@@ -246,7 +256,6 @@ var Ui = /*#__PURE__*/function () {
       };
     }
   }]);
-
   return Ui;
 }();
 /**
@@ -255,27 +264,38 @@ var Ui = /*#__PURE__*/function () {
  * @param  {string} tagName           - new Element tag name
  * @param  {Array|string} classNames  - list or name of CSS class
  * @param  {object} attributes        - any attributes
- * @returns {Element}
+ * @returns {HTMLElement}
  */
 
 
-export { Ui as default };
-export var make = function make(tagName) {
+exports.default = Ui;
+
+var make = function make(tagName) {
   var classNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var attributes = arguments.length > 2 ? arguments[2] : undefined;
   var el = document.createElement(tagName);
 
   if (Array.isArray(classNames)) {
     var _el$classList;
 
-    (_el$classList = el.classList).add.apply(_el$classList, _toConsumableArray(classNames));
+    (_el$classList = el.classList).add.apply(_el$classList, (0, _toConsumableArray2.default)(classNames));
   } else if (classNames) {
     el.classList.add(classNames);
   }
 
+  if (!attributes) {
+    return el;
+  }
+
   for (var attrName in attributes) {
+    /**
+     * Unfortunately it is a problem to map attributes to element because element is complaining
+     * that attrName is a string, which cannot index the HTMLElement
+     */
     el[attrName] = attributes[attrName];
   }
 
   return el;
-};
+};
+
+exports.make = make;

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

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

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

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

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

@@ -1,16 +1,27 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { ALIGNMENTS, TextAlign, ALIGNMENT_ICONS } from "../utils";
-/**
- * @typedef {object} ParagraphConfig
- * @property {string} placeholder - placeholder for the empty paragraph
- * @property {boolean} preserveBlank - Whether or not to keep blank paragraphs when saving editor data`
- */
+"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
    *
@@ -25,31 +36,17 @@ var Paragraph = /*#__PURE__*/function () {
         config = _ref.config,
         api = _ref.api,
         readOnly = _ref.readOnly;
-
-    _classCallCheck(this, Paragraph);
-
-    _defineProperty(this, "api", void 0);
-
-    _defineProperty(this, "readOnly", void 0);
-
-    _defineProperty(this, "_CSS", void 0);
-
-    _defineProperty(this, "_settings", void 0);
-
-    _defineProperty(this, "_data", void 0);
-
-    _defineProperty(this, "_element", void 0);
-
-    _defineProperty(this, "_placeholder", void 0);
-
-    _defineProperty(this, "_preserveBlank", void 0);
-
-    _defineProperty(this, "alignments", void 0);
-
-    _defineProperty(this, "settingsButtons", void 0);
-
-    _defineProperty(this, "typography", void 0);
-
+    (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;
@@ -74,8 +71,9 @@ var Paragraph = /*#__PURE__*/function () {
     this._element = this.drawView();
     this._preserveBlank = config.preserveBlank !== undefined ? config.preserveBlank : false;
     this.settingsButtons = [];
-    this.alignments = ALIGNMENTS;
-    this.data = this.normalizeData(data);
+    this.alignments = _utils.ALIGNMENTS; // Call the `data` setter, to properly render the view element.
+
+    this.data = this._data;
   }
   /**
    * Default placeholder for Paragraph Tool
@@ -85,7 +83,7 @@ var Paragraph = /*#__PURE__*/function () {
    */
 
 
-  _createClass(Paragraph, [{
+  (0, _createClass2.default)(Paragraph, [{
     key: "data",
     get:
     /**
@@ -96,7 +94,7 @@ var Paragraph = /*#__PURE__*/function () {
     function get() {
       var text = this._element.innerHTML; // this._data.text = text;
 
-      return _objectSpread(_objectSpread({}, this._data), {}, {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this._data), {}, {
         text: text
       });
     }
@@ -132,7 +130,7 @@ var Paragraph = /*#__PURE__*/function () {
       if (this._data.className) {
         var _this$_element$classL;
 
-        (_this$_element$classL = this._element.classList).add.apply(_this$_element$classL, _toConsumableArray(this._data.className.split(" ")));
+        (_this$_element$classL = this._element.classList).add.apply(_this$_element$classL, (0, _toConsumableArray2.default)(this._data.className.split(" ")));
       }
     }
     /**
@@ -159,8 +157,8 @@ var Paragraph = /*#__PURE__*/function () {
 
       if (!alignment) {
         alignment = {
-          name: TextAlign.START,
-          svg: ALIGNMENT_ICONS.start
+          name: _utils.TextAlign.START,
+          svg: _utils.ALIGNMENT_ICONS.start
         };
       }
 
@@ -195,7 +193,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) {
@@ -203,7 +201,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";
@@ -214,8 +212,6 @@ var Paragraph = /*#__PURE__*/function () {
     }
     /**
      * Return Tool's view
-     *
-     * @returns {HTMLDivElement}
      */
 
   }, {
@@ -225,8 +221,6 @@ var Paragraph = /*#__PURE__*/function () {
     }
     /**
      * Create Block's settings block
-     *
-     * @returns {HTMLElement}
      */
 
   }, {
@@ -234,10 +228,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
@@ -256,7 +250,7 @@ var Paragraph = /*#__PURE__*/function () {
          * Save alignment to its button
          */
 
-        selectTypeButton.dataset.textAlign = alignment.name;
+        selectTypeButton.dataset["textAlign"] = alignment.name;
         /**
          * Set up click handler
          */
@@ -320,9 +314,9 @@ var Paragraph = /*#__PURE__*/function () {
   }, {
     key: "merge",
     value: function merge(data) {
-      this.data = {
+      this.data = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.data), {}, {
         text: this.data.text + data.text
-      };
+      });
     }
     /**
      * Validate Paragraph block data:
@@ -364,7 +358,7 @@ var Paragraph = /*#__PURE__*/function () {
   }, {
     key: "getTextAlign",
     value: function getTextAlign(className) {
-      var textAlign = TextAlign.START; // Match className with alignment
+      var textAlign = _utils.TextAlign.START; // Match className with alignment
 
       this.alignments.forEach(function (alignment) {
         if (className.includes("ce-header-text--".concat(alignment.name))) {
@@ -382,10 +376,10 @@ var Paragraph = /*#__PURE__*/function () {
   }, {
     key: "onPaste",
     value: function onPaste(event) {
-      var data = {
-        text: event.detail.data.innerHTML
-      };
-      this.data = data;
+      var detail = event.detail;
+      this.data = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.data), {}, {
+        text: detail.data.innerHTML
+      });
     }
     /**
      * Callback for Block's settings buttons
@@ -407,7 +401,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);
       });
     }
     /**
@@ -444,7 +438,7 @@ var Paragraph = /*#__PURE__*/function () {
       }
 
       newData.text = data.text || "";
-      newData.textAlign = data.textAlign || TextAlign.START;
+      newData.textAlign = data.textAlign || _utils.TextAlign.START;
       newData.className = data.className || "";
       return newData;
     }
@@ -513,8 +507,8 @@ var Paragraph = /*#__PURE__*/function () {
       };
     }
   }]);
-
   return Paragraph;
 }();
 
-export default Paragraph;
+var _default = Paragraph;
+exports.default = _default;