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 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/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..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 @@ -52,7 +53,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 +76,12 @@ export default class EditorjsList { }, }, ]; + + return EditorjsList.styles + ? defaultToolbox.filter( + tool => EditorjsList.styles?.includes(tool.data.style as ListDataStyle) + ) + : defaultToolbox; } /** @@ -151,6 +158,11 @@ export default class EditorjsList { this.listElement = newListElement; } + /** + * Styles allowed to be used in list + */ + private static styles?: ListDataStyle[]; + /** * The Editor.js API */ @@ -210,11 +222,21 @@ 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'. */ 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 +306,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 +315,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 +324,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 +332,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[]; } 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)}.`); + } +}