draft.js 和装饰器的文本选择错误

Question

我正在使用 draft.js 编辑器，我需要更新装饰器以及它在 onChange 中动态渲染的组件的道具。这用背景色标记部分文本。

我几乎可以让它工作，但是有一个奇怪的错误，除其他外，不可能 select 字符紧跟在装饰组件之一之后。

这是重现错误的最小（人工）示例：

import React from 'react';
import { CompositeDecorator, Editor, EditorState } from 'draft-js';


const Marked = ({ children, background }) => <span style={{ background }}>{children}</span>;


class TestEditor extends React.Component {
  constructor(props) {
    super(props);

    this.state = { editorState: EditorState.createEmpty() };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(editorState) {
    const markers = [{ from: 3, to: 7 }, { from: 12, to: 15 }];

    const strategy = (contentBlock, callback) => {
      const text = contentBlock.getText();
      markers.forEach(({ from, to }) => {
        if (text.length >= to) callback(from, to);
      });
    };

    const decorator = new CompositeDecorator([
      { strategy, component: (props) => <Marked {...props} background="#00ff2a1a" /> },
    ]);

    const newEditorState = EditorState.set(editorState, { decorator });

    this.setState({ editorState: newEditorState });
  }

  render() {
    const { editorState } = this.state;

    return <Editor editorState={editorState} onChange={this.handleChange} />;
  }
}

export default TestEditor;

这将是一个文本输入，其中位置 3 - 7 和 12 - 15 的文本具有绿色背景（如果存在）。

如果我现在写 aaabbbbccc 就不可能 select 第一个 c。使用鼠标 selected 直到我释放鼠标按钮；使用键盘似乎根本没有 selected（可能是暂时的）。

如果我在 handleChange 方法中使用没有新输入的静态组件，它工作正常：const decorator = new CompositeDecorator([{ strategy, component: Marked }]);。然而，这不适合我的用例。

有什么建议吗？

Answer 1

最后证明我可以用草稿 entities 做我需要的，可能性能更好

draft.js 和装饰器的文本选择错误

Text selection bug with draft.js and decorator

javascript

draftjs