diff --git a/src/ListTabulator/index.ts b/src/ListTabulator/index.ts index e86b03d..88fac50 100644 --- a/src/ListTabulator/index.ts +++ b/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 { 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 { if (this.data.style === 'ordered') { dataToSave = { start: this.data.start, + counterType: this.data.counterType, ...dataToSave, }; } @@ -410,6 +419,16 @@ export default class ListTabulator { 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 diff --git a/src/index.ts b/src/index.ts index 9ef4d55..fdebd69 100644 --- a/src/index.ts +++ b/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 diff --git a/src/styles/list.pcss b/src/styles/list.pcss index 832a22e..86ce990 100644 --- a/src/styles/list.pcss +++ b/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 { diff --git a/src/types/ListParams.ts b/src/types/ListParams.ts index 98f89b1..5e83365 100644 --- a/src/types/ListParams.ts +++ b/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; } /** diff --git a/src/types/OlCounterType.ts b/src/types/OlCounterType.ts new file mode 100644 index 0000000..b39e2ee --- /dev/null +++ b/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([ + /** + * 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'], +]);