有没有办法在draftjs中添加牢不可破的实体？

Question

我正在使用draftjs编辑器。我有一个装饰器，可以通过正则表达式检测一些文本，并生成一个自制组件。这个是调用API并通过用API的结果替换初始文本来返回结果。

我希望将此结果作为一个不可破解，不可编辑的实体，我不知道该怎么做。

这是我用来取代价值的功能

/**
   * Replace text in editor
   *
   * @param {Object} editorState  - State of the editor
   * @param {string} search       - Search value
   * @param {string} replaceValue - replacement value
   *
   * @returns {Object} Returns the new editorState with link removed
   */
  static replace(editorState, search, replaceValue) {

    if (typeof search === 'undefined' || search === null) {
      return editorState;
    }

    const regex = new RegExp(escapeStringRegexp(search), 'g');
    const blockMap = editorState.getCurrentContent().getBlockMap();
    const selectionsToReplace = [];
    blockMap.forEach((contentBlock) => (
      findWithRegex(regex, contentBlock, (start, end) => {
        const blockKey = contentBlock.getKey();
        const blockSelection = SelectionState
          .createEmpty(blockKey)
          .merge({
            anchorOffset: start,
            focusOffset: end,
          });

        selectionsToReplace.push(blockSelection)
      })
    ));

    let contentState = editorState.getCurrentContent();

    selectionsToReplace.forEach(selectionState => {
      contentState = Modifier.replaceText(contentState, selectionState, replaceValue)
    });

    return draftEditorState.push(editorState, contentState);
  }

我想要的是结果可以作为全局部分移动或删除，不能更改。

谢谢你的帮助。

Answer 1

我想你正在寻找的是Draftjs的entities。假设您使用IMMUTABLE应用实体，它将被视为无法编辑，如果您尝试删除部分单词，则整个内容将被删除。

这是官方的draftjs example using entities，但使用预先标记的段。我认为在你的情况下，就像在findWithRegex中做这样的事情一样简单（没有测试过，所以这可能是关闭的 - 只是试图让想法得到解决）：

let newContentState = editorState.getCurrentContent();

findWithRegex(regex, contentBlock, (start, end) => {
  const blockKey = contentBlock.getKey();
  const blockSelection = SelectionState
    .createEmpty(blockKey)
    .set("anchorOffset", start)
    .set("focusOffset", end);

  const searchEntity = content.createEntity(
    "SEARCH", // type
    "MUTABLE", // mutability <--
  );
  const entityKey = content.getLastCreatedEntityKey();

  newContentState = Modifier.applyEntity(searchEntity, blockSelection, entityKey);
})

return EditorState.push(editorState, newContentState, "apply-search-styling");