Slate JS: как создать встроенный узел из JSON

Question

Я пытаюсь научиться использовать Slate-JS, и у меня есть проблема. Мне нужно поставить class="custom-error" на промежутке, который может содержать много листьев (много других промежутков с классами). Я работал с блоками, но не могу сделать рендеринг строк без ошибок.

Я хочу использовать вложенные строки, потому что отображение блока в виде span прерывает некоторые варианты поведения, такие как переводы строк и тому подобное.

Вот что я попробовал:

Начальное значение:

{
  "object": "value",
  "document": {
    "object": "document",
    "data": {},
    "nodes": [
      {
        "object": "block",
        "type": "paragraph",
        "data": {},
        "nodes": [
          {
            "object": "inline",
            "type": "custom-error",
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "object": "leaf",
                    "text": "Some Text",
                    "marks": [
                      {
                        "object": "mark",
                        "type": "error",
                        "data": {}
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Замена inline от block молчать аварии, но ломает новые линии.

TextEditor.js:

class TextEditor extends React.Component {
  state = {
    value: initialValue
  };

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

  render() {
    return (
      <Editor
        value={this.state.value}
        onChange={this.onChange}
        renderNode={this.renderNode}
        renderMark={this.renderMark}
        spellCheck={false}
      />
    );
  }

  renderNode = (props, editor, next) => {
    console.log(props.node.type);
    switch (props.node.type) {
      case "custom-error":
        return <span className="custom-error">{props.children}</span>;
      default:
        return next();
    }
  };

  // Add a `renderMark` method to render marks.
  renderMark = (props, editor, next) => {
    switch (props.mark.type) {
      case "error":
        return <span className="error">{props.children}</span>;
      default:
        return next();
    }
  };
}

Вот живой пример.

К сожалению, это терпит неудачу с этой ошибкой:

ошибка

Неожиданный кадр при создании стека.

Как я могу это исправить и все же получить желаемое поведение? Благодарю.