C&C Docs
Log in

cnc-markdown-tiptap

A rich-text EDITOR whose value is markdown. It edits HTML through TipTap and converts back to markdown on every change, so the property you bind stays plain text while the user sees a formatted document.

Quick start

Bind $value to markdown. The editor is built from CDN modules at mount, so the element is empty server-side and until they resolve.

Insert Image
Toggle Link

The bound value stays markdown: 

# Notes

Edit this **document**.
<div x-data="{ doc: '# Notes' }">
  <cnc-markdown-tiptap $value="doc"></cnc-markdown-tiptap>
</div>

Usage guidance

Reach for this when the AUTHOR should not have to know markdown but the STORED value should still be markdown — a description field, release notes, a knowledge-base entry. Where the author is comfortable with the syntax, a cnc-textarea beside a cnc-markdown preview is lighter and round-trips nothing.

Expect the source to be rewritten. Every change converts the whole document back through Turndown, so hand-tuned formatting, unusual emphasis markers and deliberate whitespace will not survive a visit to this editor — which matters if the same file is also edited by hand or kept in version control.

Trim tools to what the document needs. The default toolbar offers everything, and a comment box that accepts horizontal rules and highlights invites documents nobody wanted.

← Back to Widgets