@ebl-vue/editor-full 1.0.8

package/src/plugins/paragraph/index.ts

@@ -0,0 +1,380 @@
+/**
+ * Build styles
+ */
+import './index.css';
+
+import makeFragment from './utils/makeFragment';
+import type {  BlockToolConstructorOptions } from '@ebl-vue/editorjs';
+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'],
+    };
+  }
+
+  /**
+   * Icon and title for displaying at the Toolbox
+   *
+   * @returns {ToolboxConfig} - Paragraph Toolbox Setting
+   */
+  static get toolbox(): ToolboxConfig {
+    return {
+      icon: `<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="M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14"/></svg>`,
+      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.css

@@ -0,0 +1,26 @@
+
+.cdx-quote {
+  overflow: hidden;
+  overflow-wrap: break-word;
+  margin: 0;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+.cdx-quote blockquote{
+  margin: 0;
+}
+
+
+
+
+.cdx-block-quote{
+  border: solid #acacac;
+  border-width: 0 0 0 3px;
+  box-shadow: none;
+  color: #666;
+  line-height: 1.6em;
+  padding: 1px 0 0 12px;
+  text-align: left;
+}
+

package/src/plugins/quote/index.ts

@@ -0,0 +1,206 @@
+import "./index.css";
+
+
+import { make } from "@editorjs/dom";
+import type { API, BlockAPI, BlockTool } from "@ebl-vue/editorjs";
+
+
+const IconQuote = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 10.8182L9 10.8182C8.80222 10.8182 8.60888 10.7649 8.44443 10.665C8.27998 10.5651 8.15181 10.4231 8.07612 10.257C8.00043 10.0909 7.98063 9.90808 8.01922 9.73174C8.0578 9.55539 8.15304 9.39341 8.29289 9.26627C8.43275 9.13913 8.61093 9.05255 8.80491 9.01747C8.99889 8.98239 9.19996 9.00039 9.38268 9.0692C9.56541 9.13801 9.72159 9.25453 9.83147 9.40403C9.94135 9.55353 10 9.72929 10 9.90909L10 12.1818C10 12.664 9.78929 13.1265 9.41421 13.4675C9.03914 13.8084 8.53043 14 8 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 10.8182L15 10.8182C14.8022 10.8182 14.6089 10.7649 14.4444 10.665C14.28 10.5651 14.1518 10.4231 14.0761 10.257C14.0004 10.0909 13.9806 9.90808 14.0192 9.73174C14.0578 9.55539 14.153 9.39341 14.2929 9.26627C14.4327 9.13913 14.6109 9.05255 14.8049 9.01747C14.9989 8.98239 15.2 9.00039 15.3827 9.0692C15.5654 9.13801 15.7216 9.25453 15.8315 9.40403C15.9414 9.55353 16 9.72929 16 9.90909L16 12.1818C16 12.664 15.7893 13.1265 15.4142 13.4675C15.0391 13.8084 14.5304 14 14 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+
+
+
+/**
+ * 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,
+      },
+    };
+  }
+
+
+
+
+}

package/src/plugins/table/index.ts

@@ -0,0 +1,4 @@
+import Plugin from './plugin';
+import './style.css';
+
+export default Plugin;