RichText

A customizable rich text editor web component with toolbar support and command system.

Installation

``bash
npm install @browser.style/rich-text
`

Usage

`javascript
import '@browser.style/rich-text';
`

`html

Initial content


toolbar="b,i,u|h1,h2,h3|ol,ul,hr|img|link,unlink"
event-mode="both"
plaintext="false">


Initial formatted content



`

Attributes

- event-mode: Event handling mode ('input', 'change', 'both')
- input-types: Comma-separated list of allowed input types
- plaintext: Enable plaintext-only mode (no formatting)
- skip-toolbar: Custom text for skip-to-content button
- toolbar: Pipe-separated groups of comma-separated commands

Events

- rt:content: Content changed (provides new content)
- rt:clear: Clear content
- rt:reset: Reset to initial content

Form Integration

`html




Initial content




`

Access form values:
`javascript
const form = document.querySelector('form');
const editor = form.elements.editor;
console.log(editor.value); // Current HTML content
`

Custom Commands

Add custom toolbar commands:

`javascript
const editor = document.querySelector('rich-text');
editor.addCustomCommand({
key: 'custom',
command: 'insertHTML',
icon: 'M12,2A10,10 0 0,1 22,12', // SVG path
title: 'Insert Custom',
fn: (node) => {
document.execCommand('insertHTML', false, '

');
}
});
`

Toolbar Groups

Default toolbar groups are separated by | and commands within groups by ,:

`html



`

Available commands:
- Text style: b (bold), i (italic), u (underline)
- Headings: h1, h2, h3
- Lists: ol (ordered), ul (unordered)
- Media: img (image), link, unlink
- Layout: hr (horizontal rule)

Content Manipulation

`javascript
const editor = document.querySelector('rich-text');

// Clear content
editor.dispatchEvent(new Event('rt:clear'));

// Reset to initial content
editor.dispatchEvent(new Event('rt:reset'));

// Set new content
editor.setContent('

New content

', false);
``