Replace default search panel with my own component

v6
1

I need to replace the default search component with my own custom component but still use the same search related functionalities of the codemirror library. I found out that createPanel allows doing this. But the docs aren’t clear enough on how to utilize the search functionalities on the new component that i build.

2

The implementation of the built-in search panel is probably a good place to start.

3

search_pannel.jsx → My custom search panel

import React from "react";
import { SearchQuery, selectMatches } from "@codemirror/search";


export default function SearchPanel({ view }) {
  return (
    <div className="search-panel">
      <input/>
      <button
        type={BUTTON_TYPES.TERTIARY}
        size={BUTTON_SIZES.SMALL}
        onClick={() => {
          let searchQuery = new SearchQuery({
            search: "visual"
          });
          selectMatches(view, searchQuery);
        }}
      >
        Search
      </button>
    </div>
  );
}

Editor usage

 let defaultExtensions = [
        basicSetup,
        search({
          createPanel: (view) => {
            const dom = document.createElement("div");
            render(<SearchPanel view={view} />, dom);
            return { dom };
          }
        })
      ];

      const view = new EditorView({
        extensions: defaultExtensions,
        doc: data,
        parent: element
      });

This is my current setup. But on clicking the button which triggers selectMatches, nothing gets highlighted in my editor. But the file contains the text which i have passed in search (“visual”)

Am i wrong somewhere? @marijn

4

selectMatches is documented to be a command, which takes a single argument, so calling it with two arguments is unlikely to do what you want. You may be looking for setSearchQuery, but I don’t want to explain every step of the way. It might help to copy the code for the default search panel and adjust that piece by piece, following its general structure.