Блог

Я использую редактор 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);
  }
 

Чего бы я хотел, так это того, что результат может быть перемещен или удален как глобальная часть и не может быть изменен.

Спасибо за вашу помощь.

Я думаю, что вы ищете Draftjs ‘ entities . Скажем, если вы примените объект с IMMUTABLE , он будет рассматриваться как недоступный для редактирования, и если вы попытаетесь удалить часть слова, все это будет удалено.

Вот официальный пример draftjs, использующий сущности, но использующий предварительно отмеченные сегменты. Я думаю, что в вашем случае это было бы так же просто, как сделать что-то подобное внутри 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");