Paste Storage Plugin
Maintains a history of copied/pasted content in the editor. This plugin stores the last 5 copied items and provides a dialog for selecting and pasting from history using Ctrl+Shift+V keyboard shortcut.
Features
- Stores last 5 copied items
- Dialog interface for paste history
- Keyboard navigation (Up/Down arrows)
- Preview pane showing selected item
- Ctrl+Shift+V / Cmd+Shift+V shortcut to open
- Click or double-click to paste
- Enter key to paste selected item
- Moves frequently used items to top
- Automatic cleanup on editor destruction
- Integration with paste button dropdown
Configuration Options
This plugin has no configuration options. It works automatically when enabled.
Basic Usage
const editor = Jodit.make('#editor');
// Copy some content (Ctrl+C)
// Copy more content
// Press Ctrl+Shift+V to open paste history
// Use arrow keys to navigate
// Press Enter or click to paste
Programmatic Access
const editor = Jodit.make('#editor');
// Open paste storage dialog
editor.execCommand('showPasteStorage');
// Check number of stored items
const count = editor.e.fire('pasteStorageList');
console.log(`${count} items in paste storage`);
Disable Plugin
Jodit.make('#editor', {
    disablePlugins: ['pasteStorage']
});
Event Listeners
const editor = Jodit.make('#editor');
// Listen for copy events
editor.e.on('afterCopy', (html) => {
    console.log('Content copied:', html);
});
// Check storage count
editor.e.on('pasteStorageList', () => {
    console.log('Storage list requested');
});
Storage Management
- Copy Detection: Listens to afterCopyevent
- Duplicate Removal: If HTML already exists in list, removes old entry
- Prepend: Adds new item to beginning of list (unshift)
- Size Limit: Maintains maximum of 5 items (truncates if exceeded)
- Persistence: Storage is per-editor instance (not persisted between sessions)
Dialog Interface
The dialog contains:
- 
List Box (left side): - Shows numbered list of stored items
- Items are truncated/stripped for display
- Currently selected item has jodit_activeclass
- Items are clickable links
 
- 
Preview Box (right side): - Shows full HTML of selected item
- Updates when selection changes
 
- 
Footer Buttons: - Paste button (primary)
- Cancel button
 
Keyboard Navigation
- Up Arrow: Move to previous item (wraps to last if at first)
- Down Arrow: Move to next item (wraps to first if at last)
- Enter: Paste selected item and close dialog
- Tab: Navigate between list items
Paste Operation
When pasting from storage:
- Focus: Returns focus to editor
- Insert: Inserts HTML at current cursor position
- Reorder: If not first item, swaps with first item (most recently used goes to top)
- Close: Closes dialog
- Sync: Calls synchronizeValues()to update editor state
- Event: Fires afterPasteevent
Dialog Opening
Dialog opens only if:
- At least 2 items in storage (list.length < 2blocks opening)
- Command showPasteStorageis executed (via hotkey or programmatically)
Integration with Paste Button
The paste button (from paste plugin) shows paste storage as dropdown option:
- Uses isChildDisabled()check
- Disabled if fewer than 2 items in storage
- Fires pasteStorageListevent to get count
showPasteStorage
Opens the paste storage dialog.
Syntax:
editor.execCommand('showPasteStorage')
Hotkeys: ['ctrl+shift+v', 'cmd+shift+v']
Example:
// Open via command
editor.execCommand('showPasteStorage');
// Triggered by Ctrl+Shift+V or Cmd+Shift+V
afterCopy
Fired after content is copied to clipboard. Plugin listens to this event to add items to storage.
Parameters:
- html(string): The copied HTML content
Example:
editor.e.on('afterCopy', (html) => {
    console.log('Copied to storage:', html);
});
pasteStorageList
Fired to get the count of items in paste storage. Used by paste button to determine if storage option should be enabled.
Returns: Number of items in storage
Example:
const count = editor.e.fire('pasteStorageList');
console.log(`Storage has ${count} items`);
afterPaste
Fired after content is pasted from storage (same as regular paste).
Example:
editor.e.on('afterPaste', () => {
    console.log('Content pasted from storage');
});
Edge Cases
- 
Empty Storage: Dialog won't open if fewer than 2 items 
- 
Duplicate Content: Copying same content removes old entry and adds to top 
- 
Storage Limit: Only last 5 items kept; older items are discarded 
- 
Item Reordering: Pasting non-first item moves it to first position 
- 
Dialog Reuse: Dialog is created once and reused; content refreshed on each open 
- 
Cleanup: All storage cleared when editor is destroyed 
- 
Selection Wrapping: Arrow key navigation wraps around (top↔bottom) 
- 
Focus Management: Listbox items have tab-index="-1"to control focus order
- 
Double Click: Double-clicking item immediately pastes without button click 
- 
Event Namespacing: Uses .paste-storagenamespace for clean removal
Notes
- Plugin is class-based, extends Pluginbase class
- Storage is limited to 5 most recent items
- Items are stored as HTML strings
- Dialog uses jodit-paste-storageCSS class for styling
- List items show truncated text (removes whitespace with SPACE_REG_EXP())
- Preview shows full HTML content
- The plugin integrates with copy/paste workflow automatically
- Hotkey (Ctrl+Shift+V) is standard clipboard history shortcut
- Dialog is modal and blocks editor interaction until closed
- Item reordering on paste implements most-recently-used (MRU) pattern
- The plugin uses async setTimeout for initial selection to ensure DOM is ready
- List box and preview box are separate divs within container
- Click handler uses event delegation on list box container
- Keyboard events are attached to individual list items
- Dialog footer uses Button components for consistent UI
- The plugin properly cleans up all DOM elements and event listeners on destruction
- Storage is per-editor instance (multiple editors have separate storage)
- No persistence between page reloads (storage is in-memory only)
- The pasteStorageListevent enables paste button dropdown integration
- Dialog header uses localized text (Choose Content to Paste)
- List items use 1-based numbering for display
- The plugin prevents default link behavior on list items (uses href="#")
- Preview updates immediately on selection change
- Paste operation focuses editor before inserting content
Typical Use Case
Users frequently copy multiple pieces of content and want to paste an earlier copied item without re-copying it. The paste storage plugin solves this by:
- Automatically tracking all copy operations
- Providing quick access via Ctrl+Shift+V
- Showing preview of each stored item
- Allowing easy selection and pasting
This is especially useful when:
- Assembling content from multiple sources
- Reusing frequently copied snippets
- Working with repetitive content patterns
- Avoiding switching between applications to re-copy content