TextEditorMask: Refactor and improve typing (#32572)

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

Author: marker-dao

packages/devextreme/js/__internal/ui/date_box/date_box.mask.ts

@@ -291,7 +291,10 @@ class DateBoxMask extends DateBoxBase {
     const caret = this._caret();
     const { text = '' } = this.option();
 
-    return caret.end - caret.start === text.length;
+    const caretStart = caret?.start ?? 0;
+    const caretEnd = caret?.end ?? 0;
+
+    return caretEnd - caretStart === text.length;
   }
 
   _getFormatPattern(): string {
@@ -661,7 +664,10 @@ class DateBoxMask extends DateBoxBase {
     this._loadMaskValue(this._maskValue);
     const { text } = this.option();
     if (text) {
-      this._activePartIndex = getDatePartIndexByPosition(this._dateParts, this._caret().start);
+      this._activePartIndex = getDatePartIndexByPosition(
+        this._dateParts,
+        this._caret()?.start ?? 0,
+      );
 
       if (!this._isAllSelected()) {
         this._clearSearchValue();
@@ -686,6 +692,7 @@ class DateBoxMask extends DateBoxBase {
 
   _maskPasteHandler(e: DxEvent): void {
     const { text } = this.option();
+    // @ts-expect-error text
     const newText = this._replaceSelectedText(text, this._caret(), clipboardText(e));
     const date = dateLocalization.parse(newText, this._getFormatPattern());
 

packages/devextreme/js/__internal/ui/number_box/m_number_box.mask.ts

@@ -105,7 +105,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
         this._caretTimeout = undefined;
         const caret = this._caret();
 
-        if (caret.start === caret.end && this._useMaskBehavior()) {
+        if (caret?.start === caret?.end && this._useMaskBehavior()) {
           const text = this._getInputVal();
           const decimalSeparatorIndex = this._getTextSeparatorIndex(text);
 
@@ -254,8 +254,8 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
   _removeHandler(e) {
     const caret = this._caret();
     const text = this._getInputVal();
-    let { start } = caret;
-    let { end } = caret;
+
+    let { start = 0, end = 0 } = caret ?? {};
 
     this._lastKey = getChar(e);
     this._lastKeyName = normalizeKeyName(e);
@@ -265,7 +265,11 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
 
     if (start === end) {
       const caretPosition = start;
-      const canDelete = isBackspaceKey && caretPosition > 0 || isDeleteKey && caretPosition < text.length;
+
+      const canDelete = isBackspaceKey
+        && caretPosition > 0
+        || isDeleteKey
+        && caretPosition < text.length;
 
       if (canDelete) {
         isDeleteKey && end++;
@@ -520,7 +524,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     const caret = this._caret();
     const point = number.getDecimalSeparator();
     const pointIndex = this._getTextSeparatorIndex(text);
-    const isCaretOnFloat = pointIndex >= 0 && pointIndex < caret.start;
+    const isCaretOnFloat = pointIndex >= 0 && pointIndex < (caret?.start ?? 0);
     const textParts = this._removeStubs(text, true).split(point);
 
     if (!isCaretOnFloat || textParts.length !== 2) {
@@ -702,7 +706,8 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     }
 
     const caret = this._caret();
-    if (caret.start !== caret.end) {
+
+    if (caret?.start !== caret?.end) {
       if (normalizeKeyName(e) === MINUS_KEY) {
         this._applyRevertedSign(e, caret, true);
         return;