@ebl-vue/editor-full 1.0.8

package/src/plugins/header/H5.ts

@@ -0,0 +1,405 @@
+/**
+ * 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';
+
+
+
+
+const IconH5: string = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6 7L6 12M6 17L6 12M6 12L12 12M12 7V12M12 17L12 12"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M16 15.9C16 15.9 16.3768 17 17.8 17C19.5 17 20 15.6199 20 14.7C20 12.7323 17.6745 12.0486 16.1635 12.9894C16.094 13.0327 16 12.9846 16 12.9027V10.1C16 10.0448 16.0448 10 16.1 10H19.8"/></svg>`;
+
+/**
+ * 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',
+    };
+  }
+}