@webiny/app-admin 0.0.0-mt-1

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

@@ -0,0 +1,48 @@
+/**
+ * Plugin styles
+ */
+.ce-header {
+  padding: 1em 0;
+  margin: 0 0 -0.9em;
+  line-height: 1.5em;
+  outline: none;
+}
+
+.ce-header p,
+.ce-header div {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/**
+ * Styles for Plugin icon in Toolbar
+ */
+.ce-header__icon {
+}
+
+.ce-header[contentEditable="true"][data-placeholder]::before {
+  position: absolute;
+  content: attr(data-placeholder);
+  color: #707684;
+  font-weight: normal;
+  display: none;
+  cursor: text;
+}
+
+.ce-header[contentEditable="true"][data-placeholder]:empty::before {
+  display: block;
+}
+
+.ce-header[contentEditable="true"][data-placeholder]:empty:focus::before {
+  display: none;
+}
+
+.ce-header-text--start {
+  text-align: start;
+}
+.ce-header-text--center {
+  text-align: center;
+}
+.ce-header-text--end {
+  text-align: end;
+}

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

@@ -0,0 +1,97 @@
+export default class ImageTool {
+    private readonly api;
+    private readonly readOnly;
+    private readonly config;
+    private readonly tunes;
+    private readonly ui;
+    private readonly _data;
+    /**
+     * Notify core that read-only mode is supported
+     *
+     * @returns {boolean}
+     */
+    static get isReadOnlySupported(): boolean;
+    /**
+     * Get Tool toolbox settings
+     * icon - Tool icon's SVG
+     * title - title to show in toolbox
+     *
+     * @returns {{icon: string, title: string}}
+     */
+    static get toolbox(): {
+        icon: string;
+        title: string;
+    };
+    constructor({ data, config, api, readOnly }: {
+        data: any;
+        config: any;
+        api: any;
+        readOnly: any;
+    });
+    /**
+     * Renders Block content
+     *
+     * @public
+     *
+     * @returns {HTMLDivElement}
+     */
+    render(): HTMLElement;
+    /**
+     * Return Block data
+     *
+     * @public
+     *
+     * @returns {ImageToolData}
+     */
+    save(): any;
+    /**
+     * Makes buttons with tunes: stretch image
+     *
+     * @public
+     *
+     * @returns {Element}
+     */
+    renderSettings(): any;
+    /**
+     * Stores all Tool's data
+     *
+     * @private
+     *
+     * @param {ImageToolData} data - data in Image Tool format
+     */
+    set data(data: any);
+    /**
+     * Return Tool data
+     *
+     * @private
+     *
+     * @returns {ImageToolData}
+     */
+    get data(): any;
+    /**
+     * Set new image file
+     *
+     * @private
+     *
+     * @param {object} file - uploaded file data
+     */
+    set image(file: any);
+    /**
+     * Callback fired when Block Tune is activated
+     *
+     * @private
+     *
+     * @param {string} tuneName - tune that has been clicked
+     * @returns {void}
+     */
+    tuneToggled(tuneName: any): void;
+    /**
+     * Set one tune
+     *
+     * @param {string} tuneName - {@link Tunes.tunes}
+     * @param {boolean} value - tune state
+     * @returns {void}
+     */
+    setTune(tuneName: any, value: any): void;
+    isReadOnly(): boolean;
+}

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

@@ -0,0 +1,257 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import Ui from "./ui";
+import Tunes from "./tunes";
+import svgs from "./svgs";
+
+var defaultGetFileSrc = function defaultGetFileSrc(file) {
+  if (typeof file === "string") {
+    return file;
+  }
+
+  return file.src;
+};
+
+var defaultOnSelectFile = function defaultOnSelectFile(file) {
+  return file.src;
+};
+
+var ImageTool = /*#__PURE__*/function () {
+  function ImageTool(_ref) {
+    var _this = this;
+
+    var data = _ref.data,
+        config = _ref.config,
+        api = _ref.api,
+        readOnly = _ref.readOnly;
+
+    _classCallCheck(this, ImageTool);
+
+    _defineProperty(this, "api", void 0);
+
+    _defineProperty(this, "readOnly", void 0);
+
+    _defineProperty(this, "config", void 0);
+
+    _defineProperty(this, "tunes", void 0);
+
+    _defineProperty(this, "ui", void 0);
+
+    _defineProperty(this, "_data", void 0);
+
+    this.api = api;
+    this.readOnly = readOnly;
+    this.config = {
+      getFileSrc: config.getFileSrc || defaultGetFileSrc,
+      onSelectFile: config.onSelectFile || defaultOnSelectFile,
+      actions: config.actions || [],
+      context: config.context
+    };
+    /**
+     * Module for working with UI
+     */
+
+    this.ui = new Ui({
+      api: api,
+      config: this.config,
+      onSelectFile: function onSelectFile() {
+        _this.config.context.showFileManager(function (file) {
+          _this.image = _this.config.onSelectFile(file);
+        });
+      },
+      readOnly: readOnly
+    });
+    /**
+     * Module for working with tunes
+     */
+
+    this.tunes = new Tunes({
+      api: api,
+      actions: this.config.actions,
+      onChange: function onChange(tuneName) {
+        return _this.tuneToggled(tuneName);
+      }
+    });
+    /**
+     * Set saved state
+     */
+
+    this._data = {};
+    this.data = data;
+  }
+  /**
+   * Renders Block content
+   *
+   * @public
+   *
+   * @returns {HTMLDivElement}
+   */
+
+
+  _createClass(ImageTool, [{
+    key: "render",
+    value: function render() {
+      return this.ui.render(this.data);
+    }
+    /**
+     * Return Block data
+     *
+     * @public
+     *
+     * @returns {ImageToolData}
+     */
+
+  }, {
+    key: "save",
+    value: function save() {
+      var caption = this.ui.nodes.caption;
+      this._data.caption = caption.innerHTML;
+      return this.data;
+    }
+    /**
+     * Makes buttons with tunes: stretch image
+     *
+     * @public
+     *
+     * @returns {Element}
+     */
+
+  }, {
+    key: "renderSettings",
+    value: function renderSettings() {
+      return this.tunes.render(this.data);
+    }
+    /**
+     * Stores all Tool's data
+     *
+     * @private
+     *
+     * @param {ImageToolData} data - data in Image Tool format
+     */
+
+  }, {
+    key: "data",
+    get:
+    /**
+     * Return Tool data
+     *
+     * @private
+     *
+     * @returns {ImageToolData}
+     */
+    function get() {
+      return this._data;
+    }
+    /**
+     * Set new image file
+     *
+     * @private
+     *
+     * @param {object} file - uploaded file data
+     */
+    ,
+    set: function set(data) {
+      var _this2 = this;
+
+      this.image = data.file;
+      this._data.caption = data.caption || "";
+      this.ui.fillCaption(this._data.caption);
+      Tunes.tunes.forEach(function (_ref2) {
+        var tune = _ref2.name;
+        var value = typeof data[tune] !== "undefined" ? data[tune] === true || data[tune] === "true" : false;
+
+        _this2.setTune(tune, value);
+      });
+    }
+  }, {
+    key: "image",
+    set: function set(file) {
+      this._data.file = file || {};
+
+      if (file) {
+        this.ui.fillImage(this.config.getFileSrc(file));
+      }
+    }
+    /**
+     * Callback fired when Block Tune is activated
+     *
+     * @private
+     *
+     * @param {string} tuneName - tune that has been clicked
+     * @returns {void}
+     */
+
+  }, {
+    key: "tuneToggled",
+    value: function tuneToggled(tuneName) {
+      // inverse tune state
+      this.setTune(tuneName, !this._data[tuneName]);
+    }
+    /**
+     * Set one tune
+     *
+     * @param {string} tuneName - {@link Tunes.tunes}
+     * @param {boolean} value - tune state
+     * @returns {void}
+     */
+
+  }, {
+    key: "setTune",
+    value: function setTune(tuneName, value) {
+      var _this3 = this;
+
+      this._data[tuneName] = value;
+      this.ui.applyTune(tuneName, value);
+
+      if (tuneName === "stretched") {
+        /**
+         * Wait until the API is ready
+         */
+        Promise.resolve().then(function () {
+          var blockId = _this3.api.blocks.getCurrentBlockIndex();
+
+          _this3.api.blocks.stretchBlock(blockId, value);
+        }).catch(function (err) {
+          console.error(err);
+        });
+      }
+    }
+  }, {
+    key: "isReadOnly",
+    value: function isReadOnly() {
+      return this.readOnly;
+    }
+  }], [{
+    key: "isReadOnlySupported",
+    get:
+    /**
+     * Notify core that read-only mode is supported
+     *
+     * @returns {boolean}
+     */
+    function get() {
+      return true;
+    }
+    /**
+     * Get Tool toolbox settings
+     * icon - Tool icon's SVG
+     * title - title to show in toolbox
+     *
+     * @returns {{icon: string, title: string}}
+     */
+
+  }, {
+    key: "toolbox",
+    get: function get() {
+      return {
+        icon: svgs.toolbox,
+        title: "Image"
+      };
+    }
+  }]);
+
+  return ImageTool;
+}();
+
+export { ImageTool as default };

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

@@ -0,0 +1,90 @@
+.image-tool {
+  --bg-color: #cdd1e0;
+  --front-color: #388ae5;
+  --border-color: #e8e8eb;
+
+  &--stretched {
+    .image-tool__image {
+      max-width: 1032px;
+      margin: 0 auto 10px;
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  .cdx-input {
+    box-shadow: none;
+    border: none;
+    text-align: center;
+
+    &:before {
+      text-align: center;
+      width: inherit;
+    }
+  }
+
+  &__image {
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 10px;
+
+    &-picture {
+      max-width: 100%;
+      vertical-align: bottom;
+      display: block;
+      margin: 0 auto;
+    }
+  }
+
+  &__caption {
+    &[contentEditable="true"][data-placeholder]::before {
+      position: absolute !important;
+      content: "Add caption for image (optional)";
+      color: #707684;
+      font-weight: normal;
+      display: none;
+      text-align: center;
+      width: inherit;
+    }
+
+    &[contentEditable="true"][data-placeholder]:empty {
+      &::before {
+        display: block;
+      }
+
+      &:focus::before {
+        display: none;
+      }
+    }
+  }
+
+  &--empty {
+    .image-tool__caption {
+      display: none;
+    }
+
+    .image-tool__image {
+      display: none;
+    }
+  }
+
+  &--filled {
+    .cdx-button {
+      display: none;
+    }
+  }
+
+  /**
+   * Tunes
+   * ----------------
+   */
+  &--stretched {
+    &__image {
+      &-picture {
+        width: 100%;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    buttonIcon: string;
+    stretched: string;
+    toolbox: string;
+};
+export default _default;

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

@@ -0,0 +1,5 @@
+export default {
+  buttonIcon: "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.15 13.628A7.749 7.749 0 0 0 10 17.75a7.74 7.74 0 0 0 6.305-3.242l-2.387-2.127-2.765 2.244-4.389-4.496-3.614 3.5zm-.787-2.303l4.446-4.371 4.52 4.63 2.534-2.057 3.533 2.797c.23-.734.354-1.514.354-2.324a7.75 7.75 0 1 0-15.387 1.325zM10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10z\"/>",
+  stretched: "<svg width=\"17\" height=\"10\" viewBox=\"0 0 17 10\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.568 5.925H4.056l1.703 1.703a1.125 1.125 0 0 1-1.59 1.591L.962 6.014A1.069 1.069 0 0 1 .588 4.26L4.38.469a1.069 1.069 0 0 1 1.512 1.511L4.084 3.787h9.606l-1.85-1.85a1.069 1.069 0 1 1 1.512-1.51l3.792 3.791a1.069 1.069 0 0 1-.475 1.788L13.514 9.16a1.125 1.125 0 0 1-1.59-1.591l1.644-1.644z\"/></svg>",
+  toolbox: "<svg width=\"17\" height=\"15\" viewBox=\"0 0 336 276\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M291 150.242V79c0-18.778-15.222-34-34-34H79c-18.778 0-34 15.222-34 34v42.264l67.179-44.192 80.398 71.614 56.686-29.14L291 150.242zm-.345 51.622l-42.3-30.246-56.3 29.884-80.773-66.925L45 174.187V197c0 18.778 15.222 34 34 34h178c17.126 0 31.295-12.663 33.655-29.136zM79 0h178c43.63 0 79 35.37 79 79v118c0 43.63-35.37 79-79 79H79c-43.63 0-79-35.37-79-79V79C0 35.37 35.37 0 79 0z\"/></svg>"
+};

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

@@ -0,0 +1,58 @@
+declare type Tune = {
+    name: string;
+    icon: string;
+    title: string;
+    action?: Function;
+};
+/**
+ * Working with Block Tunes
+ */
+export default class Tunes {
+    private api;
+    private actions;
+    private onChange;
+    private buttons;
+    /**
+     * @param {object} tune - image tool Tunes managers
+     * @param {object} tune.api - Editor API
+     * @param {object} tune.actions - list of user defined tunes
+     * @param {Function} tune.onChange - tune toggling callback
+     */
+    constructor({ api, actions, onChange }: {
+        api: any;
+        actions: any;
+        onChange: any;
+    });
+    /**
+     * Available Image tunes
+     *
+     * @returns {{name: string, icon: string, title: string}[]}
+     */
+    static get tunes(): Tune[];
+    /**
+     * Styles
+     *
+     * @returns {{wrapper: string, buttonBase: *, button: string, buttonActive: *}}
+     */
+    get CSS(): {
+        wrapper: string;
+        buttonBase: string;
+        button: string;
+        buttonActive: string;
+    };
+    /**
+     * Makes buttons with tunes: stretch image
+     *
+     * @param {ImageToolData} toolData - generate Elements of tunes
+     * @returns {Element}
+     */
+    render(toolData: any): any;
+    /**
+     * Clicks to one of the tunes
+     *
+     * @param {string} tuneName - clicked tune name
+     * @param {Function} customFunction - function to execute on click
+     */
+    tuneClicked(tuneName: any, customFunction: any): boolean;
+}
+export {};

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

@@ -0,0 +1,134 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { make } from "./ui";
+import svgs from "./svgs";
+
+/**
+ * Working with Block Tunes
+ */
+var Tunes = /*#__PURE__*/function () {
+  /**
+   * @param {object} tune - image tool Tunes managers
+   * @param {object} tune.api - Editor API
+   * @param {object} tune.actions - list of user defined tunes
+   * @param {Function} tune.onChange - tune toggling callback
+   */
+  function Tunes(_ref) {
+    var api = _ref.api,
+        actions = _ref.actions,
+        onChange = _ref.onChange;
+
+    _classCallCheck(this, Tunes);
+
+    _defineProperty(this, "api", void 0);
+
+    _defineProperty(this, "actions", void 0);
+
+    _defineProperty(this, "onChange", void 0);
+
+    _defineProperty(this, "buttons", void 0);
+
+    this.api = api;
+    this.actions = actions;
+    this.onChange = onChange;
+    this.buttons = [];
+  }
+  /**
+   * Available Image tunes
+   *
+   * @returns {{name: string, icon: string, title: string}[]}
+   */
+
+
+  _createClass(Tunes, [{
+    key: "CSS",
+    get:
+    /**
+     * Styles
+     *
+     * @returns {{wrapper: string, buttonBase: *, button: string, buttonActive: *}}
+     */
+    function get() {
+      return {
+        wrapper: "",
+        buttonBase: this.api.styles.settingsButton,
+        button: "image-tool__tune",
+        buttonActive: this.api.styles.settingsButtonActive
+      };
+    }
+    /**
+     * Makes buttons with tunes: stretch image
+     *
+     * @param {ImageToolData} toolData - generate Elements of tunes
+     * @returns {Element}
+     */
+
+  }, {
+    key: "render",
+    value: function render(toolData) {
+      var _this = this;
+
+      var wrapper = make("div", this.CSS.wrapper);
+      this.buttons = [];
+      var tunes = Tunes.tunes.concat(this.actions);
+      tunes.forEach(function (tune) {
+        var title = _this.api.i18n.t(tune.title);
+
+        var el = make("div", [_this.CSS.buttonBase, _this.CSS.button], {
+          innerHTML: tune.icon,
+          title: title
+        });
+        el.addEventListener("click", function () {
+          _this.tuneClicked(tune.name, tune.action);
+        });
+        el.dataset.tune = tune.name;
+        el.classList.toggle(_this.CSS.buttonActive, toolData[tune.name]);
+
+        _this.buttons.push(el);
+
+        _this.api.tooltip.onHover(el, title, {
+          placement: "top"
+        });
+
+        wrapper.appendChild(el);
+      });
+      return wrapper;
+    }
+    /**
+     * Clicks to one of the tunes
+     *
+     * @param {string} tuneName - clicked tune name
+     * @param {Function} customFunction - function to execute on click
+     */
+
+  }, {
+    key: "tuneClicked",
+    value: function tuneClicked(tuneName, customFunction) {
+      if (typeof customFunction === "function") {
+        if (!customFunction(tuneName)) {
+          return false;
+        }
+      }
+
+      var button = this.buttons.find(function (el) {
+        return el.dataset.tune === tuneName;
+      });
+      button.classList.toggle(this.CSS.buttonActive, !button.classList.contains(this.CSS.buttonActive));
+      this.onChange(tuneName);
+    }
+  }], [{
+    key: "tunes",
+    get: function get() {
+      return [{
+        name: "stretched",
+        icon: svgs.stretched,
+        title: "Stretch image"
+      }];
+    }
+  }]);
+
+  return Tunes;
+}();
+
+export { Tunes as default };