Chore (toolbox-input): add sanitize method for input

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
@@ -74,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 {
@@ -88,18 +90,20 @@ 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
      */
     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, config: ToolConfig<NestedListConfig>) => ListData;
-  } {
+    } {
     return {
       export: (data) => {
         return NestedList.joinRecursive(data);
@@ -128,6 +132,7 @@ export default class NestedList {
 
   /**
    * Set list style
+   *
    * @param style - new style to set
    */
   private set listStyle(style: ListDataStyle) {
@@ -187,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
@@ -223,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
    */
@@ -234,6 +241,7 @@ export default class NestedList {
 
   /**
    * Function that is responsible for content rendering
+   *
    * @returns rendered list wrapper with all contents
    */
   public render(): HTMLElement {
@@ -244,6 +252,7 @@ export default class NestedList {
 
   /**
    * Function that is responsible for content saving
+   *
    * @returns formatted content used in editor
    */
   public save(): ListData {
@@ -254,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 {
@@ -262,6 +272,7 @@ export default class NestedList {
 
   /**
    * Creates Block Tune allowing to change the list style
+   *
    * @returns array of tune configs
    */
   public renderSettings(): MenuConfigItem[] {
@@ -297,15 +308,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[] = [
@@ -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 {

src/styles/list.pcss

@@ -47,7 +47,7 @@
 
     &::before {
       counter-increment: item;
-      margin-right: 5px;
+
       white-space: nowrap;
     }
   }

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;

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, '');
+}