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: https://github.com/joaomelo/textorama/blob/main/src/view-editor.vue
import { openSearchPanel } from "@codemirror/search";

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

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

    // but none of these attempts work
    openSearchPanel();
    editorView.dispatch(openSearchPanel);
    editorView.execCommand(openSearchPanel);
  }
);

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

openSearchPanel(editorview)

Example: Try CodeMirror

1 Like

Maravilha!
Thank you, @Michiel.