Editor

The Universal Editor is a flexible, mode-switchable editing component that adapts to your needs. Use it as a plain text editor, rich text (WYSIWYG) editor, or code editor - all from one component with seamless mode switching, Model integration, autosave, and localStorage persistence.

Three Modes, One Component

Text Mode - Enhanced textarea with auto-resize, character/word count
Rich Mode - WYSIWYG editor with toolbar, formatting, images, code blocks, embeds
Code Mode - Syntax highlighting, line numbers, tab indentation

Key Features

Model Integration - Two-way reactive data binding
Autosave - Automatic saving with configurable intervals
localStorage - Persistent storage with automatic save/load
Image Paste - Paste images directly from clipboard (base64 or upload)
Code Blocks - Syntax-highlighted code blocks in rich mode
Embeds - YouTube, Twitter, CodePen auto-embedding
Undo/Redo - Built-in history management
Customizable Toolbar - Configure which buttons appear

Basic Usage


// Text mode
Domma.elements.editor('#editor', {
    mode: 'text',
    characterCount: true,
    autosave: true,
    storage: 'my-notes'
});

// Rich text mode
Domma.elements.editor('#editor', {
    mode: 'rich',
    toolbar: [['bold', 'italic'], ['link', 'image']],
    imagePaste: true,
    autosave: true
});

// Code mode
Domma.elements.editor('#editor', {
    mode: 'code',
    language: 'javascript',
    lineNumbers: true,
    model: codeModel,
    modelKey: 'sourceCode'
});

Text Mode

Enhanced textarea with auto-resize, character counting, and autosave.

Try it out:

💾 Auto-saves to localStorage every 3 seconds


Domma.elements.editor('#editor', {
    mode: 'text',
    placeholder: 'Start typing...',
    characterCount: true,
    wordCount: true,
    autosave: true,
    autosaveInterval: 3000,
    storage: 'text-draft',
    onChange: (content) => console.log('Content changed')
});

Rich Text Mode (WYSIWYG)

Full-featured WYSIWYG editor with formatting toolbar, images, links, code blocks, and embeds. Try pasting an image from your clipboard!

Rich Text Editor:

Tips: Use Ctrl+B for bold, Ctrl+I for italic, Ctrl+U for underline. Paste images directly from clipboard.


Domma.elements.editor('#editor', {
    mode: 'rich',
    placeholder: 'Start writing...',
    toolbar: [
        ['bold', 'italic', 'underline', 'strikethrough'],
        ['h1', 'h2', 'h3'],
        ['ul', 'ol', 'blockquote'],
        ['link', 'image', 'code'],
        ['codeblock', 'embed'],
        ['undo', 'redo', 'clear']
    ],
    imagePaste: true,
    imageMode: 'base64',  // or provide custom imageUpload function
    autosave: true,
    storage: 'rich-draft'
});

Code Mode

Code editor with line numbers, tab indentation, and syntax highlighting markers.

JavaScript Code Editor:

Tip: Press Tab for 4-space indentation


Domma.elements.editor('#editor', {
    mode: 'code',
    language: 'javascript',
    lineNumbers: true,
    theme: 'light',
    autosave: true,
    storage: 'code-draft'
});

Dynamic Mode Switching

Switch between modes dynamically while preserving content:


const editor = Domma.elements.editor('#editor', {
    mode: 'text'
});

// Switch modes dynamically
editor.setMode('rich');  // Switch to rich text
editor.setMode('code');  // Switch to code
editor.setMode('text');  // Back to text

// Get current mode
console.log(editor.getMode());  // 'text', 'rich', or 'code'

Model Integration

Two-way reactive binding with Domma's Model system:

Editor (bound to model):

Model Value Display:


const contentModel = M.create({
    text: { type: 'string', default: '' }
});

Domma.elements.editor('#editor', {
    mode: 'text',
    model: contentModel,
    modelKey: 'text'
});

// Model changes update editor
contentModel.set('text', 'New content');

// Editor changes update model
// (happens automatically on input)

Autosave & localStorage

Automatic saving to localStorage with configurable intervals:

Autosave Demo (saves every 2 seconds):

Last saved: Never •


const editor = Domma.elements.editor('#editor', {
    mode: 'text',
    autosave: true,
    autosaveInterval: 2000,  // 2 seconds
    storage: 'my-document',
    onSave: (content) => {
        console.log('Saved!', content.length, 'characters');
    }
});

// Manual save
editor.save();

// Content auto-loads from storage on init
// if storage key exists

API Reference

Options

Option	Type	Default	Description
`mode`	String	`'text'`	Editor mode: 'text', 'rich', or 'code'
`model`	Object	`null`	Domma Model instance for binding
`modelKey`	String	`null`	Model field to bind to
`autosave`	Boolean	`false`	Enable automatic saving
`autosaveInterval`	Number	`3000`	Autosave delay in milliseconds
`storage`	String	`null`	localStorage key for persistence
`toolbar`	Array	Default	Toolbar button groups (rich/code mode)
`showToolbar`	Boolean	`true`	Show/hide toolbar
`imagePaste`	Boolean	`true`	Enable image pasting (rich mode)
`imageMode`	String	`'base64'`	'base64' or 'upload'
`imageUpload`	Function	`null`	Custom upload handler (file) => url
`language`	String	`'javascript'`	Code language (code mode)
`lineNumbers`	Boolean	`true`	Show line numbers (code mode)
`theme`	String	`'light'`	Editor theme
`placeholder`	String	`''`	Placeholder text
`minHeight`	Number	`200`	Minimum height in pixels
`maxHeight`	Number	`null`	Maximum height in pixels
`characterCount`	Boolean	`false`	Show character count
`wordCount`	Boolean	`false`	Show word count
`onChange`	Function	`null`	Callback on content change
`onSave`	Function	`null`	Callback on save
`onImagePaste`	Function	`null`	Callback on image paste

Methods

Method	Returns	Description
`getValue()`	String	Get editor content (HTML for rich mode)
`setValue(content)`	this	Set editor content
`getText()`	String	Get plain text (strips HTML in rich mode)
`clear()`	this	Clear all content
`focus()`	this	Focus the editor
`blur()`	this	Blur the editor
`undo()`	this	Undo last change
`redo()`	this	Redo last undo
`save()`	this	Manually save to storage
`setMode(mode)`	this	Switch editor mode
`getMode()`	String	Get current mode
`destroy()`	void	Remove editor and cleanup