Put search UI at top of editor

Also, make max editor size to be 100vh

Hopefully that provides a better UX as it
keeps the search area on the screen.

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/search": "^6.5.6",
     "@codemirror/view": "^6.28.1",
     "@uiw/codemirror-theme-github": "^4.22.2",
     "@uiw/codemirror-theme-monokai": "^4.22.2",

public/css/styles.css

@@ -45,4 +45,8 @@ main {
 .CodeMirror-scroll {
   height: auto !important;
   overflow: visible !important;
+}
+
+.cm-editor {
+  max-height: 100vh;
 }

src/main.ts

@@ -4,6 +4,7 @@ import { monokai } from '@uiw/codemirror-theme-monokai';
 import { githubLight } from '@uiw/codemirror-theme-github';
 import { EditorView } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
+import { search } from '@codemirror/search';
 import { javascript } from '@codemirror/lang-javascript';
 import { basicSetup } from 'codemirror';
 import { Converter } from 'showdown';
@@ -64,6 +65,7 @@ async function makeCodeMirrorEditor(parent: HTMLElement, filename: string) {
       themeConfig.of([getCodeMirrorTheme()]),
       EditorView.lineWrapping,
       javascript(),
+      search({ top: true }),
       readOnly,
     ],
     parent,