From 44fb2d92e81ab1227ef8cde4fc6a6547da3b3f5f Mon Sep 17 00:00:00 2001
From: Dinesh Kumar Sutihar <dineshsutihar9@gmail.com>
Date: Wed, 2 Oct 2024 14:47:44 +0530
Subject: [PATCH 1/2] feat: add real-time character counter for text box

---
 index.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/index.html b/index.html
index 482d4ed99..1099bc7bc 100644
--- a/index.html
+++ b/index.html
@@ -57,6 +57,9 @@ <h2>Have a play.</h2>
 				<div id="editor" class="bypass" style="width: 49%;"></div>
 
 				<div class="controls" style="width: 49%;">
+
+					<p id="charCount">Characters: <span></span></p>
+
 					<div class="pull-right">
 						<!--<a href="#" class="btn btn-primary">Download Your Code</a>-->
 						<a href="#" class="btn btn-primary download-pdf">Download PDF</a>
@@ -102,5 +105,24 @@ <h2>Have a play.</h2>
 		<!-- Scripts in development mode -->
 		<script type="text/javascript" src="./examples/js/pdfobject.min.js"></script>
 		<script type="text/javascript" src="./examples/js/editor.js"></script>
+
+		<!-- Character Count Updater -->
+		<script>
+			$(document).ready(function() {
+				const $editor = $('#editor');
+				const $charCount = $('#charCount span');
+				const $templateSelector = ace.edit("editor").getSession();
+				const initialCount = 51; // Initial Default Count in the editor
+			
+				function updateCharCount() {
+					const charCount = $editor.text().length - initialCount;
+					$charCount.text(charCount);
+				}
+			
+				$(window).on('load', updateCharCount);
+				$editor.on('keyup', updateCharCount);
+				$templateSelector.on('change', updateCharCount);
+			});
+		</script>
 	</body>
 </html>

From bd8703308a1fdb26d19815c06765ee02064e9954 Mon Sep 17 00:00:00 2001
From: Dinesh Kumar Sutihar <dineshsutihar9@gmail.com>
Date: Wed, 2 Oct 2024 19:37:19 +0530
Subject: [PATCH 2/2] fix: refactor the code and remove new line form char
 count

---
 index.html | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 1099bc7bc..defee070b 100644
--- a/index.html
+++ b/index.html
@@ -58,7 +58,7 @@ <h2>Have a play.</h2>
 
 				<div class="controls" style="width: 49%;">
 
-					<p id="charCount">Characters: <span></span></p>
+					<p id="charCount">Characters: <span>0</span></p>
 
 					<div class="pull-right">
 						<!--<a href="#" class="btn btn-primary">Download Your Code</a>-->
@@ -106,22 +106,20 @@ <h2>Have a play.</h2>
 		<script type="text/javascript" src="./examples/js/pdfobject.min.js"></script>
 		<script type="text/javascript" src="./examples/js/editor.js"></script>
 
-		<!-- Character Count Updater -->
+		<!-- Character Count -->
 		<script>
 			$(document).ready(function() {
-				const $editor = $('#editor');
-				const $charCount = $('#charCount span');
-				const $templateSelector = ace.edit("editor").getSession();
-				const initialCount = 51; // Initial Default Count in the editor
-			
-				function updateCharCount() {
-					const charCount = $editor.text().length - initialCount;
-					$charCount.text(charCount);
+				var editor = ace.edit("editor");
+				
+				function countCharacters() {
+					var text = editor.getValue();
+					var textWithoutNewlines = text.replace(/(\r\n|\n|\r)/g, ''); 
+					var count = textWithoutNewlines.length;
+					$('#charCount span').text(count);
 				}
-			
-				$(window).on('load', updateCharCount);
-				$editor.on('keyup', updateCharCount);
-				$templateSelector.on('change', updateCharCount);
+
+				editor.getSession().on('change', countCharacters);
+				countCharacters();
 			});
 		</script>
 	</body>