Fix to use contenteditable div for individual line styling

public/index.html

@@ -33,7 +33,7 @@
         </div>
         <div id="output">
           <div id="gutter"></div>
-          <textarea id="output-area" class="output-area"></textarea>
+          <div contenteditable="true" id="output-area" class="output-area"></div>
         </div>
       </div>
     </div>
@@ -44,10 +44,13 @@
       const gutter = document.getElementById("gutter");
       const outputArea = document.getElementById("output-area");
 
-      let lineCount = outputArea.value.split('\n').length; // 1 by default even though theres no \n because its splits by \n so its just 1 line
+      let lineCount = getLineCount(); // 1 by default even though theres no \n because its splits by \n so its just 1 line
 
       function getLineCount() {
-        return outputArea.value.split('\n').length;
+        if (outputArea.children.length === 0) {
+          return 1
+        }
+        return outputArea.children.length;
       }
 
       readOnlyCheckbox.addEventListener("change", (event) => {
@@ -56,7 +59,7 @@
 
       function updateGutterLineCount() { // TODO: Refactor so its not slow when theres more
         gutter.innerHTML = ""
-
+        console.log("update gutter line count")
 
         for (let i = 0; i < lineCount; i++) {