Use editable div for line numbers and Handle tab in it.

bot2x · Feb 26, 2024 · 4d49357 · 4d49357
1 parent 3da0aab
commit 4d49357
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 65 deletions.
diff --git a/js/layoutcontrols/tabControls.js b/js/layoutcontrols/tabControls.js
@@ -66,12 +66,13 @@ function TabController(numTabs=0, tablayoutId=0) {
                 }
             }
 
-            // var text_box = tabEditorRef.editorContainer.getElementsByClassName('editor');
-            // var line_numbers = tabEditorRef.editorContainer.getElementsByClassName('line-numbers');
+            var text_box = tabEditorRef.editorContainer.getElementsByClassName('editor');
+            var line_numbers = tabEditorRef.editorContainer.getElementsByClassName('line-numbers');
 
-            // for (let i = 0; i < text_box.length; i++) {
-            //     handleTabEvents.lineNumberHandler(text_box[i], line_numbers[i]);
-            // }
+            // Add handler for line numbers and Tab input.
+            Array.from(text_box).forEach((textBox, index) => {
+                handleTabEvents.lineNumberAndTabHandler(textBox, line_numbers[index]);
+            });
 
 
         }
@@ -251,26 +252,44 @@ function tabEventHandlers () {
     }
 
 
-    const lineNumberHandler = (text_element,line_number_element) => {
-        console.log("line number handler got called.");
-        text_element.style.minHeight = text_element.clientHeight + 'px';
-        var currentHeight = text_element.clientHeight;
-        var lineHeight = currentHeight;
-
-        text_element.addEventListener('input', function() {
-            if (text_element.clientHeight !== currentHeight) {
-            currentHeight = text_element.clientHeight;
-            var lines = currentHeight / lineHeight;
-            var nums = line_number_element;
-            console.log("nums",nums);
-            nums.innerHTML = '';
-            for (var i = 1; i < lines + 1; i++) {
-                var span = document.createElement('span');
-                span.textContent = i;
-                nums.appendChild(span);
+    const lineNumberAndTabHandler = (text_element,line_number_element) => {
+        var num_of_lines = 1;
+        text_element.style.minHeight = parseFloat(getComputedStyle(text_element).lineHeight) + 'px';
+        text_element.addEventListener('input', function(event) {
+            var lineHeight = parseFloat(getComputedStyle(text_element).lineHeight);
+            var currentHeight = text_element.scrollHeight;
+            var lines = parseInt(currentHeight / lineHeight);
+
+            // Update line number only if there is a change in number of line numbers
+            if (lines !== num_of_lines) {
+                num_of_lines = lines;
+                line_number_element.innerHTML = '';
+                for (var j = 1; j < lines + 1; j++) {
+                    var span = document.createElement('span');
+                    span.textContent = j;
+                    line_number_element.appendChild(span);
+                }
             }
+
+        });
+
+        // Handle Tab key press in the text editor
+        text_element.addEventListener('keydown', function(e) {
+            if (e.keyCode === 9) {
+                e.preventDefault();
+                // Insert a tab character
+                const selection = window.getSelection();
+                const tabNode = document.createTextNode('\t');
+                const range = selection.getRangeAt(0);
+                range.deleteContents();
+                range.insertNode(tabNode);
+                range.setStartAfter(tabNode);
+                range.setEndAfter(tabNode);
+                selection.removeAllRanges();
+                selection.addRange(range);
             }
         });
+        text_element.style.whiteSpace = 'pre-wrap';
 
 
     }
@@ -281,6 +300,6 @@ function tabEventHandlers () {
         openTabHandler,
         addTabHandler,
         closeTabHandler,
-        lineNumberHandler
+        lineNumberAndTabHandler
     }
 }
diff --git a/js/utils/tabFunctions.js b/js/utils/tabFunctions.js
@@ -44,7 +44,7 @@ function getTabDivPair (tabN, tablayoutId) {
     // Create a div for linenumbers with the class "line-numbers"
     var lineNumbersDiv = document.createElement("div");
     lineNumbersDiv.classList.add("line-numbers");
-    lineNumbersDiv.innerHTML = '<span></span>';
+    lineNumbersDiv.innerHTML = '<span>1</span>';
 
     // Create a editable div element
     var text_box = document.createElement("div");
@@ -56,25 +56,6 @@ function getTabDivPair (tabN, tablayoutId) {
     div_tab.appendChild(lineNumbersDiv);
     div_tab.appendChild(text_box);
 
-    text_box.style.minHeight = text_box.clientHeight + 'px';
-    var currentHeight = text_box.clientHeight;
-    var lineHeight = currentHeight;
-
-    text_box.addEventListener('input', function() {
-        if (text_box.clientHeight !== currentHeight) {
-        currentHeight = text_box.clientHeight;
-        var lines = currentHeight / lineHeight;
-        var nums = lineNumbersDiv;
-        console.log("nums",nums);
-        nums.innerHTML = '';
-        for (var i = 1; i < lines + 1; i++) {
-            var span = document.createElement('span');
-            span.textContent = i;
-            nums.appendChild(span);
-        }
-        }
-    });
-
     // let div_tab = `<div id="file${fileNum}" class="tabcontent">Start typings ..... </div>`
     let button_tab = document.createElement("button");
     button_tab.id = `layout${tablayoutId}.tab-file${tabN}`;

diff --git a/styles.css b/styles.css
@@ -86,33 +86,23 @@ body {
 }
 
 .line-numbers {
-    width: 20px;
+    display: flex;
+    flex-direction: column;
+    /* width: 20px; */
     text-align: right;
     height: 9999px;
-    font-size: 15px;
-  }
-
-  .line-numbers span {
-    counter-increment:  linenumber;
+    font-size: 18px;
+    color:#999;
+    line-height: 25px;
   }
 
-  .line-numbers span::before {
-    content: counter(linenumber);
-    display: block;
-    color: #506882;
-  }
-
-textarea {
-    height: 9999px;
-    line-height: 21px;
-    overflow-y: auto;
-    padding: 0;
-    border: 0;
-    background: #282a3a;
-    color: #FFF;
-    min-width: 500px;
+  .editor{
+    height: 0px;
+    width: 100%;
+    border: none;
+    font-size: 20px;
+    line-height: 25px;
     outline: none;
-    resize: none;
   }
 
 .tablink {