Verbum

Verbum - Flexible Text Editor for React

Verbum is a fully flexible rich text editor based on lexical-playground and lexical framework.

⚠️ As the Lexical framework is currently in early development, this component library is also likely to change quite often

Installation

npm install verbum --save

Demo

Live demo is coming soon...

Usage

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 />

<Editor />

Automatic browser language detection Support

Verbum supports automatic browser language detection by default if locale not provided. If the browser language is set to fr, the editor will be automatically localized in French. If the browser language is set to en, the editor will be automatically localized in English. If the browser language is set to any other language, the editor will be automatically localized in English.

Plugins

<ToolbarPlugin />

Toolbar components

<FontFamilyDropdown />

Add your own font families.

<FontSizeDropdown />

Add your own font sizes.

<InsertDropdown />

<MentionsPlugin />

GetTypeaheadValues<A>

PopoverCard<A>

Plugins support

Development

For development use:

$ npm install (in case of an error, run `npm install --legacy-peer-deps`)
$ npm start

Also you can test it locally using Storybook:

$ npm run storybook

Future plans

• Test coverage
• Programmatic access to the editor input as JSON
• Localization
• Ready templates with different options (MUI, Bootstrap, etc...)
• Dark/Light modes
• Custom styling flexibility
• Disassembling all of the toolbar to enable using them as nested components, increasing the flexibility
• Enabling adjusting editor settings such read-only mode and etc. programmatically

License

Licensed under MIT License.