Merge branch 'main' into fix-link-removing-on-paste

README.md

@@ -2,6 +2,8 @@
 
 # Editorjs List Tool
 
+![](assets/readme_image.png)
+
 - 🤩 Part of [Editor.js](https://editorjs.io/) ecosystem.
 - 📂 Nesting.
 - 🔥 Ordered and Unordered lists.
@@ -26,25 +28,25 @@ yarn add @editorjs/list
 Include module at your application
 
 ```javascript
-import List from '@editorjs/list';
+import EditorjsList from '@editorjs/list';
 ```
 
-Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/list@latest)
+Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/list@2)
 
 ## Usage
 
 Add the List Tool to the `tools` property of the Editor.js initial config.
 
 ```javascript
 import EditorJS from '@editorjs/editorjs';
-import List from '@editorjs/list';
+import EditorjsList from '@editorjs/list';
 
 var editor = EditorJS({
   // ...
   tools: {
     ...
     list: {
-      class: List,
+      class: EditorjsList,
       inlineToolbar: true,
       config: {
         defaultStyle: 'unordered'
@@ -53,6 +55,8 @@ var editor = EditorJS({
   },
 });
 ```
+> [!IMPORTANT]
+> Note that in List 2.0 class name changed from `List` to `EditorjsList`.
 
 ## Config Params
 

src/index.ts

@@ -5,12 +5,13 @@ import type {
   ToolConfig
 } from '@editorjs/editorjs/types/tools';
 import { IconListBulleted, IconListNumbered, IconChecklist } from '@codexteam/icons';
+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 { type OlCounterType, OlCounterTypesMap } from './types/OlCounterType';
+import { OlCounterIconsMap, type OlCounterType, OlCounterTypesMap } from './types/OlCounterType';
 
 /**
  * Build styles
@@ -316,6 +317,7 @@ export default class EditorjsList {
       const orderedListTunes: MenuConfigItem[] = [
         {
           label: this.api.i18n.t('Start with'),
+          icon: IconStartWith,
           children: {
             items: [
               {
@@ -329,7 +331,8 @@ export default class EditorjsList {
       ];
 
       const orderedListCountersTunes: MenuConfigItem = {
-        label: this.api.i18n.t('Counters type'),
+        label: this.api.i18n.t('Counter type'),
+        icon: OlCounterIconsMap.get((this.data.meta as OrderedListItemMeta).counterType!),
         children: {
           items: [],
         },
@@ -338,19 +341,19 @@ export default class EditorjsList {
       /**
        * For each counter type in OlCounterType create toolbox item
        */
-
       OlCounterTypesMap.forEach((_, counterType: string) => {
         orderedListCountersTunes.children.items!.push({
           title: this.api.i18n.t(counterType),
+          icon: OlCounterIconsMap.get(OlCounterTypesMap.get(counterType)!),
           isActive: (this.data.meta as OrderedListItemMeta).counterType === OlCounterTypesMap.get(counterType),
           closeOnActivate: true,
           onActivate: () => {
             this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType);
           },
         });
       });
-
-      defaultTunes.push(...orderedListTunes, orderedListCountersTunes);
+      // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
+      defaultTunes.push({ type: 'separator' }, ...orderedListTunes, orderedListCountersTunes);
     }
 
     return defaultTunes;

src/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>';

src/types/OlCounterType.ts

@@ -1,7 +1,9 @@
+import { IconNumber, IconLowerRoman, IconUpperRoman, IconLowerAlpha, IconUpperAlpha } from '../styles/icons/index.js';
+
 export type OlCounterType = 'numeric' | 'upper-roman' | 'lower-roman' | 'upper-alpha' | 'lower-alpha';
 
 /**
- * Enum that represents all of the supported styles of the counters for ordered list
+ * Map that represents all of the supported styles of the counters for ordered list
  */
 export const OlCounterTypesMap = new Map<string, string>([
   /**
@@ -29,3 +31,33 @@ export const OlCounterTypesMap = new Map<string, string>([
    */
   ['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],
+]);