Feat: Added word counter

Muhammed-Rahif · Nov 27, 2024 · 540ff1c · 540ff1c
1 parent 8d7bf33
commit 540ff1c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/src/app.json b/src/app.json
@@ -1,3 +1 @@
-{
-  "version": "1.0.0-3"
-}
+{}
diff --git a/src/lib/components/Editor/Editor.svelte b/src/lib/components/Editor/Editor.svelte
@@ -21,6 +21,7 @@
   let caretLineNo = 1;
   let caretColumnNo = 1;
   let characterCount = 0;
+  let wordCount = 0;
 
   async function setupQuill() {
     quill = new Quill(editorContainer!, {
@@ -64,6 +65,7 @@
       caretLineNo = lines.length;
       caretColumnNo = lines[lines.length - 1].length + 1;
       characterCount = quill.getLength() - 1; // quill.getLength() includes a trailing newline character
+      wordCount = quill.getText().trim().split(/\s+/).filter(word => word).length; // \s+ is RegEx for whitespace characters.
     }
   }
 
@@ -104,6 +106,7 @@
       caretLineNo ||
       caretColumnNo ||
       characterCount ||
+      wordCount ||
       $settings
     ) {
       updateCaretPosition();
@@ -163,7 +166,7 @@
   />
 </div>
 
-<StatusBar {caretLineNo} {caretColumnNo} {characterCount} />
+<StatusBar {caretLineNo} {caretColumnNo} {characterCount} {wordCount} />
 
 <!-- {#if updateScheduled}
   <style>

diff --git a/src/lib/components/StatusBar.svelte b/src/lib/components/StatusBar.svelte
@@ -6,6 +6,7 @@
   export let caretLineNo = 1;
   export let caretColumnNo = 1;
   export let characterCount = 0;
+  export let wordCount = 0;
 
   const inAnimation = {
     duration: 80
@@ -49,6 +50,15 @@
         {characterCount <= 1 ? 'Character' : 'Characters'}
       </span>
 
+      <span class="flex items-center justify-center">
+        {#key wordCount}
+          <span in:slide={inAnimation} class="mr-1 inline-block">
+            {wordCount}
+          </span>
+        {/key}
+        {wordCount <= 1 ? 'Word' : 'Words'}
+      </span>
+
       <span class="ml-auto">
         {$settings.zoom * 100}%
       </span>