feat: make customization of virtual keyboard keycaps easier

CHANGELOG.md

@@ -1,5 +1,32 @@
 ## [Unreleased]
 
+### New Features
+
+- Some keycaps in the virtual keyboard can be customized without having
+  to define an entire virtual keyboard layout.
+
+  The `mathVirtualKeyboard.getKeycap()` give access to the definition of 
+  special keycaps and `mathVirtualKeyboard.setKeycap()` can be used to 
+  change that definition.
+
+  The keycaps are one of these special shortcuts:
+   * `[left]`, `[right]`, `[up]`, `[down]`, `[return]`, `[action]`,
+   * `[space]`, `[tab]`, `[backspace]`, `[shift]`,
+   * `[undo]`, `[redo]`, `[foreground-color]`, `[background-color]`,
+   * `[hide-keyboard]`,
+   * `[.]`, `[,]`,
+   * `[0]`, `[1]`, `[2]`, `[3]`, `[4]`,
+   * `[5]`, `[6]`, `[7]`, `[8]`, `[9]`,
+   * `[+]`, `[-]`, `[*]`, `[/]`, `[^]`, `[_]`, `[=]`, `[.]`,
+   * `[(]`, `[)]`
+
+  For example, to change the LaTeX inserted when the multiplication key is 
+  pressed use:
+
+  ```js
+  mathVirtualKeyboard.setKeycap('[*]', {latex: '\\times'});
+  ```
+
 ### Issues Resolved
 
 - In the virtual keyboard, the background of the variant panel was sometimes

src/public/virtual-keyboard.ts

@@ -218,10 +218,30 @@ export interface VirtualKeyboardOptions {
       | Readonly<(VirtualKeyboardName | VirtualKeyboardLayout)[]>
   );
 
+  /**
+   * This property is the "expanded" version of the `layouts` property.
+   * It is normalized to include all the default values for the properties
+   * of the layout and layers.
+   */
   readonly normalizedLayouts: (VirtualKeyboardLayoutCore & {
     layers: NormalizedVirtualKeyboardLayer[];
   })[];
 
+  /**
+   * Some keycaps can be customized:
+   * `[left]`, `[right]`, `[up]`, `[down]`, `[return]`, `[action]`,
+   * `[space]`, `[tab]`, `[backspace]`, `[shift]`,
+   * `[undo]`, `[redo]`, `[foreground-color]`, `[background-color]`,
+   * `[hide-keyboard]`,
+   * `[.]`, `[,]`,
+   * `[0]`, `[1]`, `[2]`, `[3]`, `[4]`,
+   * `[5]`, `[6]`, `[7]`, `[8]`, `[9]`,
+   * `[+]`, `[-]`, `[*]`, `[/]`, `[^]`, `[_]`, `[=]`, `[.]`,
+   * `[(]`, `[)]`,
+   */
+  getKeycap(keycap: string): Partial<VirtualKeyboardKeycap> | undefined;
+  setKeycap(keycap: string, value: Partial<VirtualKeyboardKeycap>): void;
+
   /**
    * Configuration of the action toolbar, displayed on the right-hand side.
    *
@@ -376,6 +396,7 @@ export type VirtualKeyboardMessage =
       shiftKeycap: string | Partial<VirtualKeyboardKeycap>;
       backspaceKeycap: string | Partial<VirtualKeyboardKeycap>;
       tabKeycap: string | Partial<VirtualKeyboardKeycap>;
+      setKeycap: { keycap: string; value: Partial<VirtualKeyboardKeycap> };
     }
   | {
       // From proxy to VK

src/virtual-keyboard/proxy.ts

@@ -58,6 +58,14 @@ export class VirtualKeyboardProxy
     this.sendMessage('proxy-created');
     this.listeners = {};
   }
+
+  getKeycap(keycap: string): VirtualKeyboardKeycap | undefined {
+    return undefined;
+  }
+  setKeycap(keycap: string, value: string | Partial<VirtualKeyboardKeycap>) {
+    this.sendMessage('update-setting', { setKeycap: { keycap, value } });
+  }
+
   set alphabeticLayout(value: AlphabeticKeyboardLayout) {
     this.sendMessage('update-setting', { alphabeticLayout: value });
   }

src/virtual-keyboard/utils.ts

@@ -714,7 +714,10 @@ export function renderKeycap(
   return [markup, cls || 'MLK__keycap'];
 }
 
-const KEYCAP_SHORTCUTS: Record<string, Partial<VirtualKeyboardKeycap>> = {
+export const KEYCAP_SHORTCUTS: Record<
+  string,
+  Partial<VirtualKeyboardKeycap>
+> = {
   '[left]': {
     class: 'action hide-shift',
     label: '<svg class=svg-glyph><use xlink:href=#svg-arrow-left /></svg>',

src/virtual-keyboard/virtual-keyboard.ts

@@ -30,6 +30,8 @@ import {
   releaseStylesheets,
   normalizeLayout,
   renderKeycap,
+  normalizeKeycap,
+  KEYCAP_SHORTCUTS,
 } from './utils';
 
 import { hideVariantsPanel, showVariantsPanel } from './variants';
@@ -112,6 +114,14 @@ export class VirtualKeyboard implements VirtualKeyboardInterface, EventTarget {
     return id;
   }
 
+  setKeycap(
+    keycap: string,
+    value: string | Partial<VirtualKeyboardKeycap>
+  ): void {
+    KEYCAP_SHORTCUTS[keycap] = normalizeKeycap(value);
+    this.rebuild();
+  }
+
   getKeycap(
     id: string | undefined
   ): Partial<VirtualKeyboardKeycap> | undefined {
@@ -693,6 +703,11 @@ export class VirtualKeyboard implements VirtualKeyboardInterface, EventTarget {
       if (msg.alphabeticLayout) this.alphabeticLayout = msg.alphabeticLayout;
       if (msg.layouts) this.layouts = msg.layouts;
       if (msg.editToolbar) this.editToolbar = msg.editToolbar;
+      if (msg.setKeycap) {
+        const { keycap, value } = msg.setKeycap;
+        this.setKeycap(keycap, value);
+        this.render();
+      }
       return;
     }