@webiny/app-admin 0.0.0-mt-2 → 0.0.0-unstable.0156a4c312

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

@@ -1,520 +0,0 @@
-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

@@ -1,29 +0,0 @@
-.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

@@ -1,58 +0,0 @@
-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;