@ebl-vue/editor-full 1.0.8

package/src/plugins/table/toolbox.ts

@@ -0,0 +1,165 @@
+import Popover from "./utils/popover";
+import * as $ from "./utils/dom";
+import { IconMenuSmall } from "../../icons";
+
+/**
+ * @typedef {object} PopoverItem
+ * @property {string} label - button text
+ * @property {string} icon - button icon
+ * @property {boolean} confirmationRequired - if true, a confirmation state will be applied on the first click
+ * @property {function} hideIf - if provided, item will be hid, if this method returns true
+ * @property {function} onClick - click callback
+ */
+
+/**
+ * Toolbox is a menu for manipulation of rows/cols
+ *
+ * It contains toggler and Popover:
+ *   <toolbox>
+ *     <toolbox-toggler />
+ *     <popover />
+ *   <toolbox>
+ */
+export default class Toolbox {
+  private api: any;
+  private items: any;
+  private onOpen: any;
+  private onClose: any;
+  private cssModifier: string;
+  private popover: Popover | null;
+  private wrapper: HTMLElement;
+  /**
+   * Creates toolbox buttons and toolbox menus
+   *
+   * @param {Object} config
+   * @param {any} config.api - Editor.js api
+   * @param {PopoverItem[]} config.items - Editor.js api
+   * @param {function} config.onOpen - callback fired when the Popover is opening
+   * @param {function} config.onClose - callback fired when the Popover is closing
+   * @param {string} config.cssModifier - the modifier for the Toolbox. Allows to add some specific styles.
+   */
+  constructor({ api, items, onOpen, onClose, cssModifier = "" }: any) {
+    this.api = api;
+
+    this.items = items;
+    this.onOpen = onOpen;
+    this.onClose = onClose;
+    this.cssModifier = cssModifier;
+
+    this.popover = null;
+    this.wrapper = this.createToolbox();
+  }
+
+  /**
+   * Style classes
+   */
+  static get CSS() {
+    return {
+      toolbox: "tc-toolbox",
+      toolboxShowed: "tc-toolbox--showed",
+      toggler: "tc-toolbox__toggler",
+    };
+  }
+
+  /**
+   * Returns rendered Toolbox element
+   */
+  get element() {
+    return this.wrapper;
+  }
+
+  /**
+   * Creating a toolbox to open menu for a manipulating columns
+   *
+   * @returns {Element}
+   */
+  createToolbox() {
+    const wrapper = $.make("div", [
+      Toolbox.CSS.toolbox,
+      this.cssModifier ? `${Toolbox.CSS.toolbox}--${this.cssModifier}` : "",
+    ]);
+
+    wrapper.dataset.mutationFree = "true";
+    const popover = this.createPopover();
+    const toggler = this.createToggler();
+
+    wrapper.appendChild(toggler);
+    wrapper.appendChild(popover);
+
+    return wrapper;
+  }
+
+  /**
+   * Creates the Toggler
+   *
+   * @returns {Element}
+   */
+  createToggler() {
+    const toggler = $.make("div", Toolbox.CSS.toggler, {
+      innerHTML: IconMenuSmall,
+    });
+
+    toggler.addEventListener("click", () => {
+      this.togglerClicked();
+    });
+
+    return toggler;
+  }
+
+  /**
+   * Creates the Popover instance and render it
+   *
+   * @returns {Element}
+   */
+  createPopover() {
+    this.popover = new Popover({
+      items: this.items,
+    });
+
+    return this.popover.render();
+  }
+
+  /**
+   * Toggler click handler. Opens/Closes the popover
+   *
+   * @returns {void}
+   */
+  togglerClicked() {
+    if (this.popover?.opened) {
+      this.popover.close();
+      this.onClose();
+    } else {
+      this.popover?.open();
+      this.onOpen();
+    }
+  }
+
+  /**
+   * Shows the Toolbox
+   *
+   * @param {function} computePositionMethod - method that returns the position coordinate
+   * @returns {void}
+   */
+  show(computePositionMethod:Function) {
+    const position = computePositionMethod();
+
+    /**
+     * Set 'top' or 'left' style
+     */
+    Object.entries(position).forEach(([prop, value]) => {
+      this.wrapper.style[prop] = value;
+    });
+
+    this.wrapper.classList.add(Toolbox.CSS.toolboxShowed);
+  }
+
+  /**
+   * Hides the Toolbox
+   *
+   * @returns {void}
+   */
+  hide() {
+    this.popover?.close();
+    this.wrapper.classList.remove(Toolbox.CSS.toolboxShowed);
+  }
+}

package/src/plugins/table/utils/dom.ts

@@ -0,0 +1,128 @@
+/**
+ * Helper for making Elements with attributes
+ *
+ * @param  {string} tagName           - new Element tag name
+ * @param  {string|string[]} classNames  - list or name of CSS classname(s)
+ * @param  {object} attributes        - any attributes
+ * @returns {Element}
+ */
+export function make(
+  tagName,
+  classNames,
+  attributes = {}
+) {
+  const el = document.createElement(tagName);
+
+  if (Array.isArray(classNames)) {
+    el.classList.add(...classNames);
+  } else if (classNames) {
+    el.classList.add(classNames);
+  }
+
+  for (const attrName in attributes) {
+    if (!Object.prototype.hasOwnProperty.call(attributes, attrName)) {
+      continue;
+    }
+
+    el[attrName] = attributes[attrName];
+  }
+
+  return el;
+}
+
+/**
+ * Get item position relative to document
+ *
+ * @param {HTMLElement} elem - item
+ * @returns {{x1: number, y1: number, x2: number, y2: number}} coordinates of the upper left (x1,y1) and lower right(x2,y2) corners
+ */
+export function getCoords(elem) {
+  const rect = elem.getBoundingClientRect();
+
+  return {
+    y1: Math.floor(rect.top + window.pageYOffset),
+    x1: Math.floor(rect.left + window.pageXOffset),
+    x2: Math.floor(rect.right + window.pageXOffset),
+    y2: Math.floor(rect.bottom + window.pageYOffset)
+  };
+}
+
+/**
+ * Calculate paddings of the first element relative to the second
+ *
+ * @param {HTMLElement} firstElem - outer element, if the second element is inside it, then all padding will be positive
+ * @param {HTMLElement} secondElem - inner element, if its borders go beyond the first, then the paddings will be considered negative
+ * @returns {{fromTopBorder: number, fromLeftBorder: number, fromRightBorder: number, fromBottomBorder: number}}
+ */
+export function getRelativeCoordsOfTwoElems(firstElem, secondElem) {
+  const firstCoords = getCoords(firstElem);
+  const secondCoords = getCoords(secondElem);
+
+  return {
+    fromTopBorder: secondCoords.y1 - firstCoords.y1,
+    fromLeftBorder: secondCoords.x1 - firstCoords.x1,
+    fromRightBorder: firstCoords.x2 - secondCoords.x2,
+    fromBottomBorder: firstCoords.y2 - secondCoords.y2
+  };
+}
+
+/**
+ * Get the width and height of an element and the position of the cursor relative to it
+ *
+ * @param {HTMLElement} elem - element relative to which the coordinates will be calculated
+ * @param {Event} event - mouse event
+ */
+export function getCursorPositionRelativeToElement(elem, event) {
+  const rect = elem.getBoundingClientRect();
+  const { width, height, x, y } = rect;
+  const { clientX, clientY } = event;
+
+  return {
+    width,
+    height,
+    x: clientX - x,
+    y: clientY - y
+  };
+}
+
+/**
+ * Insert element after the referenced
+ *
+ * @param {HTMLElement} newNode
+ * @param {HTMLElement} referenceNode
+ * @returns {HTMLElement}
+ */
+export function insertAfter(newNode, referenceNode) {
+  return referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+}
+
+/**
+ * Insert element after the referenced
+ *
+ * @param {HTMLElement} newNode
+ * @param {HTMLElement} referenceNode
+ * @returns {HTMLElement}
+ */
+export function insertBefore(newNode, referenceNode) {
+  return referenceNode.parentNode.insertBefore(newNode, referenceNode);
+}
+
+
+/**
+ * Set focus to contenteditable or native input element
+ *
+ * @param {Element} element - element where to set focus
+ * @param {boolean} atStart - where to set focus: at the start or at the end
+ *
+ * @returns {void}
+ */
+export function focus(element, atStart = true) {
+  const range = document.createRange();
+  const selection = window.getSelection();
+
+  range.selectNodeContents(element);
+  range.collapse(atStart);
+
+  selection.removeAllRanges();
+  selection.addRange(range);
+}

package/src/plugins/table/utils/popover.ts

@@ -0,0 +1,172 @@
+import * as $ from './dom';
+
+/**
+ * @typedef {object} PopoverItem
+ * @property {string} label - button text
+ * @property {string} icon - button icon
+ * @property {boolean} confirmationRequired - if true, a confirmation state will be applied on the first click
+ * @property {function} hideIf - if provided, item will be hid, if this method returns true
+ * @property {function} onClick - click callback
+ */
+
+/**
+ * This cass provides a popover rendering
+ */
+export default class Popover {
+  /**
+   * @param {object} options - constructor options
+   * @param {PopoverItem[]} options.items - constructor options
+   */
+  constructor({items}) {
+    this.items = items;
+    this.wrapper = undefined;
+    this.itemEls = [];
+  }
+
+  /**
+   * Set of CSS classnames used in popover
+   *
+   * @returns {object}
+   */
+  static get CSS() {
+    return {
+      popover: 'tc-popover',
+      popoverOpened: 'tc-popover--opened',
+      item: 'tc-popover__item',
+      itemHidden: 'tc-popover__item--hidden',
+      itemConfirmState: 'tc-popover__item--confirm',
+      itemIcon: 'tc-popover__item-icon',
+      itemLabel: 'tc-popover__item-label'
+    };
+  }
+
+  /**
+   * Returns the popover element
+   *
+   * @returns {Element}
+   */
+  render() {
+    this.wrapper = $.make('div', Popover.CSS.popover);
+
+    this.items.forEach((item, index) => {
+      const itemEl = $.make('div', Popover.CSS.item);
+      const icon = $.make('div', Popover.CSS.itemIcon, {
+        innerHTML: item.icon
+      });
+      const label = $.make('div', Popover.CSS.itemLabel, {
+        textContent: item.label
+      });
+
+      itemEl.dataset.index = index;
+
+      itemEl.appendChild(icon);
+      itemEl.appendChild(label);
+
+      this.wrapper.appendChild(itemEl);
+      this.itemEls.push(itemEl);
+    });
+
+    /**
+     * Delegate click
+     */
+    this.wrapper.addEventListener('click', (event) => {
+      this.popoverClicked(event);
+    });
+
+    return this.wrapper;
+  }
+
+  /**
+   * Popover wrapper click listener
+   * Used to delegate clicks in items
+   *
+   * @returns {void}
+   */
+  popoverClicked(event) {
+    const clickedItem = event.target.closest(`.${Popover.CSS.item}`);
+
+    /**
+     * Clicks outside or between item
+     */
+    if (!clickedItem) {
+      return;
+    }
+
+    const clickedItemIndex = clickedItem.dataset.index;
+    const item = this.items[clickedItemIndex];
+
+    if (item.confirmationRequired && !this.hasConfirmationState(clickedItem)) {
+      this.setConfirmationState(clickedItem);
+
+      return;
+    }
+
+    item.onClick();
+  }
+
+  /**
+   * Enable the confirmation state on passed item
+   *
+   * @returns {void}
+   */
+  setConfirmationState(itemEl) {
+    itemEl.classList.add(Popover.CSS.itemConfirmState);
+  }
+
+  /**
+   * Disable the confirmation state on passed item
+   *
+   * @returns {void}
+   */
+  clearConfirmationState(itemEl) {
+    itemEl.classList.remove(Popover.CSS.itemConfirmState);
+  }
+
+  /**
+   * Check if passed item has the confirmation state
+   *
+   * @returns {boolean}
+   */
+  hasConfirmationState(itemEl) {
+    return itemEl.classList.contains(Popover.CSS.itemConfirmState);
+  }
+
+  /**
+   * Return an opening state
+   *
+   * @returns {boolean}
+   */
+  get opened() {
+    return this.wrapper.classList.contains(Popover.CSS.popoverOpened);
+  }
+
+  /**
+   * Opens the popover
+   *
+   * @returns {void}
+   */
+  open() {
+    /**
+     * If item provides 'hideIf()' method that returns true, hide item
+     */
+    this.items.forEach((item, index) => {
+      if (typeof item.hideIf === 'function') {
+        this.itemEls[index].classList.toggle(Popover.CSS.itemHidden, item.hideIf());
+      }
+    });
+
+    this.wrapper.classList.add(Popover.CSS.popoverOpened);
+  }
+
+  /**
+   * Closes the popover
+   *
+   * @returns {void}
+   */
+  close() {
+    this.wrapper.classList.remove(Popover.CSS.popoverOpened);
+    this.itemEls.forEach(el => {
+      this.clearConfirmationState(el);
+    });
+  }
+}

package/src/plugins/table/utils/throttled.ts

@@ -0,0 +1,22 @@
+
+/**
+ * Limits the frequency of calling a function
+ *
+ * @param {number} delay - delay between calls in milliseconds
+ * @param {function} fn - function to be throttled
+ */
+export default function throttled(delay:number, fn:Function) {
+  let lastCall = 0;
+
+  return function (...args) {
+    const now = new Date().getTime();
+
+    if (now - lastCall < delay) {
+      return;
+    }
+
+    lastCall = now;
+
+    return fn(...args);
+  };
+}

package/src/plugins/underline/index.css

@@ -0,0 +1,3 @@
+.cdx-underline {
+    text-decoration: underline;
+}

package/src/plugins/underline/index.ts

@@ -0,0 +1,216 @@
+/**
+ * Build styles
+ */
+import './index.css';
+const IconUnderline = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 7.5V11.5C9 12.2956 9.31607 13.0587 9.87868 13.6213C10.4413 14.1839 11.2044 14.5 12 14.5C12.7956 14.5 13.5587 14.1839 14.1213 13.6213C14.6839 13.0587 15 12.2956 15 11.5V7.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.71429 18H16.2857" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+import {type API, type InlineTool, type SanitizerConfig} from "@ebl-vue/editorjs";
+import {type InlineToolConstructorOptions} from "@ebl-vue/editorjs/types/tools/inline-tool";
+
+/**
+ * Underline Tool for the Editor.js
+ *
+ * Allows to wrap inline fragment and style it somehow.
+ */
+export default class Underline implements InlineTool {
+  /**
+   * Class name for term-tag
+   *
+   * @type {string}
+   */
+  static get CSS(): string {
+    return 'cdx-underline';
+  };
+
+  /**
+   * Toolbar Button
+   *
+   * @type {HTMLButtonElement}
+   */
+  private button: HTMLButtonElement | undefined
+
+  /**
+   * Tag represented the term
+   *
+   * @type {string}
+   */
+  private tag: string = 'U';
+
+  /**
+   * API InlineToolConstructorOptions
+   *
+   * @type {API}
+   */
+  private api: API
+
+  /**
+   * CSS classes
+   *
+   * @type {object}
+   */
+  private iconClasses: {base: string, active: string}
+
+  /**
+   * @param options InlineToolConstructorOptions
+   */
+  public constructor(options: InlineToolConstructorOptions) {
+    this.api = options.api;
+
+    /**
+     * CSS classes
+     */
+    this.iconClasses = {
+      base: this.api.styles.inlineToolButton,
+      active: this.api.styles.inlineToolButtonActive,
+    };
+  }
+
+  /**
+   * Specifies Tool as Inline Toolbar Tool
+   *
+   * @returns {boolean}
+   */
+  public static isInline = true;
+
+  /**
+   * Create button element for Toolbar
+   *
+   * @returns {HTMLElement}
+   */
+  public render(): HTMLElement {
+    this.button = document.createElement('button');
+    this.button.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
+   */
+  public surround(range: Range): void {
+    if (!range) {
+      return;
+    }
+
+    const termWrapper = this.api.selection.findParentTag(this.tag, Underline.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
+   */
+  public wrap(range: Range) {
+    /**
+     * Create a wrapper for highlighting
+     */
+    const u = document.createElement(this.tag);
+
+    u.classList.add(Underline.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);
+     */
+    u.appendChild(range.extractContents());
+    range.insertNode(u);
+
+    /**
+     * Expand (add) selection to highlighted block
+     */
+    this.api.selection.expandToTag(u);
+  }
+
+  /**
+   * Unwrap term-tag
+   *
+   * @param {HTMLElement} termWrapper - term wrapper tag
+   */
+  public unwrap(termWrapper: HTMLElement): void {
+    /**
+     * Expand selection to all term-tag
+     */
+    this.api.selection.expandToTag(termWrapper);
+
+    const sel = window.getSelection();
+    if (!sel) {
+      return;
+    }
+    const range = sel.getRangeAt(0);
+    if (!range) {
+      return
+    }
+
+    const unwrappedContent = range.extractContents();
+    if (!unwrappedContent) {
+      return
+    }
+
+    /**
+     * Remove empty term-tag
+     */
+    termWrapper.parentNode?.removeChild(termWrapper);
+
+    /**
+     * Insert extracted content
+     */
+    range.insertNode(unwrappedContent);
+
+    /**
+     * Restore selection
+     */
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+
+  /**
+   * Check and change Term's state for current selection
+   */
+  public checkState(): boolean {
+    const termTag = this.api.selection.findParentTag(this.tag, Underline.CSS);
+
+    this.button?.classList.toggle(this.iconClasses.active, !!termTag);
+
+    return !!termTag
+  }
+
+  /**
+   * Get Tool icon's SVG
+   *
+   * @returns {string}
+   */
+  public get toolboxIcon(): string {
+    return IconUnderline;
+  }
+
+  /**
+   * Sanitizer rule
+   *
+   * @returns {{u: {class: string}}}
+   */
+  public static get sanitize(): SanitizerConfig {
+    return {
+      u: {
+        class: Underline.CSS,
+      },
+    };
+  }
+}