@ebl-vue/editor-full 2.31.11 → 2.31.12

package/src/plugins/list-bak/types/ItemMeta.ts

@@ -0,0 +1,40 @@
+import type { OlCounterType } from './OlCounterType';
+
+/**
+ * Meta information of each list item
+ */
+export interface ItemMetaBase {}
+
+/**
+ * Meta information of checklist item
+ */
+export interface ChecklistItemMeta extends ItemMetaBase {
+  /**
+   * State of the checkbox of the item
+   */
+  checked: boolean;
+}
+
+/**
+ * Meta information of ordered list item
+ */
+export interface OrderedListItemMeta extends ItemMetaBase {
+  /**
+   * If passed, ordered list counters will start with this index
+   */
+  start?: number;
+  /**
+   * Counters type used only in ordered list
+   */
+  counterType?: OlCounterType;
+}
+
+/**
+ * Meta information of unordered list item
+ */
+export interface UnorderedListItemMeta extends ItemMetaBase {}
+
+/**
+ * Type that represents all available meta objects for list item
+ */
+export type ItemMeta = ChecklistItemMeta | OrderedListItemMeta | UnorderedListItemMeta;

package/src/plugins/list-bak/types/ListParams.ts

@@ -0,0 +1,102 @@
+import type { ItemMeta } from './ItemMeta';
+import type { OlCounterType } from './OlCounterType';
+
+/**
+ * list style to make list as ordered or unordered
+ */
+export type ListDataStyle = 'ordered' | 'unordered' | 'checklist';
+
+/**
+ * Interface that represents data of the List tool
+ */
+export type ListData = Omit<ListItem, 'content'> & {
+  /**
+   * Style of the list tool
+   */
+  style: ListDataStyle;
+};
+
+/**
+ * Interface that represents data of the List tool
+ */
+export interface OldListData {
+  /**
+   * Style of the List tool
+   */
+  style: 'ordered' | 'unordered';
+  /**
+   * Array of items of the List tool
+   */
+  items: string[];
+}
+
+/**
+ * Type that represents data of the List tool
+ */
+export type OldNestedListData = Omit<ListData, 'meta'>;
+
+/**
+ * Interface that represents old checklist data format
+ */
+export interface OldChecklistData {
+  /**
+   * Checklist items
+   */
+  items: OldChecklistItem[];
+}
+
+/**
+ * Interface that represents old checklist item format
+ */
+interface OldChecklistItem {
+  /**
+   * Text of the checklist item
+   */
+  text: string;
+  /**
+   * Checked state of the checklist item
+   */
+  checked: boolean;
+}
+
+/**
+ * List item within the output data
+ */
+export interface ListItem {
+  /**
+   * list item text content
+   */
+  content: string;
+
+  /**
+   * Meta information of each list item
+   */
+  meta: ItemMeta;
+
+  /**
+   * sublist items
+   */
+  items: ListItem[];
+}
+
+/**
+ * Tool's configuration
+ */
+export interface ListConfig {
+  /**
+   * default list style: ordered or unordered
+   * default is unordered
+   */
+  defaultStyle?: ListDataStyle;
+  /**
+   * Max level of the nesting in list
+   * If nesting is not needed, it could be set to 1
+   */
+  maxLevel?: number;
+  /**
+   * Specifies which counter types should be shown in the ordered list style selector.
+   * @example ['numeric', 'upper-roman'] // Shows selector with these two options
+   * @default undefined // All counter types are available when not specified
+   */
+  counterTypes?: OlCounterType[];
+}

package/src/plugins/list-bak/types/ListRenderer.ts

@@ -0,0 +1,6 @@
+import type { CheckListRenderer, OrderedListRenderer, UnorderedListRenderer } from '../ListRenderer';
+
+/**
+ * Type that represents all possible list renderer types
+ */
+export type ListRenderer = CheckListRenderer | OrderedListRenderer | UnorderedListRenderer;

package/src/plugins/list-bak/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-bak/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-bak/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-bak/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-bak/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-bak/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-bak/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-bak/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-bak/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-bak/utils/normalizeData.ts

@@ -0,0 +1,84 @@
+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-bak/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-bak/utils/renderToolboxInput.ts

@@ -0,0 +1,105 @@
+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(inputCallback: (index: string) => void,
+  { value, placeholder, attributes, sanitize }: InputOptions): HTMLElement {
+  const startWithElementWrapper = Dom.make('div', css.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,
+  }) as HTMLInputElement;
+
+  /**
+   * Add passed attributes to the input
+   */
+  for (const attribute in attributes) {
+    input.setAttribute(attribute, attributes[attribute]);
+  }
+
+  startWithElementWrapper.appendChild(input);
+
+  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-bak/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-bak/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;
+}