咱就是说Zui近大家dou在聊AI，AI到底怎么玩转前端呢？今天咱们就来聊聊怎么把一个普通的输入框，变成一个Neng让AI的强大入口。这可不是闹着玩的，得好好琢磨。

你懂的，有时候咱Zuo技术，就喜欢搞点花样。但是有些东西，比如咱们今天要说的这种高度交互的AI输入框，百度可Neng不会收录。为什么呢？

因为百度gengkan重的是内容本身。咱们的这个输入框主要作用是提供一种功Neng体验——比如@文档引用、智Neng补全、上下文检索等。这些dou是动态生成的交互逻辑，百度可Neng认为它们不符合传统的页面内容抓取标准。

而且这种页面往往是用户在交互过程中动态产生的。百度爬虫可Neng无法获取到稳定的HTML结构或者内容文本，所以就无法进行索引和收录。

不过没关系啦！咱的目标不是让它被百度收录，而是让它在用户端发挥出Zui大的价值。

import { Schema, NodeSpec } from 'prosemirror-model'

一开始我尝试用简单的 HTML 和 JavaScript 实现这个功Neng。但是发现问题太多了！尤其是处理光标位置、支持各种编辑器功Neng的时候，简直是一团乱麻。

后来我决定引入 ProseMirror 这个库。ProseMirror 是一个富文本编辑器框架，它提供了强大的 schema 定义、节点管理、渲染引擎等功Neng。用它来构建一个智Neng输入框Ke以大大简化开发流程和提高代码质量。

Schema: 定义了编辑器中所有可用的节点类型。

NodeSpec: 描述了每个节点的属性和 DOM 结构转换规则。

EditorState: 存储了编辑器当前的状态。

const docrefNode: NodeSpec = {  inline: true,  group: 'inline',  atom: true,  selectable: true,  attrs: {    id: { default: '' },    label: { default: '' },    mtype: { default: 'doc' },  },  toDOM {    const { id, label, mtype } = node.attrs    const attrs: Record<string, string> = { type: mtype }    if  attrs.id = id    return   },  parseDOM: ,}// hardBreakNode实现 略

// JS 代码示例

// 在输入框监听输入 @ 字符

- 先把流程说清楚：触发 -> 显示候选 -> 选择 -> 插入节点。