@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.06b2ede40f

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

@@ -1,16 +1,20 @@
-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`
  */
 
-var Paragraph = /*#__PURE__*/function () {
+/**
+ * @typedef {Object} ParagraphData
+ * @description Tool's input and output data format
+ * @property {String} text — Paragraph's content. Can include HTML tags: <a><b><i>
+ */
+
+class Paragraph {
+  // private readonly _settings: any;
+
   /**
    * Render plugin`s main Element and fill it with saved data
    *
@@ -20,36 +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;
-
-    _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);
-
+  constructor({
+    data,
+    config,
+    api,
+    readOnly
+  }) {
     this.api = api;
     this.readOnly = readOnly;
     this.typography = config.typography || null;
@@ -59,462 +39,397 @@ var Paragraph = /*#__PURE__*/function () {
       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 = ALIGNMENTS;
-    this.data = this.normalizeData(data);
+
+    // Call the `data` setter, to properly render the view element.
+    this.data = this._data;
   }
+
   /**
    * Default placeholder for Paragraph Tool
    *
    * @return {string}
    * @constructor
    */
+  static get DEFAULT_PLACEHOLDER() {
+    return "";
+  }
 
+  /**
+   * 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
+    };
+  }
 
-  _createClass(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;
+  /**
+   * Sanitizer rules
+   */
+  static get sanitize() {
+    return {
+      text: {
+        br: true
+      }
+    };
+  }
 
-      return _objectSpread(_objectSpread({}, 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;
+  /**
+   * Returns true to notify the core that read-only mode is supported
+   *
+   * @return {boolean}
+   */
+  static get isReadOnlySupported() {
+    return true;
+  }
 
-      this._data = data || {};
-      this._element.innerHTML = this._data.text || "";
-      /**
-       * Add Alignment class
-       */
+  /**
+   * Get current Tools`s data
+   * @returns {ParagraphData} Current data
+   * @private
+   */
+  get data() {
+    const text = this._element.innerHTML;
 
-      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
-       */
+    // this._data.text = text;
 
-      if (this._data.className) {
-        var _this$_element$classL;
+    return {
+      ...this._data,
+      text
+    };
+  }
 
-        (_this$_element$classL = this._element.classList).add.apply(_this$_element$classL, _toConsumableArray(this._data.className.split(" ")));
-      }
-    }
-    /**
-     * Used by Editor paste handling API.
-     * Provides configuration to handle P tags.
-     *
-     * @returns {{tags: string[]}}
-     */
+  /**
+   * 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 || "";
 
-  }, {
-    key: "currentAlignment",
-    get:
     /**
-     * Get current alignment
-     *
-     * @returns {alignment}
+     * Add Alignment class
      */
-    function get() {
-      var _this2 = this;
-
-      var alignment = this.alignments.find(function (alignment) {
-        return alignment.name === _this2._data.textAlign;
-      });
-
-      if (!alignment) {
-        alignment = {
-          name: TextAlign.START,
-          svg: ALIGNMENT_ICONS.start
-        };
+    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}`);
       }
+    });
 
-      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
+     * Add Typography class
      */
-
-  }, {
-    key: "onKeyUp",
-    value: function onKeyUp(e) {
-      if (e.code !== "Backspace" && e.code !== "Delete") {
-        return;
-      }
-
-      var textContent = this._element.textContent;
-
-      if (textContent === "") {
-        this._element.innerHTML = "";
-      }
+    if (this._data.className) {
+      this._element.classList.add(...this._data.className.split(" "));
     }
-    /**
-     * 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);
+  /**
+   * Used by Editor paste handling API.
+   * Provides configuration to handle P tags.
+   *
+   * @returns {{tags: string[]}}
+   */
+  static get pasteConfig() {
+    return {
+      tags: ["P"]
+    };
+  }
 
-      if (!this.readOnly) {
-        div.contentEditable = "true";
-        div.addEventListener("keyup", this.onKeyUp);
-      }
+  /**
+   * 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"
+    };
+  }
 
-      return div;
+  /**
+   * 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 Tool's view
-     *
-     * @returns {HTMLDivElement}
-     */
+    return alignment;
+  }
 
-  }, {
-    key: "render",
-    value: function render() {
-      return this._element;
+  /**
+   * 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;
     }
-    /**
-     * Create Block's settings block
-     *
-     * @returns {HTMLElement}
-     */
-
-  }, {
-    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;
+    const {
+      textContent
+    } = this._element;
+    if (textContent === "") {
+      this._element.innerHTML = "";
     }
-    /**
-     * 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 = {
-        text: this.data.text + data.text
-      };
+  /**
+   * 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);
     }
-    /**
-     * 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);
+    div.contentEditable = "false";
+    div.dataset["placeholder"] = this.api.i18n.t(this._placeholder);
+    if (!this.readOnly) {
+      div.contentEditable = "true";
+      div.addEventListener("keyup", this.onKeyUp);
     }
-    /**
-     * Extract Tool's data from the view
-     * @param {HTMLDivElement} toolsContent - Paragraph tools rendered view
-     * @returns {ParagraphData} - saved data
-     * @public
-     */
+    return div;
+  }
 
-  }, {
-    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
-     */
+  /**
+   * Return Tool's view
+   */
+  render() {
+    return this._element;
+  }
 
-  }, {
-    key: "getTextAlign",
-    value: function getTextAlign(className) {
-      var textAlign = TextAlign.START; // Match className with alignment
+  /**
+   * Create Block's settings block
+   */
+  renderSettings() {
+    const holder = document.createElement("div");
 
-      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
-     */
+    // Add alignment selectors
+    this.alignments.forEach(alignment => {
+      const selectTypeButton = document.createElement("span");
+      selectTypeButton.classList.add(this._CSS.settingsButton);
 
-  }, {
-    key: "onPaste",
-    value: function onPaste(event) {
-      var data = {
-        text: event.detail.data.innerHTML
-      };
-      this.data = data;
-    }
-    /**
-     * Callback for Block's settings buttons
-     *
-     * @param {number} alignment - level to set
-     */
+      /**
+       * Highlight current level button
+       */
+      if (this.currentAlignment.name === alignment.name) {
+        selectTypeButton.classList.add(this._CSS.settingsButtonActive);
+      }
 
-  }, {
-    key: "setAlignment",
-    value: function setAlignment(alignment) {
-      var _this4 = this;
+      /**
+       * Add SVG icon
+       */
+      selectTypeButton.innerHTML = alignment.svg;
 
-      this.data = {
-        textAlign: alignment.name,
-        text: this.data.text
-      };
       /**
-       * Highlight button by selected level
+       * Save alignment to its button
        */
+      selectTypeButton.dataset["textAlign"] = alignment.name;
 
-      this.settingsButtons.forEach(function (button) {
-        button.classList.toggle(_this4._CSS.settingsButtonActive, button.dataset.textAlign === alignment.name);
+      /**
+       * Set up click handler
+       */
+      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);
     }
-    /**
-     * Normalize input data
-     *
-     * @param {HeaderData} data - saved data to process
-     *
-     * @returns {HeaderData}
-     * @private
-     */
+    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
+   */
+  merge(data) {
+    this.data = {
+      ...this.data,
+      text: this.data.text + data.text
+    };
+  }
 
-  }, {
-    key: "normalizeData",
-    value: function normalizeData(data) {
-      var newData = {};
+  /**
+   * 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);
+  }
 
-      if (typeof data !== "object") {
-        data = {};
-      }
+  /**
+   * 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
+    };
+  }
 
-      newData.text = data.text || "";
-      newData.textAlign = data.textAlign || 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
-     */
+  /**
+   * 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;
+      }
+    });
+    return textAlign;
+  }
 
-  }, {
-    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
-     */
+  /**
+   * Callback for Block's settings buttons
+   *
+   * @param {number} alignment - level to set
+   */
+  setAlignment(alignment) {
+    this.data = {
+      textAlign: alignment.name,
+      text: this.data.text
+    };
 
-  }, {
-    key: "sanitize",
-    get: function get() {
-      return {
-        text: {
-          br: true
-        }
-      };
-    }
     /**
-     * Returns true to notify the core that read-only mode is supported
-     *
-     * @return {boolean}
+     * Highlight button by selected level
      */
+    this.settingsButtons.forEach(button => {
+      button.classList.toggle(this._CSS.settingsButtonActive, button.dataset["textAlign"] === alignment.name);
+    });
+  }
 
-  }, {
-    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}}
-     */
+  /**
+   * 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
+    };
+  }
 
-  }, {
-    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"
-      };
+  /**
+   * Normalize input data
+   *
+   * @param {HeaderData} data - saved data to process
+   *
+   * @returns {HeaderData}
+   * @private
+   */
+  normalizeData(data) {
+    const newData = {};
+    if (typeof data !== "object") {
+      data = {};
     }
-  }]);
-
-  return Paragraph;
-}();
+    newData.text = data.text || "";
+    newData.textAlign = data.textAlign || TextAlign.START;
+    newData.className = data.className || "";
+    return newData;
+  }
+}
+export default Paragraph;
 
-export default Paragraph;
+//# sourceMappingURL=index.js.map