DEV Community

Ozan Yurtsever
Ozan Yurtsever

Posted on

Verbum - Rich Text Editor For React

Demo

Until this year, draft.js was one of the mainly used libraries out there for building web based text editors, and there are lots of component libraries for React based on draft.js. However, the development team(which is facebook) has announced that the project is not under development anymore, since they have started a brand new project, which is Lexical. Lexical is a framework to build text editors and is under early development currently. By using Lexical, I have built a new component library that comes with a ready to use rich text editor. It is under very early development as well, as I am trying to make it more modular and flexible with each improvement. I hope this project can help some startups that needs to implement a highly functional text editor to their projects. All of the support(like stars) and contribution to the project is very much welcomed.

GitHub logo ozanyurtsever / verbum

Verbum is a fully flexible text editor based on lexical framework.

Verbum

Verbum - Flexible Text Editor for React

Verbum is a fully flexible text editor based on 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

Demo Live demo is coming soon...

Usage

import { FC } from 'react';
import { EditorComposer, Editor, ToolbarPlugin } from 'verbum';

const NoteViewer: FC = () => {
  return (
    <EditorComposer>
      <Editor hashtagsEnables={true}>
        <ToolbarPlugin defaultFontSize="20px">
          <InsertDropdown enablePool={true} />
          <AlignDropdown />
        <ToolbarPlugin />
      </Editor>
    </EditorComposer>
  );
};

export default NoteViewer;
Enter fullscreen mode Exit fullscreen mode

API

<Editor />

Property Type description
children ReactNode optional Nested child components, like the ToolbarPlugin.
hashtagsEnabled boolean optional Enables

Discussion (0)