@searpent/react-image-annotate 2.0.75 → 2.0.76

package/Editor/annotation-plugin/annotation.js

@@ -1,647 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-
-/**
- * Build styles
- */
-import './annotation.css';
-export function whitespaceCharactersToHTML() {
-  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return str // new line whitespace
-  .replaceAll(/[ ]\n[ ]/gm, '&nbsp;<br>&nbsp;') // space both sides adds &nbsp;
-  .replaceAll(/\n[ ]/gm, '<br>&nbsp;') // space right side adds &nbsp;
-  .replaceAll(/[ ]\n/gm, '&nbsp;<br>') // space left side adds &nbsp;
-  .replaceAll(/\n/gm, '<br>') // no spaces
-  // tab whitespace
-  .replaceAll(/\t/gm, '&nbsp;&nbsp;&nbsp;&nbsp;'); // no spaces
-}
-
-function HTMLToWhitespaceCharacters() {
-  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return str.replaceAll(/((&nbsp;|\s){4})/gm, '\t').replaceAll('&nbsp;', ' ').replaceAll('<br>', '\n'); // new line whitespace
-} // Possible classes
-// ================
-
-
-var Annotation =
-/*#__PURE__*/
-function () {
-  /**
-   * Render plugin`s main Element and fill it with saved data
-   *
-   * @param {{data: HeaderData, config: HeaderConfig, api: object}}
-   *   data — previously saved data
-   *   config - user config for Tool
-   *   api - Editor.js API
-   *   readOnly - read only mode flag
-   */
-  function Annotation(_ref) {
-    var data = _ref.data,
-        config = _ref.config,
-        api = _ref.api,
-        readOnly = _ref.readOnly;
-
-    _classCallCheck(this, Annotation);
-
-    this.api = api;
-    this.readOnly = readOnly;
-    /**
-     * Styles
-     *
-     * @type {object}
-     */
-
-    this._CSS = {
-      block: this.api.styles.block,
-      settingsButton: this.api.styles.settingsButton,
-      settingsButtonActive: this.api.styles.settingsButtonActive,
-      wrapper: 'ce-header',
-      backgroundColor: (data === null || data === void 0 ? void 0 : data.highlighted) && (data === null || data === void 0 ? void 0 : data.clsColor) ? data.clsColor : undefined
-    };
-    /**
-     * Tool's settings passed from Editor
-     *
-     * @type {HeaderConfig}
-     * @private
-     */
-
-    this._settings = config;
-    /**
-     * Block's data
-     *
-     * @type {HeaderData}
-     * @private
-     */
-
-    this._data = this.normalizeData(data);
-    /**
-     * List of settings buttons
-     *
-     * @type {HTMLElement[]}
-     */
-
-    this.settingsButtons = [];
-    /**
-     * Main Block wrapper
-     *
-     * @type {HTMLElement}
-     * @private
-     */
-
-    this._element = this.getTag();
-  }
-  /**
-   * Normalize input data
-   *
-   * @param {HeaderData} data - saved data to process
-   *
-   * @returns {HeaderData}
-   * @private
-   */
-
-
-  _createClass(Annotation, [{
-    key: "normalizeData",
-    value: function normalizeData(data) {
-      var newData = {};
-
-      if (typeof data !== 'object') {
-        data = {};
-      }
-
-      newData.text = whitespaceCharactersToHTML(data.text);
-      newData.labelName = data.labelName || this.defaultLabel.labelName;
-      return newData;
-    }
-    /**
-     * Return Tool's view
-     *
-     * @returns {HTMLHeadingElement}
-     * @public
-     */
-
-  }, {
-    key: "render",
-    value: function render() {
-      return this._element;
-    }
-    /**
-     * Create Block's settings block
-     *
-     * @returns {HTMLElement}
-     */
-
-  }, {
-    key: "renderSettings",
-    value: function renderSettings() {
-      var _this = this;
-
-      var holder = document.createElement('DIV'); // do not add settings button, when only one label is configured
-
-      if (this.labels.length <= 1) {
-        return holder;
-      }
-      /** Add type selectors */
-
-
-      this.labels.forEach(function (label) {
-        var selectTypeButton = document.createElement('DIV');
-        selectTypeButton.classList.add(_this._CSS.settingsButton);
-        /**
-         * Highlight current label button
-         */
-
-        if (_this.currentLabel.labelName === label.labelName) {
-          selectTypeButton.classList.add(_this._CSS.settingsButtonActive);
-        }
-        /**
-         * Add SVG icon
-         */
-
-
-        selectTypeButton.innerHTML = "".concat(label.labelName);
-        /**
-         * Save label to its button
-         */
-
-        selectTypeButton.dataset.labelName = label.labelName;
-        /**
-         * Set up click handler
-         */
-
-        selectTypeButton.addEventListener('click', function () {
-          _this.setLabelName(label.labelName);
-        });
-        /**
-         * Append settings button to holder
-         */
-
-        holder.appendChild(selectTypeButton);
-        /**
-         * Save settings buttons
-         */
-
-        _this.settingsButtons.push(selectTypeButton);
-      });
-      return holder;
-    }
-    /**
-     * Callback for Block's settings buttons
-     *
-     * @param {labelName} labelName - labelName to set
-     */
-
-  }, {
-    key: "setLabelName",
-    value: function setLabelName(labelName) {
-      var _this2 = this;
-
-      this.data = {
-        labelName: labelName,
-        text: this.data.text
-      };
-      /**
-       * Highlight button by selected labelName
-       */
-
-      this.settingsButtons.forEach(function (button) {
-        button.classList.toggle(_this2._CSS.settingsButtonActive, button.dataset.labelName === labelName);
-      });
-    }
-    /**
-     * Method that specified how to merge two Text blocks.
-     * Called by Editor.js by backspace at the beginning of the Block
-     *
-     * @param {HeaderData} data - saved data to merger with current block
-     * @public
-     */
-
-  }, {
-    key: "merge",
-    value: function merge(data) {
-      var newData = {
-        text: this.data.text + data.text,
-        labelName: this.data.labelName
-      };
-      this.data = newData;
-    }
-    /**
-     * Validate Text block data:
-     * - check for emptiness
-     *
-     * @param {HeaderData} blockData — data received after saving
-     * @returns {boolean} false if saved data is not correct, otherwise true
-     * @public
-     */
-
-  }, {
-    key: "validate",
-    value: function validate(blockData) {
-      return blockData.text.trim() !== '';
-    }
-    /**
-     * Extract Tool's data from the view
-     *
-     * @param {HTMLHeadingElement} toolsContent - Text tools rendered view
-     * @returns {HeaderData} - saved data
-     * @public
-     */
-
-  }, {
-    key: "save",
-    value: function save(toolsContent) {
-      return {
-        text: HTMLToWhitespaceCharacters(toolsContent.innerHTML),
-        labelName: this.currentLabel.labelName
-      };
-    }
-    /**
-     * Allow Header to be converted to/from other blocks
-     */
-
-  }, {
-    key: "getTag",
-
-    /**
-     * Get tag for target label
-     * By default returns second-labelled header
-     *
-     * @returns {HTMLElement}
-     */
-    value: function getTag() {
-      /**
-       * Create element for current Block's label
-       */
-      var tag = document.createElement(this.currentLabel.tag);
-
-      if (this._CSS.backgroundColor) {
-        tag.style.backgroundColor = this._CSS.backgroundColor;
-      }
-      /**
-       * Add text to block
-       */
-
-
-      tag.innerHTML = this._data.text || '';
-      /**
-       * Add styles class
-       */
-
-      tag.classList.add(this._CSS.wrapper);
-      /**
-       * Make tag editable
-       */
-
-      tag.contentEditable = this.readOnly ? 'false' : 'true';
-      /**
-       * Add Placeholder
-       */
-
-      tag.dataset.placeholder = this.api.i18n.t(this._settings.placeholder || '');
-      return tag;
-    }
-    /**
-     * Get current label
-     *
-     * @returns {label}
-     */
-
-  }, {
-    key: "onPaste",
-
-    /**
-     * Handle H1-H6 tags on paste to substitute it with header Tool
-     *
-     * @param {PasteEvent} event - event with pasted content
-     */
-    value: function onPaste(event) {
-      var content = event.detail.data;
-      /**
-       * Define default label value
-       *
-       * @type {labelName}
-       */
-
-      var labelName = this.defaultLabel.labelName;
-
-      switch (content.tagName) {
-        case 'H1':
-          labelName = 1;
-          break;
-
-        case 'H2':
-          labelName = 2;
-          break;
-
-        case 'H3':
-          labelName = 3;
-          break;
-
-        case 'H4':
-          labelName = 4;
-          break;
-
-        case 'H5':
-          labelName = 5;
-          break;
-
-        case 'H6':
-          labelName = 6;
-          break;
-      } // if (this._settings.labels) {
-      //   // Fallback to nearest label when specified not available
-      //   label = this._settings.labels.reduce((prevLabel, currLabel) => {
-      //     return Math.abs(currLabel - label) < Math.abs(prevLabel - label)
-      //       ? currLabel
-      //       : prevLabel;
-      //   });
-      // }
-
-
-      this.data = {
-        labelName: labelName,
-        text: content.innerHTML
-      };
-    }
-    /**
-     * Used by Editor.js paste handling API.
-     * Provides configuration to handle H1-H6 tags.
-     *
-     * @returns {{handler: (function(HTMLElement): {text: string}), tags: string[]}}
-     */
-
-  }, {
-    key: "data",
-
-    /**
-     * Get current Tools`s data
-     *
-     * @returns {HeaderData} Current data
-     * @private
-     */
-    get: function get() {
-      this._data.text = this._element.innerHTML;
-      this._data.labelName = this.currentLabel.labelName;
-      return this._data;
-    }
-    /**
-     * Store data in plugin:
-     * - at the this._data property
-     * - at the HTML
-     *
-     * @param {HeaderData} data — data to set
-     * @private
-     */
-    ,
-    set: function set(data) {
-      this._data = this.normalizeData(data);
-      /**
-       * If labelName is set and block in DOM
-       * then replace it to a new block
-       */
-
-      if (data.labelName !== undefined && this._element.parentNode) {
-        /**
-         * Create a new tag
-         *
-         * @type {HTMLHeadingElement}
-         */
-        var newHeader = this.getTag();
-        /**
-         * Save Block's content
-         */
-
-        newHeader.innerHTML = this._element.innerHTML;
-        /**
-         * Replace blocks
-         */
-
-        this._element.parentNode.replaceChild(newHeader, this._element);
-        /**
-         * Save new block to private variable
-         *
-         * @type {HTMLHeadingElement}
-         * @private
-         */
-
-
-        this._element = newHeader;
-      }
-      /**
-       * If data.text was passed then update block's content
-       */
-
-
-      if (data.text !== undefined) {
-        this._element.innerHTML = this._data.text || '';
-      }
-    }
-  }, {
-    key: "currentLabel",
-    get: function get() {
-      var _this3 = this;
-
-      var label = this.labels.find(function (labelItem) {
-        return labelItem.labelName === _this3._data.labelName;
-      });
-
-      if (!label) {
-        label = this.defaultLabel;
-      }
-
-      return label;
-    }
-    /**
-     * Return default label
-     *
-     * @returns {label}
-     */
-
-  }, {
-    key: "defaultLabel",
-    get: function get() {
-      var _this4 = this;
-
-      /**
-       * User can specify own default label value
-       */
-      if (this._settings.defaultLabel) {
-        var userSpecified = this.labels.find(function (labelItem) {
-          return labelItem.labelName === _this4._settings.defaultLabel;
-        });
-
-        if (userSpecified) {
-          return userSpecified;
-        }
-
-        console.warn("(ง'̀-'́)ง Annotation Tool: the default label specified was not found in available labels");
-      }
-      /**
-       * With no additional options, there will be H2 by default
-       *
-       * @type {label}
-       */
-
-
-      return this.labels[1];
-    }
-    /**
-     * @typedef {object} label
-     * @property {labelName} labelName - label labelName
-     * @property {string} tag - tag corresponds with label labelName
-     * @property {string} svg - icon
-     */
-
-    /**
-     * Available header labels
-     *
-     * @returns {label[]}
-     */
-
-  }, {
-    key: "labels",
-    get: function get() {
-      var _this5 = this;
-
-      var availableLabels = [{
-        labelName: 'title',
-        tag: 'h1',
-        name: 'title',
-        backgroundColor: '#ffcccc'
-      }, {
-        labelName: 'subtitle',
-        tag: 'h2',
-        name: 'subtitle',
-        backgroundColor: '#ffccff'
-      }, {
-        labelName: 'text',
-        tag: 'p',
-        name: 'text',
-        backgroundColor: '#14deef'
-      }, {
-        labelName: 'author',
-        tag: 'i',
-        name: 'author',
-        backgroundColor: '#00bb00'
-      }, {
-        labelName: 'appendix',
-        tag: 'p',
-        name: 'appendix',
-        backgroundColor: '#dcfcec'
-      }, {
-        labelName: 'photo_author',
-        tag: 'p',
-        name: 'photo_author',
-        backgroundColor: '#bb0000'
-      }, {
-        labelName: 'photo_caption',
-        tag: 'p',
-        name: 'photo_caption',
-        backgroundColor: '#ccffff'
-      }, {
-        labelName: 'advertisement',
-        tag: 'p',
-        name: 'advertisement',
-        backgroundColor: '#ffeccc'
-      }, {
-        labelName: 'other_graphics',
-        tag: 'p',
-        name: 'other_graphics',
-        backgroundColor: '#ff5400'
-      }, {
-        labelName: 'unknown',
-        tag: 's',
-        name: 'unknown',
-        backgroundColor: '#cccccc'
-      }, {
-        labelName: 'about_author',
-        tag: 'p',
-        name: 'about_author',
-        backgroundColor: '#ecffec'
-      }, {
-        labelName: 'image',
-        tag: 'p',
-        name: 'image',
-        backgroundColor: '#ffffcc'
-      }, {
-        labelName: 'interview',
-        tag: 'p',
-        name: 'interview',
-        backgroundColor: '#23b20f'
-      }, {
-        labelName: 'table',
-        tag: 'p',
-        name: 'table',
-        backgroundColor: '#0000bb'
-      }, {
-        labelName: 'section',
-        tag: 'p',
-        name: 'section',
-        backgroundColor: '#ffcccc'
-      }];
-      return this._settings.labels ? availableLabels.filter(function (l) {
-        return _this5._settings.labels.includes(l.labelName);
-      }) : availableLabels;
-    }
-  }], [{
-    key: "conversionConfig",
-    get: function get() {
-      return {
-        export: 'text',
-        // use 'text' property for other blocks
-        import: 'text' // fill 'text' property from other block's export string
-
-      };
-    }
-    /**
-     * Sanitizer Rules
-     */
-
-  }, {
-    key: "sanitize",
-    get: function get() {
-      return {
-        labelName: false,
-        text: {}
-      };
-    }
-    /**
-     * Returns true to notify core that read-only is supported
-     *
-     * @returns {boolean}
-     */
-
-  }, {
-    key: "isReadOnlySupported",
-    get: function get() {
-      return true;
-    }
-  }, {
-    key: "pasteConfig",
-    get: function get() {
-      return {
-        tags: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6']
-      };
-    }
-    /**
-     * 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: '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>',
-        title: 'Annotation'
-      };
-    }
-  }]);
-
-  return Annotation;
-}();
-
-export default Annotation;