在前端开发中，我们常常需要实现一些文本编辑的功能。而在这些编辑功能中，mention（提到）功能非常常见，常常可以用于评论、聊天等场景中。为了方便实现这些功能，有很多的 npm 包可以使用。其中，@svenadlung/slate-mentions 是一个功能强大且易于使用的 npm 包，本文将介绍它的使用方法。
什么是 @svenadlung/slate-mentions
@svenadlung/slate-mentions 是一款基于 Slate.js 的提到用户组件，可以方便地在 Slate 编辑器中实现输入 @ 后出现用户列表的提到功能。同时，它也支持自定义渲染用户列表和用户组件。该 npm 包十分易于使用，使用该包的文本编辑器实现了良好的用户交互体验。
如何使用 @svenadlung/slate-mentions
安装
首先，我们需要安装 @svenadlung/slate-mentions，并将它加入到我们的项目中。可以使用 npm 命令进行安装，在命令行中执行：
npm i @svenadlung/slate-mentions --save
使用
在 Slate 编辑器中使用 @svenadlung/slate-mentions 非常简单。首先，我们需要引入该 npm 包的必须属性：
import { useEffect, useMemo, useState } from 'react';
import { Transforms, Editor, Text, Range, createEditor } from 'slate';
import { Slate, Editable, withReact } from 'slate-react';
import { withHistory } from 'slate-history';
import { MentionElement, MentionNode, withMentions, Wysiwyg } from '@svenadlung/slate-mentions';然后，我们需要创建一个 Mention 列表，来存储需要提到的用户。我们可以在 useEffect 中进行这一步操作，例如：
-- -------------------- ---- -------
----- ------- - -- -- -
----- ------- --------- - -----------------------
----- -------- ---------- - -----------
----- ------- --------- - ------------
----- ---------- ------------ - -------------
------------ -- -
-- ---------------- -------- ----
----- ----- - -
- --- ---- ------ --------- --
- --- ---- ------ ------- --
- --- ---- ------ -------- --
- --- ---- ------ ----- --
- --- ---- ------ ------ --
- --- ---- ------ -------- --
- --- ---- ------ --------- --
---
--
-------------------
-- ----接下来，我们需要在 Slate 编辑器中添加 mentions 的处理操作，使得 Slate 编辑器在输入 @ 后，能够自动出现用户列表。我们可以在这个过程中调用 withMentions 方法，例如：
const editor = useMemo(() => withMentions(withReact(withHistory(createEditor()))), []);
现在，我们需要在 Slate 编辑器中实现 Mention 的渲染。我们可以在 Slate 根元素的子元素中，添加 editor.renderElement(MentionElement, ...)的逻辑。例如：
const renderElement = useCallback((props) => {
switch (props.element.type) {
case 'mention':
return <MentionElement {...props} />;
default:
return <Wysiwyg {...props} />;
}
}, []);这样，我们就完成了 @svenadlung/slate-mentions 的使用。下面是一个完整的示例代码：
-- -------------------- ---- -------
------ - ---------- -------- -------- - ---- --------
------ - ----------- ------- ----- ------ ------------ - ---- --------
------ - ------ --------- --------- - ---- --------------
------ - ----------- - ---- ----------------
------ - --------------- ------------ ------------- ------- - ---- -----------------------------
----- ------- - -- -- -
----- ------- --------- - -----------------------
----- -------- ---------- - -----------
----- ------- --------- - ------------
----- ---------- ------------ - -------------
------------ -- -
-- ---------------- -------- ----
----- ----- - -
- --- ---- ------ --------- --
- --- ---- ------ ------- --
- --- ---- ------ -------- --
- --- ---- ------ ----- --
- --- ---- ------ ------ --
- --- ---- ------ -------- --
- --- ---- ------ --------- --
---
--
-------------------
-- ----
----- ------ - ---------- -- ----------------------------------------------------- ----
----- ------------- - ------------------- -- -
------ -------------------- -
---- ----------
------ --------------- ---------- ---
--------
------ -------- ---------- ---
-
-- ----
----- --------- - ------------------- -- -
-- -------- -
------ ----------- -
---- ------------
-----------------------
----- --------- - ----- -- --------------- - - - - - ----- - --
--------------------
------
---- ----------
-----------------------
----- --------- - ----- -- - - --------------- - - - ----- - --
--------------------
------
---- ------
---- --------
-----------------------
------------------------- --------
--------------------- -----------------
----------------
------
---- ---------
-----------------------
----------------
------
-
-
-- ------- --------- ---------
------ -
------ --------------- ------------- ----------------- -- -----------------
---------
-----------------------------
---------------------
---------- -- ----------------
----------- -- ----------------
-------------------------- -- -
----- - ----- - - -------
-- ---------------- -- ----------------------------------- -
----- ------- - -----------------------------
----- ---------- - --------------------- ------ - ----- ------ ---
----- ------ - ---------- -- --------------------- ------------
----- ----------- - ------ -- -------------------- ------- -------
----- ---------- - ----------- -- --------------------- -------------
----- ----------- - ---------- -- ----------------------------
----- ----- - -------------------- -------
----- ---------- - -------------------- ------ -------
----- --------- - --------------------- ------------
----- ---------- - ---------------------------
-- ------------ -- ----------- -
-----------------------
------------
-------
-
-
----------------
--
--
--------
--
-总结
在本文中，我们介绍了如何在 Slate 编辑器中使用 @svenadlung/slate-mentions 实现提到用户功能。通过遵循本文的教程，我们可以非常容易地使用该 npm 包，实现功能强大且用户友好的文本输入交互效果。更重要的是，我们还学习了许多有关 Slate 编辑器的知识，为我们进一步深入学习 React 的编辑器组件奠定了坚实的基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005757481e8991b448ea5bf