Slate-React：让装饰器助力链接格式化

Slate-React 中的装饰器助力链接自动格式化

Slate-React 简介

Slate-React 是一个使用 TypeScript 开发的框架，用于构建 Markdown 富文本编辑器。其核心设计理念是可插拔性，允许用户通过装饰器和插件来扩展其功能。

自定义装饰器是什么？

装饰器本质上是对 Slate 编辑器行为的扩展。它们允许您向编辑器添加新功能或修改现有行为。

Slate-React 的装饰器主要用于向编辑器添加样式、校验和转换规则。使用装饰器，您可以轻松添加、修改和删除文本、代码块或任何其他元素。

创建装饰器

创建装饰器非常简单，只需创建一个实现了 onKeyDown 方法的对象即可。onKeyDown 方法将接收一个包含正在编辑的文本、选区信息和其他数据的对象。

在这个方法中，您可以执行任何操作，例如：

• 向文本添加或删除样式
• 校验输入内容的有效性
• 将 Markdown 转换为 HTML

自动格式化链接的装饰器

现在，让我们创建一个装饰器来演示 Slate-React 的强大功能。我们将使用这个装饰器自动格式化链接。

代码片段

const withAutoformatLinks = (editor) => {
  const { insertData, removeMark, toggleMark } = editor;

  handleKeyDown = (event, data, change) => {
    if (event.key === ' ') {
      const wordBeforeCursor = getWordBeforeCursor(editor);

      if (isUrl(wordBeforeCursor)) {
        change.call(insertData, { url: wordBeforeCursor });
        change.call(removeMark, 'link');
        change.call(toggleMark, 'link');
      }
    }

    return change;
  };

  return handleKeyDown;
};

这个装饰器监听键盘按下事件，当用户按下空格键时，它会检查光标前的单词是否是一个有效的 URL。如果是，则将该 URL 插入到编辑器中并将其标记为链接。

使用装饰器

要使用装饰器，您需要将其注册到 Slate-React 编辑器。您可以通过在 useSlate 钩子中调用 addDecorator 函数来实现。

const { Editor, withHistory } = useSlate();

const editor = withHistory(withAutoformatLinks(Editor));

总结

通过创建装饰器，我们可以在 Slate-React 编辑器中实现链接的自动格式化。这只是 Slate-React 强大功能的一个例子。使用 Slate-React，您可以轻松地创建功能丰富的富文本编辑器，满足您的具体需求。