@ebl-vue/editor-full 1.0.8

package/src/plugins/header/H3.ts

@@ -0,0 +1,404 @@
+/**
+ * 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 IconH3: 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 11C16 10.5 16.8323 10 17.6 10C18.3677 10 19.5 10.311 19.5 11.5C19.5 12.5315 18.7474 12.9022 18.548 12.9823C18.5378 12.9864 18.5395 13.0047 18.5503 13.0063C18.8115 13.0456 20 13.3065 20 14.8C20 16 19.5 17 17.8 17C17.8 17 16 17 16 16.3"/></svg>`;
+
+/**
+ * Header block for the Editor.js.
+ *
+ * @author CodeX (team@ifmo.su)
+ * @copyright CodeX 2018
+ * @license MIT
+ * @version 2.0.0
+ */
+export default class H3 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:"H3"};
+
+    /**
+     * 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: 3,
+      tag: 'H3',
+      svg: IconH3,
+    };
+  }
+
+
+
+
+  /**
+   * 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: 3,
+        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: ['H3'],
+    };
+  }
+
+  /**
+   * 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: IconH3,
+      title: 'H3',
+    };
+  }
+}