Fix small view

src-web/components/Editor/Editor.css

@@ -5,7 +5,8 @@
         @apply relative;
 
         .cm-editor {
-            @apply inset-0;
+            @apply inset-0 absolute;
+            position: absolute !important;
         }
     }
 }
@@ -25,10 +26,6 @@
         @apply text-placeholder;
     }
 
-    .cm-scroller {
-        @apply font-mono text-[0.8rem];
-    }
-
     .cm-gutters {
         @apply border-0 text-gray-500 text-opacity-30;
 
@@ -55,8 +52,9 @@
     }
 
     .cm-scroller {
+        @apply font-mono flex text-[0.8rem];
+        align-items: center !important;
         overflow: hidden !important;
-        font-family: inherit;
     }
 
     .cm-line {
@@ -67,25 +65,13 @@
 .cm-multiline {
     .cm-editor {
         @apply h-full;
-        position: absolute !important;
     }
 
     .cm-scroller {
-        @apply rounded;
+        @apply font-mono text-[0.75rem];
     }
 }
 
-
-.cm-multiline .cm-editor.cm-focused .cm-scroller {
-    /* Active border state if we want it */
-    /*box-shadow: 0 0 0 1px hsl(var(--color-blue-400)/0.4);*/
-}
-
-.cm-singleline .cm-editor .cm-scroller {
-    @apply flex;
-    align-items: center !important;
-}
-
 .cm-editor .cm-gutterElement {
     transition: color var(--transition-duration);
 }

src-web/components/Editor/Editor.tsx

@@ -149,11 +149,15 @@ function getExtensions({
     ...(ext ? [ext] : []),
     ...(placeholder ? [placeholderExt(placeholder)] : []),
 
-    // Handle onSubmit
     ...(singleLine
       ? [
           EditorView.domEventHandlers({
+            focus: (e, view) => {
+              // select all text on focus, like a regular input does
+              view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
+            },
             keydown: (e) => {
+              // Submit nearest form on enter if there is one
               if (e.key === 'Enter') {
                 const el = e.currentTarget as HTMLElement;
                 const form = el.closest('form');
@@ -163,6 +167,16 @@ function getExtensions({
           }),
         ]
       : []),
+
+    // Clear selection on blur
+    EditorView.domEventHandlers({
+      blur: (e, view) => {
+        setTimeout(() => {
+          view.dispatch({ selection: { anchor: 0, head: 0 } });
+        }, 100);
+      },
+    }),
+
     // Handle onChange
     EditorView.updateListener.of((update) => {
       if (typeof onChange === 'function' && update.docChanged) {