Merge pull request #116 from editor-js/add-icons

Feat (presentation): Add icons for OL customisation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/list",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "keywords": [
     "codex editor",
     "list",

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],
+]);