Repository files navigation

react-slate-elements is a set of React components to make your life easier when building your own rich text editor using Slate. Check it out:

View demo 👈

Install it as any other package:

yarn add react-slate-elements

Now let's see how to put it into action:

importReact,{useState,useCallback}from'react';import{Value}from'slate';import{Editor}from'slate-react';import{EditorSchema,EditorToolbar,Bold}from'react-slate-elements';constplugins=[Bold.Plugin,]constApp=()=>{const[value,setValue]=useState(Value.fromJS(initialValue));const[editor,setEditorRef]=useState(null);constonChangeValue=({ value})=>setValue(value);constonRenderEditor=useCallback(ref=>setEditorRef(ref),[]);constrenderMark=(props,editor,next)=>{switch(props.mark.type){caseBold.TYPE:returnBold.Mark(props);default:returnnext();}}return(<divstyle={{margin:20}}><EditorToolbareditor={editor}><Bold.Button/></EditorToolbar><Editorref={onRenderEditor}schema={EditorSchema}value={value}onChange={onChangeValue}renderMark={renderMark}plugins={plugins}/></div>);}constinitialValue={document:{nodes:[{object:'block',type:'paragraph',nodes:[{object:'text',text:'A line of text in a paragraph.',},],},],},};exportdefaultApp;

Although it's an arguably quite simple example, all the main concepts are present here and you'll be able to easily extend it to fulfill all your requirements.

In order to allow a bold mark to be used we've:

1. Added a condition to verify if it should be applied or not on Slate'srenderMark function. We check if the current node has theBold.TYPE and, if positive, we render the mark accordingly throughBold.Mark(props);
2. Included the<Bold.Button /> inside our<EditorToolbar editor={editor}>, so we'll have a button to toggle this mark;
3. Added theBold.Plugin into our editors' plugin array. Because of this, we can pressCmd+b to toggle our bold mark without having to press the toolbar button.

For a complete example, you cancheck the code used on the demonstration page.

UI

• EditorToolbar
• Separator

Mark

• Bold
• Code
• Italic
• Underline

Blocks

• Blockquote
• BulletList
• OrderedList
• ListItem
• Paragraph

Helpers

• EditorSchema

Plugins

• SymbolsReplacer

All icons used here are part of theMaterialDesign project.