From c2c9d913b6ec90be01a2803709c5c032a7be7f76 Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Thu, 10 Oct 2024 13:03:53 +0200
Subject: [PATCH] Remove line highlighting and cursor from code area

This commit hides the highlight on selected line (active line and gutter
line indicators) and the user cursor before user interacts with the code
area.

This gives cleaner look to initial UI and the behavior is similar to how
modern editors like VSCode acts when a code is shown for the first time.

When code is generated automatically, generated code is already
highlighted with a custom marker. The indication of a specific line is
not necessary by default and clutter the view.
---
 .../components/Code/TheCodeArea.vue           | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/presentation/components/Code/TheCodeArea.vue b/src/presentation/components/Code/TheCodeArea.vue
index 93edd8845..43943f6ae 100644
--- a/src/presentation/components/Code/TheCodeArea.vue
+++ b/src/presentation/components/Code/TheCodeArea.vue
@@ -159,8 +159,33 @@ function initializeEditor(
   editor.setTheme(`ace/theme/${theme}`);
   editor.setReadOnly(true);
   editor.setAutoScrollEditorIntoView(true);
-  editor.setShowPrintMargin(false); // hides vertical line
-  editor.getSession().setUseWrapMode(true); // So code is readable on mobile
+  editor.setShowPrintMargin(false); // Hide the vertical line
+  editor.getSession().setUseWrapMode(true); // Make code readable on mobile
+  hideActiveLineAndCursorUntilInteraction(editor);
+  return editor;
+}
+
+function hideActiveLineAndCursorUntilInteraction(editor: ace.Ace.Editor) {
+  hideActiveLineAndCursor(editor);
+  editor.session.on('change', () => {
+    editor.session.selection.clearSelection();
+    hideActiveLineAndCursor(editor);
+  });
+  editor.session.selection.on('changeSelection', () => {
+    showActiveLineAndCursor(editor);
+  });
+}
+
+function hideActiveLineAndCursor(editor: ace.Ace.Editor) {
+  editor.setHighlightGutterLine(false); // Remove highlighting on line number column
+  editor.setHighlightActiveLine(false); // Remove highlighting throughout the line
+  editor.renderer.$cursorLayer.element.style.display = 'none'; // hide cursor
+}
+
+function showActiveLineAndCursor(editor: ace.Ace.Editor) {
+  editor.setHighlightGutterLine(true); // Show highlighting on line number column
+  editor.setHighlightActiveLine(true); // Show highlighting throughout the line
+  editor.renderer.$cursorLayer.element.style.display = ''; // Show cursor
   return editor;
 }