@ebl-vue/editor-full 2.31.34 → 2.31.36

package/src/plugins/outline/index.ts

@@ -0,0 +1,62 @@
+
+/**
+ * 文档大纲插件，用于自动生成文档大纲。
+ */
+import "./outline.css";
+import EditorJS from '@ebl-vue/editorjs';
+import { OutputData } from '@ebl-vue/editorjs';
+export default class Outline{
+  private holder: HTMLElement;
+  
+  /**
+   * 初始化插件
+   * @param {EditorJS} editor - 编辑器实例
+   */
+  constructor(holderId: string,editor: EditorJS) {
+  
+    this.holder = document.getElementById(holderId) as HTMLElement;
+    
+  }
+
+  public render(data: OutputData) {
+    const ui = this.createUI(data);
+    this.holder.querySelector('.ebl-outline')?.remove();
+    this.holder.appendChild(ui);
+    this.holder.classList.add("outline");
+  }
+
+  private createUI(data: OutputData): HTMLElement {
+    
+    const ui = document.createElement('div');
+    ui.className = 'ebl-outline';
+    const items = this.createList(data.blocks);
+    ui.append(...items);
+    return ui;
+  }
+
+  private createList(blocksData: any[]): HTMLElement[] {
+    const  items: HTMLElement[] = [];
+    blocksData.forEach(blockData => { 
+      if (blockData.type === 'h1' || blockData.type === 'h2' || blockData.type === 'h3') {
+        const item = document.createElement('div');
+        item.className = 'ebl-outline__item level_'+blockData.data.level;
+        item.dataset.id = blockData.id;
+        item.textContent = blockData.data.text.replace(/ /g,'');
+       
+        item.addEventListener('click', () => {
+          items.forEach(el => el.classList.remove('active'));
+          item.classList.add('active');
+          const block = document.querySelector<HTMLElement>('.codex-editor .ce-block[data-id="' + blockData.id + '"]');
+          if (block) {
+            const top = block.offsetTop;
+            window.scrollTo(0, top);             
+          }
+          
+        });
+        items.push(item);
+      }
+    });
+    return items;
+    
+  }
+}

package/src/plugins/outline/outline.css

@@ -0,0 +1,52 @@
+.ebl-outline{
+  background-color: #fff;
+  box-sizing: border-box;
+  position:fixed;
+  top:var(--header-height,84px);
+
+  right:0;
+  padding: 15px 12px;
+  width:280px;
+ 
+  overflow: hidden;
+  font-family: "Qihei Lenovo", "Microsoft YaHei", "微软雅黑", "宋体", sans-serif;
+  color: #606266;
+  font-size: 14px;
+  padding-bottom: 50px;
+  max-height: calc(100vh - var(--header-height,84px));
+}
+.ebl-outline:hover{
+  overflow: auto;
+}
+
+
+
+.ebl-outline__item{ 
+  cursor: pointer;
+  height:36px;
+  line-height: 36px;
+  padding: 0 24px;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ebl-outline .level_1{ 
+  padding-left: 24px;
+}
+
+.ebl-outline .level_2{ 
+  padding-left: 42px;
+}
+.ebl-outline .level_3{ 
+  padding-left: 60px;
+}
+.ebl-outline__item.active{
+  color:#222222;
+  font-weight: bold;
+  background-color: #EBEBEB;
+}
+.ebl-outline__item:hover{
+  background-color: #EBEBEB;
+}

package/src/plugins/paragraph/index.ts

@@ -0,0 +1,384 @@
+/**
+ * Build styles
+ */
+
+import "@ebl-vue/editor-render/styles/paragraph.css"
+
+import makeFragment from './utils/makeFragment';
+import type { BlockToolConstructorOptions } from '@ebl-vue/editorjs';
+import {IconText} from "../../icons";
+export type ToolConstructorOptions = BlockToolConstructorOptions<ParagraphData>;
+
+
+import type {
+  API,
+  ConversionConfig,
+  HTMLPasteEvent,
+  PasteConfig,
+  SanitizerConfig,
+  ToolConfig,
+  ToolboxConfig,
+} from '@ebl-vue/editorjs';
+
+/**
+ * Base Paragraph Block for the Editor.js.
+ * Represents a regular text block
+ *
+ * @author CodeX (team@codex.so)
+ * @copyright CodeX 2018
+ * @license The MIT License (MIT)
+ */
+
+/**
+ * @typedef {object} ParagraphConfig
+ * @property {string} placeholder - placeholder for the empty paragraph
+ * @property {boolean} preserveBlank - Whether or not to keep blank paragraphs when saving editor data
+ */
+export interface ParagraphConfig extends ToolConfig {
+  /**
+   * Placeholder for the empty paragraph
+   */
+  placeholder?: string;
+
+  /**
+   * Whether or not to keep blank paragraphs when saving editor data
+   */
+  preserveBlank?: boolean;
+}
+
+/**
+ * @typedef {object} ParagraphData
+ * @description Tool's input and output data format
+ * @property {string} text — Paragraph's content. Can include HTML tags: <a><b><i>
+ */
+export interface ParagraphData {
+  /**
+   * Paragraph's content
+   */
+  text: string;
+}
+
+/**
+ * @typedef {object} ParagraphParams
+ * @description Constructor params for the Paragraph tool, use to pass initial data and settings
+ * @property {ParagraphData} data - Preload data for the paragraph.
+ * @property {ParagraphConfig} config - The configuration for the paragraph.
+ * @property {API} api - The Editor.js API.
+ * @property {boolean} readOnly - Is paragraph is read-only.
+ */
+// interface ParagraphParams {
+//   /**
+//    * Initial data for the paragraph
+//    */
+//   data: ParagraphData;
+//   /**
+//    * Paragraph tool configuration
+//    */
+//   config: ParagraphConfig;
+//   /**
+//    * Editor.js API
+//    */
+//   api: API;
+//   /**
+//    * Is paragraph read-only.
+//    */
+//   readOnly: boolean;
+// }
+
+/**
+ * @typedef {object} ParagraphCSS
+ * @description CSS classes names
+ * @property {string} block - Editor.js CSS Class for block
+ * @property {string} wrapper - Paragraph CSS Class
+ */
+interface ParagraphCSS {
+  /**
+   * Editor.js CSS Class for block
+   */
+  block: string;
+  /**
+   * Paragraph CSS Class
+   */
+  wrapper: string;
+}
+
+export default class Paragraph {
+  /**
+   * Default placeholder for Paragraph Tool
+   *
+   * @returns {string}
+   * @class
+   */
+  static get DEFAULT_PLACEHOLDER() {
+    return '';
+  }
+
+  /**
+   * The Editor.js API
+   */
+  api: API;
+
+  /**
+   * Is Paragraph Tool read-only
+   */
+  readOnly: boolean;
+
+  /**
+   * Paragraph Tool's CSS classes
+   */
+  private _CSS: ParagraphCSS;
+
+  /**
+   * Placeholder for Paragraph Tool
+   */
+  private _placeholder: string;
+
+  /**
+   * Paragraph's data
+   */
+  private _data: ParagraphData;
+
+  /**
+   * Paragraph's main Element
+   */
+  private _element: HTMLDivElement | null;
+
+  /**
+   * Whether or not to keep blank paragraphs when saving editor data
+   */
+  private _preserveBlank: boolean;
+
+  /**
+   * Render plugin`s main Element and fill it with saved data
+   *
+   * @param {object} params - constructor params
+   * @param {ParagraphData} params.data - previously saved data
+   * @param {ParagraphConfig} params.config - user config for Tool
+   * @param {object} params.api - editor.js api
+   * @param {boolean} readOnly - read only mode flag
+   */
+  constructor({ data, config, api, readOnly }: ToolConstructorOptions) {
+    this.api = api;
+    this.readOnly = readOnly;
+
+    this._CSS = {
+      block: this.api.styles.block,
+      wrapper: 'ce-paragraph',
+    };
+
+    if (!this.readOnly) {
+      this.onKeyUp = this.onKeyUp.bind(this);
+    }
+
+    /**
+     * Placeholder for paragraph if it is first Block
+     *
+     * @type {string}
+     */
+    this._placeholder = config.placeholder
+      ? config.placeholder
+      : Paragraph.DEFAULT_PLACEHOLDER;
+    this._data = data ?? {};
+    this._element = null;
+    this._preserveBlank = config.preserveBlank ?? false;
+  }
+
+  /**
+   * Check if text content is empty and set empty string to inner html.
+   * We need this because some browsers (e.g. Safari) insert <br> into empty contenteditanle elements
+   *
+   * @param {KeyboardEvent} e - key up event
+   */
+  onKeyUp(e: KeyboardEvent): void {
+    if (e.code !== 'Backspace' && e.code !== 'Delete') {
+      return;
+    }
+
+    if (!this._element) {
+      return;
+    }
+
+    const { textContent } = this._element;
+
+    if (textContent === '') {
+      this._element.innerHTML = '';
+    }
+  }
+
+  /**
+   * Create Tool's view
+   *
+   * @returns {HTMLDivElement}
+   * @private
+   */
+  drawView(): HTMLDivElement {
+    const div = document.createElement('DIV');
+
+    div.classList.add(this._CSS.wrapper, this._CSS.block);
+    div.contentEditable = 'false';
+    div.dataset.placeholderActive = this.api.i18n.t(this._placeholder);
+
+    if (this._data.text) {
+      div.innerHTML = this._data.text;
+    }
+
+    if (!this.readOnly) {
+      div.contentEditable = 'true';
+      div.addEventListener('keyup', this.onKeyUp);
+    }
+
+    /**
+     * bypass property 'align' required in html div element
+     */
+    return div as HTMLDivElement;
+  }
+
+  /**
+   * Return Tool's view
+   *
+   * @returns {HTMLDivElement}
+   */
+  render(): HTMLDivElement {
+    this._element = this.drawView();
+
+    return this._element;
+  }
+
+
+
+  /**
+   * Method that specified how to merge two Text blocks.
+   * Called by Editor.js by backspace at the beginning of the Block
+   *
+   * @param {ParagraphData} data
+   * @public
+   */
+  merge(data: ParagraphData): void {
+    if (!this._element) {
+      return;
+    }
+
+    this._data.text += data.text;
+
+    /**
+     * We use appendChild instead of innerHTML to keep the links of the existing nodes
+     * (for example, shadow caret)
+     */
+    const fragment = makeFragment(data.text);
+
+    this._element.appendChild(fragment);
+
+    this._element.normalize();
+  }
+
+  /**
+   * Validate Paragraph block data:
+   * - check for emptiness
+   *
+   * @param {ParagraphData} savedData — data received after saving
+   * @returns {boolean} false if saved data is not correct, otherwise true
+   * @public
+   */
+  validate(savedData: ParagraphData): boolean {
+    if (savedData.text.trim() === '' && !this._preserveBlank) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Extract Tool's data from the view
+   *
+   * @param {HTMLDivElement} toolsContent - Paragraph tools rendered view
+   * @returns {ParagraphData} - saved data
+   * @public
+   */
+  save(toolsContent: HTMLDivElement): ParagraphData {
+    let txt= {
+      text: toolsContent.innerHTML,
+    };
+    
+    return txt;
+  }
+
+  /**
+   * On paste callback fired from Editor.
+   *
+   * @param {HTMLPasteEvent} event - event with pasted data
+   */
+  onPaste(event: HTMLPasteEvent): void {
+    const data = {
+      text: event.detail.data.innerHTML,
+    };
+
+    this._data = data;
+
+    /**
+     * We use requestAnimationFrame for performance purposes
+     */
+    window.requestAnimationFrame(() => {
+      if (!this._element) {
+        return;
+      }
+      this._element.innerHTML = this._data.text || '';
+    });
+  }
+
+  /**
+   * Enable Conversion Toolbar. Paragraph can be converted to/from other tools
+   * @returns {ConversionConfig}
+   */
+  static get conversionConfig(): ConversionConfig {
+    return {
+      export: 'text', // to convert Paragraph to other block, use 'text' property of saved data
+      import: 'text', // to covert other block's exported string to Paragraph, fill 'text' property of tool data
+    };
+  }
+
+  /**
+   * Sanitizer rules
+   * @returns {SanitizerConfig} - Edtior.js sanitizer config
+   */
+  static get sanitize(): SanitizerConfig {
+    return {
+      text: {
+        br: true,
+      },
+    };
+  }
+
+  /**
+   * Returns true to notify the core that read-only mode is supported
+   *
+   * @returns {boolean}
+   */
+  static get isReadOnlySupported(): boolean {
+    return true;
+  }
+
+  /**
+   * Used by Editor paste handling API.
+   * Provides configuration to handle P tags.
+   *
+   * @returns {PasteConfig} - Paragraph Paste Setting
+   */
+  static get pasteConfig(): PasteConfig {
+    return {
+      tags: ['P','div','br'],
+    };
+  }
+
+  /**
+   * Icon and title for displaying at the Toolbox
+   *
+   * @returns {ToolboxConfig} - Paragraph Toolbox Setting
+   */
+  static get toolbox(): ToolboxConfig {
+    return {
+      icon: IconText,
+      title: 'Text',
+
+    };
+  }
+}

package/src/plugins/paragraph/types/icons.d.ts

@@ -0,0 +1,4 @@
+// temporary fix for the missing types
+declare module "@codexteam/icons" {
+  export const IconText: string;
+}

package/src/plugins/paragraph/utils/makeFragment.ts

@@ -0,0 +1,17 @@
+/**
+ * Create a DocumentFragment and fill it with HTML from a string
+ *
+ * @param {string} htmlString - A string of valid HTML
+ * @returns {DocumentFragment}
+ */
+export default function makeFragment(htmlString: string): DocumentFragment {
+  const tempDiv = document.createElement('div');
+
+  tempDiv.innerHTML = htmlString.trim();
+
+  const fragment = document.createDocumentFragment();
+
+  fragment.append(...Array.from(tempDiv.childNodes));
+
+  return fragment;
+}

package/src/plugins/quote/index.ts

@@ -0,0 +1,203 @@
+import "@ebl-vue/editor-render/styles/quote.css";
+
+
+import { make } from "@editorjs/dom";
+import type { API, BlockAPI, BlockTool } from "@ebl-vue/editorjs";
+import { IconQuote } from "../../icons";
+
+
+
+
+
+/**
+ * Data structure for the Quote block.
+ */
+export interface QuoteData {
+  text: string;
+}
+
+/**
+ * Parameters for the Quote constructor.
+ */
+interface QuoteParams {
+  data: QuoteData;
+  api: API;
+  readOnly: boolean;
+  block: BlockAPI;
+}
+
+/**
+ * CSS class names used in the Quote block.
+ */
+interface QuoteCSS {
+  baseClass: string;
+  wrapper: string;
+  input: string;
+  text: string;
+}
+
+
+
+/**
+ * Quote class representing a customizable quote block for Editor.js.
+ */
+export default class Quote implements BlockTool {
+  api: API;
+  readOnly: boolean;
+
+
+  private _data: QuoteData;
+  private _CSS: QuoteCSS;
+  private _quoteElement!: HTMLElement;
+
+  /**
+   * Creates an instance of the Quote block.
+   * @param params - The parameters for the Quote block.
+   */
+  constructor({ data, api, readOnly }: QuoteParams) {
+
+
+    this.api = api;
+    this.readOnly = readOnly;
+
+    this._data = {
+      text: data.text || ""
+    };
+
+    this._CSS = {
+      baseClass: this.api.styles.block,
+      wrapper: "cdx-quote",
+      text: "cdx-quote__text",
+      input: this.api.styles.input,
+    };
+
+  }
+
+  static get isReadOnlySupported(): boolean {
+    return true;
+  }
+
+  static get toolbox() {
+    return {
+      icon: IconQuote,
+      title: "Quote",
+    };
+  }
+
+  static get contentless(): boolean {
+    return true;
+  }
+
+  static get enableLineBreaks(): boolean {
+    return true;
+  }
+
+
+
+  static get conversionConfig() {
+    return {
+      import: "text",
+
+      export: function (quoteData: QuoteData): string {
+        return quoteData.text;
+      },
+    };
+  }
+
+
+  get CSS(): QuoteCSS {
+    return {
+      baseClass: this.api.styles.block,
+      wrapper: "cdx-quote",
+      text: "cdx-quote__text",
+      input: this.api.styles.input,
+    };
+  }
+
+
+
+  render(): HTMLElement {
+    const container = make("div", [this._CSS.baseClass, this._CSS.wrapper]);
+    this._quoteElement = make(
+      "blockquote",
+      [this._CSS.input, this._CSS.text, "cdx-block-quote"],
+      {
+        contentEditable: !this.readOnly,
+        innerHTML: this._data.text,
+      }
+    );
+
+    this._quoteElement.addEventListener("keydown", (event: KeyboardEvent) =>
+      this.handleKeydown(event)
+    );
+
+    container.appendChild(this._quoteElement);
+    return container;
+  }
+
+
+  get currentItem(): HTMLElement {
+    let currentNode = window.getSelection()!.anchorNode;
+
+    if (currentNode!.nodeType !== Node.ELEMENT_NODE) {
+      currentNode = currentNode!.parentNode;
+    }
+
+    return (currentNode as Element).closest(`.${this.CSS.text}`) as HTMLElement;
+  }
+
+
+  handleKeydown(event: KeyboardEvent) {
+    const currentItem = this._quoteElement;
+
+    if (event.key === "Enter") {
+      if (!event.shiftKey) {
+        event.preventDefault();
+        this.getOutOfQuote();
+      }
+    }
+
+    if (
+      event.key === "Backspace" &&
+      currentItem.textContent?.trim().length === 0
+    ) {
+      event.preventDefault();
+
+      const currentBlockIndex = this.api.blocks.getCurrentBlockIndex();
+      this.api.blocks.delete(currentBlockIndex);
+      this.api.blocks.insert("paragraph", { text: "" });
+      this.api.caret.setToBlock(currentBlockIndex);
+
+      return;
+    }
+  }
+
+
+  getOutOfQuote() {
+    this.api.blocks.insert();
+    this.api.caret.setToBlock(this.api.blocks.getCurrentBlockIndex());
+  }
+
+
+
+
+  save(quoteElement: HTMLDivElement): QuoteData {
+    const text = quoteElement.querySelector(`.${this._CSS.text}`);
+
+    return Object.assign(this._data, {
+      text: text?.innerHTML ?? "",
+    });
+  }
+
+  static get sanitize() {
+    return {
+      text: {
+        br: true,
+      },
+    };
+  }
+
+
+
+
+}