Add all option to indicate typos

Author: Leonabcd123

frontend/src/html/pages/settings.html

@@ -539,12 +539,15 @@
       </div>
       <div class="text">
         Shows typos that you've made. Below shows what you typed below the
-        letters and replace will replace the letters with the ones you typed.
+        letters, replace will replace the letters with the ones you typed and
+        all will do the same as replace and below, but it will show the correct
+        letters below your mistakes.
       </div>
       <div class="buttons">
         <button data-config-value="off">off</button>
         <button data-config-value="below">below</button>
         <button data-config-value="replace">replace</button>
+        <button data-config-value="all">all</button>
       </div>
     </div>
     <div class="section" data-config-name="hideExtraLetters">

frontend/src/ts/controllers/input-controller.ts

@@ -703,7 +703,11 @@ async function handleChar(
     !TestUI.lineTransition
     // TestInput.input.current.length > 1
   ) {
-    if (Config.mode === "zen" || Config.indicateTypos === "replace") {
+    if (
+      Config.mode === "zen" ||
+      Config.indicateTypos === "replace" ||
+      Config.indicateTypos === "all"
+    ) {
       if (!Config.showAllLines) void TestUI.lineJump(activeWordTopBeforeJump);
     } else {
       TestInput.input.current = TestInput.input.current.slice(0, -1);

frontend/src/ts/test/test-ui.ts

@@ -436,7 +436,7 @@ function updateWordWrapperClasses(): void {
     $("#wordsWrapper").removeClass("blind");
   }
 
-  if (Config.indicateTypos === "below") {
+  if (Config.indicateTypos === "below" || Config.indicateTypos === "all") {
     $("#words").addClass("indicateTyposBelow");
     $("#wordsWrapper").addClass("indicateTyposBelow");
   } else {
@@ -791,7 +791,7 @@ export async function updateActiveWordLetters(
         !(containsKorean && !correctSoFar)
       ) {
         ret += `<letter class="dead">${
-          Config.indicateTypos === "replace"
+          Config.indicateTypos === "replace" || Config.indicateTypos === "all"
             ? inputChars[i] === " "
               ? "_"
               : inputChars[i]
@@ -806,13 +806,16 @@ export async function updateActiveWordLetters(
       } else {
         ret +=
           `<letter class="incorrect ${tabChar}${nlChar}">` +
-          (Config.indicateTypos === "replace"
+          (Config.indicateTypos === "replace" || Config.indicateTypos === "all"
             ? inputChars[i] === " "
               ? "_"
               : inputChars[i]
             : currentLetter) +
           "</letter>";
-        if (Config.indicateTypos === "below") {
+        if (
+          Config.indicateTypos === "below" ||
+          Config.indicateTypos === "all"
+        ) {
           const lastBlock = hintIndices[hintIndices.length - 1];
           if (lastBlock && lastBlock[lastBlock.length - 1] === i - 1)
             lastBlock.push(i);
@@ -839,7 +842,12 @@ export async function updateActiveWordLetters(
 
   if (hintIndices?.length) {
     const activeWordLetters = activeWord.querySelectorAll("letter");
-    const hintsHtml = createHintsHtml(hintIndices, activeWordLetters, input);
+    let hintsHtml;
+    if (Config.indicateTypos === "all") {
+      hintsHtml = createHintsHtml(hintIndices, activeWordLetters, currentWord);
+    } else {
+      hintsHtml = createHintsHtml(hintIndices, activeWordLetters, input);
+    }
     activeWord.insertAdjacentHTML("beforeend", hintsHtml);
     const hintElements = activeWord.getElementsByTagName("hint");
     await joinOverlappingHints(hintIndices, activeWordLetters, hintElements);

packages/schemas/src/configs.ts

@@ -50,7 +50,7 @@ export type CaretStyle = z.infer<typeof CaretStyleSchema>;
 export const ConfidenceModeSchema = z.enum(["off", "on", "max"]);
 export type ConfidenceMode = z.infer<typeof ConfidenceModeSchema>;
 
-export const IndicateTyposSchema = z.enum(["off", "below", "replace"]);
+export const IndicateTyposSchema = z.enum(["off", "below", "replace", "all"]);
 export type IndicateTypos = z.infer<typeof IndicateTyposSchema>;
 
 export const TimerStyleSchema = z.enum(["off", "bar", "text", "mini"]);