verbum

Verbum: A Flexible Text Editor for React

Overview

Verbum is a highly adaptable rich text editor built specifically for React applications. It is based on the lexical-playground and lexical frameworks developed by Facebook. As these underlying frameworks are still in early development, users of Verbum can expect frequent updates and changes to the component library.

Installation

To get started with Verbum, you can install it via npm with the following command:

npm install verbum --save

Key Features

Verbum is designed to be a comprehensive text editing solution with a range of features for developers looking to integrate a flexible editor into their React applications.

• Toolbar Customization: Verbum allows users to integrate various toolbar components like font family and size dropdowns, bold, italic, and underline buttons, link insertion, text, and background color pickers. These are encapsulated in the ToolbarPlugin within the editor component.

• Plugin Support: The editor supports various plugins for enhanced functionality, including:

  • Mentions: Allows integration of social media-like mentions starting with @.
  • Emoji Support: Emojis can be inserted through simple shortcuts or a dedicated emoji picker.
  • Markdown Support: Enables text to be converted into Markdown format.
  • Speech to Text: Offers voice recognition capabilities for converting speech to text.
  • Drag and Drop: Support for dragging and dropping images and other elements directly into the editor.

Usage Example

Below is a basic usage example illustrating how to integrate Verbum into a React application:

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;

Localization

Verbum supports multiple languages, and if the locale property is not explicitly set, it automatically detects the browser’s language settings to localize the editor into English, French, Portuguese (Brazil), or Russian.

Future Development

Looking ahead, the development plans for Verbum include:

• Enhanced test coverage.
• Ready-made templates compatible with frameworks like Material-UI and Bootstrap.
• Support for dark and light mode themes.
• Increased custom styling options to better fit individual project needs.

Licensing

Verbum is open-source software, licensed under the MIT License, which allows for flexible usage and contributions from the community.

Verbum stands out as a robust and flexible text editor tailor-made for modern React applications, backed by ongoing development and a feature-rich set of tools to meet diverse editing needs.