working on editor

SalamLang · Sep 15, 2024 · e373844 · e373844
1 parent 8c0d561
commit e373844
Showing 1 changed file with 77 additions and 53 deletions.
diff --git a/editor.html b/editor.html
@@ -23,14 +23,23 @@
         color: #6c6c6c;
         border-right: 1px solid #ddd;
         list-style: none;
+        overflow: hidden;
+        height: 100%;
+        padding-right: 10px;
+        padding-left: 20px;
     }
 
     .editor-code {
-        width: 100%;
+        width: calc(100% - 20px);
+        padding-right: 10px;
+        padding-left: 10px;
         height: 100%;
-        /* color: white; */
-        /* background-color: black; */
         overflow-y: auto;
+        white-space: pre-wrap;
+    }
+
+    .editor-code .line {
+        display: block;
     }
 </style>
 
@@ -65,81 +74,96 @@
 
     const getLeadingSpaces = (lineElement) => {
         const lineText = lineElement.textContent;
-        const leadingSpaces = lineText.match(/^\u00a0*/)[0].length;
+        const leadingSpaces = lineText.match(/^\s*/)[0].length;
         return leadingSpaces;
     };
 
-    const handleTab = (event) => {
-        console.log(event.key);
+    const handleKeyTab = (event) => {
+        const selection = window.getSelection();
+        const range = selection.getRangeAt(0);
 
-        if (event.key === 'Enter') {
-            event.preventDefault();
+        const tabNode = document.createTextNode('\u00a0\u00a0\u00a0\u00a0');
 
-            const selection = window.getSelection();
-            const range = selection.getRangeAt(0);
+        range.insertNode(tabNode);
 
-            const newLine = document.createElement('div');
-            newLine.classList.add('line');
-            newLine.innerHTML = '&#8203;';
+        range.setStartAfter(tabNode);
+        range.setEndAfter(tabNode);
 
-            const currentLine = range.startContainer.parentElement;
-            console.log("currentLine: ", currentLine);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    };
+
+    const handleKeyLine = (event) => {
+        const selection = window.getSelection();
+        const range = selection.getRangeAt(0);
+
+        const newLine = document.createElement('div');
+        newLine.classList.add('line');
+
+        newLine.innerHTML = '&#8203;';
+
+        // let previousLine = range.startContainer.parentElement.previousElementSibling;
+        // if (!previousLine || !previousLine.classList.contains('line')) {
+        //     previousLine = range.startContainer.parentElement;
+        // }
+        // if (previousLine) {
+        //     const leadingSpaces = getLeadingSpaces(previousLine);
+        //     newLine.innerHTML = '\u00a0'.repeat(leadingSpaces);
+        // } else {
+        //     newLine.innerHTML = '&#8203;';
+        // }
+
+        const currentLine = range.startContainer.parentElement;
+
+        if (currentLine) {
+            if (currentLine.classList.contains('line')) {
+                currentLine.parentElement.insertBefore(newLine, currentLine.nextSibling);
+            }
+            else {
+                currentLine.appendChild(newLine);
+            }
 
-            if (currentLine) {
-                if (currentLine.classList.contains('line')) {
-                    console.log("is line");
+            newLine.scrollIntoView({ behavior: 'smooth', block: 'center' });
 
-                    currentLine.parentElement.insertBefore(newLine, currentLine.nextSibling);
-                }
-                else {
-                    console.log("is not line");
+            console.log("newLine: ", newLine);
 
-                    currentLine.appendChild(newLine);
-                }
+            const newRange = document.createRange();
+            // set range at end of newLine
+            newRange.setStart(newLine, 1);
+            newRange.setEnd(newLine, 1);
 
-                const newRange = document.createRange();
-                newRange.setStart(newLine, 0);
-                newRange.setEnd(newLine, 0);
+            const newSelection = window.getSelection();
+            newSelection.removeAllRanges();
+            newSelection.addRange(newRange);
+        }
+    };
 
-                const newSelection = window.getSelection();
-                newSelection.removeAllRanges();
-                newSelection.addRange(newRange);
-            }
+    const handleKey = (event) => {
+        console.log(event.key);
 
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            handleKeyLine();
             updateLineNumbers();
         }
         else if (event.key === 'Tab') {
             event.preventDefault();
-
-            const selection = window.getSelection();
-            const range = selection.getRangeAt(0);
-
-            const tabNode = document.createTextNode('\u00a0\u00a0\u00a0\u00a0');
-
-            range.insertNode(tabNode);
-
-            range.setStartAfter(tabNode);
-            range.setEndAfter(tabNode);
-
-            selection.removeAllRanges();
-            selection.addRange(range);
-
+            handleKeyTab();
             updateLineNumbers();
         }
     };
 
     const splitLines = () => {
-        // const lines = editor_code.querySelectorAll('.line');
-        // lines.forEach((line) => {
-        //     const lineText = line.textContent;
-        //     const lineTextParts = lineText.split('\n');
-        //     line.innerHTML = lineTextParts.join('<br>');
-        // });
-
         updateLineNumbers();
     };
 
-    editor_code.addEventListener('keydown', handleTab);
+    const synchronizeScroll = () => {
+        editor_lines.scrollTop = editor_code.scrollTop;
+    };
+
+    editor_code.addEventListener('scroll', synchronizeScroll);
+    editor_code.addEventListener('keydown', handleKey);
     editor_code.addEventListener('input', splitLines);
     editor_code.innerHTML = '<div class="line">&#8203;</div>';
+    splitLines();
 </script>