javascript - 如何构建类似 Gmail 的 Smart Compose？可能在文本区域？

Question

新的预测类型特征 Smart Compose Gmail 非常有趣。

假设我们想自己实现这样的功能:

1. 用户输入文本的开头，例如如何 并且在它后面以灰色显示是你吗？。
2. 用户点击 TAB 并设置明天这个词。

例子:

可以使用带有 Javascript 的 textarea 来实现吗？

如果没有，如何实现？

Answer 1

我之前的回答被删除了，所以这里有一个更好的尝试来解释我是如何在某种程度上复制 Smart Compose 的。我的回答只关注相关方面。参见 https://github.com/jkhaui/predictable获取代码。

1. 我们在我们的解决方案中使用 vanilla js 和 contenteditable(就像 Gmail 一样)。我使用 create-react-app 和 Medium-Editor 引导我的示例，但 React 和 Medium-Editor 都不是必需的。

2. 我们有一个“建议”数据库，它可以是一组单词或短语。出于我们的目的，在我的示例中，我使用了一个包含 50,000 多个常用英语短语的静态数组。但是您可以很容易地看到这可以如何替代动态数据源 - 例如 Gmail 如何使用其神经网络 API 来根据用户电子邮件的当前上下文提供建议:https://ai.googleblog.com/2018/05/smart-compose-using-neural-networks-to.html

3. Smart Compose 使用 JavaScript 插入 <span></span>当它检测到要建议的短语时，紧跟在您正在写的单词之后的元素。 span 元素仅包含尚未输入的建议字符。

例如假设您写了“嗨，怎么样”，然后出现了一条建议。假设整个建议是“你今天过得怎么样”。在这种情况下，建议在跨度内呈现为“re you going today”。如果您继续在占位符中键入字符 - 例如“嗨，你好吗” - 那么跨度的文本内容会动态变化 - 这样“ng today”现在就是跨度内的文本。

我的解决方案略有不同，但实现了相同的视觉效果。不同之处在于我无法弄清楚如何在用户当前文本附近插入一个内联跨度并动态改变跨度的内容以响应用户的输入。因此，相反，我选择了包含建议的覆盖元素。现在的诀窍是将覆盖容器准确定位在最后键入的单词(将呈现建议的位置)上。这提供了与内联预输入建议相同的视觉效果。

1. 我们通过计算最后输入的单词的左上角坐标来实现覆盖层的正确定位。然后，使用 JavaScript，我们耦合覆盖容器的顶部和左侧 CSS 属性，以便它们始终与最后一个单词的坐标匹配。棘手的部分是首先获取这些坐标。一般步骤是:

   • 调用window.getSelection().anchorNode.data.length它检索用户正在写入的当前文本节点并返回其长度，这是计算最后一个单词在其父元素中的偏移量所必需的(在以下步骤中解释)。
   • 为简单起见，仅当插入符位于文本末尾时才继续。
   • 获取我们所在的当前文本节点的父节点，然后获取父节点文本内容的长度。

   • 父节点的文本长度 - 当前文本节点的(即最后一个单词的)文本长度 = 最后一个文本节点在其 contenteditable 父节点中的偏移位置。

   • 现在我们有了最后一个单词的偏移量，我们可以使用各种range在最后一个单词之前插入一个 span 元素的方法:https://developer.mozilla.org/en-US/docs/Web/API/Range

   • 我们称这个跨度元素为shadowNode .在心理上，您现在可以将 DOM 想象成这样:我们有用户的文本内容，并且我们有一个 shadowNode 放置在最后一个单词的位置。
   • 最后，我们调用getBoundingClientRect在返回特定元数据的 shadowNode 上，包括我们所追求的顶部和左侧坐标。
   • 将顶部和左侧坐标应用于建议覆盖容器，并添加适当的事件处理程序/监听器以在按下 Tab 键时呈现建议。