Daeditor

Modern WYSIWYG editor built with TypeScript. Based on Simditor architecture, rewritten from scratch without jQuery.

Features

• 19 toolbar buttons — bold, italic, underline, strikethrough, headings (H1-H7), font size, text color, ordered/unordered lists, blockquote, code, alignment (left/center/right), link, image, table, horizontal rule, HTML source editor
• Image handling — drag & drop upload, paste from clipboard, resize with drag handles, double-click to edit properties (URL, alt, size, float)
• Markdown shortcuts — # H1, ## H2, * list, > quote, ``` code, --- divider
• Slash commands — type / to open block type menu with filtering
• Keyboard shortcuts — Cmd+B/I/U, Cmd+Z undo, Shift+Cmd+Z redo
• HTML sanitization — whitelist-based via DOMPurify
• Undo/redo — 20-state stack with cursor position serialization
• Accessibility — toolbar keyboard navigation, aria-live announcements
• Localization — Russian, English, Chinese
• Zero jQuery — vanilla DOM, single dependency (DOMPurify)

Install

npm install daeditor

Usage

<textarea id="editor"></textarea>

<script type="module">
  import { Editor } from 'daeditor';
  import 'daeditor/style.css';

  const editor = new Editor({
    textarea: '#editor',
    placeholder: 'Start typing...',
    locale: 'en-US',
  });
</script>

Options

const editor = new Editor({
  // Required
  textarea: '#editor',              // selector or HTMLTextAreaElement

  // Optional
  placeholder: 'Start typing...',   // placeholder text
  locale: 'en-US',                  // 'en-US' | 'ru-RU' | 'zh-CN'
  toolbar: true,                    // true | false | ['bold', 'italic', '|', ...]
  tabIndent: true,                  // Tab key indentation
  pasteImage: true,                 // allow image paste from clipboard
  cleanPaste: false,                // paste as plain text
  indentWidth: 40,                  // indent size in px

  // Image upload callback
  uploadImage: async (file: File): Promise<string> => {
    const formData = new FormData();
    formData.append('image', file);
    const res = await fetch('/api/upload', { method: 'POST', body: formData });
    const { url } = await res.json();
    return url;
  },
});

API

editor.setValue('<p>Hello <strong>world</strong></p>');
editor.getValue();     // returns HTML string
editor.sync();         // sync to textarea
editor.focus();
editor.blur();
editor.enable();
editor.disable();
editor.isEmpty();      // true if no content
editor.destroy();      // cleanup

// Events
editor.on('valuechanged', () => { /* content changed */ });
editor.on('selectionchanged', () => { /* cursor moved */ });
editor.on('focus', () => { /* editor focused */ });
editor.on('blur', () => { /* editor blurred */ });
editor.on('pasteimage', (file: File) => { /* image pasted */ });

Custom Toolbar

const editor = new Editor({
  textarea: '#editor',
  toolbar: [
    'bold', 'italic', 'underline', '|',
    'heading', 'ol', 'ul', '|',
    'link', 'image',
  ],
});

Available buttons: bold, italic, underline, strikethrough, heading, fontScale, color, ol, ul, blockquote, code, alignLeft, alignCenter, alignRight, link, image, table, hr, html

Custom Buttons

import { ToolbarButton, Toolbar, Editor } from 'daeditor';

class MyButton extends ToolbarButton {
  name = 'myButton';
  icon = 'myIcon';
  shortcut = 'cmd+m';

  command(): void {
    // your logic
    this.editor.trigger('valuechanged');
  }
}

Toolbar.registerButton('myButton', MyButton);

const editor = new Editor({
  textarea: '#editor',
  toolbar: ['bold', 'italic', '|', 'myButton'],
});

Custom Locale

import { I18n } from 'daeditor';

I18n.addLocale('de-DE', {
  bold: 'Fett',
  italic: 'Kursiv',
  underline: 'Unterstrichen',
  // ...
});

const editor = new Editor({
  textarea: '#editor',
  locale: 'de-DE',
});

Development

git clone https://github.com/webda-ai/daeditor.git
cd daeditor
npm install
npm run dev       # dev server at localhost:5173
npm run test      # run tests
npm run build     # build to dist/

Build Output

| Format | Size | Gzip | |--------|------|------| | ESM | ~86 KB | ~19 KB | | UMD | ~62 KB | ~16 KB | | CSS | ~8 KB | ~2 KB |

License

MIT