sp-markdown-editor

Full-featured markdown editor web component with source, WYSIWYG, and split view modes. Includes a formatting toolbar, syntax highlighting (via Prism.js), voice dictation, file import/export, undo/redo history, and auto-save support.

Peer Dependencies

Full WYSIWYG and preview mode functionality requires the following peer dependencies to be loaded before the component:

<!-- Markdown parsing -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- HTML sanitization -->
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
<!-- Syntax highlighting -->
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"></script>

Without these, the editor works fully in source mode but WYSIWYG/preview rendering will be limited.

Installation

Install from a GitHub Release with peer dependencies:

npm install https://github.com/StephanWald/trm-ai-webcomponents/releases/download/v0.0.1/skillspilot-webcomponents-0.0.1.tgz marked dompurify prismjs

Or load via script tags:

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"></script>
<script type="module" src="https://stephanwald.github.io/trm-ai-webcomponents/wc/skillspilot.esm.js"></script>

Examples

Basic Editor

A minimal markdown editor with default configuration. Starts in source mode with the formatting toolbar.

View / Edit Source

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script> <sp-markdown-editor id="editor1" placeholder="Start typing markdown here..."></sp-markdown-editor>

With Initial Content

Use the value property to set initial markdown content. The editor renders the content in source mode on load.

View / Edit Source

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script> <sp-markdown-editor id="editor2"></sp-markdown-editor> <script> document.getElementById('editor2').value = '# Hello World This is **bold** and _italic_ text. - Item one - Item two - Item three > A blockquote example.'; </script>

Toolbar and Split View

The editor's toolbar includes formatting buttons (B, I, S, H1-H3, lists, blockquote, code, link, image). Switch between Source, Split, and WYSIWYG modes using the mode tabs at the right end of the toolbar.

View / Edit Source

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"></script> <sp-markdown-editor id="editor3" mode="split"></sp-markdown-editor> <script> document.getElementById('editor3').value = '## Markdown Formatting Try the **toolbar** buttons or type *markdown* syntax directly. ### List 1. First item 2. Second item 3. Third item'; </script>

Event Handling

Listen to contentChange, save, modeChange, importFile, and exportFile events.

View / Edit Source

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script> <sp-markdown-editor id="editor4" auto-save="true" auto-save-delay="3000"></sp-markdown-editor> <div id="evtlog" style="margin-top:8px;padding:8px;background:#f5f5f5;border-radius:4px;font-family:monospace;font-size:0.75rem;min-height:60px;"></div> <script> const editor = document.getElementById('editor4'); const log = document.getElementById('evtlog'); function addLog(msg) { const p = document.createElement('p'); p.style.margin = '2px 0'; p.textContent = new Date().toLocaleTimeString() + ' - ' + msg; log.prepend(p); if (log.children.length > 6) log.lastChild.remove(); } editor.value = '# Event Demo Edit this text and watch the events below.'; editor.addEventListener('contentChange', e => addLog('contentChange: ' + (e.detail ? e.detail.length : 0) + ' chars')); editor.addEventListener('save', e => addLog('save: ' + (e.detail && e.detail.content ? e.detail.content.length : 0) + ' chars')); editor.addEventListener('modeChange', e => addLog('modeChange: ' + e.detail)); </script>

Dark Mode

Apply the theme-dark class or set theme="dark" to use the dark color scheme with DWC design tokens.

View / Edit Source

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script> <div class="theme-dark" style="background:#1a1a2e;padding:16px;border-radius:8px"> <sp-markdown-editor id="editor5" theme="dark"></sp-markdown-editor> </div> <script> document.getElementById('editor5').value = '# Dark Mode Editor The editor adapts to --dwc-* design tokens automatically. Toggle dark mode with theme="dark" or class="theme-dark".'; </script>

API Reference

Properties

Property	Attribute	Type	Default	Description
autoSave	auto-save	boolean	true	—
autoSaveDelay	auto-save-delay	number	2000	—
maxHistory	max-history	number	50	—
mode	mode	"source" | "split" | "wysiwyg"	'source'	—
placeholder	placeholder	string	'Start typing markdown...'	—
value	value	string	''	—

Events

Event	Detail Type	Description
contentChange	ContentChangeEvent	—
exportFile	ExportEvent	—
imagePaste	ImagePasteEvent	—
importFile	ImportEvent	—
modeChange	ModeChangeEvent	—
save	SaveEvent	—

Methods

Method	Signature	Description
clear	() => Promise<void>	—
focusEditor	() => Promise<void>	—
getContent	() => Promise<string>	—
getMode	() => Promise<EditorMode>	—
isDirty	() => Promise<boolean>	—
setContent	(value: string) => Promise<void>	—
setMode	(mode: EditorMode) => Promise<void>	—

CSS Custom Properties

Property	Description
--dwc-border-color	Alias border color used for toolbar separators and toolbar button hover borders
--dwc-border-radius	Border radius for toolbar buttons, mode switcher container, inline code chips, and the host element outline
--dwc-color-border	Border color for the host element, toolbar bottom border, footer top border, mode switcher, split source pane divider, and WYSIWYG heading underlines
--dwc-color-primary	Primary accent color for active toolbar button borders, active mode tab background, blockquote left-border accent, link color, and active-mode tab background
--dwc-color-primary-lighter	Light primary tint for pressed toolbar button state and listening-pulse animation peak
--dwc-color-primary-lightest	Very light primary tint for hovered and active toolbar buttons
--dwc-color-success	Success color for the "saved" save indicator state in the footer
--dwc-color-surface	Background color for the overall editor border, mode switcher, split preview pane, and WYSIWYG pane
--dwc-color-surface-secondary	Secondary surface color for the toolbar container background, footer background, inline code chips, and table header cells
--dwc-color-text	Primary text color for toolbar buttons, mode tabs, source editor content, and WYSIWYG preview prose
--dwc-color-text-secondary	Secondary text color for source editor placeholder and WYSIWYG blockquote and footer labels
--dwc-color-warning	Warning color for the "saving" and "dirty" save indicator states in the footer
--dwc-font-family	Base proportional font family for editor UI and preview prose
--dwc-font-family-mono	Monospace font family for the source textarea and code blocks in preview
--dwc-font-size-base	Base font size for toolbar buttons, mode tabs, and source editor text
--dwc-font-size-sm	Small font size for the footer stats and word/character counts
--dwc-font-weight-medium	Medium font weight for mode tabs and footer save indicator
--dwc-line-height-relaxed	Relaxed line height for the source editor textarea (improves readability)

CSS Parts

Part	Description
footer	The status footer showing character count, word count, and auto-save indicator
mode-switcher	The mode switching tabs (Source / WYSIWYG / Split) at the right end of the toolbar
source-editor	The raw markdown source textarea used in source and split modes
toolbar	The formatting toolbar containing bold, italic, heading, list, and utility buttons
wysiwyg-editor	The rendered HTML preview container used in WYSIWYG mode