diff --git a/README.md b/README.md index 15e5856..fa3ef1e 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 | +| styles | `listStyle[]` | List styles allowed to be displayed `ordered`, `unordered` or `checklist` | ## 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..822c2c8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,4 @@ -import type { API, BlockAPI, PasteConfig, ToolboxConfig } from '@editorjs/editorjs'; +import type { API, BlockAPI, PasteConfig, ToolboxConfig, BlockTool } from '@editorjs/editorjs'; import type { BlockToolConstructorOptions, MenuConfigItem, @@ -31,7 +31,7 @@ export type ListParams = BlockToolConstructorOptions EditorjsList.styles?.includes(ele.data.style as ListDataStyle) + ) : defaultSettings; } /** @@ -171,6 +175,11 @@ export default class EditorjsList { */ private defaultListStyle?: ListConfig['defaultStyle']; + /** + * List Styles allowed to be displayed + */ + private static styles?: ListDataStyle[]; + /** * Tool's data */ @@ -210,6 +219,8 @@ export default class EditorjsList { */ this.defaultListStyle = this.config?.defaultStyle || 'unordered'; + EditorjsList.styles = this.config?.styles; + const initialData = { style: this.defaultListStyle, meta: {}, @@ -272,9 +283,9 @@ export default class EditorjsList { * @returns array of tune configs */ public renderSettings(): MenuConfigItem[] { - const defaultTunes: MenuConfigItem[] = [ + let defaultTunes: MenuConfigItem[] = [ { - label: this.api.i18n.t('Unordered'), + title: this.api.i18n.t('Unordered'), icon: IconListBulleted, closeOnActivate: true, isActive: this.listStyle == 'unordered', @@ -283,7 +294,7 @@ export default class EditorjsList { }, }, { - label: this.api.i18n.t('Ordered'), + title: this.api.i18n.t('Ordered'), icon: IconListNumbered, closeOnActivate: true, isActive: this.listStyle == 'ordered', @@ -292,7 +303,7 @@ export default class EditorjsList { }, }, { - label: this.api.i18n.t('Checklist'), + title: this.api.i18n.t('Checklist'), icon: IconChecklist, closeOnActivate: true, isActive: this.listStyle == 'checklist', @@ -302,60 +313,14 @@ export default class EditorjsList { }, ]; - if (this.listStyle === 'ordered') { - const startWithElement = renderToolboxInput( - (index: string) => this.changeStartWith(Number(index)), - { - value: String((this.data.meta as OrderedListItemMeta).start ?? 1), - placeholder: '', - attributes: { - required: 'true', - }, - sanitize: input => stripNumbers(input), - }); - - const orderedListTunes: MenuConfigItem[] = [ - { - label: this.api.i18n.t('Start with'), - icon: IconStartWith, - children: { - items: [ - { - element: startWithElement, - // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types - type: 'html', - }, - ], - }, - }, - ]; - - const orderedListCountersTunes: MenuConfigItem = { - label: this.api.i18n.t('Counter type'), - icon: OlCounterIconsMap.get((this.data.meta as OrderedListItemMeta).counterType!), - children: { - items: [], - }, - }; - - /** - * For each counter type in OlCounterType create toolbox item - */ - OlCounterTypesMap.forEach((_, counterType: string) => { - orderedListCountersTunes.children.items!.push({ - title: this.api.i18n.t(counterType), - icon: OlCounterIconsMap.get(OlCounterTypesMap.get(counterType)!), - isActive: (this.data.meta as OrderedListItemMeta).counterType === 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 - defaultTunes.push({ type: 'separator' }, ...orderedListTunes, orderedListCountersTunes); + if (EditorjsList.styles) { + defaultTunes = defaultTunes.filter( + tune => (('title' in tune) && EditorjsList.styles?.includes(tune.title!.toLowerCase() as ListDataStyle)) + ) } + if (this.listStyle === 'ordered') this.addAdditionalTunes(defaultTunes); + return defaultTunes; } @@ -453,4 +418,62 @@ export default class EditorjsList { break; } } + + /** + * Add additional tunes for ordered list + * @param defaultTunes - default tunes list + */ + private addAdditionalTunes(defaultTunes: MenuConfigItem[]): void { + const startWithElement = renderToolboxInput( + (index: string) => this.changeStartWith(Number(index)), + { + value: String((this.data.meta as OrderedListItemMeta).start ?? 1), + placeholder: '', + attributes: { + required: 'true', + }, + sanitize: input => stripNumbers(input), + }); + + const orderedListTunes: MenuConfigItem[] = [ + { + title: this.api.i18n.t('Start with'), + icon: IconStartWith, + children: { + items: [ + { + element: startWithElement, + // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types + type: 'html', + }, + ], + }, + }, + ]; + + const orderedListCountersTunes: MenuConfigItem = { + title: this.api.i18n.t('Counter type'), + icon: OlCounterIconsMap.get((this.data.meta as OrderedListItemMeta).counterType!), + children: { + items: [], + }, + }; + + /** + * For each counter type in OlCounterType create toolbox item + */ + OlCounterTypesMap.forEach((_, counterType: string) => { + orderedListCountersTunes.children.items!.push({ + title: this.api.i18n.t(counterType), + icon: OlCounterIconsMap.get(OlCounterTypesMap.get(counterType)!), + isActive: (this.data.meta as OrderedListItemMeta).counterType === 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 + defaultTunes.push({ type: 'separator' }, ...orderedListTunes, orderedListCountersTunes); + } } diff --git a/src/types/ListParams.ts b/src/types/ListParams.ts index e377b15..4807019 100644 --- a/src/types/ListParams.ts +++ b/src/types/ListParams.ts @@ -87,4 +87,9 @@ export interface ListConfig { * If nesting is not needed, it could be set to 1 */ maxLevel?: number; + + /** + * List styles allowed to be displayed + */ + styles?: ListDataStyle[]; }