From 73badcea3330016607c6588c3aea9859a4da700d Mon Sep 17 00:00:00 2001 From: e11sy <130844513+e11sy@users.noreply.github.com> Date: Mon, 28 Oct 2024 19:58:44 +0300 Subject: [PATCH 1/6] implemented counterType config property --- src/ListTabulator/index.ts | 19 ++++++++++++++ src/index.ts | 52 +++++++++++++++++++++++++++++++++++--- src/styles/list.pcss | 4 +-- src/types/ListParams.ts | 11 +++++--- src/types/OlCounterType.ts | 31 +++++++++++++++++++++++ 5 files changed, 109 insertions(+), 8 deletions(-) create mode 100644 src/types/OlCounterType.ts diff --git a/src/ListTabulator/index.ts b/src/ListTabulator/index.ts index e86b03d6..c16371f1 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 countersType value from initial data + */ + if (this.data.countersType !== undefined) { + this.changeCounters(this.data.countersType); + } + return this.listWrapper; } @@ -233,6 +241,7 @@ export default class ListTabulator { if (this.data.style === 'ordered') { dataToSave = { start: this.data.start, + countersType: this.data.countersType, ...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.countersType = counterType; + } + /** * Handles Enter keypress * @param event - keydown diff --git a/src/index.ts b/src/index.ts index 9ef4d55f..864f565d 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.countersType === undefined) { + this.data.countersType = 'numeric'; + } + this.changeTabulatorByStyle(); } @@ -263,6 +271,7 @@ export default class NestedList { label: this.api.i18n.t('Unordered'), icon: IconListBulleted, closeOnActivate: true, + isActive: this.listStyle == 'unordered', onActivate: () => { this.listStyle = 'unordered'; }, @@ -272,6 +281,7 @@ export default class NestedList { label: this.api.i18n.t('Ordered'), icon: IconListNumbered, closeOnActivate: true, + isActive: this.listStyle == 'ordered', onActivate: () => { this.listStyle = 'ordered'; }, @@ -281,6 +291,7 @@ export default class NestedList { label: this.api.i18n.t('Checklist'), icon: IconChecklist, closeOnActivate: true, + isActive: this.listStyle == 'checklist', onActivate: () => { this.listStyle = 'checklist'; }, @@ -300,7 +311,7 @@ export default class NestedList { }, }); - const unorderedListTunes: MenuConfigItem[] = [ + const orderedListTunes: MenuConfigItem[] = [ { name: 'start with' as const, label: this.api.i18n.t('Start with'), @@ -317,12 +328,47 @@ export default class NestedList { }, ]; - defaultTunes.push(...unorderedListTunes); + const orderedListCountersTunes: MenuConfigItem = { + name: 'counter types' as const, + label: this.api.i18n.t('Counters type'), + children: { + items: [], + }, + }; + + /** + * For each counter type in OlCounterType create toolbox item + */ + OlCounterTypesMap.keys().forEach((counterType: string) => { + orderedListCountersTunes.children.items!.push({ + name: counterType, + title: this.api.i18n.t(counterType), + isActive: this.data.countersType === OlCounterTypesMap.get(counterType), + closeOnActivate: true, + onActivate: () => { + this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType); + }, + // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types + type: 'default', + }); + }); + + 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.countersType = 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 832a22ee..86ce9905 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 98f89b13..dbfa0b9e 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; + countersType?: OlCounterType; } /** diff --git a/src/types/OlCounterType.ts b/src/types/OlCounterType.ts new file mode 100644 index 00000000..b39e2ee4 --- /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'], +]); From 90be126c168ba03639687e763fec8343bda1d094 Mon Sep 17 00:00:00 2001 From: e11sy <130844513+e11sy@users.noreply.github.com> Date: Mon, 28 Oct 2024 20:01:32 +0300 Subject: [PATCH 2/6] naming imroved --- src/ListTabulator/index.ts | 10 +++++----- src/index.ts | 8 ++++---- src/types/ListParams.ts | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/ListTabulator/index.ts b/src/ListTabulator/index.ts index c16371f1..88fac500 100644 --- a/src/ListTabulator/index.ts +++ b/src/ListTabulator/index.ts @@ -193,10 +193,10 @@ export default class ListTabulator { } /** - * Set countersType value from initial data + * Set counterType value from initial data */ - if (this.data.countersType !== undefined) { - this.changeCounters(this.data.countersType); + if (this.data.counterType !== undefined) { + this.changeCounters(this.data.counterType); } return this.listWrapper; @@ -241,7 +241,7 @@ export default class ListTabulator { if (this.data.style === 'ordered') { dataToSave = { start: this.data.start, - countersType: this.data.countersType, + counterType: this.data.counterType, ...dataToSave, }; } @@ -426,7 +426,7 @@ export default class ListTabulator { public changeCounters(counterType: OlCounterType): void { this.listWrapper!.style.setProperty('--list-counter-type', counterType); - this.data.countersType = counterType; + this.data.counterType = counterType; } /** diff --git a/src/index.ts b/src/index.ts index 864f565d..92eab902 100644 --- a/src/index.ts +++ b/src/index.ts @@ -214,8 +214,8 @@ export default class NestedList { /** * Assign default value of the property for the ordered list */ - if (this.listStyle === 'ordered' && this.data.countersType === undefined) { - this.data.countersType = 'numeric'; + if (this.listStyle === 'ordered' && this.data.counterType === undefined) { + this.data.counterType = 'numeric'; } this.changeTabulatorByStyle(); @@ -343,7 +343,7 @@ export default class NestedList { orderedListCountersTunes.children.items!.push({ name: counterType, title: this.api.i18n.t(counterType), - isActive: this.data.countersType === OlCounterTypesMap.get(counterType), + isActive: this.data.counterType === OlCounterTypesMap.get(counterType), closeOnActivate: true, onActivate: () => { this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType); @@ -366,7 +366,7 @@ export default class NestedList { private changeCounters(counterType: OlCounterType): void { this.list?.changeCounters(counterType); - this.data.countersType = counterType; + this.data.counterType = counterType; } /** diff --git a/src/types/ListParams.ts b/src/types/ListParams.ts index dbfa0b9e..5e833651 100644 --- a/src/types/ListParams.ts +++ b/src/types/ListParams.ts @@ -30,7 +30,7 @@ export interface ListData { /** * Counters type used only in ordered list */ - countersType?: OlCounterType; + counterType?: OlCounterType; } /** From 43850ad55c40bc8b640fab6a400808dac5c9e23d Mon Sep 17 00:00:00 2001 From: e11sy <130844513+e11sy@users.noreply.github.com> Date: Mon, 28 Oct 2024 20:42:03 +0300 Subject: [PATCH 3/6] removed unneded types annotation --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 92eab902..a9d22593 100644 --- a/src/index.ts +++ b/src/index.ts @@ -339,7 +339,7 @@ export default class NestedList { /** * For each counter type in OlCounterType create toolbox item */ - OlCounterTypesMap.keys().forEach((counterType: string) => { + OlCounterTypesMap.keys().forEach((counterType) => { orderedListCountersTunes.children.items!.push({ name: counterType, title: this.api.i18n.t(counterType), From d62c3cfa753da129835ffc04736f17e3be29ea81 Mon Sep 17 00:00:00 2001 From: e11sy <130844513+e11sy@users.noreply.github.com> Date: Mon, 28 Oct 2024 20:49:47 +0300 Subject: [PATCH 4/6] fix eslint --- src/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index a9d22593..cb0e970f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -339,7 +339,8 @@ export default class NestedList { /** * For each counter type in OlCounterType create toolbox item */ - OlCounterTypesMap.keys().forEach((counterType) => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-call + OlCounterTypesMap.keys().forEach((counterType: string) => { orderedListCountersTunes.children.items!.push({ name: counterType, title: this.api.i18n.t(counterType), From 3540e34b0134f9a8f5cce567eca9dc5bc51258d2 Mon Sep 17 00:00:00 2001 From: e11sy <130844513+e11sy@users.noreply.github.com> Date: Mon, 28 Oct 2024 20:53:09 +0300 Subject: [PATCH 5/6] remove unneeded type: 'default' --- src/index.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index cb0e970f..204358ef 100644 --- a/src/index.ts +++ b/src/index.ts @@ -349,8 +349,6 @@ export default class NestedList { onActivate: () => { this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType); }, - // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types - type: 'default', }); }); From ea042f6c9202a9493b6ca7fd4b40a94e758e56d2 Mon Sep 17 00:00:00 2001 From: e11sy <130844513+e11sy@users.noreply.github.com> Date: Mon, 28 Oct 2024 22:19:42 +0300 Subject: [PATCH 6/6] remove redundant toolbox item names --- src/index.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/index.ts b/src/index.ts index 204358ef..fdebd690 100644 --- a/src/index.ts +++ b/src/index.ts @@ -267,7 +267,6 @@ export default class NestedList { public renderSettings(): MenuConfigItem[] { const defaultTunes: MenuConfigItem[] = [ { - name: 'unordered' as const, label: this.api.i18n.t('Unordered'), icon: IconListBulleted, closeOnActivate: true, @@ -277,7 +276,6 @@ export default class NestedList { }, }, { - name: 'ordered' as const, label: this.api.i18n.t('Ordered'), icon: IconListNumbered, closeOnActivate: true, @@ -287,7 +285,6 @@ export default class NestedList { }, }, { - name: 'checklist' as const, label: this.api.i18n.t('Checklist'), icon: IconChecklist, closeOnActivate: true, @@ -313,12 +310,10 @@ export default class NestedList { 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', @@ -329,7 +324,6 @@ export default class NestedList { ]; const orderedListCountersTunes: MenuConfigItem = { - name: 'counter types' as const, label: this.api.i18n.t('Counters type'), children: { items: [], @@ -342,7 +336,6 @@ export default class NestedList { // eslint-disable-next-line @typescript-eslint/no-unsafe-call OlCounterTypesMap.keys().forEach((counterType: string) => { orderedListCountersTunes.children.items!.push({ - name: counterType, title: this.api.i18n.t(counterType), isActive: this.data.counterType === OlCounterTypesMap.get(counterType), closeOnActivate: true,