@ebl-vue/editor-full 2.31.24 → 2.31.28

package/src/plugins/header/H5.ts

@@ -1,403 +0,0 @@
-/**
- * Build styles
- */
-import './index.css';
-
-
-import { API, PasteEvent } from '@ebl-vue/editorjs';
-import type { HeaderData, HeaderConfig, Level } from './types';
-import type { BlockTool, BlockToolConstructorOptions } from '@ebl-vue/editorjs';
-
-
-import { IconH5 } from '../../icons';
-
-/**
- * Header block for the Editor.js.
- *
- * @author CodeX (team@ifmo.su)
- * @copyright CodeX 2018
- * @license MIT
- * @version 2.0.0
- */
-export default class H5 implements BlockTool {
-  /**
-   * 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
-   */
-  /**
-   * Editor.js API
-  * @private
-  */
-  private api: API;
-  /**
-  * Read-only mode flag
-  * @private
-  */
-  private readOnly: boolean;
-  /**
-  * Tool's settings passed from Editor
-  * @private
-  */
-  private _settings: HeaderConfig;
-  /**
-  * Block's data
-  * @private
-  */
-  private _data: HeaderData;
-  /**
-  * Main Block wrapper
-  * @private
-  */
-  private _element: HTMLHeadingElement;
-
-   
-
-  constructor({ data, config, api, readOnly }: BlockToolConstructorOptions) {
-    this.api = api;
-    this.readOnly = readOnly;
-
-    /**
-     * Tool's settings passed from Editor
-     *
-     * @type {HeaderConfig}
-     * @private
-     */
-    this._settings={placeholder:"H5"};
-
-    /**
-     * Block's data
-     *
-     * @type {HeaderData}
-     * @private
-     */
-    this._data = this.normalizeData(data);
-
-    /**
-     * Main Block wrapper
-     *
-     * @type {HTMLElement}
-     * @private
-     */
-    this._element = this.getTag();
-  }
-  /**
-   * Styles
-   */
-  private get _CSS() {
-    return {
-      block: this.api.styles.block,
-      wrapper: 'ce-header',
-    };
-  }
-
-  /**
-   * Check if data is valid
-   * 
-   * @param {any} data - data to check
-   * @returns {data is HeaderData}
-   * @private
-   */
-  isHeaderData(data: any): data is HeaderData {
-    return (data as HeaderData).text !== undefined;
-  }
-
-  /**
-   * Normalize input data
-   *
-   * @param {HeaderData} data - saved data to process
-   *
-   * @returns {HeaderData}
-   * @private
-   */
-  normalizeData(data: HeaderData | {}): HeaderData {
-    const newData: HeaderData = { text: '', level: this.defaultLevel.number };
-
-    if (this.isHeaderData(data)) {
-      newData.text = data.text || '';
-  
-      if (data.level !== undefined && !isNaN(parseInt(data.level.toString()))) {
-        newData.level = parseInt(data.level.toString());
-      }
-    }
-
-    return newData;
-  }
-
-  /**
-   * Return Tool's view
-   *
-   * @returns {HTMLHeadingElement}
-   * @public
-   */
-  render(): HTMLHeadingElement {
-    return this._element;
-  }
-
-
-  /**
-   * Callback for Block's settings buttons
-   *
-   * @param {number} level - level to set
-   */
-  setLevel(level: number): void {
-    this.data = {
-      level: level,
-      text: this.data.text,
-    };
-  }
-
-  /**
-   * 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
-   */
-  merge(data: HeaderData): void {
-    this._element.insertAdjacentHTML('beforeend', data.text)
-  }
-
-  /**
-   * 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
-   */
-  validate(blockData: HeaderData): boolean {
-    return blockData.text.trim() !== '';
-  }
-
-  /**
-   * Extract Tool's data from the view
-   *
-   * @param {HTMLHeadingElement} toolsContent - Text tools rendered view
-   * @returns {HeaderData} - saved data
-   * @public
-   */
-  save(toolsContent: HTMLHeadingElement): HeaderData {
-    return {
-      text: toolsContent.innerHTML,
-      level: this.defaultLevel.number,
-    };
-  }
-
-  /**
-   * Allow Header to be converted to/from other blocks
-   */
-  static get conversionConfig() {
-    return {
-      export: 'text', // use 'text' property for other blocks
-      import: 'text', // fill 'text' property from other block's export string
-    };
-  }
-
-  /**
-   * Sanitizer Rules
-   */
-  static get sanitize() {
-    return {
-      level: false,
-      text: {},
-    };
-  }
-
-  /**
-   * Returns true to notify core that read-only is supported
-   *
-   * @returns {boolean}
-   */
-  static get isReadOnlySupported() {
-    return true;
-  }
-
-  /**
-   * Get current Tools`s data
-   *
-   * @returns {HeaderData} Current data
-   * @private
-   */
-  get data(): HeaderData {
-    this._data.text = this._element.innerHTML;
-    this._data.level = this.defaultLevel.number;
-    
-    return this._data;
-  }
-
-  /**
-   * Store data in plugin:
-   * - at the this._data property
-   * - at the HTML
-   *
-   * @param {HeaderData} data — data to set
-   * @private
-   */
-  set data(data: HeaderData) {
-    this._data = this.normalizeData(data);
-
-    /**
-     * If level is set and block in DOM
-     * then replace it to a new block
-     */
-    if (data.level !== undefined && this._element.parentNode) {
-      /**
-       * Create a new tag
-       *
-       * @type {HTMLHeadingElement}
-       */
-      const 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 || '';
-    }
-  }
-
-  /**
-   * Get tag for target level
-   * By default returns second-leveled header
-   *
-   * @returns {HTMLElement}
-   */
-  getTag(): HTMLHeadingElement {
-    const tag = this.createHeadingElement();
-    this.setElementContent(tag);
-    this.addStylesToElement(tag);
-    this.setEditability(tag);
-    this.addPlaceholder(tag);
-    return tag;
-  }
-
-  /**
-   * 创建标题元素
-   * @returns {HTMLHeadingElement} 创建的HTML标题元素
-   * @private
-   */
-  private createHeadingElement(): HTMLHeadingElement {
-    return document.createElement(this.defaultLevel.tag) as HTMLHeadingElement;
-  }
-
-  /**
-   * 设置元素内容
-   * @param {HTMLHeadingElement} element - 要设置内容的HTML标题元素
-   * @private
-   */
-  private setElementContent(element: HTMLHeadingElement): void {
-    element.innerHTML = this._data.text || '';
-  }
-
-  /**
-   * 为元素添加样式类
-   * @param {HTMLHeadingElement} element - 要添加样式的HTML标题元素
-   * @private
-   */
-  private addStylesToElement(element: HTMLHeadingElement): void {
-    element.classList.add(this._CSS.wrapper);
-  }
-
-  /**
-   * 设置元素可编辑属性
-   * @param {HTMLHeadingElement} element - 要设置编辑属性的HTML标题元素
-   * @private
-   */
-  private setEditability(element: HTMLHeadingElement): void {
-    element.contentEditable = this.readOnly ? 'false' : 'true';
-  }
-
-  /**
-   * 为元素添加占位符文本
-   * @param {HTMLHeadingElement} element - 要添加占位符的HTML标题元素
-   * @private
-   */
-  private addPlaceholder(element: HTMLHeadingElement): void {
-    element.dataset.placeholder = this.api.i18n.t(this._settings.placeholder || '');
-  }
-
-
-
-  /**
-   * Return default level
-   *
-   * @returns {level}
-   */
-  get defaultLevel(): Level {
-    return {
-      number: 5,
-      tag: 'H5',
-      svg: IconH5,
-    };
-  }
-
-
-
-
-  /**
-   * Handle H1-H6 tags on paste to substitute it with header Tool
-   *
-   * @param {PasteEvent} event - event with pasted content
-   */
-  onPaste(event: PasteEvent): void {
-    const detail = event.detail;
-
-    if ('data' in detail) {
-      const content = detail.data as HTMLElement;
-      this.data = {
-        level: 5,
-        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[]}}
-   */
-  static get pasteConfig() {
-    return {
-      tags: ['H5'],
-    };
-  }
-
-  /**
-   * Get Tool toolbox settings
-   * icon - Tool icon's SVG
-   * title - title to show in toolbox
-   *
-   * @returns {{icon: string, title: string}}
-   */
-  static get toolbox() {
-    return {
-      icon: IconH5,
-      title: 'H5',
-    };
-  }
-}