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.

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;
 }