Find and replace - open modal from outside in read-only mode

[Madejczyk]

📝 Provide a description of the improvement

Is it possible to open find and replace modal, not from ckeditor when editor is in read-only mode and doesn't have toolbar (implementation of https://ckeditor.com/docs/ckeditor5/latest/features/read-only.html) , but in the button which is outside? Right now I can call only editor.execute("find", "jakub").

📃 Other details

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Madejczyk]

Workaround for this:

const event = new KeyboardEvent("keydown", {
            bubbles : true,
            cancelable : true,
            key : "f",
            ctrlKey: true,
            shiftKey : false,
            keyCode : 70
        });
        this.editor.keystrokes.press(event)

But unfotunately also not worked in read-only mode

[mlewand]

Good question. The only way to open this at this point is to do some hacking and finding proper button in the  toolbar items (editor.ui.view.toolbar.items) collection:

const findAndReplaceDropdown = Array.from( editor.ui.view.toolbar.items ).filter( item => item.buttonView && item.buttonView.label === 'Find and replace' )[ 0 ];

if ( findAndReplaceDropdown ) {
    findAndReplaceDropdown.buttonView.fire( 'execute' );
}

But that's super hacky. E.g. if UI is created in a different language this label comparison will no longer work.

I think it's a part of a bigger challenge where we'd need to think how to expose UIs like that. Same thing would be useful to bring table drodpwon, emoji dropdown etc.

[Madejczyk]

Unfortunately above code is not working in read-only mode

private onFindButtonClick = () => {
    const findAndReplaceDropdown = Array.from(this.editor.ui.view.toolbar.items)
        .find(({buttonView}) => buttonView?.label === 'Find and replace');

    if ( findAndReplaceDropdown ) {
        findAndReplaceDropdown.buttonView.fire( 'execute' );
    }
}