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.
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
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.