Repository files navigation

These helpers are written for Draft.js to improve Editor capabilities.

• draft-js
• react
• react-dom

npm install draft-regex

or

yarn add draft-regex

import*asReactfrom'react';import{EditorState,Editor}from'draft-js';import{clearEmptyBlocks,clearPastedStyle,replaceTextRegex}from'draft-regex';typeState={editorState:EditorState,};classMyEditorextendsReact.Component<void,State>{state:State={editorState:EditorState.createEmpty(),};onChange=(editorState:EditorState)=>{this.setState({editorState:clearEmptyBlocks(editorState)});};handlePastedText=(text: ?string,html: ?string,editorState:EditorState)=>{this.setState({editorState:clearPastedStyle(editorState)});};onSave=()=>{const{ editorState}=this.state;this.setState({editorState:replaceTextRegex(editorState)});};render(){const{ editorState}=this.state;return(<><EditoreditorState={editorState}onChange={this.onChange}handlePastedText={this.handlePastedText}/><buttononClick={this.onSave}>Save</button></>);}}

All helpers are taken by EditorState and options as an argument and returned EditorState.

Prevents the ability to add blank lines more than 3 (varies in settings).

A second argument can take anumber for remove blank lines (number + 1).

functionclearEmptyBlocks(editorState:EditorState,maxEmptyLines?:number=2):EditorState

Apply regular expressions to the entire text, in the process of typing or after copy/pasting text.

A second argument can take an array of rules.typoRules is a set of basic rules that you can not use.

All regular expressions are used once in the entire text. If you use a lot of regular expressions, the performance of the editor can drop noticeably.

functionreplaceTextRegex(editorState:EditorState,rulesArray?:Array<Rule>=typoRules,):EditorState

The rule looks like this:{ reg: new RegExp(), shift: '' }

Clears styles of copy/pasted text to those that you have.

A second argument can take an object that can containoptions.

blockTypes is an array of strings that contains all the types of blocks that you use in your editor. This is useful if you want to clear all styles, except those you can already ask yourself.

A list of all types can be foundhere.

If you do not want to use all six kinds of headings, you can bring the headers to the same view usingshiftHeader.

The same applies to lists.

functionclearPastedStyle(editorState:EditorState,options?:{blockTypes?:Array<string>,shiftHeader?:string,shiftList?:string,}):EditorState

To improve performance, useclearPastedStyle tohandlePastedText method, andreplaceTextRegex to save the text editor.