Есть ли способ добавить сущность в draftjs, которые неразрушимы? - PullRequest
0 голосов
/ 15 апреля 2019

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

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

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

1 Ответ

0 голосов
/ 29 апреля 2019

Я думаю, что вы ищете 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");
...