fix: json validation for layouts not supporting combined characters (@fehmer)

frontend/package.json

@@ -42,13 +42,14 @@
     "@types/subset-font": "1.4.3",
     "@types/throttle-debounce": "2.1.0",
     "@vitest/coverage-v8": "2.1.9",
-    "ajv": "8.12.0",
+    "ajv": "8.17.1",
     "autoprefixer": "10.4.20",
     "concurrently": "8.2.2",
     "dotenv": "16.4.5",
     "eslint": "8.57.1",
     "firebase-tools": "13.15.1",
     "fontawesome-subset": "4.4.0",
+    "graphemer": "1.4.0",
     "gulp": "4.0.2",
     "gulp-eslint-new": "1.9.1",
     "happy-dom": "15.10.2",

frontend/scripts/json-validation.cjs

@@ -1,6 +1,30 @@
 const fs = require("fs");
 const Ajv = require("ajv");
 const ajv = new Ajv();
+const Graphemer = require("graphemer").default;
+const graphemeSplitter = new Graphemer();
+
+/* unicode max length works with combined characters */
+ajv.addKeyword({
+  keyword: "uMaxLength",
+  type: "string",
+  validate: (maxLength, value) =>
+    graphemeSplitter.countGraphemes(value) <= maxLength,
+  error: {
+    message: (ctx) => `must NOT have more then  ${ctx.schemValue} characters`,
+  },
+});
+
+/* unicode min length works with combined characters */
+ajv.addKeyword({
+  keyword: "uMinLength",
+  type: "string",
+  validate: (minLength, value) =>
+    graphemeSplitter.countGraphemes(value) >= minLength,
+  error: {
+    message: (ctx) => `must NOT have less then  ${ctx.schemValue} characters`,
+  },
+});
 
 function findDuplicates(words) {
   const wordFrequencies = {};
@@ -184,31 +208,31 @@ function validateOthers() {
             properties: {
               row1: {
                 type: "array",
-                items: { type: "string", minLength: 1, maxLength: 4 },
+                items: { type: "string", uMinLength: 1, uMaxLength: 4 },
                 minItems: 13,
                 maxItems: 13,
               },
               row2: {
                 type: "array",
-                items: { type: "string", minLength: 1, maxLength: 4 },
+                items: { type: "string", uMinLength: 1, uMaxLength: 4 },
                 minItems: 13,
                 maxItems: 13,
               },
               row3: {
                 type: "array",
-                items: { type: "string", minLength: 1, maxLength: 4 },
+                items: { type: "string", uMinLength: 1, uMaxLength: 4 },
                 minItems: 11,
                 maxItems: 11,
               },
               row4: {
                 type: "array",
-                items: { type: "string", minLength: 1, maxLength: 4 },
+                items: { type: "string", uMinLength: 1, uMaxLength: 4 },
                 minItems: 10,
                 maxItems: 10,
               },
               row5: {
                 type: "array",
-                items: { type: "string", minLength: 1, maxLength: 2 },
+                items: { type: "string", uMinLength: 1, uMaxLength: 2 },
                 minItems: 1,
                 maxItems: 2,
               },
@@ -228,31 +252,31 @@ function validateOthers() {
             properties: {
               row1: {
                 type: "array",
-                items: { type: "string", minLength: 1, maxLength: 4 },
+                items: { type: "string", uMinLength: 1, uMaxLength: 4 },
                 minItems: 13,
                 maxItems: 13,
               },
               row2: {
                 type: "array",
-                items: { type: "string", minLength: 1, maxLength: 4 },
+                items: { type: "string", uMinLength: 1, uMaxLength: 4 },
                 minItems: 12,
                 maxItems: 12,
               },
               row3: {
                 type: "array",
-                items: { type: "string", minLength: 1, maxLength: 4 },
+                items: { type: "string", uMinLength: 1, uMaxLength: 4 },
                 minItems: 12,
                 maxItems: 12,
               },
               row4: {
                 type: "array",
-                items: { type: "string", minLength: 1, maxLength: 4 },
+                items: { type: "string", uMinLength: 1, uMaxLength: 4 },
                 minItems: 11,
                 maxItems: 11,
               },
               row5: {
                 type: "array",
-                items: { type: "string", minLength: 1, maxLength: 2 },
+                items: { type: "string", uMinLength: 1, uMaxLength: 2 },
                 minItems: 1,
                 maxItems: 2,
               },
@@ -288,6 +312,7 @@ function validateOthers() {
           );
           layoutsAllGood = false;
           layoutsErrors = layoutsValidator.errors[0].message;
+          console.log(layoutsValidator.errors);
         }
       }
     });

frontend/src/ts/elements/keymap.ts

@@ -15,9 +15,13 @@ const stenoKeys: JSONData.Layout = {
   type: "matrix",
   keys: {
     row1: [],
-    row2: ["sS", "tT", "pP", "hH", "**", "fF", "pP", "lL", "tT", "dD"],
-    row3: ["sS", "kK", "wW", "rR", "**", "rR", "bB", "gG", "sS", "zZ"],
-    row4: ["aA", "oO", "eE", "uU"],
+    row2: ["sS", "tT", "pP", "hH", "**", "fF", "pP", "lL", "tT", "dD"].map(
+      (it) => it.split("")
+    ),
+    row3: ["sS", "kK", "wW", "rR", "**", "rR", "bB", "gG", "sS", "zZ"].map(
+      (it) => it.split("")
+    ),
+    row4: ["aA", "oO", "eE", "uU"].map((it) => it.split("")),
     row5: [],
   },
 };
@@ -227,34 +231,34 @@ export async function refresh(
          * It is just created for simplicity in the for loop below.
          * */
         // If only one space, add another
-        if (rowKeys.length === 1 && rowKeys[0] === " ") {
+        if (rowKeys.length === 1 && rowKeys[0]?.join("") === " ") {
           rowKeys[1] = rowKeys[0];
         }
         // If only one alpha, add one space and place it on the left
-        if (rowKeys.length === 1 && rowKeys[0] !== " ") {
-          rowKeys[1] = " ";
+        if (rowKeys.length === 1 && rowKeys[0]?.join("") !== " ") {
+          rowKeys[1] = [" "];
           rowKeys.reverse();
         }
         // If two alphas equal, replace one with a space on the left
         if (
           rowKeys.length > 1 &&
-          rowKeys[0] !== " " &&
+          rowKeys[0]?.join("") !== " " &&
           rowKeys[0] === rowKeys[1]
         ) {
-          rowKeys[0] = " ";
+          rowKeys[0] = [" "];
         }
-        const alphas = (v: string): boolean => v !== " ";
+        const alphas = (v: string[]): boolean => v?.join("") !== " ";
         hasAlphas = rowKeys.some(alphas);
 
         rowElement += "<div></div>";
 
         for (let i = 0; i < rowKeys.length; i++) {
-          const key = rowKeys[i] as string;
+          const key = rowKeys[i];
           let keyDisplay = key[0] as string;
           if (Config.keymapLegendStyle === "uppercase") {
             keyDisplay = keyDisplay.toUpperCase();
           }
-          const keyVisualValue = key.replace('"', "&quot;");
+          const keyVisualValue = key?.join("").replace('"', "&quot;");
           // these are used to keep grid layout but magically hide keys using opacity:
           let side = i < 1 ? "left" : "right";
           // we won't use this trick for alternate layouts, unless Alice (for rotation):
@@ -297,7 +301,7 @@ export async function refresh(
           ) {
             continue;
           }
-          const key = rowKeys[i] as string;
+          const key = rowKeys[i] as string[];
           const bump = row === "row3" && (i === 3 || i === 6) ? true : false;
           let keyDisplay = key[0] as string;
           let letterStyle = "";
@@ -316,10 +320,9 @@ export async function refresh(
             hide = ` invisible`;
           }
 
-          const keyElement = `<div class="keymapKey${hide}" data-key="${key.replace(
-            '"',
-            "&quot;"
-          )}">
+          const keyElement = `<div class="keymapKey${hide}" data-key="${key
+            .join("")
+            .replace('"', "&quot;")}">
               <span class="letter" ${letterStyle}>${keyDisplay}</span>
               ${bump ? "<div class='bump'></div>" : ""}
           </div>`;

frontend/src/ts/utils/json-data.ts

@@ -1,5 +1,7 @@
 import { Accents } from "../test/lazy-mode";
 import { hexToHSL } from "./colors";
+import Graphemer from "graphemer";
+const graphemeSplitter = new Graphemer();
 
 /**
  * Fetches JSON data from the specified URL using the fetch API.
@@ -64,11 +66,11 @@ export const cachedFetchJson = memoizeAsync<string, typeof fetchJson>(
 );
 
 export type Keys = {
-  row1: string[];
-  row2: string[];
-  row3: string[];
-  row4: string[];
-  row5: string[];
+  row1: string[][];
+  row2: string[][];
+  row3: string[][];
+  row4: string[][];
+  row5: string[][];
 };
 
 export type Layout = {
@@ -107,6 +109,16 @@ export async function getLayout(layoutName: string): Promise<Layout> {
   if (layout === undefined) {
     throw new Error(`Layout ${layoutName} is undefined`);
   }
+
+  const convert = (it: unknown): string[] =>
+    graphemeSplitter.splitGraphemes(it as string);
+
+  layout.keys.row1 = layout.keys.row1.map(convert);
+  layout.keys.row2 = layout.keys.row2.map(convert);
+  layout.keys.row3 = layout.keys.row3.map(convert);
+  layout.keys.row4 = layout.keys.row4.map(convert);
+  layout.keys.row5 = layout.keys.row5.map(convert);
+
   return layout;
 }
 

frontend/static/layouts/_list.json

@@ -4,7 +4,7 @@
     "type": "ansi",
     "keys": {
       "row1": ["`~", "1!", "2@", "3#", "4$", "5%", "6^", "7&", "8*", "9(", "0)", "-_", "=+"],
-      "row2": ["qQ", "wW", "eE", "rR", "tT", "yY", "uU", "iI", "oO", "pP", "[{", "]}", "\\|"],
+      "row2": ["o̊ơ", "wW", "eE", "rR", "tT", "yY", "uU", "iI", "oO", "pP", "[{", "]}", "\\|"],
       "row3": ["aA", "sS", "dD", "fF", "gG", "hH", "jJ", "kK", "lL", ";:", "'\""],
       "row4": ["zZ", "xX", "cC", "vV", "bB", "nN", "mM", ",<", ".>", "/?"],
       "row5": [" "]