所见即所得编辑器原理？给Tiptap加持AI秒变免费Notion(三)

先前的两篇文章，我们了解了所见即所得编辑器的原理，接下来，我们就要开始在知晓原理情况下搞点事情了，给所见即所得加持上AI的能力。本文，我们将给所见即所得编辑器，当然是基于Tiptap实现的，增加AI能力，大致分为三个功能点。

AI加持后的所见即所得编辑器功能一撇

• 使用空格键唤起一个与ChatGPT对话的对话框，在基于一个话题对话之后，我们可以选择将对话的内容插入到编辑初，其操作体验如下所示

• 使用/唤起一个菜单，我们可以选择基于已有的文本进行续写，其大概的体验如下所示：

• 选中一段文字，弹出一个对话框，我们可以基于选中的文字做，文本扩写，风格改写，文本翻译等等一些操作，其操作体验如下所示：

如何实现这些功能

上面，我们领略了一下AI加持后的Tiptap编辑器的样子，看起来时机已经有点NotionAi的影子了。那么，为啥要自己实现呢？因为Notion 引入 ChatGPT辅助创作，这种体验真的很好，沉浸式的编辑体验，但是缺点也是很大。

• Notion AI的能力太贵了，每个月10美元。
• Notion AI据说是接入的 GPT 3 ，3.5都不愿意给，很坏很坏的，从目前看，这已经是一个比较落后的模型了，而且这么久都没更新过。
• 灵活度不够，不能随意切模型，比如以后我可以切换腾讯的混元大模型，这就意味着我们自己没法基于自己写作风格来fine-tune自己的模型。

说一千，到一万，反正，我们就是得自己造轮子了。

实现 敲击空格，唤起对话框与ChatGPT对话，并插入

实际上，我们首先空格，呼出一个对话框和ChatGPT对话的功能是在 Extension 实现的 addProseMirrorPlugins做的，如下，我们需要监听 event.code === 'Space' 事件，一旦用户敲击空格，就呼出对话框，对话框就的职责就是和ChatGPT对话，最后将对话的内容插入到编辑器editor的光标处即可，整个流程图如下：

其核心代码如下所示。

addProseMirrorPlugins() {
     const editor = this.editor;
     const { enableAIChat } = this.options;

     return [
       new Plugin({
         key: new PluginKey('ai-event-handler'),
         props: {
           handleKeyDown(_, event) {
             if (event.code === 'Space') {
               const nodeText = getTextContentFromNodes(editor.state.selection.$from);
							// 唤起对话框，与ChatGPT对话
               // 将对话类容格式化为document，插入到 editor 的focus 处
               return false;
             }
           }
         }
       })
     ];
   }

editor相关API使用是关键

举一个例子，如果你想让选中的文本加粗，是可以这么玩的

// Execute two commands at once
editor.chain().toggleBold().focus().run()

如果我们想在光标处增加内容，比如AI的返回响应，该怎么办呢？

其实很简单，我们看看这个

// Plain text
editor.commands.insertContent('Example Text')

// HTML
editor.commands.insertContent('<h1>Example Text</h1>')

通过editor的commands的insertContent API 去插入内容即可。

所以，整体上来讲，给所见即所得编辑器增加AI加持的能力，无非就是这些API的调用。

那么，后续我们可能还要实现 /，弹出菜单，和实现选中文本弹出菜单，其实现思路和敲击空格键呼出对话框的功能极其类似，就不一一介绍。完整的demo体验可以去utools插件市场，安装 aition体验。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！