feat(editor): migrate rich text editor to Tiptap with Astryx inline citations

[qyinm]

Summary

Migrates Plot's artifact rich text editor from Lexical to Tiptap (ProseMirror) and introduces interactive Astryx-styled inline text citation capsules (<Citation variant="label" />) with dynamic source provider icons (GitHub, Linear, Notion, Slack, Figma) and a contextual navigation popover aligned with Plot's minimalist design language.

Why

1. Modern Rich Text Capabilities: Tiptap / ProseMirror provides greater flexibility for custom inline node views, block extensions, and robust markdown typography tailored for modern document workflows.
2. First-class Source Citations: Replaces plain text reference markers with native inline citation pills that visually convey source provenance (GitHub, Linear, Notion, Slack, Figma) directly within the flow of sentences.
3. Contextual Evidence Navigation: Users can inspect underlying evidence without leaving the document via a multi-source pagination popover with direct deep-links to source repositories and pull requests.
4. Seamless Backend Compatibility: Maintains 100% backward and forward compatibility with existing PostgreSQL JSONB storage and Spring Boot AST validation rules through bidirectional AST transformation.

Changes

1. Editor Core & Dependencies (apps/web/package.json)

• Added @tiptap/react, @tiptap/core, @tiptap/starter-kit, @tiptap/extension-placeholder, and tiptap-markdown.

2. Astryx Inline Citation Extension (tiptap-citation-extension.tsx)

• Created TiptapCitationExtension (inline atom node view) rendering Astryx's <Citation variant="label" />.
• Added automated provider detection (getSourceProviderIcon, resolveProviderName) to render authentic brand SVGs (GitHub, Linear, Notion, Slack, Figma) inside the leading icon slot of each citation capsule.
• Implemented an interactive card popover featuring:
  • Provider capsule badge with official brand mark.
  • Multi-source pagination (← → 1/N) for statements backed by multiple evidence items.
  • Clean monospace URL display and monochromatic Open ↗ external link action.
  • Smooth rounded-2xl corners, backdrop-blur-xl, and soft diffuse drop shadow matching Plot's design system.

3. Tiptap Draft Editor (tiptap-draft-editor.tsx, artifact-document-surface.tsx)

• Built TiptapDraftEditor handling real-time editing, dynamic word/character metrics counting, and save state lifecycles (Saved ↔ Unsaved changes).
• Added tiptapToLexicalJson serializer ensuring drafts sent to /api/plot/artifact-variants match the expected schema for database persistence and backend validation.
• Replaced legacy CitedDraftEditor on ArtifactDocumentSurface.

4. Testing & Verification

• Added dedicated unit tests in tiptap-draft-editor.test.tsx verifying read-only historical rendering and state transitions.
• All 159 Vitest unit tests passing across 27 test files (pnpm --filter @plot/web test).
• Clean production build and TypeScript type-check (next build).
• End-to-end verified in live browser with playwright-cli (inline icon rendering, popover interactions, real-time typing, and backend draft saving).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
plot-web	Ready	Preview	Aug 20, 2026 2:57pm