fix(editor): fake caret animation improvements

package.json

@@ -22,6 +22,7 @@
     "@tauri-apps/cli": "^2.0.3",
     "@tsconfig/svelte": "^5.0.4",
     "@types/eslint": "^9.6.1",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^22.7.5",
     "@types/textarea-caret": "^3.0.3",
@@ -64,6 +65,7 @@
     "clsx": "^2.1.1",
     "cmdk-sv": "^0.0.18",
     "localforage": "^1.10.0",
+    "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "mode-watcher": "^0.4.1",
     "print-js": "^1.6.0",

src/lib/components/Editor/Editor.css

@@ -37,7 +37,5 @@
 
 .fake-caret {
   animation: blink 1s infinite;
-  transition:
-    top 0s,
-    left 50ms ease-in-out;
+  transition: all 250ms cubic-bezier(0, 0.55, 0.45, 1);
 }

src/lib/components/Editor/Editor.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte';
   import throttle from 'lodash.throttle';
+  import debounce from 'lodash.debounce';
   import StatusBar from '@/components/StatusBar.svelte';
   import Quill from 'quill';
   import { position as getCaretPosition } from 'caret-pos';
@@ -20,10 +21,6 @@
   let caretLineNo = 1;
   let caretColumnNo = 1;
   let characterCount = 0;
-  /**
-   * Flag to track if update is already scheduled
-   */
-  let updateScheduled = false;
 
   async function setupQuill() {
     quill = new Quill(editorContainer!, {
@@ -70,36 +67,39 @@
     }
   }
 
+  const resumeFakeCaretBlink = debounce(function () {
+    if (fakeCaret) fakeCaret.style.animationDuration = '1s';
+  }, 700);
+
   // Using requestAnimationFrame for smooth updates
   const updateCaretPosition = throttle(() => {
     console.count('Update caret');
-    if (!updateScheduled) {
-      updateScheduled = true;
-      requestAnimationFrame(async () => {
-        if (editorContainer) {
-          try {
-            const caret = getCaretPosition(quill.root);
-
-            // Adjust for the scroll position
-            caretPosition = {
-              top: caret.top - editorContainer.scrollTop,
-              left: caret.left - editorContainer.scrollLeft,
-              height: caret.height
-            };
-          } catch (error) {
-            console.error(error);
-          }
+    requestAnimationFrame(async () => {
+      if (fakeCaret) fakeCaret.style.animationDuration = '0s';
+
+      if (editorContainer) {
+        try {
+          const caret = getCaretPosition(quill.root);
+
+          // Adjust for the scroll position
+          caretPosition = {
+            top: caret.top - editorContainer.scrollTop,
+            left: caret.left - editorContainer.scrollLeft,
+            height: caret.height
+          };
+        } catch (error) {
+          console.error(error);
         }
-        updateScheduled = false;
-      });
-    }
+      }
+
+      resumeFakeCaretBlink();
+    });
   });
 
   $: {
     if (
       editorContainer ||
       quill ||
-      fakeCaret ||
       lineNo ||
       caretLineNo ||
       caretColumnNo ||
@@ -126,7 +126,7 @@
     updateEditorData();
     await tick();
     updateCaretPosition();
-  }, 100);
+  });
 
   onMount(async () => {
     await setupQuill();
@@ -153,7 +153,7 @@
     --line-no-digits-count: {lineNo.toString().length}"
   />
   <div
-    class="fake-caret absolute z-0 w-0.5 rounded-[2px] bg-primary"
+    class="fake-caret absolute z-0 w-[.15em] rounded-[.06em] bg-primary"
     bind:this={fakeCaret}
     style="top: calc({caretPosition.top}px); left: {caretPosition.left}px; height: {caretPosition.height}px;"
     spellcheck="false"
@@ -183,12 +183,13 @@
     }
 
     .ql-editor > *::before {
+      font-size: calc(var(--editor-font-size) * 0.7);
       counter-increment: line;
       content: counter(line);
       transform: translateX(-100%);
       width: clamp(20px, calc(2ch * var(--line-no-digits-count)), 10vw) !important;
       padding-right: clamp(10px, calc(0.6ch * var(--line-no-digits-count)), 10vw) !important;
-      @apply absolute left-0 mt-[3px] text-right text-xs text-primary duration-100;
+      @apply absolute left-0 text-right text-primary duration-100;
     }
   </style>
 {/if}