Custom search panels

Integration point

The creation option searchPanel accepts ComponentViewRenderer<SearchPanelProps>. Vue uses VueComponentViewRenderer(SearchPanel) and retains VueNodeViewHost inside the existing Provider tree.

import { VueComponentViewRenderer } from '@quirekit/msfe-vue'
import SearchPanel from './search-panel.vue'
const options = {
  searchPanel: VueComponentViewRenderer(SearchPanel),
  // Provide markdown and extensions as in the Vue integration guide.
}

Native search shortcuts continue to open this panel. Do not build a competing whole-document index and mutate content DOM to highlight results.

Minimal panel

Place this public QuireKit component example in search-panel.vue and connect it above.

<script setup lang="ts">
import type { SearchPanelProps } from '@quirekit/msfe-core'
import { QuireInput, QuireButton } from '@quirekit/ui/vue'
defineProps<{ view: SearchPanelProps }>()
</script>
<template>
  <div class="flex flex-wrap items-center gap-2 p-qk-surface">
    <QuireInput :model-value="view.query.search" aria-label="Find"
      @update:model-value="value => view.setQuery({ search: value ?? '' })" />
    <QuireButton :disabled="!view.valid || view.composing"
      @click="view.run('next')">Next</QuireButton>
    <QuireButton variant="ghost" @click="view.run('close')">Close</QuireButton>
  </div>
</template>

Localize labels for the application. view.phrase(key) can supply host CodeMirror phrases; do not hardcode one language across locales.

Fields and actions

query contains search, replace, caseSensitive, regexp and wholeWord. Update fields with setQuery(partial) rather than mutating props. valid includes nonempty-query and regex validity. matches reports the count: total matches (at most 1,000 are counted; limited is true beyond that) and current, the one-based match the main selection covers exactly, or 0.

run() accepts next, previous, all, replace, replaceAll and close. Disable replacement during readonly or composition. Finding and copying remain available. Actions return booleans; obsolete handlers from an unmounted panel must not continue writing.

Complete the panel

Add replacement input, case/word/regex toggles and navigation through the same contract. Avoid submitting while input composition is active. Let the search lifecycle restore focus after closing; global Enter handlers should not steal input events.

Verify invalid regex, no results, composition, replacement undo, readonly search, initial selection, close focus, narrow layouts and both themes. See Rendering API.