Merge pull request #92 from editor-js/ol-couters-customization

feat(properties): implement counterType config property

src/ListTabulator/index.ts

@@ -19,6 +19,7 @@ import { getItemChildWrapper } from '../utils/getItemChildWrapper';
 import { removeChildWrapperIfEmpty } from '../utils/removeChildWrapperIfEmpty';
 import { getItemContentElement } from '../utils/getItemContentElement';
 import { focusItem } from '../utils/focusItem';
+import type { OlCounterType } from '../types/OlCounterType';
 
 /**
  * Class that is responsible for list tabulation
@@ -191,6 +192,13 @@ export default class ListTabulator<Renderer extends ListRenderer> {
       this.changeStartWith(this.data.start);
     }
 
+    /**
+     * Set counterType value from initial data
+     */
+    if (this.data.counterType !== undefined) {
+      this.changeCounters(this.data.counterType);
+    }
+
     return this.listWrapper;
   }
 
@@ -233,6 +241,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
     if (this.data.style === 'ordered') {
       dataToSave = {
         start: this.data.start,
+        counterType: this.data.counterType,
         ...dataToSave,
       };
     }
@@ -410,6 +419,16 @@ export default class ListTabulator<Renderer extends ListRenderer> {
     this.data.start = index;
   }
 
+  /**
+   * Changes ordered list counterType property value
+   * @param counterType - new value of the counterType value
+   */
+  public changeCounters(counterType: OlCounterType): void {
+    this.listWrapper!.style.setProperty('--list-counter-type', counterType);
+
+    this.data.counterType = counterType;
+  }
+
   /**
    * Handles Enter keypress
    * @param event - keydown

src/index.ts

@@ -9,13 +9,14 @@ import type { NestedListConfig, ListData, ListDataStyle, ListItem } from './type
 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';
 
 /**
  * Build styles
  */
 import './styles/list.pcss';
 import './styles/input.pcss';
-import { renderToolboxInput } from './utils/renderToolboxInput';
 
 /**
  * Constructor Params for Nested List Tool, use to pass initial data and settings
@@ -210,6 +211,13 @@ export default class NestedList {
 
     this.data = Object.keys(data).length ? data : initialData;
 
+    /**
+     * Assign default value of the property for the ordered list
+     */
+    if (this.listStyle === 'ordered' && this.data.counterType === undefined) {
+      this.data.counterType = 'numeric';
+    }
+
     this.changeTabulatorByStyle();
   }
 
@@ -259,28 +267,28 @@ export default class NestedList {
   public renderSettings(): MenuConfigItem[] {
     const defaultTunes: MenuConfigItem[] = [
       {
-        name: 'unordered' as const,
         label: this.api.i18n.t('Unordered'),
         icon: IconListBulleted,
         closeOnActivate: true,
+        isActive: this.listStyle == 'unordered',
         onActivate: () => {
           this.listStyle = 'unordered';
         },
       },
       {
-        name: 'ordered' as const,
         label: this.api.i18n.t('Ordered'),
         icon: IconListNumbered,
         closeOnActivate: true,
+        isActive: this.listStyle == 'ordered',
         onActivate: () => {
           this.listStyle = 'ordered';
         },
       },
       {
-        name: 'checklist' as const,
         label: this.api.i18n.t('Checklist'),
         icon: IconChecklist,
         closeOnActivate: true,
+        isActive: this.listStyle == 'checklist',
         onActivate: () => {
           this.listStyle = 'checklist';
         },
@@ -300,14 +308,12 @@ export default class NestedList {
           },
         });
 
-      const unorderedListTunes: MenuConfigItem[] = [
+      const orderedListTunes: MenuConfigItem[] = [
         {
-          name: 'start with' as const,
           label: this.api.i18n.t('Start with'),
           children: {
             items: [
               {
-                name: 'start with input',
                 element: startWithElement,
                 // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
                 type: 'html',
@@ -317,12 +323,44 @@ export default class NestedList {
         },
       ];
 
-      defaultTunes.push(...unorderedListTunes);
+      const orderedListCountersTunes: MenuConfigItem = {
+        label: this.api.i18n.t('Counters type'),
+        children: {
+          items: [],
+        },
+      };
+
+      /**
+       * For each counter type in OlCounterType create toolbox item
+       */
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      OlCounterTypesMap.keys().forEach((counterType: string) => {
+        orderedListCountersTunes.children.items!.push({
+          title: this.api.i18n.t(counterType),
+          isActive: this.data.counterType === OlCounterTypesMap.get(counterType),
+          closeOnActivate: true,
+          onActivate: () => {
+            this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType);
+          },
+        });
+      });
+
+      defaultTunes.push(...orderedListTunes, orderedListCountersTunes);
     }
 
     return defaultTunes;
   }
 
+  /**
+   * 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.counterType = counterType;
+  }
+
   /**
    * Changes ordered list start property value
    * @param index - new value of the start property

src/styles/list.pcss

@@ -3,7 +3,7 @@
   padding: 0;
   outline: none;
   counter-reset: item;
-  list-style: none;
+  --list-counter-type: numeric;
   --radius-border: 5px;
   --checkbox-background: #fff;
   --color-border: #C9C9C9;
@@ -46,7 +46,7 @@
   }
 
   &-ordered &__item::before {
-    content: counters(item, ".") ".";
+    content: counters(item, ".", var(--list-counter-type)) ".";
   }
 
   &-ordered {

src/types/ListParams.ts

@@ -1,4 +1,5 @@
 import type { ChecklistItemMeta, OrderedListItemMeta, UnorderedListItemMeta } from './ItemMeta';
+import type { OlCounterType } from './OlCounterType';
 
 /**
  * list style to make list as ordered or unordered
@@ -17,15 +18,19 @@ export interface ListData {
    * list of first-level elements
    */
   items: ListItem[];
+  /**
+   * Max level of the nesting in list
+   * If nesting is not needed, it could be set to 1
+   */
+  maxLevel?: number;
   /**
    * Start property used only in ordered list
    */
   start?: number;
   /**
-   * Max level of the nesting in list
-   * If nesting is not needed, it could be set to 1
+   * Counters type used only in ordered list
    */
-  maxLevel?: number;
+  counterType?: OlCounterType;
 }
 
 /**

src/types/OlCounterType.ts

@@ -0,0 +1,31 @@
+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
+ */
+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'],
+]);