javascript - Draft JS Modifier.ReplaceText 撤消/重做错误

Question

背景:

使用 Draft-JS，我有一段代码，在单击“返回”时将用实体替换单词，因此用户输入“我爱茄子”，然后输入“返回”，他们应该看到“我爱:茄子:” '

问题

添加实体后，当我执行撤消操作(ctrl z，没什么花哨的)时，它会删除我的所有句子，而不仅仅是实体。根据我读到的有关 Draft-JS 的内容，我预计它会恢复为“我爱茄子”，这是预期的效果。

链接

• 我的示例(如上所述工作)- https://codepen.io/anon/pen/VMpyPM
• 链接示例(使用按钮单击按预期工作)- https://codepen.io/Kiwka/pen/ZLvPeO

代码

为了提高可读性，此代码从完整代码中剥离出来，但正确演示了要点

const {
  Editor,
  Modifier,
  EditorState,
  RichUtils,
  CompositeDecorator,
  EditorChangeType,
  getDefaultKeyBinding,
} = Draft;

class Example extends React.Component {
  constructor(props){
    super(props)
    const compositeDecorator = new CompositeDecorator([
            { strategy: getEntityStrategy('LINK'), component: LinkComponent },
        ]);

    this.state = { editorState: EditorState.createEmpty(compositeDecorator) };
    this.onChange = (editorState) => { this.setState({editorState}) };
    this.handleReturn = this.handleReturn.bind(this);
  }

  handleReturn(e, editorState) {
    e.preventDefault();

    const { start, end, text } = getFullWordWithCoordinates(editorState);
    const contentState = editorState.getCurrentContent();
    const selectionState = editorState.getSelection();
    const contentStateWithEntity = contentState.createEntity(
      'LINK',
      'MUTABLE',
      { status: 'complete' }
    );
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
    const newContentState = Modifier.replaceText(contentState,
      selectionState.merge({ anchorOffset: start, focusOffset: end }),
      `:${text}:`,
      null,
      entityKey);
    const newEditorState = EditorState.set(editorState, { currentContent: newContentState });
    this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) });

    return 'handled';
  }

  render(){
    return (
      <div style={{border: '1px solid black', padding: '8px'}}>
        <Editor
          handleReturn={this.handleReturn}
          editorState={this.state.editorState}
          onChange={this.onChange} />
      </div>
    )
  }
}

function getFullWordWithCoordinates(editorState) {
    const selectionState = editorState.getSelection();
    const anchorKey = selectionState.getAnchorKey();
    const currentContent = editorState.getCurrentContent();
    const currentContentBlock = currentContent.getBlockForKey(anchorKey);
    const start = selectionState.getStartOffset();
    const end = selectionState.getEndOffset();
    const blockText = currentContentBlock.getText();
    let wholeWordStart = start;
    let wholeWordEnd = end;

    while (blockText.charAt(wholeWordStart - 1) !== ' ' && wholeWordStart > 0) {
        wholeWordStart--;
    }

    while (blockText.charAt(wholeWordEnd) !== ' ' && wholeWordEnd < blockText.length) {
        wholeWordEnd++;
    }
    return {
        text: currentContentBlock.getText().slice(wholeWordStart, wholeWordEnd),
        start: wholeWordStart,
        end: wholeWordEnd,
    };
}

function getEntityStrategy(type) {
    return function(contentBlock, callback, contentState) {
        contentBlock.findEntityRanges(
            (character) => {
                const entityKey = character.getEntity();
                if (entityKey === null) {
                    return false;
                }
                return contentState.getEntity(entityKey).getType() === type;
            },
            callback
        );
    };
}

const LinkComponent = (props) => (<span style={{ background: 'red'}}>{props.children}</span>)

ReactDOM.render(
  <Example />,
  document.getElementById('target')
);

Answer 1

EditorState.push() API 表示基于changeType，此 ContentState 可以被视为撤消/重做行为的边界状态。 我发现用户定义了changeType 将形成一个边界，因此只需进行推送即可:

改变

const newEditorState = EditorState.set(editorState, { currentContent: newContentState });

与

const newEditorState = EditorState.push(editorState, newContentState ,"addentity");