ComponentsUpdated Sep 9, 2026

Markdown Editor

A Tiptap editor that reads and writes GitHub-flavored markdown: headings, lists, tasks, tables, code, mentions, and a selection toolbar. MarkdownView renders the same markdown read-only.

Import

Source: packages/ui/src/components/markdown-editor

tsx

import { MarkdownEditor, MarkdownView, useMarkdownEditor, slackFeatures, inlineOnlyFeatures } from '@highlight/ui'

Basic

initialValue plus onChange. Select text for the floating toolbar.

tsx

import { useState } from 'react'
import { MarkdownEditor } from '@highlight/ui'

const INITIAL = `## Launch retro

- [x] Move the release date
- [ ] Split the migration into two steps

Owner: **Lin**. Follow up in #design-crit.`

export default function MarkdownEditorBasic() {
  const [markdown, setMarkdown] = useState(INITIAL)

  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <MarkdownEditor
        initialValue={INITIAL}
        onChange={setMarkdown}
        placeholder="Start writing…"
        className="border-border/10 rounded-xl border"
      />
      <p className="text-foreground/50 text-xs tabular-nums">{markdown.length} characters of markdown</p>
    </div>
  )
}

Inline only

Feature presets scope what the editor accepts. Spread a preset and override fields.

tsx

import { MarkdownEditor, inlineOnlyFeatures } from '@highlight/ui'

export default function MarkdownEditorInline() {
  return (
    <MarkdownEditor
      initialValue="Bold, _italic_, `code` and links only. No headings or lists."
      features={inlineOnlyFeatures}
      placeholder="Reply…"
      className="border-border/10 w-full max-w-xl rounded-xl border"
      contentClassName="min-h-0"
    />
  )
}

Read-only view

Decisions

Ship the design system before the Windows beta.
Lin owns the Figma sync spike.

Item	Owner
Tokens	Vaun
Components	Lin

tsx

import { MarkdownView } from '@highlight/ui'

const SOURCE = `### Decisions

1. Ship the design system before the Windows beta.
2. Lin owns the Figma sync spike.

| Item | Owner |
| --- | --- |
| Tokens | Vaun |
| Components | Lin |`

export default function MarkdownEditorView() {
  return (
    <div className="w-full max-w-xl">
      <MarkdownView value={SOURCE} />
    </div>
  )
}

Props

Props added on top of the underlying element or Base UI part.

Prop	Type	Default	Description
`initialValue / value`	string	—	Uncontrolled seed, or a controlled markdown value.
`onChange`	(markdown, editor) => void	—	Latest markdown on every change. onChangeHtml gives HTML.
`features`	MarkdownEditorFeatures	—	Per-feature toggles; presets: slackFeatures, githubFeatures, linearFeatures, notionFeatures, gmailFeatures, inlineOnlyFeatures.
`mentionables`	MentionablesHandler	—	createSlackMentionables and friends wire @ and # triggers to platform data.
`toolbar`	boolean	true	Show the selection toolbar.
`placeholder / editable / autoFocus`	…	—	Passthroughs to Tiptap.

Notes

Renders on the client only; in SSR apps mount it after hydration as this page does.