From dafcfd169d7b025a77176a12153f402da24930f2 Mon Sep 17 00:00:00 2001 From: Ahmed Atigui <98113546+ahmedatigui@users.noreply.github.com> Date: Thu, 5 Dec 2024 18:22:58 +0100 Subject: [PATCH 1/3] feat: Control displayed tunes --- README.md | 1 + src/index.ts | 148 +++++++++++++++++++++++----------------- src/types/ListParams.ts | 5 ++ 3 files changed, 93 insertions(+), 61 deletions(-) diff --git a/README.md b/README.md index 15e5856..42a5c9f 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 | +| displayedEntries | `listStyle[]` | List entries allowed to be displayed `ordered`, `unordered` or `checklist` | ## Output data diff --git a/src/index.ts b/src/index.ts index 4cb763d..eb95558 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 this.displayedEntries?.includes(ele.data.style as ListDataStyle) + ) : entries; } /** @@ -171,6 +175,11 @@ export default class EditorjsList { */ private defaultListStyle?: ListConfig['defaultStyle']; + /** + * + */ + private static displayedEntries?: ListDataStyle[]; + /** * Tool's data */ @@ -210,6 +219,8 @@ export default class EditorjsList { */ this.defaultListStyle = this.config?.defaultStyle || 'unordered'; + EditorjsList.displayedEntries = this.config?.displayedEntries; + const initialData = { style: this.defaultListStyle, meta: {}, @@ -274,7 +285,7 @@ export default class EditorjsList { public renderSettings(): MenuConfigItem[] { const 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,61 +313,18 @@ 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); - } - - return defaultTunes; + if (EditorjsList.displayedEntries){ + if (this.listStyle === 'ordered') this.addAdditionalTunes(defaultTunes); + } else if (this.listStyle === 'ordered') this.addAdditionalTunes(defaultTunes); + + return EditorjsList.displayedEntries ? defaultTunes.filter( + tune => { + if ('title' in tune) { + if(tune.title === 'Start with' || tune.title === 'Counter type') return true; + else return EditorjsList.displayedEntries?.includes(tune.title!.toLowerCase() as ListDataStyle); + } else if (('type' in tune) && tune.type === 'separator') return true; + } + ) : defaultTunes; } /** @@ -453,4 +421,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..94c5393 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 types allowed to be displayed + */ + displayedEntries?: ListDataStyle[]; } From 46476486952ac1ba838900010cf4ff6b77ec942d Mon Sep 17 00:00:00 2001 From: Ahmed Atigui <98113546+ahmedatigui@users.noreply.github.com> Date: Thu, 5 Dec 2024 18:25:42 +0100 Subject: [PATCH 2/3] 2.0.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From 6f672061a43918ac189409e2c25bbf2438661801 Mon Sep 17 00:00:00 2001 From: Ahmed Atigui <98113546+ahmedatigui@users.noreply.github.com> Date: Sat, 7 Dec 2024 19:36:46 +0100 Subject: [PATCH 3/3] ref: better naming, clearer code --- README.md | 2 +- src/index.ts | 37 +++++++++++++++++-------------------- src/types/ListParams.ts | 4 ++-- 3 files changed, 20 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 42a5c9f..fa3ef1e 100644 --- a/README.md +++ b/README.md @@ -64,7 +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 | -| displayedEntries | `listStyle[]` | List entries allowed to be displayed `ordered`, `unordered` or `checklist` | +| styles | `listStyle[]` | List styles allowed to be displayed `ordered`, `unordered` or `checklist` | ## Output data diff --git a/src/index.ts b/src/index.ts index eb95558..822c2c8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -52,7 +52,7 @@ export default class EditorjsList implements BlockTool { * title - title to show in toolbox */ public static get toolbox(): ToolboxConfig { - const entries = [ + const defaultSettings = [ { icon: IconListBulleted, title: 'Unordered List', @@ -76,9 +76,9 @@ export default class EditorjsList implements BlockTool { }, ]; - return this.displayedEntries ? entries.filter( - ele => this.displayedEntries?.includes(ele.data.style as ListDataStyle) - ) : entries; + return EditorjsList.styles ? defaultSettings.filter( + ele => EditorjsList.styles?.includes(ele.data.style as ListDataStyle) + ) : defaultSettings; } /** @@ -176,9 +176,9 @@ export default class EditorjsList implements BlockTool { private defaultListStyle?: ListConfig['defaultStyle']; /** - * + * List Styles allowed to be displayed */ - private static displayedEntries?: ListDataStyle[]; + private static styles?: ListDataStyle[]; /** * Tool's data @@ -219,7 +219,7 @@ export default class EditorjsList implements BlockTool { */ this.defaultListStyle = this.config?.defaultStyle || 'unordered'; - EditorjsList.displayedEntries = this.config?.displayedEntries; + EditorjsList.styles = this.config?.styles; const initialData = { style: this.defaultListStyle, @@ -283,7 +283,7 @@ export default class EditorjsList implements BlockTool { * @returns array of tune configs */ public renderSettings(): MenuConfigItem[] { - const defaultTunes: MenuConfigItem[] = [ + let defaultTunes: MenuConfigItem[] = [ { title: this.api.i18n.t('Unordered'), icon: IconListBulleted, @@ -313,18 +313,15 @@ export default class EditorjsList implements BlockTool { }, ]; - if (EditorjsList.displayedEntries){ - if (this.listStyle === 'ordered') this.addAdditionalTunes(defaultTunes); - } else if (this.listStyle === 'ordered') this.addAdditionalTunes(defaultTunes); - - return EditorjsList.displayedEntries ? defaultTunes.filter( - tune => { - if ('title' in tune) { - if(tune.title === 'Start with' || tune.title === 'Counter type') return true; - else return EditorjsList.displayedEntries?.includes(tune.title!.toLowerCase() as ListDataStyle); - } else if (('type' in tune) && tune.type === 'separator') return true; - } - ) : defaultTunes; + 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; } /** diff --git a/src/types/ListParams.ts b/src/types/ListParams.ts index 94c5393..4807019 100644 --- a/src/types/ListParams.ts +++ b/src/types/ListParams.ts @@ -89,7 +89,7 @@ export interface ListConfig { maxLevel?: number; /** - * List types allowed to be displayed + * List styles allowed to be displayed */ - displayedEntries?: ListDataStyle[]; + styles?: ListDataStyle[]; }