【免费下载链接】enriched-markdownMultiplatform Markdown-Based Rich Text Solution项目地址https://gitcode.com/gh_mirrors/re/enriched-markdown点击查看免费下载Enriched Markdown 是一款多平台 Markdown 富文本 SDK其 Mention提及功能让 App 轻松拥有 IM 风格的 用户 / #频道 体验用户输入自动弹出候选列表选中后以高亮胶囊样式呈现在文本中并像 Slack、Discord 一样支持整体删除、点击跳转。本文带你理解它的实现原理并快速上手这一功能。为什么需要 Mention 功能在聊天、评论、协作类应用中某人 是刚需交互。传统做法是自己在富文本编辑器里做 token 高亮、候选列表、整体删除等一整套逻辑工作量大且各端体验不一致。Enriched Markdown 的解决方案很巧妙Mention 本质上就是一个带自定义 URL 协议的 Markdown 链接。没有专门的 mention token一切复用链接能力显示端EnrichedMarkdownText把 mention 渲染成带样式、可点击的链接编辑端EnrichedMarkdownTextInput额外提供一套交互式的 mention 输入流程。核心设计Mention 就是一个链接一条 mention 的 Markdown 长这样Hey Alice来看看 #general 频道user://、channel://是自定义 URL 协议它同时驱动两件事样式通过markdownStyle.linkVariants按 URL 正则匹配为每类 mention 单独配色交互点击 mention 就是点击链接在onLinkPress回调里按协议区分路由。markdownStyle{{ linkVariants: { ^user:: { color: #1264A3, backgroundColor: #E8F5FB, underline: false }, ^channel:: { color: #065F46, backgroundColor: #D1FAE5, underline: false }, }, }}规则很简单每个 key 是与链接 URL 匹配的正则第一个命中的生效未指定的属性继承基础link样式。渲染器和编辑器共用同一份配置保证输入时的样子和最终显示一致。快速上手显示已包含 Mention 的内容在只读场景消息列表、评论流不需要任何特殊处理把 Markdown 交给显示组件、用linkVariants上色、在onLinkPress里按协议路由即可EnrichedMarkdownText markdown{Hey Alice, check out #general} markdownStyle{markdownStyle} onLinkPress{({ url }) { if (url.startsWith(user://)) openProfile(url); else if (url.startsWith(channel://)) openChannel(url); else Linking.openURL(url); }} /官方完整示例可参考 DisplayMentions.tsx这套显示方案在 Web 端同样可用。编辑 Mention四步提及流程让会写字。EnrichedMarkdownTextInput内置了一个交互式 mention 流程配合你自己的候选列表 UI 使用组件不内置选择器弹层、底部抽屉、内联列表随你实现步骤事件 / 方法说明1️⃣ 触发输入mentionIndicators中的字符或调用startMention()→onStartMention触发弹出你的候选列表2️⃣ 过滤每敲一个字符触发onChangeMention({ indicator, text })text是去掉触发符后的查询词3️⃣ 插入用户选中后调用ref.insertMention(Alice, user://alice)激活的 token 变成样式化链接4️⃣ 结束onEndMention触发选中、取消或光标移走收起候选列表最小可用示例完整代码见 Mentions.tsxEnrichedMarkdownTextInput ref{ref} mentionIndicators{[]} onStartMention{() setQuery()} onChangeMention{({ text }) setQuery(text)} onEndMention{() setQuery(null)} / {matches.map((u) ( Pressable key{u} onPress{() ref.current?.insertMention(${u}, user://${u})} Text{u}/Text /Pressable ))}匹配引擎完全由你掌控官方示例用startsWith前缀匹配换成子串、模糊搜索或远程搜索都不需要改任何配置——唯一要记得对网络请求做防抖因为onChangeMention每次击键都会触发。 工具栏场景比如提及某人按钮可以调用ref.startMention()主动插入触发符并打开流程若输入框未聚焦需先调用focus()。示例见 StartMention.tsx。让候选列表悬浮在光标旁onCaretRectChange会持续上报光标相对输入框的{ x, y, width, height }把它和输入框自身位置onLayout获取相加就能让候选列表像 IM 应用那样紧贴光标下方弹出style{{ position: absolute, left: inputLayout.x caretRect.x, top: inputLayout.y caretRect.y caretRect.height 4, }}布局简单时也可以跳过光标追踪把列表直接渲染在输入框下方。进阶把 Mention 渲染成带头像的胶囊在 React Native 包中iOS / Android只读端的 mention 还能以link pill形式呈现——一个带可选图标和文字的圆角胶囊整段作为一个单元参与换行视觉上接近真实 IM 的 胶囊。只需在linkVariants中加pill: true并通过linkPillContent按 URL 提供头像、昵称等内容详见官方指南 link-pills。实用建议与避坑清单整体删除光标移到 mention 上按退格会整体删除该 tokenSlack 风格无需自己处理insertMention需要激活的流程流程外调用是空操作最近提及这类工具栏按钮应改用insertLink(text, url)触发符按数组顺序第一个命中而非最长匹配[, ]中永远不会生效长触发符要放前面insertMention会自动补一个尾随空格下一个字符不是空白时光标停在空格后裸只触发 Start 不触发 Change所以示例在onStartMention里重置查询词编辑能力仅限原生端Web 端没有编辑器mention 输入 API 不存在显示与路由正常。底层实现上iOS 端的流程协调逻辑位于 ENRMMentionCoordinator.h感兴趣的朋友可以进一步阅读。延伸阅读资料路径官方 Mentions 指南docs/docs/rich-text-formatting/mentions.mdMentions 速览文档docs-md/MENTIONS.md输入组件 API 参考docs/docs/react-native/api-reference/enriched-markdown-text-input.mdLink Pills 指南docs/docs/react-native/guides/link-pills.md小结Enriched Markdown 用mention 链接的极简设计把 IM 风格的 Mention 拆成三步——linkVariants定样式、四步事件流做输入、onLinkPress做路由。一套配置同时覆盖显示与编辑跨 iOS、Android 体验一致是构建聊天与协作应用时非常省心的选择。赞分享【免费下载链接】enriched-markdownMultiplatform Markdown-Based Rich Text Solution项目地址https://gitcode.com/gh_mirrors/re/enriched-markdown点击查看免费下载相关推荐Arco Design Mentions 组件实战指南提及功能的触发机制与完整 API 详解Arco Design Mentions 组件实战指南提及功能的触发机制与完整 API 详解 Mentions 是 Arco DesignReact 版UI组件前端设计系统如何在5分钟内实现Twitter风格的提及功能Mention.js完整指南如何在5分钟内实现Twitter风格的提及功能Mention.js完整指南 想要在你的网站或应用中添加像Twitter那样的提及功能吗Mention.j前端UI库/组件ant-design-blazor Mentions 提及组件实战指南API 详解与源码级实现解析ant design blazor Mentions 提及组件实战指南API 详解与源码级实现解析 Mentions提及组件 是 ant design bUI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考