Action on change in editor state

1

I have been stuck on this problem for some time. My application is in Angular ES6, and so is the prosemirror module that I am building

Now I have made a custom menu, but I need to show the toggled marks, and their attributes(such as font-color). In the example setup, the menu was rendered on every input, and I want to recreate the same. Any APIs that would let me execute a function(that would update the menu) based on the cursor position/selection

Thanks in advance :slight_smile:

1 Like
2

You could set up a dispatchTransaction prop that, after applying the transaction and updating the editor view’s state, also updates your menu. Or alternatively, provide a plugin with a plugin view to the editor, and use that view’s update method.

1 Like
3

Thank you so much for the quick reply :smiley: I guess dispatchTransaction should work

Thanks again And great work with ProseMirror

4

@marijn so how would one decide to enable or disable menu items based on a transaction?

I’m guessing I should be able to know whether a selection has a strong mark to disable the bold button, but I’m not sure how I can know that based on a transaction.

5

You don’t need a transaction for that—you can just look at the current document.

6

Thanks for the tip.

If anyone stumbles upon this here’s how to get the mark names in the current selection:

const from = transaction.curSelection.from;
const to = transaction.curSelection.to;
const selectionMarks = new Set();

transaction.doc.nodesBetween(from, to, (node) => {
	node.marks.forEach((mark) => {
		selectionMarks.add(mark.type.name);
	});
});

console.log(Array.from(selectionMarks));

With the contents of Array.from(selectionMarks) it should be simple to determine which elements of the menu should be hidden, highlighted, disabled, etc.