Nicer Package Manager

    @jimmycode/draft-js-autosave-plugin

    0.5.2 • Public • Published

    draft-js-autosave-plugin

    Build Status Coverage Status

    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

    Install

    npm i @jimmycode/draft-js-autosave-plugin

    DownloadsWeekly Downloads

    5

    Version

    0.5.2

    License

    MIT

    Unpacked Size

    254 kB

    Total Files

    10

    Last publish

    Collaborators

    • albertomr86
    • jimmycodesocial
    • joelmcs6