@ebl-vue/editor-full 2.31.35 → 2.31.37

package/src/plugins/list/types/OlCounterType.ts

@@ -0,0 +1,63 @@
+import { IconNumber, IconLowerRoman, IconUpperRoman, IconLowerAlpha, IconUpperAlpha } from '../../../icons';
+
+export type OlCounterType = 'numeric' | 'upper-roman' | 'lower-roman' | 'upper-alpha' | 'lower-alpha';
+
+/**
+ * Map that represents all of the supported styles of the counters for ordered list
+ */
+export const OlCounterTypesMap = new Map<string, string>([
+  /**
+   * Value that represents default arabic numbers for counters
+   */
+  ['Numeric', 'numeric'],
+
+  /**
+   * Value that represents lower roman numbers for counteres
+   */
+  ['Lower Roman', 'lower-roman'],
+
+  /**
+   * Value that represents upper roman numbers for counters
+   */
+  ['Upper Roman', 'upper-roman'],
+
+  /**
+   * Value that represents lower alpha characters for counters
+   */
+  ['Lower Alpha', 'lower-alpha'],
+
+  /**
+   * Value that represents upper alpha characters for counters
+   */
+  ['Upper Alpha', 'upper-alpha'],
+]);
+
+/**
+ * Map that represents relation between supported counter types and theirs icons to be displayed in toolbox
+ */
+export const OlCounterIconsMap = new Map<string, string>([
+  /**
+   * Value that represents Icon for Numeric counter type
+   */
+  ['numeric', IconNumber],
+
+  /**
+   * Value that represents Icon for Lower Roman counter type
+   */
+  ['lower-roman', IconLowerRoman],
+
+  /**
+   * Value that represents Icon for Upper Roman counter type
+   */
+  ['upper-roman', IconUpperRoman],
+
+  /**
+   * Value that represents Icon for Lower Alpha counter type
+   */
+  ['lower-alpha', IconLowerAlpha],
+
+  /**
+   * Value that represents Icon for Upper Alpha counter type
+   */
+  ['upper-alpha', IconUpperAlpha],
+]);

package/src/plugins/list/types/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Paste event for tag substitution, similar to editor.js PasteEvent but with a different data type
+ */
+export interface PasteEvent extends CustomEvent {
+  /**
+   * Pasted element
+   */
+  detail: {
+    /**
+     * Supported elements fir the paste event
+     */
+    data: HTMLUListElement | HTMLOListElement | HTMLLIElement;
+  };
+}

package/src/plugins/list/utils/focusItem.ts

@@ -0,0 +1,18 @@
+import { focus } from '@editorjs/caret';
+import type { ItemElement } from '../types/Elements';
+import { getItemContentElement } from './getItemContentElement';
+
+/**
+ * Sets focus to the item's content
+ * @param item - item (<li>) to select
+ * @param atStart - where to set focus: at the start or at the end
+ */
+export function focusItem(item: ItemElement, atStart: boolean = true): void {
+  const itemContent = getItemContentElement(item);
+
+  if (!itemContent) {
+    return;
+  }
+
+  focus(itemContent, atStart);
+}

package/src/plugins/list/utils/getChildItems.ts

@@ -0,0 +1,40 @@
+import { DefaultListCssClasses } from '../ListRenderer';
+import type { ItemChildWrapperElement, ItemElement } from '../types/Elements';
+
+/**
+ * Get child items of the passed element
+ * @param element - child items would be got from this element
+ * @param firstLevelChildren - if method should return all level child items or only first level ones
+ */
+// eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
+export function getChildItems(element: ItemElement | ItemChildWrapperElement, firstLevelChildren: boolean = true): ItemElement[] {
+  let itemChildWrapper: HTMLElement = element;
+
+  /**
+   * If passed element is list item than get item's child wrapper
+   */
+  if (element.classList.contains(DefaultListCssClasses.item)) {
+    itemChildWrapper = element.querySelector(`.${DefaultListCssClasses.itemChildren}`) as HTMLElement;
+  }
+
+  /**
+   * Check if itemChildWrapper is not null
+   */
+  if (itemChildWrapper === null) {
+    return [];
+  }
+
+  if (firstLevelChildren) {
+    /**
+     * Filter first level child items of the curret child item wrapper
+     * In case that child could be not only list item
+     */
+    return Array.from(itemChildWrapper.querySelectorAll(`:scope > .${DefaultListCssClasses.item}`));
+  } else {
+    /**
+     * Filter all levels child items of the current child item wrapper
+     * In case that child could be not only list item
+     */
+    return Array.from(itemChildWrapper.querySelectorAll(`.${DefaultListCssClasses.item}`));
+  }
+}

package/src/plugins/list/utils/getItemChildWrapper.ts

@@ -0,0 +1,10 @@
+import type { ItemChildWrapperElement, ItemElement } from '../types/Elements';
+import { DefaultListCssClasses } from '../ListRenderer';
+
+/**
+ * Returns child wrapper element of the passed item
+ * @param item - wrapper element would be got from this item
+ */
+export function getItemChildWrapper(item: ItemElement): ItemChildWrapperElement | null {
+  return item.querySelector(`.${DefaultListCssClasses.itemChildren}`);
+}

package/src/plugins/list/utils/getItemContentElement.ts

@@ -0,0 +1,10 @@
+import type { ItemContentElement, ItemElement } from '../types/Elements';
+import { DefaultListCssClasses } from '../ListRenderer';
+
+/**
+ * Returns content element of the passed item
+ * @param item - content element would be got from this item
+ */
+export function getItemContentElement(item: ItemElement): ItemContentElement | null {
+  return item.querySelector(`.${DefaultListCssClasses.itemContent}`);
+}

package/src/plugins/list/utils/getSiblings.ts

@@ -0,0 +1,52 @@
+/**
+ * Get all siblings before passed element, or after it
+ * @param element - html element whose siblings would be returned
+ * @param direction - wherever siblings would be returned, after element of before it
+ */
+export function getSiblings(element: HTMLElement, direction: 'after' | 'before' = 'after'): Element[] | null {
+  const siblings: Element[] = [];
+
+  let nextElementSibling: HTMLElement;
+
+  /**
+   * Method that is responsible for getting next element sibling responsible to the direction variable
+   * @param el - current element
+   * @returns HTML element of the sibling
+   */
+  function getNextElementSibling(el: HTMLElement): HTMLElement {
+    /**
+     * Get first sibling element respectfully to passed direction
+     */
+    switch (direction) {
+      case 'after':
+        return el.nextElementSibling as HTMLElement;
+
+      case 'before':
+        return el.previousElementSibling as HTMLElement;
+    }
+  }
+
+  nextElementSibling = getNextElementSibling(element);
+
+  /**
+   * Iterate by all siblings elements
+   */
+  while (nextElementSibling !== null) {
+    siblings.push(nextElementSibling);
+
+    /**
+     * Get next element sibling
+     */
+    nextElementSibling = getNextElementSibling(nextElementSibling);
+  }
+
+  /**
+   * Check that formed siblings array is not empty
+   * If it is emtpy, return null
+   */
+  if (siblings.length !== 0) {
+    return siblings;
+  }
+
+  return null;
+}

package/src/plugins/list/utils/isLastItem.ts

@@ -0,0 +1,9 @@
+import type { ItemElement } from '../types/Elements';
+
+/**
+ * Check that passed item element is last item of the list
+ * @param item - item to be checked, wherever it has next element sibling
+ */
+export function isLastItem(item: ItemElement): boolean {
+  return item.nextElementSibling === null;
+}

package/src/plugins/list/utils/itemHasSublist.ts

@@ -0,0 +1,10 @@
+import type { ItemElement } from '../types/Elements';
+import { DefaultListCssClasses } from '../ListRenderer';
+
+/**
+ * Check if passed item has the sublist
+ * @param item - item to be checked wherever it has sublist
+ */
+export function itemHasSublist(item: ItemElement): boolean {
+  return item.querySelector(`.${DefaultListCssClasses.itemChildren}`) !== null;
+}

package/src/plugins/list/utils/normalizeData.ts

@@ -0,0 +1,83 @@
+import type { OldListData, ListData, ListItem, OldChecklistData, OldNestedListData } from '../types/ListParams';
+
+/**
+ * Method that checks if data is result of the Old list tool save mtehod
+ * @param data - data of the OldList, Checklist, OldNestedList or Editorjs List tool
+ * @returns true if data related to the List tool, false otherwise
+ */
+function instanceOfOldListData(data: ListData | OldListData | OldChecklistData | OldNestedListData): data is OldListData {
+  return (typeof data.items[0] === 'string');
+}
+
+/**
+ * Method that checks if data is result of the Old nested list tool save method
+ * @param data - data of the OldList, Checklist, OldNestedList or Editorjs List tool
+ * @returns true if data is related to the Nested List tool, false otherwise
+ */
+function instanceOfOldNestedListData(data: ListData | OldListData | OldChecklistData | OldNestedListData): data is OldNestedListData {
+  return !('meta' in data);
+}
+
+/**
+ * Method that checks if data is result of the Old checklist tool save method
+ * @param data - data of the Checklist, OldList, OldNestedList or Editorjs List tool
+ * @returns true if data is related to the Checklist tool, false otherwise
+ */
+function instanceOfChecklistData(data: ListData | OldListData | OldChecklistData | OldNestedListData): data is OldChecklistData {
+  return (
+    typeof data.items[0] !== 'string'
+    && 'text' in data.items[0]
+    && 'checked' in data.items[0]
+    && typeof data.items[0].text === 'string'
+    && typeof data.items[0].checked === 'boolean'
+  );
+}
+
+/**
+ * Method that checks if passed data is related to the legacy format and normalizes it
+ * @param data - data to be checked
+ * @returns - normalized data, ready to be used by Editorjs List tool
+ */
+export default function normalizeData(data: ListData | OldListData | OldChecklistData): ListData {
+  const normalizedDataItems: ListItem[] = [];
+
+  if (instanceOfOldListData(data)) {
+    data.items.forEach((item) => {
+      normalizedDataItems.push({
+        content: item,
+        meta: {},
+        items: [],
+      });
+    });
+
+    return {
+      style: data.style,
+      meta: {},
+      items: normalizedDataItems,
+    };
+  } else if (instanceOfChecklistData(data)) {
+    data.items.forEach((item) => {
+      normalizedDataItems.push({
+        content: item.text,
+        meta: {
+          checked: item.checked,
+        },
+        items: [],
+      });
+    });
+
+    return {
+      style: 'checklist',
+      meta: {},
+      items: normalizedDataItems,
+    };
+  } else if (instanceOfOldNestedListData(data)) {
+    return {
+      style: data.style,
+      meta: {},
+      items: data.items,
+    };
+  } else {
+    return structuredClone(data);
+  }
+};

package/src/plugins/list/utils/removeChildWrapperIfEmpty.ts

@@ -0,0 +1,31 @@
+import { DefaultListCssClasses } from '../ListRenderer';
+import type { ItemChildWrapperElement, ItemElement } from '../types/Elements';
+import { getChildItems } from './getChildItems';
+import { getItemChildWrapper } from './getItemChildWrapper';
+
+/**
+ * Method that will remove passed child wrapper if it has no child items
+ * @param element - child wrapper or actual item, from where we get child wrapper
+ */
+// eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
+export function removeChildWrapperIfEmpty(element: ItemChildWrapperElement | ItemElement): void {
+  let itemChildWrapper: HTMLElement | null = element;
+
+  /**
+   * If passed element is list item than get item's child wrapper
+   */
+  if (element.classList.contains(DefaultListCssClasses.item)) {
+    itemChildWrapper = getItemChildWrapper(element);
+  }
+
+  if (itemChildWrapper === null) {
+    return;
+  }
+
+  /**
+   * Check that there is at least one item
+   */
+  if (getChildItems(itemChildWrapper).length === 0) {
+    itemChildWrapper.remove();
+  }
+}

package/src/plugins/list/utils/renderToolboxInput.ts

@@ -0,0 +1,113 @@
+import * as Dom from '@editorjs/dom';
+import { CssPrefix } from '../styles/CssPrefix';
+
+/**
+ * Options used in input rendering
+ */
+interface InputOptions {
+  /**
+   * Placeholder, that will be displayed in input
+   */
+  placeholder: string;
+  /**
+   * Input will be rendered with this value inside
+   */
+  value?: string;
+  /**
+   * Html attributes, that would be added to the input element
+   */
+  attributes?: {
+    [key: string]: string;
+  };
+  /**
+   * Flag that represents special behavior that prevents you from entering anything other than numbers
+   */
+  sanitize?: (value: string) => string;
+}
+
+const css = {
+  wrapper: `${CssPrefix}-start-with-field`,
+  input: `${CssPrefix}-start-with-field__input`,
+  startWithElementWrapperInvalid: `${CssPrefix}-start-with-field--invalid`,
+};
+
+/**
+ * Method that renders html element for popover start with item
+ * @param inputCallback - callback method that could change list attributes on input
+ * @param inputOptions - options used in input rendering
+ * @param inputOptions.value - input will be rendered with this value inside
+ * @param inputOptions.placeholder - placeholder, that will be displayed in input
+ * @param inputOptions.attributes - html attributes, that would be added to the input element
+ * @returns - rendered html element
+ */
+export function renderToolboxInput(startLabel:string,inputCallback: (index: string) => void,
+  { value, placeholder, attributes, sanitize }: InputOptions): HTMLElement {
+  const startWithElementWrapper = Dom.make('div', css.wrapper);
+  const startLabelTag = Dom.make('div', 'cdx-list-start-with-field__startlabel', {
+    innerText:startLabel
+  })
+ const inpuWrapper=Dom.make('div', 'cdx-list-start-with-field__input-wrapper');
+
+  const input = Dom.make('input', css.input, {
+    placeholder,
+    /**
+     * Used to prevent focusing on the input by Tab key
+     * (Popover in the Toolbar lays below the blocks,
+     * so Tab in the last block will focus this hidden input if this property is not set)
+     */
+    tabIndex: -1,
+    /**
+     * Value of the start property, if it is not specified, then it is set to one
+     */
+    value,
+    type: 'number'
+  }) as HTMLInputElement;
+
+  /**
+   * Add passed attributes to the input
+   */
+  for (const attribute in attributes) {
+    input.setAttribute(attribute, attributes[attribute]);
+  }
+  startWithElementWrapper.appendChild(startLabelTag);
+  inpuWrapper.appendChild(input);
+  startWithElementWrapper.appendChild(inpuWrapper);
+
+
+
+  input.addEventListener('input', () => {
+    /**
+     * If input sanitizer specified, then sanitize input value
+     */
+    if (sanitize !== undefined) {
+      input.value = sanitize(input.value);
+    }
+
+    const validInput = input.checkValidity();
+
+    /**
+     * If input is invalid and classlist does not contain invalid class, add it
+     */
+    if (!validInput && !startWithElementWrapper.classList.contains(css.startWithElementWrapperInvalid)) {
+      startWithElementWrapper.classList.add(css.startWithElementWrapperInvalid);
+    }
+
+    /**
+     * If input is valid and classlist contains invalid class, remove it
+     */
+    if (validInput && startWithElementWrapper.classList.contains(css.startWithElementWrapperInvalid)) {
+      startWithElementWrapper.classList.remove(css.startWithElementWrapperInvalid);
+    }
+
+    /**
+     * If input is invalid, than do not change start with attribute
+     */
+    if (!validInput) {
+      return;
+    }
+
+    inputCallback(input.value);
+  });
+
+  return startWithElementWrapper;
+}

package/src/plugins/list/utils/stripNumbers.ts

@@ -0,0 +1,7 @@
+/**
+ * Removes everything except numbers in passed string
+ * @param input - string to be striped
+ */
+export default function stripNumbers(input: string): string {
+  return input.replace(/\D+/g, '');
+}

package/src/plugins/list/utils/type-guards.ts

@@ -0,0 +1,8 @@
+/**
+ * Type guard to check if a node is an HTMLElement, then we can safely use it as an HTMLElement
+ * @param node - Node to be checked, wherever it is an HTMLElement
+ */
+export function isHtmlElement(node: Node): node is HTMLElement {
+  // node is an HTMLElement if it is an element node
+  return node.nodeType === Node.ELEMENT_NODE;
+}

package/src/plugins/marker/index.ts

@@ -0,0 +1,199 @@
+/**
+ * Build styles
+ */
+import '@ebl-vue/editor-render/styles/marker.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
+      }
+    };
+  }
+}
+