fix: fixed #2396

CHANGELOG.md

@@ -2,10 +2,12 @@
 
 ### Bug Fixes
 
- - **#2392** Pressing the backspace key after typing several digits would 
-    delete all the digits.
+- **#2396** Pressing the arrow keys in the virtual keyboard would not move the
+  selection in the mathfield and display a runtime error in the console.
 - **#2395** Added a `dispatchEvent` command which can be attached to a 
   custom keycap. 
+- **#2392** Pressing the backspace key after typing several digits would 
+    delete all the digits.
 
   Its first argument is the name of the dispatched event, and the second
   argument is an object with the `detail` property, which is the data

src/editor/commands.ts

@@ -238,7 +238,7 @@ register(
  */
 export function parseCommand(
   command: undefined | string | [string, ...any[]]
-): [SelectorPrivate, ...any[]] | undefined {
+): [SelectorPrivate, ...any[]] | SelectorPrivate | undefined {
   if (!command) return undefined;
   if (isArray(command) && command.length > 0) {
     let selector = command[0];
@@ -283,5 +283,5 @@ export function parseCommand(
   let selector = command;
   selector.replace(/-\w/g, (m) => m[1].toUpperCase());
 
-  return [selector as SelectorPrivate];
+  return selector as SelectorPrivate;
 }

src/public/virtual-keyboard.ts

@@ -29,6 +29,7 @@ export interface VirtualKeyboardKeycap {
    * Command to perform when the keycap is pressed
    */
   command:
+    | string
     | Selector
     | string[]
     | [string, any]

src/virtual-keyboard/utils.ts

@@ -718,54 +718,54 @@ const KEYCAP_SHORTCUTS: Record<string, Partial<VirtualKeyboardKeycap>> = {
   '[left]': {
     class: 'action hide-shift',
     label: '<svg class=svg-glyph><use xlink:href=#svg-arrow-left /></svg>',
-    command: ['performWithFeedback', 'moveToPreviousChar'],
+    command: 'performWithFeedback(moveToPreviousChar)',
     shift: {
       label:
         '<svg class=svg-glyph><use xlink:href=#svg-angle-double-left /></svg>',
-      command: ['performWithFeedback', 'extendSelectionBackward'],
+      command: 'performWithFeedback(extendSelectionBackward)',
     },
   },
   '[right]': {
     class: 'action hide-shift',
     label: '<svg class=svg-glyph><use xlink:href=#svg-arrow-right /></svg>',
-    command: ['performWithFeedback', 'moveToNextChar'],
+    command: 'performWithFeedback(moveToNextChar)',
     shift: {
       label:
         '<svg class=svg-glyph><use xlink:href=#svg-angle-double-right /></svg>',
-      command: ['performWithFeedback', 'extendSelectionForward'],
+      command: 'performWithFeedback(extendSelectionForward)',
     },
   },
   '[up]': {
     class: 'action hide-shift',
     label: '↑',
-    command: ['performWithFeedback', 'moveUp'],
+    command: 'performWithFeedback(moveUp)',
     shift: {
       label: '↟',
-      command: ['performWithFeedback', 'extendSelectionUpward'],
+      command: 'performWithFeedback(extendSelectionUpward)',
     },
   },
   '[down]': {
     class: 'action hide-shift',
     label: '↓',
-    command: ['performWithFeedback', 'moveDown'],
+    command: 'performWithFeedback(moveDown)',
     shift: {
       label: '↡',
-      command: ['performWithFeedback', 'extendSelectionDownward'],
+      command: 'performWithFeedback(extendSelectionDownward)',
     },
   },
   '[return]': {
     class: 'action hide-shift',
-    command: ['performWithFeedback', 'commit'],
-    shift: { command: ['performWithFeedback', 'addRowAfter'] },
+    command: 'performWithFeedback(commit)',
+    shift: { command: 'performWithFeedback(addRowAfter)' },
     width: 1.5,
     label: '<svg class=svg-glyph><use xlink:href=#svg-commit /></svg>',
   },
   '[action]': {
     class: 'action hide-shift',
-    command: ['performWithFeedback', 'commit'],
+    command: 'performWithFeedback(commit)',
     shift: {
       label: '<svg class=svg-glyph><use xlink:href=#circle-plus /></svg>',
-      command: ['performWithFeedback', 'addRowAfter'],
+      command: 'performWithFeedback(addRowAfter)',
     },
     width: 1.5,
     label: '<svg class=svg-glyph><use xlink:href=#svg-commit /></svg>',
@@ -782,14 +782,14 @@ const KEYCAP_SHORTCUTS: Record<string, Partial<VirtualKeyboardKeycap>> = {
   },
   '[.]': {
     variants: '.',
-    command: ['performWithFeedback', 'insertDecimalSeparator'],
+    command: 'performWithFeedback(insertDecimalSeparator)',
     shift: ',',
     class: 'big-op hide-shift',
     label: '.',
   },
   '[,]': {
     variants: ',',
-    command: ['performWithFeedback', 'insertDecimalSeparator'],
+    command: 'performWithFeedback(insertDecimalSeparator)',
     shift: '.',
     class: 'big-op hide-shift',
     label: ',',
@@ -849,7 +849,7 @@ const KEYCAP_SHORTCUTS: Record<string, Partial<VirtualKeyboardKeycap>> = {
   '[backspace]': {
     class: 'action bottom right hide-shift',
     width: 1.5,
-    command: ['performWithFeedback', 'deleteBackward'],
+    command: 'performWithFeedback(deleteBackward)',
     label: '<svg class=svg-glyph><use xlink:href=#svg-delete-backward /></svg>',
     shift: {
       class: 'action warning',

src/virtual-keyboard/virtual-keyboard.ts

@@ -854,8 +854,9 @@ export class VirtualKeyboard implements VirtualKeyboardInterface, EventTarget {
     if (isArray(command)) {
       selector = command[0];
       if (selector === 'performWithFeedback') {
-        command = command.slice(1) as [SelectorPrivate, ...any[]];
-        target = getCommandTarget(command);
+        target = getCommandTarget(
+          command.slice(1) as [SelectorPrivate, ...any[]]
+        );
       }
       args = command.slice(1);
     } else selector = command;