SlateJs RenderMark в более чем одном плагине - PullRequest
Новая
       18

SlateJs RenderMark в более чем одном плагине

1 голос
/ 05 июля 2019

Я использую 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 не работает.

1 Ответ

0 голосов
/ 11 июля 2019

Вы должны вернуть next(), а не просто позвонить.После этого ваши плагины должны запускаться в последовательности, указанной в списке, и продолжать передавать события до тех пор, пока один из них не не вернет next().

Надеюсь, это поможет!

...