@webiny/app-admin 0.0.0-mt-1

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

@@ -0,0 +1,520 @@
+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 () {
+  /**
+   * Render plugin`s main Element and fill it with saved data
+   *
+   * @param {object} params - constructor params
+   * @param {ParagraphData} params.data - previously saved data
+   * @param {ParagraphConfig} params.config - user config for Tool
+   * @param {object} params.api - editor.js api
+   * @param {boolean} readOnly - read only mode flag
+   */
+  function Paragraph(_ref) {
+    var data = _ref.data,
+        config = _ref.config,
+        api = _ref.api,
+        readOnly = _ref.readOnly;
+
+    _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);
+
+    this.api = api;
+    this.readOnly = readOnly;
+    this.typography = config.typography || null;
+    this._CSS = {
+      block: this.api.styles.block,
+      settingsButton: this.api.styles.settingsButton,
+      settingsButtonActive: this.api.styles.settingsButtonActive,
+      wrapper: "ce-paragraph"
+    };
+
+    if (!this.readOnly) {
+      this.onKeyUp = this.onKeyUp.bind(this);
+    }
+    /**
+     * Placeholder for paragraph if it is first Block
+     * @type {string}
+     */
+
+
+    this._placeholder = config.placeholder ? config.placeholder : Paragraph.DEFAULT_PLACEHOLDER;
+    this._data = this.normalizeData(data);
+    this._element = this.drawView();
+    this._preserveBlank = config.preserveBlank !== undefined ? config.preserveBlank : false;
+    this.settingsButtons = [];
+    this.alignments = ALIGNMENTS;
+    this.data = this.normalizeData(data);
+  }
+  /**
+   * Default placeholder for Paragraph Tool
+   *
+   * @return {string}
+   * @constructor
+   */
+
+
+  _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;
+
+      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;
+
+      this._data = data || {};
+      this._element.innerHTML = this._data.text || "";
+      /**
+       * Add Alignment class
+       */
+
+      this.alignments.forEach(function (alignment) {
+        if (alignment.name === _this._data.textAlign) {
+          _this._element.classList.add("ce-header-text--".concat(alignment.name));
+        } else {
+          _this._element.classList.remove("ce-header-text--".concat(alignment.name));
+        }
+      });
+      /**
+       * Add Typography class
+       */
+
+      if (this._data.className) {
+        var _this$_element$classL;
+
+        (_this$_element$classL = this._element.classList).add.apply(_this$_element$classL, _toConsumableArray(this._data.className.split(" ")));
+      }
+    }
+    /**
+     * Used by Editor paste handling API.
+     * Provides configuration to handle P tags.
+     *
+     * @returns {{tags: string[]}}
+     */
+
+  }, {
+    key: "currentAlignment",
+    get:
+    /**
+     * Get current alignment
+     *
+     * @returns {alignment}
+     */
+    function get() {
+      var _this2 = this;
+
+      var alignment = this.alignments.find(function (alignment) {
+        return alignment.name === _this2._data.textAlign;
+      });
+
+      if (!alignment) {
+        alignment = {
+          name: TextAlign.START,
+          svg: ALIGNMENT_ICONS.start
+        };
+      }
+
+      return alignment;
+    }
+    /**
+     * Check if text content is empty and set empty string to inner html.
+     * We need this because some browsers (e.g. Safari) insert <br> into empty contentEditable elements
+     *
+     * @param {KeyboardEvent} e - key up event
+     */
+
+  }, {
+    key: "onKeyUp",
+    value: function onKeyUp(e) {
+      if (e.code !== "Backspace" && e.code !== "Delete") {
+        return;
+      }
+
+      var textContent = this._element.textContent;
+
+      if (textContent === "") {
+        this._element.innerHTML = "";
+      }
+    }
+    /**
+     * Create Tool's view
+     * @return {HTMLElement}
+     * @private
+     */
+
+  }, {
+    key: "drawView",
+    value: function drawView() {
+      var div = document.createElement("DIV");
+      div.classList.add(this._CSS.wrapper, this._CSS.block); // Add custom className to view.
+
+      if (this._data.className) {
+        div.classList.add(this._data.className);
+      }
+
+      div.contentEditable = "false";
+      div.dataset.placeholder = this.api.i18n.t(this._placeholder);
+
+      if (!this.readOnly) {
+        div.contentEditable = "true";
+        div.addEventListener("keyup", this.onKeyUp);
+      }
+
+      return div;
+    }
+    /**
+     * Return Tool's view
+     *
+     * @returns {HTMLDivElement}
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      return this._element;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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
+      };
+    }
+    /**
+     * Validate Paragraph block data:
+     * - check for emptiness
+     *
+     * @param {ParagraphData} savedData — data received after saving
+     * @returns {boolean} false if saved data is not correct, otherwise true
+     * @public
+     */
+
+  }, {
+    key: "validate",
+    value: function validate(savedData) {
+      return !(savedData.text.trim() === "" && !this._preserveBlank);
+    }
+    /**
+     * Extract Tool's data from the view
+     * @param {HTMLDivElement} toolsContent - Paragraph tools rendered view
+     * @returns {ParagraphData} - saved data
+     * @public
+     */
+
+  }, {
+    key: "save",
+    value: function save(toolsContent) {
+      return {
+        text: toolsContent.innerHTML,
+        textAlign: this.getTextAlign(toolsContent.className),
+        className: this.data.className
+      };
+    }
+    /**
+     * Extract textAlign from className
+     *
+     * @param {string} className - heading element className
+     * @returns {TextAlign} textAlign
+     */
+
+  }, {
+    key: "getTextAlign",
+    value: function getTextAlign(className) {
+      var textAlign = TextAlign.START; // Match className with alignment
+
+      this.alignments.forEach(function (alignment) {
+        if (className.includes("ce-header-text--".concat(alignment.name))) {
+          textAlign = alignment.name;
+        }
+      });
+      return textAlign;
+    }
+    /**
+     * On paste callback fired from Editor.
+     *
+     * @param {PasteEvent} event - event with pasted data
+     */
+
+  }, {
+    key: "onPaste",
+    value: function onPaste(event) {
+      var data = {
+        text: event.detail.data.innerHTML
+      };
+      this.data = data;
+    }
+    /**
+     * Callback for Block's settings buttons
+     *
+     * @param {number} alignment - level to set
+     */
+
+  }, {
+    key: "setAlignment",
+    value: function setAlignment(alignment) {
+      var _this4 = this;
+
+      this.data = {
+        textAlign: alignment.name,
+        text: this.data.text
+      };
+      /**
+       * Highlight button by selected level
+       */
+
+      this.settingsButtons.forEach(function (button) {
+        button.classList.toggle(_this4._CSS.settingsButtonActive, button.dataset.textAlign === alignment.name);
+      });
+    }
+    /**
+     * Callback for Block's settings buttons
+     *
+     * @param {string} className - name of typography class
+     */
+
+  }, {
+    key: "setTypographyClass",
+    value: function setTypographyClass(className) {
+      this.data = {
+        textAlign: this.data.textAlign,
+        text: this.data.text,
+        className: className
+      };
+    }
+    /**
+     * Normalize input data
+     *
+     * @param {HeaderData} data - saved data to process
+     *
+     * @returns {HeaderData}
+     * @private
+     */
+
+  }, {
+    key: "normalizeData",
+    value: function normalizeData(data) {
+      var newData = {};
+
+      if (typeof data !== "object") {
+        data = {};
+      }
+
+      newData.text = data.text || "";
+      newData.textAlign = data.textAlign || TextAlign.START;
+      newData.className = data.className || "";
+      return newData;
+    }
+  }], [{
+    key: "DEFAULT_PLACEHOLDER",
+    get: function get() {
+      return "";
+    }
+    /**
+     * Enable Conversion Toolbar. Paragraph can be converted to/from other tools
+     */
+
+  }, {
+    key: "conversionConfig",
+    get: function get() {
+      return {
+        export: "text",
+        // to convert Paragraph to other block, use 'text' property of saved data
+        import: "text" // to covert other block's exported string to Paragraph, fill 'text' property of tool data
+
+      };
+    }
+    /**
+     * Sanitizer rules
+     */
+
+  }, {
+    key: "sanitize",
+    get: function get() {
+      return {
+        text: {
+          br: true
+        }
+      };
+    }
+    /**
+     * Returns true to notify the core that read-only mode is supported
+     *
+     * @return {boolean}
+     */
+
+  }, {
+    key: "isReadOnlySupported",
+    get: function get() {
+      return true;
+    }
+  }, {
+    key: "pasteConfig",
+    get: function get() {
+      return {
+        tags: ["P"]
+      };
+    }
+    /**
+     * Icon and title for displaying at the Toolbox
+     *
+     * @return {{icon: string, title: string}}
+     */
+
+  }, {
+    key: "toolbox",
+    get: function get() {
+      return {
+        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.2 -0.3 9 11.4" width="12" height="14">\n' + '  <path d="M0 2.77V.92A1 1 0 01.2.28C.35.1.56 0 .83 0h7.66c.28.01.48.1.63.28.14.17.21.38.21.64v1.85c0 .26-.08.48-.23.66-.15.17-.37.26-.66.26-.28 0-.5-.09-.64-.26a1 1 0 01-.21-.66V1.69H5.6v7.58h.5c.25 0 .45.08.6.23.17.16.25.35.25.6s-.08.45-.24.6a.87.87 0 01-.62.22H3.21a.87.87 0 01-.61-.22.78.78 0 01-.24-.6c0-.25.08-.44.24-.6a.85.85 0 01.61-.23h.5V1.7H1.73v1.08c0 .26-.08.48-.23.66-.15.17-.37.26-.66.26-.28 0-.5-.09-.64-.26A1 1 0 010 2.77z"/>\n' + "</svg>",
+        title: "Text"
+      };
+    }
+  }]);
+
+  return Paragraph;
+}();
+
+export default Paragraph;

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

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

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

@@ -0,0 +1,58 @@
+import { API } from "@editorjs/editorjs";
+declare class TextColorTool {
+    _state: boolean;
+    color: string;
+    api: API;
+    tag: string;
+    class: string;
+    colorPicker: HTMLDivElement;
+    button: HTMLButtonElement;
+    config: {
+        themeColors: string[];
+    };
+    _CSS: any;
+    constructor({ api, config }: {
+        api: any;
+        config: any;
+    });
+    static get isInline(): boolean;
+    /**
+     * Sanitize method returns rules to let Editor know which HTML tags it should respect.
+     * @returns {object} sanitizer configuration.
+     * https://editorjs.io/sanitizer
+     */
+    static get sanitize(): {
+        span: (el: any) => {
+            class: string;
+            style: any;
+        };
+    };
+    get state(): boolean;
+    set state(state: boolean);
+    /**
+     * Render method must return HTML element of the button for Inline Toolbar.
+     */
+    render(): HTMLButtonElement;
+    /**
+     * Input for the link
+     */
+    renderActions(): HTMLElement;
+    /**
+     * Finally, when button is pressed Editor calls
+     * surround method of the tool with Range object as an argument.
+     * @param range
+     */
+    surround(range: any): void;
+    wrap(range: any): void;
+    unwrap(range: any): void;
+    showActions(mark: any): void;
+    hideActions(): void;
+    /**
+     * CheckState method of each Inline Tool is called by Editor with current `Selection`
+     * when user selects some text
+     */
+    checkState(): void;
+    convertToHex(color: any): string;
+    clear(): void;
+}
+export default TextColorTool;