feat(frontend): custom search panel

Also improves editor styling (to enable panel styling).

1 files changed, 32 insertions, 0 deletions

diff --git a/subprojects/frontend/src/editor/SearchPanel.ts b/subprojects/frontend/src/editor/SearchPanel.ts
new file mode 100644
index 00000000..c9df41b7
--- /dev/null
+++ b/subprojects/frontend/src/editor/SearchPanel.ts
@@ -0,0 +1,32 @@
+import {
+  type EditorView,
+  type Panel,
+  runScopeHandlers,
+} from '@codemirror/view';
+
+import type SearchPanelStore from './SearchPanelStore';
+
+export default class SearchPanel implements Panel {
+  readonly dom: HTMLDivElement;
+
+  constructor(view: EditorView, store: SearchPanelStore) {
+    this.dom = document.createElement('div');
+    this.dom.id = store.id;
+    this.dom.className = store.panelClass;
+    this.dom.addEventListener(
+      'keydown',
+      (event) => {
+        if (runScopeHandlers(view, event, 'search-panel')) {
+          event.preventDefault();
+        }
+      },
+      {
+        capture: true,
+      },
+    );
+  }
+
+  get top(): boolean {
+    return true;
+  }
+}