refactor: empty word appending in zen mode

Author: Miodec

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

@@ -404,17 +404,16 @@ function updateWordWrapperClasses(): void {
 export function showWords(): void {
   $("#words").empty();
 
-  let wordsHTML = "";
-  if (Config.mode !== "zen") {
+  if (Config.mode === "zen") {
+    appendEmptyWordElement();
+  } else {
+    let wordsHTML = "";
     for (let i = 0; i < TestWords.words.length; i++) {
       wordsHTML += getWordHTML(TestWords.words.get(i));
     }
-  } else {
-    wordsHTML = '<div class="word active"></div>';
+    $("#words").html(wordsHTML);
   }
 
-  $("#words").html(wordsHTML);
-
   updateActiveElement(undefined, true);
   setTimeout(() => {
     void Caret.updatePosition();
@@ -423,6 +422,10 @@ export function showWords(): void {
   updateWordWrapperClasses();
 }
 
+export function appendEmptyWordElement(): void {
+  $("#words").append("<div class='word'><letter>ㅤ</letter></div>");
+}
+
 const posUpdateLangList = ["japanese", "chinese", "korean"];
 function shouldUpdateWordsInputPosition(): boolean {
   const language = posUpdateLangList.some((l) => Config.language.startsWith(l));