多个插件中的 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

你要returnnext()，不能随便叫。之后你的插件应该按照它们列出的顺序触发，并继续向下传递事件直到其中一个不 return next().

希望对您有所帮助！

多个插件中的 SlateJs RenderMark

SlateJs RenderMark in more than one plugin

javascript

reactjs

slatejs