Slash Command Implementation in Advanced Text Editor

[RounakJoshi09]

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

---

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.

^{Written by Cursor Bugbot for commit b3d7407. This will update automatically on new commits. Configure here.}

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds slash command functionality to the advanced text editor, allowing users to type / to access formatting commands.

Key Changes

• New Extension: Implements SlashCommand TipTap extension using @tiptap/suggestion library for command palette functionality
• Command Menu: Creates floating dropdown menu with keyboard navigation (Arrow keys, Enter, Escape) and click-to-select
• State Management: Custom SlashCommandState class manages menu lifecycle, positioning, and user interactions
• Opt-in by Default: Slash commands enabled by default in non-readonly editors, with enableSlashCommand prop to disable
• Commands Available: Text formatting (bold, italic, underline, strikethrough) and heading levels (H1, H2, H3)
• Default Placeholder: Updates placeholder text to inform users about slash command availability

Issues Found

• Memory Leak: Container div created for React portal is never removed from DOM when menu closes (see comment on SlashCommandState.ts:69)

Confidence Score: 3/5

• Safe to merge with one memory leak that should be fixed soon to prevent DOM pollution
• The implementation is well-structured with proper event cleanup and keyboard handling. However, there's a critical memory leak where container DOM elements are not removed during cleanup, which will accumulate over time as users open/close the slash command menu repeatedly. This won't cause immediate issues but should be addressed before production use.
• Pay close attention to SlashCommandState.ts - fix the memory leak before merging or schedule it as immediate follow-up work

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/advanced-text-editor/extensions/slash-command/SlashCommandState.ts	2/5	Implements state management for slash command UI with memory leak - container div not removed on cleanup
packages/twenty-front/src/modules/advanced-text-editor/extensions/slash-command/SlashCommand.ts	4/5	Implements TipTap extension for slash commands with proper filtering and command configuration
packages/twenty-front/src/modules/advanced-text-editor/extensions/slash-command/SlashCommandMenu.tsx	5/5	React component for rendering slash command dropdown menu with proper floating-ui positioning

Sequence Diagram

sequenceDiagram
    participant User
    participant Editor as TipTap Editor
    participant SlashExt as SlashCommand Extension
    participant Suggestion as @tiptap/suggestion
    participant State as SlashCommandState
    participant Menu as SlashCommandMenu

    User->>Editor: Types '/' character
    Editor->>SlashExt: Trigger suggestion plugin
    SlashExt->>Suggestion: Match '/' char with config
    Suggestion->>SlashExt: Call render.onStart()
    SlashExt->>State: Initialize state with items
    State->>State: Create scroll & click listeners
    State->>State: Attach event listeners
    SlashExt->>State: renderComponent()
    State->>Menu: Render via createRoot()
    Menu-->>User: Display dropdown menu
    
    User->>Editor: Types query text
    Editor->>Suggestion: Update with query
    Suggestion->>SlashExt: items({ query })
    SlashExt->>SlashExt: buildItems(editor, query)
    SlashExt->>Suggestion: Return filtered items
    Suggestion->>SlashExt: Call render.onUpdate()
    SlashExt->>State: Update items & rect
    State->>Menu: Re-render with new items
    
    User->>User: Presses ArrowDown/ArrowUp
    Editor->>SlashExt: render.onKeyDown()
    SlashExt->>State: handleKeyDown()
    State->>State: Update selectedIndex
    State->>Menu: Re-render with new selection
    
    User->>Menu: Clicks item or presses Enter
    Menu->>State: onSelect(item)
    State->>Suggestion: currentCommand(item)
    Suggestion->>Editor: Execute command
    Editor->>Editor: Apply formatting
    State->>State: cleanup()
    State->>State: Unmount component & remove listeners
    Menu-->>User: Dropdown closes

Loading

_{8 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[FelixMalfait]

Great work! Some quick initial comments (haven't tested yet)

[charlesBochet]

@RounakJoshi09 thanks for opening a PR, this looks promising, would you have some bandwidth to work on it?

[RounakJoshi09]

Hi @charlesBochet , For sure ,I am actually working on the suggested changes, Will most probably push the fixes by friday.

[RounakJoshi09]

Hi @FelixMalfait , I have made the suggested changes. Please take a look and share your feedback.

Thanks

[cursor]

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on December 15

Details

You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[cursor]

Bug: Localization bug: Editor text not translated. (Bugbot Rules)

The translation string with ID yZMXC2 ("Enter text or Type '/' for commands") is not translated to Dutch and remains in English. According to the PR discussion, text strings should be wrapped in `t``` to be translated with Lingui. This placeholder text for the advanced text editor slash command feature needs a proper Dutch translation.

 

[FelixMalfait]

Let's use lingui for all translatable strings

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:49237

This environment will automatically shut down when the PR is closed or after 5 hours.