@ebl-vue/editor-full 2.31.24 → 2.31.28

package/src/plugins/marker/index.ts

@@ -1,199 +0,0 @@
-/**
- * Build styles
- */
-import './index.css';
-import type { API } from '@ebl-vue/editorjs';
-import { IconMarker } from '../../icons';
-
-/**
- * Marker Tool for the Editor.js
- *
- * Allows to wrap inline fragment and style it somehow.
- */
-export default class Marker {
-  private api: API;
-  private button: HTMLElement | null;
-  private tag: string;
-  private iconClasses: {base: string; active: string};
-
-  static get toolboxIcon() {
-    return IconMarker;
-  }
-  /**
-   * Class name for term-tag
-   *
-   * @type {string}
-   */
-  static get CSS() {
-    return 'cdx-marker';
-  };
-
-  /**
-   * @param {{api: object}}  - Editor.js API
-   */
-  constructor({api}: {api: any}) {
-    this.api = api;
-
-    /**
-     * Toolbar Button
-     *
-     * @type {HTMLElement|null}
-     */
-    this.button = null;
-
-    /**
-     * Tag represented the term
-     *
-     * @type {string}
-     */
-    this.tag = 'MARK';
-
-    /**
-     * CSS classes
-     */
-    this.iconClasses = {
-      base: this.api.styles.inlineToolButton,
-      active: this.api.styles.inlineToolButtonActive
-    };
-  }
-
-  /**
-   * Specifies Tool as Inline Toolbar Tool
-   *
-   * @return {boolean}
-   */
-  static get isInline() {
-    return true;
-  }
-
-  /**
-   * Create button element for Toolbar
-   *
-   * @return {HTMLElement}
-   */
-  render() {
-    this.button = document.createElement('button');
-    //this.button.type = 'button';
-    this.button.setAttribute("type", "button");
-    this.button.classList.add(this.iconClasses.base);
-    this.button.innerHTML = this.toolboxIcon;
-
-    return this.button;
-  }
-
-  /**
-   * Wrap/Unwrap selected fragment
-   *
-   * @param {Range} range - selected fragment
-   */
-  surround(range:Range) {
-    if (!range) {
-      return;
-    }
-
-    let termWrapper = this.api.selection.findParentTag(this.tag, Marker.CSS);
-
-    /**
-     * If start or end of selection is in the highlighted block
-     */
-    if (termWrapper) {
-      this.unwrap(termWrapper);
-    } else {
-      this.wrap(range);
-    }
-  }
-
-  /**
-   * Wrap selection with term-tag
-   *
-   * @param {Range} range - selected fragment
-   */
-  wrap(range:Range) {
-    /**
-     * Create a wrapper for highlighting
-     */
-    let marker = document.createElement(this.tag);
-
-    marker.classList.add(Marker.CSS);
-
-    /**
-     * SurroundContent throws an error if the Range splits a non-Text node with only one of its boundary points
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents}
-     *
-     * // range.surroundContents(span);
-     */
-    marker.appendChild(range.extractContents());
-    range.insertNode(marker);
-
-    /**
-     * Expand (add) selection to highlighted block
-     */
-    this.api.selection.expandToTag(marker);
-  }
-
-  /**
-   * Unwrap term-tag
-   *
-   * @param {HTMLElement} termWrapper - term wrapper tag
-   */
-  unwrap(termWrapper: HTMLElement) {
-    /**
-     * Expand selection to all term-tag
-     */
-    this.api.selection.expandToTag(termWrapper);
-
-    let sel = window.getSelection();
-    let range = sel?.getRangeAt(0);
-
-    let unwrappedContent = range?.extractContents();
-
-    /**
-     * Remove empty term-tag
-     */
-    termWrapper?.parentNode?.removeChild(termWrapper);
-
-    /**
-     * Insert extracted content
-     */
-    if (unwrappedContent) {
-      range?.insertNode(unwrappedContent);
-    }
-    /**
-     * Restore selection
-     */
-    sel?.removeAllRanges();
-    if (range) {
-      sel?.addRange(range);
-    }
-  }
-
-  /**
-   * Check and change Term's state for current selection
-   */
-  checkState() {
-    const termTag = this.api.selection.findParentTag(this.tag, Marker.CSS);
-
-    this.button?.classList.toggle(this.iconClasses.active, !!termTag);
-  }
-
-  /**
-   * Get Tool icon's SVG
-   * @return {string}
-   */
-  get toolboxIcon() {
-    return IconMarker;
-  }
-
-  /**
-   * Sanitizer rule
-   * @return {{mark: {class: string}}}
-   */
-  static get sanitize() {
-    return {
-      mark: {
-        class: Marker.CSS
-      }
-    };
-  }
-}
-

package/src/plugins/outline/index.css

@@ -1,52 +0,0 @@
-.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/outline/index.ts

@@ -1,63 +0,0 @@
-
-/**
- * 文档大纲插件，用于自动生成文档大纲。
- */
-import "./index.css";
-import EditorJS from '@ebl-vue/editorjs';
-import { OutputData } from '@ebl-vue/editorjs';
-export default class Outline{
-  private editor: EditorJS;
-  private holder: HTMLElement;
-  
-  /**
-   * 初始化插件
-   * @param {EditorJS} editor - 编辑器实例
-   */
-  constructor(holderId: string,editor: EditorJS) {
-    this.editor = editor;
-    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/paragraph/index.css

@@ -1,23 +0,0 @@
-.ce-paragraph {
-    line-height: 2!important;
-    outline: none;
-}
-
-/**
- * Normally paragraph placeholder is shown only for the focused block (thanks to "data-placeholder-active").
- *
- * But there is a special case when the paragraph is the only block in the empty editor.
- * When editor autofocus=false, there will be no focus. We need to show the placeholder anyway.
- */
-.ce-block:only-of-type .ce-paragraph[data-placeholder-active]:empty::before,
-.ce-block:only-of-type .ce-paragraph[data-placeholder-active][data-empty="true"]::before {
-  content: attr(data-placeholder-active);
-}
-
-.ce-paragraph p:first-of-type{
-    margin-top: 0;
-}
-
-.ce-paragraph p:last-of-type{
-    margin-bottom: 0;
-}

package/src/plugins/paragraph/index.ts

@@ -1,381 +0,0 @@
-/**
- * Build styles
- */
-import './index.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 {
-    return {
-      text: toolsContent.innerHTML,
-    };
-  }
-
-  /**
-   * 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

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