quill-local-draft v0.0.2

Quill Local Drafts

This is a simple local drafts plugin for the Quill Rich Text editor. See the demo here. This module utilizes the localStorage API, however, you could easily extend the class to use sessionStorage or something else.

Highlights

• Automatic saving: throttled to 1s (default) between keystrokes
• Automatic loading - if a conflict occurs between current editor contents (e.g., those via an HTML initial load by Quill), the user is warned. You may choose to extend the UI for this.

Getting Started

You can download the distribution as-is (see dist/) and copy it over, or you can use NPM.

Example (NPM):

import { Quill } from 'quill';
import { QuillLocalDraft } from 'quill-local-draft'

Quill.register({
    'modules/localDraft' : QuillLocalDraft
})

myQuill = new Quill( ... , {
    theme : 'snow',
    modules: {
        localDraft: {
            id: 'something_unique',
        }
    }
});

myQuill.getModule('localDraft').init(); // see notes on why this is needed

See the demo/ folder in src/ for more. You can download the source code and run npm install in the root directory, followed by npm run serve for a local demo.

Options

export interface LocalDraftOptions {
    id: string;
    prefix?: string;
    saveDelay?: number;
    displaySave?: boolean;
    saveFormat?: string;
    bindInitial?: boolean;
}

Defaults are:

export const DEFAULT_OPTIONS: LocalDraftOptions = {
    id: "",
    prefix: "quill_local_draft",
    saveDelay: 1000,
    displaySave: true,
    bindInitial: true,
};

• id: A unique identifier for setting/getting editor contents.
• prefix: The final ID used in the storage API is ${prefix}_${id}
• saveDelay: Time (ms) between saves. Saves are triggered per keystroke and throttled.
• displaySave: (Not impl.) Placeholder for future UI
• bindInitial: (Potential change in future rev) Allows you to disable the first bind.

Notes

Drafts are saved via local storage as stringified Delta.

The .init() method inside the module is called because of how Quill 2.X-dev (at the time of writing) doesn't fire a consistent event on initialization. For Quill v1, this shouldn't be required.

For Quill v2, I recommend you initialize manually, since there's no guarantee as to what your other plugins will do. That is, set bindInitial = false in options and call ...getModule('localDraft').init() per the example

Per my testing, ~37kB worth of text (like a blog post) takes ~1ms to save into localStorage.