前言
2025年技术圈最火的技术浪潮无疑就是AI了，web端ai对话也是各大厂投放模型的核心训练点，身为前端仔的我们不会好奇那些核心的的交互功能实现方式吗？什么流式数据响应打字机、Markdown增量渲染更新、在线编辑预览运行代码、模版式输入框
今天细嗦一下模版式输入框
1. 什么是模版式输入框？
就拿市面上前端交互做的很细致的豆包来最直观的感受吧，打开豆包网页端-帮我写作模块
诶？发现下面提供了很多卡片项，点击这些卡片项当前输入框出现了预设的模版内容并提供用户在这些预设的模版里输入内容，比如标签输入框、下拉选择框，天呐这还是我们认识的输入框吗，传统输入框不是只能提供用户输入文字的嘛，这些乱七八糟的元素是怎么插入到输入框里面的？
2. 豆包模版式输入框基于slate插件实现
当我们好奇一个网页交互的实现方式时，不妨打开浏览器的控制台细看一下他的元素结构先，先看看他们是不是基于某些现有的插件实现的。
嗯？发现这些元素节点怎么都有一个相同规则的属性data-slate-xxx="xxx"，让我们师夷长技以制夷的问下豆包这是麻子东西哩？
好家伙，咋说怪不得能在输入框里随意的编写插入元素原来豆包这个输入框使用的是Slate.js他的本质其实就是一个富文本编辑器，这个插件可了不得了，做到了轻量化而且市面上很多主流的富文本业务都是基于该插件封装的，slate中文文档地址感兴趣的小伙伴可以去了解一下
3.业务中接入slate插件的痛点
1.不能直接支持Vue框架系列使用
2.上手门槛高，需要一定的学习成本不能帮助你快速构建你的业务场景
3.依然需要封装者很细致化的了解光标、DOM处理，否则即使是豆包封装的模版输入框也存在交互瑕疵，后面列举说明
豆包模版输入框现有的交互瑕疵
输入框中存在大量的模版的页面流畅度效果表现
豆包的效果图，异常卡顿感，尤其是后面的长按删除直接近似无响应
预期理想的效果图
标签输入框内容过长时承接上下文的效果表现
豆包的效果图，效果表现的非常突兀，这个标签块直接变成了一个整体块
预期理想的效果图
标签输入框进行换行退格的效果表现
豆包的效果图，直接另创建一个新的标签块，导致退格产生突兀的效果
预期理想的效果图
将内容文本粘贴在标签输入框的效果表现
豆包的效果图，行与行之间存在的空行
预期理想的效果图
长按退格键删除模版内容的效果表现
豆包的效果图，存在有些标签输入框无法被衔接删除
预期理想的效果图
XSender 轻量级免费插件，前端小白也能快速接入使用
体验上面理想预期效果的在线预览地址
