Question

我想实现像标签编辑器这样的东西。但是，它仅适用于那些标签，因此我希望用户看到自动填充建议弹出窗口，而无需键入类似 @ 或＃的内容，只需输入文本本身。

我有一些 kinda 的作品，但弹出窗口显示在屏幕上的奇怪位置：

当我第一次输入内容并弹出窗口时，它出现在屏幕左上角附近
创建第一个实体后，按 SPACE 并再次开始输入时，弹出窗口会从它的直观位置（即在单词的第一个字母下方）右侧出现几个像素< / LI>

这是一个众所周知的编辑器的例子（虽然没有用草稿实现），所以你可以更好地理解我想要实现的内容。

首先，这是触发建议弹出窗口的函数：

private onChange(editorState: EditorState) {
  const content = editorState.getCurrentContent();
  const selection = editorState.getSelection();
  const currentBlock = content.getBlockForKey(selection.getAnchorKey());

  if (selection.isCollapsed()) {
    const blockText = currentBlock.getText();
    const wordMeta = getWordAt(blockText, selection.getAnchorOffset());
    const categoryRegex = /([\w]*)/;
    const matches = wordMeta.word.match(categoryRegex);
    const existingEntity = currentBlock.getEntityAt(wordMeta.begin);

    if (!existingEntity && matches) {
      const categorySearch = matches[1];
      const selection = window.getSelection();
      if (this.state.autoComplete.search !== categorySearch && selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        const boundingRect = getRangeBoundingClientRect(range);

        this.setState((prevState: StateType) => {
          let state = {
            autoComplete: {
              active: true,
              search: categorySearch,
              searchMeta: {
                begin: wordMeta.begin,
                end: wordMeta.end,
              },
            },
            selectionRect: prevState.selectionRect,
          };

          if (prevState.autoComplete.active === false) {
            state.selectionRect = boundingRect;
          }

          return state;
        });
      }
    }
  }

  this.props.onChange(editorState);
}

以下是getWordAt功能：

function getWordAt(text: string, pos: number): WordMeta
{
  const left = text.slice(0, pos + 1).search(/\S+$/);
  const right = text.slice(pos).search(/\s/);

  if (right < 0) {
    return {
      word: text.slice(left),
      begin: left,
      end: text.length,
    };
  }

  return {
    word: text.slice(left, right + pos),
    begin: left,
    end: right + pos,
  };
}

什么是处理弹出窗口位置的更好方法，甚至可能是自动完成此类策略？谢谢！

Answer 1

而不是draft-js-typeahead - TypeaheadEditor是一个包含草稿编辑器的反应组件。您可以使用符合要求的 React-Autosuggest 组件。它具有自定义渲染，可与React元素本机一起使用。它快速且易于定制。完全控制建议渲染。

我们可以让它处理JS对象而不是普通的字符串。

onSuggestionSelected道具是获取所选建议的回调
suggestionRenderer方法接受建议并返回React标记

查看React-Autosuggest。

您可以使用custom block renderer使用上面的组件，可以在编辑器的框架内引入复杂的丰富交互。

你必须打破头脑才能达到你想要的目标，而不是直截了当。这是我的建议，通过它你可以实现它，但它并不那么容易。

在草稿JS中实现自动完成但没有像“@”这样的“触发器”

1 个答案: