From 75cde4f8545c8c953334be0e2393fb53a96eba27 Mon Sep 17 00:00:00 2001 From: e11sy <130844513+e11sy@users.noreply.github.com> Date: Wed, 30 Oct 2024 20:28:24 +0300 Subject: [PATCH 1/3] improved toolbox input --- src/index.ts | 6 +++--- src/styles/list.pcss | 2 +- src/utils/renderToolboxInput.ts | 17 ++++++++++++++--- src/utils/stripNumbers.ts | 7 +++++++ 4 files changed, 25 insertions(+), 7 deletions(-) create mode 100644 src/utils/stripNumbers.ts diff --git a/src/index.ts b/src/index.ts index fdebd69..fbc75e6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -17,6 +17,7 @@ import { type OlCounterType, OlCounterTypesMap } from './types/OlCounterType'; */ import './styles/list.pcss'; import './styles/input.pcss'; +import stripNumbers from './utils/stripNumbers'; /** * Constructor Params for Nested List Tool, use to pass initial data and settings @@ -297,15 +298,14 @@ export default class NestedList { if (this.listStyle === 'ordered') { const startWithElement = renderToolboxInput( - (index: number) => this.changeStartWith(index), + (index: string) => this.changeStartWith(Number(index)), { value: String(this.data.start ?? 1), placeholder: '', attributes: { - type: 'number', - step: '1', required: 'true', }, + sanitize: input => stripNumbers(input), }); const orderedListTunes: MenuConfigItem[] = [ diff --git a/src/styles/list.pcss b/src/styles/list.pcss index f03d3b1..850f745 100644 --- a/src/styles/list.pcss +++ b/src/styles/list.pcss @@ -47,7 +47,7 @@ &::before { counter-increment: item; - margin-right: 5px; + white-space: nowrap; } } diff --git a/src/utils/renderToolboxInput.ts b/src/utils/renderToolboxInput.ts index 6416707..afd1d0d 100644 --- a/src/utils/renderToolboxInput.ts +++ b/src/utils/renderToolboxInput.ts @@ -19,6 +19,10 @@ interface InputOptions { attributes?: { [key: string]: string; }; + /** + * Flag that represents special behavior that prevents you from entering anything other than numbers + */ + sanitize?: (value: string) => string; } const css = { @@ -36,8 +40,8 @@ const css = { * @param inputOptions.attributes - html attributes, that would be added to the input element * @returns - rendered html element */ -export function renderToolboxInput(inputCallback: (index: number) => void, - { value, placeholder, attributes }: InputOptions): HTMLElement { +export function renderToolboxInput(inputCallback: (index: string) => void, + { value, placeholder, attributes, sanitize }: InputOptions): HTMLElement { const startWithElementWrapper = Dom.make('div', css.wrapper); const input = Dom.make('input', css.input, { @@ -64,6 +68,13 @@ export function renderToolboxInput(inputCallback: (index: number) => void, startWithElementWrapper.appendChild(input); input.addEventListener('input', () => { + /** + * If input sanitizer specified, then sanitize input value + */ + if (sanitize !== undefined) { + input.value = sanitize(input.value); + } + const validInput = input.checkValidity(); /** @@ -87,7 +98,7 @@ export function renderToolboxInput(inputCallback: (index: number) => void, return; } - inputCallback(Number(input.value)); + inputCallback(input.value); }); return startWithElementWrapper; diff --git a/src/utils/stripNumbers.ts b/src/utils/stripNumbers.ts new file mode 100644 index 0000000..1427fdf --- /dev/null +++ b/src/utils/stripNumbers.ts @@ -0,0 +1,7 @@ +/** + * Removes everything except numbers in passed string + * @param input - string to be striped + */ +export default function stripNumbers(input: string): string { + return input.replace(/\D+/g, ''); +} From b1fabcd0289a455cb331175ef239080951f456dc Mon Sep 17 00:00:00 2001 From: Peter Savchenko Date: Wed, 30 Oct 2024 21:42:46 +0300 Subject: [PATCH 2/3] fix safari map iteration --- src/index.ts | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/index.ts b/src/index.ts index fbc75e6..5747c25 100644 --- a/src/index.ts +++ b/src/index.ts @@ -75,6 +75,7 @@ export default class NestedList { /** * 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 { @@ -89,6 +90,7 @@ export default class NestedList { 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 */ @@ -96,11 +98,12 @@ export default class NestedList { /** * Method that is responsible for conversion from string to data + * * @param content - contents string * @returns - list data formed from contents string */ import: (content: string, config: ToolConfig) => ListData; - } { + } { return { export: (data) => { return NestedList.joinRecursive(data); @@ -129,6 +132,7 @@ export default class NestedList { /** * Set list style + * * @param style - new style to set */ private set listStyle(style: ListDataStyle) { @@ -188,6 +192,7 @@ export default class NestedList { /** * Render plugin`s main Element and fill it with saved data + * * @param params - tool constructor options * @param params.data - previously saved data * @param params.config - user config for Tool @@ -224,6 +229,7 @@ export default class NestedList { /** * 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 */ @@ -235,6 +241,7 @@ export default class NestedList { /** * Function that is responsible for content rendering + * * @returns rendered list wrapper with all contents */ public render(): HTMLElement { @@ -245,6 +252,7 @@ export default class NestedList { /** * Function that is responsible for content saving + * * @returns formatted content used in editor */ public save(): ListData { @@ -255,6 +263,7 @@ export default class NestedList { /** * 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 { @@ -263,6 +272,7 @@ export default class NestedList { /** * Creates Block Tune allowing to change the list style + * * @returns array of tune configs */ public renderSettings(): MenuConfigItem[] { @@ -334,7 +344,8 @@ export default class NestedList { * For each counter type in OlCounterType create toolbox item */ // eslint-disable-next-line @typescript-eslint/no-unsafe-call - OlCounterTypesMap.keys().forEach((counterType: string) => { + + OlCounterTypesMap.forEach((_, counterType: string) => { orderedListCountersTunes.children.items!.push({ title: this.api.i18n.t(counterType), isActive: this.data.counterType === OlCounterTypesMap.get(counterType), @@ -353,6 +364,7 @@ export default class NestedList { /** * Changes ordered list counterType property value + * * @param counterType - new value of the counterType value */ private changeCounters(counterType: OlCounterType): void { @@ -363,6 +375,7 @@ export default class NestedList { /** * Changes ordered list start property value + * * @param index - new value of the start property */ private changeStartWith(index: number): void { From 8b1a3ae2048bd7ee719052cf1ddbe6ee0055e0e6 Mon Sep 17 00:00:00 2001 From: e11sy <130844513+e11sy@users.noreply.github.com> Date: Wed, 30 Oct 2024 21:48:26 +0300 Subject: [PATCH 3/3] lint fix --- src/index.ts | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/src/index.ts b/src/index.ts index 5747c25..94da9bf 100644 --- a/src/index.ts +++ b/src/index.ts @@ -75,7 +75,6 @@ export default class NestedList { /** * 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 { @@ -90,7 +89,6 @@ export default class NestedList { 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 */ @@ -98,12 +96,11 @@ export default class NestedList { /** * Method that is responsible for conversion from string to data - * * @param content - contents string * @returns - list data formed from contents string */ import: (content: string, config: ToolConfig) => ListData; - } { + } { return { export: (data) => { return NestedList.joinRecursive(data); @@ -132,7 +129,6 @@ export default class NestedList { /** * Set list style - * * @param style - new style to set */ private set listStyle(style: ListDataStyle) { @@ -192,7 +188,6 @@ export default class NestedList { /** * Render plugin`s main Element and fill it with saved data - * * @param params - tool constructor options * @param params.data - previously saved data * @param params.config - user config for Tool @@ -229,7 +224,6 @@ export default class NestedList { /** * 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 */ @@ -241,7 +235,6 @@ export default class NestedList { /** * Function that is responsible for content rendering - * * @returns rendered list wrapper with all contents */ public render(): HTMLElement { @@ -252,7 +245,6 @@ export default class NestedList { /** * Function that is responsible for content saving - * * @returns formatted content used in editor */ public save(): ListData { @@ -263,7 +255,6 @@ export default class NestedList { /** * 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 { @@ -272,7 +263,6 @@ export default class NestedList { /** * Creates Block Tune allowing to change the list style - * * @returns array of tune configs */ public renderSettings(): MenuConfigItem[] { @@ -343,7 +333,6 @@ export default class NestedList { /** * For each counter type in OlCounterType create toolbox item */ - // eslint-disable-next-line @typescript-eslint/no-unsafe-call OlCounterTypesMap.forEach((_, counterType: string) => { orderedListCountersTunes.children.items!.push({ @@ -364,7 +353,6 @@ export default class NestedList { /** * Changes ordered list counterType property value - * * @param counterType - new value of the counterType value */ private changeCounters(counterType: OlCounterType): void { @@ -375,7 +363,6 @@ export default class NestedList { /** * Changes ordered list start property value - * * @param index - new value of the start property */ private changeStartWith(index: number): void {