Jodit WYSIWYG Editor

The Tab plugin provides word-processor-like behavior for hierarchical lists. It intercepts keydown events for the Tab key and beforeCommand events for indent/outdent commands.

Indentation (Tab)

When a user presses Tab inside an <li>:

1. The plugin identifies the closest <li> ancestor.
2. It checks if a previous sibling exists (indentation is not possible for the first item).
3. It either moves the current <li> into an existing nested list or creates a new nested list (<ul> or <ol>) that clones the parent list's tag and attributes, then appends the current <li> to it.

Outdentation (Shift+Tab)

When a user presses Shift+Tab inside an <li>:

1. The plugin identifies the parent <li> containing the current nested list.
2. It moves the current <li> to be a sibling of the parent <li> (outdenting).
3. If the item is the first or only item in the sublist, the entire nested list structure is removed.
4. If there are subsequent items in the sublist, the plugin clones the list structure to ensure remaining items stay grouped.

Cursor Preservation

To prevent the cursor from jumping during DOM manipulation, the plugin uses "fake cursor markers" (created via jodit.createInside.fake()). It inserts these markers at the selection start/end, performs the DOM restructuring, and then restores the cursor position by recreating the range between the markers.

To optimize performance, the Image Processor plugin can convert base64 data URIs into temporary Blob URLs for the editor view. This prevents the browser from struggling to render massive base64 strings directly in the DOM.

Key Behaviors

• In Editor View: Images use blob: URLs (e.g., blob:http://localhost:2000/...).
• In Source/Value: Images retain their original data: URIs. When you call editor.value, the plugin automatically restores the original base64 strings.
• Transparency: The conversion is handled internally. You can retrieve the original data via editor.value or editor.getElementValue(), but editor.getNativeEditorValue() will show the blob: URLs used in the DOM.

Example: Verifying Value Formats

const editor = Jodit.make('#editor', {
    imageProcessor: {
        replaceDataURIToBlobIdInView: true
    }
});

// Set content with base64 image
editor.value = '<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII="/></p>';

// Get value - returns original data URI
console.log(editor.value);
// Output: <p><img src="data:image/png;base64,iVBORw0KG..."/></p>

// Get native editor value - shows blob URL
console.log(editor.getNativeEditorValue());
// Output: <p><img src="blob:http://localhost:2000/..."/></p>

// Get element value - returns original data URI
console.log(editor.getElementValue());
// Output: <p><img src="data:image/png;base64,iVBORw0KG..."/></p>

The Sticky Plugin manages the toolbar's position based on the window's scroll position and the editor's location in the document.

Core Logic

• Activation: The toolbar becomes sticky when the user scrolls past the top of the editor container. It remains sticky until the user scrolls past the bottom of the editor.
• Modes: The plugin only operates in WYSIWYG mode. It is automatically disabled when the editor is in Source mode.
• Mobile Detection: Mobile behavior is determined by comparing the container width to the sizeSM configuration option (defaulting to 768px). If toolbarDisableStickyForMobile is true, the plugin will not activate on narrow viewports.
• Layout Stability: To prevent content jumping when the toolbar switches to position: fixed, the plugin (specifically in older IE versions) manages a dummy box to preserve the layout space.
• Width Management: The plugin automatically recalculates the toolbar width on resize and sticky state changes to ensure it matches the container width (accounting for a 2px border).