@jimmycode/draft-js-autosave-plugin
v0.5.2
Published
Autosave changes of your draft-js editor
Downloads
38
Readme
draft-js-autosave-plugin
Autosave changes of your draft-js editor.
This is a plugin for draft-js-plugins-editor
.
Installation
npm install @jimmycode/draft-js-autosave-plugin
Usage
Instantiate the plugin passing the necessary config
:
import createAutosavePlugin from '@jimmycode/draft-js-autosave-plugin';
const autosavePlugin = createAutosavePlugin(config);
And then pass the plugin into a draft-js-plugins-editor
component:
import Editor from 'draft-js-plugins-editor';
<Editor
plugins={[autosavePlugin]} />
Configuration
The config options and their defaults are:
| Option | Default | Description |
| -------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| saveFunction
| null
| Required callback function that will be called upon a save event. |
| debounceTime
| 3000 | Time, in milliseconds, to debounce
the firing of save events after changes. |
Example
import React from 'react';
import ReactDOM from 'react-dom';
import { EditorState, convertToRaw } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createAutosavePlugin from '@jimmycode/draft-js-autosave-plugin';
const saveDraft = (editorState) => {
const rawContent = convertToRaw(editorState.getCurrentContent());
localStorage.setItem('draft', JSON.stringify(rawContent));
}
const autosavePlugin = createAutosavePlugin({
saveFunction: saveDraft,
debounceTime: 3000
})
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty()
};
this.plugins = [
autosavePlugin
];
}
onChange = (editorState) => {
this.setState({ editorState });
}
render() {
return (
<div className="editor">
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={this.plugins}
placeholder="Tell a story" />
</div>
);
}
}
ReactDOM.render(<MyEditor />, document.getElementById('root'));
Acknowledge
https://www.npmjs.com/package/draft-js-autosave-plugin