@webiny/app-admin 0.0.0-unstable.bca7b3e350 → 0.0.0-unstable.c27f4d8a31

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

@@ -1,209 +0,0 @@
-/// <reference types="react" />
-/// <reference types="web" />
-import { PasteEvent } from "@editorjs/editorjs";
-import { Alignment, TextAlign } 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`
- */
-interface ParagraphConfig {
-    placeholder: string;
-    preserveBlank: boolean;
-    typography?: Typography;
-}
-/**
- * @typedef {Object} ParagraphData
- * @description Tool's input and output data format
- * @property {String} text — Paragraph's content. Can include HTML tags: <a><b><i>
- */
-interface ParagraphData {
-    text: string;
-    textAlign: TextAlign;
-    className?: string;
-}
-interface Typography {
-    [key: string]: {
-        label: string;
-        component: string;
-        className: string;
-    };
-}
-interface ParagraphArgs {
-    data: ParagraphData;
-    config: ParagraphConfig;
-    api: any;
-    readOnly: boolean;
-}
-declare class Paragraph {
-    private readonly api;
-    private readonly readOnly;
-    private readonly _CSS;
-    private _data;
-    private readonly _element;
-    private readonly _placeholder;
-    private readonly _preserveBlank;
-    private readonly alignments;
-    private readonly settingsButtons;
-    private readonly typography;
-    /**
-     * 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
-     */
-    constructor({ data, config, api, readOnly }: ParagraphArgs);
-    /**
-     * Default placeholder for Paragraph Tool
-     *
-     * @return {string}
-     * @constructor
-     */
-    static get DEFAULT_PLACEHOLDER(): string;
-    /**
-     * Enable Conversion Toolbar. Paragraph can be converted to/from other tools
-     */
-    static get conversionConfig(): {
-        export: string;
-        import: string;
-    };
-    /**
-     * Sanitizer rules
-     */
-    static get sanitize(): {
-        text: {
-            br: boolean;
-        };
-    };
-    /**
-     * Returns true to notify the core that read-only mode is supported
-     *
-     * @return {boolean}
-     */
-    static get isReadOnlySupported(): boolean;
-    /**
-     * Get current Tools`s data
-     * @returns {ParagraphData} Current data
-     * @private
-     */
-    get data(): ParagraphData;
-    /**
-     * Store data in plugin:
-     * - at the this._data property
-     * - at the HTML
-     *
-     * @param {ParagraphData} data — data to set
-     * @private
-     */
-    set data(data: ParagraphData);
-    /**
-     * Used by Editor paste handling API.
-     * Provides configuration to handle P tags.
-     *
-     * @returns {{tags: string[]}}
-     */
-    static get pasteConfig(): {
-        tags: string[];
-    };
-    /**
-     * Icon and title for displaying at the Toolbox
-     *
-     * @return {{icon: string, title: string}}
-     */
-    static get toolbox(): {
-        icon: string;
-        title: string;
-    };
-    /**
-     * Get current alignment
-     *
-     * @returns {alignment}
-     */
-    get currentAlignment(): 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
-     */
-    onKeyUp(e: KeyboardEvent): void;
-    /**
-     * Create Tool's view
-     * @return {HTMLElement}
-     * @private
-     */
-    drawView(): HTMLElement;
-    /**
-     * Return Tool's view
-     */
-    render(): HTMLDivElement;
-    /**
-     * Create Block's settings block
-     */
-    renderSettings(): HTMLElement;
-    /**
-     * 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: ParagraphData): void;
-    /**
-     * 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: ParagraphData): boolean;
-    /**
-     * Extract Tool's data from the view
-     * @param {HTMLDivElement} toolsContent - Paragraph tools rendered view
-     * @returns {ParagraphData} - saved data
-     * @public
-     */
-    save(toolsContent: HTMLElement): {
-        text: string;
-        textAlign: TextAlign;
-        className: string | undefined;
-    };
-    /**
-     * Extract textAlign from className
-     *
-     * @param {string} className - heading element className
-     * @returns {TextAlign} textAlign
-     */
-    getTextAlign(className: string): TextAlign;
-    /**
-     * On paste callback fired from Editor.
-     *
-     * @param {PasteEvent} event - event with pasted data
-     */
-    onPaste(event: PasteEvent): void;
-    /**
-     * Callback for Block's settings buttons
-     *
-     * @param {number} alignment - level to set
-     */
-    setAlignment(alignment: Alignment): void;
-    /**
-     * Callback for Block's settings buttons
-     *
-     * @param {string} className - name of typography class
-     */
-    setTypographyClass(className: string): void;
-    /**
-     * Normalize input data
-     *
-     * @param {HeaderData} data - saved data to process
-     *
-     * @returns {HeaderData}
-     * @private
-     */
-    normalizeData(data?: Partial<ParagraphData>): ParagraphData;
-}
-export default Paragraph;

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

@@ -1,488 +0,0 @@
-"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _utils = require("../utils");
-var Paragraph = /*#__PURE__*/function () {
-  // private readonly _settings: any;
-
-  /**
-   * 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;
-    (0, _classCallCheck2.default)(this, Paragraph);
-    (0, _defineProperty2.default)(this, "api", void 0);
-    (0, _defineProperty2.default)(this, "readOnly", void 0);
-    (0, _defineProperty2.default)(this, "_CSS", void 0);
-    (0, _defineProperty2.default)(this, "_data", void 0);
-    (0, _defineProperty2.default)(this, "_element", void 0);
-    (0, _defineProperty2.default)(this, "_placeholder", void 0);
-    (0, _defineProperty2.default)(this, "_preserveBlank", void 0);
-    (0, _defineProperty2.default)(this, "alignments", void 0);
-    (0, _defineProperty2.default)(this, "settingsButtons", void 0);
-    (0, _defineProperty2.default)(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 = _utils.ALIGNMENTS;
-
-    // Call the `data` setter, to properly render the view element.
-    this.data = this._data;
-  }
-
-  /**
-   * Default placeholder for Paragraph Tool
-   *
-   * @return {string}
-   * @constructor
-   */
-  (0, _createClass2.default)(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 (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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, (0, _toConsumableArray2.default)(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: _utils.TextAlign.START,
-          svg: _utils.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
-     */
-  }, {
-    key: "render",
-    value: function render() {
-      return this._element;
-    }
-
-    /**
-     * 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);
-      });
-
-      // 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 = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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 = _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;
-    }
-
-    /**
-     * 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
-      });
-    }
-
-    /**
-     * 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 || _utils.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;
-}();
-var _default = Paragraph;
-exports.default = _default;