Add forward delete functionality. Fixes #1033

build/types/services/Utilities.d.ts

@@ -72,6 +72,7 @@ declare class Utilities {
         "{home}": string;
         "{pageup}": string;
         "{delete}": string;
+        "{forwarddelete}": string;
         "{end}": string;
         "{pagedown}": string;
         "{numpadmultiply}": string;
@@ -133,13 +134,20 @@ declare class Utilities {
      */
     addStringAt(source: string, str: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
     /**
-     * Removes an amount of characters at a given position
+     * Removes an amount of characters before a given position
      *
      * @param  {string} source The source input
      * @param  {number} position The (cursor) position from where the characters should be removed
      * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
      */
     removeAt(source: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
+    /**
+     * Removes an amount of characters after a given position
+     *
+     * @param  {string} source The source input
+     * @param  {number} position The (cursor) position from where the characters should be removed
+     */
+    removeForwardsAt(source: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
     /**
      * Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
      *

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "3.0.70",
+  "version": "3.1.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/types/index.d.ts",

src/lib/components/Keyboard.ts

@@ -53,11 +53,9 @@ class SimpleKeyboard {
   constructor(...params: KeyboardParams) {
     if (typeof window === "undefined") return;
 
-    const {
-      keyboardDOMClass,
-      keyboardDOM,
-      options = {},
-    } = this.handleParams(params);
+    const { keyboardDOMClass, keyboardDOM, options = {} } = this.handleParams(
+      params
+    );
 
     /**
      * Initializing Utilities
@@ -474,8 +472,9 @@ class SimpleKeyboard {
        * Check if this new input has candidates (suggested words)
        */
       if (e?.target && this.options.enableLayoutCandidates) {
-        const { candidateKey, candidateValue } =
-          this.getInputCandidates(updatedInput);
+        const { candidateKey, candidateValue } = this.getInputCandidates(
+          updatedInput
+        );
 
         if (candidateKey && candidateValue) {
           this.showCandidatesBox(

src/lib/services/Utilities.ts

@@ -106,6 +106,7 @@ class Utilities {
       "{home}": "home",
       "{pageup}": "up",
       "{delete}": "del",
+      "{forwarddelete}": "del",
       "{end}": "end",
       "{pagedown}": "down",
       "{numpadmultiply}": "*",
@@ -177,6 +178,11 @@ class Utilities {
       output.length > 0
     ) {
       output = this.removeAt(output, ...commonParams);
+    } else if (
+      (button === "{delete}" || button === "{forwarddelete}") &&
+      output.length > 0
+    ) {
+      output = this.removeForwardsAt(output, ...commonParams);
     } else if (button === "{space}")
       output = this.addStringAt(output, " ", ...commonParams);
     else if (
@@ -294,7 +300,7 @@ class Utilities {
   }
 
   /**
-   * Removes an amount of characters at a given position
+   * Removes an amount of characters before a given position
    *
    * @param  {string} source The source input
    * @param  {number} position The (cursor) position from where the characters should be removed
@@ -355,6 +361,65 @@ class Utilities {
 
     return output;
   }
+
+  /**
+   * Removes an amount of characters after a given position
+   *
+   * @param  {string} source The source input
+   * @param  {number} position The (cursor) position from where the characters should be removed
+   */
+  removeForwardsAt(
+    source: string,
+    position = source.length,
+    positionEnd = source.length,
+    moveCaret = false
+  ) {
+    if (position === 0 && positionEnd === 0) {
+      return source;
+    }
+
+    let output;
+
+    if (position === positionEnd) {
+      let nextTwoChars;
+      let emojiMatched;
+      const emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g;
+
+      /**
+       * Emojis are made out of two characters, so we must take a custom approach to trim them.
+       * For more info: https://mathiasbynens.be/notes/javascript-unicode
+       */
+      if (position && position >= 0) {
+        nextTwoChars = source.substring(position, position + 2);
+        emojiMatched = nextTwoChars.match(emojiMatchedReg);
+
+        if (emojiMatched) {
+          output = source.substr(0, position) + source.substr(position + 2);
+        } else {
+          output = source.substr(0, position) + source.substr(position + 1);
+        }
+      } else {
+        nextTwoChars = source.slice(2);
+        emojiMatched = nextTwoChars.match(emojiMatchedReg);
+
+        if (emojiMatched) {
+          output = source.slice(0, 2);
+        } else {
+          output = source.slice(0, 1);
+        }
+      }
+    } else {
+      output = source.slice(0, position) + source.slice(positionEnd);
+      if (moveCaret) {
+        this.dispatch((instance: any) => {
+          instance.setCaretPosition(position);
+        });
+      }
+    }
+
+    return output;
+  }
+
   /**
    * Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
    *

src/lib/services/tests/Utilities.test.js

@@ -34,6 +34,16 @@ it('Keyboard {bksp} button will work', () => {
   expect(output).toBe("tes");
 });
 
+it('Keyboard {delete} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{delete}", "test", 1);
+
+  expect(output).toBe("tst");
+});
+
 it('Keyboard {space} button will work', () => {
   setDOM();