@ebl-vue/editor-full 2.31.35 → 2.31.36

package/src/plugins/list/index.ts

@@ -0,0 +1,488 @@
+import type { API, BlockAPI, PasteConfig, ToolboxConfig } from '@ebl-vue/editorjs';
+import type {
+  BlockToolConstructorOptions,
+  MenuConfigItem,
+  ToolConfig
+} from '@ebl-vue/editorjs/types/tools';
+import { IconListBulleted, IconListNumbered, IconChecklist } from '../../icons';
+import { IconStartWith } from '../../icons';
+import type { ListConfig, ListData, ListDataStyle, ListItem, OldListData } from './types/ListParams';
+import ListTabulator from './ListTabulator';
+import { CheckListRenderer, OrderedListRenderer, UnorderedListRenderer } from './ListRenderer';
+import type { ListRenderer } from './types/ListRenderer';
+import { renderToolboxInput } from './utils/renderToolboxInput';
+import { OlCounterIconsMap, type OlCounterType, OlCounterTypesMap } from './types/OlCounterType';
+
+/**
+ * Build styles
+ */
+import '@ebl-vue/editor-render/styles/list.css';
+
+import stripNumbers from './utils/stripNumbers';
+import normalizeData from './utils/normalizeData';
+import type { PasteEvent } from './types';
+import type { OrderedListItemMeta } from './types/ItemMeta';
+
+/**
+ * Constructor Params for Editorjs List Tool, use to pass initial data and settings
+ */
+export type ListParams = BlockToolConstructorOptions<ListData | OldListData, ListConfig>;
+
+/**
+ * Default class of the component used in editor
+ */
+export default class EditorjsList {
+  /**
+   * Notify core that read-only mode is supported
+   */
+  public static get isReadOnlySupported(): boolean {
+    return true;
+  }
+
+  /**
+   * Allow to use native Enter behaviour
+   */
+  public static get enableLineBreaks(): boolean {
+    return true;
+  }
+
+  /**
+   * Get Tool toolbox settings
+   * icon - Tool icon's SVG
+   * title - title to show in toolbox
+   */
+  public static get toolbox(): ToolboxConfig {
+    return [
+      {
+        icon: IconListBulleted,
+        title: 'Unordered List',
+        data: {
+          style: 'unordered',
+        },
+      },
+      {
+        icon: IconListNumbered,
+        title: 'Ordered List',
+        data: {
+          style: 'ordered',
+        },
+      },
+      {
+        icon: IconChecklist,
+        title: 'Checklist',
+        data: {
+          style: 'checklist',
+        },
+      },
+    ];
+  }
+
+  /**
+   * On paste sanitzation config. Allow only tags that are allowed in the Tool.
+   * @returns - paste config object used in editor
+   */
+  public static get pasteConfig(): PasteConfig {
+    return {
+      tags: ['OL', 'UL', 'LI'],
+    };
+  }
+
+  /**
+   * Convert from text to list with import and export list to text
+   */
+  public static get conversionConfig(): {
+    /**
+     * Method that is responsible for conversion from data to string
+     * @param data - current list data
+     * @returns - contents string formed from list data
+     */
+    export: (data: ListData) => string;
+
+    /**
+     * Method that is responsible for conversion from string to data
+     * @param content - contents string
+     * @returns - list data formed from contents string
+     */
+    import: (content: string, config: ToolConfig<ListConfig>) => ListData;
+  } {
+    return {
+      export: (data) => {
+        return EditorjsList.joinRecursive(data);
+      },
+      import: (content, config) => {
+        return {
+          meta: {},
+          items: [
+            {
+              content,
+              meta: {},
+              items: [],
+            },
+          ],
+          style: config?.defaultStyle !== undefined ? config.defaultStyle : 'unordered',
+        };
+      },
+    };
+  }
+
+  /**
+   * Get list style name
+   */
+  private get listStyle(): ListDataStyle {
+    return this.data.style || this.defaultListStyle;
+  }
+
+  /**
+   * Set list style
+   * @param style - new style to set
+   */
+  private set listStyle(style: ListDataStyle) {
+    this.data.style = style;
+
+    this.changeTabulatorByStyle();
+
+    /**
+     * Create new list element
+     */
+    const newListElement = this.list!.render();
+
+    this.listElement?.replaceWith(newListElement);
+
+    this.listElement = newListElement;
+  }
+
+  /**
+   * The Editor.js API
+   */
+  private api: API;
+
+  /**
+   * Is Ediotrjs List Tool read-only
+   */
+  private readOnly: boolean;
+
+  /**
+   * Tool's configuration
+   */
+  private config: ListConfig | undefined;
+
+  /**
+   * Default list style formes as passed default list style from config or 'ordered' as default
+   */
+  private defaultListStyle?: ListConfig['defaultStyle'];
+
+  /**
+   * Default Counter type of the ordered list
+   */
+  private defaultCounterTypes: OlCounterType[];
+
+  /**
+   * Tool's data
+   */
+  private data: ListData;
+
+  /**
+   * Editor block api
+   */
+  private block: BlockAPI;
+
+  /**
+   * Class that is responsible for complete list rendering and saving
+   */
+  private list: ListTabulator<ListRenderer> | undefined;
+
+  /**
+   * Main constant wrapper of the whole list
+   */
+  private listElement: HTMLElement | undefined;
+
+  /**
+   * Render plugin`s main Element and fill it with saved data
+   * @param params - tool constructor options
+   * @param params.data - previously saved data
+   * @param params.config - user config for Tool
+   * @param params.api - Editor.js API
+   * @param params.readOnly - read-only mode flag
+   */
+  constructor({ data, config, api, readOnly, block }: ListParams) {
+    this.api = api;
+    this.readOnly = readOnly;
+    this.config = config;
+    this.block = block;
+
+    /**
+     * Set the default list style from the config or presetted 'unordered'.
+     */
+    this.defaultListStyle = this.config?.defaultStyle || 'unordered';
+
+    /**
+     * Set the default counter types for the ordered list
+     */
+    this.defaultCounterTypes = (this.config as ListConfig).counterTypes || Array.from(OlCounterTypesMap.values()) as OlCounterType[];
+
+    const initialData = {
+      style: this.defaultListStyle,
+      meta: {},
+      items: [],
+    };
+
+    this.data = Object.keys(data).length ? normalizeData(data) : initialData;
+
+    /**
+     * Assign default value of the property for the ordered list
+     */
+    if (this.listStyle === 'ordered' && (this.data.meta as OrderedListItemMeta).counterType === undefined) {
+      (this.data.meta as OrderedListItemMeta).counterType = 'numeric';
+    }
+
+    this.changeTabulatorByStyle();
+  }
+
+  /**
+   * Convert from list to text for conversionConfig
+   * @param data - current data of the list
+   * @returns - string of the recursively merged contents of the items of the list
+   */
+  private static joinRecursive(data: ListData | ListItem): string {
+    return data.items
+      .map(item => `${item.content} ${EditorjsList.joinRecursive(item)}`)
+      .join('');
+  }
+
+  /**
+   * Function that is responsible for content rendering
+   * @returns rendered list wrapper with all contents
+   */
+  public render(): HTMLElement {
+    this.listElement = this.list!.render();
+
+    return this.listElement;
+  }
+
+  /**
+   * Function that is responsible for content saving
+   * @returns formatted content used in editor
+   */
+  public save(): ListData {
+    this.data = this.list!.save();
+
+    return this.data;
+  }
+
+  /**
+   * Function that is responsible for mergind two lists into one
+   * @param data - data of the next standing list, that should be merged with current
+   */
+  public merge(data: ListData): void {
+    this.list!.merge(data);
+  }
+
+  /**
+   * Creates Block Tune allowing to change the list style
+   * @returns array of tune configs
+   */
+  public renderSettings(): MenuConfigItem[] {
+    const defaultTunes: MenuConfigItem[] = [
+      {
+        label: this.api.i18n.t('Unordered'),
+        icon: IconListBulleted,
+        closeOnActivate: true,
+        isActive: this.listStyle == 'unordered',
+        onActivate: () => {
+          this.listStyle = 'unordered';
+        },
+      },
+      {
+        label: this.api.i18n.t('Ordered'),
+        icon: IconListNumbered,
+        closeOnActivate: true,
+        isActive: this.listStyle == 'ordered',
+        onActivate: () => {
+          this.listStyle = 'ordered';
+        },
+      },
+      {
+        label: this.api.i18n.t('Checklist'),
+        icon: IconChecklist,
+        closeOnActivate: true,
+        isActive: this.listStyle == 'checklist',
+        onActivate: () => {
+          this.listStyle = 'checklist';
+        },
+      },
+    ];
+
+    if (this.listStyle === 'ordered') {
+      const startWithElement = renderToolboxInput(
+        this.api.i18n.t('Start with'),
+        (index: string) => this.changeStartWith(Number(index)),
+        {
+          value: String((this.data.meta as OrderedListItemMeta).start ?? 1),
+          placeholder: '',
+          attributes: {
+            required: 'true',
+          },
+          sanitize: input => stripNumbers(input),
+        });
+
+      const orderedListTunes: MenuConfigItem[] = [
+        {
+          label: this.api.i18n.t('Start with'),
+          icon: IconStartWith,
+          name: "list-setting-start-with",
+          element: startWithElement,
+          // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
+          type: 'html',
+          // element: { startWithElement },
+          // type: 'html',
+          // children: {
+          //   items: [
+          //     {
+          //       element: startWithElement,
+          //       // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
+          //       type: 'html',
+          //     },
+          //   ],
+          // },
+        },
+      ];
+
+      const orderedListCountersTunes: MenuConfigItem = {
+        label: this.api.i18n.t('Counter type'),
+        name:"list-setting",
+        icon: OlCounterIconsMap.get((this.data.meta as OrderedListItemMeta).counterType!),
+        children: {
+          items: [],
+        },
+      };
+
+      /**
+       * For each counter type in OlCounterType create toolbox item
+       */
+      OlCounterTypesMap.forEach((_, counterType: string) => {
+        const counterTypeValue = OlCounterTypesMap.get(counterType)! as OlCounterType;
+
+        if (!this.defaultCounterTypes.includes(counterTypeValue)) {
+          return;
+        }
+
+        orderedListCountersTunes.children.items!.push({
+          title: this.api.i18n.t(counterType),
+          icon: OlCounterIconsMap.get(counterTypeValue),
+          isActive: (this.data.meta as OrderedListItemMeta).counterType === OlCounterTypesMap.get(counterType),
+          closeOnActivate: true,
+          onActivate: () => {
+            this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType);
+          },
+        });
+      });
+
+      /**
+       * Dont show Counter type tune if there is no valid counter types
+       */
+      if (orderedListCountersTunes.children.items!.length > 1) {
+        orderedListTunes.push(orderedListCountersTunes);
+      }
+
+      // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
+      defaultTunes.push({ type: 'separator' }, ...orderedListTunes);
+    }
+
+    return defaultTunes;
+  }
+
+  /**
+   * On paste callback that is fired from Editor.
+   * @param event - event with pasted data
+   */
+  public onPaste(event: PasteEvent): void {
+    const { tagName: tag } = event.detail.data;
+
+    switch (tag) {
+      case 'OL':
+        this.listStyle = 'ordered';
+        break;
+      case 'UL':
+      case 'LI':
+        this.listStyle = 'unordered';
+    }
+
+    this.list!.onPaste(event);
+  }
+
+  /**
+   * Handle UL, OL and LI tags paste and returns List data
+   * @param element - html element that contains whole list
+   */
+  public pasteHandler(element: PasteEvent['detail']['data']): ListData {
+    const data = this.list!.pasteHandler(element);
+
+    return data;
+  }
+
+  /**
+   * Changes ordered list counterType property value
+   * @param counterType - new value of the counterType value
+   */
+  private changeCounters(counterType: OlCounterType): void {
+    this.list?.changeCounters(counterType);
+
+    (this.data.meta as OrderedListItemMeta).counterType = counterType;
+  }
+
+  /**
+   * Changes ordered list start property value
+   * @param index - new value of the start property
+   */
+  private changeStartWith(index: number): void {
+    this.list?.changeStartWith(index);
+
+    (this.data.meta as OrderedListItemMeta).start = index;
+  }
+
+  /**
+   * This method allows changing tabulator respectfully to passed style
+   */
+  private changeTabulatorByStyle(): void {
+    switch (this.listStyle) {
+      case 'ordered':
+        this.list = new ListTabulator<OrderedListRenderer>({
+          data: this.data,
+          readOnly: this.readOnly,
+          api: this.api,
+          config: this.config,
+          block: this.block,
+        },
+        new OrderedListRenderer(this.readOnly, this.config)
+        );
+
+        break;
+
+      case 'unordered':
+        this.list = new ListTabulator<UnorderedListRenderer>({
+          data: this.data,
+          readOnly: this.readOnly,
+          api: this.api,
+          config: this.config,
+          block: this.block,
+        },
+        new UnorderedListRenderer(this.readOnly, this.config)
+        );
+
+        break;
+
+      case 'checklist':
+        this.list = new ListTabulator<CheckListRenderer>({
+          data: this.data,
+          readOnly: this.readOnly,
+          api: this.api,
+          config: this.config,
+          block: this.block,
+        },
+        new CheckListRenderer(this.readOnly, this.config)
+        );
+
+        break;
+    }
+  }
+}

package/src/plugins/list/styles/CssPrefix.ts

@@ -0,0 +1,4 @@
+/**
+ * Default css prefix for list
+ */
+export const CssPrefix = 'cdx-list';

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

@@ -0,0 +1,14 @@
+/**
+ * Type that represents the list item
+ */
+export type ItemElement = HTMLElement;
+
+/**
+ * Type that represents children wrapper of the list item
+ */
+export type ItemChildWrapperElement = HTMLElement;
+
+/**
+ * Type that represents content element of the item
+ */
+export type ItemContentElement = HTMLElement;

package/src/plugins/list/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/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/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;