Search

Search and replace text within the editor. This is built on top of prosemirror-search.

'use client'

import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'
import 'prosekit/extensions/search/style.css'

import { createEditor, type NodeJSON } from 'prosekit/core'
import { ProseKit } from 'prosekit/react'
import { useMemo } from 'react'

import { sampleContent } from '../../sample/sample-doc-search.ts'
import { Search } from '../../ui/search/index.ts'

import { defineExtension } from './extension.ts'

interface EditorProps {
  initialContent?: NodeJSON
}

export default function Editor(props: EditorProps) {
  const defaultContent = props.initialContent ?? sampleContent
  const editor = useMemo(() => {
    const extension = defineExtension()
    return createEditor({
      extension,
      defaultContent,
    })
  }, [defaultContent])

  return (
    <ProseKit editor={editor}>
      <div className="box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-[canvas] text-black dark:text-white">
        <div className="relative w-full flex-1 box-border overflow-y-auto">
          <Search />
          <div ref={editor.mount} className="ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500"></div>
        </div>
      </div>
    </ProseKit>
  )
}

import { defineBasicExtension } from 'prosekit/basic'
import { union } from 'prosekit/core'
import { defineSearchCommands, defineSearchQuery } from 'prosekit/extensions/search'

export function defineExtension() {
  return union(defineBasicExtension(), defineSearchQuery(), defineSearchCommands())
}

export type EditorExtension = ReturnType<typeof defineExtension>

export { default as ExampleEditor } from './editor.tsx'

import type { NodeJSON } from 'prosekit/core'

export const sampleContent: NodeJSON = {
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'Baa, baa, black sheep,',
        },
      ],
    },
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'Have you any wool?',
        },
      ],
    },
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'Yes, sir, yes, sir,',
        },
      ],
    },
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'Three bags full;',
        },
      ],
    },
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'One for the master,',
        },
      ],
    },
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'And one for the dame,',
        },
      ],
    },
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'And one for the little boy',
        },
      ],
    },
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'Who lives down the lane.',
        },
      ],
    },
  ],
}

'use client'

import { TooltipPopup, TooltipPositioner, TooltipRoot, TooltipTrigger } from 'prosekit/react/tooltip'
import type { MouseEventHandler, ReactNode } from 'react'

export default function Button(props: {
  pressed?: boolean
  disabled?: boolean
  onClick?: MouseEventHandler<HTMLButtonElement>
  tooltip?: string
  children: ReactNode
}) {
  return (
    <TooltipRoot>
      <TooltipTrigger className="block">
        <button
          data-state={props.pressed ? 'on' : 'off'}
          disabled={props.disabled}
          onClick={props.onClick}
          onMouseDown={(event) => {
            // Prevent the editor from being blurred when the button is clicked
            event.preventDefault()
          }}
          className="outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700"
        >
          {props.children}
          {props.tooltip ? <span className="sr-only">{props.tooltip}</span> : null}
        </button>
      </TooltipTrigger>
      {props.tooltip
        ? (
          <TooltipPositioner className="block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none">
            <TooltipPopup className="flex box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs text-nowrap">
              {props.tooltip}
            </TooltipPopup>
          </TooltipPositioner>
        )
        : null}
    </TooltipRoot>
  )
}

export { default as Button } from './button.tsx'

export { default as Search } from './search.tsx'

'use client'

import { defineSearchStatusHandler, type SearchCommandsExtension, type SearchStatus } from 'prosekit/extensions/search'
import { useEditor, useExtension } from 'prosekit/react'
import { useEffect, useMemo, useState } from 'react'

import { Button } from '../button/index.ts'

export default function Search(props: { onClose?: VoidFunction }) {
  const [showReplace, setShowReplace] = useState(false)
  const toggleReplace = () => setShowReplace((value) => !value)

  const [searchText, setSearchText] = useState('')
  const [replaceText, setReplaceText] = useState('')
  const [caseSensitive, setCaseSensitive] = useState(false)
  const [wholeWord, setWholeWord] = useState(false)
  const [regexp, setRegexp] = useState(false)
  const [literal, setLiteral] = useState(false)

  const [searchStatus, setSearchStatus] = useState<SearchStatus>({
    total: 0,
    active: 0,
  })
  useExtension(useMemo(() => defineSearchStatusHandler(setSearchStatus), []))

  const editor = useEditor<SearchCommandsExtension>()

  useEffect(() => {
    editor.commands.setSearchQuery({
      search: searchText,
      replace: replaceText,
      caseSensitive,
      wholeWord,
      regexp,
      literal,
    })
  }, [editor, searchText, replaceText, caseSensitive, wholeWord, regexp, literal])

  const handleSearchKeyDown = (event: React.KeyboardEvent) => {
    if (isEnter(event)) {
      event.preventDefault()
      editor.commands.findNext()
    } else if (isShiftEnter(event)) {
      event.preventDefault()
      editor.commands.findPrev()
    }
  }

  const handleReplaceKeyDown = (event: React.KeyboardEvent) => {
    if (isEnter(event)) {
      event.preventDefault()
      editor.commands.replaceNext()
    } else if (isShiftEnter(event)) {
      event.preventDefault()
      editor.commands.replaceAll()
    }
  }

  return (
    <div className="z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b grid grid-cols-[min-content_1fr_min-content] gap-2 p-2">
      <Button tooltip="Toggle Replace" onClick={toggleReplace}>
        <span
          data-rotate={showReplace ? '' : undefined}
          className="i-lucide-chevron-right size-5 block transition-transform data-rotate:rotate-90"
        />
      </Button>
      <input
        placeholder="Search"
        type="text"
        value={searchText}
        onChange={(event) => setSearchText(event.target.value)}
        onKeyDown={handleSearchKeyDown}
        className="flex h-9 rounded-md w-full bg-[canvas] px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 col-start-2"
      />
      <div className="flex items-center justify-between gap-1">
        {searchText
          ? (
            <span className="flex items-center px-1 text-sm whitespace-nowrap tabular-nums text-gray-500 dark:text-gray-500">
              {searchStatus.active} / {searchStatus.total}
            </span>
          )
          : null}
        <Button
          tooltip="Previous (Shift Enter)"
          onClick={editor.commands.findPrev}
        >
          <span className="i-lucide-arrow-left size-5 block" />
        </Button>
        <Button tooltip="Next (Enter)" onClick={editor.commands.findNext}>
          <span className="i-lucide-arrow-right size-5 block" />
        </Button>
        <Button tooltip="Close" onClick={props.onClose}>
          <span className="i-lucide-x size-5 block" />
        </Button>
        <Button
          pressed={caseSensitive}
          tooltip="Case Sensitive"
          onClick={() => setCaseSensitive((value) => !value)}
        >
          <span className="i-lucide-case-sensitive size-5 block" />
        </Button>
        <Button
          pressed={wholeWord}
          tooltip="Whole Word"
          onClick={() => setWholeWord((value) => !value)}
        >
          <span className="i-lucide-whole-word size-5 block" />
        </Button>
        <Button
          pressed={regexp}
          tooltip="Regular Expression"
          onClick={() => setRegexp((value) => !value)}
        >
          <span className="i-lucide-braces size-5 block" />
        </Button>
        <Button
          pressed={literal}
          tooltip="Literal Escape Sequences"
          onClick={() => setLiteral((value) => !value)}
        >
          <span className="i-lucide-quote size-5 block" />
        </Button>
      </div>
      {showReplace && (
        <input
          placeholder="Replace"
          type="text"
          value={replaceText}
          onChange={(event) => setReplaceText(event.target.value)}
          onKeyDown={handleReplaceKeyDown}
          className="flex h-9 rounded-md w-full bg-[canvas] px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 col-start-2"
        />
      )}
      {showReplace && (
        <div className="flex items-center justify-between gap-1">
          <Button
            tooltip="Replace (Enter)"
            onClick={editor.commands.replaceNext}
          >
            Replace
          </Button>
          <Button
            tooltip="Replace All (Shift Enter)"
            onClick={editor.commands.replaceAll}
          >
            All
          </Button>
        </div>
      )}
    </div>
  )
}

function isEnter(event: React.KeyboardEvent) {
  return (
    event.key === 'Enter'
    && !event.shiftKey
    && !event.metaKey
    && !event.altKey
    && !event.ctrlKey
    && !event.nativeEvent.isComposing
  )
}

function isShiftEnter(event: React.KeyboardEvent) {
  return (
    event.key === 'Enter'
    && event.shiftKey
    && !event.metaKey
    && !event.altKey
    && !event.ctrlKey
    && !event.nativeEvent.isComposing
  )
}

Usage

To highlight search matches, you must load the style.css file or define your own styles for the .ProseMirror-search-match (search match) and .ProseMirror-active-search-match (active match) classes.

import 'prosekit/extensions/search/style.css'

Call defineSearchQuery() to store the search state, and defineSearchCommands() to define related commands.

import { unionfunction union<const E extends readonly Extension[]>(...exts: E): Union<E> (+1 overload)Merges multiple extensions into one. You can pass multiple extensions as
arguments or a single array containing multiple extensions.

Throws if no extensions are provided.
@example```ts
function defineFancyNodes() {
  return union(
    defineFancyParagraph(),
    defineFancyHeading(),
  )
}
```@example```ts
function defineFancyNodes() {
  return union([
    defineFancyParagraph(),
    defineFancyHeading(),
  ])
}
``` } from 'prosekit/core'
import { defineSearchCommandsfunction defineSearchCommands(): SearchCommandsExtensionDefines commands for search and replace., defineSearchQueryfunction defineSearchQuery(options?: SearchQueryOptions): PlainExtensionDefines an extension that stores a current search query and replace string.
When called without options, it stores an empty query, which can be updated
later with the `setSearchQuery` command. } from 'prosekit/extensions/search'

const extensionconst extension: Union<readonly [PlainExtension, SearchCommandsExtension]> = unionunion<readonly [PlainExtension, SearchCommandsExtension]>(exts_0: PlainExtension, exts_1: SearchCommandsExtension): Union<readonly [PlainExtension, SearchCommandsExtension]> (+1 overload)Merges multiple extensions into one. You can pass multiple extensions as
arguments or a single array containing multiple extensions.

Throws if no extensions are provided.
@example```ts
function defineFancyNodes() {
  return union(
    defineFancyParagraph(),
    defineFancyHeading(),
  )
}
```@example```ts
function defineFancyNodes() {
  return union([
    defineFancyParagraph(),
    defineFancyHeading(),
  ])
}
```(defineSearchQueryfunction defineSearchQuery(options?: SearchQueryOptions): PlainExtensionDefines an extension that stores a current search query and replace string.
When called without options, it stores an empty query, which can be updated
later with the `setSearchQuery` command.(), defineSearchCommandsfunction defineSearchCommands(): SearchCommandsExtensionDefines commands for search and replace.())

In your search component, dispatch the setSearchQuery command whenever the search text or a search option changes. The command is a no-op when the query is unchanged, so you can dispatch it on every input change. You can also pass options to defineSearchQuery() to start with a fixed query.

Search status

Read the current match count with getSearchStatus(), or register a handler with defineSearchStatusHandler() to render a match counter.

import { createEditorfunction createEditor<E extends Extension>(options: EditorOptions<E>): Editor<E> } from 'prosekit/core'
import { defineSearchStatusHandlerfunction defineSearchStatusHandler(handler: SearchStatusHandler): PlainExtensionRegisters a handler that is called whenever the search status changes. It
can be used to render a match counter., getSearchStatusfunction getSearchStatus(state: EditorState): SearchStatusReturns the current search status. } from 'prosekit/extensions/search'

const extensionconst extension: PlainExtension = defineSearchStatusHandlerfunction defineSearchStatusHandler(handler: SearchStatusHandler): PlainExtensionRegisters a handler that is called whenever the search status changes. It
can be used to render a match counter.((statusstatus: SearchStatus) => {
  consolevar console: Console.logConsole.log(...data: any[]): voidThe **`console.log()`** static method outputs a message to the console.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/console/log_static)(`Match ${statusstatus: SearchStatus.activeSearchStatus.active: numberThe one-based position of the match that the selection sits on, or 0 when
the selection is not on a match.} of ${statusstatus: SearchStatus.totalSearchStatus.total: numberThe total number of matches for the current search query.}`)
})
const editorconst editor: Editor<PlainExtension> = createEditorcreateEditor<PlainExtension>(options: EditorOptions<PlainExtension>): Editor<PlainExtension>({ extensionEditorOptions<PlainExtension>.extension: PlainExtensionThe extension to use when creating the editor. })

const statusconst status: SearchStatus = getSearchStatusfunction getSearchStatus(state: EditorState): SearchStatusReturns the current search status.(editorconst editor: Editor<PlainExtension>.stateEditor<PlainExtension>.state: EditorStateThe editor's current state.)

Commands

`setSearchQuery`

Update the search query and select the first match at or after the selection start, wrapping around to the first match in the document. When the query matches nothing, a selection left by a previous query collapses to its start. An empty query clears the highlights and leaves the selection alone.

editorconst editor: Editor<SearchCommandsExtension>.commandsEditor<SearchCommandsExtension>.commands: ToCommandAction<{
    setSearchQuery: [options: SearchQueryOptions];
    findNext: [];
    findPrev: [];
    findNextNoWrap: [];
    findPrevNoWrap: [];
    replaceNext: [];
    replaceNextNoWrap: [];
    replaceCurrent: [];
    replaceAll: [];
}>All 
{@link 
CommandAction
}
s defined by the editor..setSearchQuerysetSearchQuery: CommandAction
(options: SearchQueryOptions) => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.({ searchSearchQueryOptions.search: stringThe search string (or regular expression).: 'ProseKit' })

`findNext`

Find the next instance of the search query after the current selection and move the selection to it.

editorconst editor: Editor<SearchCommandsExtension>.commandsEditor<SearchCommandsExtension>.commands: ToCommandAction<{
    setSearchQuery: [options: SearchQueryOptions];
    findNext: [];
    findPrev: [];
    findNextNoWrap: [];
    findPrevNoWrap: [];
    replaceNext: [];
    replaceNextNoWrap: [];
    replaceCurrent: [];
    replaceAll: [];
}>All 
{@link 
CommandAction
}
s defined by the editor..findNextfindNext: CommandAction
() => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.()

`findPrev`

Find the previous instance of the search query and move the selection to it.

editorconst editor: Editor<SearchCommandsExtension>.commandsEditor<SearchCommandsExtension>.commands: ToCommandAction<{
    setSearchQuery: [options: SearchQueryOptions];
    findNext: [];
    findPrev: [];
    findNextNoWrap: [];
    findPrevNoWrap: [];
    replaceNext: [];
    replaceNextNoWrap: [];
    replaceCurrent: [];
    replaceAll: [];
}>All 
{@link 
CommandAction
}
s defined by the editor..findPrevfindPrev: CommandAction
() => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.()

`findNextNoWrap`

Find the next instance of the search query and move the selection to it. Don’t wrap around at the end of document or search range.

editorconst editor: Editor<SearchCommandsExtension>.commandsEditor<SearchCommandsExtension>.commands: ToCommandAction<{
    setSearchQuery: [options: SearchQueryOptions];
    findNext: [];
    findPrev: [];
    findNextNoWrap: [];
    findPrevNoWrap: [];
    replaceNext: [];
    replaceNextNoWrap: [];
    replaceCurrent: [];
    replaceAll: [];
}>All 
{@link 
CommandAction
}
s defined by the editor..findNextNoWrapfindNextNoWrap: CommandAction
() => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.()

`findPrevNoWrap`

Find the previous instance of the search query and move the selection to it. Don’t wrap at the start of the document or search range.

editorconst editor: Editor<SearchCommandsExtension>.commandsEditor<SearchCommandsExtension>.commands: ToCommandAction<{
    setSearchQuery: [options: SearchQueryOptions];
    findNext: [];
    findPrev: [];
    findNextNoWrap: [];
    findPrevNoWrap: [];
    replaceNext: [];
    replaceNextNoWrap: [];
    replaceCurrent: [];
    replaceAll: [];
}>All 
{@link 
CommandAction
}
s defined by the editor..findPrevNoWrapfindPrevNoWrap: CommandAction
() => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.()

`replaceNext`

Replace the currently selected instance of the search query, and move to the next one. Or select the next match, if none is already selected.

editorconst editor: Editor<SearchCommandsExtension>.commandsEditor<SearchCommandsExtension>.commands: ToCommandAction<{
    setSearchQuery: [options: SearchQueryOptions];
    findNext: [];
    findPrev: [];
    findNextNoWrap: [];
    findPrevNoWrap: [];
    replaceNext: [];
    replaceNextNoWrap: [];
    replaceCurrent: [];
    replaceAll: [];
}>All 
{@link 
CommandAction
}
s defined by the editor..replaceNextreplaceNext: CommandAction
() => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.()

`replaceNextNoWrap`

Replace the next instance of the search query. Don’t wrap around at the end of the document.

editorconst editor: Editor<SearchCommandsExtension>.commandsEditor<SearchCommandsExtension>.commands: ToCommandAction<{
    setSearchQuery: [options: SearchQueryOptions];
    findNext: [];
    findPrev: [];
    findNextNoWrap: [];
    findPrevNoWrap: [];
    replaceNext: [];
    replaceNextNoWrap: [];
    replaceCurrent: [];
    replaceAll: [];
}>All 
{@link 
CommandAction
}
s defined by the editor..replaceNextNoWrapreplaceNextNoWrap: CommandAction
() => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.()

`replaceCurrent`

Replace the currently selected instance of the search query, if any, and keep it selected.

editorconst editor: Editor<SearchCommandsExtension>.commandsEditor<SearchCommandsExtension>.commands: ToCommandAction<{
    setSearchQuery: [options: SearchQueryOptions];
    findNext: [];
    findPrev: [];
    findNextNoWrap: [];
    findPrevNoWrap: [];
    replaceNext: [];
    replaceNextNoWrap: [];
    replaceCurrent: [];
    replaceAll: [];
}>All 
{@link 
CommandAction
}
s defined by the editor..replaceCurrentreplaceCurrent: CommandAction
() => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.()

`replaceAll`

Replace all instances of the search query.

editorconst editor: Editor<SearchCommandsExtension>.commandsEditor<SearchCommandsExtension>.commands: ToCommandAction<{
    setSearchQuery: [options: SearchQueryOptions];
    findNext: [];
    findPrev: [];
    findNextNoWrap: [];
    findPrevNoWrap: [];
    replaceNext: [];
    replaceNextNoWrap: [];
    replaceCurrent: [];
    replaceAll: [];
}>All 
{@link 
CommandAction
}
s defined by the editor..replaceAllreplaceAll: CommandAction
() => booleanExecute the current command. Return `true` if the command was successfully
executed, otherwise `false`.()

API Reference

prosekit/extensions/search