✨ feat: Add Rich Text Editor

📝 Description

This PR introduces a fully themeable, composable, Chakra-native Rich Text Editor, built on top of Tiptap and designed to feel seamless within the Chakra UI ecosystem.

It provides a complete set of primitives—Root, Toolbar, ControlsGroup, Control, and Content—that allow developers to compose their own editor experiences with minimal effort while ensuring consistent Chakra styling.

⛳️ Current Behavior

Chakra UI does not provide an official rich text editor.
Developers typically implement Tiptap manually, leading to:

• inconsistent UI styles
• duplicated toolbar logic
• lack of Chakra-aware components
• inaccessible or non-theme-compliant controls

🚀 New Behavior

This PR adds a Chakra-first Rich Text Editor with:

🎨 Composable Chakra Components

• RichTextEditor.Root
• Toolbar
• ControlsGroup
• Control
• Content

✍️ Built-in Editor Controls

• Text formatting: Bold, Italic, Underline, Strikethrough, Code
• Headings: H1–H4
• Lists: Bullet, Ordered
• Blocks: Blockquote, Horizontal Rule
• Script: Subscript, Superscript
• Alignment: Left, Center, Right, Justify
• History: Undo, Redo

🔗 Link Management

• Add link
• Remove link

🎛 Additional Features

• Theme-aware styles using Chakra tokens
• Accessible tooltips
• Minimal base styling for consistent typography
• Fully extensible: developers can register new controls or Tiptap extensions

🧩 Example Usage

import { RichTextEditor, useEditor } from "@chakra-ui/tiptap-editor"

export function BasicEditor() {
  const editor = useEditor({
    content: "<p>Start typing to see the editor in action...</p>",
  })

  return (
    <RichTextEditor.Root editor={editor}>
      <RichTextEditor.Toolbar>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
          <RichTextEditor.Strike />
          <RichTextEditor.Code />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.H1 />
          <RichTextEditor.H2 />
          <RichTextEditor.H3 />
          <RichTextEditor.H4 />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Hr />
          <RichTextEditor.BulletList />
          <RichTextEditor.OrderedList />
          <RichTextEditor.Subscript />
          <RichTextEditor.Superscript />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Unlink />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.AlignLeft />
          <RichTextEditor.AlignCenter />
          <RichTextEditor.AlignJustify />
          <RichTextEditor.AlignRight />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Undo />
          <RichTextEditor.Redo />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor.Root>
  )
}

💣 Breaking Changes?

No.
This is a new, opt-in package and does not affect existing Chakra UI components or APIs.

📝 Additional Information

• Fully Chakra-styled and theme-aware.
• All controls and UI follow Chakra design principles.
• Designed to be accessible and screen-reader friendly.
• Easy to extend: developers can create new custom controls or wrap additional Tiptap extensions.
• Significantly reduces the setup required to use Tiptap inside Chakra-based apps.

📚 Examples for View

A comprehensive set of Storybook examples demonstrates what you can build with the Chakra Rich Text Editor using Tiptap.
These examples showcase:

• Basic editor setup
• Controlled editor usage
• Placeholder support
• Bubble menus
• Floating menus
• Task lists
• Color controls
• Custom icons
• Custom control creation
• Image support