Description

When highlighting text in the Tiptap editor, a bubble menu should pop up with the following menu options, as displayed in the provided screenshot. These menu options should be placeholders without any functionality. The goal is to ensure that the bubble menu works correctly and appears when text is highlighted.

Menu Options

• Paragraph style (drop down)
  • Hierarchy - Add Functionality to Change Paragraph Style for Highlighted Text #375
    • Paragraph
    • Heading 1
    • Heading 2
    • Heading 3
  • Lists - Add Bullet Point and Numbered List Formatting to Tiptap Editor #379
    • Bullet list
    • Numbered list
• Bold - Add Functionality to Change Style for Highlighted Text  #376
• Italic - Add Functionality to Change Style for Highlighted Text  #376
• Underline - Add Functionality to Change Style for Highlighted Text  #376
• Strikethrough - Add Functionality to Change Style for Highlighted Text  #376
• Code - Add Functionality to Change Style for Highlighted Text  #376
• Code Block - Add Code Block Formatting with Syntax Highlighting to Tiptap Editor #377
• Link - Add Link Formatting to Tiptap Editor #378

Requirements

1. Bubble Menu Appearance:

   • The bubble menu should appear when text is highlighted in the Tiptap editor.
   • The menu should include all the listed menu options as placeholders.

2. Placeholder Menu Options:

   • Each menu option should be a placeholder with no functionality. The purpose is only to display the menu.

3. Styling:

   • The bubble menu should be styled to match the appearance in the provided screenshot.
   • Use the same icons as the rest of the web application to make it consistent with menus and buttons in other parts of the application UI

Steps to Accomplish

1. Install Tiptap Extensions:

   • Ensure all necessary Tiptap extensions for the bubble menu are installed.

2. Create Bubble Menu Component:

   • Create a bubble menu component that includes the listed menu options.

3. Integrate Bubble Menu:

   • Integrate the bubble menu with the Tiptap editor to display it when text is highlighted.

4. Style the Bubble Menu:

   • Apply appropriate CSS to style the bubble menu as shown in the screenshot.

Acceptance Criteria

• The bubble menu appears when text is highlighted in the Tiptap editor.
• The menu includes all the listed options as placeholders.
• The menu options have no functionality.
• The styling matches the provided screenshot.

Screenshot

Bubble menu

Paragraph style dropdown

References

• Tiptap Documentation
• Live Demo of Tiptap Editor