@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

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

@@ -1,8 +1,14 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { ALIGNMENTS, ALIGNMENT_ICONS, TextAlign } from "../utils";
-
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 Header = /*#__PURE__*/function () {
   /**
    * Render plugin`s main Element and fill it with saved data
@@ -15,82 +21,71 @@ var Header = /*#__PURE__*/function () {
    */
   function Header(_ref) {
     var data = _ref.data,
-        config = _ref.config,
-        api = _ref.api,
-        readOnly = _ref.readOnly;
-
-    _classCallCheck(this, Header);
-
-    _defineProperty(this, "api", void 0);
-
-    _defineProperty(this, "readOnly", void 0);
-
-    _defineProperty(this, "settingsButtons", void 0);
-
-    _defineProperty(this, "_CSS", void 0);
-
-    _defineProperty(this, "_settings", void 0);
-
-    _defineProperty(this, "_data", void 0);
-
-    _defineProperty(this, "_element", void 0);
-
-    _defineProperty(this, "alignments", void 0);
-
-    _defineProperty(this, "typography", void 0);
-
+      config = _ref.config,
+      api = _ref.api,
+      readOnly = _ref.readOnly;
+    (0, _classCallCheck2.default)(this, Header);
+    (0, _defineProperty2.default)(this, "api", void 0);
+    (0, _defineProperty2.default)(this, "readOnly", void 0);
+    (0, _defineProperty2.default)(this, "settingsButtons", void 0);
+    (0, _defineProperty2.default)(this, "_CSS", void 0);
+    (0, _defineProperty2.default)(this, "_settings", void 0);
+    (0, _defineProperty2.default)(this, "_data", void 0);
+    (0, _defineProperty2.default)(this, "_element", void 0);
+    (0, _defineProperty2.default)(this, "alignments", void 0);
+    (0, _defineProperty2.default)(this, "typography", void 0);
     this.api = api;
     this.readOnly = readOnly;
-    this.alignments = ALIGNMENTS;
+    this.alignments = _utils.ALIGNMENTS;
     /**
      * Import typography from theme
      */
-
     this.typography = config.typography || null;
+
     /**
      * Styles
      *
      * @type {object}
      */
-
     this._CSS = {
       block: this.api.styles.block,
       settingsButton: this.api.styles.settingsButton,
       settingsButtonActive: this.api.styles.settingsButtonActive,
       wrapper: "ce-header"
     };
+
     /**
      * Tool's settings passed from Editor
      *
      * @type {HeaderConfig}
      * @private
      */
-
     this._settings = config;
+
     /**
      * Block's data
      *
      * @type {HeaderData}
      * @private
      */
-
     this._data = this.normalizeData(data);
+
     /**
      * List of settings buttons
      *
      * @type {HTMLElement[]}
      */
-
     this.settingsButtons = [];
+
     /**
      * Main Block wrapper
      *
      * @type {HTMLElement}
      * @private
      */
-
     this._element = this.getTag();
   }
+
   /**
    * Normalize input data
    *
@@ -99,184 +94,176 @@ var Header = /*#__PURE__*/function () {
    * @returns {HeaderData}
    * @private
    */
-
-
-  _createClass(Header, [{
+  (0, _createClass2.default)(Header, [{
     key: "normalizeData",
     value: function normalizeData(data) {
       var newData = {};
-
       if (typeof data !== "object") {
         data = {};
       }
-
       newData.text = data.text || "";
       newData.level = parseInt(data.level) || this.defaultLevel.number;
-      newData.textAlign = data.textAlign || TextAlign.START;
+      newData.textAlign = data.textAlign || _utils.TextAlign.START;
       return newData;
     }
+
     /**
      * Return Tool's view
      *
      * @returns {HTMLHeadingElement}
      * @public
      */
-
   }, {
     key: "render",
     value: function render() {
       return this._element;
     }
+
     /**
      * Create Block's settings block
      *
      * @returns {HTMLElement}
      */
-
   }, {
     key: "renderSettings",
     value: function renderSettings() {
       var _this = this;
+      var holder = document.createElement("DIV");
 
-      var holder = document.createElement("DIV"); // do not add settings button, when only one level is configured
-
+      // do not add settings button, when only one level is configured
       if (this.levels.length <= 1) {
         return holder;
       }
-      /** Add type selectors */
-
 
+      /** Add type selectors */
       this.levels.forEach(function (level) {
         var selectTypeButton = document.createElement("SPAN");
         selectTypeButton.classList.add(_this._CSS.settingsButton);
+
         /**
          * Highlight current level button
          */
-
         if (_this.currentLevel.number === level.number) {
           selectTypeButton.classList.add(_this._CSS.settingsButtonActive);
         }
+
         /**
          * Add SVG icon
          */
-
-
         selectTypeButton.innerHTML = level.svg;
+
         /**
          * Save level to its button
          */
+        selectTypeButton.dataset["level"] = level.number + "";
 
-        selectTypeButton.dataset.level = level.number + "";
         /**
          * Set up click handler
          */
-
         selectTypeButton.addEventListener("click", function () {
           _this.setLevel(level.number);
         });
+
         /**
          * Append settings button to holder
          */
-
         holder.appendChild(selectTypeButton);
+
         /**
          * Save settings buttons
          */
-
         _this.settingsButtons.push(selectTypeButton);
       });
+
       /**
        * Add alignment selectors
        * */
-
       this.alignments.forEach(function (alignment) {
         var 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;
 
-        selectTypeButton.dataset.textAlign = alignment.name;
         /**
          * Set up click handler
          */
-
         selectTypeButton.addEventListener("click", function () {
           _this.setAlignment(alignment);
         });
+
         /**
          * Append settings button to holder
          */
-
         holder.appendChild(selectTypeButton);
+
         /**
          * Save settings buttons
          */
-
         _this.settingsButtons.push(selectTypeButton);
       });
       return holder;
     }
+
     /**
      * Callback for Block's settings buttons
      *
      * @param {number} level - level to set
      */
-
   }, {
     key: "setLevel",
     value: function setLevel(level) {
       var _this2 = this;
-
       this.data = {
         level: level,
         text: this.data.text
       };
+
       /**
        * Highlight button by selected level
        */
-
       this.settingsButtons.forEach(function (button) {
         button.classList.toggle(_this2._CSS.settingsButtonActive, parseInt(button.dataset.level) === level);
       });
     }
+
     /**
      * Callback for Block's settings buttons
      *
      * @param {number} alignment - level to set
      */
-
   }, {
     key: "setAlignment",
     value: function setAlignment(alignment) {
       var _this3 = this;
-
       this.data = {
         textAlign: alignment.name,
         text: this.data.text,
         level: this.data.level
       };
+
       /**
        * Highlight button by selected level
        */
-
       this.settingsButtons.forEach(function (button) {
         button.classList.toggle(_this3._CSS.settingsButtonActive, button.dataset.textAlign === alignment.name);
       });
     }
+
     /**
      * Method that specified how to merge two Text blocks.
      * Called by Editor.js by backspace at the beginning of the Block
@@ -284,17 +271,16 @@ var Header = /*#__PURE__*/function () {
      * @param {HeaderData} data - saved data to merger with current block
      * @public
      */
-
   }, {
     key: "merge",
     value: function merge(data) {
-      var newData = {
+      this.data = {
         text: this.data.text + data.text,
         level: this.data.level,
         alignment: this.data.alignment
       };
-      this.data = newData;
     }
+
     /**
      * Validate Text block data:
      * - check for emptiness
@@ -303,12 +289,12 @@ var Header = /*#__PURE__*/function () {
      * @returns {boolean} false if saved data is not correct, otherwise true
      * @public
      */
-
   }, {
     key: "validate",
     value: function validate(blockData) {
       return blockData.text.trim() !== "";
     }
+
     /**
      * Extract Tool's data from the view
      *
@@ -316,7 +302,6 @@ var Header = /*#__PURE__*/function () {
      * @returns {HeaderData} - saved data
      * @public
      */
-
   }, {
     key: "save",
     value: function save(toolsContent) {
@@ -327,18 +312,18 @@ var Header = /*#__PURE__*/function () {
         className: toolsContent.className
       };
     }
+
     /**
      * Extract textAlign from className
      *
      * @param {string} className - heading element className
      * @returns {TextAlign} textAlign
      */
-
   }, {
     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))) {
           textAlign = alignment.name;
@@ -346,10 +331,10 @@ var Header = /*#__PURE__*/function () {
       });
       return textAlign;
     }
+
     /**
      * Allow Header to be converted to/from other blocks
      */
-
   }, {
     key: "data",
     get:
@@ -365,6 +350,7 @@ var Header = /*#__PURE__*/function () {
       this._data.textAlign = this.currentAlignment.name;
       return this._data;
     }
+
     /**
      * Store data in plugin:
      * - at the this._data property
@@ -372,15 +358,14 @@ var Header = /*#__PURE__*/function () {
      *
      * @param {HeaderData} data — data to set
      * @private
-     */
-    ,
+     */,
     set: function set(data) {
       this._data = this.normalizeData(data);
+
       /**
        * If level is set and block in DOM
        * then replace it to a new block
        */
-
       if (data.level !== undefined && this._element.parentNode) {
         /**
          * Create a new tag
@@ -388,60 +373,57 @@ var Header = /*#__PURE__*/function () {
          * @type {HTMLHeadingElement}
          */
         var newHeader = this.getTag();
+
         /**
          * Save Block's content
          */
-
         newHeader.innerHTML = this._element.innerHTML;
+
         /**
          * Replace blocks
          */
-
         this._element.parentNode.replaceChild(newHeader, this._element);
+
         /**
          * Save new block to private variable
          *
          * @type {HTMLHeadingElement}
          * @private
          */
-
-
         this._element = newHeader;
       }
+
       /**
        * If data.text was passed then update block's content
        */
-
-
       if (data.text !== undefined) {
         this._element.innerHTML = this._data.text || "";
       }
     }
+
     /**
      * Get tag for target level
      * By default returns second-leveled header
      *
      * @returns {HTMLElement}
      */
-
   }, {
     key: "getTag",
     value: function getTag() {
       var _this4 = this;
-
       /**
        * Create element for current Block's level
        */
       var tag = document.createElement(this.currentLevel.tag);
+
       /**
        * Add text to block
        */
-
       tag.innerHTML = this._data.text || "";
+
       /**
        * Add styles class from typography
        */
-
       if (this.typography) {
         var component = this.currentLevel.tag.toLowerCase();
         var typographyConfig = this.typography[component];
@@ -452,88 +434,79 @@ var Header = /*#__PURE__*/function () {
          */
         tag.classList.add(this._CSS.wrapper);
       }
+
       /**
        * Add Alignment class
        */
-
-
       this.alignments.forEach(function (alignment) {
         var textAlignClass = "ce-header-text--".concat(alignment.name);
-
         if (alignment.name === _this4._data.textAlign) {
           tag.classList.add(textAlignClass);
         } else {
           tag.classList.remove(textAlignClass);
         }
       });
+
       /**
        * Make tag editable
        */
-
       tag.contentEditable = this.readOnly ? "false" : "true";
+
       /**
        * Add Placeholder
        */
-
-      tag.dataset.placeholder = this.api.i18n.t(this._settings.placeholder || "");
+      tag.dataset["placeholder"] = this.api.i18n.t(this._settings.placeholder || "");
       return tag;
     }
+
     /**
      * Get current level
      *
      * @returns {level}
      */
-
   }, {
     key: "currentLevel",
     get: function get() {
       var _this5 = this;
-
       var level = this.levels.find(function (levelItem) {
         return levelItem.number === _this5._data.level;
       });
-
       if (!level) {
         level = this.defaultLevel;
       }
-
       return level;
     }
+
     /**
      * Get current alignment
      *
      * @returns {alignment}
      */
-
   }, {
     key: "currentAlignment",
     get: function get() {
       var _this6 = this;
-
       var alignment = this.alignments.find(function (alignment) {
         return alignment.name === _this6._data.textAlign;
       });
-
       if (!alignment) {
         alignment = {
-          name: TextAlign.START,
-          svg: ALIGNMENT_ICONS.start
+          name: _utils.TextAlign.START,
+          svg: _utils.ALIGNMENT_ICONS.start
         };
       }
-
       return alignment;
     }
+
     /**
      * Return default level
      *
      * @returns {level}
      */
-
   }, {
     key: "defaultLevel",
     get: function get() {
       var _this7 = this;
-
       /**
        * User can specify own default level value
        */
@@ -541,22 +514,21 @@ var Header = /*#__PURE__*/function () {
         var userSpecified = this.levels.find(function (levelItem) {
           return levelItem.number === _this7._settings.defaultLevel;
         });
-
         if (userSpecified) {
           return userSpecified;
         } else {
           console.warn("(ง'̀-'́)ง Heading Tool: the default level specified was not found in available levels");
         }
       }
+
       /**
        * With no additional options, there will be H2 by default
        *
        * @type {level}
        */
-
-
       return this.levels[1];
     }
+
     /**
      * @typedef {object} level
      * @property {number} number - level number
@@ -569,12 +541,10 @@ var Header = /*#__PURE__*/function () {
      *
      * @returns {level[]}
      */
-
   }, {
     key: "levels",
     get: function get() {
       var _this8 = this;
-
       var availableLevels = [{
         number: 1,
         tag: "H1",
@@ -604,69 +574,61 @@ var Header = /*#__PURE__*/function () {
         return _this8._settings.levels.includes(l.number);
       }) : availableLevels;
     }
+
     /**
      * Handle H1-H6 tags on paste to substitute it with header Tool
      *
-     * @param {PasteEvent} event - event with pasted content
+     * @param {HTMLPasteEvent} event - event with pasted content
      */
-
   }, {
     key: "onPaste",
     value: function onPaste(event) {
       var content = event.detail.data;
+
       /**
        * Define default level value
        *
        * @type {number}
        */
-
       var level = this.defaultLevel.number;
-
       switch (content.tagName) {
         case "H1":
           level = 1;
           break;
-
         case "H2":
           level = 2;
           break;
-
         case "H3":
           level = 3;
           break;
-
         case "H4":
           level = 4;
           break;
-
         case "H5":
           level = 5;
           break;
-
         case "H6":
           level = 6;
           break;
       }
-
       if (this._settings.levels) {
         // Fallback to nearest level when specified not available
         level = this._settings.levels.reduce(function (prevLevel, currLevel) {
           return Math.abs(currLevel - level) < Math.abs(prevLevel - level) ? currLevel : prevLevel;
         });
       }
-
       this.data = {
         level: level,
         text: content.innerHTML
       };
     }
+
     /**
      * Used by Editor.js paste handling API.
      * Provides configuration to handle H1-H6 tags.
      *
      * @returns {{handler: (function(HTMLElement): {text: string}), tags: string[]}}
      */
-
   }], [{
     key: "conversionConfig",
     get: function get() {
@@ -674,13 +636,12 @@ var Header = /*#__PURE__*/function () {
         export: "text",
         // use 'text' property for other blocks
         import: "text" // fill 'text' property from other block's export string
-
       };
     }
+
     /**
      * Sanitizer Rules
      */
-
   }, {
     key: "sanitize",
     get: function get() {
@@ -689,12 +650,12 @@ var Header = /*#__PURE__*/function () {
         text: {}
       };
     }
+
     /**
      * Returns true to notify core that read-only is supported
      *
      * @returns {boolean}
      */
-
   }, {
     key: "isReadOnlySupported",
     get: function get() {
@@ -707,6 +668,7 @@ var Header = /*#__PURE__*/function () {
         tags: ["H1", "H2", "H3", "H4", "H5", "H6"]
       };
     }
+
     /**
      * Get Tool toolbox settings
      * icon - Tool icon's SVG
@@ -714,7 +676,6 @@ var Header = /*#__PURE__*/function () {
      *
      * @returns {{icon: string, title: string}}
      */
-
   }, {
     key: "toolbox",
     get: function get() {
@@ -724,8 +685,7 @@ var Header = /*#__PURE__*/function () {
       };
     }
   }]);
-
   return Header;
 }();
-
-export default Header;
+var _default = Header;
+exports.default = _default;