Change registerPlugin to add plugin after Extensions plugins #658
Conversation
This commit changes `registerPlugin` by 1. adding the new plugin to `this.plugins` and 2. updating `this.plugins` within `this.state.plugins` by splicing with the new `this.plugins` length. Previously, new plugins were simply added to the end of `this.state.plugins` and were not appended to `this.plugins`. By placing new plugins at this new location within `this.state.plugins`, we prioritize registered plugins over default ProseMirror plugins such as `keymap(baseKeymap)`. This will allow new plugins to have precedence over props such as `handleKeyDown`.
packages/tiptap/src/Editor.js
Outdated
| this.plugins.push(plugin); | ||
| this.state.plugins.splice(this.plugins.length, 0, plugin); | ||
| const newState = this.state.reconfigure({plugins: this.state.plugins}); |
There was a problem hiding this comment.
Should be the same with [plugin, ...this.state.plugins], right? 🤔
There was a problem hiding this comment.
Pushing new plugins to the front of this.state.plugins could also work, as long as they're in-front of the default ProseMirror plugins.
An alternative to accommodate both of these solutions would be to modify parameters of registerPlugin, and to allow a helper function to be passed in, e.g.
registerPlugin(plugin, helper) {
let plugins = typeof helper == 'function' ? helper(plugin, this.state.plugins) : [...plugin, this.state.plugins];
const newState = this.state.reconfigure({plugins});
this.view.updateState(newState)
}This would allow custom behavior for where new plugins should be registered within this.state.plugins. An example is if plugins had to be registered in a certain order. Thoughts?
There was a problem hiding this comment.
This is great! Lets do this!
There was a problem hiding this comment.
Ok, I've updated the PR to allow a function to be passed in. :)
This commit changes
registerPluginby 1. adding the new plugin tothis.pluginsand 2. updatingthis.pluginswithinthis.state.pluginsby splicing with the newthis.pluginslength. Previously, new plugins were simply added to the end ofthis.state.pluginsand were not appended tothis.plugins.By placing registered plugins at this new location within
this.state.plugins, we prioritize registered plugins over default ProseMirror plugins such askeymap(baseKeymap). This will allow new plugins to have precedence over props such ashandleKeyDown. A use case of this defining a floating Editor Menu that's navigable with arrow and enter keys.