Backup Jodit plugin

Save editing contents of different Jodit instances on different pages in local or remote storage.

It will protect you from:

• Mistake editions
• Accidentally unsaved and closed document
• Network fails
• It stores full history of your editions on your computer and you can restore it at any time you need.

The saving of contents may be:

• Manual
• Automatically: with a configurable interval and snapshots limit, plugin understands duplicates and omits them

The plugin shows you full featured preview when you choose a snapshot to restore.

Options

backup.interval = 30

The interval in seconds to make new snapshot.

backup.limit = 50

The maximum number of snapshots made my the Backup plugin. If limit is exhausted the plugin removed the last backup before creating new.

backup.formatDate[(timestamp: string | Date) => string]

If set it should parse ISnapshotItem.created and return a formatted timestamp to display in the left-hand list.

const jodit = Jodit.make('#editor', {
	backup: {
		formatDate(date) {
			return new Date(date).toDateString();
		}
	}
});
Copy

backup.dialogWidth = 700

Default dialog width.

backup.remoteStore

Interface ISnapshotStorage for saving your snapshots inside another storage (ex. remote rest API).

interface ISnapshotItem {
	created: Date;
	html: string;
}

interface ISnapshotStorage {
	add(item: ISnapshotItem): Promise<boolean>;
	items(): Promise<ISnapshotItem[]>;
	clear(): Promise<boolean>;
}
Copy

Example:

class RemoteSnapshotStorage {
	remoteUrl = 'https://someapi.com/save.php';

	async add(item) {
		await fetch(this.remoteUrl, {
			method: 'POST',
			body: JSON.stringify(item)
		});
		return true;
	}

	async clear() {
		await fetch(this.remoteUrl + '?all', {
			method: 'DELETE'
		});
	}

	items() {
		return fetch(this.remoteUrl, {
			method: 'GET'
		}).then((resp) => resp.json());
	}
}

const jodit = Jodit.make('#editor', {
	backup: {
		interval: 20,
		limit: Infinity,
		remoteStore: new RemoteSnapshotStorage()
	}
});
Copy

backup.hotkeys = ['ctrl+shift+b', 'cmd+shift+b']

Hotkeys for backup operations. By default, Ctrl+Shift+B (or Cmd+Shift+B on Mac) opens the backup dialog.

const jodit = Jodit.make('#editor', {
	backup: {
		hotkeys: ['ctrl+alt+b', 'cmd+alt+b'] // Change default hotkeys
	}
});
Copy

API Reference

Configuration Interface

interface BackupConfig {
    interval: number;                                  // Interval in seconds for automatic snapshots
    limit: number;                                     // Maximum number of snapshots to keep
    remoteStore?: ISnapshotStorage;                    // Optional remote storage implementation
    dialogWidth: number;                               // Width of the backup dialog
    hotkeys: string[];                                 // Keyboard shortcuts for backup operations
    formatDate?: (timestamp: string | Date) => string; // Custom date formatter for snapshot list
}
Copy

Storage Interfaces

interface ISnapshotItem {
    created: Date;   // Timestamp when snapshot was created
    html: string;    // HTML content of the snapshot
}

interface ISnapshotStorage<T extends ISnapshotItem = ISnapshotItem> {
    add(item: T): Promise<boolean>;    // Add new snapshot
    clear(): Promise<boolean>;         // Clear all snapshots
    items(): Promise<T[]>;             // Get all snapshots
}
Copy

Control Configuration

The backup plugin provides the following controls:

interface BackupControls {
    backup.store: {
        command: 'saveBackup';      // Command to save backup manually
        text: 'Save backup now';    // Button text
    };
    backup.restore: {
        tooltip: 'Restore';         // Tooltip text
        list: ['backup.store'];     // Dropdown menu items
        exec: (editor: IJodit) => void;  // Opens backup dialog
    };
}
Copy

Commands

The plugin adds the following editor commands:

editor.execCommand('saveBackup');        // Save a backup manually
editor.execCommand('openBackupDialog');  // Open the backup restore dialog
Copy