Rounak Joshi
9f594cda1c
Part of Fixing Issue #14976 ### Pull Request Summary: SlashCommand Integration in Advanced Text Editor This pull request introduces **SlashCommand functionality** within the Advanced Text Editor, specifically used in the **Workflow node** of **Send Email body** components. The implementation leverages the `@tiptap/suggestion` extension from the TipTap ecosystem, enabling dynamic styling and command execution via a custom dropdown triggered by typing `/`. --- ### Implementation Overview #### 1. **Custom Extension & Dropdown Rendering** - A new extension was created to handle SlashCommand interactions. - This extension renders a **Dropdown component** that displays available commands with relevant styles, icons etc. #### 2. **Command Configuration** - Each command includes: - Visibility and active state logic - Execution behavior upon selection - All commands are initialized and configured centrally. #### 3. **Search & Filtering** - As users type after the `/`, the command list is **filtered based on the query**. - For example, typing `/car` filters and displays matching commands in the dropdown. #### 4. **Dropdown Lifecycle & Positioning** - The dropdown is rendered using React lifecycle hooks provided by `SuggestionTip`: - `onStart`: Initializes state, sets selected command, and captures cursor position via `DOMRect`. - `onUpdate`, `onKeyDown`, `onExit`: Manage dropdown updates and interactions. - Positioning is handled via a **`useFloating` hook**, which aligns the dropdown relative to the cursor and editor bounds. - The dropdown is rendered in a **react-portal**, wrapped in the current theme for consistent styling and animation. #### 6. **State Management** - A dedicated `SlashCommandState.ts` file manages: - Callback functions - Current command and selected item - Cleanup utilities for event listeners - Dropdown navigation (arrow keys, enter key) #### 7. **Integration Points** - SlashCommand functionality is now **enabled in Send Email body of the Workflow**. - Relevant changes have been applied to support this components in Storybook as well. [slash command test.webm](https://github.com/user-attachments/assets/5c537844-8987-4ce5-9fca-b29ea93d8063) <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Updates Portuguese (Brazil and Portugal) generated locale files, including a new editor hint string for “Enter text or type '/' for commands,” plus assorted translation tweaks. > > - **i18n/locales**: > - **Portuguese (Brazil) `src/locales/generated/pt-BR.ts`**: Add new editor hint message (`"Enter text or Type '/' for commands"`) and adjust multiple translations/wording. > - **Portuguese (Portugal) `src/locales/generated/pt-PT.ts`**: Add the same editor hint message and refine numerous translations/labels. > - No functional code changes; translation files regenerated/updated. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit b3d7407525ec08da1fcfafe1309bb4fd61654dac. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Co-authored-by: Félix Malfait <felix@twenty.com>
The #1 Open-Source CRM
🌐 Website · 📚 Documentation · 
Roadmap · 
Discord · 
Figma
Installation
See: 🚀 Self-hosting 🖥️ Local Setup
Does the world need another CRM?
We built Twenty for three reasons:
CRMs are too expensive, and users are trapped. Companies use locked-in customer data to hike prices. It shouldn't be that way.
A fresh start is required to build a better experience. We can learn from past mistakes and craft a cohesive experience inspired by new UX patterns from tools like Notion, Airtable or Linear.
We believe in Open-source and community. Hundreds of developers are already building Twenty together. Once we have plugin capabilities, a whole ecosystem will grow around it.
What You Can Do With Twenty
Please feel free to flag any specific needs you have by creating an issue.
Below are a few features we have implemented to date:
- Personalize layouts with filters, sort, group by, kanban and table views
- Customize your objects and fields
- Create and manage permissions with custom roles
- Automate workflow with triggers and actions
- Emails, calendar events, files, and more
Personalize layouts with filters, sort, group by, kanban and table views
Customize your objects and fields
Create and manage permissions with custom roles
Automate workflow with triggers and actions
Emails, calendar events, files, and more
Stack
- TypeScript
- Nx
- NestJS, with BullMQ, PostgreSQL, Redis
- React, with Recoil, Emotion and Lingui
Thanks
Thanks to these amazing services that we use and recommend for UI testing (Chromatic), code review (Greptile), catching bugs (Sentry) and translating (Crowdin).
Join the Community
- Star the repo
- Subscribe to releases (watch -> custom -> releases)
- Follow us on Twitter or LinkedIn
- Join our Discord
- Improve translations on Crowdin
- Contributions are, of course, most welcome!