From 6e8189a051738ab2af7ee49ae86e32755875e5bb Mon Sep 17 00:00:00 2001 From: jscastanos Date: Mon, 13 Jan 2025 18:11:59 +0800 Subject: [PATCH 1/3] feat: support optional counter type selection in ordered list --- README.md | 1 + package.json | 2 +- src/index.ts | 62 ++++++++++++++++++++++++++--------------- src/types/ListParams.ts | 7 +++++ 4 files changed, 48 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 15e5856..e0233e7 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 59465f8..1f50fbd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@editorjs/list", - "version": "2.0.2", + "version": "2.0.3", "keywords": [ "codex editor", "list", diff --git a/src/index.ts b/src/index.ts index 4cb763d..96a6771 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?.counterTypes || ['numeric', 'upper-roman', 'lower-roman', 'upper-alpha', 'lower-alpha']; + 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)!), + title: this.api.i18n.t(counterTypeValue), + icon: OlCounterIconsMap.get(counterTypeValue), isActive: (this.data.meta as OrderedListItemMeta).counterType === OlCounterTypesMap.get(counterType), closeOnActivate: true, onActivate: () => { @@ -415,39 +431,39 @@ export default class EditorjsList { switch (this.listStyle) { case 'ordered': this.list = new ListTabulator({ - data: this.data, - readOnly: this.readOnly, - api: this.api, - config: this.config, - block: this.block, - }, - new OrderedListRenderer(this.readOnly, this.config) + data: this.data, + readOnly: this.readOnly, + api: this.api, + config: this.config, + block: this.block, + }, + new OrderedListRenderer(this.readOnly, this.config) ); break; case 'unordered': this.list = new ListTabulator({ - data: this.data, - readOnly: this.readOnly, - api: this.api, - config: this.config, - block: this.block, - }, - new UnorderedListRenderer(this.readOnly, this.config) + data: this.data, + readOnly: this.readOnly, + api: this.api, + config: this.config, + block: this.block, + }, + new UnorderedListRenderer(this.readOnly, this.config) ); break; case 'checklist': this.list = new ListTabulator({ - data: this.data, - readOnly: this.readOnly, - api: this.api, - config: this.config, - block: this.block, - }, - new CheckListRenderer(this.readOnly, this.config) + data: this.data, + readOnly: this.readOnly, + api: this.api, + config: this.config, + block: this.block, + }, + new CheckListRenderer(this.readOnly, this.config) ); break; diff --git a/src/types/ListParams.ts b/src/types/ListParams.ts index e377b15..03056b0 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 @@ -87,4 +88,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[]; } From d52c221f455eea27da00c2d98c6e4052d141c4eb Mon Sep 17 00:00:00 2001 From: jscastanos Date: Mon, 13 Jan 2025 18:20:09 +0800 Subject: [PATCH 2/3] use counter type instead of the value --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 96a6771..6037463 100644 --- a/src/index.ts +++ b/src/index.ts @@ -359,7 +359,7 @@ export default class EditorjsList { } orderedListCountersTunes.children.items!.push({ - title: this.api.i18n.t(counterTypeValue), + title: this.api.i18n.t(counterType), icon: OlCounterIconsMap.get(counterTypeValue), isActive: (this.data.meta as OrderedListItemMeta).counterType === OlCounterTypesMap.get(counterType), closeOnActivate: true, From 134b77d961092dc37d3f7e3a50ffcf89cb2fee8e Mon Sep 17 00:00:00 2001 From: jscastanos Date: Mon, 13 Jan 2025 18:22:14 +0800 Subject: [PATCH 3/3] remove excess spacing --- src/index.ts | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/index.ts b/src/index.ts index 6037463..e5cb07c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -431,39 +431,39 @@ export default class EditorjsList { switch (this.listStyle) { case 'ordered': this.list = new ListTabulator({ - data: this.data, - readOnly: this.readOnly, - api: this.api, - config: this.config, - block: this.block, - }, - new OrderedListRenderer(this.readOnly, this.config) + data: this.data, + readOnly: this.readOnly, + api: this.api, + config: this.config, + block: this.block, + }, + new OrderedListRenderer(this.readOnly, this.config) ); break; case 'unordered': this.list = new ListTabulator({ - data: this.data, - readOnly: this.readOnly, - api: this.api, - config: this.config, - block: this.block, - }, - new UnorderedListRenderer(this.readOnly, this.config) + data: this.data, + readOnly: this.readOnly, + api: this.api, + config: this.config, + block: this.block, + }, + new UnorderedListRenderer(this.readOnly, this.config) ); break; case 'checklist': this.list = new ListTabulator({ - data: this.data, - readOnly: this.readOnly, - api: this.api, - config: this.config, - block: this.block, - }, - new CheckListRenderer(this.readOnly, this.config) + data: this.data, + readOnly: this.readOnly, + api: this.api, + config: this.config, + block: this.block, + }, + new CheckListRenderer(this.readOnly, this.config) ); break;