feat(frontend): custom search panel

Also improves editor styling (to enable panel styling).

1 files changed, 108 insertions, 0 deletions

diff --git a/subprojects/frontend/src/editor/SearchPanelStore.ts b/subprojects/frontend/src/editor/SearchPanelStore.ts
new file mode 100644
index 00000000..43a571e5
--- /dev/null
+++ b/subprojects/frontend/src/editor/SearchPanelStore.ts
@@ -0,0 +1,108 @@
+import {
+  closeSearchPanel,
+  findNext,
+  findPrevious,
+  getSearchQuery,
+  openSearchPanel,
+  replaceAll,
+  replaceNext,
+  SearchQuery,
+  selectMatches,
+  setSearchQuery,
+} from '@codemirror/search';
+import { action, computed, makeObservable, observable, override } from 'mobx';
+
+import type EditorStore from './EditorStore';
+import PanelStore from './PanelStore';
+
+export default class SearchPanelStore extends PanelStore {
+  searchField: HTMLInputElement | undefined;
+
+  constructor(store: EditorStore) {
+    // Use a custom class name to avoid specificity issues with
+    // CodeMirror `.cm-search.cm-panel` CSS styles.
+    super('refinery-cm-search', openSearchPanel, closeSearchPanel, store);
+    makeObservable(this, {
+      searchField: observable.ref,
+      query: computed,
+      invalidRegexp: computed,
+      open: override,
+      setSearchField: action,
+      updateQuery: action,
+      findNext: action,
+      findPrevious: action,
+      selectMatches: action,
+    });
+  }
+
+  setSearchField(newSearchField: HTMLInputElement | undefined): void {
+    this.searchField = newSearchField;
+    if (this.state) {
+      this.selectSearchField();
+    }
+  }
+
+  get query(): SearchQuery {
+    return getSearchQuery(this.store.state);
+  }
+
+  get invalidRegexp(): boolean {
+    const { search, valid } = this.query;
+    return !valid && search !== '';
+  }
+
+  updateQuery(newQueryOptions: {
+    search?: string;
+    caseSensitive?: boolean;
+    literal?: boolean;
+    regexp?: boolean;
+    replace?: string;
+  }): void {
+    const { search, caseSensitive, literal, regexp, replace } = this.query;
+    const newQuery = new SearchQuery({
+      search,
+      caseSensitive,
+      literal,
+      regexp,
+      replace,
+      ...newQueryOptions,
+      ...(newQueryOptions.regexp === true && { literal: false }),
+      ...(newQueryOptions.literal === true && { regexp: false }),
+    });
+    this.store.dispatch({
+      effects: [setSearchQuery.of(newQuery)],
+    });
+  }
+
+  findNext(): void {
+    this.store.doCommand(findNext);
+  }
+
+  findPrevious(): void {
+    this.store.doCommand(findPrevious);
+  }
+
+  selectMatches(): void {
+    this.store.doCommand(selectMatches);
+  }
+
+  replaceNext(): void {
+    this.store.doCommand(replaceNext);
+  }
+
+  replaceAll(): void {
+    this.store.doCommand(replaceAll);
+  }
+
+  override open(): boolean {
+    return super.open() || this.selectSearchField();
+  }
+
+  private selectSearchField(): boolean {
+    if (this.searchField === undefined) {
+      return false;
+    }
+    this.searchField.select();
+    return true;
+  }
+}