how to programatically open the search panel

Hi there,

I have a custom button for the user to start a search interaction. How could I programmatically open the search panel in response to the user clicking on that button?

I found this answer that uses document.querySelector("#myButton").onclick = function(){ editor.execCommand("find"); };. But I couldn’t make this work, I suppose this not apply to my package versions:

    "@codemirror/autocomplete": "^6.3.4",
    "@codemirror/commands": "^6.1.2",
    "@codemirror/lang-markdown": "^6.0.5",
    "@codemirror/language": "^6.3.1",
    "@codemirror/search": "^6.2.3",
    "@codemirror/state": "^6.1.3",
    "@codemirror/view": "^6.4.2",

openSearchPanel does this.

Hi @marijn,

Thanks for your reply.

I searched through the documentation for a way to execute this command but could not find how. I also did some trial and error but with no success.

// adapted from the real code:
import { openSearchPanel } from "@codemirror/search";

let editorView = null;
onMounted(() => {
  editorView = new EditorView({ ... });

  () => props.showSearch,
  (newShowSearch) => {
    console.log({ newShowSearch }); // this happens

    // but none of these attempts work

Can you give some direction on how to dispatch the openSearchPanel command programmatically?


Example: Try CodeMirror

Thank you, @Michiel.