@ebl-vue/editor-full 2.31.25 → 2.31.31

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

@@ -1,17 +0,0 @@
-/**
- * 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

@@ -1,26 +0,0 @@
-
-.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

@@ -1,203 +0,0 @@
-import "./index.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,
-      },
-    };
-  }
-
-
-
-
-}

package/src/plugins/table/index.ts

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

package/src/plugins/table/plugin.ts

@@ -1,254 +0,0 @@
-import Table from './table';
-import * as $ from './utils/dom';
-
-import { IconTable, IconTableWithHeadings, IconTableWithoutHeadings } from '../../icons';
-import type { BlockTool, BlockToolConstructorOptions,PasteEvent } from '@ebl-vue/editorjs';
-
-/**
- * @typedef {object} TableData - configuration that the user can set for the table
- * @property {number} rows - number of rows in the table
- * @property {number} cols - number of columns in the table
- */
-/**
- * @typedef {object} Tune - setting for the table
- * @property {string} name - tune name
- * @property {HTMLElement} icon - icon for the tune
- * @property {boolean} isActive - default state of the tune
- * @property {void} setTune - set tune state to the table data
- */
-/**
- * @typedef {object} TableConfig - object with the data transferred to form a table
- * @property {boolean} withHeading - setting to use cells of the first row as headings
- * @property {string[][]} content - two-dimensional array which contains table content
- */
-/**
- * @typedef {object} TableConstructor
- * @property {TableConfig} data — previously saved data
- * @property {TableConfig} config - user config for Tool
- * @property {object} api - Editor.js API
- * @property {boolean} readOnly - read-only mode flag
- */
-/**
- * @typedef {import('@editorjs/editorjs').PasteEvent} PasteEvent
- */
-
-
-/**
- * Table block for Editor.js
- */
-export default class TableBlock implements BlockTool {
-  private api: any;
-  private data: any;
-  private config: any;
-  private container: any;
-  //private block: any;
-  private readOnly: any;
-  private table: any;
-  
-  /**
-   * Notify core that read-only mode is supported
-   *
-   * @returns {boolean}
-   */
-  static get isReadOnlySupported() {
-    return true;
-  }
-
-  /**
-   * Allow to press Enter inside the CodeTool textarea
-   *
-   * @returns {boolean}
-   * @public
-   */
-  static get enableLineBreaks() {
-    return true;
-  }
-
-  /**
-   * Render plugin`s main Element and fill it with saved data
-   *
-   * @param {TableConstructor} init
-   */
-  constructor({ data, config, api, readOnly, block }: BlockToolConstructorOptions) {
-    this.api = api;
-    this.readOnly = readOnly;
-    this.config = config;
-    this.data = {
-      withHeadings: this.getConfig('withHeadings', undefined, data),
-      stretched: this.getConfig('stretched', undefined, data),
-      content: data && data.content ? data.content : [],
-      colWidth: data && data.colWidth ? data.colWidth : []
-    };
-    this.table = null;
-    //this.block = block;
-  }
-
-  /**
-   * 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: IconTable,
-      title: 'Table'
-    };
-  }
-
-  /**
-   * Return Tool's view
-   *
-   * @returns {HTMLDivElement}
-   */
-  render() {
-    /** creating table */
-    this.table = new Table(this.readOnly, this.api, this.data, this.config);
-
-    /** creating container around table */
-    this.container = $.make('div', this.api.styles.block);
-    
-    this.container.appendChild(this.table.getWrapper());
-
-    this.table.setHeadingsSetting(this.data.withHeadings);
-
-    return this.container;
-  }
-
-  /**
-   * Returns plugin settings
-   *
-   * @returns {Array}
-   */
-  renderSettings() {
-    return [
-      {
-        label: this.api.i18n.t('With headings'),
-        icon: IconTableWithHeadings,
-        isActive: this.data.withHeadings,
-        closeOnActivate: true,
-        toggle: true,
-        hint: {
-          title: this.api.i18n.t('With headings')
-        },
-        onActivate: () => {
-          this.data.withHeadings = true;
-          this.table.setHeadingsSetting(this.data.withHeadings);
-        }
-      }, {
-        label: this.api.i18n.t('Without headings'),
-        icon: IconTableWithoutHeadings,
-        isActive: !this.data.withHeadings,
-        closeOnActivate: true,
-        toggle: true,
-        hint: {
-          title: this.api.i18n.t('Without headings')
-        },
-        onActivate: () => {
-          this.data.withHeadings = false;
-          this.table.setHeadingsSetting(this.data.withHeadings);
-        }
-      },
-      // {
-      //   label: this.data.stretched ? this.api.i18n.t('Collapse') : this.api.i18n.t('Stretch'),
-      //   icon: this.data.stretched ? IconCollapse : IconStretch,
-      //   closeOnActivate: true,
-      //   toggle: true,
-      //   onActivate: () => {
-      //     this.data.stretched = !this.data.stretched;
-      //     this.block.stretched = this.data.stretched;
-      //   }
-      // }
-    ];
-  }
-  /**
-   * Extract table data from the view
-   *
-   * @returns {TableData} - saved data
-   */
-  save() {
-    const tableContent = this.table.getData();
-
-    const result = {
-      withHeadings: this.data.withHeadings,
-      stretched: this.data.stretched,
-      content: tableContent
-    };
-
-    return result;
-  }
-
-  /**
-   * Plugin destroyer
-   *
-   * @returns {void}
-   */
-  destroy() {
-    this.table.destroy();
-  }
-
-  /**
-   * A helper to get config value.
-   *
-   * @param {string} configName - the key to get from the config.
-   * @param {any} defaultValue - default value if config doesn't have passed key
-   * @param {object} savedData - previously saved data. If passed, the key will be got from there, otherwise from the config
-   * @returns {any} - config value.
-   */
-  getConfig(configName: string, defaultValue = undefined, savedData = undefined) {
-    const data = this.data || savedData;
-
-    if (data) {
-      return data[configName] ? data[configName] : defaultValue;
-    }
-
-    return this.config && this.config[configName] ? this.config[configName] : defaultValue;
-  }
-
-  /**
-   * Table onPaste configuration
-   *
-   * @public
-   */
-  static get pasteConfig() {
-    return { tags: ['TABLE', 'TR', 'TH', 'TD'] };
-  }
-
-  /**
-   * On paste callback that is fired from Editor
-   *
-   * @param {PasteEvent} event - event with pasted data
-   */
-  onPaste(event: PasteEvent) {
-    if ('data' in event.detail) {
-      const table = event.detail.data as HTMLElement;
-
-      /** Check if the first row is a header */
-      const firstRowHeading = table.querySelector(':scope > thead, tr:first-of-type th');
-
-      /** Get all rows from the table */
-      const rows = Array.from(table.querySelectorAll('tr'));
-
-      /** Generate a content matrix */
-      const content = rows.map((row) => {
-        /** Get cells from row */
-        const cells = Array.from(row.querySelectorAll('th, td'))
-
-        /** Return cells content */
-        return cells.map((cell) => cell.innerHTML);
-      });
-
-      /** Update Tool's data */
-      this.data = {
-        withHeadings: firstRowHeading !== null,
-        content
-      };
-
-      /** Update table block */
-      if (this.table.wrapper) {
-        this.table.wrapper.replaceWith(this.render());
-      }
-    }
-  }
-}