From 540ff1c85b4f0d28f81ec3a0244224560228b159 Mon Sep 17 00:00:00 2001
From: 4rnv <arnavsdandekar@gmail.com>
Date: Wed, 27 Nov 2024 20:41:17 +0530
Subject: [PATCH] Feat: Added word counter

---
 src/app.json                            |  4 +---
 src/lib/components/Editor/Editor.svelte |  5 ++++-
 src/lib/components/StatusBar.svelte     | 10 ++++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app.json b/src/app.json
index e20839d..0967ef4 100644
--- 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
index 0735411..9ccb6f1 100644
--- 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
index 80c0124..9fcf4cf 100644
--- 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>