feat(core): add deleteSoftLineBackward & deleteSoftLineForward su…

…pport (#207)
taiga-family · Mar 20, 2023 · cbd5479 · cbd5479
1 parent d51559a
commit cbd5479
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 0 deletions.
diff --git a/projects/core/src/lib/mask.ts b/projects/core/src/lib/mask.ts
@@ -4,6 +4,7 @@ import {ElementState, MaskitoOptions, SelectionRange, TypedInputEvent} from './t
 import {
     areElementValuesEqual,
     EventListener,
+    getLineSelection,
     getNotEmptySelection,
     getWordSelection,
     isBeforeInputEventSupported,
@@ -74,6 +75,16 @@ export class Maskito extends MaskHistory {
                             selection: getWordSelection(this.elementState, isForward),
                             force: true,
                         });
+                    case 'deleteSoftLineBackward':
+                    case 'deleteSoftLineForward':
+                    case 'deleteHardLineBackward':
+                    case 'deleteHardLineForward':
+                        return this.handleDelete({
+                            event,
+                            isForward,
+                            selection: getLineSelection(this.elementState, isForward),
+                            force: true,
+                        });
                     case 'insertFromDrop':
                         // We don't know caret position at this moment
                         // (inserted content will be handled later in "input"-event)

diff --git a/projects/core/src/lib/types/typed-input-event.ts b/projects/core/src/lib/types/typed-input-event.ts
@@ -3,6 +3,10 @@ export interface TypedInputEvent extends InputEvent {
         | 'deleteByCut' // Ctrl (Command) + X
         | 'deleteContentBackward' // Backspace
         | 'deleteContentForward' // Delete (Fn + Backspace)
+        | 'deleteHardLineBackward' // Ctrl (Command) + Backspace
+        | 'deleteHardLineForward'
+        | 'deleteSoftLineBackward' // Ctrl (Command) + Backspace
+        | 'deleteSoftLineForward'
         | 'deleteWordBackward' // Alt (Option) + Backspace
         | 'deleteWordForward' // Alt (Option) + Delete (Fn + Backspace)
         | 'historyRedo' // Ctrl (Command) + Shift + Z

diff --git a/projects/core/src/lib/utils/get-line-selection.ts b/projects/core/src/lib/utils/get-line-selection.ts
@@ -0,0 +1,21 @@
+import {ElementState, SelectionRange} from '../types';
+
+export function getLineSelection(
+    {value, selection}: ElementState,
+    isForward: boolean,
+): SelectionRange {
+    const [from, to] = selection;
+
+    if (from !== to) {
+        return [from, to];
+    }
+
+    const nearestBreak = isForward
+        ? value.slice(from).indexOf('\n') + 1 || value.length
+        : value.slice(0, to).lastIndexOf('\n') + 1;
+
+    const selectFrom = isForward ? from : nearestBreak;
+    const selectTo = isForward ? nearestBreak : to;
+
+    return [selectFrom, selectTo];
+}
diff --git a/projects/core/src/lib/utils/index.ts b/projects/core/src/lib/utils/index.ts
@@ -2,6 +2,7 @@ export * from './dom/event-listener';
 export * from './dom/is-before-input-event-supported';
 export * from './dom/is-event-producing-character';
 export * from './element-states-equality';
+export * from './get-line-selection';
 export * from './get-not-empty-selection';
 export * from './get-word-selection';
 export * from './identity';

diff --git a/projects/demo-integrations/cypress/tests/kit/date-range/date-range-basic.cy.ts b/projects/demo-integrations/cypress/tests/kit/date-range/date-range-basic.cy.ts
@@ -146,6 +146,41 @@ describe('DateRange | Basic', () => {
                 .should('have.prop', 'selectionStart', 0)
                 .should('have.prop', 'selectionEnd', 0);
         });
+
+        it('Type `deleteSoftLineBackward` of `InputEvent` works', () => {
+            cy.get('@input')
+                .trigger('beforeinput', {inputType: 'deleteSoftLineBackward'})
+                .should('have.value', '')
+                .should('have.prop', 'selectionStart', ''.length)
+                .should('have.prop', 'selectionEnd', ''.length);
+        });
+
+        it('Type `deleteSoftLineForward` of `InputEvent` works', () => {
+            cy.get('@input')
+                .type('{moveToStart}')
+                .trigger('beforeinput', {inputType: 'deleteSoftLineForward'})
+                .should('have.value', '')
+                .should('have.prop', 'selectionStart', ''.length)
+                .should('have.prop', 'selectionEnd', ''.length);
+        });
+
+        it('Type `deleteSoftLineBackward` in the middle works', () => {
+            cy.get('@input')
+                .type('{leftArrow}'.repeat(' 31.12.2022'.length))
+                .trigger('beforeinput', {inputType: 'deleteSoftLineBackward'})
+                .should('have.value', '01.01.0001 – 31.12.2022')
+                .should('have.prop', 'selectionStart', ''.length)
+                .should('have.prop', 'selectionEnd', ''.length);
+        });
+
+        it('Type `deleteSoftLineForward` in the middle works', () => {
+            cy.get('@input')
+                .type('{leftArrow}'.repeat(' 31.12.2022'.length))
+                .trigger('beforeinput', {inputType: 'deleteSoftLineForward'})
+                .should('have.value', '20.01.1990')
+                .should('have.prop', 'selectionStart', '20.01.1990'.length)
+                .should('have.prop', 'selectionEnd', '20.01.1990'.length);
+        });
     });
 
     describe('Editing somewhere in the middle of a value (NOT the last character)', () => {

diff --git a/projects/demo-integrations/cypress/tests/kit/date/date-basic.cy.ts b/projects/demo-integrations/cypress/tests/kit/date/date-basic.cy.ts
@@ -120,6 +120,23 @@ describe('Date', () => {
                     .should('have.prop', 'selectionStart', ''.length)
                     .should('have.prop', 'selectionEnd', ''.length);
             });
+
+            it('Type `deleteSoftLineForward` of `InputEvent` works', () => {
+                cy.get('@input')
+                    .type('{moveToStart}')
+                    .trigger('beforeinput', {inputType: 'deleteSoftLineForward'})
+                    .should('have.value', '')
+                    .should('have.prop', 'selectionStart', ''.length)
+                    .should('have.prop', 'selectionEnd', ''.length);
+            });
+
+            it('Type `deleteSoftLineBackward` of `InputEvent` works', () => {
+                cy.get('@input')
+                    .trigger('beforeinput', {inputType: 'deleteSoftLineBackward'})
+                    .should('have.value', '')
+                    .should('have.prop', 'selectionStart', ''.length)
+                    .should('have.prop', 'selectionEnd', ''.length);
+            });
         });
 
         describe('Editing somewhere in the middle of a value (NOT the last character)', () => {

diff --git a/...ects/demo-integrations/cypress/tests/recipes/textarea/textarea-latin-letters-digits.cy.ts b/...ects/demo-integrations/cypress/tests/recipes/textarea/textarea-latin-letters-digits.cy.ts
@@ -41,6 +41,25 @@ describe('Textarea (mask latin letters + digits)', () => {
                 .type('UI')
                 .should('have.value', 'Taiga\n\n\nUI');
         });
+
+        it('`deleteSoftLineBackward` works', () => {
+            cy.get('@textArea')
+                .type('Taiga')
+                .type('{enter}')
+                .type('UI and Maskito')
+                .trigger('beforeinput', {inputType: 'deleteSoftLineBackward'})
+                .should('have.value', 'Taiga\n');
+        });
+
+        it('`deleteSoftLineForward` works', () => {
+            cy.get('@textArea')
+                .type('Taiga')
+                .type('{enter}')
+                .type('UI and Maskito')
+                .type('{moveToStart}')
+                .trigger('beforeinput', {inputType: 'deleteSoftLineForward'})
+                .should('have.value', 'UI and Maskito');
+        });
     });
 
     it('accepts spaces', () => {