@webiny/app-admin 5.43.2 → 6.0.0-alpha.0

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

@@ -1,26 +1,18 @@
-"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 _utils = require("../utils");
+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`
  */
+
 /**
  * @typedef {Object} ParagraphData
  * @description Tool's input and output data format
  * @property {String} text — Paragraph's content. Can include HTML tags: <a><b><i>
  */
-var Paragraph = /*#__PURE__*/function () {
+
+class Paragraph {
   // private readonly _settings: any;
 
   /**
@@ -32,12 +24,12 @@ var Paragraph = /*#__PURE__*/function () {
    * @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);
+  constructor({
+    data,
+    config,
+    api,
+    readOnly
+  }) {
     this.api = api;
     this.readOnly = readOnly;
     this.typography = config.typography || null;
@@ -60,7 +52,7 @@ var Paragraph = /*#__PURE__*/function () {
     this._element = this.drawView();
     this._preserveBlank = config.preserveBlank !== undefined ? config.preserveBlank : false;
     this.settingsButtons = [];
-    this.alignments = _utils.ALIGNMENTS;
+    this.alignments = ALIGNMENTS;
 
     // Call the `data` setter, to properly render the view element.
     this.data = this._data;
@@ -72,416 +64,372 @@ var Paragraph = /*#__PURE__*/function () {
    * @return {string}
    * @constructor
    */
-  return (0, _createClass2.default)(Paragraph, [{
-    key: "data",
-    get:
-    /**
-     * Get current Tools`s data
-     * @returns {ParagraphData} Current data
-     * @private
-     */
-    function get() {
-      var text = this._element.innerHTML;
+  static get DEFAULT_PLACEHOLDER() {
+    return "";
+  }
 
-      // this._data.text = text;
+  /**
+   * Enable Conversion Toolbar. Paragraph can be converted to/from other tools
+   */
+  static get conversionConfig() {
+    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
+    };
+  }
 
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this._data), {}, {
-        text: text
-      });
-    }
+  /**
+   * Sanitizer rules
+   */
+  static get sanitize() {
+    return {
+      text: {
+        br: true
+      }
+    };
+  }
 
-    /**
-     * 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 || "";
+  /**
+   * Returns true to notify the core that read-only mode is supported
+   *
+   * @return {boolean}
+   */
+  static get isReadOnlySupported() {
+    return true;
+  }
 
-      /**
-       * 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));
-        }
-      });
+  /**
+   * Get current Tools`s data
+   * @returns {ParagraphData} Current data
+   * @private
+   */
+  get data() {
+    const text = this._element.innerHTML;
 
-      /**
-       * 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(" ")));
-      }
-    }
+    // this._data.text = text;
 
-    /**
-     * 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;
-    }
+    return {
+      ...this._data,
+      text
+    };
+  }
 
-    /**
-     * 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 = "";
-      }
-    }
+  /**
+   * Store data in plugin:
+   * - at the this._data property
+   * - at the HTML
+   *
+   * @param {ParagraphData} data — data to set
+   * @private
+   */
+  set data(data) {
+    this._data = data || {};
+    this._element.innerHTML = this._data.text || "";
 
     /**
-     * Create Tool's view
-     * @return {HTMLElement}
-     * @private
+     * Add Alignment class
      */
-  }, {
-    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);
+    this.alignments.forEach(alignment => {
+      if (alignment.name === this._data.textAlign) {
+        this._element.classList.add(`ce-header-text--${alignment.name}`);
+      } else {
+        this._element.classList.remove(`ce-header-text--${alignment.name}`);
       }
-      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
+     * Add Typography class
      */
-  }, {
-    key: "render",
-    value: function render() {
-      return this._element;
+    if (this._data.className) {
+      this._element.classList.add(...this._data.className.split(" "));
     }
+  }
 
-    /**
-     * 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);
-      });
+  /**
+   * Used by Editor paste handling API.
+   * Provides configuration to handle P tags.
+   *
+   * @returns {{tags: string[]}}
+   */
+  static get pasteConfig() {
+    return {
+      tags: ["P"]
+    };
+  }
 
-      // 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;
-    }
+  /**
+   * Icon and title for displaying at the Toolbox
+   *
+   * @return {{icon: string, title: string}}
+   */
+  static get toolbox() {
+    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"
+    };
+  }
 
-    /**
-     * 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
-      });
+  /**
+   * Get current alignment
+   *
+   * @returns {alignment}
+   */
+  get currentAlignment() {
+    let alignment = this.alignments.find(alignment => alignment.name === this._data.textAlign);
+    if (!alignment) {
+      alignment = {
+        name: TextAlign.START,
+        svg: ALIGNMENT_ICONS.start
+      };
     }
+    return alignment;
+  }
 
-    /**
-     * 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);
+  /**
+   * 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
+   */
+  onKeyUp(e) {
+    if (e.code !== "Backspace" && e.code !== "Delete") {
+      return;
     }
-
-    /**
-     * 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
-      };
+    const {
+      textContent
+    } = this._element;
+    if (textContent === "") {
+      this._element.innerHTML = "";
     }
+  }
 
-    /**
-     * 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;
+  /**
+   * Create Tool's view
+   * @return {HTMLElement}
+   * @private
+   */
+  drawView() {
+    const 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);
     }
-
-    /**
-     * 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
-      });
+    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;
+  }
 
-    /**
-     * 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
-      };
+  /**
+   * Return Tool's view
+   */
+  render() {
+    return this._element;
+  }
+
+  /**
+   * Create Block's settings block
+   */
+  renderSettings() {
+    const holder = document.createElement("div");
+
+    // Add alignment selectors
+    this.alignments.forEach(alignment => {
+      const selectTypeButton = document.createElement("span");
+      selectTypeButton.classList.add(this._CSS.settingsButton);
+
+      /**
+       * Highlight current level button
+       */
+      if (this.currentAlignment.name === alignment.name) {
+        selectTypeButton.classList.add(this._CSS.settingsButtonActive);
+      }
+
+      /**
+       * Add SVG icon
+       */
+      selectTypeButton.innerHTML = alignment.svg;
+
+      /**
+       * Save alignment to its button
+       */
+      selectTypeButton.dataset["textAlign"] = alignment.name;
 
       /**
-       * Highlight button by selected level
+       * Set up click handler
        */
-      this.settingsButtons.forEach(function (button) {
-        button.classList.toggle(_this4._CSS.settingsButtonActive, button.dataset["textAlign"] === alignment.name);
+      selectTypeButton.addEventListener("click", () => {
+        this.setAlignment(alignment);
       });
-    }
 
-    /**
-     * 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
+      /**
+       * Append settings button to holder
+       */
+      holder.appendChild(selectTypeButton);
+
+      /**
+       * Save settings buttons
+       */
+      this.settingsButtons.push(selectTypeButton);
+    });
+
+    // Add `Typography` selector
+    if (this.typography) {
+      const typographyForParagraph = Object.values(this.typography).filter(item => item.component === "p");
+      const selectTypeButton = document.createElement("SELECT");
+      // Add editor's default input style
+      selectTypeButton.classList.add(this.api.styles.input);
+      // Add typography options
+      typographyForParagraph.forEach(item => {
+        const option = new Option(item.label, item.className);
+        selectTypeButton.appendChild(option);
+      });
+      // Add "onclick" handler
+      selectTypeButton.onclick = event => {
+        const {
+          value
+        } = event.target;
+        this.setTypographyClass(value);
       };
+
+      /**
+       * Append settings button to holder
+       */
+      holder.appendChild(selectTypeButton);
+
+      /**
+       * Save settings buttons
+       */
+      this.settingsButtons.push(selectTypeButton);
     }
+    return holder;
+  }
 
-    /**
-     * 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 = {};
+  /**
+   * 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
+   */
+  merge(data) {
+    this.data = {
+      ...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
+   */
+  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
+   */
+  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
+   */
+  getTextAlign(className) {
+    let textAlign = TextAlign.START;
+    // Match className with alignment
+    this.alignments.forEach(alignment => {
+      if (className.includes(`ce-header-text--${alignment.name}`)) {
+        textAlign = alignment.name;
       }
-      newData.text = data.text || "";
-      newData.textAlign = data.textAlign || _utils.TextAlign.START;
-      newData.className = data.className || "";
-      return newData;
-    }
-  }], [{
-    key: "DEFAULT_PLACEHOLDER",
-    get: function get() {
-      return "";
-    }
+    });
+    return textAlign;
+  }
 
-    /**
-     * 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
-      };
-    }
+  /**
+   * On paste callback fired from Editor.
+   *
+   * @param {PasteEvent} event - event with pasted data
+   */
+  onPaste(event) {
+    const detail = event.detail;
+    this.data = {
+      ...this.data,
+      text: detail.data.innerHTML
+    };
+  }
 
-    /**
-     * Sanitizer rules
-     */
-  }, {
-    key: "sanitize",
-    get: function get() {
-      return {
-        text: {
-          br: true
-        }
-      };
-    }
+  /**
+   * Callback for Block's settings buttons
+   *
+   * @param {number} alignment - level to set
+   */
+  setAlignment(alignment) {
+    this.data = {
+      textAlign: alignment.name,
+      text: this.data.text
+    };
 
     /**
-     * Returns true to notify the core that read-only mode is supported
-     *
-     * @return {boolean}
+     * Highlight button by selected level
      */
-  }, {
-    key: "isReadOnlySupported",
-    get: function get() {
-      return true;
-    }
-  }, {
-    key: "pasteConfig",
-    get: function get() {
-      return {
-        tags: ["P"]
-      };
-    }
+    this.settingsButtons.forEach(button => {
+      button.classList.toggle(this._CSS.settingsButtonActive, button.dataset["textAlign"] === alignment.name);
+    });
+  }
 
-    /**
-     * 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"
-      };
+  /**
+   * Callback for Block's settings buttons
+   *
+   * @param {string} className - name of typography class
+   */
+  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
+   */
+  normalizeData(data) {
+    const newData = {};
+    if (typeof data !== "object") {
+      data = {};
     }
-  }]);
-}();
-var _default = exports.default = Paragraph;
+    newData.text = data.text || "";
+    newData.textAlign = data.textAlign || TextAlign.START;
+    newData.className = data.className || "";
+    return newData;
+  }
+}
+export default Paragraph;
 
 //# sourceMappingURL=index.js.map