working on editor

editor.html

@@ -0,0 +1,145 @@
+<style>
+    * {
+        padding: 0;
+        margin: 0;
+    }
+
+    .editor {
+        direction: rtl;
+        text-align: right;
+        width: 100%;
+        height: 100vh;
+        display: flex;
+        flex-direction: row;
+        line-height: 1.5;
+        font-size: 1.5rem;
+        font-family: sans-serif;
+    }
+
+    .editor-lines {
+        width: auto;
+        min-width: 20px;
+        background-color: #f5f5f5;
+        color: #6c6c6c;
+        border-right: 1px solid #ddd;
+        list-style: none;
+    }
+
+    .editor-code {
+        width: 100%;
+        height: 100%;
+        /* color: white; */
+        /* background-color: black; */
+        overflow-y: auto;
+    }
+</style>
+
+<div class="editor">
+    <div class="editor-lines">
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+    </div>
+    <div contenteditable="true" class="editor-code"></div>
+</div>
+
+<script>
+    const editor = document.querySelector('.editor');
+    const editor_code = editor.querySelector('.editor-code');
+    const editor_lines = editor.querySelector('.editor-lines');
+
+    const updateLineNumbers = () => {
+        const lines = editor_code.querySelectorAll('.line');
+        editor_lines.innerHTML = '';
+
+        lines.forEach((_, index) => {
+            const lineItem = document.createElement('li');
+            lineItem.textContent = index + 1;
+            editor_lines.appendChild(lineItem);
+        });
+    };
+
+    const getLeadingSpaces = (lineElement) => {
+        const lineText = lineElement.textContent;
+        const leadingSpaces = lineText.match(/^\u00a0*/)[0].length;
+        return leadingSpaces;
+    };
+
+    const handleTab = (event) => {
+        console.log(event.key);
+
+        if (event.key === 'Enter') {
+            event.preventDefault();
+
+            const selection = window.getSelection();
+            const range = selection.getRangeAt(0);
+
+            const newLine = document.createElement('div');
+            newLine.classList.add('line');
+            newLine.innerHTML = '&#8203;';
+
+            const currentLine = range.startContainer.parentElement;
+            console.log("currentLine: ", currentLine);
+
+            if (currentLine) {
+                if (currentLine.classList.contains('line')) {
+                    console.log("is line");
+
+                    currentLine.parentElement.insertBefore(newLine, currentLine.nextSibling);
+                }
+                else {
+                    console.log("is not line");
+
+                    currentLine.appendChild(newLine);
+                }
+
+                const newRange = document.createRange();
+                newRange.setStart(newLine, 0);
+                newRange.setEnd(newLine, 0);
+
+                const newSelection = window.getSelection();
+                newSelection.removeAllRanges();
+                newSelection.addRange(newRange);
+            }
+
+            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);
+
+            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);
+    editor_code.addEventListener('input', splitLines);
+    editor_code.innerHTML = '<div class="line">&#8203;</div>';
+</script>

salam-online.html

@@ -128,7 +128,11 @@
 	</header>
 
 	<!-- Output -->
-	<textarea class="code"></textarea>
+	<div contenteditable="" class="code">
+		<span style="background-color: yellow;">function</span> myFunc() {
+		<span style="background-color: yellow;">return</span> 42;
+		}
+	</div>
 	<iframe class="iframe"></iframe>
 	<pre class="output"></pre>
 	<pre class="error"></pre>

script/script.js

@@ -1,5 +1,6 @@
 // Elements
 const elm_code = document.querySelector('.code');
+const elm_highlighte = document.querySelector('.highlighted-code');
 const elm_execute = document.querySelector('.execute');
 const elm_output = document.querySelector('.output');
 const elm_error = document.querySelector('.error');
@@ -27,6 +28,7 @@ const DEFAULT_CODE = `صفحه:
 	محتوا = «<سلام دنیا> زبان سلام»
 	اندازه فونت = ۱۰۰
 تمام`;
+const keywords = ['صفحه', 'قطعه', 'جعبه', 'پاراگراف', 'تمام'];
 
 // Variables
 let token;
@@ -270,8 +272,8 @@ const runSalam = (showOutput) => {
 		return;
 	}
 
-	const code = elm_code.value.toString().trim();
-	if (!code) {
+	const rawCode = elm_code.textContent || elm_code.innerText;
+	if (!rawCode) {
 		elm_error.innerHTML = '';
 		elm_output.innerHTML = '';
 
@@ -286,7 +288,7 @@ const runSalam = (showOutput) => {
 		return;
 	}
 
-	const arguments = ['code', code];
+	const arguments = ['code', rawCode];
 
 	captureOutput(showOutput, arguments);
 };
@@ -368,6 +370,16 @@ const save_code = () => {
 	});
 };
 
+const highlightCode = (code) => {
+	const highlightedText = code.replace(
+		new RegExp(`\\b(${keywords.join('|')})\\b`, 'g'),
+		'<span style="background-color: yellow;">$1</span>'
+	);
+	console.log("highlightCode", code, keywords, highlightedText);
+
+	elm_highlighte.innerHTML = highlightedText;
+};
+
 // Events
 elm_execute.addEventListener('click', () => {
 	runSalam(true);
@@ -387,7 +399,11 @@ elm_code.addEventListener('keydown', (event) => {
 });
 
 elm_code.addEventListener("input", () => {
-	localStorage.setItem("cache-code", elm_code.value.toString().trim());
+	const inputText = elm_code.value.toString().trim();
+
+	highlightCode(inputText);
+
+	localStorage.setItem("cache-code", inputText);
 
 	if (toggleStatus === 1) {
 		runSalam(false);
@@ -577,11 +593,11 @@ window.addEventListener('load', () => {
 });
 
 // Cache
-if ('serviceWorker' in navigator) {
-	navigator.serviceWorker.register('/script/service-worker.js').then(() => {
-		console.log('Service Worker Registered');
-	})
-		.catch(error => {
-			console.log('Service Worker Registration Failed:', error);
-		});
-}
+// if ('serviceWorker' in navigator) {
+// 	navigator.serviceWorker.register('/script/service-worker.js').then(() => {
+// 		console.log('Service Worker Registered');
+// 	})
+// 		.catch(error => {
+// 			console.log('Service Worker Registration Failed:', error);
+// 		});
+// }

style/style.css

@@ -92,6 +92,10 @@ button:hover {
 	resize: none;
 }
 
+.highlighted-code {
+	background-color: white;
+}
+
 .execute {
 	min-width: 50px;
 	padding-inline: 10px;