fangqiao / nib

Wysiwyg editor components built using ReactJS and Prosemirror.

NIB

Demo

Despite various options available for rich text editing in html, it continues to be extremely challenging area. I found prosemirror to be the best available solution for the problem. It is great work by author Marijn Haverbeke.

Making an editor ground up from a framework is still much work, the project aims at building components for rich text editing using prosemirror. These components can be quickly integrated into react or even ron-react applications.

Setup

Setup of the editor is quite straight forward. It is required to be installed from npm.

Installing packages:

Either npm or yarn commands can be used.

npm i nib-core --save

Writing editor component:

import React from "react";
import Editor from "nib-core";

const MyEditor = () => <Editor />;

Props

Props supported by the editor.

S.No.	Name	Description
1	blockStyles	Style of variuos blocks used in the editor, here are the defaults which can be overridden.
2	defaultValue	Value to initialize editor content
3	onChange	Callback which is called when the content of the editor changes
4	config	Configuring the plugin toolbar etc in editor, here are default configurations which can be overridden.
5	spellcheck	Boolean property to enable default browser spellcheck in the editor.
6	theme	Theming of the editor, here is default theme which can be overridden.

Editor is in initial phase of development and right now api is not stable.

Need help

If you have any queries or require any help you can email me.