fix(editor): inifinite recursion in editor caret position update

resolves #234
Muhammed-Rahif · Nov 18, 2024 · fe9df2b · fe9df2b
1 parent db17944
commit fe9df2b
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 21 deletions.
diff --git a/src/lib/components/Editor/Editor.css b/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 50ms ease-in-out;
 }
diff --git a/src/lib/components/Editor/Editor.svelte b/src/lib/components/Editor/Editor.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { afterUpdate, onMount, tick } from 'svelte';
+  import { onMount, tick } from 'svelte';
   import throttle from 'lodash.throttle';
   import StatusBar from '@/components/StatusBar.svelte';
   import Quill from 'quill';
@@ -24,10 +24,6 @@
    */
   let updateScheduled = false;
 
-  onMount(async () => {
-    await setupQuill();
-  });
-
   async function setupQuill() {
     quill = new Quill(editorContainer!, {
       formats: [
@@ -55,25 +51,13 @@
     });
 
     await Notpad.editors.setQuill(editor.id, quill);
-
-    for (let e of ['input', 'scroll', 'click', 'keydown', 'focus', 'resize', 'load'])
-      quill.root.addEventListener(e, updateTextAreaInfo);
-    for (let e of ['scroll', 'resize', 'load']) window.addEventListener(e, updateTextAreaInfo);
-
     quill.setContents(Notpad.editors.getContent(editor.id)!);
-
-    updateTextAreaInfo();
-    settings.subscribe(updateTextAreaInfo);
   }
 
-  afterUpdate(() => {
-    updateCaretPosition();
-  });
-
   /**
    * Update line and column numbers.
    */
-  function updateTextAreaInfo() {
+  function updateEditorData() {
     const selection = quill.getSelection();
     if (selection) {
       lineNo = quill.getText().split('\n').length - 1; // quill.getLength() includes a trailing newline character
@@ -87,6 +71,7 @@
 
   // Using requestAnimationFrame for smooth updates
   const updateCaretPosition = throttle(() => {
+    console.count('updateCaretPosition');
     if (!updateScheduled) {
       updateScheduled = true;
       requestAnimationFrame(async () => {
@@ -104,6 +89,51 @@
       });
     }
   });
+
+  $: {
+    if (
+      editorContainer ||
+      quill ||
+      fakeCaret ||
+      lineNo ||
+      caretLineNo ||
+      caretColumnNo ||
+      characterCount ||
+      $settings
+    ) {
+      updateCaretPosition();
+    }
+  }
+
+  $: {
+    // If line numbers are enabled or disabled, update the caret position after a delay
+    // of 300ms to complete the line numbers animated entry or exit.
+    if ($settings.lineNumbers) {
+      (async function () {
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        updateCaretPosition();
+      })();
+    }
+  }
+
+  const updateCaretPosAndEditorData = throttle(async () => {
+    updateEditorData();
+    await tick();
+    updateCaretPosition();
+  }, 100);
+
+  onMount(async () => {
+    await setupQuill();
+
+    for (let e of ['input', 'scroll', 'click', 'keydown', 'focus', 'resize', 'load'])
+      quill.root.addEventListener(e, updateCaretPosAndEditorData);
+    for (let e of ['scroll', 'resize', 'load'])
+      window.addEventListener(e, updateCaretPosAndEditorData);
+
+    updateEditorData();
+    settings.subscribe(updateEditorData);
+    quill.on('editor-change', updateEditorData);
+  });
 </script>
 
 <div class="relative h-full overflow-hidden">