editor.html

<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;
		overflow: hidden;
		height: 100%;
		padding-right: 10px;
		padding-left: 20px;
	}

	.editor-code {
		width: calc(100% - 20px);
		padding-right: 10px;
		padding-left: 10px;
		height: 100%;
		overflow-y: auto;
		/* white-space: pre-wrap; */
		white-space: nowrap;
	}

	.editor-code .line {
		display: block;
	}

	.editor-code .line .string {
		color: #d14;
	}

	.editor-code .line .operator {
		color: gold;
	}

	.editor-code .line .comment {
		color: #999;
		font-style: italic;
	}

	.editor-code .line .number {
		color: pink;
	}

	.editor-code .line .keyword {
		color: #0086b3;
		font-weight: bold;
	}
</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 class=line>صفحه:</div>
		<div class=line> محتوا = ۳۴۵</div>
		<div class=line>تمام</div>
	</div>
</div>

<script>
	const keywords = ['تمام'];
	const ops = ['\\+', '\\-', '\\:', '\\=', '\\.'];
	const commands = ['صفحه', 'قطعه', 'جعبه', 'پاراگراف'];
	const argumentsList = ['منبع', 'مقصد', 'محتوا'];

	const editor = document.querySelector('.editor');
	const editor_code = editor.querySelector('.editor-code');
	const editor_lines = editor.querySelector('.editor-lines');

	const highlight = (code) => {
		// First, handle operators to avoid interfering with other patterns
		const opsReg = `(${ops.join('|')})`;
		const opsRegex = new RegExp(opsReg, 'g');
		code = code.replace(opsRegex, '<span class=operator>$&</span>');

		// Handle strings (single or double quoted)
		code = code.replace(/(["'])(?:(?=(\\?))\2.)*?\1/g, '<span class=string>$&</span>');

		// Handle single-line comments (starting with //)
		code = code.replace(/\/\/[^\n]*/g, '<span class=comment>$&</span>');

		// Handle multi-line comments (/* */)
		code = code.replace(/\/\*[\s\S]*?\*\//g, '<span class=comment>$&</span>');

		// Handle english, persian, arabic numbers
		code = code.replace(/([0-9٠١٢٣٤٥٦٧٨٩۰۱۲۳۴۵۶۷۸۹]+)/g, '<span class=number>$&</span>');

		// Regex for keywords, commands, and arguments (handling Persian/Arabic characters)
		const keywordReg = `(?:^|[^\\w\u0600-\u06FF])(${[...keywords, ...commands, ...argumentsList].join('|')})(?=[^\\w\u0600-\u06FF]|$)`;
		const keywordRegex = new RegExp(keywordReg, 'g');
		code = code.replace(keywordRegex, (match, p1) => {
			// Only wrap the actual keyword and not the surrounding characters
			return match.replace(p1, `<span class=keyword>${p1}</span>`);
		});

		return code;
	};

	const handleBlur = () => {
		editor_code.querySelectorAll('.line').forEach(line => line.classList.remove('active'));
		editor_lines.querySelectorAll('li').forEach(li => li.classList.remove('active'));
	};

	const updateLineNumbers = () => {
		// const selection = window.getSelection();
		// const range = selection.getRangeAt(0);
		// const activeLine = range.startContainer ? range.startContainer.closest('.line') : null;

		editor_code.querySelectorAll('.line').forEach(line => line.classList.remove('active'));
		editor_lines.querySelectorAll('li').forEach(li => li.classList.remove('active'));

		// if (activeLine) {
		// 	activeLine.classList.add('active');
		// 
		// 	const lineIndex = Array.from(editor_code.children).indexOf(activeLine);
		// 	const lineNumber = editor_lines.children[lineIndex];
		// 	if (lineNumber) {
		// 		lineNumber.classList.add('active');
		// 	}
		// }

		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(/^\s*/)[0].length;

		return leadingSpaces;
	};

	const handleKeyTab = (event) => {
		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);
	};

	const scrollIntoViewIfNeeded = (element) => {
		const rect = element.getBoundingClientRect();
		const isVisible = (
			rect.top >= 0 &&
			rect.left >= 0 &&
			rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
			rect.right <= (window.innerWidth || document.documentElement.clientWidth)
		);

		if (!isVisible) {
			element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
		}
	};

	const handleKeyLine = (event) => {
		const selection = window.getSelection();
		const range = selection.getRangeAt(0);

		const newLine = document.createElement('div');
		newLine.classList.add('line');

		newLine.innerHTML = '<br>';
		// newLine.innerHTML = '&#8203;';

		let currentLine = range.startContainer.parentElement;

		if (currentLine) {
			console.log("Now CurrentLine: ", currentLine);
			let isCurrentLineEditor = false;
			while (currentLine && !currentLine.classList.contains('line')) {
				if (currentLine.classList.contains('editor-code')) {
					isCurrentLineEditor = true;
					break;
				}

				currentLine = currentLine.parentElement;
			}

			console.log("CurrentLine: ", currentLine);
			if (currentLine) {
				if (isCurrentLineEditor) {
					currentLine.appendChild(newLine);
				}
				else {
					currentLine.parentElement.insertBefore(newLine, currentLine.nextSibling);
				}

				scrollIntoViewIfNeeded(newLine);

				const newRange = document.createRange();
				// newRange.setStart(newLine, 1);
				// newRange.setEnd(newLine, 1);
				// or?
				newRange.setStart(newLine, 0);
				newRange.setEnd(newLine, 0);

				const newSelection = window.getSelection();
				newSelection.removeAllRanges();
				newSelection.addRange(newRange);
			}
		}
	};

	const handleKey = (event) => {
		if (event.key === 'Enter') {
			event.preventDefault();

			handleKeyLine();

			updateLineNumbers();
		}
		else if (event.key === 'Tab') {
			event.preventDefault();

			handleKeyTab();
		}
	};

	const stripHTML = (string) => {
		const doc = new DOMParser().parseFromString(string, 'text/html');
		const textLines = [];
		doc.body.childNodes.forEach((childNode) => {
			textLines.push(childNode.textContent || '');
		});

		return textLines.join('<br>');
	};

	// const saveCursorPosition = () => {
	// 	const selection = window.getSelection();

	// 	if (selection.rangeCount > 0) {
	// 		return selection.getRangeAt(0).cloneRange();
	// 	}

	// 	return null;
	// };

	// const restoreCursorPosition = (range) => {
	// 	if (range) {
	// 		const selection = window.getSelection();

	// 		selection.removeAllRanges();
	// 		selection.addRange(range);
	// 	}
	// };

	// const getCursorPosition = (editor) => {
	// 	const selection = window.getSelection();
	// 	if (!selection.rangeCount) return { lineIndex: null, offset: 0 };

	// 	const range = selection.getRangeAt(0);
	// 	const line = range.startContainer.parentElement;
	// 	const lineIndex = Array.from(editor.querySelectorAll(".line")).indexOf(line);
	// 	const offset = range.startOffset;

	// 	return { lineIndex, offset };
	// };

	// const setCursorPosition = (editor, lineIndex, offset) => {
	// 	const lines = editor.querySelectorAll(".line");
	// 	if (lineIndex >= 0 && lineIndex < lines.length) {
	// 		const line = lines[lineIndex];
	// 		const range = document.createRange();
	// 		const selection = window.getSelection();

	// 		const textNode = line.firstChild || document.createTextNode('');
	// 		range.setStart(textNode, offset);
	// 		range.collapse(true);

	// 		selection.removeAllRanges();
	// 		selection.addRange(range);
	// 	}
	// };

	const saveCursorPosition = () => {
		const selection = window.getSelection();
		if (selection.rangeCount > 0) {
			return selection.getRangeAt(0).cloneRange();
		}
		return null;
	};

	const restoreCursorPosition = (range) => {
		if (range) {
			const selection = window.getSelection();
			selection.removeAllRanges();
			selection.addRange(range);
		}
	};

	const getCaretPosition = () => {
		const selection = document.getSelection();

		if (!selection || !editor_code) return 0;
		
		selection.collapseToEnd();

		const range = selection.getRangeAt(0);
		const clone = range.cloneRange();

		clone.selectNodeContents(editor_code);
		clone.setEnd(range.startContainer, range.startOffset);

		console.log("clone:", clone, clone.toString(), clone.toString().length);
		return clone.toString().length;
	}

	const highlightCodeInLines = () => {
		console.log("highlightCodeInLines");
		console.log(getCaretPosition());
		const lines = editor_code.querySelectorAll(".line");

		// console.log("saveCursorPosition");
		const cursorRange = saveCursorPosition();
		console.log("cursorRange: ", cursorRange);

		// let cursorPos = { line: null, offset: 0 };
		// let cursorPos = getCursorPosition(editor);

		lines.forEach((line) => {
			if (line.textContent === "") {
				h = "<br>";
			}
			else {
				const code = line.textContent;
				// console.log("Code: ", code);
				const h = highlight(code);

				if (h !== line.textContent) {
					// if (line === cursorPos.line) {
					// 	cursorPos.offset = cursorPos.offset < highlightedCode.length ? cursorPos.offset : highlightedCode.length;
					// }

					line.innerHTML = h;
				}
			}
		});

		// console.log("restoreCursorPosition");
		// restoreCursorPosition(cursorRange);

		// if (cursorPos.lineIndex !== null) {
		// 	setCursorPosition(editor, cursorPos.lineIndex, cursorPos.offset);
		// }
		// if (cursorPos.line) {
		// 	setCursorPosition(cursorPos.line, cursorPos.offset);
		// }

		updateLineNumbers();
	};

	const synchronizeScroll = () => {
		editor_lines.scrollTop = editor_code.scrollTop;
	};

	const handlePaste = (event) => {
		event.preventDefault();

		const text = (event.clipboardData || window.clipboardData).getData('text');

		document.execCommand('insertText', false, text);
	};

	const handleFocus = () => {
		// updateLineNumbers();

		// const selection = window.getSelection();
		// const activeLine = selection.anchorNode ? selection.anchorNode.closest('.line') : null;

		// if (activeLine) {
		// 	activeLine.classList.add('active');
		// }
	};

	editor_code.addEventListener('paste', handlePaste);
	editor_code.addEventListener('scroll', synchronizeScroll);
	editor_code.addEventListener('focus', handleFocus);
	editor_code.addEventListener('blur', handleBlur);
	editor_code.addEventListener('keydown', handleKey);
	editor_code.addEventListener('input', highlightCodeInLines);

	// editor_code.innerHTML = '<div class="line"><br></div>';
	editor_code.focus();

	highlightCodeInLines();
</script>