[PE-298] Fix: Copy markdown to clipboard

[im-vipin]

Markdown

https://github.com/user-attachments/assets/d4c42cb8-b9c8-4f66-8e5b-b53029f65f13

Triple click

https://github.com/user-attachments/assets/f5a942bb-dc06-4af5-9b8e-908bc0843b09

Summary by CodeRabbit

• New Features
  • Introduced enhanced clipboard operations that automatically convert copied and pasted content into Markdown format, offering flexible text handling based on user preferences.
  • Improved table interactions by adding triple-click functionality, allowing users to quickly select an entire line within table cells for efficient editing.
  • Added a new MarkdownClipboard extension to manage clipboard operations within the Tiptap editor framework.
  • Updated the Markdown extension to change how copied text is handled, providing more control over clipboard interactions.
  • Enhanced mention handling by integrating user details retrieval, allowing for display names to be shown when mentions are rendered.

[coderabbitai[bot]]

Walkthrough

This pull request introduces a new clipboard extension for the Tiptap editor called MarkdownClipboard. It manages clipboard operations by serializing pasted or copied content into Markdown when appropriate. The extension is integrated into the core editor extensions. Additionally, a new method named handleTripleClickOn has been added to table controls to facilitate triple-click selection on table cells by computing and dispatching the appropriate selection transaction.

Changes

Files	Change Summary
packages/editor/src/core/extensions/clipboard.ts packages/editor/src/core/extensions/extensions.tsx	Added a new MarkdownClipboard extension with options and serialization logic for clipboard operations, and integrated it into the core editor extensions.
packages/editor/src/core/extensions/table/.../table-controls.ts	Introduced the handleTripleClickOn method to manage triple-click events on table cells, enabling selection of an entire line of a cell by calculating the necessary boundaries and dispatching a selection transaction.
packages/editor/src/core/extensions/index.ts	Added an export statement for the clipboard module to make its functionalities accessible.
packages/editor/src/core/extensions/read-only-extensions.tsx	Integrated MarkdownClipboard into read-only extensions and updated the transformCopiedText configuration in the Markdown extension.
packages/editor/src/core/extensions/mentions/...	Enhanced mention handling by adding getMentionedEntityDetails methods across various components to retrieve user display names based on IDs, utilizing the new useMember hook.
space/core/components/editor/...	Updated mentionHandler in LiteTextEditor, RichTextEditor, LiteTextReadOnlyEditor, and their respective read-only counterparts to include the new getMentionedEntityDetails method for improved mention functionality.
web/core/components/...	Introduced useMember hook in editor-body, PagesVersionEditor, and other components to enhance mention handling by fetching user display names dynamically.

Suggested labels

🐛bug, 🌐frontend, ✨feature, 🛠️refactor

Suggested reviewers

• Palanikannan1437
• SatishGandham

Poem

I'm a bouncy rabbit, fresh on the scene,
Hopping through code with a whiskered gleam.
Markdown magic turns text to art,
And triple-clicks select every part.
With carrots and code, our journey's bright,
CodeRabbit Inc. makes our changes take flight!
🥕🐇

[!TIP]

⚡🧪 Multi-step agentic review comment chat (experimental)

• We're introducing multi-step agentic chat in review comments. This experimental feature enhances review discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments. - To enable this feature, set early_access to true under in the settings.

---

📜 Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 366ed387a3d8c23c106c5254e08389f08e3cb9bf and 17b910aebd2a6247ab7b68dd2ad3475293b08c56.

📒 Files selected for processing (14)

• packages/editor/src/core/extensions/extensions.tsx (2 hunks)
• packages/editor/src/core/extensions/mentions/extension-config.ts (2 hunks)
• packages/editor/src/core/extensions/mentions/extension.tsx (1 hunks)
• packages/editor/src/core/extensions/read-only-extensions.tsx (2 hunks)
• packages/editor/src/core/types/mention.ts (2 hunks)
• space/core/components/editor/lite-text-read-only-editor.tsx (2 hunks)
• space/core/components/editor/rich-text-editor.tsx (2 hunks)
• space/core/components/editor/rich-text-read-only-editor.tsx (2 hunks)
• web/core/components/editor/lite-text-editor/lite-text-editor.tsx (3 hunks)
• web/core/components/editor/lite-text-editor/lite-text-read-only-editor.tsx (3 hunks)
• web/core/components/editor/rich-text-editor/rich-text-editor.tsx (3 hunks)
• web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx (3 hunks)
• web/core/components/pages/editor/editor-body.tsx (3 hunks)
• web/core/components/pages/version/editor.tsx (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/editor/src/core/extensions/extensions.tsx

🧰 Additional context used

🧬 Code Definitions (5)

packages/editor/src/core/extensions/read-only-extensions.tsx (1)

packages/editor/src/core/extensions/clipboard.ts (1) (1)

• MarkdownClipboard (5-89)

packages/editor/src/core/extensions/mentions/extension.tsx (1)

packages/editor/src/core/extensions/mentions/extension-config.ts (1) (1)

• CustomMentionExtensionConfig (15-61)

space/core/components/editor/rich-text-read-only-editor.tsx (2)

space/helpers/editor.helper.ts (1) (1)

• getReadOnlyEditorFileHandlers (28-48)

space/core/components/editor/embeds/mentions/root.tsx (1) (1)

• EditorMentionsRoot (8-17)

space/core/components/editor/lite-text-read-only-editor.tsx (2)

space/helpers/editor.helper.ts (1) (1)

• getReadOnlyEditorFileHandlers (28-48)

space/core/components/editor/embeds/mentions/root.tsx (1) (1)

• EditorMentionsRoot (8-17)

packages/editor/src/core/extensions/mentions/extension-config.ts (2)

packages/editor/src/core/types/mention.ts (1) (1)

• TMentionHandler (26-28)

packages/editor/src/core/extensions/mentions/types.ts (1) (1)

• TMentionComponentAttributes (10-14)

⏰ Context from checks skipped due to timeout of 90000ms (2)

• GitHub Check: Analyze (javascript)
• GitHub Check: Analyze (python)

🔇 Additional comments (27)

packages/editor/src/core/extensions/read-only-extensions.tsx (2)

27-27: Great addition of the MarkdownClipboard extension.

The integration of the MarkdownClipboard extension enhances clipboard functionality by properly serializing content to Markdown during copy operations. Based on the implementation in clipboard.ts, this extension handles complex cases like tables, lists, and nested structures more effectively.

Also applies to: 120-120

---

118-118: Proper configuration adjustment for clipboard handling.

Setting transformCopiedText: false in the Markdown extension is the correct approach as it prevents conflicts with the newly added MarkdownClipboard extension. This change allows the custom clipboard handler to take full control of text serialization during copy operations.

packages/editor/src/core/types/mention.ts (1)

2-2: Augmented support for entity details in mentions

The addition of IUserLite import and the new optional getMentionedEntityDetails method in the TReadOnlyMentionHandler type enhances the mention system by allowing retrieval of display names for mentioned entities. This is a good improvement that will help with mention rendering consistency.

Also applies to: 23-23

packages/editor/src/core/extensions/mentions/extension.tsx (1)

12-12: Successfully propagated entity details functionality

The changes correctly integrate the new getMentionedEntityDetails method from the component props into the extension options, enabling the feature to be used within the extension.

Also applies to: 18-18

space/core/components/editor/rich-text-editor.tsx (1)

9-10:

✅ Verification successful

Property name mismatch could cause display issues

The implementation uses member__display_name while other implementations use display_name. This inconsistency might be intentional but could lead to unexpected behavior if the property names should be consistent across the codebase.

Also applies to: 21-21, 26-28

---

🏁 Script executed:

#!/bin/bash
# Check for the different property names used in member objects

echo "Checking for member__display_name usage:"
rg -A 1 -B 1 "member__display_name" --type ts --type tsx

echo -e "\nChecking for display_name usage in similar context:"
rg -A 1 -B 1 "getUserDetails\(.+\)\.display_name" --type ts --type tsx
rg -A 1 -B 1 "getMemberById\(.+\)\.display_name" --type ts --type tsx

Length of output: 495

---

Please re-run the above script to verify the usage of the member__display_name and display_name properties across the codebase.

The original review comment raised a concern that the use of member__display_name (as seen in space/core/components/editor/rich-text-editor.tsx at lines 9–10, and similarly at lines 21 and 26–28) might be inconsistent with the more commonly used display_name (as seen in contexts like getUserDetails(...) and getMemberById(...).display_name). Because the initial verification attempt failed due to the improper file type handling, the updated script above bypasses that issue by explicitly searching in files with .ts and .tsx extensions.

Once you confirm whether the property naming is indeed inconsistent or if the divergence is intentional, please adjust the naming for consistency if needed.

---

🏁 Script executed:

#!/bin/bash
# Re-run search for member property names without relying on the built-in tsx file type.
echo "Searching for member__display_name in .ts and .tsx files:"
rg -g "*.tsx" -g "*.ts" -A 2 -B 2 "member__display_name"

echo -e "\nSearching for getUserDetails(...).display_name in .ts and .tsx files:"
rg -g "*.tsx" -g "*.ts" -A 2 -B 2 "getUserDetails\(.+\)\.display_name"

echo -e "\nSearching for getMemberById(...).display_name in .ts and .tsx files:"
rg -g "*.tsx" -g "*.ts" -A 2 -B 2 "getMemberById\(.+\)\.display_name"

Length of output: 7362

---

Consistency Verified: No Action Required

After verifying the codebase, it appears that the usage of member__display_name is consistent across all modules. In cases like the rich-text-editor component, the member’s property (member__display_name) is correctly mapped to the display_name field (e.g., via display_name: getMemberById(id)?.member__display_name ?? ""). This mapping is intentional, and similar patterns are observed in several other files. There is no inconsistency that would lead to display issues.

web/core/components/editor/lite-text-editor/lite-text-editor.tsx (1)

16-17:

❓ Verification inconclusive

Consistent implementation of entity details retrieval

The addition of the getMentionedEntityDetails method here follows the pattern established in other components but uses display_name directly. Make sure this is consistent with the expected data structure.

Also applies to: 62-64, 104-104

---

🏁 Script executed:

#!/bin/bash
# Check the implementation of getUserDetails to understand its return structure

echo "Checking implementation of getUserDetails:"
rg -A 10 -B 10 "export const useMember" --type ts

echo -e "\nChecking returned properties from getUserDetails:"
rg -A 3 "getUserDetails\(.*\)\?" --type ts --type tsx

Length of output: 3681

---

Consistent Entity Details Retrieval: Please Verify Data Structure Alignment

The new getMentionedEntityDetails method in web/core/components/editor/lite-text-editor/lite-text-editor.tsx (lines 16–17, as well as lines 62–64 and 104–104) follows a similar pattern as in other components—but it uses display_name directly. The automated check for the getUserDetails return structure (invoked via the useMember hook) yielded output from the TS files, yet the search for TSX files resulted in a file type error. This makes it difficult to conclusively confirm that the properties (including display_name) from getUserDetails match the usage in getMentionedEntityDetails.

Action items:

• Manually verify that the data structure returned by getUserDetails (via useMember) includes the expected display_name property.
• Confirm that the use of display_name in the getMentionedEntityDetails method is consistent with how other components process entity details.
• Double-check consistency across all relevant sections (lines 16–17, 62–64, and 104–104).

Once you’ve confirmed that these usages align with the expected data structure, we can confidently approve the changes.

web/core/components/pages/editor/editor-body.tsx (1)

25-25: Consistent implementation of mention handling across editor components.

The addition of the useMember hook and implementation of getMentionedEntityDetails method provides proper user details retrieval for mentions in the collaborative document editor. This ensures that when content is copied with mentions, the display names are correctly retrieved.

Also applies to: 71-72, 197-197

web/core/components/editor/rich-text-editor/rich-text-editor.tsx (1)

11-12: Implementation enhances mention handling in rich text editor.

The integration of the useMember hook and getMentionedEntityDetails method maintains consistency with the implementation in other editor components, ensuring proper display of user mentions when content is copied.

Also applies to: 36-37, 64-64

web/core/components/pages/version/editor.tsx (1)

15-16: Consistent mention handling in version editor.

The addition of the useMember hook and implementation of getMentionedEntityDetails aligns with the pattern established in other editor components, ensuring proper display of user mentions when copying content.

Also applies to: 30-31, 115-115

space/core/components/editor/lite-text-read-only-editor.tsx (3)

10-11: Import added for user mentions support.

Good addition of the useMember hook, which is necessary for retrieving member information when rendering mentions.

---

22-24: Component structure improved to support user mention details.

Extracting getMemberById from the useMember hook is properly implemented to provide member information to the editor.

---

33-38: Member details now provided to mention handler.

Great implementation of the getMentionedEntityDetails method which retrieves the member's display name. The fallback to an empty string is a good defensive practice when a member isn't found.

web/core/components/editor/lite-text-editor/lite-text-read-only-editor.tsx (3)

11-12: Import added for user mentions support.

Good addition of the useMember hook, which is necessary for retrieving user information when rendering mentions.

---

27-28: User details hook properly implemented.

Extracting getUserDetails from the useMember hook is correctly implemented to provide user information to the editor.

---

46-46: User details now provided to mention handler.

The implementation of getMentionedEntityDetails looks good, consistently using the same pattern as the other editor components. The fallback to an empty string when a user isn't found is a good defensive practice.

space/core/components/editor/rich-text-read-only-editor.tsx (3)

10-11: Import added for user mentions support.

Good addition of the useMember hook, which is necessary for retrieving member information when rendering mentions.

---

22-24: Component structure improved to support user mention details.

Extracting getMemberById from the useMember hook is properly implemented to provide member information to the editor.

---

33-38: Member details now provided to mention handler.

Great implementation of the getMentionedEntityDetails method which retrieves the member's display name. The fallback to an empty string is a good defensive practice when a member isn't found.

packages/editor/src/core/extensions/mentions/extension-config.ts (6)

3-4: Added imports for markdown serialization.

Good addition of the necessary imports for markdown serialization, which is essential for implementing the copy-to-clipboard functionality.

---

8-8: Import updated to include necessary types.

The import for mention component types has been correctly updated to include TMentionComponentAttributes, which is needed for the new functionality.

---

12-12: Extended options type to support mention entity details.

Good addition of the getMentionedEntityDetails property to the options type, which allows the extension to retrieve and use mention entity details.

---

46-48: Added text rendering for mentions.

The renderText method is a crucial addition that ensures mentions are properly rendered as text when copied or exported.

---

50-59: Added markdown serialization for mentions.

Excellent implementation of markdown serialization in the storage. This is a key part of the fix for copying markdown to clipboard, ensuring that mentions are properly converted to text in the markdown format.

---

63-68: Well-implemented helper function for mention display text.

The getMentionDisplayText function is well-implemented with proper fallbacks:

1. First tries to get the display name from entity details
2. Falls back to the ID if display name isn't available
3. Finally falls back to the entity identifier

This ensures robustness when rendering mentions in different contexts.

web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx (3)

11-12: Well-structured import organization.

Adding a dedicated comment section for store hooks improves the code organization and makes it easier to understand the different types of imports being used.

---

27-29: Clean implementation of useMember hook.

The code follows the established patterns in the codebase with clear section comments and proper spacing.

---

46-46: Good implementation of getMentionedEntityDetails with robust fallback.

The implementation correctly retrieves user display names for mentions and includes a fallback to an empty string when no display name is found, preventing "undefined" from appearing in the UI.

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[im-vipin]

Hey @Palanikannan1437 Can you review this PR?

[makeplane[bot]]

Pull Request Linked with Plane Work Items

• [PE-298] Copy markdown to clipboard

Comment Automatically Generated by Plane

[hpflatorre]

Is there any revision release planned for the next days including this fix?