diff --git a/README.md b/README.md index ca744ff9..e90a5d40 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,7 @@ var editor = EditorJS({ |--------------|----------|----------------------------------------------------------------| | defaultStyle | `string` | default list style: `ordered`, `unordered` or `checklist`, default is `unordered` | | maxLevel | `number` | maximum level of the list nesting, could be set to `1` to disable nesting, unlimited by default | +| counterTypes | `string[]` | specifies which counter types should be shown in the ordered list style, could be set to `['numeric','upper-roman']`, default is `undefined` which shows all counter types | ## Output data diff --git a/package.json b/package.json index aa5ca2a9..a0dd2aca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@editorjs/list", - "version": "2.0.5", + "version": "2.0.6", "keywords": [ "codex editor", "list", diff --git a/src/index.ts b/src/index.ts index 4cb763d7..96435b35 100644 --- a/src/index.ts +++ b/src/index.ts @@ -171,6 +171,11 @@ export default class EditorjsList { */ private defaultListStyle?: ListConfig['defaultStyle']; + /** + * Default Counter type of the ordered list + */ + private defaultCounterTypes: OlCounterType[]; + /** * Tool's data */ @@ -210,6 +215,11 @@ export default class EditorjsList { */ this.defaultListStyle = this.config?.defaultStyle || 'unordered'; + /** + * Set the default counter types for the ordered list + */ + this.defaultCounterTypes = (this.config as ListConfig).counterTypes || Array.from(OlCounterTypesMap.values()) as OlCounterType[]; + const initialData = { style: this.defaultListStyle, meta: {}, @@ -342,9 +352,15 @@ export default class EditorjsList { * For each counter type in OlCounterType create toolbox item */ OlCounterTypesMap.forEach((_, counterType: string) => { + const counterTypeValue = OlCounterTypesMap.get(counterType)! as OlCounterType; + + if (!this.defaultCounterTypes.includes(counterTypeValue)) { + return; + } + orderedListCountersTunes.children.items!.push({ title: this.api.i18n.t(counterType), - icon: OlCounterIconsMap.get(OlCounterTypesMap.get(counterType)!), + icon: OlCounterIconsMap.get(counterTypeValue), isActive: (this.data.meta as OrderedListItemMeta).counterType === OlCounterTypesMap.get(counterType), closeOnActivate: true, onActivate: () => { @@ -352,8 +368,16 @@ export default class EditorjsList { }, }); }); + + /** + * Dont show Counter type tune if there is no valid counter types + */ + if (orderedListCountersTunes.children.items!.length > 1) { + orderedListTunes.push(orderedListCountersTunes); + } + // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types - defaultTunes.push({ type: 'separator' }, ...orderedListTunes, orderedListCountersTunes); + defaultTunes.push({ type: 'separator' }, ...orderedListTunes); } return defaultTunes; diff --git a/src/types/ListParams.ts b/src/types/ListParams.ts index 56015455..b57d50a3 100644 --- a/src/types/ListParams.ts +++ b/src/types/ListParams.ts @@ -1,4 +1,5 @@ import type { ItemMeta } from './ItemMeta'; +import type { OlCounterType } from './OlCounterType'; /** * list style to make list as ordered or unordered @@ -92,4 +93,10 @@ export interface ListConfig { * If nesting is not needed, it could be set to 1 */ maxLevel?: number; + /** + * Specifies which counter types should be shown in the ordered list style selector. + * @example ['numeric', 'upper-roman'] // Shows selector with these two options + * @default undefined // All counter types are available when not specified + */ + counterTypes?: OlCounterType[]; }