C&C Docs
Log in

cnc-tiptap

A rich-text editor built on TipTap. Name the tools you want and it builds the toolbar; supply your own markup per tool when the defaults are not enough. It reads and writes HTML through value, reports six lifecycle events, and can be driven read-only or extended with TipTap extensions of your own.

Quick start

value is the document, as HTML. $extensions is a list of tool names, and each one you name gets its built-in toolbar button — no markup required. 

<cnc-tiptap
  placeholder="Start writing..."
  value="<p>Hello</p>"
  $extensions="['toggleBold','toggleItalic','toggleUnderline','unsetAllMarks']"
></cnc-tiptap>

The tool catalogue

Every name below can go in $extensions and brings its own button. toggleHeading is the exception: one name, three buttons, for H1 through H3.

Group Tool names
Marks toggleBold · toggleItalic · toggleUnderline · toggleStrike · toggleCode · unsetAllMarks
Blocks toggleHeading · toggleBlockquote · toggleCodeBlock · setHorizontalRule · setHardBreak
Lists toggleBulletList · toggleOrderedList · toggleTaskList · sinkListItem · liftListItem
Media setImage · setYoutubeVideo · toggleLink
Tables insertTable · addColumnBefore · addColumnAfter · deleteColumn · addRowBefore · addRowAfter · deleteRow · deleteTable · mergeCells · splitCell · toggleHeaderRow · toggleHeaderColumn
Templating templateIf · templateDisplay

What it loads, and when

TipTap is imported from a CDN on mount — the core plus thirteen extension packages, fetched in parallel — rather than bundled. So the editor needs network access at runtime, renders nothing server-side, and appears a moment after the rest of the page. Content set through value is parsed once the editor exists, which is why an editor seeded with HTML still starts empty for an instant. Budget for that on a slow connection, and do not put a cnc-tiptap anywhere the content must be readable without scripting.

Usage guidance

Name only the tools the document actually needs. A full strip invites structure a downstream renderer may not support, and every tool you offer is markup you have agreed to accept back. Save on update rather than transaction — the latter fires on selection changes too, and debouncing it is not the same as not subscribing. For content that is only ever displayed, read-only is cheaper to reason about than a separate renderer, but a plain server-rendered block is cheaper still.

← Back to Widgets