TextEditorMask: Refactor and improve typing#32572
TextEditorMask: Refactor and improve typing#32572marker-dao wants to merge 4 commits intoDevExpress:26_1from
Conversation
623f3c1 to
44757c5
Compare
There was a problem hiding this comment.
Pull request overview
This pull request refactors the TextEditorMask component and related files to improve TypeScript typing and code quality. The changes include converting relative imports to @ts/ path aliases, adding explicit type annotations, improving null/undefined handling with optional chaining, and refactoring various methods for better type safety.
Changes:
- Migrated imports from relative paths (e.g.,
./m_text_editor.base) to@ts/ui/path aliases for consistency with codebase conventions - Added comprehensive type annotations for function parameters, return types, and class properties
- Refactored method implementations to use modern TypeScript patterns (optional chaining, nullish coalescing)
- Improved typing for mask rule classes (BaseMaskRule, MaskRule, StubMaskRule, EmptyMaskRule) with explicit interfaces and type parameters
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
m_text_editor.mask.ts |
Main component with improved typing, refactored key handlers, and better null handling |
m_text_editor.mask.strategy.ts |
Strategy class with typed method overloads and improved event handler signatures |
m_text_editor.mask.rule.ts |
Mask rule classes with new type definitions (HandlingArgs, AllowedChars) and explicit return types |
packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.ts
Outdated
Show resolved
Hide resolved
packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.strategy.ts
Outdated
Show resolved
Hide resolved
packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.strategy.ts
Outdated
Show resolved
Hide resolved
packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.strategy.ts
Outdated
Show resolved
Hide resolved
packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.strategy.ts
Outdated
Show resolved
Hide resolved
packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.rule.ts
Show resolved
Hide resolved
packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.ts
Outdated
Show resolved
Hide resolved
|
|
||
| this._renderValue(); | ||
| this._caret(caret); | ||
| this._caret(currentCaret); |
There was a problem hiding this comment.
Potential bug: When _caret() returns undefined, this method will call this._caret(undefined), which may not properly restore the caret position. The method should handle the case where caret parameter is not provided and this._caret() returns undefined. Consider either skipping the caret restoration when it's undefined, or providing a default caret position.
| this._caret(currentCaret); | |
| if (currentCaret) { | |
| this._caret(currentCaret); | |
| } |
| this.editor._maskKeyHandler(event, (): Promise<string> => { | ||
| const text = getClipboardText(event, selectedText); | ||
|
|
||
| return text as unknown as Promise<string>; |
There was a problem hiding this comment.
Type mismatch: The function is declared to return Promise<string> but getClipboardText likely returns a string (not a Promise). The type cast as unknown as Promise<string> is forcing an incorrect type. According to the signature of _maskKeyHandler, the keyHandler parameter should return Promise<string> | undefined. If getClipboardText returns a synchronous string, this should either be wrapped in Promise.resolve() or the return type should be undefined with the actual clipboard handling done synchronously.
| return text as unknown as Promise<string>; | |
| return Promise.resolve(text); |
| _handleKey(key: string, direction: CaretDirection): void { | ||
| this._direction(direction || FORWARD_DIRECTION); |
There was a problem hiding this comment.
Type inconsistency: The _handleKey method signature declares direction as a required parameter of type CaretDirection, but the implementation uses direction || FORWARD_DIRECTION which suggests it can be undefined/falsy. The signature should be changed to direction?: CaretDirection to match the actual usage, or callers should always provide the direction explicitly. Currently, line 239 in m_text_editor.mask.strategy.ts calls _handleKey with only one argument.
| _handleKey(key: string, direction: CaretDirection): void { | |
| this._direction(direction || FORWARD_DIRECTION); | |
| _handleKey(key: string, direction?: CaretDirection): void { | |
| this._direction(direction ?? FORWARD_DIRECTION); |
|
|
||
| if (handled) { | ||
| // eslint-disable-next-line @typescript-eslint/no-floating-promises | ||
| handled.then(raiseInputEvent); |
There was a problem hiding this comment.
Missing error handling: The promise returned by keyHandler() is not being awaited and has no error handling. If the promise rejects, it will result in an unhandled promise rejection. Consider either awaiting this promise with proper error handling or using .catch() to handle potential errors. The eslint disable comment indicates this is a known issue but doesn't resolve the underlying problem.
| handled.then(raiseInputEvent); | |
| handled | |
| .then(raiseInputEvent) | |
| .catch(() => { /* prevent unhandled promise rejections */ }); |
| // @ts-expect-error ts-expect-error | ||
| editor._handleKey(EMPTY_CHAR); |
There was a problem hiding this comment.
Missing parameter: This call to _handleKey is missing the second parameter direction. The method signature requires direction: CaretDirection (though the implementation treats it as optional with a fallback). Either update the call to pass an explicit direction (likely 'forward'), or update the method signature in m_text_editor.mask.ts to make the parameter optional.
| // @ts-expect-error ts-expect-error | |
| editor._handleKey(EMPTY_CHAR); | |
| editor._handleKey(EMPTY_CHAR, 'forward'); |
| _parseMaskRule(index: number): EmptyMaskRule | StubMaskRule | MaskRule | undefined { | ||
| const { mask } = this.option(); | ||
| // @ts-expect-error ts-error | ||
|
|
||
| if (!mask) { | ||
| return undefined; |
There was a problem hiding this comment.
Type inconsistency: The _parseMaskRule method can return undefined (line 263), but the class property _maskRulesChain is typed to accept null (line 80). Additionally, line 222 sets it to null. For consistency, either change the return type to include null instead of undefined, or update the property type and line 222 to use undefined. TypeScript treats null and undefined as distinct types, so this mismatch could cause type errors.
No description provided.