How to highlight a block from a button

1

Hi there, I’ve read the docs and a range of examples but still struggle with this one sorry. I’m still a beginner with Prosemirror.

The Problem

I’m writing in React, and I want to be able to enable users to click a button to cycle through highlighting each block of the editor which would add a class ‘active’ to them so that each block can be highlighted with a border with css.

What I’ve tried

I looked into creating a plugin, but that seemed to be triggered only when there was an interaction with the editor itself, and in this case the button to cycle through highlighted the blocks is external to the editor.

Any help on a good approach here would be much appreciated.

Thanks in advanced.

Matt

2

First, check whether node selections are what you want (the editor already comes with a way to ‘select’ a specific node). If not, the way to communicate external events to plugin state is to dispatch a transaction with metadata that the plugin knows how to interpret.

3

Ok, thanks. I’ll look into how to do that. Appreciate your quick response.