Set key for input rules plugin

1

I want to “toggle” a input rule (using editorState.reconfigure() to change the active plugins)

The question is how to know if the input rule plugin is active or not

I think the solution is about using the PluginKey, but it seem the inputRules function can’t accept a key when we create a plugin for input rules

Or other mehod to tell a plugin is active or not without pluginkey?

2

You could keep some custom plugin state to store whether your input rules are active.

4

Thanks for reply.

But I don’t really figure out how to set plugin state for the input plugin.

I check out the function to build the plugin for input rules again

inputRules({rules: readonly InputRule[]}) → Plugin<{transform: Transaction, from: number, to: number, text: string} | null>

but it just accept some InputRule

And some background about the feature I want to achieve:

  • a InputRule like match # to convert the paragraph node to heading node
  • a checkbox for user toggle this rule, when the checkbox checked, build a plugin for this rule to apply it

some example code about it

const headingInputRulePlugin = inputRules({
  rules: [
    // the input rule for heading
  ],
});

checkbox.addEventListener('change', (event) => {
  const activePlugins = editorView.state.plugins;

  let newPlugins;
  if (event.target.checked && !activePlugins.includes(headingInputRulePlugin)) {
    newPlugins = [headingInputRulePlugin].concat(activePlugins);
  } else if(!event.target.checked && activePlugins.includes(headingInputRulePlugin)) {
    newPlugins = activePlugins.filter(plugin => plugin !== headingInputRulePlugin);
  }

  if(newPlugins) {
    const newState = editorView.state.reconfigure({
      plugins: newPlugins;
    });
    
    editorView.updateState(newState);
  }
});

but activePlugins.includes(headingInputRulePlugin) always return false