Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/YozhikM/draft-regex
Flexible helpers for draft.js
https://github.com/YozhikM/draft-regex
draft-js
Last synced: 3 months ago
JSON representation
Flexible helpers for draft.js
- Host: GitHub
- URL: https://github.com/YozhikM/draft-regex
- Owner: YozhikM
- License: mit
- Created: 2018-01-04T10:18:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-02T23:54:01.000Z (about 4 years ago)
- Last Synced: 2024-01-07T10:15:34.517Z (6 months ago)
- Topics: draft-js
- Language: JavaScript
- Homepage: https://yozhikm.github.io/draft-regex/
- Size: 4.53 MB
- Stars: 19
- Watchers: 2
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-draft-js - Draft.js Regex - The set of flexible helpers, like regex, blank lines preventing and pasted HTML clearing. (Plugins and Decorators Built for Draft.js)
- awesome-draft-js - Draft.js Regex - The set of flexible helpers, like regex, blank lines preventing and pasted HTML clearing. (Plugins and Decorators Built for Draft.js)
README
# Draft Regex
[](https://www.npmjs.org/package/draft-regex)
[](http://www.npmtrends.com/draft-regex)
[](https://packagephobia.now.sh/[email protected])
[](https://greenkeeper.io/)
These helpers are written for Draft.js to improve Editor capabilities.
## Requirements
* [draft-js](https://github.com/facebook/draft-js)
* [react](https://github.com/facebook/react)
* [react-dom](https://github.com/facebook/react)
## Getting started
```bash
npm install draft-regex
```
or
```bash
yarn add draft-regex
```
## How to use
```js
import * as React from 'react';
import { EditorState, Editor } from 'draft-js';
import { clearEmptyBlocks, clearPastedStyle, replaceTextRegex } from 'draft-regex';
type State = {
editorState: EditorState,
};
class MyEditor extends React.Component {
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 (
<>
Save
>
);
}
}
```
## API
All helpers are taken by EditorState and options as an argument and returned EditorState.
### clearEmptyBlocks
Prevents the ability to add blank lines more than 3 (varies in settings).
A second argument can take a `number` for remove blank lines (number + 1).
```js
function clearEmptyBlocks(editorState: EditorState, maxEmptyLines?: number = 2): EditorState
```
### replaceTextRegex
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.
```js
function replaceTextRegex(
editorState: EditorState,
rulesArray?: Array = typoRules,
): EditorState
```
The rule looks like this: `{ reg: new RegExp(), shift: '' }`
### clearPastedStyle
Clears styles of copy/pasted text to those that you have.
A second argument can take an object that can contain `options`.
`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 found [here](https://draftjs.org/docs/api-reference-content-block.html#content).
If you do not want to use all six kinds of headings, you can bring the headers to the same view using `shiftHeader`.
The same applies to lists.
```js
function clearPastedStyle(
editorState: EditorState,
options?: {
blockTypes?: Array,
shiftHeader?: string,
shiftList?: string,
}
): EditorState
```
## Hints
To improve performance, use `clearPastedStyle` to `handlePastedText` method, and `replaceTextRegex` to save the text editor.