Advanced Rich Text Editor
Relevant source files
The following files were used as context for generating this wiki page:
- packages/twenty-front/src/modules/advanced-text-editor/hooks/useAdvancedTextEditor.ts
- packages/twenty-front/src/modules/mention/extensions/tests/MentionTag.test.ts
- packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx
- packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx
- packages/twenty-shared/src/constants/DocumentationPaths.ts
The Advanced Rich Text Editor is a modular editing system within the Twenty CRM platform, built primarily on the Tiptap framework. It provides users with a professional-grade writing experience that supports multiple content formats including JSON, HTML, and Markdown. The editor is designed to handle complex interactions such as record mentions, slash commands, and dynamic variable tags, which are essential for CRM workflows like automated emails and note-taking.
This system is characterized by its high degree of extensibility, allowing for specialized nodes like MentionTag and VariableTag, as well as interactive elements like resizable images. It serves as the primary interface for creating rich content that interacts with the underlying Twenty data model.
Core Architecture and Initialization
The editor is initialized through a custom React hook, useAdvancedTextEditor, which configures the Tiptap editor instance with a comprehensive suite of extensions. These extensions define the editor's capabilities, ranging from basic text formatting to advanced CRM-specific features.
Initialization Flow
The initialization process involves determining the content mode (e.g., Markdown vs. JSON), configuring UI elements like placeholders, and conditionally enabling features like slash commands based on the editor's read-only status.
Editor Extensions
The editor utilizes a list of extensions to manage different types of content and behaviors:
| Extension Category | Key Extensions Included |
|---|---|
| Core Structure | Document, Paragraph, Text, HardBreak |
| Formatting | Bold, Italic, Strike, Underline, Heading (levels 1-3) |
| Media & Links | Link, ResizableImage, UploadImageExtension, Dropcursor |
| CRM Features | VariableTag, MentionTag, SlashCommand |
| UI/UX | Placeholder, UndoRedo, ListKit |
Sources: packages/twenty-front/src/modules/advanced-text-editor/hooks/useAdvancedTextEditor.ts:65-98
Content Processing and Serialization
The Advanced Rich Text Editor supports three primary content types: json, html, and markdown.
Markdown Integration
When the editor is in Markdown mode, it uses the marked library to parse Markdown strings into HTML during initialization. Tiptap then consumes this HTML to populate the editor state.
Sources: packages/twenty-front/src/modules/advanced-text-editor/hooks/useAdvancedTextEditor.ts:106-110
Mention Serialization
Specialized nodes like MentionTag have custom serialization logic to ensure they are represented correctly when exported as plain text or Markdown. Mentions are serialized into a specific bracketed format: [[record:objectName:recordId:label]].
CRM Integration Features
Mention Tags
The MentionTag is an inline atom node that allows users to reference specific records (Companies, People, Opportunities, etc.) within the text. It stores metadata as attributes, including:
recordId: The unique identifier of the referenced record.objectNameSingular: The type of object (e.g., "company").label: The display name shown in the editor.imageUrl: Optional avatar or logo for the record.
These attributes are also rendered as HTML data attributes (e.g., data-record-id) when the editor content is exported as HTML.
Sources: packages/twenty-front/src/modules/mention/extensions/tests/MentionTag.test.ts:31-42, packages/twenty-front/src/modules/mention/extensions/tests/MentionTag.test.ts:145-167
Slash Commands and Variable Tags
- Slash Commands: Enabled conditionally (
enableSlashCommand), these provide a command-menu interface for users to insert blocks or execute actions quickly. - Variable Tags: Used for workflow variables, allowing users to insert dynamic placeholders that will be replaced with actual data during execution.
Sources: packages/twenty-front/src/modules/advanced-text-editor/hooks/useAdvancedTextEditor.ts:74, packages/twenty-front/src/modules/advanced-text-editor/hooks/useAdvancedTextEditor.ts:96
Configuration Options
The useAdvancedTextEditor hook accepts several properties to control the editor's behavior and appearance:
| Property | Type | Description |
|---|---|---|
defaultValue | string | The initial content of the editor. |
readonly | boolean | If true, disables editing and slash commands. |
contentType | 'json' | 'html' | 'markdown' | Determines how the defaultValue is parsed and how updates are handled. |
onUpdate | (editor: Editor) => void | Callback triggered whenever the editor content changes. |
onImageUpload | (file: File) => Promise<string> | Handler for processing image uploads and returning the URL. |
Sources: packages/twenty-front/src/modules/advanced-text-editor/hooks/useAdvancedTextEditor.ts:28-40
Implementation Summary
The Advanced Rich Text Editor is a central component for content creation in Twenty, bridging the gap between standard text editing and structured CRM data. By leveraging Tiptap's extension system, it provides a tailored experience that includes CRM-specific entities like mentions and variables while maintaining compatibility with standard formats like Markdown and HTML. its architecture ensures that content is not only visually rich but also programmatically accessible for downstream processes such as email automation and data indexing.