@marimo-team/frontend 0.14.18-dev4 → 0.14.18-dev41

package/src/core/codemirror/find-replace/extension.ts

@@ -0,0 +1,41 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import {
+  highlightSelectionMatches,
+  selectNextOccurrence,
+} from "@codemirror/search";
+import { keymap } from "@codemirror/view";
+import type { HotkeyProvider } from "@/core/hotkeys/hotkeys";
+import {
+  highlightTheme,
+  searchHighlighter,
+  searchState,
+} from "./search-highlight";
+import { closeFindReplacePanel, openFindReplacePanel } from "./state";
+
+export function findReplaceBundle(hotkeys: HotkeyProvider) {
+  return [
+    keymap.of([
+      {
+        key: "Escape",
+        // This is needed for Vim to go back to normal mode
+        preventDefault: false,
+        run: closeFindReplacePanel,
+      },
+      {
+        key: hotkeys.getHotkey("cell.selectNextOccurrence").key,
+        preventDefault: true,
+        run: selectNextOccurrence,
+      },
+      {
+        key: hotkeys.getHotkey("cell.findAndReplace").key,
+        preventDefault: true,
+        run: openFindReplacePanel,
+      },
+    ]),
+    highlightSelectionMatches(),
+    searchHighlighter,
+    searchState,
+    highlightTheme,
+  ];
+}

package/src/core/codemirror/find-replace/navigate.ts

@@ -0,0 +1,221 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { SearchQuery } from "@codemirror/search";
+import { EditorSelection } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { getAllEditorViews } from "@/core/cells/cells";
+import { store } from "@/core/state/jotai";
+import { asQueryCreator, type QueryType } from "./query";
+import { findReplaceAtom } from "./state";
+
+function searchCommand<T>(
+  f: (state: { query: QueryType; search: SearchQuery }) => T,
+) {
+  return () => {
+    const state = store.get(findReplaceAtom);
+    const search = new SearchQuery({
+      search: state.findText,
+      caseSensitive: state.caseSensitive,
+      regexp: state.regexp,
+      replace: state.replaceText,
+      wholeWord: state.wholeWord,
+    });
+    return search.valid
+      ? f({ query: asQueryCreator(search).create(), search })
+      : false;
+  };
+}
+
+/**
+ * Move the selection to the first match (next or previous) after the global selection.
+ * Will wrap around to the start of the document when it reaches the end.
+ *
+ * This is a modified version of the original findNext/findPrev function,
+ * that searches through all views, instead of just the current one.
+ */
+const findInDirection = (direction: "next" | "prev") =>
+  searchCommand(({ query }) => {
+    const views = getAllEditorViews();
+    // Get starting view from the store
+    const currentView = store.get(findReplaceAtom).currentView || {
+      view: views[0],
+      range: { from: 0, to: 0 },
+    };
+
+    let startingPosition: number | null = currentView.range.to;
+
+    // We are going backwards so update the starting position and views to search
+    if (direction === "prev") {
+      views.reverse();
+      startingPosition = currentView.range.from;
+    }
+
+    let startingViewIndex = views.indexOf(currentView.view);
+    if (startingViewIndex < 0) {
+      startingViewIndex = 0;
+    }
+
+    const viewsToSearch = [...views, ...views].slice(startingViewIndex);
+
+    for (const view of viewsToSearch) {
+      const next =
+        direction === "next"
+          ? query.nextMatch(view.state, 0, startingPosition ?? 0)
+          : query.prevMatch(
+              view.state,
+              startingPosition ?? view.state.doc.length,
+              view.state.doc.length,
+            );
+
+      if (!next) {
+        startingPosition = null; // Unset the starting position
+        // If no match found in this view, continue to the next one
+        // and remove the selection
+        view.dispatch({
+          selection: EditorSelection.single(0),
+        });
+        continue;
+      }
+
+      // Set selection
+      const selection = EditorSelection.single(next.from, next.to);
+      view.dispatch({
+        selection,
+        effects: [EditorView.scrollIntoView(selection.main, { y: "center" })],
+        userEvent: "select.search",
+      });
+      store.set(findReplaceAtom, {
+        type: "setCurrentView",
+        view,
+        range: { from: next.from, to: next.to },
+      });
+
+      return next; // If a match is found, stop searching and return true
+    }
+
+    return false; // If no matches are found in any view, return false
+  });
+
+/**
+ * Find the next match after the global selection.
+ */
+export const findNext = findInDirection("next");
+/**
+ * Find the previous match before the global selection.
+ */
+export const findPrev = findInDirection("prev");
+
+/**
+ * Replace the next match after the global selection.
+ */
+export const replaceAll = searchCommand(({ query }) => {
+  const views = getAllEditorViews();
+  const undoHandlers: Array<() => void> = [];
+  for (const view of views) {
+    if (view.state.readOnly) {
+      continue;
+    }
+
+    const changes = query.matchAll(view.state, 1e9)?.map((match) => {
+      const { from, to } = match;
+      return { from, to, insert: query.getReplacement(match) };
+    });
+
+    if (!changes || changes.length === 0) {
+      continue;
+    }
+
+    const prevDoc = view.state.doc.toString();
+    undoHandlers.push(() => {
+      view.dispatch({
+        changes: [{ from: 0, to: view.state.doc.length, insert: prevDoc }],
+        userEvent: "input.replace.all",
+      });
+    });
+
+    view.dispatch({
+      changes,
+      userEvent: "input.replace.all",
+    });
+  }
+
+  const handleUndo = () => {
+    for (const undoHandler of undoHandlers) {
+      undoHandler();
+    }
+  };
+
+  return handleUndo;
+});
+
+/**
+ * Replace the next match after the global selection.
+ */
+export const replaceNext = searchCommand(({ query }) => {
+  const views = getAllEditorViews();
+  // Get starting view from the store
+  const currentView = store.get(findReplaceAtom).currentView || {
+    view: views[0],
+    range: { from: 0, to: 0 },
+  };
+
+  // Start from the start of the selection to include the current match
+  let startingPosition: number | null = currentView.range.from;
+
+  let startingViewIndex = views.indexOf(currentView.view);
+  if (startingViewIndex < 0) {
+    startingViewIndex = 0;
+  }
+  const viewsToSearch = [...views, ...views].slice(startingViewIndex);
+
+  for (const view of viewsToSearch) {
+    const next = query.nextMatch(view.state, 0, startingPosition ?? 0);
+
+    if (!next) {
+      startingPosition = null; // Unset the starting position
+      // If no match found in this view, continue to the next one
+      // and remove the selection
+      view.dispatch({
+        selection: EditorSelection.single(0),
+      });
+      continue;
+    }
+
+    // Replace the match
+    const replacement = view.state.toText(query.getReplacement(next));
+    view.dispatch({
+      changes: [{ from: next.from, to: next.to, insert: replacement }],
+      userEvent: "input.replace",
+    });
+
+    // Find next match
+    return findNext();
+  }
+
+  return false; // If no matches are found in any view, return false
+});
+
+/**
+ * @returns The number of matches in the document for each view.
+ */
+export const getMatches = searchCommand(({ query }) => {
+  const views = getAllEditorViews();
+  let count = 0;
+
+  // Position in the document, keyed by view and then by to:from
+  const position = new Map<EditorView, Map<string, number>>();
+  for (const view of views) {
+    const matches = query.matchAll(view.state, 1e9) || [];
+    for (const match of matches) {
+      const { from, to } = match;
+      const viewPosition = position.get(view) || new Map<string, number>();
+      viewPosition.set(`${from}:${to}`, count++);
+      position.set(view, viewPosition);
+    }
+  }
+
+  return {
+    count: count,
+    position: position,
+  };
+});

package/src/core/codemirror/find-replace/query.ts

@@ -0,0 +1,31 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { SearchCursor, SearchQuery } from "@codemirror/search";
+import type { EditorState } from "@codemirror/state";
+import { invariant } from "@/utils/invariant";
+
+type SearchResult = typeof SearchCursor.prototype.value;
+
+// Copied from https://github.com/codemirror/search/blob/6.5.2/src/search.ts#L164
+export interface QueryType<Result extends SearchResult = SearchResult> {
+  nextMatch(state: EditorState, curFrom: number, curTo: number): Result | null;
+  prevMatch(state: EditorState, curFrom: number, curTo: number): Result | null;
+  getReplacement(result: Result): string;
+  matchAll(state: EditorState, limit: number): readonly Result[] | null;
+  highlight(
+    state: EditorState,
+    from: number,
+    to: number,
+    add: (from: number, to: number) => void,
+  ): void;
+  spec: SearchQuery;
+}
+
+export interface QueryCreator {
+  create(): QueryType;
+}
+
+export function asQueryCreator(query: SearchQuery): QueryCreator {
+  invariant("create" in query, 'Expected query to have a "create" method');
+  return query as unknown as QueryCreator;
+}

package/src/core/codemirror/find-replace/search-highlight.ts

@@ -0,0 +1,148 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { SearchQuery } from "@codemirror/search";
+import { RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+} from "@codemirror/view";
+import { getAllEditorViews } from "@/core/cells/cells";
+import { store } from "@/core/state/jotai";
+import { asQueryCreator, type QueryType } from "./query";
+import { findReplaceAtom } from "./state";
+
+const setSearchQuery = StateEffect.define<SearchQuery>();
+
+/**
+ * Set the global search query to the current find/replace state.
+ */
+export function setGlobalSearchQuery() {
+  const state = store.get(findReplaceAtom);
+  const views = getAllEditorViews();
+  for (const view of views) {
+    if (view.state.readOnly) {
+      continue;
+    }
+    view.dispatch({
+      effects: setSearchQuery.of(
+        new SearchQuery({
+          search: state.findText,
+          caseSensitive: state.caseSensitive,
+          regexp: state.regexp,
+          replace: state.replaceText,
+          wholeWord: state.wholeWord,
+        }),
+      ),
+    });
+  }
+}
+
+/**
+ * Clear the global search query.
+ */
+export function clearGlobalSearchQuery() {
+  const views = getAllEditorViews();
+  for (const view of views) {
+    if (view.state.readOnly) {
+      continue;
+    }
+    view.dispatch({
+      effects: setSearchQuery.of(new SearchQuery({ search: "" })),
+    });
+  }
+}
+
+export const searchState: StateField<QueryType> = StateField.define<QueryType>({
+  create() {
+    const state = store.get(findReplaceAtom);
+    const search = new SearchQuery({
+      search: state.findText,
+      caseSensitive: state.caseSensitive,
+      regexp: state.regexp,
+      replace: state.replaceText,
+      wholeWord: state.wholeWord,
+    });
+
+    return asQueryCreator(search).create();
+  },
+  update(value, tr) {
+    for (const effect of tr.effects) {
+      if (effect.is(setSearchQuery)) {
+        value = asQueryCreator(effect.value).create();
+      }
+    }
+    return value;
+  },
+});
+
+const matchMark = Decoration.mark({
+  class: "cm-searchMatch",
+});
+const selectedMatchMark = Decoration.mark({
+  class: "cm-searchMatch cm-searchMatch-selected",
+});
+
+const HighlightMargin = 250;
+
+// Adapted from from https://github.com/codemirror/search/blob/e766a897aef7515f7ded46ee60b60b875241239e/src/search.ts
+
+export const searchHighlighter = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+
+    constructor(readonly view: EditorView) {
+      this.decorations = this.highlight(view.state.field(searchState));
+    }
+
+    update(update: ViewUpdate) {
+      const state = update.state.field(searchState);
+      if (
+        state !== update.startState.field(searchState) ||
+        update.docChanged ||
+        update.selectionSet ||
+        update.viewportChanged
+      ) {
+        this.decorations = this.highlight(state);
+      }
+    }
+
+    highlight(query: QueryType) {
+      if (!query.spec.valid) {
+        return Decoration.none;
+      }
+      const { view } = this;
+      const builder = new RangeSetBuilder<Decoration>();
+      const ranges = view.visibleRanges;
+      const l = ranges.length;
+      for (let i = 0; i < l; i++) {
+        let { to } = ranges[i];
+        const { from } = ranges[i];
+        while (i < l - 1 && to > ranges[i + 1].from - 2 * HighlightMargin) {
+          to = ranges[++i].to;
+        }
+        query.highlight(view.state, from, to, (from, to) => {
+          const selected = view.state.selection.ranges.some(
+            (r) => r.from === from && r.to === to,
+          );
+          builder.add(from, to, selected ? selectedMatchMark : matchMark);
+        });
+      }
+      return builder.finish();
+    }
+  },
+  {
+    decorations: (v) => v.decorations,
+  },
+);
+
+export const highlightTheme = EditorView.baseTheme({
+  "&light .cm-searchMatch": { backgroundColor: "#99ff7780" },
+  "&dark .cm-searchMatch": { backgroundColor: "#22bb0070" },
+
+  "&light .cm-searchMatch-selected": { backgroundColor: "transparent" },
+  "&dark .cm-searchMatch.cm-searchMatch-selected": {
+    backgroundColor: "#6199ff88 !important",
+  },
+});

package/src/core/codemirror/find-replace/state.ts

@@ -0,0 +1,167 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { EditorView } from "@codemirror/view";
+import { atomWithReducer } from "jotai/utils";
+import { store } from "@/core/state/jotai";
+
+interface FindReplaceState {
+  findText: string;
+  replaceText: string;
+  caseSensitive: boolean;
+  wholeWord: boolean;
+  regexp: boolean;
+  isOpen: boolean;
+  currentView?: {
+    view: EditorView;
+    range: { from: number; to: number };
+  };
+}
+
+type Action =
+  | {
+      type: "setFind";
+      find: string;
+    }
+  | {
+      type: "setReplace";
+      replace: string;
+    }
+  | {
+      type: "setCaseSensitive";
+      caseSensitive: boolean;
+    }
+  | {
+      type: "setWholeWord";
+      wholeWord: boolean;
+    }
+  | {
+      type: "setRegex";
+      regexp: boolean;
+    }
+  | {
+      type: "setIsOpen";
+      isOpen: boolean;
+    }
+  | {
+      type: "setCurrentView";
+      view: EditorView;
+      range: { from: number; to: number };
+    }
+  | {
+      type: "clearCurrentView";
+    };
+
+export const findReplaceAtom = atomWithReducer<FindReplaceState, Action>(
+  {
+    findText: "",
+    replaceText: "",
+    caseSensitive: false,
+    wholeWord: false,
+    regexp: false,
+    isOpen: false,
+    currentView: undefined,
+  },
+  (state, action) => {
+    if (action === undefined) {
+      return state;
+    }
+
+    switch (action.type) {
+      case "setFind":
+        return { ...state, findText: action.find };
+      case "setReplace":
+        return { ...state, replaceText: action.replace };
+      case "setCaseSensitive":
+        return { ...state, caseSensitive: action.caseSensitive };
+      case "setWholeWord":
+        return { ...state, wholeWord: action.wholeWord };
+      case "setRegex":
+        return { ...state, regexp: action.regexp };
+      case "setIsOpen":
+        return { ...state, isOpen: action.isOpen };
+      case "setCurrentView":
+        return {
+          ...state,
+          currentView: { view: action.view, range: action.range },
+        };
+      case "clearCurrentView":
+        return { ...state, currentView: undefined };
+    }
+  },
+);
+
+export function openFindReplacePanel(initialView?: EditorView): boolean {
+  // If any radix dialog is open, don't open the find/replace panel
+  // if they have role="dialog" and data-state="open" and has children
+  const element = document.querySelectorAll(
+    '[role="dialog"][data-state="open"]',
+  );
+  const someHasChildren = [...element].some(
+    (el) => el instanceof HTMLElement && el.childNodes.length > 0,
+  );
+  if (someHasChildren) {
+    return false;
+  }
+
+  if (initialView) {
+    // Set the selected text and focus
+    const selection = initialView.state.selection.main;
+    const query = initialView.state.sliceDoc(selection.from, selection.to);
+    if (query) {
+      store.set(findReplaceAtom, {
+        type: "setFind",
+        find: query,
+      });
+      store.set(findReplaceAtom, {
+        type: "setCurrentView",
+        view: initialView,
+        range: { from: selection.from, to: selection.to },
+      });
+    } else {
+      // If there is no selection, just set the current view
+      store.set(findReplaceAtom, {
+        type: "setCurrentView",
+        view: initialView,
+        range: { from: 0, to: 0 },
+      });
+    }
+  }
+
+  // HACK: If open, close it and re-open it to gain focus
+  const isOpen = store.get(findReplaceAtom).isOpen;
+  if (isOpen) {
+    store.set(findReplaceAtom, {
+      type: "setIsOpen",
+      isOpen: false,
+    });
+    requestAnimationFrame(() => {
+      // Open the panel
+      store.set(findReplaceAtom, {
+        type: "setIsOpen",
+        isOpen: true,
+      });
+    });
+    return true;
+  }
+
+  // Open the panel
+  store.set(findReplaceAtom, {
+    type: "setIsOpen",
+    isOpen: true,
+  });
+  return true;
+}
+
+export function closeFindReplacePanel(): boolean {
+  const isOpen = store.get(findReplaceAtom).isOpen;
+  // If the panel is already closed, return false.
+  if (!isOpen) {
+    return false;
+  }
+
+  store.set(findReplaceAtom, {
+    type: "setIsOpen",
+    isOpen: false,
+  });
+  return true;
+}