Overleaf/services/web/frontend/js/features/source-editor/extensions/search.ts

import {
  search as _search,
  setSearchQuery,
  getSearchQuery,
  openSearchPanel,
  SearchQuery,
  searchPanelOpen,
  searchKeymap,
  highlightSelectionMatches,
  togglePanel,
} from '@codemirror/search'
import { Decoration, EditorView, keymap, ViewPlugin } from '@codemirror/view'
import {
  Annotation,
  Compartment,
  EditorSelection,
  EditorState,
  SelectionRange,
  StateEffect,
  StateField,
  TransactionSpec,
} from '@codemirror/state'

const restoreSearchQueryAnnotation = Annotation.define<boolean>()

const selectNextMatch = (query: SearchQuery, state: EditorState) => {
  if (!query.valid) {
    return false
  }

  let cursor = query.getCursor(state.doc, state.selection.main.from)

  let result = cursor.next()

  if (result.done) {
    cursor = query.getCursor(state.doc)
    result = cursor.next()
  }

  return result.done ? null : result.value
}

const storedSelectionEffect = StateEffect.define<EditorSelection | null>()

const storedSelectionState = StateField.define<EditorSelection | null>({
  create() {
    return null
  },
  update(value, tr) {
    if (value) {
      value = value.map(tr.changes)
    }

    for (const effect of tr.effects) {
      if (effect.is(storedSelectionEffect)) {
        value = effect.value
      } else if (effect.is(togglePanel) && effect.value === false) {
        value = null // clear the stored selection when closing the search panel
      }
    }

    return value
  },
  provide(f) {
    return [
      EditorView.decorations.from(f, selection => {
        if (!selection) {
          return Decoration.none
        }
        const decorations = selection.ranges
          .filter(range => !range.empty)
          .map(range =>
            Decoration.mark({
              class: 'ol-cm-stored-selection',
            }).range(range.from, range.to)
          )
        return Decoration.set(decorations)
      }),
    ]
  },
})

export const getStoredSelection = (state: EditorState) =>
  state.field(storedSelectionState)

export const setStoredSelection = (selection: EditorSelection | null) => {
  return {
    effects: [
      storedSelectionEffect.of(selection),
      // TODO: only disable selection highlighting if the current selection is a search match
      highlightSelectionMatchesConf.reconfigure(
        selection ? [] : highlightSelectionMatchesExtension
      ),
    ],
  }
}

const highlightSelectionMatchesConf = new Compartment()

const highlightSelectionMatchesExtension = highlightSelectionMatches({
  wholeWords: true,
})

// store the search query for use when switching between files
// TODO: move this into EditorContext?
let searchQuery: SearchQuery | null

const scrollToMatch = (range: SelectionRange, view: EditorView) => {
  const coords = {
    from: view.coordsAtPos(range.from),
    to: view.coordsAtPos(range.to),
  }
  const scrollRect = view.scrollDOM.getBoundingClientRect()
  const strategy =
    (coords.from && coords.from.top < scrollRect.top) ||
    (coords.to && coords.to.bottom > scrollRect.bottom)
      ? 'center'
      : 'nearest'

  return EditorView.scrollIntoView(range, {
    y: strategy,
  })
}

/**
 * A collection of extensions related to the search feature.
 */
export const search = () => {
  let open = false

  return [
    // keymap for search
    keymap.of(searchKeymap),

    // highlight text which matches the current selection
    highlightSelectionMatchesConf.of(highlightSelectionMatchesExtension),

    // a stored selection for use in "within selection" searches
    storedSelectionState,

    /**
     * The CodeMirror `search` extension, configured to create a custom panel element
     * and to scroll the search match into the centre of the viewport when needed.
     */
    _search({
      literal: true,
      // centre the search match if it was outside the visible area
      scrollToMatch,
      createPanel: () => {
        const dom = document.createElement('div')
        dom.className = 'ol-cm-search'

        return {
          dom,
          mount() {
            open = true

            // focus the search input when the panel is already open
            const searchInput =
              dom.querySelector<HTMLInputElement>('[main-field]')
            if (searchInput) {
              searchInput.focus()
              searchInput.select()
            }
          },
          destroy() {
            window.setTimeout(() => {
              open = false // in a timeout, so the view plugin below can run its destroy method first
            }, 0)
          },
        }
      },
    }),

    // restore a stored search and re-open the search panel
    ViewPlugin.define(view => {
      if (searchQuery) {
        const _searchQuery = searchQuery
        window.setTimeout(() => {
          openSearchPanel(view)
          view.dispatch({
            effects: setSearchQuery.of(_searchQuery),
            annotations: restoreSearchQueryAnnotation.of(true),
          })
        }, 0)
      }

      return {
        destroy() {
          // persist the current search query if the panel is open
          searchQuery = open ? getSearchQuery(view.state) : null
        },
      }
    }),

    // select a match while searching
    EditorView.updateListener.of(update => {
      // if the search panel wasn't open, don't select a match
      if (!searchPanelOpen(update.startState)) {
        return
      }

      for (const tr of update.transactions) {
        // avoid changing the selection and viewport when switching between files
        if (tr.annotation(restoreSearchQueryAnnotation)) {
          continue
        }

        for (const effect of tr.effects) {
          if (effect.is(setSearchQuery)) {
            const query = effect.value
            if (!query) return

            // The rest of this messes up searching in Vim, which is handled by
            // the Vim extension, so bail out here in Vim mode. Happily, the
            // Vim extension sticks an extra property on the query value that
            // can be checked
            if ('forVim' in query) return

            const next = selectNextMatch(query, tr.state)

            if (next) {
              // select a match if possible
              const spec: TransactionSpec = {
                selection: { anchor: next.from, head: next.to },
                userEvent: 'select.search',
              }

              // scroll into view if not opening the panel
              if (searchPanelOpen(tr.startState)) {
                spec.effects = scrollToMatch(
                  EditorSelection.range(next.from, next.to),
                  update.view
                )
              }

              update.view.dispatch(spec)
            } else {
              // clear the selection if the query became invalid
              const prevQuery = getSearchQuery(tr.startState)

              if (prevQuery.valid) {
                const { from } = tr.startState.selection.main

                update.view.dispatch({
                  selection: { anchor: from },
                })
              }
            }
          }
        }
      }
    }),
    searchFormTheme,
  ]
}

const searchFormTheme = EditorView.theme({
  '.ol-cm-search-form': {
    padding: '10px',
    display: 'flex',
    gap: '10px',
    background: 'var(--ol-blue-gray-1)',
    '--ol-cm-search-form-focus-shadow':
      'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%)',
    '--ol-cm-search-form-error-shadow':
      'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--input-shadow-danger-color)',
  },
  '.ol-cm-search-controls': {
    display: 'grid',
    gridTemplateColumns: 'auto auto',
    gridTemplateRows: 'auto auto',
    gap: '10px',
  },
  '.ol-cm-search-form-row': {
    display: 'flex',
    gap: '10px',
    justifyContent: 'space-between',
  },
  '.ol-cm-search-form-group': {
    display: 'flex',
    gap: '10px',
    alignItems: 'center',
  },
  '.ol-cm-search-input-group': {
    border: '1px solid var(--input-border)',
    borderRadius: '20px',
    background: 'white',
    width: '100%',
    maxWidth: '25em',
    '& input[type="text"]': {
      background: 'none',
      boxShadow: 'none',
    },
    '& input[type="text"]:focus': {
      outline: 'none',
      boxShadow: 'none',
    },
    '& .btn.btn': {
      background: 'var(--ol-blue-gray-0)',
      color: 'var(--ol-blue-gray-3)',
      borderRadius: '50%',
      height: '2em',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: '2em',
      marginRight: '3px',
      '&.checked': {
        color: '#fff',
        backgroundColor: 'var(--ol-blue)',
      },
      '&:active': {
        boxShadow: 'none',
      },
    },
    '&:focus-within': {
      borderColor: 'var(--input-border-focus)',
      boxShadow: 'var(--ol-cm-search-form-focus-shadow)',
    },
  },
  '.ol-cm-search-input-group.ol-cm-search-input-error': {
    '&:focus-within': {
      borderColor: 'var(--input-border-danger)',
      boxShadow: 'var(--ol-cm-search-form-error-shadow)',
    },
  },
  '.input-group .ol-cm-search-form-input': {
    border: 'none',
  },
  '.ol-cm-search-input-button': {
    background: '#fff',
    color: 'inherit',
    border: 'none',
  },
  '.ol-cm-search-input-button.focused': {
    borderColor: 'var(--input-border-focus)',
    boxShadow: 'var(--ol-cm-search-form-focus-shadow)',
  },
  '.ol-cm-search-form-button-group': {
    flexShrink: 0,
  },
  '.ol-cm-search-form-position': {
    flexShrink: 0,
    color: 'var(--ol-blue-gray-4)',
  },
  '.ol-cm-search-hidden-inputs': {
    position: 'absolute',
    left: '-10000px',
  },
  '.ol-cm-search-form-close': {
    flex: 1,
  },
  '.ol-cm-search-replace-input': {
    order: 3,
  },
  '.ol-cm-search-replace-buttons': {
    order: 4,
  },
  '.ol-cm-stored-selection': {
    background: 'rgba(125, 125, 125, 0.1)',
    paddingTop: 'var(--half-leading)',
    paddingBottom: 'var(--half-leading)',
  },
  // set the default "match" style
  '.cm-selectionMatch, .cm-searchMatch': {
    backgroundColor: 'transparent',
    outlineOffset: '-1px',
    paddingTop: 'var(--half-leading)',
    paddingBottom: 'var(--half-leading)',
  },
  // make sure selectionMatch inside searchMatch doesn't have a background colour
  '.cm-searchMatch .cm-selectionMatch': {
    backgroundColor: 'transparent !important',
  },
})