From 288e7a4bde778ed1af4584298751a848d350fb74 Mon Sep 17 00:00:00 2001 From: e11sy <130844513+e11sy@users.noreply.github.com> Date: Fri, 4 Oct 2024 21:51:12 +0300 Subject: [PATCH 1/2] eslint fixes of src index and utils --- eslint.config.mjs | 6 +- src/index.ts | 139 ++++++++++++++++------------- src/types/index.ts | 3 + src/utils/getChildItems.ts | 5 +- src/utils/getItemChildWrapper.ts | 2 +- src/utils/getItemContentElement.ts | 2 +- src/utils/getSiblings.ts | 11 ++- tsconfig.json | 2 +- 8 files changed, 99 insertions(+), 71 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index 37812a14..495fca14 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -5,6 +5,7 @@ export default [ ...CodeX, { name: 'editorjs-nested-list', + ignores: ['vite.config.js'], plugins: { '@typescript-eslint': TsPlugin, }, @@ -28,11 +29,14 @@ export default [ ignoreTypeImport: true, }], 'n/no-unsupported-features/node-builtins': ['error', { - version: '>=20.11.1', + version: '>=22.1.0', }], 'n/no-extraneous-import': ['error', { allowModules: ['typescript-eslint'], }], + '@typescript-eslint/no-empty-object-type': ['error', { + allowInterfaces: 'always', + }], }, }, ]; diff --git a/src/index.ts b/src/index.ts index 7d52a5ff..5971a659 100644 --- a/src/index.ts +++ b/src/index.ts @@ -26,14 +26,14 @@ export default class NestedList { /** * Notify core that read-only mode is supported */ - static get isReadOnlySupported(): boolean { + public static get isReadOnlySupported(): boolean { return true; } /** * Allow to use native Enter behaviour */ - static get enableLineBreaks(): boolean { + public static get enableLineBreaks(): boolean { return true; } @@ -42,17 +42,64 @@ export default class NestedList { * icon - Tool icon's SVG * title - title to show in toolbox */ - static get toolbox(): ToolboxConfig { + public static get toolbox(): ToolboxConfig { return { icon: IconListNumbered, title: 'List', }; } + /** + * On paste sanitzation config. Allow only tags that are allowed in the Tool. + * @returns - paste config object used in editor + */ + public static get pasteConfig(): PasteConfig { + return { + tags: ['OL', 'UL', 'LI'], + }; + } + + /** + * Convert from text to list with import and export list to text + */ + public static get conversionConfig(): { + /** + * Method that is responsible for conversion from data to string + * @param data - current list data + * @returns - contents string formed from list data + */ + export: (data: ListData) => string; + + /** + * Method that is responsible for conversion from string to data + * @param content - contents string + * @returns - list data formed from contents string + */ + import: (content: string) => ListData; + } { + return { + export: (data) => { + return NestedList.joinRecursive(data); + }, + import: (content) => { + return { + items: [ + { + content, + meta: {}, + items: [], + }, + ], + style: 'unordered', + }; + }, + }; + } + /** * Get list style name */ - get listStyle(): ListDataStyle { + private get listStyle(): ListDataStyle { return this.data.style || this.defaultListStyle; } @@ -60,7 +107,7 @@ export default class NestedList { * Set list style * @param style - new style to set */ - set listStyle(style: ListDataStyle) { + private set listStyle(style: ListDataStyle) { this.data.style = style; this.changeTabulatorByStyle(); @@ -91,7 +138,7 @@ export default class NestedList { private config: NestedListConfig; /** - * Default list style + * Default list style formes as passed default list style from config or 'ordered' as default */ private defaultListStyle?: NestedListConfig['defaultStyle']; @@ -106,14 +153,14 @@ export default class NestedList { private block: BlockAPI; /** - * Class that is responsible for list complete list rendering and saving + * Class that is responsible for complete list rendering and saving */ - list: ListTabulator | undefined; + private list: ListTabulator | undefined; /** * Main constant wrapper of the whole list */ - listElement: HTMLElement | undefined; + private listElement: HTMLElement | undefined; /** * Render plugin`s main Element and fill it with saved data @@ -139,16 +186,27 @@ export default class NestedList { items: [], }; - this.data = data && Object.keys(data).length ? data : initialData; + this.data = Object.keys(data).length ? data : initialData; this.changeTabulatorByStyle(); } + /** + * Convert from list to text for conversionConfig + * @param data - current data of the list + * @returns - string of the recursively merged contents of the items of the list + */ + public static joinRecursive(data: ListData | ListItem): string { + return data.items + .map(item => `${item.content} ${NestedList.joinRecursive(item)}`) + .join(''); + } + /** * Function that is responsible for content rendering * @returns rendered list wrapper with all contents */ - render() { + public render(): HTMLElement { this.listElement = this.list!.render(); return this.listElement; @@ -158,13 +216,17 @@ export default class NestedList { * Function that is responsible for content saving * @returns formatted content used in editor */ - save() { + public save(): ListData { this.data = this.list!.save(); return this.data; } - merge(data: ListData) { + /** + * Function that is responsible for mergind two lists into one + * @param data - data of the next standing list, that should be merged with current + */ + public merge(data: ListData): void { this.list!.merge(data); } @@ -172,7 +234,7 @@ export default class NestedList { * Creates Block Tune allowing to change the list style * @returns array of tune configs */ - renderSettings(): TunesMenuConfig { + public renderSettings(): TunesMenuConfig { const tunes = [ { name: 'unordered' as const, @@ -206,7 +268,7 @@ export default class NestedList { /** * This method allows changing tabulator respectfully to passed style */ - changeTabulatorByStyle() { + private changeTabulatorByStyle(): void { switch (this.listStyle) { case 'ordered': this.list = new ListTabulator({ @@ -248,51 +310,4 @@ export default class NestedList { break; } } - - /** - * On paste sanitzation config. Allow only tags that are allowed in the Tool. - * @returns - paste config. - */ - static get pasteConfig(): PasteConfig { - return { - tags: ['OL', 'UL', 'LI'], - }; - } - - /** - * Convert from list to text for conversionConfig - * @param data - current data of the list - * @returns - string of the recursively merged contents of the items of the list - */ - static joinRecursive(data: ListData | ListItem): string { - return data.items - .map(item => `${item.content} ${NestedList.joinRecursive(item)}`) - .join(''); - } - - /** - * Convert from text to list with import and export list to text - */ - static get conversionConfig(): { - export: (data: ListData) => string; - import: (content: string) => ListData; - } { - return { - export: (data) => { - return NestedList.joinRecursive(data); - }, - import: (content) => { - return { - items: [ - { - content, - meta: {}, - items: [], - }, - ], - style: 'unordered', - }; - }, - }; - } } diff --git a/src/types/index.ts b/src/types/index.ts index db3eb420..3ac5fde7 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -6,6 +6,9 @@ export interface PasteEvent extends CustomEvent { * Pasted element */ detail: { + /** + * Supported elements fir the paste event + */ data: HTMLUListElement | HTMLOListElement | HTMLLIElement; }; } diff --git a/src/utils/getChildItems.ts b/src/utils/getChildItems.ts index 8fc2ac36..4e5029b6 100644 --- a/src/utils/getChildItems.ts +++ b/src/utils/getChildItems.ts @@ -3,10 +3,11 @@ import type { ItemChildWrapperElement, ItemElement } from '../types/Elements'; /** * Get child items of the passed element - * @param element - element to get child items + * @param element - child items would be got from this element * @param firstLevelChildren - if method should return all level child items or only first level ones */ -export function getChildItems(element: ItemElement, firstLevelChildren: boolean = true): ItemElement[] { +// eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents +export function getChildItems(element: ItemElement | ItemChildWrapperElement, firstLevelChildren: boolean = true): ItemElement[] { let itemChildWrapper: HTMLElement = element; /** diff --git a/src/utils/getItemChildWrapper.ts b/src/utils/getItemChildWrapper.ts index 78261237..18dea6e8 100644 --- a/src/utils/getItemChildWrapper.ts +++ b/src/utils/getItemChildWrapper.ts @@ -3,7 +3,7 @@ import { DefaultListCssClasses } from '../ListRenderer'; /** * Returns child wrapper element of the passed item - * @param item - item to get wrapper from + * @param item - wrapper element would be got from this item */ export function getItemChildWrapper(item: ItemElement): ItemChildWrapperElement | null { return item.querySelector(`.${DefaultListCssClasses.itemChildren}`); diff --git a/src/utils/getItemContentElement.ts b/src/utils/getItemContentElement.ts index 3614dedd..c96c45b4 100644 --- a/src/utils/getItemContentElement.ts +++ b/src/utils/getItemContentElement.ts @@ -3,7 +3,7 @@ import { DefaultListCssClasses } from '../ListRenderer'; /** * Returns content element of the passed item - * @param item - item to get content element from + * @param item - content element would be got from this item */ export function getItemContentElement(item: ItemElement): ItemContentElement | null { return item.querySelector(`.${DefaultListCssClasses.itemContent}`); diff --git a/src/utils/getSiblings.ts b/src/utils/getSiblings.ts index 4cd4d305..9dde8ac6 100644 --- a/src/utils/getSiblings.ts +++ b/src/utils/getSiblings.ts @@ -8,16 +8,21 @@ export function getSiblings(element: HTMLElement, direction: 'after' | 'before' let nextElementSibling: HTMLElement; - function getNextElementSibling(element: HTMLElement): HTMLElement { + /** + * Method that is responsible for getting next element sibling responsible to the direction variable + * @param el - current element + * @returns HTML element of the sibling + */ + function getNextElementSibling(el: HTMLElement): HTMLElement { /** * Get first sibling element respectfully to passed direction */ switch (direction) { case 'after': - return element.nextElementSibling as HTMLElement; + return el.nextElementSibling as HTMLElement; case 'before': - return element.previousElementSibling as HTMLElement; + return el.previousElementSibling as HTMLElement; } } diff --git a/tsconfig.json b/tsconfig.json index ad953fbb..58d3a603 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,5 +14,5 @@ "isolatedModules": true }, "include": ["src"], - "exclude": ["node_modules", "**/*.spec.ts"] + "exclude": ["node_modules"] } From f86d78a6e733bdb3fdebd84f43ffc7375ebee112 Mon Sep 17 00:00:00 2001 From: e11sy <130844513+e11sy@users.noreply.github.com> Date: Sat, 5 Oct 2024 15:12:50 +0300 Subject: [PATCH 2/2] change method modifier --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 5971a659..e0230410 100644 --- a/src/index.ts +++ b/src/index.ts @@ -196,7 +196,7 @@ export default class NestedList { * @param data - current data of the list * @returns - string of the recursively merged contents of the items of the list */ - public static joinRecursive(data: ListData | ListItem): string { + private static joinRecursive(data: ListData | ListItem): string { return data.items .map(item => `${item.content} ${NestedList.joinRecursive(item)}`) .join('');