Question

我正在尝试学习如何使用Slate-JS，但遇到了问题。我需要在可能包含许多叶子的跨度上放置一个class="custom-error"（许多其他带类的跨度）。我将其与块配合使用，但是无法使内联渲染没有错误。

我想使用嵌套的内联，因为在跨度上显示块会破坏某些行为，例如换行等。

这是我尝试过的：

初始值：

{
  "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();
    }
  };
}

这里是live example。

可悲的是，它失败并出现以下错误：

错误

通过生成堆栈出现意外帧。

如何解决此问题并仍然获得所需的行为？谢谢。

Slate JS：如何从JSON创建内联节点

0 个答案: