Home
HTML Editor
The HTML Editor provides a rich-text editing experience built on Tiptap.
It wraps the editable area in A styled wc-field,
exposes common formatting actions, and includes a segmented switch between
Visual and HTML source modes.
Get and set the HTML content via the value property. The component
dispatches a change event whenever the content is modified.
Mention suggestions are supported through the mentions property,
with optional externally managed lookup via the search event.
Usage
<wc-html-editor id="html-editor" label="Message" helper-text="Use Visual mode for formatting and HTML mode for source edits" style="display:block;"></wc-html-editor>
<script>
const editor = document.getElementById('html-editor');
editor.value = `<p>Hi everyone! <strong>Don't forget the daily stand-up at 8 AM.</strong></p>
<p>Please review the tasks assigned to you before the meeting.</p>
<p>Ping @Alex if you need help.</p>`;
editor.mentions = [
{ label: 'Alex', value: 'alex' },
{ label: 'Pat', value: 'pat' },
{ label: 'Jordan', value: 'jordan' },
];
document.querySelector('#disableEditor').addEventListener('change', function (evt) {
editor.disabled = evt.target.value;
});
document.querySelector('#readonlyEditor').addEventListener('change', function (evt) {
editor.readonly = evt.target.value;
});
editor.addEventListener('change', () => {
console.log('html-editor value changed:', editor.value);
});
</script>
The editor includes a segmented switch for Visual and
HTML modes. Both modes stay in sync through the value property.
<wc-html-editor id="html-editor-managed" label="Managed Mentions" mentions-search="managed" placeholder="Type @ to search managed mentions" style="display:block;"></wc-html-editor>
<script>
const managedEditor = document.getElementById('html-editor-managed');
managedEditor.addEventListener('search', event => {
const query = (event.detail?.query || '').toLowerCase();
const callback = event.detail?.callback;
const directory = [
{ label: 'Alex Morgan', value: 'alex.morgan' },
{ label: 'Alicia Torres', value: 'alicia.torres' },
{ label: 'Jordan Lee', value: 'jordan.lee' },
{ label: 'Pat Kim', value: 'pat.kim' },
];
const results = directory.filter(item => item.label.toLowerCase().includes(query));
callback?.(results);
});
</script>
On this page
Usage