🖊 editor: Override default ctrl+a browser behavior (#456)

Override default ctrl+a browser behavior in lab and playground to select
all editor contents only and not the entire web page.

While at it, make editor highlight a little bit more easily visible.

Fixes: evylang/todo#108
Pull-request: #456

Author: juliaogris

frontend/css/root.css

@@ -43,7 +43,7 @@
   --alert-important: hsl(266deg 100% 86%);
   --alert-warning: hsl(27deg 100% 74%);
   --alert-caution: hsl(359deg 100% 75%);
-  --selection-highlight: hsl(0deg 0% 100% / 15%);
+  --selection-highlight: hsl(0deg 0% 100% / 25%);
 
   color-scheme: dark;
 

frontend/module/editor.js

@@ -65,6 +65,12 @@ export default class Editor {
     this.textarea.addEventListener("keydown", this.handleKeydown)
   }
 
+  selectAll() {
+    this.textarea.selectionStart = 0
+    this.textarea.selectionEnd = this.textarea.value.length - 1
+    this.textarea.focus()
+  }
+
   update(textareaProps) {
     const { value, selectionStart, selectionEnd, errorLines } = textareaProps
     // should be before updating selection otherwise selection will be lost

frontend/play/index.js

@@ -443,6 +443,10 @@ function ctrlEnterListener(e) {
     document.querySelector(".editor textarea").blur()
     handleRun()
   }
+  if ((e.metaKey || e.ctrlKey) && e.key === "a") {
+    e.preventDefault()
+    editor?.selectAll()
+  }
 }
 
 function escListener(e) {