chore: improve docs

CHANGELOG.md

@@ -16,7 +16,7 @@ All notable changes to this project will be documented in this file. See
 This release introduces the first publishing of the following packages:
 
 - `@maskito/core` <br /> It is the main zero-dependency and framework-agnostic package. It can be used alone in Vanilla
-  Javascript project. It listens `beforeinput` and `input` events to validate and calibrate textfield's value. <br />
+  JavaScript project. It listens `beforeinput` and `input` events to validate and calibrate textfield's value. <br />
   Read more: https://tinkoff.github.io/maskito/core-concepts/overview
 - `@maskito/kit` <br /> The optional framework-agnostic package. It contains ready-to-use masks with configurable
   parameters. This release introduces the following masks:

README.md

@@ -13,39 +13,40 @@
     <a href="https://t.me/taiga_ui">Contact Us</a>
 </p>
 
-**Maskito** is a collection of libraries, built on Typescript. It helps to create an input mask which ensures that user
-types value according to predefined format.
+**Maskito** is a collection of libraries, built with TypeScript. It helps you to create an input mask which ensures that
+users type values according to predefined format.
 
 ## Why Maskito
 
-- Maskito supports all user’s interactions with textfield: basic typing and deleting via keyboard, pasting, dropping
-  text inside textfield, browser autofill, predictive text from mobile native keyboard.
+- **Maskito** supports all user’s interactions with text fields: basic typing and deleting via keyboard, pasting,
+  dropping text inside with a pointer, browser autofill, predictive text from mobile native keyboard.
 
-- Maskito is robust. The whole project is developed with strict TypeScript mode. Our code is covered by hundreds of
+- **Maskito** is robust. The whole project is developed with strict TypeScript mode. Our code is covered by hundreds of
   [Cypress](https://www.cypress.io) tests.
 
-- Server Side Rendering support.
+- Server Side Rendering and Shadow DOM support.
 
 - You can use it with `HTMLInputElement` and `HTMLTextAreaElement`.
 
-- Maskito's core is zero-dependency package. You can mask input in your Vanilla Javascript project. However, we have a
-  separate package for Angular as well.
+- **Maskito** core is zero-dependency package. You can mask input in your vanilla JavaScript project. However, we have a
+  separate package for Angular as well and React is coming soon.
 
-- Maskito includes optional framework-agnostic package with configurable ready-to-use masks.
+- **Maskito** includes optional framework-agnostic package with configurable ready-to-use masks.
 
-No textfield with invalid value! Use Maskito. **Mask it!**
+No text field with invalid value! Use Maskito. **Mask it!** Learn more about the library in our
+[documentation](https://tinkoff.github.io/maskito).
 
 ## Contributing
 
-If you have suggestions for how Maskito could be improved, or want to report a bug, open an issue! We'd love all and any
-contributions.
+If you have suggestions for how **Maskito** could be improved, or want to report a bug, open an issue! We'd love all and
+any contributions.
 
 For more, check out the [Contributing Guide](CONTRIBUTING.md).
 
 ## License
 
 🆓 Feel free to use our library in your commercial and private applications
 
-All Maskito packages are covered by [Apache 2.0](/LICENSE)
+All **Maskito** packages are covered by [Apache 2.0](/LICENSE)
 
 Read more about this license [here](https://choosealicense.com/licenses/apache-2.0/)

projects/core/README.md

@@ -14,7 +14,7 @@
 </p>
 
 > It is the main zero-dependency and framework-agnostic Maskito's package.<br />It can be used alone in
-> Vanilla Javascript project.
+> vanilla JavaScript project.
 
 ## How to install
 

projects/core/src/lib/classes/mask-model/mask-model.ts

@@ -8,28 +8,26 @@ export class MaskModel implements ElementState {
     value = '';
     selection: SelectionRange = [0, 0];
 
-    private get maskExpression(): MaskExpression {
-        const {mask} = this.maskOptions;
-
-        return typeof mask === 'function' ? mask() : mask;
-    }
-
     constructor(
         readonly initialElementState: ElementState,
         private readonly maskOptions: MaskitoOptions,
     ) {
         const {value, selection} = calibrateValueByMask(
             initialElementState,
-            this.maskExpression,
+            this.getMaskExpression(initialElementState),
         );
 
         this.value = value;
         this.selection = selection;
     }
 
-    addCharacters(selection: SelectionRange, newCharacters: string): void {
-        const {maskExpression, value} = this;
-        const initialElementState = {value, selection};
+    addCharacters([from, to]: SelectionRange, newCharacters: string): void {
+        const {value} = this;
+        const maskExpression = this.getMaskExpression({
+            value: value.slice(0, from) + newCharacters + value.slice(to),
+            selection: [from + newCharacters.length, from + newCharacters.length],
+        });
+        const initialElementState = {value, selection: [from, to]} as const;
         const unmaskedElementState = removeFixedMaskCharacters(
             initialElementState,
             maskExpression,
@@ -64,16 +62,16 @@ export class MaskModel implements ElementState {
     }
 
     deleteCharacters([from, to]: SelectionRange): void {
-        if (from === 0 && to === 0) {
+        if (from === to || !to) {
             return;
         }
 
-        if (from === to) {
-            return;
-        }
-
-        const {maskExpression, value} = this;
-        const initialElementState: ElementState = {value, selection: [from, to]};
+        const {value} = this;
+        const maskExpression = this.getMaskExpression({
+            value: value.slice(0, from) + value.slice(to),
+            selection: [from, from],
+        });
+        const initialElementState = {value, selection: [from, to]} as const;
         const unmaskedElementState = removeFixedMaskCharacters(
             initialElementState,
             maskExpression,
@@ -92,4 +90,10 @@ export class MaskModel implements ElementState {
         this.value = maskedElementState.value;
         this.selection = maskedElementState.selection;
     }
+
+    private getMaskExpression(elementState: ElementState): MaskExpression {
+        const {mask} = this.maskOptions;
+
+        return typeof mask === 'function' ? mask(elementState) : mask;
+    }
 }

projects/core/src/lib/classes/mask-model/utils/remove-fixed-mask-characters.ts

@@ -1,4 +1,4 @@
-import {ElementState, MaskExpression, SelectionRange} from '../../../types';
+import {ElementState, MaskExpression} from '../../../types';
 import {isFixedCharacter} from './is-fixed-character';
 
 export function removeFixedMaskCharacters(
@@ -37,6 +37,6 @@ export function removeFixedMaskCharacters(
 
     return {
         value: unmaskedValue,
-        selection: selection as SelectionRange,
+        selection: [selection[0], selection[1]],
     };
 }

projects/core/src/lib/types/element-state.ts

@@ -1,6 +1,6 @@
 import {SelectionRange} from './selection-range';
 
 export interface ElementState {
-    value: string;
-    selection: SelectionRange;
+    readonly value: string;
+    readonly selection: SelectionRange;
 }

projects/core/src/lib/types/mask-options.ts

@@ -4,10 +4,10 @@ import {MaskPostprocessor, MaskPreprocessor} from './mask-processors';
 export type MaskExpression = Array<RegExp | string> | RegExp;
 
 export interface MaskitoOptions {
-    mask: MaskExpression | (() => MaskExpression);
-    preprocessor?: MaskPreprocessor;
-    postprocessor?: MaskPostprocessor;
-    overwriteMode?:
+    readonly mask: MaskExpression | ((elementState: ElementState) => MaskExpression);
+    readonly preprocessor?: MaskPreprocessor;
+    readonly postprocessor?: MaskPostprocessor;
+    readonly overwriteMode?:
         | 'replace'
         | 'shift'
         | ((elementState: ElementState) => 'replace' | 'shift');

projects/core/src/lib/types/selection-range.ts

@@ -1 +1 @@
-export type SelectionRange = [from: number, to: number];
+export type SelectionRange = readonly [from: number, to: number];

projects/demo/src/pages/documentation/angular/angular.template.html

@@ -1,21 +1,25 @@
 <tui-doc-page header="Angular">
     <ng-template pageTab="Overview">
         <code>@maskito/angular</code>
-        is a light-weighted library to use Maskito in an Angular-way.
+        is a light-weighted library to use
+        <strong>Maskito</strong>
+        in an Angular-way.
 
         <tui-notification
             status="warning"
             class="tui-space_top-6"
         >
-            <h3 class="tui-space_top-0">Prerequisites</h3>
-            To get the most out of this guide, you should review the topic
-            <a
-                tuiLink
-                [routerLink]="coreConceptsOverviewDocPage"
-            >
-                "Core Concepts"
-            </a>
-            .
+            <strong>Prerequisites</strong>
+            <p class="tui-space_bottom-0">
+                To get the most out of this guide, you should review the topic
+                <a
+                    tuiLink
+                    [routerLink]="coreConceptsOverviewDocPage"
+                >
+                    "Core Concepts"
+                </a>
+                first.
+            </p>
         </tui-notification>
 
         <section class="tui-space_top-12">

projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.template.html

@@ -1,20 +1,20 @@
 <tui-doc-page header="Core concepts">
     <section class="tui-space_bottom-4">
         <p class="tui-space_top-0">
-            The main entity of Maskito's core library is
+            The main entity of Maskito core library is
             <code>Maskito</code>
-            ‑class which accepts 2 arguments:
+            class which accepts 2 arguments in constructor:
         </p>
 
         <ol class="tui-list tui-list_ordered">
             <li class="tui-list__item">
-                reference to native
+                native
                 <code>HTMLInputElement</code>
                 or
                 <code>HTMLTextAreaElement</code>
             </li>
             <li class="tui-list__item">
-                set of configurable options
+                set of configurable
                 <a
                     href="https://github.com/Tinkoff/maskito/blob/main/projects/core/src/lib/types/mask-options.ts"
                     target="_blank"
@@ -32,17 +32,17 @@
     ></tui-doc-code>
 
     <tui-notification status="warning">
-        <p class="tui-space_top-0">
+        <div>
             <strong>
                 Avoid wasting computation power or memory resources!
             </strong>
-        </p>
+        </div>
 
         <p class="tui-space_bottom-0">
             The only available public method
             <code>destroy</code>
-            removes all created event listeners. Call it after element is
-            detached from DOM.
+            removes all created event listeners. Call it to clean everything up
+            when the work is finished.
         </p>
     </tui-notification>
 
@@ -63,7 +63,7 @@ <h3 class="tui-island__title">Mask expression</h3>
                 <p class="tui-island__paragraph">
                     Learn how to predefine your mask format via mask expression.
                     This section describes different types of mask expression
-                    and explains meaning of "fixed character"-term.
+                    and explains meaning of "fixed character" term.
                 </p>
             </a>
 
@@ -91,10 +91,10 @@ <h3 class="tui-island__title">Processors</h3>
                 <h3 class="tui-island__title">Overwrite mode</h3>
                 <p class="tui-island__paragraph">
                     Maskito can behave differently when user inserts new
-                    character in the middle of textfield's value. Learn how to
+                    character in the middle of text field value. Learn how to
                     control this behaviour via
                     <code>overwriteMode</code>
-                    -parameter.
+                    parameter.
                 </p>
             </a>
         </div>