What's the dollar + integer in PluginKey?

I’m trying to understand how PluginKeys work. When I create them with a string, e.g. “tooltip”, I see that the PluginKey’s “key” property is that string followed by a dollar sign, and (sometimes) followed by an integer.

What is this “dollar integer” and what does it mean?

I’ve found that sometimes my .get and .getState calls return undefined because the “dollar integer” of my plugin key and the “dollar integer” inside the EditorState don’t match. What causes this?

(Note that I am using multiple instances of ProseMirror on the page, although I’m only loading one “tooltip” plugin per instance.)

Plugin keys generate a unique string to use as property name when you create them. If the property in the state doesn’t match the one in your key, you are using the wrong key, or you’re loading your module several times due to bundler/module loader issues, thus creating multiple keys.

Yeah, I think the issue is that I was treating the PluginKey kind of like a DOM querySelector - i.e. assuming that putting in the same string any number of times always gives you the same object in return, when in fact, you’re just meant to create the key once and keep that key around.

What I’m still not getting, then, is what’s the benefit of having the key at all in that case? If you already need to keep a reference to the key instance to get at the plugin instance, what’s the benefit over keeping a reference to the plugin instance itself instead?

The docs cover that.

The docs say

it is possible to access the plugin’s configuration and state through the key, without having access to the plugin instance object.

But the docs don’t explain why having access to the key should be any easier than having access to the plugin instance object.

Calling new PluginKey("tooltip") just creates a “new” key, rather than letting me get at the “existing” one, right? So if the only option is to pass around the “existing” key, what’s the benefit over passing around the “existing” plugin instance object?

The field is optional. Don’t bother with it if you don’t need it. Something like the undo command needs to be able to find the history plugin, despite not having created it. This is where unique plugins and keys are useful.

Yeah, accessing the plugin from a command is exactly what I was trying to do. I was getting confused as to how to go about “finding the key.”

Since it’s originally “keyed” to a unique string, it seemed like I should be able to use that same unique string to get at the key, and got confused when that didn’t work.

Anyway, I looked through how some “stock” ProseMirror plugins do it, and it looks like they just have the plugin key as a separate export from the same file that exports the plugin itself, e.g. as in tableColumnResizing.

That works, so I’m all squared away, thanks!

Hey @ericksonc , I know this is an old question but I don’t get then how to access a plugin.

I was trying to get the state for the tableColumnResizing plugin but when I do this:

const tableColumnResizingKey = new PluginKey('tableColumnResizing');

I get a new a new key tableColumnResizing$1 (with the $1 attached).

I don’t understand from the documentation how can I get the state from the tableColumnResizing plugin that is already there.