From 2b54dc92ef3169b9297aaf765e8eff4ad3e8d185 Mon Sep 17 00:00:00 2001 From: dev-null Date: Sun, 16 Nov 2025 22:11:51 +0530 Subject: [PATCH 1/3] Configurable list styles initial commit --- src/ListRenderer/ListRenderer.ts | 8 ++++---- src/index.ts | 33 +++++++++++++++++++++++++++----- src/types/ListParams.ts | 4 ++++ 3 files changed, 36 insertions(+), 9 deletions(-) diff --git a/src/ListRenderer/ListRenderer.ts b/src/ListRenderer/ListRenderer.ts index 711a7758..71a5ffab 100644 --- a/src/ListRenderer/ListRenderer.ts +++ b/src/ListRenderer/ListRenderer.ts @@ -40,27 +40,27 @@ export interface ListCssClasses { export interface ListRendererInterface { /** * Renders wrapper for list - * @param isRoot - boolean variable that represents level of the wrappre (root or childList) + * @param isRoot - boolean variable that represents level of the wrapper (root or childList) * @returns - created html ul element */ renderWrapper: (isRoot: boolean) => HTMLElement; /** - * Redners list item element + * Renders list item element * @param content - content of the list item * @returns - created html list item element */ renderItem: (content: string, meta: ItemMeta) => HTMLElement; /** - * Return the item content + * Returns the item content * @param {Element} item - item wrapper (
  • ) * @returns {string} */ getItemContent: (item: Element) => string; /** - * Return meta object of certain element + * Returns meta object of certain element * @param {Element} item - item of the list to get meta from * @returns {ItemMeta} Item meta object */ diff --git a/src/index.ts b/src/index.ts index 96435b35..425f6e29 100644 --- a/src/index.ts +++ b/src/index.ts @@ -52,7 +52,7 @@ export default class EditorjsList { * title - title to show in toolbox */ public static get toolbox(): ToolboxConfig { - return [ + const defaultToolbox = [ { icon: IconListBulleted, title: 'Unordered List', @@ -75,6 +75,12 @@ export default class EditorjsList { }, }, ]; + + return EditorjsList.styles + ? defaultToolbox.filter( + tool => EditorjsList.styles?.includes(tool.data.style as ListDataStyle) + ) + : defaultToolbox; } /** @@ -151,6 +157,11 @@ export default class EditorjsList { this.listElement = newListElement; } + /** + * Styles allowed to be used in list + */ + private static styles?: ListDataStyle[]; + /** * The Editor.js API */ @@ -215,6 +226,11 @@ export default class EditorjsList { */ this.defaultListStyle = this.config?.defaultStyle || 'unordered'; + /** + * Set the style's list from the config + */ + EditorjsList.styles = this.config?.styles; + /** * Set the default counter types for the ordered list */ @@ -284,7 +300,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', @@ -293,7 +309,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', @@ -302,7 +318,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', @@ -310,7 +326,14 @@ export default class EditorjsList { this.listStyle = 'checklist'; }, }, - ]; + ].filter((tune) => { + // If no styles config, keep all + if (!EditorjsList?.styles) { + return true; + }; + + return (EditorjsList?.styles.includes(tune.title.toLowerCase() as ListDataStyle)); + }); if (this.listStyle === 'ordered') { const startWithElement = renderToolboxInput( diff --git a/src/types/ListParams.ts b/src/types/ListParams.ts index b57d50a3..6e2a1324 100644 --- a/src/types/ListParams.ts +++ b/src/types/ListParams.ts @@ -99,4 +99,8 @@ export interface ListConfig { * @default undefined // All counter types are available when not specified */ counterTypes?: OlCounterType[]; + /** + * Styles allowed to be used in list + */ + styles?: ListDataStyle[]; } From 3af4de76e3e41b4cfc36e76524e42b7323deec86 Mon Sep 17 00:00:00 2001 From: dev-null Date: Mon, 17 Nov 2025 12:01:29 +0530 Subject: [PATCH 2/3] Readme.md changes --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 1a5b5f4a..9c029600 100644 --- a/README.md +++ b/README.md @@ -65,6 +65,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 | +| styles | `string[]` | allows to specify which list styles user can choose from: `ordered`, `unordered` or `checklist`. For example, set to `['ordered','unordered']` to hide checklist option. By default all three styles are available | ## Output data From e8c63d25cb1f7d5ffc6904898d96236cb8207379 Mon Sep 17 00:00:00 2001 From: dev-null Date: Sat, 29 Nov 2025 16:07:13 +0530 Subject: [PATCH 3/3] version change and config validation added --- package.json | 2 +- src/index.ts | 6 ++++++ src/utils/validateConfig.ts | 17 +++++++++++++++++ 3 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 src/utils/validateConfig.ts diff --git a/package.json b/package.json index 355fce4b..faee9f6f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@editorjs/list", - "version": "2.0.9", + "version": "2.1.0", "keywords": [ "codex editor", "list", diff --git a/src/index.ts b/src/index.ts index 425f6e29..7657e0c7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -22,6 +22,7 @@ import stripNumbers from './utils/stripNumbers'; import normalizeData from './utils/normalizeData'; import type { PasteEvent } from './types'; import type { OrderedListItemMeta } from './types/ItemMeta'; +import validateConfig from './utils/validateConfig'; /** * Constructor Params for Editorjs List Tool, use to pass initial data and settings @@ -221,6 +222,11 @@ export default class EditorjsList { this.config = config; this.block = block; + /** + * Validate user configuration + */ + validateConfig(this.config); + /** * Set the default list style from the config or presetted 'unordered'. */ diff --git a/src/utils/validateConfig.ts b/src/utils/validateConfig.ts new file mode 100644 index 00000000..225585e7 --- /dev/null +++ b/src/utils/validateConfig.ts @@ -0,0 +1,17 @@ +import type { ListConfig } from '../types/ListParams'; + +/** + * Method that will validate config object + * @param config - user configuration object for the List tool + */ +export default function validateConfig(config: ListConfig | undefined): void { + if (config === undefined) { + return; + } + + const { styles, defaultStyle } = config; + + if (defaultStyle !== undefined && Array.isArray(styles) && styles.length > 0 && !styles.includes(defaultStyle)) { + throw new Error(`Invalid config: defaultStyle '${defaultStyle}' must be included in 'styles' ${JSON.stringify(styles)}.`); + } +}