An editable field note
This is the JavaScript used by the first playground preset. Edit and run it in the interactive playground, including its HTML and CSS.
import {registerRichTextWeb,registerRichTextToolbar} from '@wieslawsoltes/richtextweb/web';
import {fromMarkdown} from '@wieslawsoltes/richtextweb/formats';
registerRichTextWeb();registerRichTextToolbar();
const editor=document.querySelector('#editor');
editor.setAttribute('theme',document.documentElement.dataset.theme);
editor.Document=fromMarkdown('# A field note on making\n\nThe best tools make space for **the work itself**. They feel familiar, but leave room to discover something new.\n\n## A few guiding principles\n\n- Start with a clear idea.\n- Make the important things effortless.\n- Leave the door open for what comes next.\n\n*This is your page. Make it your own.*');
document.querySelector('#undo').onclick=()=>editor.Engine.Undo();
document.querySelector('#redo').onclick=()=>editor.Engine.Redo();
document.querySelector('#inspect').onclick=()=>console.log(editor.Document.ToJSON());
editor.addEventListener('documentchange',()=>console.log('Document changed'));
console.log('Structured document ready for editing.');Show the HTML host
<div class="toolbar"><button id="undo">Undo</button><button id="redo">Redo</button><button id="inspect">Inspect document</button></div><rich-text-toolbar for="editor" mode="all"></rich-text-toolbar><rich-text-box id="editor" view-mode="continuous" aria-label="Editable field note" style="display:block;height:340px;margin-top:12px"></rich-text-box><p class="hint">Select text to format it. This is the published rich-text control and document engine.</p>How it works
More than editable HTML
The document is a structured model shared by editing, rendering and format conversion. Browser controls are consumers of that engine.
Register controls through /web. Use /formats to create a document from Markdown, then assign the editor.Document property.
Own the lifetime
Dispose owned engines and document subscriptions on teardown. A mutable document needs revision subscriptions, not just identity checks.
The playground replaces its entire isolated frame on each run. In your application, use the framework’s unmount or disposal hook instead. Do not dispose a shared model while another view still owns it.
Read the lifecycle guide →Know the contract
Source repositories can contain work newer than the published package. The showcase uses @wieslawsoltes/richtextweb@0.5.0.