Verbum

Verbum - 用于 React 的灵活文本编辑器

Verbum 是一个基于 lexical-playground 和 lexical 框架的全面灵活的富文本编辑器。

⚠️ 由于 Lexical 框架目前处于早期开发阶段，该组件库也可能会经常发生变化

安装

npm install verbum --save

演示

在线演示即将推出...

使用

import { FC } from 'react';
import {
  EditorComposer,
  Editor,
  ToolbarPlugin,
  AlignDropdown,
  BackgroundColorPicker,
  BoldButton,
  CodeFormatButton,
  FloatingLinkEditor,
  FontFamilyDropdown,
  FontSizeDropdown,
  InsertDropdown,
  InsertLinkButton,
  ItalicButton,
  TextColorPicker,
  TextFormatDropdown,
  UnderlineButton,
  Divider,
} from 'verbum';

const NoteViewer: FC = () => {
  return (
    <EditorComposer>
      <Editor hashtagsEnabled={true}>
        <ToolbarPlugin defaultFontSize="20px">
          <FontFamilyDropdown />
          <FontSizeDropdown />
          <Divider />
          <BoldButton />
          <ItalicButton />
          <UnderlineButton />
          <CodeFormatButton />
          <InsertLinkButton />
          <TextColorPicker />
          <BackgroundColorPicker />
          <TextFormatDropdown />
          <Divider />
          <InsertDropdown enablePoll={true} />
          <Divider />
          <AlignDropdown />
        </ToolbarPlugin>
      </Editor>
    </EditorComposer>
  );
};

export default NoteViewer;

API

<EditorComposer />

属性	类型	是否必需	描述
children	ReactNode	必需	嵌套的子组件，即编辑器本身
initialEditorState	InitialEditorStateType	可选	编辑器的初始状态

<br />

<Editor />

属性	类型	是否必需	描述
children	ReactNode	可选	嵌套的子组件，如 ToolbarPlugin
hashtagsEnabled	boolean	可选	启用自动标签高亮，默认为 false
autoLinkEnabled	boolean	可选	启用自动链接高亮，默认为 false
emojisEnabled	boolean	可选	将表情符号组合替换为对应的符号，默认为 false
emojiPickerEnabled	boolean	可选	使用 : 搜索和粘贴表情符号，默认为 false
actionsEnabled	boolean	可选	启用操作工具栏，默认为 false
placeholder	string	可选	编辑器首次加载时的默认内容
listMaxIndent	number	可选	列表元素的最大缩进能力，默认为 7
isEditable	boolean	可选	为编辑器启用只读模式，默认为 false
initialEditorState	string	可选	用于初始化编辑器初始内容的 JSON 字符串
onChange	(editorState: string, editorInstance?: LexicalEditor) => void	可选	访问当前编辑器状态和活动编辑器实例
locale	'en', 'fr', 'ptBr', 'ru', null;	可选	启用所选语言的本地化，默认为 en。可用语言有 en、fr、ptBr 和 ru

自动浏览器语言检测支持

如果未提供 locale，Verbum 默认支持自动浏览器语言检测。如果浏览器语言设置为 fr，编辑器将自动本地化为法语。如果浏览器语言设置为 en，编辑器将自动本地化为英语。如果浏览器语言设置为任何其他语言，编辑器将自动本地化为英语。

<br />

插件

<ToolbarPlugin />

属性	类型	是否必需	描述
children	React.ReactElement[]	可选	嵌套的子组件，如 InsertDropdown
defaultFontSize	string	可选	编辑器首次加载时选择的默认字体大小，默认值为 15px
defaultFontColor	string	可选	编辑器首次加载时选择的默认字体颜色，默认值为 #000
defaultBgColor	string	可选	编辑器首次加载时选择的默认文本背景颜色，默认值为 #fff
defaultFontFamily	string	可选	编辑器首次加载时选择的默认字体系列，默认值为 Arial

<br />

工具栏组件

<FontFamilyDropdown />

添加您自己的字体系列。

属性	类型	是否必需	描述
fontOptions	FontOptions = [string, string][]	可选	字体列表

<FontSizeDropdown />

添加您自己的字体大小。

属性	类型	是否必需	描述
fontSizeOptions	FontOptions = [string, string][]	可选	字体大小列表

<br />

<InsertDropdown />

属性	类型	必选性	描述
enableTable	boolean	可选	启用插入表格功能
enableYoutube	boolean	可选	启用插入YouTube视频功能
enableTwitter	boolean	可选	启用插入推文功能
enablePoll	boolean	可选	启用插入投票功能
enableImage	{ enable: boolean; maxWidth: number };	可选	启用插入图片功能，设置最大宽度
enableEquations	boolean	可选	启用插入方程式功能
enableExcalidraw	boolean	可选	启用插入图表功能
enableHorizontalRule	boolean	可选	启用插入水平分割线功能以进行布局
enableStickyNote	boolean	可选	启用插入便签功能以进行布局

<br />

<MentionsPlugin />

属性	类型	必选性	描述
searchData	SearchData<A>	必需	使用输入字符串搜索数据
getTypeaheadValues	GetTypeaheadValues<A>	必需	搜索数据转换

GetTypeaheadValues<A>

属性	类型	必选性	描述
url	string	必需	URL地址
value	string	必需	提及菜单选项值
picture	JSX.Element	必需	提及菜单选项图片
popoverCard	PopoverCard<A>	可选	当鼠标悬停在用户名上时显示弹出卡片

PopoverCard<A>

属性	类型	必选性	描述
card	(data: A) => JSX.Element	必需	弹出卡片，取决于 <A> 类型
offset	OffsetCard	必需	卡片偏移量（左，上）

插件支持

插件名称	工作状态	描述	来源
ActionsPlugin	:white_check_mark:	右下角的动作菜单	Editor.tsx
AutoLinkPlugin	:white_check_mark:	自动高亮链接	Editor.tsx
CharacterStylesPopupPlugin	:white_check_mark:	选中文本的模态样式编辑器	独立
ClickableLinkPlugin	:white_check_mark:	允许在新标签页中打开链接	独立
CodeHighlightPlugin	:white_check_mark:	支持不同语言的代码块	独立
CommentPlugin	:x:		CharacterStylesPopupPlugin
EmojisPlugin	:white_check_mark:	少量表情符号	Editor.tsx
EmojiPickerPlugin	:white_check_mark:	表情选择器（emoji-list.ts）	Editor.tsx
EquationsPlugin	:scissors:	Katex，太重（已剪除）	InsertDropdown.tsx
ExcalidrawPlugin	:scissors:	Excalidraw（已剪除）	InsertDropdown.tsx
HorizontalRulePlugin	:white_check_mark:	水平分隔线	InsertDropdown.tsx
ImagesPlugin	:x:	仅插入文件（不支持URL）	InsertDropdown.tsx
KeywordsPlugin	:x:		独立
ListMaxIndentLevelPlugin	:white_check_mark:	最大缩进级别（项目符号、数字）	独立
MarkdownShortcutPlugin	:white_check_mark:	转换为Markdown格式	ActionsPlugin
MentionsPlugin	:white_check_mark:	提及功能，以 @ 开始	独立
PollPlugin	:x:	投票，需要测试多次投票	InsertDropdown.tsx
SpeechToTextPlugin	:white_check_mark:	语音识别转文字	ActionsPlugin
StickyPlugin	:x:	黄色便签，文本样式存在bug	InsertDropdown.tsx
TabFocusPlugin
TableActionMenuPlugin	:white_check_mark:	创建表格	InsertDropdown.tsx
TestRecorderPlugin
TreeViewPlugin
TwitterPlugin	:white_check_mark:	插入推文	InsertDropdown.tsx
TypingPerfPlugin
YouTubePlugin	:white_check_mark:	插入YouTube视频	InsertDropdown.tsx

开发

开发时使用：

$ npm install（如果出错，请运行 `npm install --legacy-peer-deps`）
$ npm start

你也可以使用Storybook在本地进行测试：

$ npm run storybook

未来计划

• 测试覆盖
• 以JSON格式编程访问编辑器输入
• 本地化
• 具有不同选项的现成模板（MUI、Bootstrap等）
• 深色/浅色模式
• 自定义样式灵活性
• 将工具栏全部拆解，使其能作为嵌套组件使用，提高灵活性
• 使能够通过编程方式调整编辑器设置，如只读模式等

许可证

基于MIT许可证授权。