---

name: editor-development description: When you are working on the Tiptap v3 block editor. Use this for extending the editor, adding nodes, or debugging rich text issues.

Editor Development (Tiptap v3)

1. Overview

• Package: libs/editor (published as @nextblock-cms/editor).
• Core: Tiptap v3 based (Headless).
• Goal: Provide a Notion-style block editing experience.

2. Key Locations

• Entrypoint: libs/editor/src/lib/editor.tsx (NotionEditor component).
• Extensions: libs/editor/src/lib/kit.ts (Defines the editor schema: nodes, marks, extensions).
• Toolbar: libs/editor/src/lib/components/menus/Toolbar.tsx.
• Menus: libs/editor/src/lib/components/menus/ (Bubble, Floating, Slash menus).

3. Workflow

Adding a new Node/Extension

1. Install dependency if needed (e.g., @tiptap/extension-youtube).
2. Register in libs/editor/src/lib/kit.ts.
3. If it needs a custom view, create a React component and use ReactNodeViewRenderer.

CSP Compliance

• Strict CSP: The editor runs in a strict CSP environment.
• Inline Styles: Avoid inline style="..." attributes if possible, or ensure they are handled by Rehype sanitization in the renderer.
• See docs/editor-context.md for deep dive.

4. Build & Test

• Build: nx build editor. Note: The build process injects 'use client'; directives.
• Test: Manual QA required for rich text interactions (selection, shortcuts, menu positioning).