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

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

0 голосов
/ 19 февраля 2019

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

Я хочу использовать вложенные инлайн-строки, потому что при отображении блока в виде span 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();
    }
  };
}

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

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

Ошибка

Неожиданный кадргенерирующий стек.

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

...