HyMarkdownEditor

Markdown editor with a CodeMirror 6 source pane and a unified-pipeline preview, presented either as a single pane with a Source ⇄ Preview toggle or as a side-by-side split.

The view prop picks the layout strategy. The default view="single" shows one pane with a Source ⇄ Preview eye toggle. view="auto" makes it responsive — a container query renders source + preview side-by-side when the editor is wide and collapses back to the single-pane toggle when it is narrow. view="split" pins the side-by-side layout with a draggable hy-splitter handle so the panes can be resized. In any split layout the preview refreshes live (debounced) as you type.

Examples

Basic (single pane with Source ⇄ Preview toggle)

<hy-markdown-editor label="Description" placeholder="Type Markdown..."></hy-markdown-editor>

Responsive (auto split when wide, eye toggle when narrow)

<hy-markdown-editor view="auto" label="Notes" value="# Live preview"></hy-markdown-editor>

Pinned side-by-side split

<hy-markdown-editor view="split" label="Notes" value="# Live preview"></hy-markdown-editor>

Mode-locked preview

<hy-markdown-editor mode="preview" no-mode-toggle value="# Hello"></hy-markdown-editor>

Autofocus inside a dialog (overlay-discovery contract)

<hy-dialog>
  <hy-markdown-editor autofocus autoselect value="# Existing"></hy-markdown-editor>
</hy-dialog>

Events

• input - Detail { value: string }. Fired on every keystroke.
• change - Detail { value: string }. Fired on blur after the value changed.
• mode-change - Detail { mode, previous }. Fired when the mode-toggle button is clicked. Not fired for programmatic el.mode = ... assignment.
• image-upload-start - Detail { file: File }. Fired when a picked/dropped image starts uploading via the uploadImage callback.
• image-upload-error - Detail { file: File, message: string }. Fired when the uploadImage callback rejects.

Slots

• extra-tools - Extra toolbar items, rendered in the toolbar's trailing cluster next to the mode toggle. Use for primary actions anchored to the editing surface (e.g. Save / Cancel on an editable document). Only visible while the toolbar is — source / split mode; hidden in single-pane preview. React mirror: the extraTools prop.

Methods

formResetCallback()

Called when <form>.reset() runs (or a <button type="reset"> is clicked).

formDisabledCallback()

Called when the owning form or a wrapping <fieldset disabled> toggles.

formStateRestoreCallback()

Called when the browser restores form state (BFCache, autofill).

focus()

Focus the CM6 editor. No-op when the source pane can't be shown (single-pane preview) or before mount.

select()

Select the entire source-pane content. No-op when the source pane can't be shown.