@webiny/app-admin 0.0.0-mt-1

package/components/RichTextEditor/tools/image/ui.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Class for working with UI:
+ *  - rendering base structure
+ *  - show/hide preview
+ *  - apply tune view
+ */
+export default class Ui {
+    private api;
+    private config;
+    private readOnly;
+    private onSelectFile;
+    nodes: {
+        wrapper: HTMLElement;
+        imageContainer: HTMLElement;
+        fileButton: HTMLElement;
+        imageEl: HTMLElement;
+        caption: HTMLElement;
+    };
+    /**
+     * @param {object} ui - image tool Ui module
+     * @param {object} ui.api - Editor.js API
+     * @param {ImageConfig} ui.config - user config
+     * @param {Function} ui.onSelectFile - callback for clicks on Select file button
+     * @param {boolean} ui.readOnly - read-only mode flag
+     */
+    constructor({ api, config, onSelectFile, readOnly }: {
+        api: any;
+        config: any;
+        onSelectFile: any;
+        readOnly: any;
+    });
+    /**
+     * CSS classes
+     *
+     * @returns {object}
+     */
+    get CSS(): {
+        baseClass: string;
+        input: string;
+        button: string;
+        /**
+         * Tool's classes
+         */
+        wrapper: string;
+        imageContainer: string;
+        imageEl: string;
+        caption: string;
+    };
+    /**
+     * Ui statuses:
+     * - empty
+     * - filled
+     *
+     * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}
+     */
+    static get status(): {
+        EMPTY: string;
+        FILLED: string;
+    };
+    /**
+     * Renders tool UI
+     *
+     * @param {ImageToolData} toolData - saved tool data
+     * @returns {Element}
+     */
+    render(toolData: any): HTMLElement;
+    /**
+     * Creates upload-file button
+     *
+     * @returns {Element}
+     */
+    createFileButton(): any;
+    /**
+     * Shows an image
+     *
+     * @param {string} url - image source
+     * @returns {void}
+     */
+    fillImage(url: any): void;
+    /**
+     * Shows caption input
+     *
+     * @param {string} text - caption text
+     * @returns {void}
+     */
+    fillCaption(text: any): void;
+    /**
+     * Changes UI status
+     *
+     * @param {string} status - see {@link Ui.status} constants
+     * @returns {void}
+     */
+    toggleStatus(status: any): void;
+    /**
+     * Apply visual representation of activated tune
+     *
+     * @param {string} tuneName - one of available tunes {@link Tunes.tunes}
+     * @param {boolean} status - true for enable, false for disable
+     * @returns {void}
+     */
+    applyTune(tuneName: any, status: any): void;
+}
+/**
+ * Helper for making Elements with attributes
+ *
+ * @param  {string} tagName           - new Element tag name
+ * @param  {Array|string} classNames  - list or name of CSS class
+ * @param  {object} attributes        - any attributes
+ * @returns {Element}
+ */
+export declare const make: (tagName: any, classNames?: any, attributes?: {}) => any;

package/components/RichTextEditor/tools/image/ui.js

@@ -0,0 +1,281 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/**
+ * Class for working with UI:
+ *  - rendering base structure
+ *  - show/hide preview
+ *  - apply tune view
+ */
+var Ui = /*#__PURE__*/function () {
+  /**
+   * @param {object} ui - image tool Ui module
+   * @param {object} ui.api - Editor.js API
+   * @param {ImageConfig} ui.config - user config
+   * @param {Function} ui.onSelectFile - callback for clicks on Select file button
+   * @param {boolean} ui.readOnly - read-only mode flag
+   */
+  function Ui(_ref) {
+    var api = _ref.api,
+        config = _ref.config,
+        onSelectFile = _ref.onSelectFile,
+        readOnly = _ref.readOnly;
+
+    _classCallCheck(this, Ui);
+
+    _defineProperty(this, "api", void 0);
+
+    _defineProperty(this, "config", void 0);
+
+    _defineProperty(this, "readOnly", void 0);
+
+    _defineProperty(this, "onSelectFile", void 0);
+
+    _defineProperty(this, "nodes", void 0);
+
+    this.api = api;
+    this.config = config;
+    this.onSelectFile = onSelectFile;
+    this.readOnly = readOnly;
+    this.nodes = {
+      wrapper: make("div", [this.CSS.baseClass, this.CSS.wrapper]),
+      imageContainer: make("div", [this.CSS.imageContainer]),
+      fileButton: this.createFileButton(),
+      imageEl: undefined,
+      caption: make("div", [this.CSS.input, this.CSS.caption], {
+        contentEditable: !this.readOnly
+      })
+    };
+    /**
+     * Create base structure
+     *  <wrapper>
+     *    <image-container/>
+     *    <caption />
+     *  </wrapper>
+     */
+
+    this.nodes.caption.dataset.placeholder = this.config.captionPlaceholder;
+    this.nodes.wrapper.appendChild(this.nodes.imageContainer);
+    this.nodes.wrapper.appendChild(this.nodes.caption);
+    this.nodes.wrapper.appendChild(this.nodes.fileButton);
+  }
+  /**
+   * CSS classes
+   *
+   * @returns {object}
+   */
+
+
+  _createClass(Ui, [{
+    key: "CSS",
+    get: function get() {
+      return {
+        baseClass: this.api.styles.block,
+        input: this.api.styles.input,
+        button: this.api.styles.button,
+
+        /**
+         * Tool's classes
+         */
+        wrapper: "image-tool",
+        imageContainer: "image-tool__image",
+        imageEl: "image-tool__image-picture",
+        caption: "image-tool__caption"
+      };
+    }
+    /**
+     * Ui statuses:
+     * - empty
+     * - filled
+     *
+     * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}
+     */
+
+  }, {
+    key: "render",
+    value:
+    /**
+     * Renders tool UI
+     *
+     * @param {ImageToolData} toolData - saved tool data
+     * @returns {Element}
+     */
+    function render(toolData) {
+      if (!toolData.file || Object.keys(toolData.file).length === 0) {
+        this.toggleStatus(Ui.status.EMPTY);
+      }
+
+      return this.nodes.wrapper;
+    }
+    /**
+     * Creates upload-file button
+     *
+     * @returns {Element}
+     */
+
+  }, {
+    key: "createFileButton",
+    value: function createFileButton() {
+      var _this = this;
+
+      var button = make("div", [this.CSS.button]);
+      button.innerHTML = this.api.i18n.t("Select an Image");
+      button.addEventListener("click", function () {
+        _this.onSelectFile();
+      });
+      return button;
+    }
+    /**
+     * Shows an image
+     *
+     * @param {string} url - image source
+     * @returns {void}
+     */
+
+  }, {
+    key: "fillImage",
+    value: function fillImage(url) {
+      var _this2 = this;
+
+      /**
+       * Check for a source extension to compose element correctly: video tag for mp4, img — for others
+       */
+      var tag = /\.mp4$/.test(url) ? "VIDEO" : "IMG";
+      var attributes = {
+        src: url
+      };
+      /**
+       * We use eventName variable because IMG and VIDEO tags have different event to be called on source load
+       * - IMG: load
+       * - VIDEO: loadeddata
+       *
+       * @type {string}
+       */
+
+      var eventName = "load";
+      /**
+       * Update attributes and eventName if source is a mp4 video
+       */
+
+      if (tag === "VIDEO") {
+        /**
+         * Add attributes for playing muted mp4 as a gif
+         *
+         * @type {boolean}
+         */
+        attributes.autoplay = true;
+        attributes.loop = true;
+        attributes.muted = true;
+        attributes.playsinline = true;
+        /**
+         * Change event to be listened
+         *
+         * @type {string}
+         */
+
+        eventName = "loadeddata";
+      }
+      /**
+       * Compose tag with defined attributes
+       *
+       * @type {Element}
+       */
+
+
+      this.nodes.imageEl = make(tag, this.CSS.imageEl, attributes);
+      /**
+       * Add load event listener
+       */
+
+      this.nodes.imageEl.addEventListener(eventName, function () {
+        _this2.toggleStatus(Ui.status.FILLED);
+      });
+      this.nodes.imageContainer.appendChild(this.nodes.imageEl);
+    }
+    /**
+     * Shows caption input
+     *
+     * @param {string} text - caption text
+     * @returns {void}
+     */
+
+  }, {
+    key: "fillCaption",
+    value: function fillCaption(text) {
+      if (this.nodes.caption) {
+        this.nodes.caption.innerHTML = text;
+      }
+    }
+    /**
+     * Changes UI status
+     *
+     * @param {string} status - see {@link Ui.status} constants
+     * @returns {void}
+     */
+
+  }, {
+    key: "toggleStatus",
+    value: function toggleStatus(status) {
+      for (var statusType in Ui.status) {
+        if (Object.prototype.hasOwnProperty.call(Ui.status, statusType)) {
+          this.nodes.wrapper.classList.toggle("".concat(this.CSS.wrapper, "--").concat(Ui.status[statusType]), status === Ui.status[statusType]);
+        }
+      }
+    }
+    /**
+     * Apply visual representation of activated tune
+     *
+     * @param {string} tuneName - one of available tunes {@link Tunes.tunes}
+     * @param {boolean} status - true for enable, false for disable
+     * @returns {void}
+     */
+
+  }, {
+    key: "applyTune",
+    value: function applyTune(tuneName, status) {
+      this.nodes.wrapper.classList.toggle("".concat(this.CSS.wrapper, "--").concat(tuneName), status);
+    }
+  }], [{
+    key: "status",
+    get: function get() {
+      return {
+        EMPTY: "empty",
+        FILLED: "filled"
+      };
+    }
+  }]);
+
+  return Ui;
+}();
+/**
+ * Helper for making Elements with attributes
+ *
+ * @param  {string} tagName           - new Element tag name
+ * @param  {Array|string} classNames  - list or name of CSS class
+ * @param  {object} attributes        - any attributes
+ * @returns {Element}
+ */
+
+
+export { Ui as default };
+export var make = function make(tagName) {
+  var classNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var el = document.createElement(tagName);
+
+  if (Array.isArray(classNames)) {
+    var _el$classList;
+
+    (_el$classList = el.classList).add.apply(_el$classList, _toConsumableArray(classNames));
+  } else if (classNames) {
+    el.classList.add(classNames);
+  }
+
+  for (var attrName in attributes) {
+    el[attrName] = attributes[attrName];
+  }
+
+  return el;
+};

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

@@ -0,0 +1,211 @@
+import { API } 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`
+ */
+declare type 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>
+ */
+declare type ParagraphData = {
+    text: string;
+    textAlign: TextAlign;
+};
+declare type Typography = {
+    [key: string]: {
+        label: string;
+        component: string;
+        className: string;
+    };
+};
+interface ParagraphArgs {
+    data: ParagraphData;
+    config: ParagraphConfig;
+    api: any;
+    readOnly: boolean;
+}
+declare class Paragraph {
+    api: API;
+    readOnly: boolean;
+    _CSS: any;
+    _settings: any;
+    _data: any;
+    _element: any;
+    _placeholder: string;
+    _preserveBlank: boolean;
+    alignments: Alignment[];
+    settingsButtons: HTMLElement[];
+    typography: 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(): any;
+    /**
+     * Store data in plugin:
+     * - at the this._data property
+     * - at the HTML
+     *
+     * @param {ParagraphData} data — data to set
+     * @private
+     */
+    set data(data: any);
+    /**
+     * 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: any): void;
+    /**
+     * Create Tool's view
+     * @return {HTMLElement}
+     * @private
+     */
+    drawView(): HTMLElement;
+    /**
+     * Return Tool's view
+     *
+     * @returns {HTMLDivElement}
+     */
+    render(): any;
+    /**
+     * Create Block's settings block
+     *
+     * @returns {HTMLElement}
+     */
+    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: any): 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: any): boolean;
+    /**
+     * Extract Tool's data from the view
+     * @param {HTMLDivElement} toolsContent - Paragraph tools rendered view
+     * @returns {ParagraphData} - saved data
+     * @public
+     */
+    save(toolsContent: any): {
+        text: any;
+        textAlign: TextAlign.START;
+        className: any;
+    };
+    /**
+     * Extract textAlign from className
+     *
+     * @param {string} className - heading element className
+     * @returns {TextAlign} textAlign
+     */
+    getTextAlign(className: any): TextAlign.START;
+    /**
+     * On paste callback fired from Editor.
+     *
+     * @param {PasteEvent} event - event with pasted data
+     */
+    onPaste(event: any): void;
+    /**
+     * Callback for Block's settings buttons
+     *
+     * @param {number} alignment - level to set
+     */
+    setAlignment(alignment: any): 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: any): any;
+}
+export default Paragraph;