多个插件中的SlateJs RenderMark

Question

我在多个插件中使用renderMark，但是只有插件堆栈中的顶级插件才会被调用，其余的将被忽略。

//第一个插件

function MarkHotkey(options) {
  const { type, key, RenderTag, icon } = options

  return {
    onKeyDown(event, editor, next) {
      if (!event.ctrlKey || event.key != key) return next();
      event.preventDefault();
      editor.toggleMark(type)
    },
    renderMark(props, editor, next){
      const { children, mark, attributes } = props;
      if(type === mark.type){
       return <u {...attributes}>{children}</u>
     }
      next();
    }

//第二个插件

function MarkHotkey1(options) {
  const { type, key, RenderTag, icon } = options
  return {
    onKeyDown(event, editor, next) {
      if (!event.ctrlKey || event.key != key) return next();
      event.preventDefault();
      editor.toggleMark(type)
    },
    renderMark(props, editor, next){
      const { children, mark, attributes } = props;
      if(type === mark.type){
       return <i {...attributes}>{children}</i>
      }
      next();
    }

//插件阵列

const plugins = [
  MarkHotkey1({ key: 'i', type: 'italic' ,RenderTag : 'em',icon :''}),
  MarkHotkey({ key: 'u', type: 'underline' ,RenderTag : 'u',icon :''}),
]

//带有插件的呈现编辑器

class App extends React.Component {
  state = {
    value: Value.fromJSON(initialValue), // editor initialisation
  }

  onChange = ({ value }) => {
    this.setState({ value })
  }

  render() {
    return <Editor 
    value={this.state.value} 
    onChange={this.onChange}
    plugins={plugins}
    />
  }

}

export default App;

当我按下ctrl+i时，它正按预期工作，而ctrl+u则无法工作。

Answer 1

你必须返回next()，而不仅仅是调用它。在此之后，您的插件应该按列出的顺序启动，并继续传递事件，直到其中一个插件不返回next()。

希望这能有所帮助！