@ebl-vue/editor-full 1.0.8

package/src/plugins/list/index.ts

@@ -0,0 +1,502 @@
+import type { API, BlockAPI, PasteConfig, ToolboxConfig } from '@ebl-vue/editorjs';
+import type {
+  BlockToolConstructorOptions,
+  MenuConfigItem,
+  ToolConfig
+} from '@editorjs/editorjs/types/tools';
+
+import { IconStartWith } from './styles/icons/index.js';
+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';
+
+const IconListBulleted = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="9" y1="7" x2="19" y2="7" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<line x1="9" y1="12" x2="19" y2="12" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<line x1="9" y1="17" x2="19" y2="17" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<path d="M5.00001 17H4.99002" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<path d="M5.00001 12H4.99002" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<path d="M5.00001 7H4.99002" stroke="black" stroke-width="2" stroke-linecap="round"/>
+</svg>
+`;
+const IconListNumbered = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="12" y1="7" x2="19" y2="7" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<line x1="12" y1="12" x2="19" y2="12" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<line x1="12" y1="17" x2="19" y2="17" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<path d="M7.79999 14L7.79999 7.2135C7.79999 7.12872 7.7011 7.0824 7.63597 7.13668L4.79999 9.5" stroke="black" stroke-width="2" stroke-linecap="round"/>
+</svg>
+`;
+const IconChecklist = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.2 12L11.0586 13.8586C11.1367 13.9367 11.2633 13.9367 11.3414 13.8586L14.7 10.5" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<rect x="5" y="5" width="14" height="14" rx="4" stroke="black" stroke-width="2"/>
+</svg>
+`;
+
+/**
+ * Build styles
+ */
+import './styles/list.css';
+import './styles/input.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(
+  //       (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,
+  //         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'),
+  //       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/styles/icons/index.ts

@@ -0,0 +1,10 @@
+/**
+ * This file exports icons needed for Editorjs List plugin, but this icons are not released yet
+ * @todo remove this file and use icons from codex-team/icons package, when version with this icons will be released
+ */
+export const IconNumber = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 14.2L10 7.4135C10 7.32872 9.90111 7.28241 9.83598 7.33668L7 9.7" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M13.2087 14.2H13.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>';
+export const IconLowerRoman = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.2087 14.2H13.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M10 14.2L10 9.5" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M10 7.01L10 7" stroke="black" stroke-width="1.8" stroke-linecap="round"/></svg>';
+export const IconUpperRoman = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.2087 14.2H13.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M10 14.2L10 7.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>';
+export const IconUpperAlpha = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.0087 14.2H16" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M7 14.2L7.78865 12M13 14.2L12.1377 12M7.78865 12C7.78865 12 9.68362 7 10 7C10.3065 7 12.1377 12 12.1377 12M7.78865 12L12.1377 12" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>';
+export const IconLowerAlpha = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2087 14.2H14.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M11.5 14.5C11.5 14.5 11 13.281 11 12.5M7 9.5C7 9.5 7.5 8.5 9 8.5C10.5 8.5 11 9.5 11 10.5L11 11.5M11 11.5L11 12.5M11 11.5C11 11.5 7 11 7 13C7 15.3031 11 15 11 12.5" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>';
+export const IconStartWith = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 14.2L8 7.4135C8 7.32872 7.90111 7.28241 7.83598 7.33668L5 9.7" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M14 13L16.4167 10.7778M16.4167 10.7778L14 8.5M16.4167 10.7778H11.6562" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';

package/src/plugins/list/styles/input.css

@@ -0,0 +1,36 @@
+.cdx-list-start-with-field {
+  background: #F8F8F8;
+  border: 1px solid rgba(226,226,229,0.20);
+  border-radius: 6px;
+  padding: 2px;
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  grid-template-rows: auto;
+}
+
+  .cdx-list-start-with-field--invalid {
+    background: #FFECED;
+    border: 1px solid #E13F3F;
+  }
+
+  .cdx-list-start-with-field--invalid .cdx-list-start-with-field__input {
+    color: #E13F3F;
+  }
+
+  .cdx-list-start-with-field__input {
+    font-size: 14px;
+    outline: none;
+    font-weight: 500;
+    font-family: inherit;
+    border: 0;
+    background: transparent;
+    margin: 0;
+    padding: 0;
+    line-height: 22px;
+    min-width: calc(100% - var(--toolbox-buttons-size) - var(--icon-margin-right));
+  }
+
+  .cdx-list-start-with-field__input::placeholder {
+       color: var(--grayText);
+       font-weight: 500;
+    }