From 70c790c93d18a077d167fb4f154de88435789f51 Mon Sep 17 00:00:00 2001
From: tsuki <tsuki@keitsuki.top>
Date: Tue, 12 Aug 2025 21:25:52 +0800
Subject: [PATCH] add blog system

---
 app/admin/[slug]/pa.tsx                       |  192 ++
 app/admin/common/control.tsx                  |  598 ++++
 app/admin/common/page.tsx                     |   18 +
 app/admin/dashboard/page.tsx                  |   20 +-
 app/admin/editor/editor-component.tsx         |   10 +
 app/admin/editor/page.tsx                     |   13 +
 app/admin/layout.tsx                          |    4 +-
 app/admin/nav-documents.tsx                   |    2 +-
 app/admin/sidebar.tsx                         |    5 +
 app/admin/site-header.tsx                     |   49 +-
 app/admin/users/page.tsx                      |   17 +-
 app/api/session/sync/route.ts                 |    5 +-
 app/app-sidebar.tsx                           |  314 ++-
 app/blog/[slug]/page.tsx                      |   60 +
 app/blog/layout.tsx                           |   13 +
 app/blog/page.tsx                             |   50 +
 app/globals.css                               |    2 +
 app/layout.tsx                                |    2 +-
 app/nav.tsx                                   |  212 ++
 app/page.tsx                                  |   28 +-
 app/simple/page.tsx                           |    5 +
 components/blog-viewer.tsx                    |  100 +
 components/map-component.tsx                  |    3 +-
 components/table-of-contents.tsx              |  165 ++
 components/tiptap-icons/align-center-icon.tsx |   38 +
 .../tiptap-icons/align-justify-icon.tsx       |   38 +
 components/tiptap-icons/align-left-icon.tsx   |   38 +
 components/tiptap-icons/align-right-icon.tsx  |   38 +
 components/tiptap-icons/arrow-left-icon.tsx   |   24 +
 components/tiptap-icons/ban-icon.tsx          |   26 +
 components/tiptap-icons/blockquote-icon.tsx   |   44 +
 components/tiptap-icons/bold-icon.tsx         |   26 +
 components/tiptap-icons/chevron-down-icon.tsx |   26 +
 components/tiptap-icons/close-icon.tsx        |   24 +
 components/tiptap-icons/code-block-icon.tsx   |   38 +
 components/tiptap-icons/code2-icon.tsx        |   32 +
 .../tiptap-icons/corner-down-left-icon.tsx    |   26 +
 .../tiptap-icons/external-link-icon.tsx       |   28 +
 components/tiptap-icons/heading-five-icon.tsx |   28 +
 components/tiptap-icons/heading-four-icon.tsx |   28 +
 components/tiptap-icons/heading-icon.tsx      |   24 +
 components/tiptap-icons/heading-one-icon.tsx  |   28 +
 components/tiptap-icons/heading-six-icon.tsx  |   30 +
 .../tiptap-icons/heading-three-icon.tsx       |   36 +
 components/tiptap-icons/heading-two-icon.tsx  |   28 +
 components/tiptap-icons/highlighter-icon.tsx  |   26 +
 components/tiptap-icons/image-plus-icon.tsx   |   26 +
 components/tiptap-icons/italic-icon.tsx       |   24 +
 components/tiptap-icons/link-icon.tsx         |   28 +
 components/tiptap-icons/list-icon.tsx         |   56 +
 components/tiptap-icons/list-ordered-icon.tsx |   56 +
 components/tiptap-icons/list-todo-icon.tsx    |   50 +
 components/tiptap-icons/moon-star-icon.tsx    |   30 +
 components/tiptap-icons/redo2-icon.tsx        |   26 +
 components/tiptap-icons/strike-icon.tsx       |   28 +
 components/tiptap-icons/subscript-icon.tsx    |   38 +
 components/tiptap-icons/sun-icon.tsx          |   58 +
 components/tiptap-icons/superscript-icon.tsx  |   38 +
 components/tiptap-icons/trash-icon.tsx        |   26 +
 components/tiptap-icons/underline-icon.tsx    |   26 +
 components/tiptap-icons/undo2-icon.tsx        |   26 +
 .../blockquote-node/blockquote-node.scss      |   37 +
 .../code-block-node/code-block-node.scss      |   54 +
 .../heading-node/heading-node.scss            |   38 +
 .../horizontal-rule-node-extension.ts         |   14 +
 .../horizontal-rule-node.scss                 |   25 +
 .../tiptap-node/image-node/image-node.scss    |   31 +
 .../image-upload-node-extension.ts            |  145 +
 .../image-upload-node/image-upload-node.scss  |  249 ++
 .../image-upload-node/image-upload-node.tsx   |  547 ++++
 .../tiptap-node/image-upload-node/index.tsx   |    1 +
 .../tiptap-node/list-node/list-node.scss      |  160 ++
 .../paragraph-node/paragraph-node.scss        |  272 ++
 .../tiptap-templates/simple/data/content.json |  477 ++++
 .../simple/simple-editor.scss                 |   82 +
 .../tiptap-templates/simple/simple-editor.tsx |  281 ++
 .../tiptap-templates/simple/theme-toggle.tsx  |   48 +
 .../badge/badge-colors.scss                   |  395 +++
 .../badge/badge-group.scss                    |   16 +
 .../tiptap-ui-primitive/badge/badge.scss      |   99 +
 .../tiptap-ui-primitive/badge/badge.tsx       |   46 +
 .../tiptap-ui-primitive/badge/index.tsx       |    1 +
 .../button/button-colors.scss                 |  429 +++
 .../button/button-group.scss                  |   22 +
 .../tiptap-ui-primitive/button/button.scss    |  314 +++
 .../tiptap-ui-primitive/button/button.tsx     |  116 +
 .../tiptap-ui-primitive/button/index.tsx      |    1 +
 components/tiptap-ui-primitive/card/card.scss |   77 +
 components/tiptap-ui-primitive/card/card.tsx  |   74 +
 components/tiptap-ui-primitive/card/index.tsx |    1 +
 .../dropdown-menu/dropdown-menu.scss          |   63 +
 .../dropdown-menu/dropdown-menu.tsx           |   98 +
 .../dropdown-menu/index.tsx                   |    1 +
 .../tiptap-ui-primitive/input/index.tsx       |    1 +
 .../tiptap-ui-primitive/input/input.scss      |   45 +
 .../tiptap-ui-primitive/input/input.tsx       |   25 +
 .../tiptap-ui-primitive/popover/index.tsx     |    1 +
 .../tiptap-ui-primitive/popover/popover.scss  |   63 +
 .../tiptap-ui-primitive/popover/popover.tsx   |   38 +
 .../tiptap-ui-primitive/separator/index.tsx   |    1 +
 .../separator/separator.scss                  |   23 +
 .../separator/separator.tsx                   |   33 +
 .../tiptap-ui-primitive/spacer/index.tsx      |    1 +
 .../tiptap-ui-primitive/spacer/spacer.tsx     |   28 +
 .../tiptap-ui-primitive/toolbar/index.tsx     |    1 +
 .../tiptap-ui-primitive/toolbar/toolbar.scss  |   98 +
 .../tiptap-ui-primitive/toolbar/toolbar.tsx   |  123 +
 .../tiptap-ui-primitive/tooltip/index.tsx     |    1 +
 .../tiptap-ui-primitive/tooltip/tooltip.scss  |   43 +
 .../tiptap-ui-primitive/tooltip/tooltip.tsx   |  231 ++
 .../blockquote-button/blockquote-button.tsx   |  125 +
 .../tiptap-ui/blockquote-button/index.tsx     |    2 +
 .../blockquote-button/use-blockquote.ts       |  256 ++
 .../code-block-button/code-block-button.tsx   |  125 +
 .../tiptap-ui/code-block-button/index.tsx     |    2 +
 .../code-block-button/use-code-block.ts       |  263 ++
 .../color-highlight-button.scss               |   49 +
 .../color-highlight-button.tsx                |  146 +
 .../color-highlight-button/index.tsx          |    2 +
 .../use-color-highlight.ts                    |  240 ++
 .../color-highlight-popover.tsx               |  210 ++
 .../color-highlight-popover/index.tsx         |    1 +
 .../heading-button/heading-button.tsx         |  130 +
 components/tiptap-ui/heading-button/index.tsx |    2 +
 .../tiptap-ui/heading-button/use-heading.ts   |  329 +++
 .../heading-dropdown-menu.tsx                 |  129 +
 .../tiptap-ui/heading-dropdown-menu/index.tsx |    2 +
 .../use-heading-dropdown-menu.ts              |  132 +
 .../image-upload-button.tsx                   |  123 +
 .../tiptap-ui/image-upload-button/index.tsx   |    2 +
 .../image-upload-button/use-image-upload.ts   |  199 ++
 components/tiptap-ui/link-popover/index.tsx   |    2 +
 .../tiptap-ui/link-popover/link-popover.tsx   |  310 +++
 .../link-popover/use-link-popover.ts          |  278 ++
 components/tiptap-ui/list-button/index.tsx    |    2 +
 .../tiptap-ui/list-button/list-button.tsx     |  123 +
 components/tiptap-ui/list-button/use-list.ts  |  324 +++
 .../tiptap-ui/list-dropdown-menu/index.tsx    |    1 +
 .../list-dropdown-menu/list-dropdown-menu.tsx |  125 +
 .../use-list-dropdown-menu.ts                 |  219 ++
 components/tiptap-ui/mark-button/index.tsx    |    2 +
 .../tiptap-ui/mark-button/mark-button.tsx     |  123 +
 components/tiptap-ui/mark-button/use-mark.ts  |  230 ++
 .../tiptap-ui/text-align-button/index.tsx     |    2 +
 .../text-align-button/text-align-button.tsx   |  135 +
 .../text-align-button/use-text-align.ts       |  240 ++
 .../tiptap-ui/undo-redo-button/index.tsx      |    2 +
 .../undo-redo-button/undo-redo-button.tsx     |  126 +
 .../undo-redo-button/use-undo-redo.ts         |  200 ++
 components/toc-toggle.tsx                     |   66 +
 components/ui/radio-group.tsx                 |   45 +
 components/ui/scroll-area.tsx                 |   58 +
 hooks/use-composed-ref.ts                     |   47 +
 hooks/use-cursor-visibility.ts                |   71 +
 hooks/use-element-rect.ts                     |  166 ++
 hooks/use-menu-navigation.ts                  |  196 ++
 hooks/use-mobile.ts                           |   14 +-
 hooks/use-scrolling.ts                        |   75 +
 hooks/use-throttled-callback.ts               |   47 +
 hooks/use-tiptap-editor.ts                    |   49 +
 hooks/use-unmount.ts                          |   21 +
 hooks/use-window-size.ts                      |   93 +
 lib/tiptap-utils.ts                           |  356 +++
 package-lock.json                             | 2397 ++++++++++++++++-
 package.json                                  |   19 +
 styles/_keyframe-animations.scss              |   91 +
 styles/_variables.scss                        |  296 ++
 types/config.ts                               |   85 +
 168 files changed, 17012 insertions(+), 160 deletions(-)
 create mode 100644 app/admin/[slug]/pa.tsx
 create mode 100644 app/admin/common/control.tsx
 create mode 100644 app/admin/common/page.tsx
 create mode 100644 app/admin/editor/editor-component.tsx
 create mode 100644 app/admin/editor/page.tsx
 create mode 100644 app/blog/[slug]/page.tsx
 create mode 100644 app/blog/layout.tsx
 create mode 100644 app/blog/page.tsx
 create mode 100644 app/nav.tsx
 create mode 100644 app/simple/page.tsx
 create mode 100644 components/blog-viewer.tsx
 create mode 100644 components/table-of-contents.tsx
 create mode 100644 components/tiptap-icons/align-center-icon.tsx
 create mode 100644 components/tiptap-icons/align-justify-icon.tsx
 create mode 100644 components/tiptap-icons/align-left-icon.tsx
 create mode 100644 components/tiptap-icons/align-right-icon.tsx
 create mode 100644 components/tiptap-icons/arrow-left-icon.tsx
 create mode 100644 components/tiptap-icons/ban-icon.tsx
 create mode 100644 components/tiptap-icons/blockquote-icon.tsx
 create mode 100644 components/tiptap-icons/bold-icon.tsx
 create mode 100644 components/tiptap-icons/chevron-down-icon.tsx
 create mode 100644 components/tiptap-icons/close-icon.tsx
 create mode 100644 components/tiptap-icons/code-block-icon.tsx
 create mode 100644 components/tiptap-icons/code2-icon.tsx
 create mode 100644 components/tiptap-icons/corner-down-left-icon.tsx
 create mode 100644 components/tiptap-icons/external-link-icon.tsx
 create mode 100644 components/tiptap-icons/heading-five-icon.tsx
 create mode 100644 components/tiptap-icons/heading-four-icon.tsx
 create mode 100644 components/tiptap-icons/heading-icon.tsx
 create mode 100644 components/tiptap-icons/heading-one-icon.tsx
 create mode 100644 components/tiptap-icons/heading-six-icon.tsx
 create mode 100644 components/tiptap-icons/heading-three-icon.tsx
 create mode 100644 components/tiptap-icons/heading-two-icon.tsx
 create mode 100644 components/tiptap-icons/highlighter-icon.tsx
 create mode 100644 components/tiptap-icons/image-plus-icon.tsx
 create mode 100644 components/tiptap-icons/italic-icon.tsx
 create mode 100644 components/tiptap-icons/link-icon.tsx
 create mode 100644 components/tiptap-icons/list-icon.tsx
 create mode 100644 components/tiptap-icons/list-ordered-icon.tsx
 create mode 100644 components/tiptap-icons/list-todo-icon.tsx
 create mode 100644 components/tiptap-icons/moon-star-icon.tsx
 create mode 100644 components/tiptap-icons/redo2-icon.tsx
 create mode 100644 components/tiptap-icons/strike-icon.tsx
 create mode 100644 components/tiptap-icons/subscript-icon.tsx
 create mode 100644 components/tiptap-icons/sun-icon.tsx
 create mode 100644 components/tiptap-icons/superscript-icon.tsx
 create mode 100644 components/tiptap-icons/trash-icon.tsx
 create mode 100644 components/tiptap-icons/underline-icon.tsx
 create mode 100644 components/tiptap-icons/undo2-icon.tsx
 create mode 100644 components/tiptap-node/blockquote-node/blockquote-node.scss
 create mode 100644 components/tiptap-node/code-block-node/code-block-node.scss
 create mode 100644 components/tiptap-node/heading-node/heading-node.scss
 create mode 100644 components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension.ts
 create mode 100644 components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss
 create mode 100644 components/tiptap-node/image-node/image-node.scss
 create mode 100644 components/tiptap-node/image-upload-node/image-upload-node-extension.ts
 create mode 100644 components/tiptap-node/image-upload-node/image-upload-node.scss
 create mode 100644 components/tiptap-node/image-upload-node/image-upload-node.tsx
 create mode 100644 components/tiptap-node/image-upload-node/index.tsx
 create mode 100644 components/tiptap-node/list-node/list-node.scss
 create mode 100644 components/tiptap-node/paragraph-node/paragraph-node.scss
 create mode 100644 components/tiptap-templates/simple/data/content.json
 create mode 100644 components/tiptap-templates/simple/simple-editor.scss
 create mode 100644 components/tiptap-templates/simple/simple-editor.tsx
 create mode 100644 components/tiptap-templates/simple/theme-toggle.tsx
 create mode 100644 components/tiptap-ui-primitive/badge/badge-colors.scss
 create mode 100644 components/tiptap-ui-primitive/badge/badge-group.scss
 create mode 100644 components/tiptap-ui-primitive/badge/badge.scss
 create mode 100644 components/tiptap-ui-primitive/badge/badge.tsx
 create mode 100644 components/tiptap-ui-primitive/badge/index.tsx
 create mode 100644 components/tiptap-ui-primitive/button/button-colors.scss
 create mode 100644 components/tiptap-ui-primitive/button/button-group.scss
 create mode 100644 components/tiptap-ui-primitive/button/button.scss
 create mode 100644 components/tiptap-ui-primitive/button/button.tsx
 create mode 100644 components/tiptap-ui-primitive/button/index.tsx
 create mode 100644 components/tiptap-ui-primitive/card/card.scss
 create mode 100644 components/tiptap-ui-primitive/card/card.tsx
 create mode 100644 components/tiptap-ui-primitive/card/index.tsx
 create mode 100644 components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.scss
 create mode 100644 components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.tsx
 create mode 100644 components/tiptap-ui-primitive/dropdown-menu/index.tsx
 create mode 100644 components/tiptap-ui-primitive/input/index.tsx
 create mode 100644 components/tiptap-ui-primitive/input/input.scss
 create mode 100644 components/tiptap-ui-primitive/input/input.tsx
 create mode 100644 components/tiptap-ui-primitive/popover/index.tsx
 create mode 100644 components/tiptap-ui-primitive/popover/popover.scss
 create mode 100644 components/tiptap-ui-primitive/popover/popover.tsx
 create mode 100644 components/tiptap-ui-primitive/separator/index.tsx
 create mode 100644 components/tiptap-ui-primitive/separator/separator.scss
 create mode 100644 components/tiptap-ui-primitive/separator/separator.tsx
 create mode 100644 components/tiptap-ui-primitive/spacer/index.tsx
 create mode 100644 components/tiptap-ui-primitive/spacer/spacer.tsx
 create mode 100644 components/tiptap-ui-primitive/toolbar/index.tsx
 create mode 100644 components/tiptap-ui-primitive/toolbar/toolbar.scss
 create mode 100644 components/tiptap-ui-primitive/toolbar/toolbar.tsx
 create mode 100644 components/tiptap-ui-primitive/tooltip/index.tsx
 create mode 100644 components/tiptap-ui-primitive/tooltip/tooltip.scss
 create mode 100644 components/tiptap-ui-primitive/tooltip/tooltip.tsx
 create mode 100644 components/tiptap-ui/blockquote-button/blockquote-button.tsx
 create mode 100644 components/tiptap-ui/blockquote-button/index.tsx
 create mode 100644 components/tiptap-ui/blockquote-button/use-blockquote.ts
 create mode 100644 components/tiptap-ui/code-block-button/code-block-button.tsx
 create mode 100644 components/tiptap-ui/code-block-button/index.tsx
 create mode 100644 components/tiptap-ui/code-block-button/use-code-block.ts
 create mode 100644 components/tiptap-ui/color-highlight-button/color-highlight-button.scss
 create mode 100644 components/tiptap-ui/color-highlight-button/color-highlight-button.tsx
 create mode 100644 components/tiptap-ui/color-highlight-button/index.tsx
 create mode 100644 components/tiptap-ui/color-highlight-button/use-color-highlight.ts
 create mode 100644 components/tiptap-ui/color-highlight-popover/color-highlight-popover.tsx
 create mode 100644 components/tiptap-ui/color-highlight-popover/index.tsx
 create mode 100644 components/tiptap-ui/heading-button/heading-button.tsx
 create mode 100644 components/tiptap-ui/heading-button/index.tsx
 create mode 100644 components/tiptap-ui/heading-button/use-heading.ts
 create mode 100644 components/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu.tsx
 create mode 100644 components/tiptap-ui/heading-dropdown-menu/index.tsx
 create mode 100644 components/tiptap-ui/heading-dropdown-menu/use-heading-dropdown-menu.ts
 create mode 100644 components/tiptap-ui/image-upload-button/image-upload-button.tsx
 create mode 100644 components/tiptap-ui/image-upload-button/index.tsx
 create mode 100644 components/tiptap-ui/image-upload-button/use-image-upload.ts
 create mode 100644 components/tiptap-ui/link-popover/index.tsx
 create mode 100644 components/tiptap-ui/link-popover/link-popover.tsx
 create mode 100644 components/tiptap-ui/link-popover/use-link-popover.ts
 create mode 100644 components/tiptap-ui/list-button/index.tsx
 create mode 100644 components/tiptap-ui/list-button/list-button.tsx
 create mode 100644 components/tiptap-ui/list-button/use-list.ts
 create mode 100644 components/tiptap-ui/list-dropdown-menu/index.tsx
 create mode 100644 components/tiptap-ui/list-dropdown-menu/list-dropdown-menu.tsx
 create mode 100644 components/tiptap-ui/list-dropdown-menu/use-list-dropdown-menu.ts
 create mode 100644 components/tiptap-ui/mark-button/index.tsx
 create mode 100644 components/tiptap-ui/mark-button/mark-button.tsx
 create mode 100644 components/tiptap-ui/mark-button/use-mark.ts
 create mode 100644 components/tiptap-ui/text-align-button/index.tsx
 create mode 100644 components/tiptap-ui/text-align-button/text-align-button.tsx
 create mode 100644 components/tiptap-ui/text-align-button/use-text-align.ts
 create mode 100644 components/tiptap-ui/undo-redo-button/index.tsx
 create mode 100644 components/tiptap-ui/undo-redo-button/undo-redo-button.tsx
 create mode 100644 components/tiptap-ui/undo-redo-button/use-undo-redo.ts
 create mode 100644 components/toc-toggle.tsx
 create mode 100644 components/ui/radio-group.tsx
 create mode 100644 components/ui/scroll-area.tsx
 create mode 100644 hooks/use-composed-ref.ts
 create mode 100644 hooks/use-cursor-visibility.ts
 create mode 100644 hooks/use-element-rect.ts
 create mode 100644 hooks/use-menu-navigation.ts
 create mode 100644 hooks/use-scrolling.ts
 create mode 100644 hooks/use-throttled-callback.ts
 create mode 100644 hooks/use-tiptap-editor.ts
 create mode 100644 hooks/use-unmount.ts
 create mode 100644 hooks/use-window-size.ts
 create mode 100644 lib/tiptap-utils.ts
 create mode 100644 styles/_keyframe-animations.scss
 create mode 100644 styles/_variables.scss
 create mode 100644 types/config.ts

diff --git a/app/admin/[slug]/pa.tsx b/app/admin/[slug]/pa.tsx
new file mode 100644
index 0000000..e215596
--- /dev/null
+++ b/app/admin/[slug]/pa.tsx
@@ -0,0 +1,192 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Slider } from "@/components/ui/slider"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Settings, Volume2, FlashlightIcon as Brightness4, Wifi, Battery } from "lucide-react"
+
+export default function ControlPanel() {
+    const [volume, setVolume] = useState([75])
+    const [brightness, setBrightness] = useState([60])
+    const [temperature, setTemperature] = useState([22])
+    const [serverName, setServerName] = useState("Production Server")
+    const [apiKey, setApiKey] = useState("")
+    const [maxConnections, setMaxConnections] = useState([100])
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-6">
+            <div className="mx-auto max-w-4xl space-y-6">
+                {/* Header */}
+                <div className="flex items-center gap-3">
+                    <Settings className="h-8 w-8 text-slate-700" />
+                    <div>
+                        <h1 className="text-3xl font-bold text-slate-900">Control Panel</h1>
+                        <p className="text-slate-600">Manage your system settings and configurations</p>
+                    </div>
+                </div>
+
+                <div className="grid gap-6 md:grid-cols-2">
+                    {/* System Controls */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle className="flex items-center gap-2">
+                                <Volume2 className="h-5 w-5" />
+                                System Controls
+                            </CardTitle>
+                            <CardDescription>Adjust audio, display, and system preferences</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="volume">Volume: {volume[0]}%</Label>
+                                <Slider id="volume" value={volume} onValueChange={setVolume} max={100} step={1} className="w-full" />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="brightness">
+                                    <Brightness4 className="inline h-4 w-4 mr-1" />
+                                    Brightness: {brightness[0]}%
+                                </Label>
+                                <Slider
+                                    id="brightness"
+                                    value={brightness}
+                                    onValueChange={setBrightness}
+                                    max={100}
+                                    step={1}
+                                    className="w-full"
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="temperature">Temperature: {temperature[0]}°C</Label>
+                                <Slider
+                                    id="temperature"
+                                    value={temperature}
+                                    onValueChange={setTemperature}
+                                    min={16}
+                                    max={30}
+                                    step={0.5}
+                                    className="w-full"
+                                />
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    {/* Server Configuration */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle className="flex items-center gap-2">
+                                <Wifi className="h-5 w-5" />
+                                Server Configuration
+                            </CardTitle>
+                            <CardDescription>Configure server settings and API access</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-6">
+                            <div className="space-y-2">
+                                <Label htmlFor="server-name">Server Name</Label>
+                                <Input
+                                    id="server-name"
+                                    value={serverName}
+                                    onChange={(e) => setServerName(e.target.value)}
+                                    placeholder="Enter server name"
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="api-key">API Key</Label>
+                                <Input
+                                    id="api-key"
+                                    type="password"
+                                    value={apiKey}
+                                    onChange={(e) => setApiKey(e.target.value)}
+                                    placeholder="Enter API key"
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="connections">Max Connections: {maxConnections[0]}</Label>
+                                <Slider
+                                    id="connections"
+                                    value={maxConnections}
+                                    onValueChange={setMaxConnections}
+                                    min={10}
+                                    max={500}
+                                    step={10}
+                                    className="w-full"
+                                />
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    {/* Status Dashboard */}
+                    <Card className="md:col-span-2">
+                        <CardHeader>
+                            <CardTitle className="flex items-center gap-2">
+                                <Battery className="h-5 w-5" />
+                                System Status
+                            </CardTitle>
+                            <CardDescription>Current system metrics and status indicators</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="grid gap-4 md:grid-cols-4">
+                                <div className="space-y-2">
+                                    <Label className="text-sm font-medium">CPU Usage</Label>
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex-1 bg-slate-200 rounded-full h-2">
+                                            <div className="bg-blue-500 h-2 rounded-full w-3/4"></div>
+                                        </div>
+                                        <Badge variant="secondary">75%</Badge>
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label className="text-sm font-medium">Memory</Label>
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex-1 bg-slate-200 rounded-full h-2">
+                                            <div className="bg-green-500 h-2 rounded-full w-1/2"></div>
+                                        </div>
+                                        <Badge variant="secondary">8.2GB</Badge>
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label className="text-sm font-medium">Storage</Label>
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex-1 bg-slate-200 rounded-full h-2">
+                                            <div className="bg-orange-500 h-2 rounded-full w-5/6"></div>
+                                        </div>
+                                        <Badge variant="secondary">456GB</Badge>
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label className="text-sm font-medium">Network</Label>
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex-1 bg-slate-200 rounded-full h-2">
+                                            <div className="bg-purple-500 h-2 rounded-full w-1/3"></div>
+                                        </div>
+                                        <Badge variant="outline" className="text-green-600 border-green-600">
+                                            Online
+                                        </Badge>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <Separator className="my-6" />
+
+                            <div className="flex flex-wrap gap-3">
+                                <Button>Apply Settings</Button>
+                                <Button variant="outline">Reset to Default</Button>
+                                <Button variant="ghost">Export Config</Button>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/app/admin/common/control.tsx b/app/admin/common/control.tsx
new file mode 100644
index 0000000..519715c
--- /dev/null
+++ b/app/admin/common/control.tsx
@@ -0,0 +1,598 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Slider } from "@/components/ui/slider"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Switch } from "@/components/ui/switch"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+import { Checkbox } from "@/components/ui/checkbox"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { useState } from "react"
+import { Config, defaultConfig } from "@/types/config"
+import {
+    Settings,
+    Volume2,
+    FlashlightIcon as Brightness4,
+    Wifi,
+    Database,
+    Shield,
+    Monitor,
+    Bell,
+    Server,
+    Lock,
+    Zap,
+    HardDrive,
+    Cpu,
+} from "lucide-react"
+
+
+
+export default function Control() {
+    const [config, setConfig] = useState<Config>(defaultConfig)
+
+    const updateConfig = (key: keyof Config, value: any) => {
+        setConfig(prev => ({
+            ...prev,
+            [key]: value
+        }))
+    }
+
+    const updateSliderConfig = (key: keyof Config, value: number[]) => {
+        updateConfig(key, value[0])
+    }
+
+    return (
+        <ScrollArea className="flex-1 h-full">
+            <div className="min-h-screen  p-6">
+                <div className="mx-auto max-w-7xl space-y-6">
+                    <div className="grid gap-6 lg:grid-cols-3">
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="flex items-center gap-2">
+                                    <Volume2 className="h-5 w-5" />
+                                    System Controls
+                                </CardTitle>
+                                <CardDescription>Audio, display, and hardware settings</CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="volume">Volume: {config.volume}%</Label>
+                                    <Slider
+                                        id="volume"
+                                        value={[config.volume]}
+                                        onValueChange={(value) => updateSliderConfig('volume', value)}
+                                        max={100}
+                                        step={1}
+                                    />
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="brightness">
+                                        <Brightness4 className="inline h-4 w-4 mr-1" />
+                                        Brightness: {config.brightness}%
+                                    </Label>
+                                    <Slider
+                                        id="brightness"
+                                        value={[config.brightness]}
+                                        onValueChange={(value) => updateSliderConfig('brightness', value)}
+                                        max={100}
+                                        step={1}
+                                    />
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="temperature">Temperature: {config.temperature}°C</Label>
+                                    <Slider
+                                        id="temperature"
+                                        value={[config.temperature]}
+                                        onValueChange={(value) => updateSliderConfig('temperature', value)}
+                                        min={16}
+                                        max={30}
+                                        step={0.5}
+                                    />
+                                </div>
+
+                                <div className="space-y-3">
+                                    <Label>Theme Selection</Label>
+                                    <Select value={config.theme} onValueChange={(value) => updateConfig('theme', value)}>
+                                        <SelectTrigger>
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="light">Light Theme</SelectItem>
+                                            <SelectItem value="dark">Dark Theme</SelectItem>
+                                            <SelectItem value="auto">Auto Theme</SelectItem>
+                                            <SelectItem value="high-contrast">High Contrast</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </CardContent>
+                        </Card>
+
+                        {/* Server Configuration */}
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="flex items-center gap-2">
+                                    <Server className="h-5 w-5" />
+                                    Server Configuration
+                                </CardTitle>
+                                <CardDescription>Core server and API settings</CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="server-name">Server Name</Label>
+                                    <Input
+                                        id="server-name"
+                                        value={config.serverName}
+                                        onChange={(e) => updateConfig('serverName', e.target.value)}
+                                        placeholder="Enter server name"
+                                    />
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="api-key">API Key</Label>
+                                    <Input
+                                        id="api-key"
+                                        type="password"
+                                        value={config.apiKey}
+                                        onChange={(e) => updateConfig('apiKey', e.target.value)}
+                                        placeholder="Enter API key"
+                                    />
+                                </div>
+
+                                <div className="space-y-3">
+                                    <Label>Environment</Label>
+                                    <Select value={config.environment} onValueChange={(value) => updateConfig('environment', value)}>
+                                        <SelectTrigger>
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="development">Development</SelectItem>
+                                            <SelectItem value="staging">Staging</SelectItem>
+                                            <SelectItem value="production">Production</SelectItem>
+                                            <SelectItem value="testing">Testing</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+
+                                <div className="space-y-3">
+                                    <Label>Region</Label>
+                                    <Select value={config.region} onValueChange={(value) => updateConfig('region', value)}>
+                                        <SelectTrigger>
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="us-east-1">US East (N. Virginia)</SelectItem>
+                                            <SelectItem value="us-west-2">US West (Oregon)</SelectItem>
+                                            <SelectItem value="eu-west-1">Europe (Ireland)</SelectItem>
+                                            <SelectItem value="ap-southeast-1">Asia Pacific (Singapore)</SelectItem>
+                                            <SelectItem value="ap-northeast-1">Asia Pacific (Tokyo)</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </CardContent>
+                        </Card>
+
+                        {/* Performance Settings */}
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="flex items-center gap-2">
+                                    <Cpu className="h-5 w-5" />
+                                    Performance Settings
+                                </CardTitle>
+                                <CardDescription>Resource allocation and optimization</CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="connections">Max Connections: {config.maxConnections}</Label>
+                                    <Slider
+                                        id="connections"
+                                        value={[config.maxConnections]}
+                                        onValueChange={(value) => updateSliderConfig('maxConnections', value)}
+                                        min={10}
+                                        max={500}
+                                        step={10}
+                                    />
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="cache-size">Cache Size: {config.cacheSize}MB</Label>
+                                    <Slider
+                                        id="cache-size"
+                                        value={[config.cacheSize]}
+                                        onValueChange={(value) => updateSliderConfig('cacheSize', value)}
+                                        min={64}
+                                        max={2048}
+                                        step={64}
+                                    />
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="thread-count">Thread Count: {config.threadCount}</Label>
+                                    <Slider
+                                        id="thread-count"
+                                        value={[config.threadCount]}
+                                        onValueChange={(value) => updateSliderConfig('threadCount', value)}
+                                        min={1}
+                                        max={32}
+                                        step={1}
+                                    />
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="memory-limit">Memory Limit: {config.memoryLimit}MB</Label>
+                                    <Slider
+                                        id="memory-limit"
+                                        value={[config.memoryLimit]}
+                                        onValueChange={(value) => updateSliderConfig('memoryLimit', value)}
+                                        min={512}
+                                        max={8192}
+                                        step={256}
+                                    />
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="bandwidth">Network Bandwidth: {config.networkBandwidth}Mbps</Label>
+                                    <Slider
+                                        id="bandwidth"
+                                        value={[config.networkBandwidth]}
+                                        onValueChange={(value) => updateSliderConfig('networkBandwidth', value)}
+                                        min={10}
+                                        max={1000}
+                                        step={10}
+                                    />
+                                </div>
+                            </CardContent>
+                        </Card>
+
+                        {/* Security & Features */}
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="flex items-center gap-2">
+                                    <Shield className="h-5 w-5" />
+                                    Security & Features
+                                </CardTitle>
+                                <CardDescription>Security settings and feature toggles</CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-6">
+                                <div className="flex items-center justify-between">
+                                    <Label htmlFor="ssl-enabled" className="flex items-center gap-2">
+                                        <Lock className="h-4 w-4" />
+                                        SSL Enabled
+                                    </Label>
+                                    <Switch
+                                        id="ssl-enabled"
+                                        checked={config.sslEnabled}
+                                        onCheckedChange={(checked) => updateConfig('sslEnabled', checked)}
+                                    />
+                                </div>
+
+                                <div className="flex items-center justify-between">
+                                    <Label htmlFor="auto-backup">Auto Backup</Label>
+                                    <Switch
+                                        id="auto-backup"
+                                        checked={config.autoBackup}
+                                        onCheckedChange={(checked) => updateConfig('autoBackup', checked)}
+                                    />
+                                </div>
+
+                                <div className="flex items-center justify-between">
+                                    <Label htmlFor="compression">Compression</Label>
+                                    <Switch
+                                        id="compression"
+                                        checked={config.compressionEnabled}
+                                        onCheckedChange={(checked) => updateConfig('compressionEnabled', checked)}
+                                    />
+                                </div>
+
+                                <div className="flex items-center justify-between">
+                                    <Label htmlFor="debug-mode">Debug Mode</Label>
+                                    <Switch
+                                        id="debug-mode"
+                                        checked={config.debugMode}
+                                        onCheckedChange={(checked) => updateConfig('debugMode', checked)}
+                                    />
+                                </div>
+
+                                <div className="flex items-center justify-between">
+                                    <Label htmlFor="maintenance">Maintenance Mode</Label>
+                                    <Switch
+                                        id="maintenance"
+                                        checked={config.maintenanceMode}
+                                        onCheckedChange={(checked) => updateConfig('maintenanceMode', checked)}
+                                    />
+                                </div>
+
+                                <div className="space-y-3">
+                                    <Label>Log Level</Label>
+                                    <Select value={config.logLevel} onValueChange={(value) => updateConfig('logLevel', value)}>
+                                        <SelectTrigger>
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="debug">Debug</SelectItem>
+                                            <SelectItem value="info">Info</SelectItem>
+                                            <SelectItem value="warn">Warning</SelectItem>
+                                            <SelectItem value="error">Error</SelectItem>
+                                            <SelectItem value="fatal">Fatal</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </CardContent>
+                        </Card>
+
+                        {/* Notifications & Alerts */}
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="flex items-center gap-2">
+                                    <Bell className="h-5 w-5" />
+                                    Notifications & Alerts
+                                </CardTitle>
+                                <CardDescription>Configure notification preferences</CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-6">
+                                <div className="flex items-center justify-between">
+                                    <Label htmlFor="notifications">Push Notifications</Label>
+                                    <Switch
+                                        id="notifications"
+                                        checked={config.notifications}
+                                        onCheckedChange={(checked) => updateConfig('notifications', checked)}
+                                    />
+                                </div>
+
+                                <div className="flex items-center justify-between">
+                                    <Label htmlFor="email-alerts">Email Alerts</Label>
+                                    <Switch
+                                        id="email-alerts"
+                                        checked={config.emailAlerts}
+                                        onCheckedChange={(checked) => updateConfig('emailAlerts', checked)}
+                                    />
+                                </div>
+
+                                <div className="flex items-center justify-between">
+                                    <Label htmlFor="sms-alerts">SMS Alerts</Label>
+                                    <Switch
+                                        id="sms-alerts"
+                                        checked={config.smsAlerts}
+                                        onCheckedChange={(checked) => updateConfig('smsAlerts', checked)}
+                                    />
+                                </div>
+
+                                <div className="flex items-center justify-between">
+                                    <Label htmlFor="monitoring">System Monitoring</Label>
+                                    <Switch
+                                        id="monitoring"
+                                        checked={config.monitoringEnabled}
+                                        onCheckedChange={(checked) => updateConfig('monitoringEnabled', checked)}
+                                    />
+                                </div>
+
+                                <div className="space-y-3">
+                                    <Label>Language</Label>
+                                    <Select value={config.language} onValueChange={(value) => updateConfig('language', value)}>
+                                        <SelectTrigger>
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="en">English</SelectItem>
+                                            <SelectItem value="es">Español</SelectItem>
+                                            <SelectItem value="fr">Français</SelectItem>
+                                            <SelectItem value="de">Deutsch</SelectItem>
+                                            <SelectItem value="zh">中文</SelectItem>
+                                            <SelectItem value="ja">日本語</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+
+                                <div className="space-y-3">
+                                    <Label>Timezone</Label>
+                                    <Select value={config.timezone} onValueChange={(value) => updateConfig('timezone', value)}>
+                                        <SelectTrigger>
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="UTC">UTC</SelectItem>
+                                            <SelectItem value="EST">Eastern Time</SelectItem>
+                                            <SelectItem value="PST">Pacific Time</SelectItem>
+                                            <SelectItem value="GMT">Greenwich Mean Time</SelectItem>
+                                            <SelectItem value="JST">Japan Standard Time</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </CardContent>
+                        </Card>
+
+                        {/* Advanced Configuration */}
+                        <Card>
+                            <CardHeader>
+                                <CardTitle className="flex items-center gap-2">
+                                    <Database className="h-5 w-5" />
+                                    Advanced Configuration
+                                </CardTitle>
+                                <CardDescription>Detailed system configuration options</CardDescription>
+                            </CardHeader>
+                            <CardContent className="space-y-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="description">System Description</Label>
+                                    <Textarea
+                                        id="description"
+                                        value={config.description}
+                                        onChange={(e) => updateConfig('description', e.target.value)}
+                                        placeholder="Enter system description..."
+                                        rows={3}
+                                    />
+                                </div>
+
+                                <div className="space-y-3">
+                                    <Label>Deployment Strategy</Label>
+                                    <RadioGroup value={config.deploymentStrategy} onValueChange={(value) => updateConfig('deploymentStrategy', value)}>
+                                        <div className="flex items-center space-x-2">
+                                            <RadioGroupItem value="rolling" id="rolling" />
+                                            <Label htmlFor="rolling">Rolling Deployment</Label>
+                                        </div>
+                                        <div className="flex items-center space-x-2">
+                                            <RadioGroupItem value="blue-green" id="blue-green" />
+                                            <Label htmlFor="blue-green">Blue-Green Deployment</Label>
+                                        </div>
+                                        <div className="flex items-center space-x-2">
+                                            <RadioGroupItem value="canary" id="canary" />
+                                            <Label htmlFor="canary">Canary Deployment</Label>
+                                        </div>
+                                    </RadioGroup>
+                                </div>
+
+                                <div className="space-y-3">
+                                    <Label>Enabled Features</Label>
+                                    <div className="space-y-2">
+                                        {[
+                                            { id: "analytics", label: "Analytics" },
+                                            { id: "caching", label: "Caching" },
+                                            { id: "cdn", label: "CDN" },
+                                            { id: "load-balancing", label: "Load Balancing" },
+                                            { id: "auto-scaling", label: "Auto Scaling" },
+                                        ].map((feature) => (
+                                            <div key={feature.id} className="flex items-center space-x-2">
+                                                <Checkbox
+                                                    id={feature.id}
+                                                    checked={config.selectedFeatures.includes(feature.id)}
+                                                    onCheckedChange={(checked) => {
+                                                        if (checked) {
+                                                            updateConfig('selectedFeatures', [...config.selectedFeatures, feature.id])
+                                                        } else {
+                                                            updateConfig('selectedFeatures', config.selectedFeatures.filter((f) => f !== feature.id))
+                                                        }
+                                                    }}
+                                                />
+                                                <Label htmlFor={feature.id}>{feature.label}</Label>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </div>
+
+                    {/* Status Dashboard */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle className="flex items-center gap-2">
+                                <Monitor className="h-5 w-5" />
+                                System Status Dashboard
+                            </CardTitle>
+                            <CardDescription>Real-time system metrics and performance indicators</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+                                <div className="space-y-2">
+                                    <Label className="text-sm font-medium flex items-center gap-2">
+                                        <Cpu className="h-4 w-4" />
+                                        CPU Usage
+                                    </Label>
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex-1 bg-slate-200 rounded-full h-2">
+                                            <div className="bg-blue-500 h-2 rounded-full w-3/4"></div>
+                                        </div>
+                                        <Badge variant="secondary">75%</Badge>
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label className="text-sm font-medium flex items-center gap-2">
+                                        <HardDrive className="h-4 w-4" />
+                                        Memory
+                                    </Label>
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex-1 bg-slate-200 rounded-full h-2">
+                                            <div className="bg-green-500 h-2 rounded-full w-1/2"></div>
+                                        </div>
+                                        <Badge variant="secondary">8.2GB</Badge>
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label className="text-sm font-medium flex items-center gap-2">
+                                        <Database className="h-4 w-4" />
+                                        Storage
+                                    </Label>
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex-1 bg-slate-200 rounded-full h-2">
+                                            <div className="bg-orange-500 h-2 rounded-full w-5/6"></div>
+                                        </div>
+                                        <Badge variant="secondary">456GB</Badge>
+                                    </div>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label className="text-sm font-medium flex items-center gap-2">
+                                        <Wifi className="h-4 w-4" />
+                                        Network
+                                    </Label>
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex-1 bg-slate-200 rounded-full h-2">
+                                            <div className="bg-purple-500 h-2 rounded-full w-1/3"></div>
+                                        </div>
+                                        <Badge variant="outline" className="text-green-600 border-green-600">
+                                            Online
+                                        </Badge>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <Separator className="my-6" />
+
+                            <div className="flex flex-wrap gap-3">
+                                <Button className="flex items-center gap-2" onClick={() => {
+                                    // 这里可以添加保存配置到后端的逻辑
+                                    console.log('Applying configuration:', config)
+                                    alert('Configuration applied successfully!')
+                                }}>
+                                    <Zap className="h-4 w-4" />
+                                    Apply All Settings
+                                </Button>
+                                <Button variant="outline" onClick={() => setConfig(defaultConfig)}>Reset to Default</Button>
+                                <Button variant="outline" onClick={() => {
+                                    const dataStr = JSON.stringify(config, null, 2)
+                                    const dataBlob = new Blob([dataStr], { type: 'application/json' })
+                                    const url = URL.createObjectURL(dataBlob)
+                                    const link = document.createElement('a')
+                                    link.href = url
+                                    link.download = 'config.json'
+                                    link.click()
+                                    URL.revokeObjectURL(url)
+                                }}>Export Configuration</Button>
+                                <Button variant="outline" onClick={() => {
+                                    const input = document.createElement('input')
+                                    input.type = 'file'
+                                    input.accept = '.json'
+                                    input.onchange = (e) => {
+                                        const file = (e.target as HTMLInputElement).files?.[0]
+                                        if (file) {
+                                            const reader = new FileReader()
+                                            reader.onload = (e) => {
+                                                try {
+                                                    const importedConfig = JSON.parse(e.target?.result as string)
+                                                    setConfig(importedConfig)
+                                                } catch (error) {
+                                                    console.error('Failed to parse config file:', error)
+                                                    alert('Invalid configuration file')
+                                                }
+                                            }
+                                            reader.readAsText(file)
+                                        }
+                                    }
+                                    input.click()
+                                }}>Import Configuration</Button>
+                                <Button variant="ghost">View Logs</Button>
+                                <Button variant="ghost">System Health Check</Button>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </ScrollArea>
+    );
+}
\ No newline at end of file
diff --git a/app/admin/common/page.tsx b/app/admin/common/page.tsx
new file mode 100644
index 0000000..050a0d4
--- /dev/null
+++ b/app/admin/common/page.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import { useState } from "react"
+
+import { SiteHeader } from "../site-header"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import Control from "./control"
+
+export default function ControlPanel() {
+
+
+    return (
+        <div>
+            <SiteHeader breadcrumbs={[{ label: "Home", href: "/" }, { label: "Settings", href: "/admin/common" }]} />
+            <Control />
+        </div>
+    )
+}
diff --git a/app/admin/dashboard/page.tsx b/app/admin/dashboard/page.tsx
index 430d24a..b3d0edb 100644
--- a/app/admin/dashboard/page.tsx
+++ b/app/admin/dashboard/page.tsx
@@ -2,22 +2,24 @@
 
 import { SectionCards } from "./sections"
 import { ChartAreaInteractive } from "./area"
+import { SiteHeader } from "../site-header"
 
 
 export default function Page() {
     return (
 
-        <div className="flex flex-1 flex-col">
-            <div className="@container/main flex flex-1 flex-col gap-2">
-                <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-                    <SectionCards />
-                    <div className="px-4 lg:px-6">
-                        <ChartAreaInteractive />
+        <>
+            <SiteHeader breadcrumbs={[{ label: "Home", href: "/" }, { label: "Dashboard", href: "/admin/dashboard" }]} />
+            <div className="flex flex-1 flex-col">
+                <div className="@container/main flex flex-1 flex-col gap-2">
+                    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+                        <SectionCards />
+                        <div className="px-4 lg:px-6">
+                            <ChartAreaInteractive />
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-
-
+        </>
     )
 }
\ No newline at end of file
diff --git a/app/admin/editor/editor-component.tsx b/app/admin/editor/editor-component.tsx
new file mode 100644
index 0000000..058bb48
--- /dev/null
+++ b/app/admin/editor/editor-component.tsx
@@ -0,0 +1,10 @@
+"use client"
+import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'
+
+export default function EditorComponent() {
+
+    return <div className='flex-1 min-h-0 overflow-hidden'>
+        <SimpleEditor />
+    </div>
+
+}
\ No newline at end of file
diff --git a/app/admin/editor/page.tsx b/app/admin/editor/page.tsx
new file mode 100644
index 0000000..c3fa8ec
--- /dev/null
+++ b/app/admin/editor/page.tsx
@@ -0,0 +1,13 @@
+"use client"
+import { SiteHeader } from "../site-header"
+import EditorComponent from "./editor-component"
+
+
+export default function Page() {
+
+
+    return <div className="flex flex-col h-[98vh]">
+        <SiteHeader breadcrumbs={[{ label: "Home", href: "/" }, { label: "Editor", href: "/admin/editor" }]} />
+        <EditorComponent />
+    </div>
+}
\ No newline at end of file
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index d97ee81..3906147 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -25,7 +25,9 @@ export default async function Layout({ children }: { children: React.ReactNode }
         >
             <AppSidebar variant="inset" />
             <SidebarInset>
-                {children}
+                <div className="h-[100px]">
+                    {children}
+                </div>
             </SidebarInset>
         </SidebarProvider>
 
diff --git a/app/admin/nav-documents.tsx b/app/admin/nav-documents.tsx
index 45307fa..70e7c91 100644
--- a/app/admin/nav-documents.tsx
+++ b/app/admin/nav-documents.tsx
@@ -31,7 +31,7 @@ export async function NavDocuments() {
         <SidebarGroup className="group-data-[collapsible=icon]:hidden">
             <SidebarGroupLabel>Categories</SidebarGroupLabel>
             <SidebarMenu>
-                {categoriesData?.settingCategories?.map((item) => (
+                {categoriesData?.settingCategories?.filter((item) => item.page).map((item) => (
                     <SidebarMenuItem key={item.page.slug}>
                         <SidebarMenuButton asChild>
                             <a href={`/admin/${item.page.slug}`}>
diff --git a/app/admin/sidebar.tsx b/app/admin/sidebar.tsx
index 5a8876a..9c3fb31 100644
--- a/app/admin/sidebar.tsx
+++ b/app/admin/sidebar.tsx
@@ -52,6 +52,11 @@ const data = {
             title: "Users",
             url: "/admin/users",
             iconName: "users",
+        },
+        {
+            title: "Settings",
+            url: "/admin/common",
+            iconName: "settings",
         }
     ],
     navClouds: [
diff --git a/app/admin/site-header.tsx b/app/admin/site-header.tsx
index f4911ef..c289e7b 100644
--- a/app/admin/site-header.tsx
+++ b/app/admin/site-header.tsx
@@ -1,8 +1,19 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
 import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
 import { SidebarTrigger } from "@/components/ui/sidebar"
+import { SlashIcon } from "lucide-react"
+import Link from "next/link"
+import React from "react"
 
-export function SiteHeader() {
+interface SiteHeaderProps {
+    breadcrumbs: {
+        label: string
+        href: string
+    }[]
+}
+
+export function SiteHeader({ breadcrumbs }: SiteHeaderProps) {
     return (
         <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
             <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
@@ -11,19 +22,29 @@ export function SiteHeader() {
                     orientation="vertical"
                     className="mx-2 data-[orientation=vertical]:h-4"
                 />
-                <h1 className="text-base font-medium">Documents</h1>
-                <div className="ml-auto flex items-center gap-2">
-                    <Button variant="ghost" asChild size="sm" className="hidden sm:flex">
-                        <a
-                            href="https://github.com/shadcn-ui/ui/tree/main/apps/v4/app/(examples)/dashboard"
-                            rel="noopener noreferrer"
-                            target="_blank"
-                            className="dark:text-foreground"
-                        >
-                            GitHub
-                        </a>
-                    </Button>
-                </div>
+                <h1 className="text-base font-medium">
+                    <Breadcrumb>
+                        <BreadcrumbList>
+
+                            {
+                                breadcrumbs.map((breadcrumb, index) => (
+                                    <React.Fragment key={breadcrumb.href}>
+                                        <BreadcrumbItem key={breadcrumb.href}>
+                                            <BreadcrumbLink asChild>
+                                                <Link href={breadcrumb.href}>{breadcrumb.label}</Link>
+                                            </BreadcrumbLink>
+                                        </BreadcrumbItem>
+                                        {index < breadcrumbs.length - 1 && (
+                                            <BreadcrumbSeparator>
+                                                <SlashIcon />
+                                            </BreadcrumbSeparator>
+                                        )}
+                                    </React.Fragment>
+                                ))
+                            }
+                        </BreadcrumbList>
+                    </Breadcrumb>
+                </h1>
             </div>
         </header>
     )
diff --git a/app/admin/users/page.tsx b/app/admin/users/page.tsx
index daad397..a547479 100644
--- a/app/admin/users/page.tsx
+++ b/app/admin/users/page.tsx
@@ -1,17 +1,22 @@
 "use client"
 
 import { UserTable } from "./user-table"
+import { SiteHeader } from "../site-header"
 
 export default function Page() {
     return (
-        <div className="flex flex-1 flex-col">
-            <div className="@container/main flex flex-1 flex-col gap-2">
-                <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-                    <h1 className="text-2xl font-bold px-6">Users</h1>
-                    <UserTable />
+        <>
+            <SiteHeader breadcrumbs={[{ label: "Home", href: "/" }, { label: "Users", href: "/admin/users" }]} />
+            <div className="flex flex-1 flex-col">
+                <div className="@container/main flex flex-1 flex-col gap-2">
+                    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+                        <h1 className="text-2xl font-bold px-6">Users</h1>
+                        <UserTable />
+                    </div>
                 </div>
             </div>
-        </div>
+        </>
+
 
     )
 }
\ No newline at end of file
diff --git a/app/api/session/sync/route.ts b/app/api/session/sync/route.ts
index e14fbe9..6359184 100644
--- a/app/api/session/sync/route.ts
+++ b/app/api/session/sync/route.ts
@@ -48,13 +48,16 @@ export async function POST(request: NextRequest) {
   } catch (error) {
 
     console.error('Login error:', error);
-    return NextResponse.json(
+    const res = NextResponse.json(
       {
         error: 'Internal server error',
         message: error instanceof Error ? error.message : 'Unknown error'
       },
       { status: 500 }
     );
+
+    res.cookies.delete('jwt');
+    return res;
   }
 }
 
diff --git a/app/app-sidebar.tsx b/app/app-sidebar.tsx
index 6139a3f..f196004 100644
--- a/app/app-sidebar.tsx
+++ b/app/app-sidebar.tsx
@@ -1,97 +1,269 @@
 import * as React from "react"
-import { Plus } from "lucide-react"
-import { Calendars } from '@/app/calendars'
-import { NavUser } from '@/app/nav-user'
+import { Book, Command, Home, LucideIcon, Plus, User, Settings, Crown, LogOut } from "lucide-react"
+import { motion } from "framer-motion"
+import Link from "next/link"
 import {
     Sidebar,
     SidebarContent,
     SidebarFooter,
     SidebarGroup,
+    SidebarGroupContent,
     SidebarHeader,
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
     SidebarRail,
-    SidebarSeparator,
 } from '@/components/ui/sidebar'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Label } from "@/components/ui/label"
-import { Slider } from "@/components/ui/slider"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import { useMapLocation, type LocationKey } from "@/hooks/use-map-location"
 import { ThemeToggle } from "@/components/theme-toggle"
 import { useMapZoom } from "@/hooks/use-map-zoom"
 import { useUser } from "./user-context"
+import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils"
+import { useRouter } from "next/navigation"
 
-// This is sample data.
-const data = {
-    user: {
-        name: "shadcn",
-        email: "m@example.com",
-        avatar: "/avatars/shadcn.jpg",
-    },
-    calendars: [
-        {
-            name: "My Calendars",
-            items: ["Personal", "Work", "Family"],
-        },
-        {
-            name: "Favorites",
-            items: ["Holidays", "Birthdays"],
-        },
-        {
-            name: "Other",
-            items: ["Travel", "Reminders", "Deadlines"],
-        },
-    ],
+
+interface MainNavItemProps {
+    icon: LucideIcon
+    label: string
+    onClick?: () => void
+    className?: string
+}
+
+const MainNavItem = React.forwardRef<HTMLButtonElement, MainNavItemProps>(
+    ({ icon: Icon, label, onClick, className }, ref) => {
+        return (
+            <motion.button
+                ref={ref}
+                whileHover={{ scale: 1.1, x: -2 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={onClick}
+                className={cn(
+                    "relative group p-2 rounded-md",
+                    "hover:bg-secondary transition-colors",
+                    className
+                )}
+            >
+                <Icon className="w-4 h-4 text-foreground" />
+                <span className={cn(
+                    "absolute left-full top-1/2 -translate-y-1/2 ml-2",
+                    "px-2 py-1 rounded text-xs",
+                    "bg-popover text-popover-foreground",
+                    "opacity-0 group-hover:opacity-100",
+                    "transition-opacity whitespace-nowrap pointer-events-none",
+                    "z-[9999]"
+                )}>
+                    {label}
+                </span>
+            </motion.button>
+        )
+    }
+)
+MainNavItem.displayName = "MainNavItem"
+
+interface MainNavProps {
+    className?: string
+    items: {
+        icon: LucideIcon
+        label: string
+        onClick?: () => void
+    }[]
+}
+
+
+
+const MainNav = React.forwardRef<HTMLDivElement, MainNavProps>(
+    ({ items, className }, ref) => {
+        return (
+            <div ref={ref} className={cn("flex flex-col items-center gap-2 px-2", className)}>
+                {items.map((item) => (
+                    <MainNavItem key={item.label} {...item} />
+                ))}
+            </div>
+        )
+    }
+)
+MainNav.displayName = "MainNav"
+
+// User avatar component
+function UserAvatar() {
+    const { user } = useUser()
+
+    if (user) {
+        return (
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <motion.div
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                        className="cursor-pointer"
+                    >
+                        <Avatar className="w-8 h-8">
+                            <AvatarImage src={user.avatar} alt={user.name} />
+                            <AvatarFallback className="bg-sidebar-accent text-sidebar-accent-foreground">
+                                {user.name?.charAt(0)?.toUpperCase() || "U"}
+                            </AvatarFallback>
+                        </Avatar>
+                    </motion.div>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56" align="end">
+                    <DropdownMenuLabel>
+                        <div className="flex flex-col space-y-1">
+                            <p className="text-sm font-medium leading-none">{user.name}</p>
+                            <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
+                        </div>
+                    </DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuGroup>
+                        <DropdownMenuItem asChild>
+                            <Link href="/me" className="flex items-center">
+                                <Settings className="mr-2 h-4 w-4" />
+                                <span>Profile</span>
+                                <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
+                            </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem asChild>
+                            <Link href="/me/account" className="flex items-center">
+                                <User className="mr-2 h-4 w-4" />
+                                <span>Account</span>
+                                <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>
+                            </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem asChild>
+                            <Link href="/me/notifications" className="flex items-center">
+                                <Settings className="mr-2 h-4 w-4" />
+                                <span>Notifications</span>
+                                <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
+                            </Link>
+                        </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuGroup>
+                        <DropdownMenuItem asChild>
+                            <Link href="/me/upgrade" className="flex items-center">
+                                <Crown className="mr-2 h-4 w-4" />
+                                <span>Upgrade to Pro</span>
+                                <DropdownMenuShortcut>⌘U</DropdownMenuShortcut>
+                            </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem asChild>
+                            <Link href="/me/billing" className="flex items-center">
+                                <Crown className="mr-2 h-4 w-4" />
+                                <span>Billing</span>
+                                <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+                            </Link>
+                        </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem asChild>
+                        <Link href="/help" className="flex items-center">
+                            <Settings className="mr-2 h-4 w-4" />
+                            <span>Help Center</span>
+                        </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem disabled>
+                        API Documentation
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem className="flex items-center text-red-600 focus:text-red-600">
+                        <LogOut className="mr-2 h-4 w-4" />
+                        <span>Log out</span>
+                        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        )
+    }
+
+    return (
+        <Link href="/login">
+            <motion.div
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="w-8 h-8 rounded-full bg-sidebar-accent flex items-center justify-center cursor-pointer"
+            >
+                <User className="w-4 h-4 text-sidebar-accent-foreground" />
+            </motion.div>
+        </Link>
+    )
 }
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-
-    const { currentLocation, flyToLocation, isMapReady } = useMapLocation();
-    const { zoomToLocation, zoomIn, zoomOut, mapState } = useMapZoom();
-    const { user } = useUser()
+    const router = useRouter()
+    const mainNavItems = [
+        {
+            icon: Home,
+            label: "Home",
+            onClick: () => console.log("Navigate to home")
+        },
+        {
+            icon: Book,
+            label: "Docs",
+            onClick: () => router.push("/blog")
+        },
+        {
+            icon: Plus,
+            label: "New",
+            onClick: () => console.log("Create new project")
+        }
+    ]
 
     return (
-        <Sidebar {...props}>
-            <SidebarHeader className="h-16 border-b border-sidebar-border">
-            </SidebarHeader>
-            <SidebarContent>
-                <SidebarGroup className="p-2 gap-2 px-4">
-                    <Label htmlFor="date">Location</Label>
-                    <Select defaultValue={currentLocation} onValueChange={(value) => {
-                        if (isMapReady) {
-                            flyToLocation(value as LocationKey)
-                        }
-                    }}>
-                        <SelectTrigger className="w-full" id="date" disabled={!isMapReady}>
-                            <SelectValue placeholder={isMapReady ? "Select a location" : "Loading map..."} />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="usa">USA</SelectItem>
-                            <SelectItem value="singapore">Singapore</SelectItem>
-                            <SelectItem value="malaysia">Malaysia</SelectItem>
-                            <SelectItem value="china">China</SelectItem>
-                        </SelectContent>
-                    </Select>
-                </SidebarGroup>
+        <div className="bg-sidebar text-sidebar-foreground w-[48px] h-full flex flex-col items-center p-4 border-r border-sidebar-border">
+            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <Command className="size-4" />
+            </div>
 
-                <SidebarSeparator className="mx-0" />
+            <Separator className="w-full my-2" />
 
-                <SidebarGroup className="p-2 gap-2 px-4">
-                    <Label htmlFor="zoom">Zoom</Label>
-                    <div className="flex items-center gap-2">
-                        <Slider value={[mapState.zoomLevel]} min={5} max={23} step={0.1} onValueChange={value => zoomToLocation(value[0])} />
-                        <span className="text-sm text-muted-foreground bg-muted rounded-md px-1 py-1 text-center w-10 inline-block">{mapState.zoomLevel.toFixed(1)}</span>
-                    </div>
-                </SidebarGroup>
-                <SidebarSeparator className="mx-0" />
-            </SidebarContent>
-            <SidebarFooter>
-                {
-                    user ? <NavUser user={user} /> : null
-                }
-            </SidebarFooter>
-            <SidebarRail />
-        </Sidebar>
+            <MainNav items={mainNavItems} />
+
+            {/* User avatar - fixed at bottom */}
+            <div className="mt-auto">
+                <UserAvatar />
+            </div>
+        </div>
+    )
+}
+
+
+export function NavSecondary({
+    items,
+    ...props
+}: {
+    items: {
+        title: string
+        url: string
+        icon: LucideIcon
+    }[]
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+    return (
+        <SidebarGroup {...props}>
+            <SidebarGroupContent>
+                <SidebarMenu>
+                    {items.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                            <SidebarMenuButton asChild size="sm">
+                                <a href={item.url}>
+                                    <item.icon />
+                                    <span>{item.title}</span>
+                                </a>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+            </SidebarGroupContent>
+        </SidebarGroup>
     )
 }
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
new file mode 100644
index 0000000..229032d
--- /dev/null
+++ b/app/blog/[slug]/page.tsx
@@ -0,0 +1,60 @@
+"use client"
+import { gql, useQuery } from '@apollo/client'
+import { use, useState } from 'react'
+import BlogViewer from '@/components/blog-viewer'
+import TableOfContents from '@/components/table-of-contents'
+import { cn } from '@/lib/utils'
+
+const BLOG = gql`
+    query Blog($slug: String!) {
+        blogBySlug(slug: $slug) {
+            id
+            title
+            content
+        }
+    }
+`
+
+export default function Page({ params }: { params: Promise<{ slug: string }> }) {
+    // 使用 React.use() 来解包 params Promise
+    const resolvedParams = use(params);
+    const { slug } = resolvedParams;
+    const [contentReady, setContentReady] = useState(false);
+
+    const { data, loading, error } = useQuery(BLOG, {
+        variables: { slug },
+    })
+
+    // 条件渲染处理
+    if (loading) return <div className="flex items-center justify-center min-h-[400px]">Loading...</div>;
+    if (error) return <div className="flex items-center justify-center min-h-[400px] text-red-500">Error: {error.message}</div>;
+    if (!data?.blogBySlug) return <div className="flex items-center justify-center min-h-[400px]">Blog not found</div>;
+
+    const content = data.blogBySlug.content;
+    console.log('Blog content:', content);
+
+    return (
+        <div className="relative">
+
+            {contentReady && (
+                <div className={cn(
+                    "fixed left-4 top-1/2 -translate-y-1/2 z-40 hidden xl:block",
+                    "animate-in slide-in-from-left-8 fade-in duration-500 ease-out"
+                )}>
+                    <TableOfContents />
+                </div>
+            )}
+
+            {/* 主内容区域 */}
+            <div className="container mx-auto py-8 max-w-4xl">
+                <main>
+                    <h1 className="text-5xl font-bold my-12">{data.blogBySlug.title}</h1>
+                    <BlogViewer
+                        content={content}
+                        onContentReady={() => setContentReady(true)}
+                    />
+                </main>
+            </div>
+        </div>
+    );
+}
diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx
new file mode 100644
index 0000000..969bbc8
--- /dev/null
+++ b/app/blog/layout.tsx
@@ -0,0 +1,13 @@
+import { Navigation } from "../nav"
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+
+    return (
+        <div className="flex flex-col min-h-screen">
+            <div className="container mx-auto py-8 max-w-4xl">
+                {children}
+            </div>
+        </div>
+
+    )
+}
\ No newline at end of file
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
new file mode 100644
index 0000000..7cd5ead
--- /dev/null
+++ b/app/blog/page.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { Button } from "@/components/ui/button";
+import { gql, useQuery } from "@apollo/client";
+import Link from "next/link";
+import { useEffect } from "react";
+
+const BLOG = gql`
+    query Blog {
+
+        blogs {
+            items {
+                id
+                title
+                excerpt
+                slug
+            }
+        }
+        
+    }
+`
+
+export default function Blog() {
+
+    const { data, loading, error } = useQuery(BLOG);
+
+    const items = data?.blogs?.items || [];
+
+    return <div>
+        <h1 className="text-5xl font-bold my-12">Blog</h1>
+        {loading && <div>Loading...</div>}
+        {error && <div>Error: {error.message}</div>}
+        {!loading && items.length === 0 && <div>No blogs found</div>}
+        {items.map((blog: any) => (
+            <BlogItem key={blog.id} blog={blog} />
+        ))}
+    </div>;
+}
+
+function BlogItem({ blog }: { blog: any }) {
+    return <div>
+        <Link href={`/blog/${blog.slug}`}>
+            <Button variant="link" asChild>
+                <h2 className="text-2xl font-bold">{blog.title}</h2>
+            </Button>
+        </Link>
+        <p className="text-sm text-gray-500">{blog.excerpt}</p>
+    </div>
+}
+
diff --git a/app/globals.css b/app/globals.css
index a23a767..fe9db1a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import '../styles/_variables.scss';
+@import '../styles/_keyframe-animations.scss';
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/app/layout.tsx b/app/layout.tsx
index dee53ab..cefab62 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -28,7 +28,7 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased h-screen`}
       >
         <ClientProviders>
           {children}
diff --git a/app/nav.tsx b/app/nav.tsx
new file mode 100644
index 0000000..3472fce
--- /dev/null
+++ b/app/nav.tsx
@@ -0,0 +1,212 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { CircleCheckIcon, CircleHelpIcon, CircleIcon } from "lucide-react"
+
+import {
+    NavigationMenu,
+    NavigationMenuContent,
+    NavigationMenuItem,
+    NavigationMenuLink,
+    NavigationMenuList,
+    NavigationMenuTrigger,
+    navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+    {
+        title: "Alert Dialog",
+        href: "/docs/primitives/alert-dialog",
+        description:
+            "A modal dialog that interrupts the user with important content and expects a response.",
+    },
+    {
+        title: "Hover Card",
+        href: "/docs/primitives/hover-card",
+        description:
+            "For sighted users to preview content available behind a link.",
+    },
+    {
+        title: "Progress",
+        href: "/docs/primitives/progress",
+        description:
+            "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+    },
+    {
+        title: "Scroll-area",
+        href: "/docs/primitives/scroll-area",
+        description: "Visually or semantically separates content.",
+    },
+    {
+        title: "Tabs",
+        href: "/docs/primitives/tabs",
+        description:
+            "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+    },
+    {
+        title: "Tooltip",
+        href: "/docs/primitives/tooltip",
+        description:
+            "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+    },
+]
+
+export function Navigation() {
+    return (
+        <NavigationMenu viewport={false} className="h-16">
+            <NavigationMenuList>
+                <NavigationMenuItem>
+                    <NavigationMenuTrigger>Home</NavigationMenuTrigger>
+                    <NavigationMenuContent>
+                        <ul className="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                            <li className="row-span-3">
+                                <NavigationMenuLink asChild>
+                                    <a
+                                        className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md"
+                                        href="/"
+                                    >
+                                        <div className="mt-4 mb-2 text-lg font-medium">
+                                            shadcn/ui
+                                        </div>
+                                        <p className="text-muted-foreground text-sm leading-tight">
+                                            Beautifully designed components built with Tailwind CSS.
+                                        </p>
+                                    </a>
+                                </NavigationMenuLink>
+                            </li>
+                            <ListItem href="/docs" title="Introduction">
+                                Re-usable components built using Radix UI and Tailwind CSS.
+                            </ListItem>
+                            <ListItem href="/docs/installation" title="Installation">
+                                How to install dependencies and structure your app.
+                            </ListItem>
+                            <ListItem href="/docs/primitives/typography" title="Typography">
+                                Styles for headings, paragraphs, lists...etc
+                            </ListItem>
+                        </ul>
+                    </NavigationMenuContent>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                    <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+                    <NavigationMenuContent>
+                        <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+                            {components.map((component) => (
+                                <ListItem
+                                    key={component.title}
+                                    title={component.title}
+                                    href={component.href}
+                                >
+                                    {component.description}
+                                </ListItem>
+                            ))}
+                        </ul>
+                    </NavigationMenuContent>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                    <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+                        <Link href="/docs">Docs</Link>
+                    </NavigationMenuLink>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                    <NavigationMenuTrigger>List</NavigationMenuTrigger>
+                    <NavigationMenuContent>
+                        <ul className="grid w-[300px] gap-4">
+                            <li>
+                                <NavigationMenuLink asChild>
+                                    <Link href="#">
+                                        <div className="font-medium">Components</div>
+                                        <div className="text-muted-foreground">
+                                            Browse all components in the library.
+                                        </div>
+                                    </Link>
+                                </NavigationMenuLink>
+                                <NavigationMenuLink asChild>
+                                    <Link href="#">
+                                        <div className="font-medium">Documentation</div>
+                                        <div className="text-muted-foreground">
+                                            Learn how to use the library.
+                                        </div>
+                                    </Link>
+                                </NavigationMenuLink>
+                                <NavigationMenuLink asChild>
+                                    <Link href="#">
+                                        <div className="font-medium">Blog</div>
+                                        <div className="text-muted-foreground">
+                                            Read our latest blog posts.
+                                        </div>
+                                    </Link>
+                                </NavigationMenuLink>
+                            </li>
+                        </ul>
+                    </NavigationMenuContent>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                    <NavigationMenuTrigger>Simple</NavigationMenuTrigger>
+                    <NavigationMenuContent>
+                        <ul className="grid w-[200px] gap-4">
+                            <li>
+                                <NavigationMenuLink asChild>
+                                    <Link href="#">Components</Link>
+                                </NavigationMenuLink>
+                                <NavigationMenuLink asChild>
+                                    <Link href="#">Documentation</Link>
+                                </NavigationMenuLink>
+                                <NavigationMenuLink asChild>
+                                    <Link href="#">Blocks</Link>
+                                </NavigationMenuLink>
+                            </li>
+                        </ul>
+                    </NavigationMenuContent>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                    <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
+                    <NavigationMenuContent>
+                        <ul className="grid w-[200px] gap-4">
+                            <li>
+                                <NavigationMenuLink asChild>
+                                    <Link href="#" className="flex-row items-center gap-2">
+                                        <CircleHelpIcon />
+                                        Backlog
+                                    </Link>
+                                </NavigationMenuLink>
+                                <NavigationMenuLink asChild>
+                                    <Link href="#" className="flex-row items-center gap-2">
+                                        <CircleIcon />
+                                        To Do
+                                    </Link>
+                                </NavigationMenuLink>
+                                <NavigationMenuLink asChild>
+                                    <Link href="#" className="flex-row items-center gap-2">
+                                        <CircleCheckIcon />
+                                        Done
+                                    </Link>
+                                </NavigationMenuLink>
+                            </li>
+                        </ul>
+                    </NavigationMenuContent>
+                </NavigationMenuItem>
+            </NavigationMenuList>
+        </NavigationMenu>
+    )
+}
+
+function ListItem({
+    title,
+    children,
+    href,
+    ...props
+}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
+    return (
+        <li {...props}>
+            <NavigationMenuLink asChild>
+                <Link href={href}>
+                    <div className="text-sm leading-none font-medium">{title}</div>
+                    <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                        {children}
+                    </p>
+                </Link>
+            </NavigationMenuLink>
+        </li>
+    )
+}
diff --git a/app/page.tsx b/app/page.tsx
index 74d7a94..72444e7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -21,35 +21,23 @@ import { cn } from '@/lib/utils';
 import { useMap } from './map-context'
 import { format } from 'date-fns'
 import { Label } from '@/components/ui/label'
+import { Navigation } from './nav'
 
 
 
 export default function Page() {
 
-  const { currentDatetime, timelineDatetime } = useMap()
-
   return (
-    <SidebarProvider>
+    <div className="flex flex-row h-full">
       <AppSidebar />
-      <SidebarInset>
-        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
-          {/* <SidebarTrigger className="-ml-1" /> */}
-          {/* <Separator orientation="vertical" className="mr-2 h-4" /> */}
-          <div className="flex items-center gap-2 justify-between w-full">
-            {
-              currentDatetime && (
-                <Label>
-                  Real Time: {format(currentDatetime, 'yyyy-MM-dd HH:mm:ss')}
-                </Label>
-              )
-            }
-          </div>
-        </header>
-        <div className="relative h-full w-full flex flex-col">
+      <div className="flex-1 flex flex-col min-h-0">
+        <div className="flex-1 min-h-0">
           <MapComponent />
+        </div>
+        <div className="flex-shrink-0">
           <Timeline />
         </div>
-      </SidebarInset>
-    </SidebarProvider>
+      </div>
+    </div>
   )
 }
diff --git a/app/simple/page.tsx b/app/simple/page.tsx
new file mode 100644
index 0000000..5bb89be
--- /dev/null
+++ b/app/simple/page.tsx
@@ -0,0 +1,5 @@
+import { SimpleEditor } from "@/components/tiptap-templates/simple/simple-editor"
+
+export default function Page() {
+  return <SimpleEditor />
+}
diff --git a/components/blog-viewer.tsx b/components/blog-viewer.tsx
new file mode 100644
index 0000000..f28d53a
--- /dev/null
+++ b/components/blog-viewer.tsx
@@ -0,0 +1,100 @@
+"use client";
+import { EditorContent, useEditor } from '@tiptap/react';
+import { StarterKit } from '@tiptap/starter-kit';
+import { Image } from '@tiptap/extension-image';
+import { TaskItem, TaskList } from '@tiptap/extension-list';
+import { TextAlign } from '@tiptap/extension-text-align';
+import { Typography } from '@tiptap/extension-typography';
+import { Highlight } from '@tiptap/extension-highlight';
+import { Subscript } from '@tiptap/extension-subscript';
+import { Superscript } from '@tiptap/extension-superscript';
+import { HorizontalRule } from '@/components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension';
+import { useEffect } from 'react';
+
+// 导入必要的样式
+import '@/components/tiptap-node/blockquote-node/blockquote-node.scss';
+import '@/components/tiptap-node/code-block-node/code-block-node.scss';
+import '@/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss';
+import '@/components/tiptap-node/list-node/list-node.scss';
+import '@/components/tiptap-node/image-node/image-node.scss';
+import '@/components/tiptap-node/heading-node/heading-node.scss';
+import '@/components/tiptap-node/paragraph-node/paragraph-node.scss';
+
+interface BlogViewerProps {
+    content: any;
+    onContentReady?: () => void;
+}
+
+export default function BlogViewer({ content, onContentReady }: BlogViewerProps) {
+    const editor = useEditor({
+        immediatelyRender: false,
+        editable: false,
+        editorProps: {
+            attributes: {
+                class: 'simple-editor prose prose-gray max-w-none dark:prose-invert',
+            },
+        },
+        extensions: [
+            StarterKit.configure({
+                horizontalRule: false,
+                link: {
+                    openOnClick: true,
+                    enableClickSelection: false,
+                },
+            }),
+            HorizontalRule,
+            TextAlign.configure({ types: ['heading', 'paragraph'] }),
+            TaskList,
+            TaskItem.configure({ nested: true }),
+            Highlight.configure({ multicolor: true }),
+            Image,
+            Typography,
+            Superscript,
+            Subscript,
+        ],
+        content: content || '',
+    });
+
+    // 为标题添加 ID，并在内容加载完成后通知父组件
+    useEffect(() => {
+        if (editor && editor.view.dom) {
+            // 等待 DOM 更新
+            setTimeout(() => {
+                const headings = editor.view.dom.querySelectorAll('h1, h2, h3, h4, h5, h6');
+                headings.forEach((heading, index) => {
+                    const element = heading as HTMLElement;
+                    if (!element.id) {
+                        const text = element.textContent || '';
+                        let id = text
+                            .toLowerCase()
+                            .replace(/[^\w\s-]/g, '')
+                            .replace(/[\s_-]+/g, '-')
+                            .replace(/^-+|-+$/g, '');
+
+                        // 确保 ID 唯一
+                        let uniqueId = id;
+                        let counter = 1;
+                        while (document.getElementById(uniqueId)) {
+                            uniqueId = `${id}-${counter}`;
+                            counter++;
+                        }
+
+                        element.id = uniqueId;
+                    }
+                });
+
+                // 通知父组件内容已准备好
+                onContentReady?.();
+            }, 100);
+        }
+    }, [editor, content, onContentReady]);
+
+    return (
+        <div className="blog-viewer-wrapper min-h-[400px] p-6">
+            <EditorContent
+                editor={editor}
+                className="blog-viewer-content"
+            />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/map-component.tsx b/components/map-component.tsx
index 1046572..14a8d14 100644
--- a/components/map-component.tsx
+++ b/components/map-component.tsx
@@ -541,10 +541,11 @@ export function MapComponent({
     }, [currentColorMapType, isReady])
 
     return (
-        <div className="relative w-full h-full" style={{ minHeight: '400px' }}>
+        <div className="h-full w-full relative">
             <div
                 ref={mapContainer}
                 className="w-full h-full"
+                style={{ minHeight: '400px' }}
             />
 
             {/* Colorbar 在右下角 */}
diff --git a/components/table-of-contents.tsx b/components/table-of-contents.tsx
new file mode 100644
index 0000000..4783799
--- /dev/null
+++ b/components/table-of-contents.tsx
@@ -0,0 +1,165 @@
+"use client";
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface TOCItem {
+    id: string;
+    text: string;
+    level: number;
+    element: HTMLElement;
+}
+
+interface TableOfContentsProps {
+    className?: string;
+}
+
+export default function TableOfContents({ className }: TableOfContentsProps) {
+    const [toc, setToc] = useState<TOCItem[]>([]);
+    const [activeId, setActiveId] = useState<string>('');
+    const observerRef = useRef<IntersectionObserver | null>(null);
+
+    // 提取页面中的标题
+    const extractHeadings = useCallback(() => {
+        const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+        const tocItems: TOCItem[] = [];
+
+        headings.forEach((heading, index) => {
+            const element = heading as HTMLElement;
+            const text = element.textContent || '';
+            const level = parseInt(element.tagName.charAt(1));
+
+            // 为标题添加 ID（如果没有的话）
+            let id = element.id;
+            if (!id) {
+                id = text
+                    .toLowerCase()
+                    .replace(/[^\w\s-]/g, '') // 移除特殊字符
+                    .replace(/[\s_-]+/g, '-') // 替换空格和下划线为连字符
+                    .replace(/^-+|-+$/g, ''); // 移除首尾的连字符
+
+                // 确保 ID 唯一
+                let uniqueId = id;
+                let counter = 1;
+                while (document.getElementById(uniqueId)) {
+                    uniqueId = `${id}-${counter}`;
+                    counter++;
+                }
+
+                element.id = uniqueId;
+                id = uniqueId;
+            }
+
+            tocItems.push({
+                id,
+                text,
+                level,
+                element
+            });
+        });
+
+        setToc(tocItems);
+        return tocItems;
+    }, []);
+
+    // 设置 Intersection Observer 来追踪当前可见的标题
+    useEffect(() => {
+        const headings = extractHeadings();
+
+        if (headings.length === 0) return;
+
+        observerRef.current = new IntersectionObserver(
+            (entries) => {
+                // 找到所有可见的标题
+                const visibleHeadings = entries
+                    .filter(entry => entry.isIntersecting)
+                    .map(entry => entry.target.id);
+
+                if (visibleHeadings.length > 0) {
+                    // 设置第一个可见标题为活跃状态
+                    setActiveId(visibleHeadings[0]);
+                }
+            },
+            {
+                rootMargin: '-80px 0px -80%',
+                threshold: 0
+            }
+        );
+
+        // 观察所有标题
+        headings.forEach((item) => {
+            observerRef.current?.observe(item.element);
+        });
+
+        return () => {
+            observerRef.current?.disconnect();
+        };
+    }, [extractHeadings]);
+
+    // 点击目录项滚动到对应位置
+    const scrollToHeading = useCallback((id: string) => {
+        console.log('Scrolling to:', id); // 调试日志
+        const element = document.getElementById(id);
+        if (element) {
+            console.log('Element found:', element); // 调试日志
+            const offsetTop = element.getBoundingClientRect().top + window.pageYOffset - 100;
+            window.scrollTo({
+                top: offsetTop,
+                behavior: 'smooth'
+            });
+
+            // 更新活跃状态
+            setActiveId(id);
+        } else {
+            console.log('Element not found for id:', id); // 调试日志
+        }
+    }, []);
+
+    if (toc.length === 0) {
+        return null;
+    }
+
+    return (
+        <nav className={className}>
+            <div className=" shadow-lg p-4 max-w-xs">
+                <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4 uppercase tracking-wider">
+                    Navigation
+                </h3>
+                <div className={"max-h-[60vh] overflow-y-auto"}>
+                    <ul className="relative space-y-1">
+                        {toc.map((item) => (
+                            <li
+                                key={item.id}
+                                className={cn({
+                                    'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 font-medium': activeId === item.id
+                                })}
+                            >
+                                <button
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        scrollToHeading(item.id);
+                                    }}
+                                    className={cn(
+                                        "block w-full text-left py-1.5 px-2 text-xs rounded transition-colors duration-200",
+                                        "hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer",
+                                        {
+                                            'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 font-medium':
+                                                activeId === item.id,
+                                            'text-gray-600 dark:text-gray-400':
+                                                activeId !== item.id,
+                                        }
+                                    )}
+                                    style={{
+                                        paddingLeft: `${(item.level - 1) * 8 + 8}px`,
+                                    }}
+                                    type="button"
+                                >
+                                    {item.text}
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    );
+}
\ No newline at end of file
diff --git a/components/tiptap-icons/align-center-icon.tsx b/components/tiptap-icons/align-center-icon.tsx
new file mode 100644
index 0000000..5756812
--- /dev/null
+++ b/components/tiptap-icons/align-center-icon.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+
+export const AlignCenterIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4 18C4 17.4477 4.44772 17 5 17H19C19.5523 17 20 17.4477 20 18C20 18.5523 19.5523 19 19 19H5C4.44772 19 4 18.5523 4 18Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+AlignCenterIcon.displayName = "AlignCenterIcon"
diff --git a/components/tiptap-icons/align-justify-icon.tsx b/components/tiptap-icons/align-justify-icon.tsx
new file mode 100644
index 0000000..e43b354
--- /dev/null
+++ b/components/tiptap-icons/align-justify-icon.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+
+export const AlignJustifyIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 18C2 17.4477 2.44772 17 3 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+AlignJustifyIcon.displayName = "AlignJustifyIcon"
diff --git a/components/tiptap-icons/align-left-icon.tsx b/components/tiptap-icons/align-left-icon.tsx
new file mode 100644
index 0000000..4cb2373
--- /dev/null
+++ b/components/tiptap-icons/align-left-icon.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+
+export const AlignLeftIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 12C2 11.4477 2.44772 11 3 11H15C15.5523 11 16 11.4477 16 12C16 12.5523 15.5523 13 15 13H3C2.44772 13 2 12.5523 2 12Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 18C2 17.4477 2.44772 17 3 17H17C17.5523 17 18 17.4477 18 18C18 18.5523 17.5523 19 17 19H3C2.44772 19 2 18.5523 2 18Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+AlignLeftIcon.displayName = "AlignLeftIcon"
diff --git a/components/tiptap-icons/align-right-icon.tsx b/components/tiptap-icons/align-right-icon.tsx
new file mode 100644
index 0000000..af832df
--- /dev/null
+++ b/components/tiptap-icons/align-right-icon.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+
+export const AlignRightIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8 12C8 11.4477 8.44772 11 9 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H9C8.44772 13 8 12.5523 8 12Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6 18C6 17.4477 6.44772 17 7 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H7C6.44772 19 6 18.5523 6 18Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+AlignRightIcon.displayName = "AlignRightIcon"
diff --git a/components/tiptap-icons/arrow-left-icon.tsx b/components/tiptap-icons/arrow-left-icon.tsx
new file mode 100644
index 0000000..e206c68
--- /dev/null
+++ b/components/tiptap-icons/arrow-left-icon.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+export const ArrowLeftIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M12.7071 5.70711C13.0976 5.31658 13.0976 4.68342 12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289L4.29289 11.2929C3.90237 11.6834 3.90237 12.3166 4.29289 12.7071L11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071C13.0976 19.3166 13.0976 18.6834 12.7071 18.2929L7.41421 13L19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11L7.41421 11L12.7071 5.70711Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+ArrowLeftIcon.displayName = "ArrowLeftIcon"
diff --git a/components/tiptap-icons/ban-icon.tsx b/components/tiptap-icons/ban-icon.tsx
new file mode 100644
index 0000000..052f8ec
--- /dev/null
+++ b/components/tiptap-icons/ban-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+export const BanIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4.43471 4.01458C4.34773 4.06032 4.26607 4.11977 4.19292 4.19292C4.11977 4.26607 4.06032 4.34773 4.01458 4.43471C2.14611 6.40628 1 9.0693 1 12C1 18.0751 5.92487 23 12 23C14.9306 23 17.5936 21.854 19.5651 19.9856C19.6522 19.9398 19.7339 19.8803 19.8071 19.8071C19.8803 19.7339 19.9398 19.6522 19.9856 19.5651C21.854 17.5936 23 14.9306 23 12C23 5.92487 18.0751 1 12 1C9.0693 1 6.40628 2.14611 4.43471 4.01458ZM6.38231 4.9681C7.92199 3.73647 9.87499 3 12 3C16.9706 3 21 7.02944 21 12C21 14.125 20.2635 16.078 19.0319 17.6177L6.38231 4.9681ZM17.6177 19.0319C16.078 20.2635 14.125 21 12 21C7.02944 21 3 16.9706 3 12C3 9.87499 3.73647 7.92199 4.9681 6.38231L17.6177 19.0319Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+BanIcon.displayName = "BanIcon"
diff --git a/components/tiptap-icons/blockquote-icon.tsx b/components/tiptap-icons/blockquote-icon.tsx
new file mode 100644
index 0000000..8282a39
--- /dev/null
+++ b/components/tiptap-icons/blockquote-icon.tsx
@@ -0,0 +1,44 @@
+import * as React from "react"
+
+export const BlockquoteIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8 6C8 5.44772 8.44772 5 9 5H16C16.5523 5 17 5.44772 17 6C17 6.55228 16.5523 7 16 7H9C8.44772 7 8 6.55228 8 6Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4 3C4.55228 3 5 3.44772 5 4L5 20C5 20.5523 4.55229 21 4 21C3.44772 21 3 20.5523 3 20L3 4C3 3.44772 3.44772 3 4 3Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8 12C8 11.4477 8.44772 11 9 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H9C8.44772 13 8 12.5523 8 12Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8 18C8 17.4477 8.44772 17 9 17H16C16.5523 17 17 17.4477 17 18C17 18.5523 16.5523 19 16 19H9C8.44772 19 8 18.5523 8 18Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+BlockquoteIcon.displayName = "BlockquoteIcon"
diff --git a/components/tiptap-icons/bold-icon.tsx b/components/tiptap-icons/bold-icon.tsx
new file mode 100644
index 0000000..33840fd
--- /dev/null
+++ b/components/tiptap-icons/bold-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+export const BoldIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6 2.5C5.17157 2.5 4.5 3.17157 4.5 4V20C4.5 20.8284 5.17157 21.5 6 21.5H15C16.4587 21.5 17.8576 20.9205 18.8891 19.8891C19.9205 18.8576 20.5 17.4587 20.5 16C20.5 14.5413 19.9205 13.1424 18.8891 12.1109C18.6781 11.9 18.4518 11.7079 18.2128 11.5359C19.041 10.5492 19.5 9.29829 19.5 8C19.5 6.54131 18.9205 5.14236 17.8891 4.11091C16.8576 3.07946 15.4587 2.5 14 2.5H6ZM14 10.5C14.663 10.5 15.2989 10.2366 15.7678 9.76777C16.2366 9.29893 16.5 8.66304 16.5 8C16.5 7.33696 16.2366 6.70107 15.7678 6.23223C15.2989 5.76339 14.663 5.5 14 5.5H7.5V10.5H14ZM7.5 18.5V13.5H15C15.663 13.5 16.2989 13.7634 16.7678 14.2322C17.2366 14.7011 17.5 15.337 17.5 16C17.5 16.663 17.2366 17.2989 16.7678 17.7678C16.2989 18.2366 15.663 18.5 15 18.5H7.5Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+BoldIcon.displayName = "BoldIcon"
diff --git a/components/tiptap-icons/chevron-down-icon.tsx b/components/tiptap-icons/chevron-down-icon.tsx
new file mode 100644
index 0000000..36c09b0
--- /dev/null
+++ b/components/tiptap-icons/chevron-down-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+export const ChevronDownIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+ChevronDownIcon.displayName = "ChevronDownIcon"
diff --git a/components/tiptap-icons/close-icon.tsx b/components/tiptap-icons/close-icon.tsx
new file mode 100644
index 0000000..5fce813
--- /dev/null
+++ b/components/tiptap-icons/close-icon.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+export const CloseIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+CloseIcon.displayName = "CloseIcon"
diff --git a/components/tiptap-icons/code-block-icon.tsx b/components/tiptap-icons/code-block-icon.tsx
new file mode 100644
index 0000000..12027f1
--- /dev/null
+++ b/components/tiptap-icons/code-block-icon.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+
+export const CodeBlockIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.70711 2.29289C7.09763 2.68342 7.09763 3.31658 6.70711 3.70711L4.41421 6L6.70711 8.29289C7.09763 8.68342 7.09763 9.31658 6.70711 9.70711C6.31658 10.0976 5.68342 10.0976 5.29289 9.70711L2.29289 6.70711C1.90237 6.31658 1.90237 5.68342 2.29289 5.29289L5.29289 2.29289C5.68342 1.90237 6.31658 1.90237 6.70711 2.29289Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10.2929 2.29289C10.6834 1.90237 11.3166 1.90237 11.7071 2.29289L14.7071 5.29289C15.0976 5.68342 15.0976 6.31658 14.7071 6.70711L11.7071 9.70711C11.3166 10.0976 10.6834 10.0976 10.2929 9.70711C9.90237 9.31658 9.90237 8.68342 10.2929 8.29289L12.5858 6L10.2929 3.70711C9.90237 3.31658 9.90237 2.68342 10.2929 2.29289Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17 4C17 3.44772 17.4477 3 18 3H19C20.6569 3 22 4.34315 22 6V18C22 19.6569 20.6569 21 19 21H5C3.34315 21 2 19.6569 2 18V12C2 11.4477 2.44772 11 3 11C3.55228 11 4 11.4477 4 12V18C4 18.5523 4.44772 19 5 19H19C19.5523 19 20 18.5523 20 18V6C20 5.44772 19.5523 5 19 5H18C17.4477 5 17 4.55228 17 4Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+CodeBlockIcon.displayName = "CodeBlockIcon"
diff --git a/components/tiptap-icons/code2-icon.tsx b/components/tiptap-icons/code2-icon.tsx
new file mode 100644
index 0000000..4092170
--- /dev/null
+++ b/components/tiptap-icons/code2-icon.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+
+export const Code2Icon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M15.4545 4.2983C15.6192 3.77115 15.3254 3.21028 14.7983 3.04554C14.2712 2.88081 13.7103 3.1746 13.5455 3.70175L8.54554 19.7017C8.38081 20.2289 8.6746 20.7898 9.20175 20.9545C9.72889 21.1192 10.2898 20.8254 10.4545 20.2983L15.4545 4.2983Z"
+          fill="currentColor"
+        />
+        <path
+          d="M6.70711 7.29289C7.09763 7.68342 7.09763 8.31658 6.70711 8.70711L3.41421 12L6.70711 15.2929C7.09763 15.6834 7.09763 16.3166 6.70711 16.7071C6.31658 17.0976 5.68342 17.0976 5.29289 16.7071L1.29289 12.7071C0.902369 12.3166 0.902369 11.6834 1.29289 11.2929L5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289Z"
+          fill="currentColor"
+        />
+        <path
+          d="M17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289L22.7071 11.2929C23.0976 11.6834 23.0976 12.3166 22.7071 12.7071L18.7071 16.7071C18.3166 17.0976 17.6834 17.0976 17.2929 16.7071C16.9024 16.3166 16.9024 15.6834 17.2929 15.2929L20.5858 12L17.2929 8.70711C16.9024 8.31658 16.9024 7.68342 17.2929 7.29289Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+Code2Icon.displayName = "Code2Icon"
diff --git a/components/tiptap-icons/corner-down-left-icon.tsx b/components/tiptap-icons/corner-down-left-icon.tsx
new file mode 100644
index 0000000..a739cca
--- /dev/null
+++ b/components/tiptap-icons/corner-down-left-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+export const CornerDownLeftIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M21 4C21 3.44772 20.5523 3 20 3C19.4477 3 19 3.44772 19 4V11C19 11.7956 18.6839 12.5587 18.1213 13.1213C17.5587 13.6839 16.7956 14 16 14H6.41421L9.70711 10.7071C10.0976 10.3166 10.0976 9.68342 9.70711 9.29289C9.31658 8.90237 8.68342 8.90237 8.29289 9.29289L3.29289 14.2929C2.90237 14.6834 2.90237 15.3166 3.29289 15.7071L8.29289 20.7071C8.68342 21.0976 9.31658 21.0976 9.70711 20.7071C10.0976 20.3166 10.0976 19.6834 9.70711 19.2929L6.41421 16H16C17.3261 16 18.5979 15.4732 19.5355 14.5355C20.4732 13.5979 21 12.3261 21 11V4Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+CornerDownLeftIcon.displayName = "CornerDownLeftIcon"
diff --git a/components/tiptap-icons/external-link-icon.tsx b/components/tiptap-icons/external-link-icon.tsx
new file mode 100644
index 0000000..cfe92b4
--- /dev/null
+++ b/components/tiptap-icons/external-link-icon.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+export const ExternalLinkIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M14 3C14 2.44772 14.4477 2 15 2H21C21.5523 2 22 2.44772 22 3V9C22 9.55228 21.5523 10 21 10C20.4477 10 20 9.55228 20 9V5.41421L10.7071 14.7071C10.3166 15.0976 9.68342 15.0976 9.29289 14.7071C8.90237 14.3166 8.90237 13.6834 9.29289 13.2929L18.5858 4H15C14.4477 4 14 3.55228 14 3Z"
+          fill="currentColor"
+        />
+        <path
+          d="M4.29289 7.29289C4.48043 7.10536 4.73478 7 5 7H11C11.5523 7 12 6.55228 12 6C12 5.44772 11.5523 5 11 5H5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V19C2 19.7957 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H16C16.7957 22 17.5587 21.6839 18.1213 21.1213C18.6839 20.5587 19 19.7957 19 19V13C19 12.4477 18.5523 12 18 12C17.4477 12 17 12.4477 17 13V19C17 19.2652 16.8946 19.5196 16.7071 19.7071C16.5196 19.8946 16.2652 20 16 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V8C4 7.73478 4.10536 7.48043 4.29289 7.29289Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+ExternalLinkIcon.displayName = "ExternalLinkIcon"
diff --git a/components/tiptap-icons/heading-five-icon.tsx b/components/tiptap-icons/heading-five-icon.tsx
new file mode 100644
index 0000000..c8e5403
--- /dev/null
+++ b/components/tiptap-icons/heading-five-icon.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+export const HeadingFiveIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M5 6C5 5.44772 4.55228 5 4 5C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V13H11V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6V11H5V6Z"
+          fill="currentColor"
+        />
+        <path
+          d="M16 10C16 9.44772 16.4477 9 17 9H21C21.5523 9 22 9.44772 22 10C22 10.5523 21.5523 11 21 11H18V12H18.3C20.2754 12 22 13.4739 22 15.5C22 17.5261 20.2754 19 18.3 19C17.6457 19 17.0925 18.8643 16.5528 18.5944C16.0588 18.3474 15.8586 17.7468 16.1055 17.2528C16.3525 16.7588 16.9532 16.5586 17.4472 16.8056C17.7074 16.9357 17.9542 17 18.3 17C19.3246 17 20 16.2739 20 15.5C20 14.7261 19.3246 14 18.3 14H17C16.4477 14 16 13.5523 16 13L16 12.9928V10Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+HeadingFiveIcon.displayName = "HeadingFiveIcon"
diff --git a/components/tiptap-icons/heading-four-icon.tsx b/components/tiptap-icons/heading-four-icon.tsx
new file mode 100644
index 0000000..41e004e
--- /dev/null
+++ b/components/tiptap-icons/heading-four-icon.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+export const HeadingFourIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M4 5C4.55228 5 5 5.44772 5 6V11H11V6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6V18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18V13H5V18C5 18.5523 4.55228 19 4 19C3.44772 19 3 18.5523 3 18V6C3 5.44772 3.44772 5 4 5Z"
+          fill="currentColor"
+        />
+        <path
+          d="M17 9C17.5523 9 18 9.44772 18 10V13H20V10C20 9.44772 20.4477 9 21 9C21.5523 9 22 9.44772 22 10V18C22 18.5523 21.5523 19 21 19C20.4477 19 20 18.5523 20 18V15H17C16.4477 15 16 14.5523 16 14V10C16 9.44772 16.4477 9 17 9Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+HeadingFourIcon.displayName = "HeadingFourIcon"
diff --git a/components/tiptap-icons/heading-icon.tsx b/components/tiptap-icons/heading-icon.tsx
new file mode 100644
index 0000000..8c727de
--- /dev/null
+++ b/components/tiptap-icons/heading-icon.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+export const HeadingIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M6 3C6.55228 3 7 3.44772 7 4V11H17V4C17 3.44772 17.4477 3 18 3C18.5523 3 19 3.44772 19 4V20C19 20.5523 18.5523 21 18 21C17.4477 21 17 20.5523 17 20V13H7V20C7 20.5523 6.55228 21 6 21C5.44772 21 5 20.5523 5 20V4C5 3.44772 5.44772 3 6 3Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+HeadingIcon.displayName = "HeadingIcon"
diff --git a/components/tiptap-icons/heading-one-icon.tsx b/components/tiptap-icons/heading-one-icon.tsx
new file mode 100644
index 0000000..4deddde
--- /dev/null
+++ b/components/tiptap-icons/heading-one-icon.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+export const HeadingOneIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M5 6C5 5.44772 4.55228 5 4 5C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V13H11V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6V11H5V6Z"
+          fill="currentColor"
+        />
+        <path
+          d="M21.0001 10C21.0001 9.63121 20.7971 9.29235 20.472 9.11833C20.1468 8.94431 19.7523 8.96338 19.4454 9.16795L16.4454 11.168C15.9859 11.4743 15.8617 12.0952 16.1681 12.5547C16.4744 13.0142 17.0953 13.1384 17.5548 12.8321L19.0001 11.8685V18C19.0001 18.5523 19.4478 19 20.0001 19C20.5524 19 21.0001 18.5523 21.0001 18V10Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+HeadingOneIcon.displayName = "HeadingOneIcon"
diff --git a/components/tiptap-icons/heading-six-icon.tsx b/components/tiptap-icons/heading-six-icon.tsx
new file mode 100644
index 0000000..d38c877
--- /dev/null
+++ b/components/tiptap-icons/heading-six-icon.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+
+export const HeadingSixIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M5 6C5 5.44772 4.55228 5 4 5C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V13H11V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6V11H5V6Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M20.7071 9.29289C21.0976 9.68342 21.0976 10.3166 20.7071 10.7071C19.8392 11.575 19.2179 12.2949 18.7889 13.0073C18.8587 13.0025 18.929 13 19 13C20.6569 13 22 14.3431 22 16C22 17.6569 20.6569 19 19 19C17.3431 19 16 17.6569 16 16C16 14.6007 16.2837 13.4368 16.8676 12.3419C17.4384 11.2717 18.2728 10.3129 19.2929 9.29289C19.6834 8.90237 20.3166 8.90237 20.7071 9.29289ZM19 17C18.4477 17 18 16.5523 18 16C18 15.4477 18.4477 15 19 15C19.5523 15 20 15.4477 20 16C20 16.5523 19.5523 17 19 17Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+HeadingSixIcon.displayName = "HeadingSixIcon"
diff --git a/components/tiptap-icons/heading-three-icon.tsx b/components/tiptap-icons/heading-three-icon.tsx
new file mode 100644
index 0000000..17db21c
--- /dev/null
+++ b/components/tiptap-icons/heading-three-icon.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+
+export const HeadingThreeIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M4 5C4.55228 5 5 5.44772 5 6V11H11V6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6V18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18V13H5V18C5 18.5523 4.55228 19 4 19C3.44772 19 3 18.5523 3 18V6C3 5.44772 3.44772 5 4 5Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M19.4608 11.2169C19.1135 11.0531 18.5876 11.0204 18.0069 11.3619C17.5309 11.642 16.918 11.4831 16.638 11.007C16.358 10.531 16.5169 9.91809 16.9929 9.63807C18.1123 8.97962 19.3364 8.94691 20.314 9.40808C21.2839 9.86558 21.9999 10.818 21.9999 12C21.9999 12.7957 21.6838 13.5587 21.1212 14.1213C20.5586 14.6839 19.7956 15 18.9999 15C18.4476 15 17.9999 14.5523 17.9999 14C17.9999 13.4477 18.4476 13 18.9999 13C19.2651 13 19.5195 12.8947 19.707 12.7071C19.8946 12.5196 19.9999 12.2652 19.9999 12C19.9999 11.6821 19.8159 11.3844 19.4608 11.2169Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M18.0001 14C18.0001 13.4477 18.4478 13 19.0001 13C19.7957 13 20.5588 13.3161 21.1214 13.8787C21.684 14.4413 22.0001 15.2043 22.0001 16C22.0001 17.2853 21.2767 18.3971 20.1604 18.8994C19.0257 19.41 17.642 19.2315 16.4001 18.3C15.9582 17.9686 15.8687 17.3418 16.2001 16.9C16.5314 16.4582 17.1582 16.3686 17.6001 16.7C18.3581 17.2685 18.9744 17.24 19.3397 17.0756C19.7234 16.9029 20.0001 16.5147 20.0001 16C20.0001 15.7348 19.8947 15.4804 19.7072 15.2929C19.5196 15.1054 19.2653 15 19.0001 15C18.4478 15 18.0001 14.5523 18.0001 14Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+HeadingThreeIcon.displayName = "HeadingThreeIcon"
diff --git a/components/tiptap-icons/heading-two-icon.tsx b/components/tiptap-icons/heading-two-icon.tsx
new file mode 100644
index 0000000..3b3c727
--- /dev/null
+++ b/components/tiptap-icons/heading-two-icon.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+export const HeadingTwoIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M5 6C5 5.44772 4.55228 5 4 5C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V13H11V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6V11H5V6Z"
+          fill="currentColor"
+        />
+        <path
+          d="M22.0001 12C22.0001 10.7611 21.1663 9.79297 20.0663 9.42632C18.9547 9.05578 17.6171 9.28724 16.4001 10.2C15.9582 10.5314 15.8687 11.1582 16.2001 11.6C16.5314 12.0418 17.1582 12.1314 17.6001 11.8C18.383 11.2128 19.0455 11.1942 19.4338 11.3237C19.8339 11.457 20.0001 11.7389 20.0001 12C20.0001 12.4839 19.8554 12.7379 19.6537 12.9481C19.4275 13.1837 19.1378 13.363 18.7055 13.6307C18.6313 13.6767 18.553 13.7252 18.4701 13.777C17.9572 14.0975 17.3128 14.5261 16.8163 15.2087C16.3007 15.9177 16.0001 16.8183 16.0001 18C16.0001 18.5523 16.4478 19 17.0001 19H21.0001C21.5523 19 22.0001 18.5523 22.0001 18C22.0001 17.4477 21.5523 17 21.0001 17H18.131C18.21 16.742 18.3176 16.5448 18.4338 16.385C18.6873 16.0364 19.0429 15.7775 19.5301 15.473C19.5898 15.4357 19.6536 15.3966 19.7205 15.3556C20.139 15.0992 20.6783 14.7687 21.0964 14.3332C21.6447 13.7621 22.0001 13.0161 22.0001 12Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+HeadingTwoIcon.displayName = "HeadingTwoIcon"
diff --git a/components/tiptap-icons/highlighter-icon.tsx b/components/tiptap-icons/highlighter-icon.tsx
new file mode 100644
index 0000000..edc5a67
--- /dev/null
+++ b/components/tiptap-icons/highlighter-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+export const HighlighterIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14.7072 4.70711C15.0977 4.31658 15.0977 3.68342 14.7072 3.29289C14.3167 2.90237 13.6835 2.90237 13.293 3.29289L8.69294 7.89286L8.68594 7.9C8.13626 8.46079 7.82837 9.21474 7.82837 10C7.82837 10.2306 7.85491 10.4584 7.90631 10.6795L2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17V20C2 20.5523 2.44772 21 3 21H12C12.2652 21 12.5196 20.8946 12.7071 20.7071L15.3205 18.0937C15.5416 18.1452 15.7695 18.1717 16.0001 18.1717C16.7853 18.1717 17.5393 17.8639 18.1001 17.3142L22.7072 12.7071C23.0977 12.3166 23.0977 11.6834 22.7072 11.2929C22.3167 10.9024 21.6835 10.9024 21.293 11.2929L16.6971 15.8887C16.5105 16.0702 16.2605 16.1717 16.0001 16.1717C15.7397 16.1717 15.4897 16.0702 15.303 15.8887L10.1113 10.697C9.92992 10.5104 9.82837 10.2604 9.82837 10C9.82837 9.73963 9.92992 9.48958 10.1113 9.30297L14.7072 4.70711ZM13.5858 17L9.00004 12.4142L4 17.4142V19H11.5858L13.5858 17Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+HighlighterIcon.displayName = "HighlighterIcon"
diff --git a/components/tiptap-icons/image-plus-icon.tsx b/components/tiptap-icons/image-plus-icon.tsx
new file mode 100644
index 0000000..5184d3d
--- /dev/null
+++ b/components/tiptap-icons/image-plus-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+export const ImagePlusIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M20 2C20 1.44772 19.5523 1 19 1C18.4477 1 18 1.44772 18 2V4H16C15.4477 4 15 4.44772 15 5C15 5.55228 15.4477 6 16 6H18V8C18 8.55228 18.4477 9 19 9C19.5523 9 20 8.55228 20 8V6H22C22.5523 6 23 5.55228 23 5C23 4.44772 22.5523 4 22 4H20V2ZM5 4C4.73478 4 4.48043 4.10536 4.29289 4.29289C4.10536 4.48043 4 4.73478 4 5V19C4 19.2652 4.10536 19.5196 4.29289 19.7071C4.48043 19.8946 4.73478 20 5 20H5.58579L14.379 11.2068C14.9416 10.6444 15.7045 10.3284 16.5 10.3284C17.2955 10.3284 18.0584 10.6444 18.621 11.2068L20 12.5858V12C20 11.4477 20.4477 11 21 11C21.5523 11 22 11.4477 22 12V14.998C22 14.9994 22 15.0007 22 15.002V19C22 19.7957 21.6839 20.5587 21.1213 21.1213C20.5587 21.6839 19.7957 22 19 22H6.00219C6.00073 22 5.99927 22 5.99781 22H5C4.20435 22 3.44129 21.6839 2.87868 21.1213C2.31607 20.5587 2 19.7957 2 19V5C2 4.20435 2.31607 3.44129 2.87868 2.87868C3.44129 2.31607 4.20435 2 5 2H12C12.5523 2 13 2.44772 13 3C13 3.55228 12.5523 4 12 4H5ZM8.41422 20H19C19.2652 20 19.5196 19.8946 19.7071 19.7071C19.8946 19.5196 20 19.2652 20 19V15.4142L17.207 12.6212C17.0195 12.4338 16.7651 12.3284 16.5 12.3284C16.2349 12.3284 15.9806 12.4337 15.7931 12.6211L8.41422 20ZM6.87868 6.87868C7.44129 6.31607 8.20435 6 9 6C9.79565 6 10.5587 6.31607 11.1213 6.87868C11.6839 7.44129 12 8.20435 12 9C12 9.79565 11.6839 10.5587 11.1213 11.1213C10.5587 11.6839 9.79565 12 9 12C8.20435 12 7.44129 11.6839 6.87868 11.1213C6.31607 10.5587 6 9.79565 6 9C6 8.20435 6.31607 7.44129 6.87868 6.87868ZM9 8C8.73478 8 8.48043 8.10536 8.29289 8.29289C8.10536 8.48043 8 8.73478 8 9C8 9.26522 8.10536 9.51957 8.29289 9.70711C8.48043 9.89464 8.73478 10 9 10C9.26522 10 9.51957 9.89464 9.70711 9.70711C9.89464 9.51957 10 9.26522 10 9C10 8.73478 9.89464 8.48043 9.70711 8.29289C9.51957 8.10536 9.26522 8 9 8Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+ImagePlusIcon.displayName = "ImagePlusIcon"
diff --git a/components/tiptap-icons/italic-icon.tsx b/components/tiptap-icons/italic-icon.tsx
new file mode 100644
index 0000000..7d7a79e
--- /dev/null
+++ b/components/tiptap-icons/italic-icon.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+export const ItalicIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M15.0222 3H19C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H15.693L10.443 19H14C14.5523 19 15 19.4477 15 20C15 20.5523 14.5523 21 14 21H9.02418C9.00802 21.0004 8.99181 21.0004 8.97557 21H5C4.44772 21 4 20.5523 4 20C4 19.4477 4.44772 19 5 19H8.30704L13.557 5H10C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3H14.9782C14.9928 2.99968 15.0075 2.99967 15.0222 3Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+ItalicIcon.displayName = "ItalicIcon"
diff --git a/components/tiptap-icons/link-icon.tsx b/components/tiptap-icons/link-icon.tsx
new file mode 100644
index 0000000..f653770
--- /dev/null
+++ b/components/tiptap-icons/link-icon.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+export const LinkIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M16.9958 1.06669C15.4226 1.05302 13.907 1.65779 12.7753 2.75074L12.765 2.76086L11.045 4.47086C10.6534 4.86024 10.6515 5.49341 11.0409 5.88507C11.4303 6.27673 12.0634 6.27858 12.4551 5.88919L14.1697 4.18456C14.9236 3.45893 15.9319 3.05752 16.9784 3.06662C18.0272 3.07573 19.0304 3.49641 19.772 4.23804C20.5137 4.97967 20.9344 5.98292 20.9435 7.03171C20.9526 8.07776 20.5515 9.08563 19.8265 9.83941L16.833 12.8329C16.4274 13.2386 15.9393 13.5524 15.4019 13.7529C14.8645 13.9533 14.2903 14.0359 13.7181 13.9949C13.146 13.9539 12.5894 13.7904 12.0861 13.5154C11.5827 13.2404 11.1444 12.8604 10.8008 12.401C10.47 11.9588 9.84333 11.8685 9.40108 12.1993C8.95883 12.5301 8.86849 13.1568 9.1993 13.599C9.71464 14.288 10.3721 14.858 11.1272 15.2705C11.8822 15.683 12.7171 15.9283 13.5753 15.9898C14.4334 16.0513 15.2948 15.9274 16.1009 15.6267C16.907 15.326 17.639 14.8555 18.2473 14.247L21.2472 11.2471L21.2593 11.2347C22.3523 10.1031 22.9571 8.58751 22.9434 7.01433C22.9297 5.44115 22.2987 3.93628 21.1863 2.82383C20.0738 1.71138 18.5689 1.08036 16.9958 1.06669Z"
+          fill="currentColor"
+        />
+        <path
+          d="M10.4247 8.0102C9.56657 7.94874 8.70522 8.07256 7.89911 8.37326C7.09305 8.67395 6.36096 9.14458 5.75272 9.753L2.75285 12.7529L2.74067 12.7653C1.64772 13.8969 1.04295 15.4125 1.05662 16.9857C1.07029 18.5589 1.70131 20.0637 2.81376 21.1762C3.9262 22.2886 5.43108 22.9196 7.00426 22.9333C8.57744 22.947 10.0931 22.3422 11.2247 21.2493L11.2371 21.2371L12.9471 19.5271C13.3376 19.1366 13.3376 18.5034 12.9471 18.1129C12.5565 17.7223 11.9234 17.7223 11.5328 18.1129L9.82932 19.8164C9.07555 20.5414 8.06768 20.9425 7.02164 20.9334C5.97285 20.9243 4.9696 20.5036 4.22797 19.762C3.48634 19.0203 3.06566 18.0171 3.05655 16.9683C3.04746 15.9222 3.44851 14.9144 4.17355 14.1606L7.16719 11.167C7.5727 10.7613 8.06071 10.4476 8.59811 10.2471C9.13552 10.0467 9.70976 9.96412 10.2819 10.0051C10.854 10.0461 11.4106 10.2096 11.9139 10.4846C12.4173 10.7596 12.8556 11.1397 13.1992 11.599C13.53 12.0412 14.1567 12.1316 14.5989 11.8007C15.0412 11.4699 15.1315 10.8433 14.8007 10.401C14.2854 9.71205 13.6279 9.14198 12.8729 8.72948C12.1178 8.31697 11.2829 8.07166 10.4247 8.0102Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+LinkIcon.displayName = "LinkIcon"
diff --git a/components/tiptap-icons/list-icon.tsx b/components/tiptap-icons/list-icon.tsx
new file mode 100644
index 0000000..046830c
--- /dev/null
+++ b/components/tiptap-icons/list-icon.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+
+export const ListIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7 6C7 5.44772 7.44772 5 8 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H8C7.44772 7 7 6.55228 7 6Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7 12C7 11.4477 7.44772 11 8 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H8C7.44772 13 7 12.5523 7 12Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7 18C7 17.4477 7.44772 17 8 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H8C7.44772 19 7 18.5523 7 18Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 6C2 5.44772 2.44772 5 3 5H3.01C3.56228 5 4.01 5.44772 4.01 6C4.01 6.55228 3.56228 7 3.01 7H3C2.44772 7 2 6.55228 2 6Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 12C2 11.4477 2.44772 11 3 11H3.01C3.56228 11 4.01 11.4477 4.01 12C4.01 12.5523 3.56228 13 3.01 13H3C2.44772 13 2 12.5523 2 12Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 18C2 17.4477 2.44772 17 3 17H3.01C3.56228 17 4.01 17.4477 4.01 18C4.01 18.5523 3.56228 19 3.01 19H3C2.44772 19 2 18.5523 2 18Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+ListIcon.displayName = "ListIcon"
diff --git a/components/tiptap-icons/list-ordered-icon.tsx b/components/tiptap-icons/list-ordered-icon.tsx
new file mode 100644
index 0000000..ca153d1
--- /dev/null
+++ b/components/tiptap-icons/list-ordered-icon.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+
+export const ListOrderedIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9 6C9 5.44772 9.44772 5 10 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H10C9.44772 7 9 6.55228 9 6Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9 12C9 11.4477 9.44772 11 10 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H10C9.44772 13 9 12.5523 9 12Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9 18C9 17.4477 9.44772 17 10 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H10C9.44772 19 9 18.5523 9 18Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3 6C3 5.44772 3.44772 5 4 5H5C5.55228 5 6 5.44772 6 6V10C6 10.5523 5.55228 11 5 11C4.44772 11 4 10.5523 4 10V7C3.44772 7 3 6.55228 3 6Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3 10C3 9.44772 3.44772 9 4 9H6C6.55228 9 7 9.44772 7 10C7 10.5523 6.55228 11 6 11H4C3.44772 11 3 10.5523 3 10Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.82219 13.0431C6.54543 13.4047 6.99997 14.1319 6.99997 15C6.99997 15.5763 6.71806 16.0426 6.48747 16.35C6.31395 16.5814 6.1052 16.8044 5.91309 17H5.99997C6.55226 17 6.99997 17.4477 6.99997 18C6.99997 18.5523 6.55226 19 5.99997 19H3.99997C3.44769 19 2.99997 18.5523 2.99997 18C2.99997 17.4237 3.28189 16.9575 3.51247 16.65C3.74323 16.3424 4.03626 16.0494 4.26965 15.8161C4.27745 15.8083 4.2852 15.8006 4.29287 15.7929C4.55594 15.5298 4.75095 15.3321 4.88748 15.15C4.96287 15.0495 4.99021 14.9922 4.99911 14.9714C4.99535 14.9112 4.9803 14.882 4.9739 14.8715C4.96613 14.8588 4.95382 14.845 4.92776 14.8319C4.87723 14.8067 4.71156 14.7623 4.44719 14.8944C3.95321 15.1414 3.35254 14.9412 3.10555 14.4472C2.85856 13.9533 3.05878 13.3526 3.55276 13.1056C4.28839 12.7378 5.12272 12.6934 5.82219 13.0431Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+ListOrderedIcon.displayName = "ListOrderedIcon"
diff --git a/components/tiptap-icons/list-todo-icon.tsx b/components/tiptap-icons/list-todo-icon.tsx
new file mode 100644
index 0000000..61c3d61
--- /dev/null
+++ b/components/tiptap-icons/list-todo-icon.tsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+
+export const ListTodoIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2 6C2 4.89543 2.89543 4 4 4H8C9.10457 4 10 4.89543 10 6V10C10 11.1046 9.10457 12 8 12H4C2.89543 12 2 11.1046 2 10V6ZM8 6H4V10H8V6Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.70711 14.2929C10.0976 14.6834 10.0976 15.3166 9.70711 15.7071L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071L2.29289 17.7071C1.90237 17.3166 1.90237 16.6834 2.29289 16.2929C2.68342 15.9024 3.31658 15.9024 3.70711 16.2929L5 17.5858L8.29289 14.2929C8.68342 13.9024 9.31658 13.9024 9.70711 14.2929Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 6C12 5.44772 12.4477 5 13 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H13C12.4477 7 12 6.55228 12 6Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 12C12 11.4477 12.4477 11 13 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H13C12.4477 13 12 12.5523 12 12Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 18C12 17.4477 12.4477 17 13 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H13C12.4477 19 12 18.5523 12 18Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+ListTodoIcon.displayName = "ListTodoIcon"
diff --git a/components/tiptap-icons/moon-star-icon.tsx b/components/tiptap-icons/moon-star-icon.tsx
new file mode 100644
index 0000000..a49f02c
--- /dev/null
+++ b/components/tiptap-icons/moon-star-icon.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+
+export const MoonStarIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 11.5955 21.7564 11.2309 21.3827 11.0761C21.009 10.9213 20.5789 11.0069 20.2929 11.2929C19.287 12.2988 17.9226 12.864 16.5 12.864C15.0774 12.864 13.713 12.2988 12.7071 11.2929C11.7012 10.287 11.136 8.92261 11.136 7.5C11.136 6.07739 11.7012 4.71304 12.7071 3.70711C12.9931 3.42111 13.0787 2.99099 12.9239 2.61732C12.7691 2.24364 12.4045 2 12 2ZM7.55544 5.34824C8.27036 4.87055 9.05353 4.51389 9.87357 4.28778C9.39271 5.27979 9.13604 6.37666 9.13604 7.5C9.13604 9.45304 9.91189 11.3261 11.2929 12.7071C12.6739 14.0881 14.547 14.864 16.5 14.864C17.6233 14.864 18.7202 14.6073 19.7122 14.1264C19.4861 14.9465 19.1295 15.7296 18.6518 16.4446C17.7727 17.7602 16.5233 18.7855 15.0615 19.391C13.5997 19.9965 11.9911 20.155 10.4393 19.8463C8.88743 19.5376 7.46197 18.7757 6.34315 17.6569C5.22433 16.538 4.4624 15.1126 4.15372 13.5607C3.84504 12.0089 4.00347 10.4003 4.60897 8.93853C5.21447 7.47672 6.23985 6.22729 7.55544 5.34824Z"
+          fill="currentColor"
+        />
+        <path
+          d="M19 2C19.5523 2 20 2.44772 20 3V4H21C21.5523 4 22 4.44772 22 5C22 5.55228 21.5523 6 21 6H20V7C20 7.55228 19.5523 8 19 8C18.4477 8 18 7.55228 18 7V6H17C16.4477 6 16 5.55228 16 5C16 4.44772 16.4477 4 17 4H18V3C18 2.44772 18.4477 2 19 2Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+MoonStarIcon.displayName = "MoonStarIcon"
diff --git a/components/tiptap-icons/redo2-icon.tsx b/components/tiptap-icons/redo2-icon.tsx
new file mode 100644
index 0000000..2b7760f
--- /dev/null
+++ b/components/tiptap-icons/redo2-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+export const Redo2Icon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M15.7071 2.29289C15.3166 1.90237 14.6834 1.90237 14.2929 2.29289C13.9024 2.68342 13.9024 3.31658 14.2929 3.70711L17.5858 7H9.5C7.77609 7 6.12279 7.68482 4.90381 8.90381C3.68482 10.1228 3 11.7761 3 13.5C3 14.3536 3.16813 15.1988 3.49478 15.9874C3.82144 16.7761 4.30023 17.4926 4.90381 18.0962C6.12279 19.3152 7.77609 20 9.5 20H13C13.5523 20 14 19.5523 14 19C14 18.4477 13.5523 18 13 18H9.5C8.30653 18 7.16193 17.5259 6.31802 16.682C5.90016 16.2641 5.56869 15.768 5.34254 15.2221C5.1164 14.6761 5 14.0909 5 13.5C5 12.3065 5.47411 11.1619 6.31802 10.318C7.16193 9.47411 8.30653 9 9.5 9H17.5858L14.2929 12.2929C13.9024 12.6834 13.9024 13.3166 14.2929 13.7071C14.6834 14.0976 15.3166 14.0976 15.7071 13.7071L20.7071 8.70711C21.0976 8.31658 21.0976 7.68342 20.7071 7.29289L15.7071 2.29289Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+Redo2Icon.displayName = "Redo2Icon"
diff --git a/components/tiptap-icons/strike-icon.tsx b/components/tiptap-icons/strike-icon.tsx
new file mode 100644
index 0000000..6616929
--- /dev/null
+++ b/components/tiptap-icons/strike-icon.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+export const StrikeIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M9.00039 3H16.0001C16.5524 3 17.0001 3.44772 17.0001 4C17.0001 4.55229 16.5524 5 16.0001 5H9.00011C8.68006 4.99983 8.36412 5.07648 8.07983 5.22349C7.79555 5.37051 7.55069 5.5836 7.36585 5.84487C7.181 6.10614 7.06155 6.40796 7.01754 6.72497C6.97352 7.04198 7.00623 7.36492 7.11292 7.66667C7.29701 8.18737 7.02414 8.75872 6.50344 8.94281C5.98274 9.1269 5.4114 8.85403 5.2273 8.33333C5.01393 7.72984 4.94851 7.08396 5.03654 6.44994C5.12456 5.81592 5.36346 5.21229 5.73316 4.68974C6.10285 4.1672 6.59256 3.74101 7.16113 3.44698C7.72955 3.15303 8.36047 2.99975 9.00039 3Z"
+          fill="currentColor"
+        />
+        <path
+          d="M18 13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H14C14.7956 13 15.5587 13.3161 16.1213 13.8787C16.6839 14.4413 17 15.2044 17 16C17 16.7956 16.6839 17.5587 16.1213 18.1213C15.5587 18.6839 14.7956 19 14 19H6C5.44772 19 5 19.4477 5 20C5 20.5523 5.44772 21 6 21H14C15.3261 21 16.5979 20.4732 17.5355 19.5355C18.4732 18.5979 19 17.3261 19 16C19 14.9119 18.6453 13.8604 18 13Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+StrikeIcon.displayName = "StrikeIcon"
diff --git a/components/tiptap-icons/subscript-icon.tsx b/components/tiptap-icons/subscript-icon.tsx
new file mode 100644
index 0000000..5d1d11d
--- /dev/null
+++ b/components/tiptap-icons/subscript-icon.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+
+export const SubscriptIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.29289 7.29289C3.68342 6.90237 4.31658 6.90237 4.70711 7.29289L12.7071 15.2929C13.0976 15.6834 13.0976 16.3166 12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L3.29289 8.70711C2.90237 8.31658 2.90237 7.68342 3.29289 7.29289Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.7071 7.29289C13.0976 7.68342 13.0976 8.31658 12.7071 8.70711L4.70711 16.7071C4.31658 17.0976 3.68342 17.0976 3.29289 16.7071C2.90237 16.3166 2.90237 15.6834 3.29289 15.2929L11.2929 7.29289C11.6834 6.90237 12.3166 6.90237 12.7071 7.29289Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.4079 14.3995C18.0284 14.0487 18.7506 13.9217 19.4536 14.0397C20.1566 14.1578 20.7977 14.5138 21.2696 15.0481L21.2779 15.0574L21.2778 15.0575C21.7439 15.5988 22 16.2903 22 17C22 18.0823 21.3962 18.8401 20.7744 19.3404C20.194 19.8073 19.4858 20.141 18.9828 20.378C18.9638 20.387 18.9451 20.3958 18.9266 20.4045C18.4473 20.6306 18.2804 20.7817 18.1922 20.918C18.1773 20.9412 18.1619 20.9681 18.1467 21H21C21.5523 21 22 21.4477 22 22C22 22.5523 21.5523 23 21 23H17C16.4477 23 16 22.5523 16 22C16 21.1708 16.1176 20.4431 16.5128 19.832C16.9096 19.2184 17.4928 18.8695 18.0734 18.5956C18.6279 18.334 19.138 18.0901 19.5207 17.7821C19.8838 17.49 20 17.2477 20 17C20 16.7718 19.9176 16.5452 19.7663 16.3672C19.5983 16.1792 19.3712 16.0539 19.1224 16.0121C18.8722 15.9701 18.6152 16.015 18.3942 16.1394C18.1794 16.2628 18.0205 16.4549 17.9422 16.675C17.7572 17.1954 17.1854 17.4673 16.665 17.2822C16.1446 17.0972 15.8728 16.5254 16.0578 16.005C16.2993 15.3259 16.7797 14.7584 17.4039 14.4018L17.4079 14.3995L17.4079 14.3995Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+SubscriptIcon.displayName = "SubscriptIcon"
diff --git a/components/tiptap-icons/sun-icon.tsx b/components/tiptap-icons/sun-icon.tsx
new file mode 100644
index 0000000..25c6cb4
--- /dev/null
+++ b/components/tiptap-icons/sun-icon.tsx
@@ -0,0 +1,58 @@
+import * as React from "react"
+
+export const SunIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M12 1C12.5523 1 13 1.44772 13 2V4C13 4.55228 12.5523 5 12 5C11.4477 5 11 4.55228 11 4V2C11 1.44772 11.4477 1 12 1Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12ZM12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9Z"
+          fill="currentColor"
+        />
+        <path
+          d="M13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V20Z"
+          fill="currentColor"
+        />
+        <path
+          d="M4.22282 4.22289C4.61335 3.83236 5.24651 3.83236 5.63704 4.22289L7.04704 5.63289C7.43756 6.02341 7.43756 6.65658 7.04704 7.0471C6.65651 7.43762 6.02335 7.43762 5.63283 7.0471L4.22282 5.6371C3.8323 5.24658 3.8323 4.61341 4.22282 4.22289Z"
+          fill="currentColor"
+        />
+        <path
+          d="M18.367 16.9529C17.9765 16.5623 17.3433 16.5623 16.9528 16.9529C16.5623 17.3434 16.5623 17.9766 16.9528 18.3671L18.3628 19.7771C18.7533 20.1676 19.3865 20.1676 19.777 19.7771C20.1675 19.3866 20.1675 18.7534 19.777 18.3629L18.367 16.9529Z"
+          fill="currentColor"
+        />
+        <path
+          d="M1 12C1 11.4477 1.44772 11 2 11H4C4.55228 11 5 11.4477 5 12C5 12.5523 4.55228 13 4 13H2C1.44772 13 1 12.5523 1 12Z"
+          fill="currentColor"
+        />
+        <path
+          d="M20 11C19.4477 11 19 11.4477 19 12C19 12.5523 19.4477 13 20 13H22C22.5523 13 23 12.5523 23 12C23 11.4477 22.5523 11 22 11H20Z"
+          fill="currentColor"
+        />
+        <path
+          d="M7.04704 16.9529C7.43756 17.3434 7.43756 17.9766 7.04704 18.3671L5.63704 19.7771C5.24651 20.1676 4.61335 20.1676 4.22282 19.7771C3.8323 19.3866 3.8323 18.7534 4.22283 18.3629L5.63283 16.9529C6.02335 16.5623 6.65651 16.5623 7.04704 16.9529Z"
+          fill="currentColor"
+        />
+        <path
+          d="M19.777 5.6371C20.1675 5.24657 20.1675 4.61341 19.777 4.22289C19.3865 3.83236 18.7533 3.83236 18.3628 4.22289L16.9528 5.63289C16.5623 6.02341 16.5623 6.65658 16.9528 7.0471C17.3433 7.43762 17.9765 7.43762 18.367 7.0471L19.777 5.6371Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+SunIcon.displayName = "SunIcon"
diff --git a/components/tiptap-icons/superscript-icon.tsx b/components/tiptap-icons/superscript-icon.tsx
new file mode 100644
index 0000000..fb95a62
--- /dev/null
+++ b/components/tiptap-icons/superscript-icon.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+
+export const SuperscriptIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.7071 7.29289C13.0976 7.68342 13.0976 8.31658 12.7071 8.70711L4.70711 16.7071C4.31658 17.0976 3.68342 17.0976 3.29289 16.7071C2.90237 16.3166 2.90237 15.6834 3.29289 15.2929L11.2929 7.29289C11.6834 6.90237 12.3166 6.90237 12.7071 7.29289Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.29289 7.29289C3.68342 6.90237 4.31658 6.90237 4.70711 7.29289L12.7071 15.2929C13.0976 15.6834 13.0976 16.3166 12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L3.29289 8.70711C2.90237 8.31658 2.90237 7.68342 3.29289 7.29289Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.405 1.40657C18.0246 1.05456 18.7463 0.92634 19.4492 1.04344C20.1521 1.16054 20.7933 1.51583 21.2652 2.0497L21.2697 2.05469L21.2696 2.05471C21.7431 2.5975 22 3.28922 22 4.00203C22 5.08579 21.3952 5.84326 20.7727 6.34289C20.1966 6.80531 19.4941 7.13675 18.9941 7.37261C18.9714 7.38332 18.9491 7.39383 18.9273 7.40415C18.4487 7.63034 18.2814 7.78152 18.1927 7.91844C18.1778 7.94155 18.1625 7.96834 18.1473 8.00003H21C21.5523 8.00003 22 8.44774 22 9.00003C22 9.55231 21.5523 10 21 10H17C16.4477 10 16 9.55231 16 9.00003C16 8.17007 16.1183 7.44255 16.5138 6.83161C16.9107 6.21854 17.4934 5.86971 18.0728 5.59591C18.6281 5.33347 19.1376 5.09075 19.5208 4.78316C19.8838 4.49179 20 4.25026 20 4.00203C20 3.77192 19.9178 3.54865 19.7646 3.37182C19.5968 3.18324 19.3696 3.05774 19.1205 3.01625C18.8705 2.97459 18.6137 3.02017 18.3933 3.14533C18.1762 3.26898 18.0191 3.45826 17.9406 3.67557C17.7531 4.19504 17.18 4.46414 16.6605 4.27662C16.141 4.0891 15.8719 3.51596 16.0594 2.99649C16.303 2.3219 16.7817 1.76125 17.4045 1.40689L17.405 1.40657Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+SuperscriptIcon.displayName = "SuperscriptIcon"
diff --git a/components/tiptap-icons/trash-icon.tsx b/components/tiptap-icons/trash-icon.tsx
new file mode 100644
index 0000000..d928994
--- /dev/null
+++ b/components/tiptap-icons/trash-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+export const TrashIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7 5V4C7 3.17477 7.40255 2.43324 7.91789 1.91789C8.43324 1.40255 9.17477 1 10 1H14C14.8252 1 15.5668 1.40255 16.0821 1.91789C16.5975 2.43324 17 3.17477 17 4V5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H20V20C20 20.8252 19.5975 21.5668 19.0821 22.0821C18.5668 22.5975 17.8252 23 17 23H7C6.17477 23 5.43324 22.5975 4.91789 22.0821C4.40255 21.5668 4 20.8252 4 20V7H3C2.44772 7 2 6.55228 2 6C2 5.44772 2.44772 5 3 5H7ZM9 4C9 3.82523 9.09745 3.56676 9.33211 3.33211C9.56676 3.09745 9.82523 3 10 3H14C14.1748 3 14.4332 3.09745 14.6679 3.33211C14.9025 3.56676 15 3.82523 15 4V5H9V4ZM6 7V20C6 20.1748 6.09745 20.4332 6.33211 20.6679C6.56676 20.9025 6.82523 21 7 21H17C17.1748 21 17.4332 20.9025 17.6679 20.6679C17.9025 20.4332 18 20.1748 18 20V7H6Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+TrashIcon.displayName = "TrashIcon"
diff --git a/components/tiptap-icons/underline-icon.tsx b/components/tiptap-icons/underline-icon.tsx
new file mode 100644
index 0000000..8563129
--- /dev/null
+++ b/components/tiptap-icons/underline-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+export const UnderlineIcon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7 4C7 3.44772 6.55228 3 6 3C5.44772 3 5 3.44772 5 4V10C5 11.8565 5.7375 13.637 7.05025 14.9497C8.36301 16.2625 10.1435 17 12 17C13.8565 17 15.637 16.2625 16.9497 14.9497C18.2625 13.637 19 11.8565 19 10V4C19 3.44772 18.5523 3 18 3C17.4477 3 17 3.44772 17 4V10C17 11.3261 16.4732 12.5979 15.5355 13.5355C14.5979 14.4732 13.3261 15 12 15C10.6739 15 9.40215 14.4732 8.46447 13.5355C7.52678 12.5979 7 11.3261 7 10V4ZM4 19C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19H4Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+UnderlineIcon.displayName = "UnderlineIcon"
diff --git a/components/tiptap-icons/undo2-icon.tsx b/components/tiptap-icons/undo2-icon.tsx
new file mode 100644
index 0000000..bef8d3d
--- /dev/null
+++ b/components/tiptap-icons/undo2-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+export const Undo2Icon = React.memo(
+  ({ className, ...props }: React.SVGProps<SVGSVGElement>) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.70711 3.70711C10.0976 3.31658 10.0976 2.68342 9.70711 2.29289C9.31658 1.90237 8.68342 1.90237 8.29289 2.29289L3.29289 7.29289C2.90237 7.68342 2.90237 8.31658 3.29289 8.70711L8.29289 13.7071C8.68342 14.0976 9.31658 14.0976 9.70711 13.7071C10.0976 13.3166 10.0976 12.6834 9.70711 12.2929L6.41421 9H14.5C15.0909 9 15.6761 9.1164 16.2221 9.34254C16.768 9.56869 17.2641 9.90016 17.682 10.318C18.0998 10.7359 18.4313 11.232 18.6575 11.7779C18.8836 12.3239 19 12.9091 19 13.5C19 14.0909 18.8836 14.6761 18.6575 15.2221C18.4313 15.768 18.0998 16.2641 17.682 16.682C17.2641 17.0998 16.768 17.4313 16.2221 17.6575C15.6761 17.8836 15.0909 18 14.5 18H11C10.4477 18 10 18.4477 10 19C10 19.5523 10.4477 20 11 20H14.5C15.3536 20 16.1988 19.8319 16.9874 19.5052C17.7761 19.1786 18.4926 18.6998 19.0962 18.0962C19.6998 17.4926 20.1786 16.7761 20.5052 15.9874C20.8319 15.1988 21 14.3536 21 13.5C21 12.6464 20.8319 11.8012 20.5052 11.0126C20.1786 10.2239 19.6998 9.50739 19.0962 8.90381C18.4926 8.30022 17.7761 7.82144 16.9874 7.49478C16.1988 7.16813 15.3536 7 14.5 7H6.41421L9.70711 3.70711Z"
+          fill="currentColor"
+        />
+      </svg>
+    )
+  }
+)
+
+Undo2Icon.displayName = "Undo2Icon"
diff --git a/components/tiptap-node/blockquote-node/blockquote-node.scss b/components/tiptap-node/blockquote-node/blockquote-node.scss
new file mode 100644
index 0000000..b49c5e1
--- /dev/null
+++ b/components/tiptap-node/blockquote-node/blockquote-node.scss
@@ -0,0 +1,37 @@
+.tiptap.ProseMirror {
+  --blockquote-bg-color: var(--tt-gray-light-900);
+
+  .dark & {
+    --blockquote-bg-color: var(--tt-gray-dark-900);
+  }
+}
+
+/* =====================
+     BLOCKQUOTE
+     ===================== */
+.tiptap.ProseMirror {
+  blockquote {
+    position: relative;
+    padding-left: 1em;
+    padding-top: 0.375em;
+    padding-bottom: 0.375em;
+    margin: 1.5rem 0;
+
+    p {
+      margin-top: 0;
+    }
+
+    &::before,
+    &.is-empty::before {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      top: 0;
+      height: 100%;
+      width: 0.25em;
+      background-color: var(--blockquote-bg-color);
+      content: "";
+      border-radius: 0;
+    }
+  }
+}
diff --git a/components/tiptap-node/code-block-node/code-block-node.scss b/components/tiptap-node/code-block-node/code-block-node.scss
new file mode 100644
index 0000000..d31b312
--- /dev/null
+++ b/components/tiptap-node/code-block-node/code-block-node.scss
@@ -0,0 +1,54 @@
+.tiptap.ProseMirror {
+  --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
+  --tt-inline-code-text-color: var(--tt-gray-light-a-700);
+  --tt-inline-code-border-color: var(--tt-gray-light-a-200);
+  --tt-codeblock-bg: var(--tt-gray-light-a-50);
+  --tt-codeblock-text: var(--tt-gray-light-a-800);
+  --tt-codeblock-border: var(--tt-gray-light-a-200);
+
+  .dark & {
+    --tt-inline-code-bg-color: var(--tt-gray-dark-a-100);
+    --tt-inline-code-text-color: var(--tt-gray-dark-a-700);
+    --tt-inline-code-border-color: var(--tt-gray-dark-a-200);
+    --tt-codeblock-bg: var(--tt-gray-dark-a-50);
+    --tt-codeblock-text: var(--tt-gray-dark-a-800);
+    --tt-codeblock-border: var(--tt-gray-dark-a-200);
+  }
+}
+
+/* =====================
+   CODE FORMATTING
+   ===================== */
+.tiptap.ProseMirror {
+  // Inline code
+  code {
+    background-color: var(--tt-inline-code-bg-color);
+    color: var(--tt-inline-code-text-color);
+    border: 1px solid var(--tt-inline-code-border-color);
+    font-family: "JetBrains Mono NL", monospace;
+    font-size: 0.875em;
+    line-height: 1.4;
+    border-radius: 6px/0.375rem;
+    padding: 0.1em 0.2em;
+  }
+
+  // Code blocks
+  pre {
+    background-color: var(--tt-codeblock-bg);
+    color: var(--tt-codeblock-text);
+    border: 1px solid var(--tt-codeblock-border);
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+    padding: 1em;
+    font-size: 1rem;
+    border-radius: 6px/0.375rem;
+
+    code {
+      background-color: transparent;
+      border: none;
+      border-radius: 0;
+      -webkit-text-fill-color: inherit;
+      color: inherit;
+    }
+  }
+}
diff --git a/components/tiptap-node/heading-node/heading-node.scss b/components/tiptap-node/heading-node/heading-node.scss
new file mode 100644
index 0000000..9bb9234
--- /dev/null
+++ b/components/tiptap-node/heading-node/heading-node.scss
@@ -0,0 +1,38 @@
+.tiptap.ProseMirror {
+  h1,
+  h2,
+  h3,
+  h4 {
+    position: relative;
+    color: inherit;
+    font-style: inherit;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h1 {
+    font-size: 1.5em;
+    font-weight: 700;
+    margin-top: 3em;
+  }
+
+  h2 {
+    font-size: 1.25em;
+    font-weight: 700;
+    margin-top: 2.5em;
+  }
+
+  h3 {
+    font-size: 1.125em;
+    font-weight: 600;
+    margin-top: 2em;
+  }
+
+  h4 {
+    font-size: 1em;
+    font-weight: 600;
+    margin-top: 2em;
+  }
+}
diff --git a/components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension.ts b/components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension.ts
new file mode 100644
index 0000000..de28208
--- /dev/null
+++ b/components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension.ts
@@ -0,0 +1,14 @@
+import { mergeAttributes } from "@tiptap/react"
+import TiptapHorizontalRule from "@tiptap/extension-horizontal-rule"
+
+export const HorizontalRule = TiptapHorizontalRule.extend({
+  renderHTML() {
+    return [
+      "div",
+      mergeAttributes(this.options.HTMLAttributes, { "data-type": this.name }),
+      ["hr"],
+    ]
+  },
+})
+
+export default HorizontalRule
diff --git a/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss b/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss
new file mode 100644
index 0000000..4626e65
--- /dev/null
+++ b/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss
@@ -0,0 +1,25 @@
+.tiptap.ProseMirror {
+  --horizontal-rule-color: var(--tt-gray-light-a-200);
+
+  .dark & {
+    --horizontal-rule-color: var(--tt-gray-dark-a-200);
+  }
+}
+
+/* =====================
+     HORIZONTAL RULE
+     ===================== */
+.tiptap.ProseMirror {
+  hr {
+    border: none;
+    height: 1px;
+    background-color: var(--horizontal-rule-color);
+  }
+
+  [data-type="horizontalRule"] {
+    margin-top: 2.25em;
+    margin-bottom: 2.25em;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+}
diff --git a/components/tiptap-node/image-node/image-node.scss b/components/tiptap-node/image-node/image-node.scss
new file mode 100644
index 0000000..10d4231
--- /dev/null
+++ b/components/tiptap-node/image-node/image-node.scss
@@ -0,0 +1,31 @@
+.tiptap.ProseMirror {
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  > img:not([data-type="emoji"] img) {
+    margin: 2rem 0;
+    outline: 0.125rem solid transparent;
+    border-radius: var(--tt-radius-xs, 0.25rem);
+  }
+
+  img:not([data-type="emoji"] img).ProseMirror-selectednode {
+    outline-color: var(--tt-brand-color-500);
+  }
+
+  // Thread image handling
+  .tiptap-thread:has(> img) {
+    margin: 2rem 0;
+
+    img {
+      outline: 0.125rem solid transparent;
+      border-radius: var(--tt-radius-xs, 0.25rem);
+    }
+  }
+
+  .tiptap-thread img {
+    margin: 0;
+  }
+}
diff --git a/components/tiptap-node/image-upload-node/image-upload-node-extension.ts b/components/tiptap-node/image-upload-node/image-upload-node-extension.ts
new file mode 100644
index 0000000..d1a18f5
--- /dev/null
+++ b/components/tiptap-node/image-upload-node/image-upload-node-extension.ts
@@ -0,0 +1,145 @@
+import { mergeAttributes, Node } from "@tiptap/react"
+import { ReactNodeViewRenderer } from "@tiptap/react"
+import { ImageUploadNode as ImageUploadNodeComponent } from "@/components/tiptap-node/image-upload-node/image-upload-node"
+
+export type UploadFunction = (
+  file: File,
+  onProgress?: (event: { progress: number }) => void,
+  abortSignal?: AbortSignal
+) => Promise<string>
+
+export interface ImageUploadNodeOptions {
+  /**
+   * Acceptable file types for upload.
+   * @default 'image/*'
+   */
+  accept?: string
+  /**
+   * Maximum number of files that can be uploaded.
+   * @default 1
+   */
+  limit?: number
+  /**
+   * Maximum file size in bytes (0 for unlimited).
+   * @default 0
+   */
+  maxSize?: number
+  /**
+   * Function to handle the upload process.
+   */
+  upload?: UploadFunction
+  /**
+   * Callback for upload errors.
+   */
+  onError?: (error: Error) => void
+  /**
+   * Callback for successful uploads.
+   */
+  onSuccess?: (url: string) => void
+}
+
+declare module "@tiptap/react" {
+  interface Commands<ReturnType> {
+    imageUpload: {
+      setImageUploadNode: (options?: ImageUploadNodeOptions) => ReturnType
+    }
+  }
+}
+
+/**
+ * A Tiptap node extension that creates an image upload component.
+ * @see registry/tiptap-node/image-upload-node/image-upload-node
+ */
+export const ImageUploadNode = Node.create<ImageUploadNodeOptions>({
+  name: "imageUpload",
+
+  group: "block",
+
+  draggable: true,
+
+  atom: true,
+
+  addOptions() {
+    return {
+      accept: "image/*",
+      limit: 1,
+      maxSize: 0,
+      upload: undefined,
+      onError: undefined,
+      onSuccess: undefined,
+    }
+  },
+
+  addAttributes() {
+    return {
+      accept: {
+        default: this.options.accept,
+      },
+      limit: {
+        default: this.options.limit,
+      },
+      maxSize: {
+        default: this.options.maxSize,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="image-upload"]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes({ "data-type": "image-upload" }, HTMLAttributes),
+    ]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageUploadNodeComponent)
+  },
+
+  addCommands() {
+    return {
+      setImageUploadNode:
+        (options = {}) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options,
+          })
+        },
+    }
+  },
+
+  /**
+   * Adds Enter key handler to trigger the upload component when it's selected.
+   */
+  addKeyboardShortcuts() {
+    return {
+      Enter: ({ editor }) => {
+        const { selection } = editor.state
+        const { nodeAfter } = selection.$from
+
+        if (
+          nodeAfter &&
+          nodeAfter.type.name === "imageUpload" &&
+          editor.isActive("imageUpload")
+        ) {
+          const nodeEl = editor.view.nodeDOM(selection.$from.pos)
+          if (nodeEl && nodeEl instanceof HTMLElement) {
+            // Since NodeViewWrapper is wrapped with a div, we need to click the first child
+            const firstChild = nodeEl.firstChild
+            if (firstChild && firstChild instanceof HTMLElement) {
+              firstChild.click()
+              return true
+            }
+          }
+        }
+        return false
+      },
+    }
+  },
+})
+
+export default ImageUploadNode
diff --git a/components/tiptap-node/image-upload-node/image-upload-node.scss b/components/tiptap-node/image-upload-node/image-upload-node.scss
new file mode 100644
index 0000000..b85e1e3
--- /dev/null
+++ b/components/tiptap-node/image-upload-node/image-upload-node.scss
@@ -0,0 +1,249 @@
+:root {
+  --tiptap-image-upload-active: var(--tt-brand-color-500);
+  --tiptap-image-upload-progress-bg: var(--tt-brand-color-50);
+  --tiptap-image-upload-icon-bg: var(--tt-brand-color-500);
+
+  --tiptap-image-upload-text-color: var(--tt-gray-light-a-700);
+  --tiptap-image-upload-subtext-color: var(--tt-gray-light-a-400);
+  --tiptap-image-upload-border: var(--tt-gray-light-a-300);
+  --tiptap-image-upload-border-hover: var(--tt-gray-light-a-400);
+  --tiptap-image-upload-border-active: var(--tt-brand-color-500);
+
+  --tiptap-image-upload-icon-doc-bg: var(--tt-gray-light-a-200);
+  --tiptap-image-upload-icon-doc-border: var(--tt-gray-light-300);
+  --tiptap-image-upload-icon-color: var(--white);
+}
+
+.dark {
+  --tiptap-image-upload-active: var(--tt-brand-color-400);
+  --tiptap-image-upload-progress-bg: var(--tt-brand-color-900);
+  --tiptap-image-upload-icon-bg: var(--tt-brand-color-400);
+
+  --tiptap-image-upload-text-color: var(--tt-gray-dark-a-700);
+  --tiptap-image-upload-subtext-color: var(--tt-gray-dark-a-400);
+  --tiptap-image-upload-border: var(--tt-gray-dark-a-300);
+  --tiptap-image-upload-border-hover: var(--tt-gray-dark-a-400);
+  --tiptap-image-upload-border-active: var(--tt-brand-color-400);
+
+  --tiptap-image-upload-icon-doc-bg: var(--tt-gray-dark-a-200);
+  --tiptap-image-upload-icon-doc-border: var(--tt-gray-dark-300);
+  --tiptap-image-upload-icon-color: var(--black);
+}
+
+.tiptap-image-upload {
+  margin: 2rem 0;
+
+  input[type="file"] {
+    display: none;
+  }
+
+  .tiptap-image-upload-dropzone {
+    position: relative;
+    width: 3.125rem;
+    height: 3.75rem;
+    display: inline-flex;
+    align-items: flex-start;
+    justify-content: center;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none;
+  }
+
+  .tiptap-image-upload-icon-container {
+    position: absolute;
+    width: 1.75rem;
+    height: 1.75rem;
+    bottom: 0;
+    right: 0;
+    background-color: var(--tiptap-image-upload-icon-bg);
+    border-radius: var(--tt-radius-lg, 0.75rem);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tiptap-image-upload-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+    color: var(--tiptap-image-upload-icon-color);
+  }
+
+  .tiptap-image-upload-dropzone-rect-primary {
+    color: var(--tiptap-image-upload-icon-doc-bg);
+    position: absolute;
+  }
+
+  .tiptap-image-upload-dropzone-rect-secondary {
+    position: absolute;
+    top: 0;
+    right: 0.25rem;
+    bottom: 0;
+    color: var(--tiptap-image-upload-icon-doc-border);
+  }
+
+  .tiptap-image-upload-text {
+    color: var(--tiptap-image-upload-text-color);
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: normal;
+
+    em {
+      font-style: normal;
+      text-decoration: underline;
+    }
+  }
+
+  .tiptap-image-upload-subtext {
+    color: var(--tiptap-image-upload-subtext-color);
+    font-weight: 600;
+    line-height: normal;
+    font-size: 0.75rem;
+  }
+
+  .tiptap-image-upload-drag-area {
+    padding: 2rem 1.5rem;
+    border: 1.5px dashed var(--tiptap-image-upload-border);
+    border-radius: var(--tt-radius-md, 0.5rem);
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: var(--tiptap-image-upload-border-hover);
+    }
+
+    &.drag-active {
+      border-color: var(--tiptap-image-upload-border-active);
+      background-color: rgba(
+        var(--tiptap-image-upload-active-rgb, 0, 123, 255),
+        0.05
+      );
+    }
+
+    &.drag-over {
+      border-color: var(--tiptap-image-upload-border-active);
+      background-color: rgba(
+        var(--tiptap-image-upload-active-rgb, 0, 123, 255),
+        0.1
+      );
+    }
+  }
+
+  .tiptap-image-upload-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 0.25rem;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none;
+  }
+
+  .tiptap-image-upload-previews {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .tiptap-image-upload-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--tiptap-image-upload-border);
+    margin-bottom: 0.5rem;
+
+    span {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--tiptap-image-upload-text-color);
+    }
+  }
+
+  // === Individual File Preview Styles ===
+  .tiptap-image-upload-preview {
+    position: relative;
+    border-radius: var(--tt-radius-md, 0.5rem);
+    overflow: hidden;
+
+    .tiptap-image-upload-progress {
+      position: absolute;
+      inset: 0;
+      background-color: var(--tiptap-image-upload-progress-bg);
+      transition: all 300ms ease-out;
+    }
+
+    .tiptap-image-upload-preview-content {
+      position: relative;
+      border: 1px solid var(--tiptap-image-upload-border);
+      border-radius: var(--tt-radius-md, 0.5rem);
+      padding: 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .tiptap-image-upload-file-info {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      height: 2rem;
+
+      .tiptap-image-upload-file-icon {
+        padding: 0.5rem;
+        background-color: var(--tiptap-image-upload-icon-bg);
+        border-radius: var(--tt-radius-lg, 0.75rem);
+
+        svg {
+          width: 0.875rem;
+          height: 0.875rem;
+          color: var(--tiptap-image-upload-icon-color);
+        }
+      }
+    }
+
+    .tiptap-image-upload-details {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .tiptap-image-upload-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      .tiptap-image-upload-progress-text {
+        font-size: 0.75rem;
+        color: var(--tiptap-image-upload-border-active);
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.tiptap.ProseMirror.ProseMirror-focused {
+  .ProseMirror-selectednode .tiptap-image-upload-drag-area {
+    border-color: var(--tiptap-image-upload-active);
+  }
+}
+
+@media (max-width: 480px) {
+  .tiptap-image-upload {
+    .tiptap-image-upload-drag-area {
+      padding: 1.5rem 1rem;
+    }
+
+    .tiptap-image-upload-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    .tiptap-image-upload-preview-content {
+      padding: 0.75rem;
+    }
+  }
+}
diff --git a/components/tiptap-node/image-upload-node/image-upload-node.tsx b/components/tiptap-node/image-upload-node/image-upload-node.tsx
new file mode 100644
index 0000000..79bac39
--- /dev/null
+++ b/components/tiptap-node/image-upload-node/image-upload-node.tsx
@@ -0,0 +1,547 @@
+"use client"
+
+import * as React from "react"
+import type { NodeViewProps } from "@tiptap/react"
+import { NodeViewWrapper } from "@tiptap/react"
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { CloseIcon } from "@/components/tiptap-icons/close-icon"
+import "@/components/tiptap-node/image-upload-node/image-upload-node.scss"
+import { isValidPosition } from "@/lib/tiptap-utils"
+
+export interface FileItem {
+  /**
+   * Unique identifier for the file item
+   */
+  id: string
+  /**
+   * The actual File object being uploaded
+   */
+  file: File
+  /**
+   * Current upload progress as a percentage (0-100)
+   */
+  progress: number
+  /**
+   * Current status of the file upload process
+   * @default "uploading"
+   */
+  status: "uploading" | "success" | "error"
+
+  /**
+   * URL to the uploaded file, available after successful upload
+   * @optional
+   */
+  url?: string
+  /**
+   * Controller that can be used to abort the upload process
+   * @optional
+   */
+  abortController?: AbortController
+}
+
+export interface UploadOptions {
+  /**
+   * Maximum allowed file size in bytes
+   */
+  maxSize: number
+  /**
+   * Maximum number of files that can be uploaded
+   */
+  limit: number
+  /**
+   * String specifying acceptable file types (MIME types or extensions)
+   * @example ".jpg,.png,image/jpeg" or "image/*"
+   */
+  accept: string
+  /**
+   * Function that handles the actual file upload process
+   * @param {File} file - The file to be uploaded
+   * @param {Function} onProgress - Callback function to report upload progress
+   * @param {AbortSignal} signal - Signal that can be used to abort the upload
+   * @returns {Promise<string>} Promise resolving to the URL of the uploaded file
+   */
+  upload: (
+    file: File,
+    onProgress: (event: { progress: number }) => void,
+    signal: AbortSignal
+  ) => Promise<string>
+  /**
+   * Callback triggered when a file is uploaded successfully
+   * @param {string} url - URL of the successfully uploaded file
+   * @optional
+   */
+  onSuccess?: (url: string) => void
+  /**
+   * Callback triggered when an error occurs during upload
+   * @param {Error} error - The error that occurred
+   * @optional
+   */
+  onError?: (error: Error) => void
+}
+
+/**
+ * Custom hook for managing multiple file uploads with progress tracking and cancellation
+ */
+function useFileUpload(options: UploadOptions) {
+  const [fileItems, setFileItems] = React.useState<FileItem[]>([])
+
+  const uploadFile = async (file: File): Promise<string | null> => {
+    if (file.size > options.maxSize) {
+      const error = new Error(
+        `File size exceeds maximum allowed (${options.maxSize / 1024 / 1024}MB)`
+      )
+      options.onError?.(error)
+      return null
+    }
+
+    const abortController = new AbortController()
+    const fileId = crypto.randomUUID()
+
+    const newFileItem: FileItem = {
+      id: fileId,
+      file,
+      progress: 0,
+      status: "uploading",
+      abortController,
+    }
+
+    setFileItems((prev) => [...prev, newFileItem])
+
+    try {
+      if (!options.upload) {
+        throw new Error("Upload function is not defined")
+      }
+
+      const url = await options.upload(
+        file,
+        (event: { progress: number }) => {
+          setFileItems((prev) =>
+            prev.map((item) =>
+              item.id === fileId ? { ...item, progress: event.progress } : item
+            )
+          )
+        },
+        abortController.signal
+      )
+
+      if (!url) throw new Error("Upload failed: No URL returned")
+
+      if (!abortController.signal.aborted) {
+        setFileItems((prev) =>
+          prev.map((item) =>
+            item.id === fileId
+              ? { ...item, status: "success", url, progress: 100 }
+              : item
+          )
+        )
+        options.onSuccess?.(url)
+        return url
+      }
+
+      return null
+    } catch (error) {
+      if (!abortController.signal.aborted) {
+        setFileItems((prev) =>
+          prev.map((item) =>
+            item.id === fileId
+              ? { ...item, status: "error", progress: 0 }
+              : item
+          )
+        )
+        options.onError?.(
+          error instanceof Error ? error : new Error("Upload failed")
+        )
+      }
+      return null
+    }
+  }
+
+  const uploadFiles = async (files: File[]): Promise<string[]> => {
+    if (!files || files.length === 0) {
+      options.onError?.(new Error("No files to upload"))
+      return []
+    }
+
+    if (options.limit && files.length > options.limit) {
+      options.onError?.(
+        new Error(
+          `Maximum ${options.limit} file${options.limit === 1 ? "" : "s"} allowed`
+        )
+      )
+      return []
+    }
+
+    // Upload all files concurrently
+    const uploadPromises = files.map((file) => uploadFile(file))
+    const results = await Promise.all(uploadPromises)
+
+    // Filter out null results (failed uploads)
+    return results.filter((url): url is string => url !== null)
+  }
+
+  const removeFileItem = (fileId: string) => {
+    setFileItems((prev) => {
+      const fileToRemove = prev.find((item) => item.id === fileId)
+      if (fileToRemove?.abortController) {
+        fileToRemove.abortController.abort()
+      }
+      if (fileToRemove?.url) {
+        URL.revokeObjectURL(fileToRemove.url)
+      }
+      return prev.filter((item) => item.id !== fileId)
+    })
+  }
+
+  const clearAllFiles = () => {
+    fileItems.forEach((item) => {
+      if (item.abortController) {
+        item.abortController.abort()
+      }
+      if (item.url) {
+        URL.revokeObjectURL(item.url)
+      }
+    })
+    setFileItems([])
+  }
+
+  return {
+    fileItems,
+    uploadFiles,
+    removeFileItem,
+    clearAllFiles,
+  }
+}
+
+const CloudUploadIcon: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    className="tiptap-image-upload-icon"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.1953 4.41771C10.3478 4.08499 9.43578 3.94949 8.5282 4.02147C7.62062 4.09345 6.74133 4.37102 5.95691 4.83316C5.1725 5.2953 4.50354 5.92989 4.00071 6.68886C3.49788 7.44783 3.17436 8.31128 3.05465 9.2138C2.93495 10.1163 3.0222 11.0343 3.3098 11.8981C3.5974 12.7619 4.07781 13.5489 4.71463 14.1995C5.10094 14.5942 5.09414 15.2274 4.69945 15.6137C4.30476 16 3.67163 15.9932 3.28532 15.5985C2.43622 14.731 1.79568 13.6816 1.41221 12.5299C1.02875 11.3781 0.91241 10.1542 1.07201 8.95084C1.23162 7.74748 1.66298 6.59621 2.33343 5.58425C3.00387 4.57229 3.89581 3.72617 4.9417 3.10998C5.98758 2.4938 7.15998 2.1237 8.37008 2.02773C9.58018 1.93176 10.7963 2.11243 11.9262 2.55605C13.0561 2.99968 14.0703 3.69462 14.8919 4.58825C15.5423 5.29573 16.0585 6.11304 16.4177 7.00002H17.4999C18.6799 6.99991 19.8288 7.37933 20.7766 8.08222C21.7245 8.78515 22.4212 9.7743 22.7637 10.9036C23.1062 12.0328 23.0765 13.2423 22.6788 14.3534C22.2812 15.4644 21.5367 16.4181 20.5554 17.0736C20.0962 17.3803 19.4752 17.2567 19.1684 16.7975C18.8617 16.3382 18.9853 15.7172 19.4445 15.4105C20.069 14.9934 20.5427 14.3865 20.7958 13.6794C21.0488 12.9724 21.0678 12.2027 20.8498 11.4841C20.6318 10.7655 20.1885 10.136 19.5853 9.6887C18.9821 9.24138 18.251 8.99993 17.5001 9.00002H15.71C15.2679 9.00002 14.8783 8.70973 14.7518 8.28611C14.4913 7.41374 14.0357 6.61208 13.4195 5.94186C12.8034 5.27164 12.0427 4.75043 11.1953 4.41771Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11 14.4142V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V14.4142L15.2929 16.7071C15.6834 17.0976 16.3166 17.0976 16.7071 16.7071C17.0976 16.3166 17.0976 15.6834 16.7071 15.2929L12.7078 11.2936C12.7054 11.2912 12.703 11.2888 12.7005 11.2864C12.5208 11.1099 12.2746 11.0008 12.003 11L12 11L11.997 11C11.8625 11.0004 11.7343 11.0273 11.6172 11.0759C11.502 11.1236 11.3938 11.1937 11.2995 11.2864C11.297 11.2888 11.2946 11.2912 11.2922 11.2936L7.29289 15.2929C6.90237 15.6834 6.90237 16.3166 7.29289 16.7071C7.68342 17.0976 8.31658 17.0976 8.70711 16.7071L11 14.4142Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+const FileIcon: React.FC = () => (
+  <svg
+    width="43"
+    height="57"
+    viewBox="0 0 43 57"
+    fill="currentColor"
+    className="tiptap-image-upload-dropzone-rect-primary"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0.75 10.75C0.75 5.64137 4.89137 1.5 10 1.5H32.3431C33.2051 1.5 34.0317 1.84241 34.6412 2.4519L40.2981 8.10876C40.9076 8.71825 41.25 9.5449 41.25 10.4069V46.75C41.25 51.8586 37.1086 56 32 56H10C4.89137 56 0.75 51.8586 0.75 46.75V10.75Z"
+      fill="currentColor"
+      fillOpacity="0.11"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+  </svg>
+)
+
+const FileCornerIcon: React.FC = () => (
+  <svg
+    width="10"
+    height="10"
+    className="tiptap-image-upload-dropzone-rect-secondary"
+    viewBox="0 0 10 10"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 0.75H0.343146C1.40401 0.75 2.42143 1.17143 3.17157 1.92157L8.82843 7.57843C9.57857 8.32857 10 9.34599 10 10.4069V10.75H4C1.79086 10.75 0 8.95914 0 6.75V0.75Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+interface ImageUploadDragAreaProps {
+  /**
+   * Callback function triggered when files are dropped or selected
+   * @param {File[]} files - Array of File objects that were dropped or selected
+   */
+  onFile: (files: File[]) => void
+  /**
+   * Optional child elements to render inside the drag area
+   * @optional
+   * @default undefined
+   */
+  children?: React.ReactNode
+}
+
+/**
+ * A component that creates a drag-and-drop area for image uploads
+ */
+const ImageUploadDragArea: React.FC<ImageUploadDragAreaProps> = ({
+  onFile,
+  children,
+}) => {
+  const [isDragOver, setIsDragOver] = React.useState(false)
+  const [isDragActive, setIsDragActive] = React.useState(false)
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragActive(true)
+  }
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setIsDragActive(false)
+      setIsDragOver(false)
+    }
+  }
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragOver(true)
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragActive(false)
+    setIsDragOver(false)
+
+    const files = Array.from(e.dataTransfer.files)
+    if (files.length > 0) {
+      onFile(files)
+    }
+  }
+
+  return (
+    <div
+      className={`tiptap-image-upload-drag-area ${isDragActive ? "drag-active" : ""} ${isDragOver ? "drag-over" : ""}`}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      {children}
+    </div>
+  )
+}
+
+interface ImageUploadPreviewProps {
+  /**
+   * The file item to preview
+   */
+  fileItem: FileItem
+  /**
+   * Callback to remove this file from upload queue
+   */
+  onRemove: () => void
+}
+
+/**
+ * Component that displays a preview of an uploading file with progress
+ */
+const ImageUploadPreview: React.FC<ImageUploadPreviewProps> = ({
+  fileItem,
+  onRemove,
+}) => {
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return "0 Bytes"
+    const k = 1024
+    const sizes = ["Bytes", "KB", "MB", "GB"]
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`
+  }
+
+  return (
+    <div className="tiptap-image-upload-preview">
+      {fileItem.status === "uploading" && (
+        <div
+          className="tiptap-image-upload-progress"
+          style={{ width: `${fileItem.progress}%` }}
+        />
+      )}
+
+      <div className="tiptap-image-upload-preview-content">
+        <div className="tiptap-image-upload-file-info">
+          <div className="tiptap-image-upload-file-icon">
+            <CloudUploadIcon />
+          </div>
+          <div className="tiptap-image-upload-details">
+            <span className="tiptap-image-upload-text">
+              {fileItem.file.name}
+            </span>
+            <span className="tiptap-image-upload-subtext">
+              {formatFileSize(fileItem.file.size)}
+            </span>
+          </div>
+        </div>
+        <div className="tiptap-image-upload-actions">
+          {fileItem.status === "uploading" && (
+            <span className="tiptap-image-upload-progress-text">
+              {fileItem.progress}%
+            </span>
+          )}
+          <Button
+            type="button"
+            data-style="ghost"
+            onClick={(e) => {
+              e.stopPropagation()
+              onRemove()
+            }}
+          >
+            <CloseIcon className="tiptap-button-icon" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const DropZoneContent: React.FC<{ maxSize: number; limit: number }> = ({
+  maxSize,
+  limit,
+}) => (
+  <>
+    <div className="tiptap-image-upload-dropzone">
+      <FileIcon />
+      <FileCornerIcon />
+      <div className="tiptap-image-upload-icon-container">
+        <CloudUploadIcon />
+      </div>
+    </div>
+
+    <div className="tiptap-image-upload-content">
+      <span className="tiptap-image-upload-text">
+        <em>Click to upload</em> or drag and drop
+      </span>
+      <span className="tiptap-image-upload-subtext">
+        Maximum {limit} file{limit === 1 ? "" : "s"}, {maxSize / 1024 / 1024}MB
+        each.
+      </span>
+    </div>
+  </>
+)
+
+export const ImageUploadNode: React.FC<NodeViewProps> = (props) => {
+  const { accept, limit, maxSize } = props.node.attrs
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const extension = props.extension
+
+  const uploadOptions: UploadOptions = {
+    maxSize,
+    limit,
+    accept,
+    upload: extension.options.upload,
+    onSuccess: extension.options.onSuccess,
+    onError: extension.options.onError,
+  }
+
+  const { fileItems, uploadFiles, removeFileItem, clearAllFiles } =
+    useFileUpload(uploadOptions)
+
+  const handleUpload = async (files: File[]) => {
+    const urls = await uploadFiles(files)
+
+    if (urls.length > 0) {
+      const pos = props.getPos()
+
+      if (isValidPosition(pos)) {
+        const imageNodes = urls.map((url, index) => {
+          const filename =
+            files[index]?.name.replace(/\.[^/.]+$/, "") || "unknown"
+          return {
+            type: "image",
+            attrs: { src: url, alt: filename, title: filename },
+          }
+        })
+
+        props.editor
+          .chain()
+          .focus()
+          .deleteRange({ from: pos, to: pos + 1 })
+          .insertContentAt(pos, imageNodes)
+          .run()
+      }
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (!files || files.length === 0) {
+      extension.options.onError?.(new Error("No file selected"))
+      return
+    }
+    handleUpload(Array.from(files))
+  }
+
+  const handleClick = () => {
+    if (inputRef.current && fileItems.length === 0) {
+      inputRef.current.value = ""
+      inputRef.current.click()
+    }
+  }
+
+  const hasFiles = fileItems.length > 0
+
+  return (
+    <NodeViewWrapper
+      className="tiptap-image-upload"
+      tabIndex={0}
+      onClick={handleClick}
+    >
+      {!hasFiles && (
+        <ImageUploadDragArea onFile={handleUpload}>
+          <DropZoneContent maxSize={maxSize} limit={limit} />
+        </ImageUploadDragArea>
+      )}
+
+      {hasFiles && (
+        <div className="tiptap-image-upload-previews">
+          {fileItems.length > 1 && (
+            <div className="tiptap-image-upload-header">
+              <span>Uploading {fileItems.length} files</span>
+              <Button
+                type="button"
+                data-style="ghost"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  clearAllFiles()
+                }}
+              >
+                Clear All
+              </Button>
+            </div>
+          )}
+          {fileItems.map((fileItem) => (
+            <ImageUploadPreview
+              key={fileItem.id}
+              fileItem={fileItem}
+              onRemove={() => removeFileItem(fileItem.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      <input
+        ref={inputRef}
+        name="file"
+        accept={accept}
+        type="file"
+        multiple={limit > 1}
+        onChange={handleChange}
+        onClick={(e: React.MouseEvent<HTMLInputElement>) => e.stopPropagation()}
+      />
+    </NodeViewWrapper>
+  )
+}
diff --git a/components/tiptap-node/image-upload-node/index.tsx b/components/tiptap-node/image-upload-node/index.tsx
new file mode 100644
index 0000000..2510a62
--- /dev/null
+++ b/components/tiptap-node/image-upload-node/index.tsx
@@ -0,0 +1 @@
+export * from "./image-upload-node-extension"
diff --git a/components/tiptap-node/list-node/list-node.scss b/components/tiptap-node/list-node/list-node.scss
new file mode 100644
index 0000000..d0fe5c8
--- /dev/null
+++ b/components/tiptap-node/list-node/list-node.scss
@@ -0,0 +1,160 @@
+.tiptap.ProseMirror {
+  --tt-checklist-bg-color: var(--tt-gray-light-a-100);
+  --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
+  --tt-checklist-border-color: var(--tt-gray-light-a-200);
+  --tt-checklist-border-active-color: var(--tt-gray-light-a-900);
+  --tt-checklist-check-icon-color: var(--white);
+  --tt-checklist-text-active: var(--tt-gray-light-a-500);
+
+  .dark & {
+    --tt-checklist-bg-color: var(--tt-gray-dark-a-100);
+    --tt-checklist-bg-active-color: var(--tt-gray-dark-a-900);
+    --tt-checklist-border-color: var(--tt-gray-dark-a-200);
+    --tt-checklist-border-active-color: var(--tt-gray-dark-a-900);
+    --tt-checklist-check-icon-color: var(--black);
+    --tt-checklist-text-active: var(--tt-gray-dark-a-500);
+  }
+}
+
+/* =====================
+     LISTS
+     ===================== */
+.tiptap.ProseMirror {
+  // Common list styles
+  ol,
+  ul {
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+    padding-left: 1.5em;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    ol,
+    ul {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  li {
+    p {
+      margin-top: 0;
+      line-height: 1.6;
+    }
+  }
+
+  // Ordered lists
+  ol {
+    list-style: decimal;
+
+    ol {
+      list-style: lower-alpha;
+
+      ol {
+        list-style: lower-roman;
+      }
+    }
+  }
+
+  // Unordered lists
+  ul:not([data-type="taskList"]) {
+    list-style: disc;
+
+    ul {
+      list-style: circle;
+
+      ul {
+        list-style: square;
+      }
+    }
+  }
+
+  // Task lists
+  ul[data-type="taskList"] {
+    padding-left: 0.25em;
+
+    li {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+
+      &:not(:has(> p:first-child)) {
+        list-style-type: none;
+      }
+
+      &[data-checked="true"] {
+        > div > p {
+          opacity: 0.5;
+          text-decoration: line-through;
+        }
+
+        > div > p span {
+          text-decoration: line-through;
+        }
+      }
+
+      label {
+        position: relative;
+        padding-top: 0.375rem;
+        padding-right: 0.5rem;
+
+        input[type="checkbox"] {
+          position: absolute;
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
+        span {
+          display: block;
+          width: 1em;
+          height: 1em;
+          border: 1px solid var(--tt-checklist-border-color);
+          border-radius: var(--tt-radius-xs, 0.25rem);
+          position: relative;
+          cursor: pointer;
+          background-color: var(--tt-checklist-bg-color);
+          transition:
+            background-color 80ms ease-out,
+            border-color 80ms ease-out;
+
+          &::before {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 0.75em;
+            height: 0.75em;
+            background-color: var(--tt-checklist-check-icon-color);
+            opacity: 0;
+            -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E")
+              center/contain no-repeat;
+            mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E")
+              center/contain no-repeat;
+          }
+        }
+
+        input[type="checkbox"]:checked + span {
+          background: var(--tt-checklist-bg-active-color);
+          border-color: var(--tt-checklist-border-active-color);
+
+          &::before {
+            opacity: 1;
+          }
+        }
+      }
+
+      div {
+        flex: 1 1 0%;
+        min-width: 0;
+      }
+    }
+  }
+}
diff --git a/components/tiptap-node/paragraph-node/paragraph-node.scss b/components/tiptap-node/paragraph-node/paragraph-node.scss
new file mode 100644
index 0000000..cc2ec59
--- /dev/null
+++ b/components/tiptap-node/paragraph-node/paragraph-node.scss
@@ -0,0 +1,272 @@
+.tiptap.ProseMirror {
+  --tt-collaboration-carets-label: var(--tt-gray-light-900);
+  --link-text-color: var(--tt-brand-color-500);
+  --thread-text: var(--tt-gray-light-900);
+  --placeholder-color: var(--tt-gray-light-a-400);
+  --thread-bg-color: var(--tt-color-yellow-inc-2);
+
+  // ai
+  --tiptap-ai-insertion-color: var(--tt-brand-color-600);
+
+  .dark & {
+    --tt-collaboration-carets-label: var(--tt-gray-dark-100);
+    --link-text-color: var(--tt-brand-color-400);
+    --thread-text: var(--tt-gray-dark-900);
+    --placeholder-color: var(--tt-gray-dark-a-400);
+    --thread-bg-color: var(--tt-color-yellow-dec-2);
+
+    --tiptap-ai-insertion-color: var(--tt-brand-color-400);
+  }
+}
+
+/* Ensure each top-level node has relative positioning 
+   so absolutely positioned placeholders work correctly */
+.tiptap.ProseMirror > * {
+  position: relative;
+}
+
+/* =====================
+     CORE EDITOR STYLES
+     ===================== */
+.tiptap.ProseMirror {
+  white-space: pre-wrap;
+  outline: none;
+  caret-color: var(--tt-cursor-color);
+
+  // Paragraph spacing
+  p:not(:first-child) {
+    font-size: 1rem;
+    line-height: 1.6;
+    font-weight: normal;
+    margin-top: 20px;
+  }
+
+  // Selection styles
+  &:not(.readonly):not(.ProseMirror-hideselection) {
+    ::selection {
+      background-color: var(--tt-selection-color);
+    }
+
+    .selection::selection {
+      background: transparent;
+    }
+  }
+
+  .selection {
+    display: inline;
+    background-color: var(--tt-selection-color);
+  }
+
+  // Selected node styles
+  .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
+    border-radius: var(--tt-radius-md);
+    background-color: var(--tt-selection-color);
+  }
+
+  .ProseMirror-hideselection {
+    caret-color: transparent;
+  }
+
+  // Resize cursor
+  &.resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
+}
+
+/* =====================
+     TEXT DECORATION
+     ===================== */
+.tiptap.ProseMirror {
+  // Text decoration inheritance for spans
+  a span {
+    text-decoration: underline;
+  }
+
+  s span {
+    text-decoration: line-through;
+  }
+
+  u span {
+    text-decoration: underline;
+  }
+
+  .tiptap-ai-insertion {
+    color: var(--tiptap-ai-insertion-color);
+  }
+}
+
+/* =====================
+     COLLABORATION
+     ===================== */
+.tiptap.ProseMirror {
+  .collaboration-carets {
+    &__caret {
+      border-right: 1px solid transparent;
+      border-left: 1px solid transparent;
+      pointer-events: none;
+      margin-left: -1px;
+      margin-right: -1px;
+      position: relative;
+      word-break: normal;
+    }
+
+    &__label {
+      color: var(--tt-collaboration-carets-label);
+      border-radius: 0.25rem;
+      border-bottom-left-radius: 0;
+      font-size: 0.75rem;
+      font-weight: 600;
+      left: -1px;
+      line-height: 1;
+      padding: 0.125rem 0.375rem;
+      position: absolute;
+      top: -1.3em;
+      user-select: none;
+      white-space: nowrap;
+    }
+  }
+}
+
+/* =====================
+     EMOJI
+     ===================== */
+.tiptap.ProseMirror [data-type="emoji"] img {
+  display: inline-block;
+  width: 1.25em;
+  height: 1.25em;
+  cursor: text;
+}
+
+/* =====================
+     LINKS
+     ===================== */
+.tiptap.ProseMirror {
+  a {
+    color: var(--link-text-color);
+    text-decoration: underline;
+  }
+}
+
+/* =====================
+     MENTION
+     ===================== */
+.tiptap.ProseMirror {
+  [data-type="mention"] {
+    display: inline-block;
+    color: var(--tt-brand-color-500);
+  }
+}
+
+/* =====================
+     THREADS
+     ===================== */
+.tiptap.ProseMirror {
+  // Base styles for inline threads
+  .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline {
+    transition:
+      color 0.2s ease-in-out,
+      background-color 0.2s ease-in-out;
+    color: var(--thread-text);
+    border-bottom: 2px dashed var(--tt-color-yellow-base);
+    font-weight: 600;
+
+    &.tiptap-thread--selected,
+    &.tiptap-thread--hovered {
+      background-color: var(--thread-bg-color);
+      border-bottom-color: transparent;
+    }
+  }
+
+  // Block thread styles with images
+  .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block {
+    &:has(img) {
+      outline: 0.125rem solid var(--tt-color-yellow-base);
+      border-radius: var(--tt-radius-xs, 0.25rem);
+      overflow: hidden;
+      width: fit-content;
+
+      &.tiptap-thread--selected {
+        outline-width: 0.25rem;
+        outline-color: var(--tt-color-yellow-base);
+      }
+
+      &.tiptap-thread--hovered {
+        outline-width: 0.25rem;
+      }
+    }
+
+    // Block thread styles without images
+    &:not(:has(img)) {
+      border-radius: 0.25rem;
+      border-bottom: 0.125rem dashed var(--tt-color-yellow-base);
+      padding-bottom: 0.5rem;
+      outline: 0.25rem solid transparent;
+
+      &.tiptap-thread--hovered,
+      &.tiptap-thread--selected {
+        background-color: var(--tt-color-yellow-base);
+        outline-color: var(--tt-color-yellow-base);
+      }
+    }
+  }
+
+  // Resolved thread styles
+  .tiptap-thread.tiptap-thread--resolved.tiptap-thread--inline.tiptap-thread--selected {
+    background-color: var(--tt-color-yellow-base);
+    border-color: transparent;
+    opacity: 0.5;
+  }
+
+  // React renderer specific styles
+  .tiptap-thread.tiptap-thread--block:has(.react-renderer) {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
+}
+
+/* =====================
+     PLACEHOLDER
+     ===================== */
+.is-empty:not(.with-slash)[data-placeholder]:has(
+    > .ProseMirror-trailingBreak:only-child
+  )::before {
+  content: attr(data-placeholder);
+}
+
+.is-empty.with-slash[data-placeholder]:has(
+    > .ProseMirror-trailingBreak:only-child
+  )::before {
+  content: "Write, type '/' for commands…";
+  font-style: italic;
+}
+
+.is-empty[data-placeholder]:has(
+    > .ProseMirror-trailingBreak:only-child
+  ):before {
+  pointer-events: none;
+  height: 0;
+  position: absolute;
+  width: 100%;
+  text-align: inherit;
+  left: 0;
+  right: 0;
+}
+
+.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak):before {
+  color: var(--placeholder-color);
+}
+
+/* =====================
+     DROPCURSOR
+     ===================== */
+.prosemirror-dropcursor-block,
+.prosemirror-dropcursor-inline {
+  background: var(--tt-brand-color-400) !important;
+  border-radius: 0.25rem;
+  margin-left: -1px;
+  margin-right: -1px;
+  width: 100%;
+  height: 0.188rem;
+  cursor: grabbing;
+}
diff --git a/components/tiptap-templates/simple/data/content.json b/components/tiptap-templates/simple/data/content.json
new file mode 100644
index 0000000..4a3c0e8
--- /dev/null
+++ b/components/tiptap-templates/simple/data/content.json
@@ -0,0 +1,477 @@
+{
+  "type": "doc",
+  "content": [
+    {
+      "type": "heading",
+      "attrs": {
+        "textAlign": null,
+        "level": 1
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Getting started"
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "attrs": {
+        "textAlign": null
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Welcome to the "
+        },
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "italic"
+            },
+            {
+              "type": "highlight",
+              "attrs": {
+                "color": "var(--tt-color-highlight-yellow)"
+              }
+            }
+          ],
+          "text": "Simple Editor"
+        },
+        {
+          "type": "text",
+          "text": " template! This template integrates "
+        },
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "bold"
+            }
+          ],
+          "text": "open source"
+        },
+        {
+          "type": "text",
+          "text": " UI components and Tiptap extensions licensed under "
+        },
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "bold"
+            }
+          ],
+          "text": "MIT"
+        },
+        {
+          "type": "text",
+          "text": "."
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "attrs": {
+        "textAlign": null
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Integrate it by following the "
+        },
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "link",
+              "attrs": {
+                "href": "https://tiptap.dev/docs/ui-components/templates/simple-editor",
+                "target": "_blank",
+                "rel": "noopener noreferrer nofollow",
+                "class": null
+              }
+            }
+          ],
+          "text": "Tiptap UI Components docs"
+        },
+        {
+          "type": "text",
+          "text": " or using our CLI tool."
+        }
+      ]
+    },
+    {
+      "type": "codeBlock",
+      "attrs": {
+        "language": null
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "npx @tiptap/cli init"
+        }
+      ]
+    },
+    {
+      "type": "heading",
+      "attrs": {
+        "textAlign": null,
+        "level": 2
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Features"
+        }
+      ]
+    },
+    {
+      "type": "blockquote",
+      "content": [
+        {
+          "type": "paragraph",
+          "attrs": {
+            "textAlign": null
+          },
+          "content": [
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "italic"
+                }
+              ],
+              "text": "A fully responsive rich text editor with built-in support for common formatting and layout tools. Type markdown "
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "code"
+                }
+              ],
+              "text": "**"
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "italic"
+                }
+              ],
+              "text": " or use keyboard shortcuts "
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "code"
+                }
+              ],
+              "text": "⌘+B"
+            },
+            {
+              "type": "text",
+              "text": " for "
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "strike"
+                }
+              ],
+              "text": "most"
+            },
+            {
+              "type": "text",
+              "text": " all common markdown marks. 🪄"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "attrs": {
+        "textAlign": "left"
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Add images, customize alignment, and apply "
+        },
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "highlight",
+              "attrs": {
+                "color": "var(--tt-color-highlight-blue)"
+              }
+            }
+          ],
+          "text": "advanced formatting"
+        },
+        {
+          "type": "text",
+          "text": " to make your writing more engaging and professional."
+        }
+      ]
+    },
+    {
+      "type": "image",
+      "attrs": {
+        "src": "/images/tiptap-ui-placeholder-image.jpg",
+        "alt": "placeholder-image",
+        "title": "placeholder-image"
+      }
+    },
+    {
+      "type": "bulletList",
+      "content": [
+        {
+          "type": "listItem",
+          "content": [
+            {
+              "type": "paragraph",
+              "attrs": {
+                "textAlign": "left"
+              },
+              "content": [
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "bold"
+                    }
+                  ],
+                  "text": "Superscript"
+                },
+                {
+                  "type": "text",
+                  "text": " (x"
+                },
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "superscript"
+                    }
+                  ],
+                  "text": "2"
+                },
+                {
+                  "type": "text",
+                  "text": ") and "
+                },
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "bold"
+                    }
+                  ],
+                  "text": "Subscript"
+                },
+                {
+                  "type": "text",
+                  "text": " (H"
+                },
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "subscript"
+                    }
+                  ],
+                  "text": "2"
+                },
+                {
+                  "type": "text",
+                  "text": "O) for precision."
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "listItem",
+          "content": [
+            {
+              "type": "paragraph",
+              "attrs": {
+                "textAlign": "left"
+              },
+              "content": [
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "bold"
+                    }
+                  ],
+                  "text": "Typographic conversion"
+                },
+                {
+                  "type": "text",
+                  "text": ": automatically convert to "
+                },
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "code"
+                    }
+                  ],
+                  "text": "->"
+                },
+                {
+                  "type": "text",
+                  "text": " an arrow "
+                },
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "bold"
+                    }
+                  ],
+                  "text": "→"
+                },
+                {
+                  "type": "text",
+                  "text": "."
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "attrs": {
+        "textAlign": "left"
+      },
+      "content": [
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "italic"
+            }
+          ],
+          "text": "→ "
+        },
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "link",
+              "attrs": {
+                "href": "https://tiptap.dev/docs/ui-components/templates/simple-editor#features",
+                "target": "_blank",
+                "rel": "noopener noreferrer nofollow",
+                "class": null
+              }
+            }
+          ],
+          "text": "Learn more"
+        }
+      ]
+    },
+    {
+      "type": "horizontalRule"
+    },
+    {
+      "type": "heading",
+      "attrs": {
+        "textAlign": "left",
+        "level": 2
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Make it your own"
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "attrs": {
+        "textAlign": "left"
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Switch between light and dark modes, and tailor the editor's appearance with customizable CSS to match your style."
+        }
+      ]
+    },
+    {
+      "type": "taskList",
+      "content": [
+        {
+          "type": "taskItem",
+          "attrs": {
+            "checked": true
+          },
+          "content": [
+            {
+              "type": "paragraph",
+              "attrs": {
+                "textAlign": "left"
+              },
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Test template"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "taskItem",
+          "attrs": {
+            "checked": false
+          },
+          "content": [
+            {
+              "type": "paragraph",
+              "attrs": {
+                "textAlign": "left"
+              },
+              "content": [
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "link",
+                      "attrs": {
+                        "href": "https://tiptap.dev/docs/ui-components/templates/simple-editor",
+                        "target": "_blank",
+                        "rel": "noopener noreferrer nofollow",
+                        "class": null
+                      }
+                    }
+                  ],
+                  "text": "Integrate the free template"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "attrs": {
+        "textAlign": "left"
+      }
+    }
+  ]
+}
diff --git a/components/tiptap-templates/simple/simple-editor.scss b/components/tiptap-templates/simple/simple-editor.scss
new file mode 100644
index 0000000..086b461
--- /dev/null
+++ b/components/tiptap-templates/simple/simple-editor.scss
@@ -0,0 +1,82 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+body {
+  --tt-toolbar-height: 44px;
+  --tt-theme-text: var(--tt-gray-light-900);
+
+  .dark & {
+    --tt-theme-text: var(--tt-gray-dark-900);
+  }
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  color: var(--tt-theme-text);
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  padding: 0;
+  overscroll-behavior-y: none;
+}
+
+html,
+body {
+  overscroll-behavior-x: none;
+}
+
+html,
+body,
+#root,
+#app {
+  height: 100%;
+  background-color: var(--tt-bg-color);
+}
+
+::-webkit-scrollbar {
+  width: 0.25rem;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--tt-scrollbar-color) transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--tt-scrollbar-color);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.tiptap.ProseMirror {
+  font-family: "DM Sans", sans-serif;
+}
+
+.simple-editor-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.simple-editor-content {
+  max-width: 648px;
+  width: 100%;
+  margin: 0 auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.simple-editor-content .tiptap.ProseMirror.simple-editor {
+  flex: 1;
+  padding: 3rem 3rem 30vh;
+}
+
+@media screen and (max-width: 480px) {
+  .simple-editor-content .tiptap.ProseMirror.simple-editor {
+    padding: 1rem 1.5rem 30vh;
+  }
+}
\ No newline at end of file
diff --git a/components/tiptap-templates/simple/simple-editor.tsx b/components/tiptap-templates/simple/simple-editor.tsx
new file mode 100644
index 0000000..276614a
--- /dev/null
+++ b/components/tiptap-templates/simple/simple-editor.tsx
@@ -0,0 +1,281 @@
+"use client"
+
+import * as React from "react"
+import { EditorContent, EditorContext, useEditor } from "@tiptap/react"
+
+// --- Tiptap Core Extensions ---
+import { StarterKit } from "@tiptap/starter-kit"
+import { Image } from "@tiptap/extension-image"
+import { TaskItem, TaskList } from "@tiptap/extension-list"
+import { TextAlign } from "@tiptap/extension-text-align"
+import { Typography } from "@tiptap/extension-typography"
+import { Highlight } from "@tiptap/extension-highlight"
+import { Subscript } from "@tiptap/extension-subscript"
+import { Superscript } from "@tiptap/extension-superscript"
+import { Selection } from "@tiptap/extensions"
+
+// --- UI Primitives ---
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Spacer } from "@/components/tiptap-ui-primitive/spacer"
+import {
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSeparator,
+} from "@/components/tiptap-ui-primitive/toolbar"
+
+// --- Tiptap Node ---
+import { ImageUploadNode } from "@/components/tiptap-node/image-upload-node/image-upload-node-extension"
+import { HorizontalRule } from "@/components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension"
+import "@/components/tiptap-node/blockquote-node/blockquote-node.scss"
+import "@/components/tiptap-node/code-block-node/code-block-node.scss"
+import "@/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss"
+import "@/components/tiptap-node/list-node/list-node.scss"
+import "@/components/tiptap-node/image-node/image-node.scss"
+import "@/components/tiptap-node/heading-node/heading-node.scss"
+import "@/components/tiptap-node/paragraph-node/paragraph-node.scss"
+
+// --- Tiptap UI ---
+import { HeadingDropdownMenu } from "@/components/tiptap-ui/heading-dropdown-menu"
+import { ImageUploadButton } from "@/components/tiptap-ui/image-upload-button"
+import { ListDropdownMenu } from "@/components/tiptap-ui/list-dropdown-menu"
+import { BlockquoteButton } from "@/components/tiptap-ui/blockquote-button"
+import { CodeBlockButton } from "@/components/tiptap-ui/code-block-button"
+import {
+  ColorHighlightPopover,
+  ColorHighlightPopoverContent,
+  ColorHighlightPopoverButton,
+} from "@/components/tiptap-ui/color-highlight-popover"
+import {
+  LinkPopover,
+  LinkContent,
+  LinkButton,
+} from "@/components/tiptap-ui/link-popover"
+import { MarkButton } from "@/components/tiptap-ui/mark-button"
+import { TextAlignButton } from "@/components/tiptap-ui/text-align-button"
+import { UndoRedoButton } from "@/components/tiptap-ui/undo-redo-button"
+
+// --- Icons ---
+import { ArrowLeftIcon } from "@/components/tiptap-icons/arrow-left-icon"
+import { HighlighterIcon } from "@/components/tiptap-icons/highlighter-icon"
+import { LinkIcon } from "@/components/tiptap-icons/link-icon"
+
+// --- Hooks ---
+import { useIsMobile } from "@/hooks/use-mobile"
+import { useWindowSize } from "@/hooks/use-window-size"
+import { useCursorVisibility } from "@/hooks/use-cursor-visibility"
+
+// --- Components ---
+import { ThemeToggle } from "@/components/tiptap-templates/simple/theme-toggle"
+
+// --- Lib ---
+import { handleImageUpload, MAX_FILE_SIZE } from "@/lib/tiptap-utils"
+
+// --- Styles ---
+import "@/components/tiptap-templates/simple/simple-editor.scss"
+
+import content from "@/components/tiptap-templates/simple/data/content.json"
+
+const MainToolbarContent = ({
+  onHighlighterClick,
+  onLinkClick,
+  isMobile,
+}: {
+  onHighlighterClick: () => void
+  onLinkClick: () => void
+  isMobile: boolean
+}) => {
+  return (
+    <>
+      <Spacer />
+
+      <ToolbarGroup>
+        <UndoRedoButton action="undo" />
+        <UndoRedoButton action="redo" />
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <HeadingDropdownMenu levels={[1, 2, 3, 4]} portal={isMobile} />
+        <ListDropdownMenu
+          types={["bulletList", "orderedList", "taskList"]}
+          portal={isMobile}
+        />
+        <BlockquoteButton />
+        <CodeBlockButton />
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <MarkButton type="bold" />
+        <MarkButton type="italic" />
+        <MarkButton type="strike" />
+        <MarkButton type="code" />
+        <MarkButton type="underline" />
+        {!isMobile ? (
+          <ColorHighlightPopover />
+        ) : (
+          <ColorHighlightPopoverButton onClick={onHighlighterClick} />
+        )}
+        {!isMobile ? <LinkPopover /> : <LinkButton onClick={onLinkClick} />}
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <MarkButton type="superscript" />
+        <MarkButton type="subscript" />
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <TextAlignButton align="left" />
+        <TextAlignButton align="center" />
+        <TextAlignButton align="right" />
+        <TextAlignButton align="justify" />
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <ImageUploadButton text="Add" />
+      </ToolbarGroup>
+
+      <Spacer />
+
+      {isMobile && <ToolbarSeparator />}
+
+      <ToolbarGroup>
+        <ThemeToggle />
+      </ToolbarGroup>
+    </>
+  )
+}
+
+const MobileToolbarContent = ({
+  type,
+  onBack,
+}: {
+  type: "highlighter" | "link"
+  onBack: () => void
+}) => (
+  <>
+    <ToolbarGroup>
+      <Button data-style="ghost" onClick={onBack}>
+        <ArrowLeftIcon className="tiptap-button-icon" />
+        {type === "highlighter" ? (
+          <HighlighterIcon className="tiptap-button-icon" />
+        ) : (
+          <LinkIcon className="tiptap-button-icon" />
+        )}
+      </Button>
+    </ToolbarGroup>
+
+    <ToolbarSeparator />
+
+    {type === "highlighter" ? (
+      <ColorHighlightPopoverContent />
+    ) : (
+      <LinkContent />
+    )}
+  </>
+)
+
+export function SimpleEditor() {
+  const isMobile = useIsMobile()
+  const { height } = useWindowSize()
+  const [mobileView, setMobileView] = React.useState<
+    "main" | "highlighter" | "link"
+  >("main")
+  const toolbarRef = React.useRef<HTMLDivElement>(null)
+
+  const editor = useEditor({
+    immediatelyRender: false,
+    shouldRerenderOnTransaction: false,
+    editorProps: {
+      attributes: {
+        autocomplete: "off",
+        autocorrect: "off",
+        autocapitalize: "off",
+        "aria-label": "Main content area, start typing to enter text.",
+        class: "simple-editor",
+      },
+    },
+    extensions: [
+      StarterKit.configure({
+        horizontalRule: false,
+        link: {
+          openOnClick: false,
+          enableClickSelection: true,
+        },
+      }),
+      HorizontalRule,
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Highlight.configure({ multicolor: true }),
+      Image,
+      Typography,
+      Superscript,
+      Subscript,
+      Selection,
+      ImageUploadNode.configure({
+        accept: "image/*",
+        maxSize: MAX_FILE_SIZE,
+        limit: 3,
+        upload: handleImageUpload,
+        onError: (error) => console.error("Upload failed:", error),
+      }),
+    ],
+    content,
+  })
+
+  const rect = useCursorVisibility({
+    editor,
+    overlayHeight: toolbarRef.current?.getBoundingClientRect().height ?? 0,
+  })
+
+  React.useEffect(() => {
+    if (!isMobile && mobileView !== "main") {
+      setMobileView("main")
+    }
+  }, [isMobile, mobileView])
+
+  return (
+    <div className="simple-editor-wrapper">
+      <EditorContext.Provider value={{ editor }}>
+        <Toolbar
+          ref={toolbarRef}
+          style={{
+            ...(isMobile
+              ? {
+                bottom: `calc(100% - ${height - rect.y}px)`,
+              }
+              : {}),
+          }}
+        >
+          {mobileView === "main" ? (
+            <MainToolbarContent
+              onHighlighterClick={() => setMobileView("highlighter")}
+              onLinkClick={() => setMobileView("link")}
+              isMobile={isMobile}
+            />
+          ) : (
+            <MobileToolbarContent
+              type={mobileView === "highlighter" ? "highlighter" : "link"}
+              onBack={() => setMobileView("main")}
+            />
+          )}
+        </Toolbar>
+
+        <EditorContent
+          editor={editor}
+          role="presentation"
+          className="simple-editor-content"
+        />
+      </EditorContext.Provider>
+    </div>
+  )
+}
diff --git a/components/tiptap-templates/simple/theme-toggle.tsx b/components/tiptap-templates/simple/theme-toggle.tsx
new file mode 100644
index 0000000..4164aa9
--- /dev/null
+++ b/components/tiptap-templates/simple/theme-toggle.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+
+// --- UI Primitives ---
+import { Button } from "@/components/tiptap-ui-primitive/button"
+
+// --- Icons ---
+import { MoonStarIcon } from "@/components/tiptap-icons/moon-star-icon"
+import { SunIcon } from "@/components/tiptap-icons/sun-icon"
+
+export function ThemeToggle() {
+  const [isDarkMode, setIsDarkMode] = React.useState<boolean>(false)
+
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+    const handleChange = () => setIsDarkMode(mediaQuery.matches)
+    mediaQuery.addEventListener("change", handleChange)
+    return () => mediaQuery.removeEventListener("change", handleChange)
+  }, [])
+
+  React.useEffect(() => {
+    const initialDarkMode =
+      !!document.querySelector('meta[name="color-scheme"][content="dark"]') ||
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    setIsDarkMode(initialDarkMode)
+  }, [])
+
+  React.useEffect(() => {
+    document.documentElement.classList.toggle("dark", isDarkMode)
+  }, [isDarkMode])
+
+  const toggleDarkMode = () => setIsDarkMode((isDark) => !isDark)
+
+  return (
+    <Button
+      onClick={toggleDarkMode}
+      aria-label={`Switch to ${isDarkMode ? "light" : "dark"} mode`}
+      data-style="ghost"
+    >
+      {isDarkMode ? (
+        <MoonStarIcon className="tiptap-button-icon" />
+      ) : (
+        <SunIcon className="tiptap-button-icon" />
+      )}
+    </Button>
+  )
+}
diff --git a/components/tiptap-ui-primitive/badge/badge-colors.scss b/components/tiptap-ui-primitive/badge/badge-colors.scss
new file mode 100644
index 0000000..8f8a988
--- /dev/null
+++ b/components/tiptap-ui-primitive/badge/badge-colors.scss
@@ -0,0 +1,395 @@
+.tiptap-badge {
+  /************************************************** 
+    Default 
+  **************************************************/
+
+  /* Light mode */
+  --tt-badge-border-color: var(--tt-gray-light-a-200);
+  --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
+  --tt-badge-border-color-emphasized: var(--tt-gray-light-a-600);
+  --tt-badge-text-color: var(--tt-gray-light-a-500);
+  --tt-badge-text-color-subdued: var(
+    --tt-gray-light-a-400
+  ); //less important badge
+  --tt-badge-text-color-emphasized: var(
+    --tt-gray-light-a-600
+  ); //more important badge
+  --tt-badge-bg-color: var(--white);
+  --tt-badge-bg-color-subdued: var(--white); //less important badge
+  --tt-badge-bg-color-emphasized: var(--white); //more important badge
+  --tt-badge-icon-color: var(--tt-gray-light-a-500);
+  --tt-badge-icon-color-subdued: var(
+    --tt-gray-light-a-400
+  ); //less important badge
+  --tt-badge-icon-color-emphasized: var(
+    --tt-brand-color-600
+  ); //more important badge
+
+  /* Dark mode */
+  .dark & {
+    --tt-badge-border-color: var(--tt-gray-dark-a-200);
+    --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
+    --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
+    --tt-badge-text-color: var(--tt-gray-dark-a-500);
+    --tt-badge-text-color-subdued: var(
+      --tt-gray-dark-a-400
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(
+      --tt-gray-dark-a-600
+    ); //more important badge
+    --tt-badge-bg-color: var(--black);
+    --tt-badge-bg-color-subdued: var(--black); //less important badge
+    --tt-badge-bg-color-emphasized: var(--black); //more important badge
+    --tt-badge-icon-color: var(--tt-gray-dark-a-500);
+    --tt-badge-icon-color-subdued: var(
+      --tt-gray-dark-a-400
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(
+      --tt-brand-color-400
+    ); //more important badge
+  }
+
+  /************************************************** 
+    Ghost 
+  **************************************************/
+
+  &[data-style="ghost"] {
+    /* Light mode */
+    --tt-badge-border-color: var(--tt-gray-light-a-200);
+    --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
+    --tt-badge-border-color-emphasized: var(--tt-gray-light-a-600);
+    --tt-badge-text-color: var(--tt-gray-light-a-500);
+    --tt-badge-text-color-subdued: var(
+      --tt-gray-light-a-400
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(
+      --tt-gray-light-a-600
+    ); //more important badge
+    --tt-badge-bg-color: var(--transparent);
+    --tt-badge-bg-color-subdued: var(--transparent); //less important badge
+    --tt-badge-bg-color-emphasized: var(--transparent); //more important badge
+    --tt-badge-icon-color: var(--tt-gray-light-a-500);
+    --tt-badge-icon-color-subdued: var(
+      --tt-gray-light-a-400
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(
+      --tt-brand-color-600
+    ); //more important badge
+
+    /* Dark mode */
+    .dark & {
+      --tt-badge-border-color: var(--tt-gray-dark-a-200);
+      --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
+      --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
+      --tt-badge-text-color: var(--tt-gray-dark-a-500);
+      --tt-badge-text-color-subdued: var(
+        --tt-gray-dark-a-400
+      ); //less important badge
+      --tt-badge-text-color-emphasized: var(
+        --tt-gray-dark-a-600
+      ); //more important badge
+      --tt-badge-bg-color: var(--transparent);
+      --tt-badge-bg-color-subdued: var(--transparent); //less important badge
+      --tt-badge-bg-color-emphasized: var(--transparent); //more important badge
+      --tt-badge-icon-color: var(--tt-gray-dark-a-500);
+      --tt-badge-icon-color-subdued: var(
+        --tt-gray-dark-a-400
+      ); //less important badge
+      --tt-badge-icon-color-emphasized: var(
+        --tt-brand-color-400
+      ); //more important badge
+    }
+  }
+
+  /************************************************** 
+    Gray 
+  **************************************************/
+
+  &[data-style="gray"] {
+    /* Light mode */
+    --tt-badge-border-color: var(--tt-gray-light-a-200);
+    --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
+    --tt-badge-border-color-emphasized: var(--tt-gray-light-a-500);
+    --tt-badge-text-color: var(--tt-gray-light-a-500);
+    --tt-badge-text-color-subdued: var(
+      --tt-gray-light-a-400
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(--white); //more important badge
+    --tt-badge-bg-color: var(--tt-gray-light-a-100);
+    --tt-badge-bg-color-subdued: var(
+      --tt-gray-light-a-50
+    ); //less important badge
+    --tt-badge-bg-color-emphasized: var(
+      --tt-gray-light-a-700
+    ); //more important badge
+    --tt-badge-icon-color: var(--tt-gray-light-a-500);
+    --tt-badge-icon-color-subdued: var(
+      --tt-gray-light-a-400
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(--white); //more important badge
+
+    /* Dark mode */
+    .dark & {
+      --tt-badge-border-color: var(--tt-gray-dark-a-200);
+      --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
+      --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
+      --tt-badge-text-color: var(--tt-gray-dark-a-500);
+      --tt-badge-text-color-subdued: var(
+        --tt-gray-dark-a-400
+      ); //less important badge
+      --tt-badge-text-color-emphasized: var(--black); //more important badge
+      --tt-badge-bg-color: var(--tt-gray-dark-a-100);
+      --tt-badge-bg-color-subdued: var(
+        --tt-gray-dark-a-50
+      ); //less important badge
+      --tt-badge-bg-color-emphasized: var(
+        --tt-gray-dark-a-800
+      ); //more important badge
+      --tt-badge-icon-color: var(--tt-gray-dark-a-500);
+      --tt-badge-icon-color-subdued: var(
+        --tt-gray-dark-a-400
+      ); //less important badge
+      --tt-badge-icon-color-emphasized: var(--black); //more important badge
+    }
+  }
+
+  /************************************************** 
+    Green 
+  **************************************************/
+
+  &[data-style="green"] {
+    /* Light mode */
+    --tt-badge-border-color: var(--tt-color-green-inc-2);
+    --tt-badge-border-color-subdued: var(--tt-color-green-inc-3);
+    --tt-badge-border-color-emphasized: var(--tt-color-green-dec-2);
+    --tt-badge-text-color: var(--tt-color-green-dec-3);
+    --tt-badge-text-color-subdued: var(
+      --tt-color-green-dec-2
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(
+      --tt-color-green-inc-5
+    ); //more important badge
+    --tt-badge-bg-color: var(--tt-color-green-inc-4);
+    --tt-badge-bg-color-subdued: var(
+      --tt-color-green-inc-5
+    ); //less important badge
+    --tt-badge-bg-color-emphasized: var(
+      --tt-color-green-dec-1
+    ); //more important badge
+    --tt-badge-icon-color: var(--tt-color-green-dec-3);
+    --tt-badge-icon-color-subdued: var(
+      --tt-color-green-dec-2
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(
+      --tt-color-green-inc-5
+    ); //more important badge
+
+    /* Dark mode */
+    .dark & {
+      --tt-badge-border-color: var(--tt-color-green-dec-2);
+      --tt-badge-border-color-subdued: var(--tt-color-green-dec-3);
+      --tt-badge-border-color-emphasized: var(--tt-color-green-base);
+      --tt-badge-text-color: var(--tt-color-green-inc-3);
+      --tt-badge-text-color-subdued: var(
+        --tt-color-green-inc-2
+      ); //less important badge
+      --tt-badge-text-color-emphasized: var(
+        --tt-color-green-dec-5
+      ); //more important badge
+      --tt-badge-bg-color: var(--tt-color-green-dec-4);
+      --tt-badge-bg-color-subdued: var(
+        --tt-color-green-dec-5
+      ); //less important badge
+      --tt-badge-bg-color-emphasized: var(
+        --tt-color-green-inc-1
+      ); //more important badge
+      --tt-badge-icon-color: var(--tt-color-green-inc-3);
+      --tt-badge-icon-color-subdued: var(
+        --tt-color-green-inc-2
+      ); //less important badge
+      --tt-badge-icon-color-emphasized: var(
+        --tt-color-green-dec-5
+      ); //more important badge
+    }
+  }
+
+  /************************************************** 
+    Yellow 
+  **************************************************/
+
+  &[data-style="yellow"] {
+    /* Light mode */
+    --tt-badge-border-color: var(--tt-color-yellow-inc-2);
+    --tt-badge-border-color-subdued: var(--tt-color-yellow-inc-3);
+    --tt-badge-border-color-emphasized: var(--tt-color-yellow-dec-1);
+    --tt-badge-text-color: var(--tt-color-yellow-dec-3);
+    --tt-badge-text-color-subdued: var(
+      --tt-color-yellow-dec-2
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(
+      --tt-color-yellow-dec-3
+    ); //more important badge
+    --tt-badge-bg-color: var(--tt-color-yellow-inc-4);
+    --tt-badge-bg-color-subdued: var(
+      --tt-color-yellow-inc-5
+    ); //less important badge
+    --tt-badge-bg-color-emphasized: var(
+      --tt-color-yellow-base
+    ); //more important badge
+    --tt-badge-icon-color: var(--tt-color-yellow-dec-3);
+    --tt-badge-icon-color-subdued: var(
+      --tt-color-yellow-dec-2
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(
+      --tt-color-yellow-dec-3
+    ); //more important badge
+
+    /* Dark mode */
+    .dark & {
+      --tt-badge-border-color: var(--tt-color-yellow-dec-2);
+      --tt-badge-border-color-subdued: var(--tt-color-yellow-dec-3);
+      --tt-badge-border-color-emphasized: var(--tt-color-yellow-inc-1);
+      --tt-badge-text-color: var(--tt-color-yellow-inc-3);
+      --tt-badge-text-color-subdued: var(
+        --tt-color-yellow-inc-2
+      ); //less important badge
+      --tt-badge-text-color-emphasized: var(
+        --tt-color-yellow-dec-3
+      ); //more important badge
+      --tt-badge-bg-color: var(--tt-color-yellow-dec-4);
+      --tt-badge-bg-color-subdued: var(
+        --tt-color-yellow-dec-5
+      ); //less important badge
+      --tt-badge-bg-color-emphasized: var(
+        --tt-color-yellow-base
+      ); //more important badge
+      --tt-badge-icon-color: var(--tt-color-yellow-inc-3);
+      --tt-badge-icon-color-subdued: var(
+        --tt-color-yellow-inc-2
+      ); //less important badge
+      --tt-badge-icon-color-emphasized: var(
+        --tt-color-yellow-dec-3
+      ); //more important badge
+    }
+  }
+
+  /************************************************** 
+    Red 
+  **************************************************/
+
+  &[data-style="red"] {
+    /* Light mode */
+    --tt-badge-border-color: var(--tt-color-red-inc-2);
+    --tt-badge-border-color-subdued: var(--tt-color-red-inc-3);
+    --tt-badge-border-color-emphasized: var(--tt-color-red-dec-2);
+    --tt-badge-text-color: var(--tt-color-red-dec-3);
+    --tt-badge-text-color-subdued: var(
+      --tt-color-red-dec-2
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(
+      --tt-color-red-inc-5
+    ); //more important badge
+    --tt-badge-bg-color: var(--tt-color-red-inc-4);
+    --tt-badge-bg-color-subdued: var(
+      --tt-color-red-inc-5
+    ); //less important badge
+    --tt-badge-bg-color-emphasized: var(
+      --tt-color-red-dec-1
+    ); //more important badge
+    --tt-badge-icon-color: var(--tt-color-red-dec-3);
+    --tt-badge-icon-color-subdued: var(
+      --tt-color-red-dec-2
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(
+      --tt-color-red-inc-5
+    ); //more important badge
+
+    /* Dark mode */
+    .dark & {
+      --tt-badge-border-color: var(--tt-color-red-dec-2);
+      --tt-badge-border-color-subdued: var(--tt-color-red-dec-3);
+      --tt-badge-border-color-emphasized: var(--tt-color-red-base);
+      --tt-badge-text-color: var(--tt-color-red-inc-3);
+      --tt-badge-text-color-subdued: var(
+        --tt-color-red-inc-2
+      ); //less important badge
+      --tt-badge-text-color-emphasized: var(
+        --tt-color-red-dec-5
+      ); //more important badge
+      --tt-badge-bg-color: var(--tt-color-red-dec-4);
+      --tt-badge-bg-color-subdued: var(
+        --tt-color-red-dec-5
+      ); //less important badge
+      --tt-badge-bg-color-emphasized: var(
+        --tt-color-red-inc-1
+      ); //more important badge
+      --tt-badge-icon-color: var(--tt-color-red-inc-3);
+      --tt-badge-icon-color-subdued: var(
+        --tt-color-red-inc-2
+      ); //less important badge
+      --tt-badge-icon-color-emphasized: var(
+        --tt-color-red-dec-5
+      ); //more important badge
+    }
+  }
+
+  /************************************************** 
+    Brand 
+  **************************************************/
+
+  &[data-style="brand"] {
+    /* Light mode */
+    --tt-badge-border-color: var(--tt-brand-color-300);
+    --tt-badge-border-color-subdued: var(--tt-brand-color-200);
+    --tt-badge-border-color-emphasized: var(--tt-brand-color-600);
+    --tt-badge-text-color: var(--tt-brand-color-800);
+    --tt-badge-text-color-subdued: var(
+      --tt-brand-color-700
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(
+      --tt-brand-color-50
+    ); //more important badge
+    --tt-badge-bg-color: var(--tt-brand-color-100);
+    --tt-badge-bg-color-subdued: var(
+      --tt-brand-color-50
+    ); //less important badge
+    --tt-badge-bg-color-emphasized: var(
+      --tt-brand-color-600
+    ); //more important badge
+    --tt-badge-icon-color: var(--tt-brand-color-800);
+    --tt-badge-icon-color-subdued: var(
+      --tt-brand-color-700
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(
+      --tt-brand-color-100
+    ); //more important badge
+
+    /* Dark mode */
+    .dark & {
+      --tt-badge-border-color: var(--tt-brand-color-700);
+      --tt-badge-border-color-subdued: var(--tt-brand-color-800);
+      --tt-badge-border-color-emphasized: var(--tt-brand-color-400);
+      --tt-badge-text-color: var(--tt-brand-color-200);
+      --tt-badge-text-color-subdued: var(
+        --tt-brand-color-300
+      ); //less important badge
+      --tt-badge-text-color-emphasized: var(
+        --tt-brand-color-950
+      ); //more important badge
+      --tt-badge-bg-color: var(--tt-brand-color-900);
+      --tt-badge-bg-color-subdued: var(
+        --tt-brand-color-950
+      ); //less important badge
+      --tt-badge-bg-color-emphasized: var(
+        --tt-brand-color-400
+      ); //more important badge
+      --tt-badge-icon-color: var(--tt-brand-color-200);
+      --tt-badge-icon-color-subdued: var(
+        --tt-brand-color-300
+      ); //less important badge
+      --tt-badge-icon-color-emphasized: var(
+        --tt-brand-color-900
+      ); //more important badge
+    }
+  }
+}
diff --git a/components/tiptap-ui-primitive/badge/badge-group.scss b/components/tiptap-ui-primitive/badge/badge-group.scss
new file mode 100644
index 0000000..91bd45b
--- /dev/null
+++ b/components/tiptap-ui-primitive/badge/badge-group.scss
@@ -0,0 +1,16 @@
+.tiptap-badge-group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.tiptap-badge-group {
+  [data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  [data-orientation="horizontal"] {
+    flex-direction: row;
+  }
+}
diff --git a/components/tiptap-ui-primitive/badge/badge.scss b/components/tiptap-ui-primitive/badge/badge.scss
new file mode 100644
index 0000000..b2ca9a8
--- /dev/null
+++ b/components/tiptap-ui-primitive/badge/badge.scss
@@ -0,0 +1,99 @@
+.tiptap-badge {
+  font-size: 0.625rem;
+  font-weight: 700;
+  font-feature-settings:
+    "salt" on,
+    "cv01" on;
+  line-height: 1.15;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: solid 1px;
+  border-radius: var(--tt-radius-sm, 0.375rem);
+  transition-property: background, color, opacity;
+  transition-duration: var(--tt-transition-duration-default);
+  transition-timing-function: var(--tt-transition-easing-default);
+
+  /* button size large */
+  &[data-size="large"] {
+    font-size: 0.75rem;
+    height: 1.5rem;
+    min-width: 1.5rem;
+    padding: 0.375rem;
+    border-radius: var(--tt-radius-md, 0.375rem);
+  }
+
+  /* button size small */
+  &[data-size="small"] {
+    height: 1rem;
+    min-width: 1rem;
+    padding: 0.125rem;
+    border-radius: var(--tt-radius-xs, 0.25rem);
+  }
+
+  /* trim / expand text of the button */
+  .tiptap-badge-text {
+    padding: 0 0.125rem;
+    flex-grow: 1;
+    text-align: left;
+  }
+
+  &[data-text-trim="on"] {
+    .tiptap-badge-text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  /* standard icon, what is used */
+  .tiptap-badge-icon {
+    pointer-events: none;
+    flex-shrink: 0;
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  &[data-size="large"] .tiptap-badge-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+}
+
+/* --------------------------------------------
+----------- BADGE COLOR SETTINGS -------------
+-------------------------------------------- */
+
+.tiptap-badge {
+  background-color: var(--tt-badge-bg-color);
+  border-color: var(--tt-badge-border-color);
+  color: var(--tt-badge-text-color);
+
+  .tiptap-badge-icon {
+    color: var(--tt-badge-icon-color);
+  }
+
+  /* Emphasized */
+  &[data-appearance="emphasized"] {
+    background-color: var(--tt-badge-bg-color-emphasized);
+    border-color: var(--tt-badge-border-color-emphasized);
+    color: var(--tt-badge-text-color-emphasized);
+
+    .tiptap-badge-icon {
+      color: var(--tt-badge-icon-color-emphasized);
+    }
+  }
+
+  /* Subdued */
+  &[data-appearance="subdued"] {
+    background-color: var(--tt-badge-bg-color-subdued);
+    border-color: var(--tt-badge-border-color-subdued);
+    color: var(--tt-badge-text-color-subdued);
+
+    .tiptap-badge-icon {
+      color: var(--tt-badge-icon-color-subdued);
+    }
+  }
+}
diff --git a/components/tiptap-ui-primitive/badge/badge.tsx b/components/tiptap-ui-primitive/badge/badge.tsx
new file mode 100644
index 0000000..2afa5ea
--- /dev/null
+++ b/components/tiptap-ui-primitive/badge/badge.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import "@/components/tiptap-ui-primitive/badge/badge-colors.scss"
+import "@/components/tiptap-ui-primitive/badge/badge-group.scss"
+import "@/components/tiptap-ui-primitive/badge/badge.scss"
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "ghost" | "white" | "gray" | "green" | "default"
+  size?: "default" | "small"
+  appearance?: "default" | "subdued" | "emphasized"
+  trimText?: boolean
+}
+
+export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  (
+    {
+      variant,
+      size = "default",
+      appearance = "default",
+      trimText = false,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={`tiptap-badge ${className || ""}`}
+        data-style={variant}
+        data-size={size}
+        data-appearance={appearance}
+        data-text-trim={trimText ? "on" : "off"}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+Badge.displayName = "Badge"
+
+export default Badge
diff --git a/components/tiptap-ui-primitive/badge/index.tsx b/components/tiptap-ui-primitive/badge/index.tsx
new file mode 100644
index 0000000..051fa6e
--- /dev/null
+++ b/components/tiptap-ui-primitive/badge/index.tsx
@@ -0,0 +1 @@
+export * from "./badge"
diff --git a/components/tiptap-ui-primitive/button/button-colors.scss b/components/tiptap-ui-primitive/button/button-colors.scss
new file mode 100644
index 0000000..fc0dd35
--- /dev/null
+++ b/components/tiptap-ui-primitive/button/button-colors.scss
@@ -0,0 +1,429 @@
+.tiptap-button {
+  /************************************************** 
+      Default button background color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-bg-color: var(--tt-gray-light-a-100);
+  --tt-button-hover-bg-color: var(--tt-gray-light-200);
+  --tt-button-active-bg-color: var(--tt-gray-light-a-200);
+  --tt-button-active-bg-color-emphasized: var(
+    --tt-brand-color-100
+  ); //more important active state
+  --tt-button-active-bg-color-subdued: var(
+    --tt-gray-light-a-200
+  ); //less important active state
+  --tt-button-active-hover-bg-color: var(--tt-gray-light-300);
+  --tt-button-active-hover-bg-color-emphasized: var(
+    --tt-brand-color-200
+  ); //more important active state hover
+  --tt-button-active-hover-bg-color-subdued: var(
+    --tt-gray-light-a-300
+  ); //less important active state hover
+  --tt-button-disabled-bg-color: var(--tt-gray-light-a-50);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-bg-color: var(--tt-gray-dark-a-100);
+    --tt-button-hover-bg-color: var(--tt-gray-dark-200);
+    --tt-button-active-bg-color: var(--tt-gray-dark-a-200);
+    --tt-button-active-bg-color-emphasized: var(
+      --tt-brand-color-900
+    ); //more important active state
+    --tt-button-active-bg-color-subdued: var(
+      --tt-gray-dark-a-200
+    ); //less important active state
+    --tt-button-active-hover-bg-color: var(--tt-gray-dark-300);
+    --tt-button-active-hover-bg-color-emphasized: var(
+      --tt-brand-color-800
+    ); //more important active state hover
+    --tt-button-active-hover-bg-color-subdued: var(
+      --tt-gray-dark-a-300
+    ); //less important active state hover
+    --tt-button-disabled-bg-color: var(--tt-gray-dark-a-50);
+  }
+
+  /************************************************** 
+      Default button text color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-text-color: var(--tt-gray-light-a-600);
+  --tt-button-hover-text-color: var(--tt-gray-light-a-900);
+  --tt-button-active-text-color: var(--tt-gray-light-a-900);
+  --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
+  --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
+  --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-text-color: var(--tt-gray-dark-a-600);
+    --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
+    --tt-button-active-text-color: var(--tt-gray-dark-a-900);
+    --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
+    --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
+    --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
+  }
+
+  /************************************************** 
+      Default button icon color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-icon-color: var(--tt-gray-light-a-600);
+  --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
+  --tt-button-active-icon-color: var(--tt-brand-color-500);
+  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
+  --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
+  --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
+    --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
+    --tt-button-active-icon-color: var(--tt-brand-color-400);
+    --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
+    --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
+    --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
+  }
+
+  /************************************************** 
+      Default button subicon color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
+  --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
+  --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
+  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
+  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
+  --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
+    --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
+    --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
+    --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
+    --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
+    --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
+  }
+
+  /************************************************** 
+      Default button dropdown / arrows color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
+  --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
+  --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
+  --tt-button-active-dropdown-arrows-color-emphasized: var(
+    --tt-gray-light-a-700
+  );
+  --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-light-a-600);
+  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
+    --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
+    --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
+    --tt-button-active-dropdown-arrows-color-emphasized: var(
+      --tt-gray-dark-a-700
+    );
+    --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-dark-a-600);
+    --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
+  }
+
+  /* ----------------------------------------------------------------
+      --------------------------- GHOST BUTTON --------------------------
+      ---------------------------------------------------------------- */
+
+  &[data-style="ghost"] {
+    /************************************************** 
+        Ghost button background color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-bg-color: var(--transparent);
+    --tt-button-hover-bg-color: var(--tt-gray-light-200);
+    --tt-button-active-bg-color: var(--tt-gray-light-a-100);
+    --tt-button-active-bg-color-emphasized: var(
+      --tt-brand-color-100
+    ); //more important active state
+    --tt-button-active-bg-color-subdued: var(
+      --tt-gray-light-a-100
+    ); //less important active state
+    --tt-button-active-hover-bg-color: var(--tt-gray-light-200);
+    --tt-button-active-hover-bg-color-emphasized: var(
+      --tt-brand-color-200
+    ); //more important active state hover
+    --tt-button-active-hover-bg-color-subdued: var(
+      --tt-gray-light-a-200
+    ); //less important active state hover
+    --tt-button-disabled-bg-color: var(--transparent);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-bg-color: var(--transparent);
+      --tt-button-hover-bg-color: var(--tt-gray-dark-200);
+      --tt-button-active-bg-color: var(--tt-gray-dark-a-100);
+      --tt-button-active-bg-color-emphasized: var(
+        --tt-brand-color-900
+      ); //more important active state
+      --tt-button-active-bg-color-subdued: var(
+        --tt-gray-dark-a-100
+      ); //less important active state
+      --tt-button-active-hover-bg-color: var(--tt-gray-dark-200);
+      --tt-button-active-hover-bg-color-emphasized: var(
+        --tt-brand-color-800
+      ); //more important active state hover
+      --tt-button-active-hover-bg-color-subdued: var(
+        --tt-gray-dark-a-200
+      ); //less important active state hover
+      --tt-button-disabled-bg-color: var(--transparent);
+    }
+
+    /************************************************** 
+        Ghost button text color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-text-color: var(--tt-gray-light-a-600);
+    --tt-button-hover-text-color: var(--tt-gray-light-a-900);
+    --tt-button-active-text-color: var(--tt-gray-light-a-900);
+    --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
+    --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
+    --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-text-color: var(--tt-gray-dark-a-600);
+      --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
+      --tt-button-active-text-color: var(--tt-gray-dark-a-900);
+      --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
+      --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
+      --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
+    }
+
+    /************************************************** 
+        Ghost button icon color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-icon-color: var(--tt-gray-light-a-600);
+    --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
+    --tt-button-active-icon-color: var(--tt-brand-color-500);
+    --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
+    --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
+    --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
+      --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
+      --tt-button-active-icon-color: var(--tt-brand-color-400);
+      --tt-button-active-icon-color-emphasized: var(--tt-brand-color-300);
+      --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
+      --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
+    }
+
+    /************************************************** 
+        Ghost button subicon color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
+    --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
+    --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
+    --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
+    --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
+    --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
+      --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
+      --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
+      --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
+      --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
+      --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
+    }
+
+    /************************************************** 
+        Ghost button dropdown / arrows color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
+    --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
+    --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
+    --tt-button-active-dropdown-arrows-color-emphasized: var(
+      --tt-gray-light-a-700
+    );
+    --tt-button-active-dropdown-arrows-color-subdued: var(
+      --tt-gray-light-a-600
+    );
+    --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
+      --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
+      --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
+      --tt-button-active-dropdown-arrows-color-emphasized: var(
+        --tt-gray-dark-a-700
+      );
+      --tt-button-active-dropdown-arrows-color-subdued: var(
+        --tt-gray-dark-a-600
+      );
+      --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
+    }
+  }
+
+  /* ----------------------------------------------------------------
+      -------------------------- PRIMARY BUTTON -------------------------
+      ---------------------------------------------------------------- */
+
+  &[data-style="primary"] {
+    /************************************************** 
+        Primary button background color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-bg-color: var(--tt-brand-color-500);
+    --tt-button-hover-bg-color: var(--tt-brand-color-600);
+    --tt-button-active-bg-color: var(--tt-brand-color-100);
+    --tt-button-active-bg-color-emphasized: var(
+      --tt-brand-color-100
+    ); //more important active state
+    --tt-button-active-bg-color-subdued: var(
+      --tt-brand-color-100
+    ); //less important active state
+    --tt-button-active-hover-bg-color: var(--tt-brand-color-200);
+    --tt-button-active-hover-bg-color-emphasized: var(
+      --tt-brand-color-200
+    ); //more important active state hover
+    --tt-button-active-hover-bg-color-subdued: var(
+      --tt-brand-color-200
+    ); //less important active state hover
+    --tt-button-disabled-bg-color: var(--tt-gray-light-a-100);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-bg-color: var(--tt-brand-color-500);
+      --tt-button-hover-bg-color: var(--tt-brand-color-600);
+      --tt-button-active-bg-color: var(--tt-brand-color-900);
+      --tt-button-active-bg-color-emphasized: var(
+        --tt-brand-color-900
+      ); //more important active state
+      --tt-button-active-bg-color-subdued: var(
+        --tt-brand-color-900
+      ); //less important active state
+      --tt-button-active-hover-bg-color: var(--tt-brand-color-800);
+      --tt-button-active-hover-bg-color-emphasized: var(
+        --tt-brand-color-800
+      ); //more important active state hover
+      --tt-button-active-hover-bg-color-subdued: var(
+        --tt-brand-color-800
+      ); //less important active state hover
+      --tt-button-disabled-bg-color: var(--tt-gray-dark-a-100);
+    }
+
+    /************************************************** 
+        Primary button text color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-text-color: var(--white);
+    --tt-button-hover-text-color: var(--white);
+    --tt-button-active-text-color: var(--tt-gray-light-a-900);
+    --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
+    --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
+    --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-text-color: var(--white);
+      --tt-button-hover-text-color: var(--white);
+      --tt-button-active-text-color: var(--tt-gray-dark-a-900);
+      --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
+      --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
+      --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
+    }
+
+    /************************************************** 
+        Primary button icon color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-icon-color: var(--white);
+    --tt-button-hover-icon-color: var(--white);
+    --tt-button-active-icon-color: var(--tt-brand-color-600);
+    --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
+    --tt-button-active-icon-color-subdued: var(--tt-brand-color-600);
+    --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-icon-color: var(--white);
+      --tt-button-hover-icon-color: var(--white);
+      --tt-button-active-icon-color: var(--tt-brand-color-400);
+      --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
+      --tt-button-active-icon-color-subdued: var(--tt-brand-color-400);
+      --tt-button-disabled-icon-color: var(--tt-gray-dark-a-300);
+    }
+
+    /************************************************** 
+        Primary button subicon color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-500);
+    --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
+    --tt-button-active-icon-sub-color: var(--tt-gray-light-a-500);
+    --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
+    --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-500);
+    --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-400);
+      --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
+      --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
+      --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
+      --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
+      --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
+    }
+
+    /************************************************** 
+        Primary button dropdown / arrows color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-dropdown-arrows-color: var(--white);
+    --tt-button-hover-dropdown-arrows-color: var(--white);
+    --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-700);
+    --tt-button-active-dropdown-arrows-color-emphasized: var(
+      --tt-gray-light-a-700
+    );
+    --tt-button-active-dropdown-arrows-color-subdued: var(
+      --tt-gray-light-a-700
+    );
+    --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-dropdown-arrows-color: var(--white);
+      --tt-button-hover-dropdown-arrows-color: var(--white);
+      --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
+      --tt-button-active-dropdown-arrows-color-emphasized: var(
+        --tt-gray-dark-a-600
+      );
+      --tt-button-active-dropdown-arrows-color-subdued: var(
+        --tt-gray-dark-a-600
+      );
+      --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
+    }
+  }
+}
diff --git a/components/tiptap-ui-primitive/button/button-group.scss b/components/tiptap-ui-primitive/button/button-group.scss
new file mode 100644
index 0000000..59fd256
--- /dev/null
+++ b/components/tiptap-ui-primitive/button/button-group.scss
@@ -0,0 +1,22 @@
+.tiptap-button-group {
+  position: relative;
+  display: flex;
+  vertical-align: middle;
+
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    min-width: max-content;
+
+    > .tiptap-button {
+      width: 100%;
+    }
+  }
+
+  &[data-orientation="horizontal"] {
+    gap: 0.125rem;
+    flex-direction: row;
+    align-items: center;
+  }
+}
diff --git a/components/tiptap-ui-primitive/button/button.scss b/components/tiptap-ui-primitive/button/button.scss
new file mode 100644
index 0000000..32d1499
--- /dev/null
+++ b/components/tiptap-ui-primitive/button/button.scss
@@ -0,0 +1,314 @@
+.tiptap-button {
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-feature-settings:
+    "salt" on,
+    "cv01" on;
+  line-height: 1.15;
+  height: 2rem;
+  min-width: 2rem;
+  border: none;
+  padding: 0.5rem;
+  gap: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--tt-radius-lg, 0.75rem);
+  transition-property: background, color, opacity;
+  transition-duration: var(--tt-transition-duration-default);
+  transition-timing-function: var(--tt-transition-easing-default);
+
+  // focus-visible
+  &:focus-visible {
+    outline: none;
+  }
+
+  &[data-highlighted="true"],
+  &[data-focus-visible="true"] {
+    background-color: var(--tt-button-hover-bg-color);
+    color: var(--tt-button-hover-text-color);
+    // outline: 2px solid var(--tt-button-active-icon-color);
+  }
+
+  &[data-weight="small"] {
+    width: 1.5rem;
+    min-width: 1.5rem;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  /* button size large */
+  &[data-size="large"] {
+    font-size: 0.9375rem;
+    height: 2.375rem;
+    min-width: 2.375rem;
+    padding: 0.625rem;
+  }
+
+  /* button size small */
+  &[data-size="small"] {
+    font-size: 0.75rem;
+    line-height: 1.2;
+    height: 1.5rem;
+    min-width: 1.5rem;
+    padding: 0.3125rem;
+    border-radius: var(--tt-radius-md, 0.5rem);
+  }
+
+  /* trim / expand text of the button */
+  .tiptap-button-text {
+    padding: 0 0.125rem;
+    flex-grow: 1;
+    text-align: left;
+    line-height: 1.5rem;
+  }
+
+  &[data-text-trim="on"] {
+    .tiptap-button-text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  /* global icon settings */
+  .tiptap-button-icon,
+  .tiptap-button-icon-sub,
+  .tiptap-button-dropdown-arrows,
+  .tiptap-button-dropdown-small {
+    flex-shrink: 0;
+  }
+
+  /* standard icon, what is used */
+  .tiptap-button-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &[data-size="large"] .tiptap-button-icon {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  &[data-size="small"] .tiptap-button-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* if 2 icons are used and this icon should be more subtle */
+  .tiptap-button-icon-sub {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &[data-size="large"] .tiptap-button-icon-sub {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  &[data-size="small"] .tiptap-button-icon-sub {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* dropdown menus or arrows that are slightly smaller */
+  .tiptap-button-dropdown-arrows {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  &[data-size="large"] .tiptap-button-dropdown-arrows {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  &[data-size="small"] .tiptap-button-dropdown-arrows {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  /* dropdown menu for icon buttons only */
+  .tiptap-button-dropdown-small {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  &[data-size="large"] .tiptap-button-dropdown-small {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  &[data-size="small"] .tiptap-button-dropdown-small {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  /* button only has icons */
+  &:has(> svg):not(:has(> :not(svg))) {
+    gap: 0.125rem;
+
+    &[data-size="large"],
+    &[data-size="small"] {
+      gap: 0.125rem;
+    }
+  }
+
+  /* button only has 2 icons and one of them is dropdown small */
+  &:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(
+      :has(> svg:nth-of-type(3))
+    ):not(:has(> .tiptap-button-text)) {
+    gap: 0;
+    padding-right: 0.25rem;
+
+    &[data-size="large"] {
+      padding-right: 0.375rem;
+    }
+
+    &[data-size="small"] {
+      padding-right: 0.25rem;
+    }
+  }
+
+  /* Emoji is used in a button */
+  .tiptap-button-emoji {
+    width: 1rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  &[data-size="large"] .tiptap-button-emoji {
+    width: 1.125rem;
+  }
+
+  &[data-size="small"] .tiptap-button-emoji {
+    width: 0.875rem;
+  }
+}
+
+/* --------------------------------------------
+----------- BUTTON COLOR SETTINGS -------------
+-------------------------------------------- */
+
+.tiptap-button {
+  background-color: var(--tt-button-default-bg-color);
+  color: var(--tt-button-default-text-color);
+
+  .tiptap-button-icon {
+    color: var(--tt-button-default-icon-color);
+  }
+
+  .tiptap-button-icon-sub {
+    color: var(--tt-button-default-icon-sub-color);
+  }
+
+  .tiptap-button-dropdown-arrows {
+    color: var(--tt-button-default-dropdown-arrows-color);
+  }
+
+  .tiptap-button-dropdown-small {
+    color: var(--tt-button-default-dropdown-arrows-color);
+  }
+
+  /* hover state of a button */
+  &:hover:not([data-active-item="true"]):not([disabled]),
+  &[data-active-item="true"]:not([disabled]),
+  &[data-highlighted]:not([disabled]):not([data-highlighted="false"]) {
+    background-color: var(--tt-button-hover-bg-color);
+    color: var(--tt-button-hover-text-color);
+
+    .tiptap-button-icon {
+      color: var(--tt-button-hover-icon-color);
+    }
+
+    .tiptap-button-icon-sub {
+      color: var(--tt-button-hover-icon-sub-color);
+    }
+
+    .tiptap-button-dropdown-arrows,
+    .tiptap-button-dropdown-small {
+      color: var(--tt-button-hover-dropdown-arrows-color);
+    }
+  }
+
+  /* Active state of a button */
+  &[data-active-state="on"]:not([disabled]),
+  &[data-state="open"]:not([disabled]) {
+    background-color: var(--tt-button-active-bg-color);
+    color: var(--tt-button-active-text-color);
+
+    .tiptap-button-icon {
+      color: var(--tt-button-active-icon-color);
+    }
+
+    .tiptap-button-icon-sub {
+      color: var(--tt-button-active-icon-sub-color);
+    }
+
+    .tiptap-button-dropdown-arrows,
+    .tiptap-button-dropdown-small {
+      color: var(--tt-button-active-dropdown-arrows-color);
+    }
+
+    &:hover {
+      background-color: var(--tt-button-active-hover-bg-color);
+    }
+
+    /* Emphasized */
+    &[data-appearance="emphasized"] {
+      background-color: var(--tt-button-active-bg-color-emphasized);
+      color: var(--tt-button-active-text-color-emphasized);
+
+      .tiptap-button-icon {
+        color: var(--tt-button-active-icon-color-emphasized);
+      }
+
+      .tiptap-button-icon-sub {
+        color: var(--tt-button-active-icon-sub-color-emphasized);
+      }
+
+      .tiptap-button-dropdown-arrows,
+      .tiptap-button-dropdown-small {
+        color: var(--tt-button-active-dropdown-arrows-color-emphasized);
+      }
+
+      &:hover {
+        background-color: var(--tt-button-active-hover-bg-color-emphasized);
+      }
+    }
+
+    /* Subdued */
+    &[data-appearance="subdued"] {
+      background-color: var(--tt-button-active-bg-color-subdued);
+      color: var(--tt-button-active-text-color-subdued);
+
+      .tiptap-button-icon {
+        color: var(--tt-button-active-icon-color-subdued);
+      }
+
+      .tiptap-button-icon-sub {
+        color: var(--tt-button-active-icon-sub-color-subdued);
+      }
+
+      .tiptap-button-dropdown-arrows,
+      .tiptap-button-dropdown-small {
+        color: var(--tt-button-active-dropdown-arrows-color-subdued);
+      }
+
+      &:hover {
+        background-color: var(--tt-button-active-hover-bg-color-subdued);
+
+        .tiptap-button-icon {
+          color: var(--tt-button-active-icon-color-subdued);
+        }
+      }
+    }
+  }
+
+  &:disabled {
+    background-color: var(--tt-button-disabled-bg-color);
+    color: var(--tt-button-disabled-text-color);
+
+    .tiptap-button-icon {
+      color: var(--tt-button-disabled-icon-color);
+    }
+  }
+}
diff --git a/components/tiptap-ui-primitive/button/button.tsx b/components/tiptap-ui-primitive/button/button.tsx
new file mode 100644
index 0000000..a3e2d9c
--- /dev/null
+++ b/components/tiptap-ui-primitive/button/button.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+// --- Tiptap UI Primitive ---
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/tiptap-ui-primitive/tooltip"
+
+// --- Lib ---
+import { cn, parseShortcutKeys } from "@/lib/tiptap-utils"
+
+import "@/components/tiptap-ui-primitive/button/button-colors.scss"
+import "@/components/tiptap-ui-primitive/button/button-group.scss"
+import "@/components/tiptap-ui-primitive/button/button.scss"
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string
+  showTooltip?: boolean
+  tooltip?: React.ReactNode
+  shortcutKeys?: string
+}
+
+export const ShortcutDisplay: React.FC<{ shortcuts: string[] }> = ({
+  shortcuts,
+}) => {
+  if (shortcuts.length === 0) return null
+
+  return (
+    <div>
+      {shortcuts.map((key, index) => (
+        <React.Fragment key={index}>
+          {index > 0 && <kbd>+</kbd>}
+          <kbd>{key}</kbd>
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      children,
+      tooltip,
+      showTooltip = true,
+      shortcutKeys,
+      "aria-label": ariaLabel,
+      ...props
+    },
+    ref
+  ) => {
+    const shortcuts = React.useMemo(
+      () => parseShortcutKeys({ shortcutKeys }),
+      [shortcutKeys]
+    )
+
+    if (!tooltip || !showTooltip) {
+      return (
+        <button
+          className={cn("tiptap-button", className)}
+          ref={ref}
+          aria-label={ariaLabel}
+          {...props}
+        >
+          {children}
+        </button>
+      )
+    }
+
+    return (
+      <Tooltip delay={200}>
+        <TooltipTrigger
+          className={cn("tiptap-button", className)}
+          ref={ref}
+          aria-label={ariaLabel}
+          {...props}
+        >
+          {children}
+        </TooltipTrigger>
+        <TooltipContent>
+          {tooltip}
+          <ShortcutDisplay shortcuts={shortcuts} />
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+)
+
+Button.displayName = "Button"
+
+export const ButtonGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    orientation?: "horizontal" | "vertical"
+  }
+>(({ className, children, orientation = "vertical", ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn("tiptap-button-group", className)}
+      data-orientation={orientation}
+      role="group"
+      {...props}
+    >
+      {children}
+    </div>
+  )
+})
+ButtonGroup.displayName = "ButtonGroup"
+
+export default Button
diff --git a/components/tiptap-ui-primitive/button/index.tsx b/components/tiptap-ui-primitive/button/index.tsx
new file mode 100644
index 0000000..e93d26f
--- /dev/null
+++ b/components/tiptap-ui-primitive/button/index.tsx
@@ -0,0 +1 @@
+export * from "./button"
diff --git a/components/tiptap-ui-primitive/card/card.scss b/components/tiptap-ui-primitive/card/card.scss
new file mode 100644
index 0000000..97b757e
--- /dev/null
+++ b/components/tiptap-ui-primitive/card/card.scss
@@ -0,0 +1,77 @@
+:root {
+  --tiptap-card-bg-color: var(--white);
+  --tiptap-card-border-color: var(--tt-gray-light-a-100);
+  --tiptap-card-group-label-color: var(--tt-gray-light-a-800);
+}
+
+.dark {
+  --tiptap-card-bg-color: var(--tt-gray-dark-50);
+  --tiptap-card-border-color: var(--tt-gray-dark-a-100);
+  --tiptap-card-group-label-color: var(--tt-gray-dark-a-800);
+}
+
+.tiptap-card {
+  --padding: 0.375rem;
+  --border-width: 1px;
+
+  border-radius: calc(var(--padding) + var(--tt-radius-lg));
+  box-shadow: var(--tt-shadow-elevated-md);
+  background-color: var(--tiptap-card-bg-color);
+  border: 1px solid var(--tiptap-card-border-color);
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  align-items: center;
+
+  position: relative;
+  min-width: 0;
+  word-wrap: break-word;
+  background-clip: border-box;
+}
+
+.tiptap-card-header {
+  padding: 0.375rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border-bottom: var(--border-width) solid var(--tiptap-card-border-color);
+}
+
+.tiptap-card-body {
+  padding: 0.375rem;
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+
+.tiptap-card-item-group {
+  position: relative;
+  display: flex;
+  vertical-align: middle;
+  min-width: max-content;
+
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &[data-orientation="horizontal"] {
+    gap: 0.25rem;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.tiptap-card-group-label {
+  padding-top: 0.75rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-bottom: 0.25rem;
+  line-height: normal;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: normal;
+  text-transform: capitalize;
+  color: var(--tiptap-card-group-label-color);
+}
diff --git a/components/tiptap-ui-primitive/card/card.tsx b/components/tiptap-ui-primitive/card/card.tsx
new file mode 100644
index 0000000..3fec720
--- /dev/null
+++ b/components/tiptap-ui-primitive/card/card.tsx
@@ -0,0 +1,74 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/tiptap-utils"
+import "@/components/tiptap-ui-primitive/card/card.scss"
+
+const Card = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return <div ref={ref} className={cn("tiptap-card", className)} {...props} />
+  }
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div ref={ref} className={cn("tiptap-card-header", className)} {...props} />
+  )
+})
+CardHeader.displayName = "CardHeader"
+
+const CardBody = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn("tiptap-card-body", className)} {...props} />
+    )
+  }
+)
+CardBody.displayName = "CardBody"
+
+const CardItemGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    orientation?: "horizontal" | "vertical"
+  }
+>(({ className, orientation = "vertical", ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-orientation={orientation}
+      className={cn("tiptap-card-item-group", className)}
+      {...props}
+    />
+  )
+})
+CardItemGroup.displayName = "CardItemGroup"
+
+const CardGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn("tiptap-card-group-label", className)}
+      {...props}
+    />
+  )
+})
+CardGroupLabel.displayName = "CardGroupLabel"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div ref={ref} className={cn("tiptap-card-footer", className)} {...props} />
+  )
+})
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardBody, CardItemGroup, CardGroupLabel }
diff --git a/components/tiptap-ui-primitive/card/index.tsx b/components/tiptap-ui-primitive/card/index.tsx
new file mode 100644
index 0000000..288c75f
--- /dev/null
+++ b/components/tiptap-ui-primitive/card/index.tsx
@@ -0,0 +1 @@
+export * from "./card"
diff --git a/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.scss b/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.scss
new file mode 100644
index 0000000..03b47e8
--- /dev/null
+++ b/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.scss
@@ -0,0 +1,63 @@
+.tiptap-dropdown-menu {
+  --tt-dropdown-menu-bg-color: var(--white);
+  --tt-dropdown-menu-border-color: var(--tt-gray-light-a-100);
+  --tt-dropdown-menu-text-color: var(--tt-gray-light-a-600);
+
+  .dark & {
+    --tt-dropdown-menu-border-color: var(--tt-gray-dark-a-50);
+    --tt-dropdown-menu-bg-color: var(--tt-gray-dark-50);
+    --tt-dropdown-menu-text-color: var(--tt-gray-dark-a-600);
+  }
+}
+
+/* --------------------------------------------
+    --------- DROPDOWN MENU STYLING SETTINGS -----------
+    -------------------------------------------- */
+.tiptap-dropdown-menu {
+  z-index: 50;
+  outline: none;
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  max-height: var(--radix-dropdown-menu-content-available-height);
+
+  > * {
+    max-height: var(--radix-dropdown-menu-content-available-height);
+  }
+
+  /* Animation states */
+  &[data-state="open"] {
+    animation:
+      fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      zoomIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state="closed"] {
+    animation:
+      fadeOut 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      zoomOut 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  /* Position-based animations */
+  &[data-side="top"],
+  &[data-side="top-start"],
+  &[data-side="top-end"] {
+    animation: slideFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="right"],
+  &[data-side="right-start"],
+  &[data-side="right-end"] {
+    animation: slideFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="bottom"],
+  &[data-side="bottom-start"],
+  &[data-side="bottom-end"] {
+    animation: slideFromTop 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="left"],
+  &[data-side="left-start"],
+  &[data-side="left-end"] {
+    animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
diff --git a/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.tsx b/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.tsx
new file mode 100644
index 0000000..2ad44f6
--- /dev/null
+++ b/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.tsx
@@ -0,0 +1,98 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { cn } from "@/lib/tiptap-utils"
+import "@/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.scss"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root modal={false} {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal {...props} />
+}
+
+const DropdownMenuTrigger = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
+>(({ ...props }, ref) => <DropdownMenuPrimitive.Trigger ref={ref} {...props} />)
+DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuItem = DropdownMenuPrimitive.Item
+
+const DropdownMenuSubTrigger = DropdownMenuPrimitive.SubTrigger
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+    portal?: boolean | React.ComponentProps<typeof DropdownMenuPortal>
+  }
+>(({ className, portal = true, ...props }, ref) => {
+  const content = (
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn("tiptap-dropdown-menu", className)}
+      {...props}
+    />
+  )
+
+  return portal ? (
+    <DropdownMenuPortal {...(typeof portal === "object" ? portal : {})}>
+      {content}
+    </DropdownMenuPortal>
+  ) : (
+    content
+  )
+})
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    portal?: boolean
+  }
+>(({ className, sideOffset = 4, portal = false, ...props }, ref) => {
+  const content = (
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      onCloseAutoFocus={(e) => e.preventDefault()}
+      className={cn("tiptap-dropdown-menu", className)}
+      {...props}
+    />
+  )
+
+  return portal ? (
+    <DropdownMenuPortal {...(typeof portal === "object" ? portal : {})}>
+      {content}
+    </DropdownMenuPortal>
+  ) : (
+    content
+  )
+})
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuPortal,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/components/tiptap-ui-primitive/dropdown-menu/index.tsx b/components/tiptap-ui-primitive/dropdown-menu/index.tsx
new file mode 100644
index 0000000..c4adece
--- /dev/null
+++ b/components/tiptap-ui-primitive/dropdown-menu/index.tsx
@@ -0,0 +1 @@
+export * from "./dropdown-menu"
diff --git a/components/tiptap-ui-primitive/input/index.tsx b/components/tiptap-ui-primitive/input/index.tsx
new file mode 100644
index 0000000..be91c8e
--- /dev/null
+++ b/components/tiptap-ui-primitive/input/index.tsx
@@ -0,0 +1 @@
+export * from "./input"
diff --git a/components/tiptap-ui-primitive/input/input.scss b/components/tiptap-ui-primitive/input/input.scss
new file mode 100644
index 0000000..b9f777c
--- /dev/null
+++ b/components/tiptap-ui-primitive/input/input.scss
@@ -0,0 +1,45 @@
+:root {
+  --tiptap-input-placeholder: var(--tt-gray-light-a-400);
+}
+
+.dark {
+  --tiptap-input-placeholder: var(--tt-gray-dark-a-400);
+}
+
+.tiptap-input {
+  display: block;
+  width: 100%;
+  height: 2rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  background: none;
+  appearance: none;
+  outline: none;
+
+  &::placeholder {
+    color: var(--tiptap-input-placeholder);
+  }
+}
+
+.tiptap-input-clamp {
+  min-width: 12rem;
+  padding-right: 0;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:focus {
+    text-overflow: clip;
+    overflow: visible;
+  }
+}
+
+.tiptap-input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
diff --git a/components/tiptap-ui-primitive/input/input.tsx b/components/tiptap-ui-primitive/input/input.tsx
new file mode 100644
index 0000000..3e676e0
--- /dev/null
+++ b/components/tiptap-ui-primitive/input/input.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/tiptap-utils"
+import "@/components/tiptap-ui-primitive/input/input.scss"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input type={type} className={cn("tiptap-input", className)} {...props} />
+  )
+}
+
+function InputGroup({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("tiptap-input-group", className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export { Input, InputGroup }
diff --git a/components/tiptap-ui-primitive/popover/index.tsx b/components/tiptap-ui-primitive/popover/index.tsx
new file mode 100644
index 0000000..137ef5d
--- /dev/null
+++ b/components/tiptap-ui-primitive/popover/index.tsx
@@ -0,0 +1 @@
+export * from "./popover"
diff --git a/components/tiptap-ui-primitive/popover/popover.scss b/components/tiptap-ui-primitive/popover/popover.scss
new file mode 100644
index 0000000..07fb0e5
--- /dev/null
+++ b/components/tiptap-ui-primitive/popover/popover.scss
@@ -0,0 +1,63 @@
+.tiptap-popover {
+  --tt-popover-bg-color: var(--white);
+  --tt-popover-border-color: var(--tt-gray-light-a-100);
+  --tt-popover-text-color: var(--tt-gray-light-a-600);
+
+  .dark & {
+    --tt-popover-border-color: var(--tt-gray-dark-a-50);
+    --tt-popover-bg-color: var(--tt-gray-dark-50);
+    --tt-popover-text-color: var(--tt-gray-dark-a-600);
+  }
+}
+
+/* --------------------------------------------
+    --------- POPOVER STYLING SETTINGS -----------
+    -------------------------------------------- */
+.tiptap-popover {
+  z-index: 50;
+  outline: none;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  max-height: var(--radix-popover-content-available-height);
+
+  > * {
+    max-height: var(--radix-popover-content-available-height);
+  }
+
+  /* Animation states */
+  &[data-state="open"] {
+    animation:
+      fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      zoomIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state="closed"] {
+    animation:
+      fadeOut 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      zoomOut 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  /* Position-based animations */
+  &[data-side="top"],
+  &[data-side="top-start"],
+  &[data-side="top-end"] {
+    animation: slideFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="right"],
+  &[data-side="right-start"],
+  &[data-side="right-end"] {
+    animation: slideFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="bottom"],
+  &[data-side="bottom-start"],
+  &[data-side="bottom-end"] {
+    animation: slideFromTop 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="left"],
+  &[data-side="left-start"],
+  &[data-side="left-end"] {
+    animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
diff --git a/components/tiptap-ui-primitive/popover/popover.tsx b/components/tiptap-ui-primitive/popover/popover.tsx
new file mode 100644
index 0000000..7c5aeed
--- /dev/null
+++ b/components/tiptap-ui-primitive/popover/popover.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { cn } from "@/lib/tiptap-utils"
+import "@/components/tiptap-ui-primitive/popover/popover.scss"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        sideOffset={sideOffset}
+        className={cn("tiptap-popover", className)}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/components/tiptap-ui-primitive/separator/index.tsx b/components/tiptap-ui-primitive/separator/index.tsx
new file mode 100644
index 0000000..068cfa8
--- /dev/null
+++ b/components/tiptap-ui-primitive/separator/index.tsx
@@ -0,0 +1 @@
+export * from "./separator"
diff --git a/components/tiptap-ui-primitive/separator/separator.scss b/components/tiptap-ui-primitive/separator/separator.scss
new file mode 100644
index 0000000..78ec9ac
--- /dev/null
+++ b/components/tiptap-ui-primitive/separator/separator.scss
@@ -0,0 +1,23 @@
+.tiptap-separator {
+  --tt-link-border-color: var(--tt-gray-light-a-200);
+
+  .dark & {
+    --tt-link-border-color: var(--tt-gray-dark-a-200);
+  }
+}
+
+.tiptap-separator {
+  flex-shrink: 0;
+  background-color: var(--tt-link-border-color);
+
+  &[data-orientation="horizontal"] {
+    height: 1px;
+    width: 100%;
+    margin: 0.5rem 0;
+  }
+
+  &[data-orientation="vertical"] {
+    height: 1.5rem;
+    width: 1px;
+  }
+}
diff --git a/components/tiptap-ui-primitive/separator/separator.tsx b/components/tiptap-ui-primitive/separator/separator.tsx
new file mode 100644
index 0000000..ac90765
--- /dev/null
+++ b/components/tiptap-ui-primitive/separator/separator.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import "@/components/tiptap-ui-primitive/separator/separator.scss"
+import { cn } from "@/lib/tiptap-utils"
+
+export type Orientation = "horizontal" | "vertical"
+
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: Orientation
+  decorative?: boolean
+}
+
+export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  ({ decorative, orientation = "vertical", className, ...divProps }, ref) => {
+    const ariaOrientation = orientation === "vertical" ? orientation : undefined
+    const semanticProps = decorative
+      ? { role: "none" }
+      : { "aria-orientation": ariaOrientation, role: "separator" }
+
+    return (
+      <div
+        className={cn("tiptap-separator", className)}
+        data-orientation={orientation}
+        {...semanticProps}
+        {...divProps}
+        ref={ref}
+      />
+    )
+  }
+)
+
+Separator.displayName = "Separator"
diff --git a/components/tiptap-ui-primitive/spacer/index.tsx b/components/tiptap-ui-primitive/spacer/index.tsx
new file mode 100644
index 0000000..b0789bf
--- /dev/null
+++ b/components/tiptap-ui-primitive/spacer/index.tsx
@@ -0,0 +1 @@
+export * from "./spacer"
diff --git a/components/tiptap-ui-primitive/spacer/spacer.tsx b/components/tiptap-ui-primitive/spacer/spacer.tsx
new file mode 100644
index 0000000..8de9600
--- /dev/null
+++ b/components/tiptap-ui-primitive/spacer/spacer.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+
+export type SpacerOrientation = "horizontal" | "vertical"
+
+export interface SpacerProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: SpacerOrientation
+  size?: string | number
+}
+
+export function Spacer({
+  orientation = "horizontal",
+  size,
+  style = {},
+  ...props
+}: SpacerProps) {
+  const computedStyle = {
+    ...style,
+    ...(orientation === "horizontal" && !size && { flex: 1 }),
+    ...(size && {
+      width: orientation === "vertical" ? "1px" : size,
+      height: orientation === "horizontal" ? "1px" : size,
+    }),
+  }
+
+  return <div {...props} style={computedStyle} />
+}
diff --git a/components/tiptap-ui-primitive/toolbar/index.tsx b/components/tiptap-ui-primitive/toolbar/index.tsx
new file mode 100644
index 0000000..94b1819
--- /dev/null
+++ b/components/tiptap-ui-primitive/toolbar/index.tsx
@@ -0,0 +1 @@
+export * from "./toolbar"
diff --git a/components/tiptap-ui-primitive/toolbar/toolbar.scss b/components/tiptap-ui-primitive/toolbar/toolbar.scss
new file mode 100644
index 0000000..3ce1862
--- /dev/null
+++ b/components/tiptap-ui-primitive/toolbar/toolbar.scss
@@ -0,0 +1,98 @@
+:root {
+  --tt-toolbar-height: 2.75rem;
+  --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --tt-toolbar-bg-color: var(--white);
+  --tt-toolbar-border-color: var(--tt-gray-light-a-100);
+}
+
+.dark {
+  --tt-toolbar-bg-color: var(--black);
+  --tt-toolbar-border-color: var(--tt-gray-dark-a-50);
+}
+
+.tiptap-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  &-group {
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+
+    &:empty {
+      display: none;
+    }
+
+    &:empty + .tiptap-separator,
+    .tiptap-separator + &:empty {
+      display: none;
+    }
+  }
+
+  &[data-variant="fixed"] {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    width: 100%;
+    min-height: var(--tt-toolbar-height);
+    background: var(--tt-toolbar-bg-color);
+    border-bottom: 1px solid var(--tt-toolbar-border-color);
+    padding: 0 0.5rem;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @media (max-width: 480px) {
+      position: absolute;
+      top: auto;
+      height: calc(var(--tt-toolbar-height) + var(--tt-safe-area-bottom));
+      border-top: 1px solid var(--tt-toolbar-border-color);
+      border-bottom: none;
+      padding: 0 0.5rem var(--tt-safe-area-bottom);
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+
+      .tiptap-toolbar-group {
+        flex: 0 0 auto;
+      }
+    }
+  }
+
+  &[data-variant="floating"] {
+    --tt-toolbar-padding: 0.125rem;
+    --tt-toolbar-border-width: 1px;
+
+    padding: 0.188rem;
+    border-radius: calc(
+      var(--tt-toolbar-padding) + var(--tt-radius-lg) +
+        var(--tt-toolbar-border-width)
+    );
+    border: var(--tt-toolbar-border-width) solid var(--tt-toolbar-border-color);
+    background-color: var(--tt-toolbar-bg-color);
+    box-shadow: var(--tt-shadow-elevated-md);
+    outline: none;
+    overflow: hidden;
+
+    &[data-plain="true"] {
+      padding: 0;
+      border-radius: 0;
+      border: none;
+      box-shadow: none;
+      background-color: transparent;
+    }
+
+    @media screen and (max-width: 480px) {
+      width: 100%;
+      border-radius: 0;
+      border: none;
+      box-shadow: none;
+    }
+  }
+}
diff --git a/components/tiptap-ui-primitive/toolbar/toolbar.tsx b/components/tiptap-ui-primitive/toolbar/toolbar.tsx
new file mode 100644
index 0000000..433dec9
--- /dev/null
+++ b/components/tiptap-ui-primitive/toolbar/toolbar.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import * as React from "react"
+import { Separator } from "@/components/tiptap-ui-primitive/separator"
+import "@/components/tiptap-ui-primitive/toolbar/toolbar.scss"
+import { cn } from "@/lib/tiptap-utils"
+import { useMenuNavigation } from "@/hooks/use-menu-navigation"
+import { useComposedRef } from "@/hooks/use-composed-ref"
+
+type BaseProps = React.HTMLAttributes<HTMLDivElement>
+
+interface ToolbarProps extends BaseProps {
+  variant?: "floating" | "fixed"
+}
+
+const useToolbarNavigation = (
+  toolbarRef: React.RefObject<HTMLDivElement | null>
+) => {
+  const [items, setItems] = React.useState<HTMLElement[]>([])
+
+  const collectItems = React.useCallback(() => {
+    if (!toolbarRef.current) return []
+    return Array.from(
+      toolbarRef.current.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [role="button"]:not([disabled]), [tabindex="0"]:not([disabled])'
+      )
+    )
+  }, [toolbarRef])
+
+  React.useEffect(() => {
+    const toolbar = toolbarRef.current
+    if (!toolbar) return
+
+    const updateItems = () => setItems(collectItems())
+
+    updateItems()
+    const observer = new MutationObserver(updateItems)
+    observer.observe(toolbar, { childList: true, subtree: true })
+
+    return () => observer.disconnect()
+  }, [collectItems, toolbarRef])
+
+  const { selectedIndex } = useMenuNavigation<HTMLElement>({
+    containerRef: toolbarRef,
+    items,
+    orientation: "horizontal",
+    onSelect: (el) => el.click(),
+    autoSelectFirstItem: false,
+  })
+
+  React.useEffect(() => {
+    const toolbar = toolbarRef.current
+    if (!toolbar) return
+
+    const handleFocus = (e: FocusEvent) => {
+      const target = e.target as HTMLElement
+      if (toolbar.contains(target))
+        target.setAttribute("data-focus-visible", "true")
+    }
+
+    const handleBlur = (e: FocusEvent) => {
+      const target = e.target as HTMLElement
+      if (toolbar.contains(target)) target.removeAttribute("data-focus-visible")
+    }
+
+    toolbar.addEventListener("focus", handleFocus, true)
+    toolbar.addEventListener("blur", handleBlur, true)
+
+    return () => {
+      toolbar.removeEventListener("focus", handleFocus, true)
+      toolbar.removeEventListener("blur", handleBlur, true)
+    }
+  }, [toolbarRef])
+
+  React.useEffect(() => {
+    if (selectedIndex !== undefined && items[selectedIndex]) {
+      items[selectedIndex].focus()
+    }
+  }, [selectedIndex, items])
+}
+
+export const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(
+  ({ children, className, variant = "fixed", ...props }, ref) => {
+    const toolbarRef = React.useRef<HTMLDivElement>(null)
+    const composedRef = useComposedRef(toolbarRef, ref)
+    useToolbarNavigation(toolbarRef)
+
+    return (
+      <div
+        ref={composedRef}
+        role="toolbar"
+        aria-label="toolbar"
+        data-variant={variant}
+        className={cn("tiptap-toolbar", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+Toolbar.displayName = "Toolbar"
+
+export const ToolbarGroup = React.forwardRef<HTMLDivElement, BaseProps>(
+  ({ children, className, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="group"
+      className={cn("tiptap-toolbar-group", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+)
+ToolbarGroup.displayName = "ToolbarGroup"
+
+export const ToolbarSeparator = React.forwardRef<HTMLDivElement, BaseProps>(
+  ({ ...props }, ref) => (
+    <Separator ref={ref} orientation="vertical" decorative {...props} />
+  )
+)
+ToolbarSeparator.displayName = "ToolbarSeparator"
diff --git a/components/tiptap-ui-primitive/tooltip/index.tsx b/components/tiptap-ui-primitive/tooltip/index.tsx
new file mode 100644
index 0000000..e12712a
--- /dev/null
+++ b/components/tiptap-ui-primitive/tooltip/index.tsx
@@ -0,0 +1 @@
+export * from "./tooltip"
diff --git a/components/tiptap-ui-primitive/tooltip/tooltip.scss b/components/tiptap-ui-primitive/tooltip/tooltip.scss
new file mode 100644
index 0000000..d717757
--- /dev/null
+++ b/components/tiptap-ui-primitive/tooltip/tooltip.scss
@@ -0,0 +1,43 @@
+.tiptap-tooltip {
+  --tt-tooltip-bg: var(--tt-gray-light-900);
+  --tt-tooltip-text: var(--white);
+  --tt-kbd: var(--tt-gray-dark-a-400);
+
+  .dark & {
+    --tt-tooltip-bg: var(--white);
+    --tt-tooltip-text: var(--tt-gray-light-600);
+    --tt-kbd: var(--tt-gray-light-a-400);
+  }
+}
+
+.tiptap-tooltip {
+  z-index: 200;
+  overflow: hidden;
+  border-radius: var(--tt-radius-md, 0.375rem);
+  background-color: var(--tt-tooltip-bg);
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--tt-tooltip-text);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  text-align: center;
+
+  kbd {
+    display: inline-block;
+    text-align: center;
+    vertical-align: baseline;
+    font-family:
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      sans-serif;
+    text-transform: capitalize;
+    color: var(--tt-kbd);
+  }
+}
diff --git a/components/tiptap-ui-primitive/tooltip/tooltip.tsx b/components/tiptap-ui-primitive/tooltip/tooltip.tsx
new file mode 100644
index 0000000..8af0c04
--- /dev/null
+++ b/components/tiptap-ui-primitive/tooltip/tooltip.tsx
@@ -0,0 +1,231 @@
+"use client"
+
+import * as React from "react"
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useHover,
+  useFocus,
+  useDismiss,
+  useRole,
+  useInteractions,
+  useMergeRefs,
+  FloatingPortal,
+  type Placement,
+  type UseFloatingReturn,
+  type ReferenceType,
+  FloatingDelayGroup,
+} from "@floating-ui/react"
+import "@/components/tiptap-ui-primitive/tooltip/tooltip.scss"
+
+interface TooltipProviderProps {
+  children: React.ReactNode
+  initialOpen?: boolean
+  placement?: Placement
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  delay?: number
+  closeDelay?: number
+  timeout?: number
+  useDelayGroup?: boolean
+}
+
+interface TooltipTriggerProps
+  extends Omit<React.HTMLProps<HTMLElement>, "ref"> {
+  asChild?: boolean
+  children: React.ReactNode
+}
+
+interface TooltipContentProps
+  extends Omit<React.HTMLProps<HTMLDivElement>, "ref"> {
+  children?: React.ReactNode
+  portal?: boolean
+  portalProps?: Omit<React.ComponentProps<typeof FloatingPortal>, "children">
+}
+
+interface TooltipContextValue extends UseFloatingReturn<ReferenceType> {
+  open: boolean
+  setOpen: (open: boolean) => void
+  getReferenceProps: (
+    userProps?: React.HTMLProps<HTMLElement>
+  ) => Record<string, unknown>
+  getFloatingProps: (
+    userProps?: React.HTMLProps<HTMLDivElement>
+  ) => Record<string, unknown>
+}
+
+function useTooltip({
+  initialOpen = false,
+  placement = "top",
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+  delay = 600,
+  closeDelay = 0,
+}: Omit<TooltipProviderProps, "children"> = {}) {
+  const [uncontrolledOpen, setUncontrolledOpen] =
+    React.useState<boolean>(initialOpen)
+
+  const open = controlledOpen ?? uncontrolledOpen
+  const setOpen = setControlledOpen ?? setUncontrolledOpen
+
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(4),
+      flip({
+        crossAxis: placement.includes("-"),
+        fallbackAxisSideDirection: "start",
+        padding: 4,
+      }),
+      shift({ padding: 4 }),
+    ],
+  })
+
+  const context = data.context
+
+  const hover = useHover(context, {
+    mouseOnly: true,
+    move: false,
+    restMs: delay,
+    enabled: controlledOpen == null,
+    delay: {
+      close: closeDelay,
+    },
+  })
+  const focus = useFocus(context, {
+    enabled: controlledOpen == null,
+  })
+  const dismiss = useDismiss(context)
+  const role = useRole(context, { role: "tooltip" })
+
+  const interactions = useInteractions([hover, focus, dismiss, role])
+
+  return React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+    }),
+    [open, setOpen, interactions, data]
+  )
+}
+
+const TooltipContext = React.createContext<TooltipContextValue | null>(null)
+
+function useTooltipContext() {
+  const context = React.useContext(TooltipContext)
+
+  if (context == null) {
+    throw new Error("Tooltip components must be wrapped in <TooltipProvider />")
+  }
+
+  return context
+}
+
+export function Tooltip({ children, ...props }: TooltipProviderProps) {
+  const tooltip = useTooltip(props)
+
+  if (!props.useDelayGroup) {
+    return (
+      <TooltipContext.Provider value={tooltip}>
+        {children}
+      </TooltipContext.Provider>
+    )
+  }
+
+  return (
+    <FloatingDelayGroup
+      delay={{ open: props.delay ?? 0, close: props.closeDelay ?? 0 }}
+      timeoutMs={props.timeout}
+    >
+      <TooltipContext.Provider value={tooltip}>
+        {children}
+      </TooltipContext.Provider>
+    </FloatingDelayGroup>
+  )
+}
+
+export const TooltipTrigger = React.forwardRef<
+  HTMLElement,
+  TooltipTriggerProps
+>(function TooltipTrigger({ children, asChild = false, ...props }, propRef) {
+  const context = useTooltipContext()
+  const childrenRef = React.isValidElement(children)
+    ? parseInt(React.version, 10) >= 19
+      ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (children as { props: { ref?: React.Ref<any> } }).props.ref
+      : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (children as any).ref
+    : undefined
+  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef])
+
+  if (asChild && React.isValidElement(children)) {
+    const dataAttributes = {
+      "data-tooltip-state": context.open ? "open" : "closed",
+    }
+
+    return React.cloneElement(
+      children,
+      context.getReferenceProps({
+        ref,
+        ...props,
+        ...(typeof children.props === "object" ? children.props : {}),
+        ...dataAttributes,
+      })
+    )
+  }
+
+  return (
+    <button
+      ref={ref}
+      data-tooltip-state={context.open ? "open" : "closed"}
+      {...context.getReferenceProps(props)}
+    >
+      {children}
+    </button>
+  )
+})
+
+export const TooltipContent = React.forwardRef<
+  HTMLDivElement,
+  TooltipContentProps
+>(function TooltipContent(
+  { style, children, portal = true, portalProps = {}, ...props },
+  propRef
+) {
+  const context = useTooltipContext()
+  const ref = useMergeRefs([context.refs.setFloating, propRef])
+
+  if (!context.open) return null
+
+  const content = (
+    <div
+      ref={ref}
+      style={{
+        ...context.floatingStyles,
+        ...style,
+      }}
+      {...context.getFloatingProps(props)}
+      className="tiptap-tooltip"
+    >
+      {children}
+    </div>
+  )
+
+  if (portal) {
+    return <FloatingPortal {...portalProps}>{content}</FloatingPortal>
+  }
+
+  return content
+})
+
+Tooltip.displayName = "Tooltip"
+TooltipTrigger.displayName = "TooltipTrigger"
+TooltipContent.displayName = "TooltipContent"
diff --git a/components/tiptap-ui/blockquote-button/blockquote-button.tsx b/components/tiptap-ui/blockquote-button/blockquote-button.tsx
new file mode 100644
index 0000000..631fbbf
--- /dev/null
+++ b/components/tiptap-ui/blockquote-button/blockquote-button.tsx
@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+
+// --- Tiptap UI ---
+import type { UseBlockquoteConfig } from "@/components/tiptap-ui/blockquote-button"
+import {
+  BLOCKQUOTE_SHORTCUT_KEY,
+  useBlockquote,
+} from "@/components/tiptap-ui/blockquote-button"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Lib ---
+import { parseShortcutKeys } from "@/lib/tiptap-utils"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Badge } from "@/components/tiptap-ui-primitive/badge"
+
+export interface BlockquoteButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseBlockquoteConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function BlockquoteShortcutBadge({
+  shortcutKeys = BLOCKQUOTE_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for toggling blockquote in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useBlockquote` hook instead.
+ */
+export const BlockquoteButton = React.forwardRef<
+  HTMLButtonElement,
+  BlockquoteButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      hideWhenUnavailable = false,
+      onToggled,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canToggle,
+      isActive,
+      handleToggle,
+      label,
+      shortcutKeys,
+      Icon,
+    } = useBlockquote({
+      editor,
+      hideWhenUnavailable,
+      onToggled,
+    })
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleToggle()
+      },
+      [handleToggle, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        role="button"
+        tabIndex={-1}
+        disabled={!canToggle}
+        data-disabled={!canToggle}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip="Blockquote"
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <BlockquoteShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+BlockquoteButton.displayName = "BlockquoteButton"
diff --git a/components/tiptap-ui/blockquote-button/index.tsx b/components/tiptap-ui/blockquote-button/index.tsx
new file mode 100644
index 0000000..0b46edf
--- /dev/null
+++ b/components/tiptap-ui/blockquote-button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./blockquote-button"
+export * from "./use-blockquote"
diff --git a/components/tiptap-ui/blockquote-button/use-blockquote.ts b/components/tiptap-ui/blockquote-button/use-blockquote.ts
new file mode 100644
index 0000000..1e81b84
--- /dev/null
+++ b/components/tiptap-ui/blockquote-button/use-blockquote.ts
@@ -0,0 +1,256 @@
+"use client"
+
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import { NodeSelection, TextSelection } from "@tiptap/pm/state"
+import { useHotkeys } from "react-hotkeys-hook"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+import { useIsMobile } from "@/hooks/use-mobile"
+
+// --- Icons ---
+import { BlockquoteIcon } from "@/components/tiptap-icons/blockquote-icon"
+
+// --- UI Utils ---
+import {
+  findNodePosition,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition,
+} from "@/lib/tiptap-utils"
+
+export const BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b"
+
+/**
+ * Configuration for the blockquote functionality
+ */
+export interface UseBlockquoteConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when blockquote is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful toggle.
+   */
+  onToggled?: () => void
+}
+
+/**
+ * Checks if blockquote can be toggled in the current editor state
+ */
+export function canToggleBlockquote(
+  editor: Editor | null,
+  turnInto: boolean = true
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (
+    !isNodeInSchema("blockquote", editor) ||
+    isNodeTypeSelected(editor, ["image"])
+  )
+    return false
+
+  if (!turnInto) {
+    return editor.can().toggleWrap("blockquote")
+  }
+
+  try {
+    const view = editor.view
+    const state = view.state
+    const selection = state.selection
+
+    if (selection.empty || selection instanceof TextSelection) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1),
+      })?.pos
+      if (!isValidPosition(pos)) return false
+    }
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Toggles blockquote formatting for a specific node or the current selection
+ */
+export function toggleBlockquote(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canToggleBlockquote(editor)) return false
+
+  try {
+    const view = editor.view
+    let state = view.state
+    let tr = state.tr
+
+    // No selection, find the the cursor position
+    if (state.selection.empty || state.selection instanceof TextSelection) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1),
+      })?.pos
+      if (!isValidPosition(pos)) return false
+
+      tr = tr.setSelection(NodeSelection.create(state.doc, pos))
+      view.dispatch(tr)
+      state = view.state
+    }
+
+    const selection = state.selection
+
+    let chain = editor.chain().focus()
+
+    // Handle NodeSelection
+    if (selection instanceof NodeSelection) {
+      const firstChild = selection.node.firstChild?.firstChild
+      const lastChild = selection.node.lastChild?.lastChild
+
+      const from = firstChild
+        ? selection.from + firstChild.nodeSize
+        : selection.from + 1
+
+      const to = lastChild
+        ? selection.to - lastChild.nodeSize
+        : selection.to - 1
+
+      chain = chain.setTextSelection({ from, to }).clearNodes()
+    }
+
+    const toggle = editor.isActive("blockquote")
+      ? chain.lift("blockquote")
+      : chain.wrapIn("blockquote")
+
+    toggle.run()
+
+    editor.chain().focus().selectTextblockEnd().run()
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the blockquote button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isNodeInSchema("blockquote", editor)) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleBlockquote(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides blockquote functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleBlockquoteButton() {
+ *   const { isVisible, handleToggle, isActive } = useBlockquote()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleToggle}>Blockquote</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedBlockquoteButton() {
+ *   const { isVisible, handleToggle, label, isActive } = useBlockquote({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('Blockquote toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle Blockquote
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useBlockquote(config?: UseBlockquoteConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsMobile()
+  const [isVisible, setIsVisible] = React.useState<boolean>(true)
+  const canToggle = canToggleBlockquote(editor)
+  const isActive = editor?.isActive("blockquote") || false
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleToggle = React.useCallback(() => {
+    if (!editor) return false
+
+    const success = toggleBlockquote(editor)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, onToggled])
+
+  useHotkeys(
+    BLOCKQUOTE_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      handleToggle()
+    },
+    {
+      enabled: isVisible && canToggle,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle,
+    label: "Blockquote",
+    shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
+    Icon: BlockquoteIcon,
+  }
+}
diff --git a/components/tiptap-ui/code-block-button/code-block-button.tsx b/components/tiptap-ui/code-block-button/code-block-button.tsx
new file mode 100644
index 0000000..a3bb04a
--- /dev/null
+++ b/components/tiptap-ui/code-block-button/code-block-button.tsx
@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Lib ---
+import { parseShortcutKeys } from "@/lib/tiptap-utils"
+
+// --- Tiptap UI ---
+import type { UseCodeBlockConfig } from "@/components/tiptap-ui/code-block-button"
+import {
+  CODE_BLOCK_SHORTCUT_KEY,
+  useCodeBlock,
+} from "@/components/tiptap-ui/code-block-button"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Badge } from "@/components/tiptap-ui-primitive/badge"
+
+export interface CodeBlockButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseCodeBlockConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function CodeBlockShortcutBadge({
+  shortcutKeys = CODE_BLOCK_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for toggling code block in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useCodeBlock` hook instead.
+ */
+export const CodeBlockButton = React.forwardRef<
+  HTMLButtonElement,
+  CodeBlockButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      hideWhenUnavailable = false,
+      onToggled,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canToggle,
+      isActive,
+      handleToggle,
+      label,
+      shortcutKeys,
+      Icon,
+    } = useCodeBlock({
+      editor,
+      hideWhenUnavailable,
+      onToggled,
+    })
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleToggle()
+      },
+      [handleToggle, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        role="button"
+        disabled={!canToggle}
+        data-disabled={!canToggle}
+        tabIndex={-1}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip="Code Block"
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <CodeBlockShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+CodeBlockButton.displayName = "CodeBlockButton"
diff --git a/components/tiptap-ui/code-block-button/index.tsx b/components/tiptap-ui/code-block-button/index.tsx
new file mode 100644
index 0000000..77d541f
--- /dev/null
+++ b/components/tiptap-ui/code-block-button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./code-block-button"
+export * from "./use-code-block"
diff --git a/components/tiptap-ui/code-block-button/use-code-block.ts b/components/tiptap-ui/code-block-button/use-code-block.ts
new file mode 100644
index 0000000..8d4fa2f
--- /dev/null
+++ b/components/tiptap-ui/code-block-button/use-code-block.ts
@@ -0,0 +1,263 @@
+"use client"
+
+import * as React from "react"
+import { type Editor } from "@tiptap/react"
+import { useHotkeys } from "react-hotkeys-hook"
+import { NodeSelection, TextSelection } from "@tiptap/pm/state"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+import { useIsMobile } from "@/hooks/use-mobile"
+
+// --- Lib ---
+import {
+  findNodePosition,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition,
+} from "@/lib/tiptap-utils"
+
+// --- Icons ---
+import { CodeBlockIcon } from "@/components/tiptap-icons/code-block-icon"
+
+export const CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c"
+
+/**
+ * Configuration for the code block functionality
+ */
+export interface UseCodeBlockConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when code block is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful code block toggle.
+   */
+  onToggled?: () => void
+}
+
+/**
+ * Checks if code block can be toggled in the current editor state
+ */
+export function canToggle(
+  editor: Editor | null,
+  turnInto: boolean = true
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (
+    !isNodeInSchema("codeBlock", editor) ||
+    isNodeTypeSelected(editor, ["image"])
+  )
+    return false
+
+  if (!turnInto) {
+    return editor.can().toggleNode("codeBlock", "paragraph")
+  }
+
+  try {
+    const view = editor.view
+    const state = view.state
+    const selection = state.selection
+
+    if (selection.empty || selection instanceof TextSelection) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1),
+      })?.pos
+      if (!isValidPosition(pos)) return false
+    }
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Toggles code block in the editor
+ */
+export function toggleCodeBlock(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canToggle(editor)) return false
+
+  try {
+    const view = editor.view
+    let state = view.state
+    let tr = state.tr
+
+    // No selection, find the the cursor position
+    if (state.selection.empty || state.selection instanceof TextSelection) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1),
+      })?.pos
+      if (!isValidPosition(pos)) return false
+
+      tr = tr.setSelection(NodeSelection.create(state.doc, pos))
+      view.dispatch(tr)
+      state = view.state
+    }
+
+    const selection = state.selection
+
+    let chain = editor.chain().focus()
+
+    // Handle NodeSelection
+    if (selection instanceof NodeSelection) {
+      const firstChild = selection.node.firstChild?.firstChild
+      const lastChild = selection.node.lastChild?.lastChild
+
+      const from = firstChild
+        ? selection.from + firstChild.nodeSize
+        : selection.from + 1
+
+      const to = lastChild
+        ? selection.to - lastChild.nodeSize
+        : selection.to - 1
+
+      chain = chain.setTextSelection({ from, to }).clearNodes()
+    }
+
+    const toggle = editor.isActive("codeBlock")
+      ? chain.setNode("paragraph")
+      : chain.toggleNode("codeBlock", "paragraph")
+
+    toggle.run()
+
+    editor.chain().focus().selectTextblockEnd().run()
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the code block button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isNodeInSchema("codeBlock", editor)) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggle(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides code block functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleCodeBlockButton() {
+ *   const { isVisible, isActive, handleToggle } = useCodeBlock()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <button
+ *       onClick={handleToggle}
+ *       aria-pressed={isActive}
+ *     >
+ *       Code Block
+ *     </button>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedCodeBlockButton() {
+ *   const { isVisible, isActive, handleToggle, label } = useCodeBlock({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: (isActive) => console.log('Code block toggled:', isActive)
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle Code Block
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useCodeBlock(config?: UseCodeBlockConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsMobile()
+  const [isVisible, setIsVisible] = React.useState<boolean>(true)
+  const canToggleState = canToggle(editor)
+  const isActive = editor?.isActive("codeBlock") || false
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleToggle = React.useCallback(() => {
+    if (!editor) return false
+
+    const success = toggleCodeBlock(editor)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, onToggled])
+
+  useHotkeys(
+    CODE_BLOCK_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      handleToggle()
+    },
+    {
+      enabled: isVisible && canToggleState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle: canToggleState,
+    label: "Code Block",
+    shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
+    Icon: CodeBlockIcon,
+  }
+}
diff --git a/components/tiptap-ui/color-highlight-button/color-highlight-button.scss b/components/tiptap-ui/color-highlight-button/color-highlight-button.scss
new file mode 100644
index 0000000..2c6f387
--- /dev/null
+++ b/components/tiptap-ui/color-highlight-button/color-highlight-button.scss
@@ -0,0 +1,49 @@
+.tiptap-button-highlight {
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0 -0.175rem;
+  border-radius: var(--tt-radius-xl);
+  background-color: var(--highlight-color);
+  transition: transform 0.2s ease;
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    border-radius: inherit;
+    box-sizing: border-box;
+    border: 1px solid var(--highlight-color);
+    filter: brightness(95%);
+    mix-blend-mode: multiply;
+
+    .dark & {
+      filter: brightness(140%);
+      mix-blend-mode: lighten;
+    }
+  }
+}
+
+.tiptap-button {
+  &[data-active-state="on"] {
+    .tiptap-button-highlight {
+      &::after {
+        filter: brightness(80%);
+      }
+    }
+  }
+
+  .dark & {
+    &[data-active-state="on"] {
+      .tiptap-button-highlight {
+        &::after {
+          // Andere Eigenschaft für .dark Kontext
+          filter: brightness(180%);
+        }
+      }
+    }
+  }
+}
diff --git a/components/tiptap-ui/color-highlight-button/color-highlight-button.tsx b/components/tiptap-ui/color-highlight-button/color-highlight-button.tsx
new file mode 100644
index 0000000..1f2b21f
--- /dev/null
+++ b/components/tiptap-ui/color-highlight-button/color-highlight-button.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import * as React from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "@/lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { UseColorHighlightConfig } from "@/components/tiptap-ui/color-highlight-button"
+import {
+  COLOR_HIGHLIGHT_SHORTCUT_KEY,
+  useColorHighlight,
+} from "@/components/tiptap-ui/color-highlight-button"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Badge } from "@/components/tiptap-ui-primitive/badge"
+
+// --- Styles ---
+import "@/components/tiptap-ui/color-highlight-button/color-highlight-button.scss"
+
+export interface ColorHighlightButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseColorHighlightConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function ColorHighlightShortcutBadge({
+  shortcutKeys = COLOR_HIGHLIGHT_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for applying color highlights in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useColorHighlight` hook instead.
+ */
+export const ColorHighlightButton = React.forwardRef<
+  HTMLButtonElement,
+  ColorHighlightButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      highlightColor,
+      text,
+      hideWhenUnavailable = false,
+      onApplied,
+      showShortcut = false,
+      onClick,
+      children,
+      style,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canColorHighlight,
+      isActive,
+      handleColorHighlight,
+      label,
+      shortcutKeys,
+    } = useColorHighlight({
+      editor,
+      highlightColor,
+      label: text || `Toggle highlight (${highlightColor})`,
+      hideWhenUnavailable,
+      onApplied,
+    })
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleColorHighlight()
+      },
+      [handleColorHighlight, onClick]
+    )
+
+    const buttonStyle = React.useMemo(
+      () =>
+        ({
+          ...style,
+          "--highlight-color": highlightColor,
+        }) as React.CSSProperties,
+      [highlightColor, style]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        role="button"
+        tabIndex={-1}
+        disabled={!canColorHighlight}
+        data-disabled={!canColorHighlight}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        style={buttonStyle}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <span
+              className="tiptap-button-highlight"
+              style={
+                { "--highlight-color": highlightColor } as React.CSSProperties
+              }
+            />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <ColorHighlightShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+ColorHighlightButton.displayName = "ColorHighlightButton"
diff --git a/components/tiptap-ui/color-highlight-button/index.tsx b/components/tiptap-ui/color-highlight-button/index.tsx
new file mode 100644
index 0000000..c517648
--- /dev/null
+++ b/components/tiptap-ui/color-highlight-button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./color-highlight-button"
+export * from "./use-color-highlight"
diff --git a/components/tiptap-ui/color-highlight-button/use-color-highlight.ts b/components/tiptap-ui/color-highlight-button/use-color-highlight.ts
new file mode 100644
index 0000000..1bea118
--- /dev/null
+++ b/components/tiptap-ui/color-highlight-button/use-color-highlight.ts
@@ -0,0 +1,240 @@
+"use client"
+
+import * as React from "react"
+import { type Editor } from "@tiptap/react"
+import { useHotkeys } from "react-hotkeys-hook"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+import { useIsMobile } from "@/hooks/use-mobile"
+
+// --- Lib ---
+import { isMarkInSchema, isNodeTypeSelected } from "@/lib/tiptap-utils"
+
+// --- Icons ---
+import { HighlighterIcon } from "@/components/tiptap-icons/highlighter-icon"
+
+export const COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h"
+export const HIGHLIGHT_COLORS = [
+  {
+    label: "Default background",
+    value: "var(--tt-bg-color)",
+    border: "var(--tt-bg-color-contrast)",
+  },
+  {
+    label: "Gray background",
+    value: "var(--tt-color-highlight-gray)",
+    border: "var(--tt-color-highlight-gray-contrast)",
+  },
+  {
+    label: "Brown background",
+    value: "var(--tt-color-highlight-brown)",
+    border: "var(--tt-color-highlight-brown-contrast)",
+  },
+  {
+    label: "Orange background",
+    value: "var(--tt-color-highlight-orange)",
+    border: "var(--tt-color-highlight-orange-contrast)",
+  },
+  {
+    label: "Yellow background",
+    value: "var(--tt-color-highlight-yellow)",
+    border: "var(--tt-color-highlight-yellow-contrast)",
+  },
+  {
+    label: "Green background",
+    value: "var(--tt-color-highlight-green)",
+    border: "var(--tt-color-highlight-green-contrast)",
+  },
+  {
+    label: "Blue background",
+    value: "var(--tt-color-highlight-blue)",
+    border: "var(--tt-color-highlight-blue-contrast)",
+  },
+  {
+    label: "Purple background",
+    value: "var(--tt-color-highlight-purple)",
+    border: "var(--tt-color-highlight-purple-contrast)",
+  },
+  {
+    label: "Pink background",
+    value: "var(--tt-color-highlight-pink)",
+    border: "var(--tt-color-highlight-pink-contrast)",
+  },
+  {
+    label: "Red background",
+    value: "var(--tt-color-highlight-red)",
+    border: "var(--tt-color-highlight-red-contrast)",
+  },
+]
+export type HighlightColor = (typeof HIGHLIGHT_COLORS)[number]
+
+/**
+ * Configuration for the color highlight functionality
+ */
+export interface UseColorHighlightConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The color to apply when toggling the highlight.
+   */
+  highlightColor?: string
+  /**
+   * Optional label to display alongside the icon.
+   */
+  label?: string
+  /**
+   * Whether the button should hide when the mark is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Called when the highlight is applied.
+   */
+  onApplied?: ({ color, label }: { color: string; label: string }) => void
+}
+
+export function pickHighlightColorsByValue(values: string[]) {
+  const colorMap = new Map(
+    HIGHLIGHT_COLORS.map((color) => [color.value, color])
+  )
+  return values
+    .map((value) => colorMap.get(value))
+    .filter((color): color is (typeof HIGHLIGHT_COLORS)[number] => !!color)
+}
+
+export function canColorHighlight(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (
+    !isMarkInSchema("highlight", editor) ||
+    isNodeTypeSelected(editor, ["image"])
+  )
+    return false
+
+  return editor.can().setMark("highlight")
+}
+
+export function isColorHighlightActive(
+  editor: Editor | null,
+  highlightColor?: string
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  return highlightColor
+    ? editor.isActive("highlight", { color: highlightColor })
+    : editor.isActive("highlight")
+}
+
+export function removeHighlight(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canColorHighlight(editor)) return false
+
+  return editor.chain().focus().unsetMark("highlight").run()
+}
+
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isMarkInSchema("highlight", editor)) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canColorHighlight(editor)
+  }
+
+  return true
+}
+
+export function useColorHighlight(config: UseColorHighlightConfig) {
+  const {
+    editor: providedEditor,
+    label,
+    highlightColor,
+    hideWhenUnavailable = false,
+    onApplied,
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsMobile()
+  const [isVisible, setIsVisible] = React.useState<boolean>(true)
+  const canColorHighlightState = canColorHighlight(editor)
+  const isActive = isColorHighlightActive(editor, highlightColor)
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleColorHighlight = React.useCallback(() => {
+    if (!editor || !canColorHighlightState || !highlightColor || !label)
+      return false
+
+    if (editor.state.storedMarks) {
+      const highlightMarkType = editor.schema.marks.highlight
+      if (highlightMarkType) {
+        editor.view.dispatch(
+          editor.state.tr.removeStoredMark(highlightMarkType)
+        )
+      }
+    }
+
+    setTimeout(() => {
+      const success = editor
+        .chain()
+        .focus()
+        .toggleMark("highlight", { color: highlightColor })
+        .run()
+      if (success) {
+        onApplied?.({ color: highlightColor, label })
+      }
+      return success
+    }, 0)
+  }, [canColorHighlightState, highlightColor, editor, label, onApplied])
+
+  const handleRemoveHighlight = React.useCallback(() => {
+    const success = removeHighlight(editor)
+    if (success) {
+      onApplied?.({ color: "", label: "Remove highlight" })
+    }
+    return success
+  }, [editor, onApplied])
+
+  useHotkeys(
+    COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      handleColorHighlight()
+    },
+    {
+      enabled: isVisible && canColorHighlightState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleColorHighlight,
+    handleRemoveHighlight,
+    canColorHighlight: canColorHighlightState,
+    label: label || `Highlight`,
+    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    Icon: HighlighterIcon,
+  }
+}
diff --git a/components/tiptap-ui/color-highlight-popover/color-highlight-popover.tsx b/components/tiptap-ui/color-highlight-popover/color-highlight-popover.tsx
new file mode 100644
index 0000000..e287a8b
--- /dev/null
+++ b/components/tiptap-ui/color-highlight-popover/color-highlight-popover.tsx
@@ -0,0 +1,210 @@
+"use client"
+
+import * as React from "react"
+import { type Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useMenuNavigation } from "@/hooks/use-menu-navigation"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Icons ---
+import { BanIcon } from "@/components/tiptap-icons/ban-icon"
+import { HighlighterIcon } from "@/components/tiptap-icons/highlighter-icon"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button, ButtonGroup } from "@/components/tiptap-ui-primitive/button"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/tiptap-ui-primitive/popover"
+import { Separator } from "@/components/tiptap-ui-primitive/separator"
+import {
+  Card,
+  CardBody,
+  CardItemGroup,
+} from "@/components/tiptap-ui-primitive/card"
+
+// --- Tiptap UI ---
+import type {
+  HighlightColor,
+  UseColorHighlightConfig,
+} from "@/components/tiptap-ui/color-highlight-button"
+import {
+  ColorHighlightButton,
+  pickHighlightColorsByValue,
+  useColorHighlight,
+} from "@/components/tiptap-ui/color-highlight-button"
+
+export interface ColorHighlightPopoverContentProps {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Optional colors to use in the highlight popover.
+   * If not provided, defaults to a predefined set of colors.
+   */
+  colors?: HighlightColor[]
+}
+
+export interface ColorHighlightPopoverProps
+  extends Omit<ButtonProps, "type">,
+    Pick<
+      UseColorHighlightConfig,
+      "editor" | "hideWhenUnavailable" | "onApplied"
+    > {
+  /**
+   * Optional colors to use in the highlight popover.
+   * If not provided, defaults to a predefined set of colors.
+   */
+  colors?: HighlightColor[]
+}
+
+export const ColorHighlightPopoverButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>(({ className, children, ...props }, ref) => (
+  <Button
+    type="button"
+    className={className}
+    data-style="ghost"
+    data-appearance="default"
+    role="button"
+    tabIndex={-1}
+    aria-label="Highlight text"
+    tooltip="Highlight"
+    ref={ref}
+    {...props}
+  >
+    {children ?? <HighlighterIcon className="tiptap-button-icon" />}
+  </Button>
+))
+
+ColorHighlightPopoverButton.displayName = "ColorHighlightPopoverButton"
+
+export function ColorHighlightPopoverContent({
+  editor,
+  colors = pickHighlightColorsByValue([
+    "var(--tt-color-highlight-green)",
+    "var(--tt-color-highlight-blue)",
+    "var(--tt-color-highlight-red)",
+    "var(--tt-color-highlight-purple)",
+    "var(--tt-color-highlight-yellow)",
+  ]),
+}: ColorHighlightPopoverContentProps) {
+  const { handleRemoveHighlight } = useColorHighlight({ editor })
+  const isMobile = useIsMobile()
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
+  const menuItems = React.useMemo(
+    () => [...colors, { label: "Remove highlight", value: "none" }],
+    [colors]
+  )
+
+  const { selectedIndex } = useMenuNavigation({
+    containerRef,
+    items: menuItems,
+    orientation: "both",
+    onSelect: (item) => {
+      if (!containerRef.current) return false
+      const highlightedElement = containerRef.current.querySelector(
+        '[data-highlighted="true"]'
+      ) as HTMLElement
+      if (highlightedElement) highlightedElement.click()
+      if (item.value === "none") handleRemoveHighlight()
+    },
+    autoSelectFirstItem: false,
+  })
+
+  return (
+    <Card
+      ref={containerRef}
+      tabIndex={0}
+      style={isMobile ? { boxShadow: "none", border: 0 } : {}}
+    >
+      <CardBody style={isMobile ? { padding: 0 } : {}}>
+        <CardItemGroup orientation="horizontal">
+          <ButtonGroup orientation="horizontal">
+            {colors.map((color, index) => (
+              <ColorHighlightButton
+                key={color.value}
+                editor={editor}
+                highlightColor={color.value}
+                tooltip={color.label}
+                aria-label={`${color.label} highlight color`}
+                tabIndex={index === selectedIndex ? 0 : -1}
+                data-highlighted={selectedIndex === index}
+              />
+            ))}
+          </ButtonGroup>
+          <Separator />
+          <ButtonGroup orientation="horizontal">
+            <Button
+              onClick={handleRemoveHighlight}
+              aria-label="Remove highlight"
+              tooltip="Remove highlight"
+              tabIndex={selectedIndex === colors.length ? 0 : -1}
+              type="button"
+              role="menuitem"
+              data-style="ghost"
+              data-highlighted={selectedIndex === colors.length}
+            >
+              <BanIcon className="tiptap-button-icon" />
+            </Button>
+          </ButtonGroup>
+        </CardItemGroup>
+      </CardBody>
+    </Card>
+  )
+}
+
+export function ColorHighlightPopover({
+  editor: providedEditor,
+  colors = pickHighlightColorsByValue([
+    "var(--tt-color-highlight-green)",
+    "var(--tt-color-highlight-blue)",
+    "var(--tt-color-highlight-red)",
+    "var(--tt-color-highlight-purple)",
+    "var(--tt-color-highlight-yellow)",
+  ]),
+  hideWhenUnavailable = false,
+  onApplied,
+  ...props
+}: ColorHighlightPopoverProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isOpen, setIsOpen] = React.useState(false)
+  const { isVisible, canColorHighlight, isActive, label, Icon } =
+    useColorHighlight({
+      editor,
+      hideWhenUnavailable,
+      onApplied,
+    })
+
+  if (!isVisible) return null
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <ColorHighlightPopoverButton
+          disabled={!canColorHighlight}
+          data-active-state={isActive ? "on" : "off"}
+          data-disabled={!canColorHighlight}
+          aria-pressed={isActive}
+          aria-label={label}
+          tooltip={label}
+          {...props}
+        >
+          <Icon className="tiptap-button-icon" />
+        </ColorHighlightPopoverButton>
+      </PopoverTrigger>
+      <PopoverContent aria-label="Highlight colors">
+        <ColorHighlightPopoverContent editor={editor} colors={colors} />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default ColorHighlightPopover
diff --git a/components/tiptap-ui/color-highlight-popover/index.tsx b/components/tiptap-ui/color-highlight-popover/index.tsx
new file mode 100644
index 0000000..626b81f
--- /dev/null
+++ b/components/tiptap-ui/color-highlight-popover/index.tsx
@@ -0,0 +1 @@
+export * from "./color-highlight-popover"
diff --git a/components/tiptap-ui/heading-button/heading-button.tsx b/components/tiptap-ui/heading-button/heading-button.tsx
new file mode 100644
index 0000000..66a0986
--- /dev/null
+++ b/components/tiptap-ui/heading-button/heading-button.tsx
@@ -0,0 +1,130 @@
+"use client"
+
+import * as React from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "@/lib/tiptap-utils"
+
+// --- Tiptap UI ---
+import type {
+  Level,
+  UseHeadingConfig,
+} from "@/components/tiptap-ui/heading-button"
+import {
+  HEADING_SHORTCUT_KEYS,
+  useHeading,
+} from "@/components/tiptap-ui/heading-button"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Badge } from "@/components/tiptap-ui-primitive/badge"
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+export interface HeadingButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseHeadingConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function HeadingShortcutBadge({
+  level,
+  shortcutKeys = HEADING_SHORTCUT_KEYS[level],
+}: {
+  level: Level
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for toggling heading in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useHeading` hook instead.
+ */
+export const HeadingButton = React.forwardRef<
+  HTMLButtonElement,
+  HeadingButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      level,
+      text,
+      hideWhenUnavailable = false,
+      onToggled,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canToggle,
+      isActive,
+      handleToggle,
+      label,
+      Icon,
+      shortcutKeys,
+    } = useHeading({
+      editor,
+      level,
+      hideWhenUnavailable,
+      onToggled,
+    })
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleToggle()
+      },
+      [handleToggle, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        role="button"
+        tabIndex={-1}
+        disabled={!canToggle}
+        data-disabled={!canToggle}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <HeadingShortcutBadge level={level} shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+HeadingButton.displayName = "HeadingButton"
diff --git a/components/tiptap-ui/heading-button/index.tsx b/components/tiptap-ui/heading-button/index.tsx
new file mode 100644
index 0000000..009a700
--- /dev/null
+++ b/components/tiptap-ui/heading-button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./heading-button"
+export * from "./use-heading"
diff --git a/components/tiptap-ui/heading-button/use-heading.ts b/components/tiptap-ui/heading-button/use-heading.ts
new file mode 100644
index 0000000..9f7551c
--- /dev/null
+++ b/components/tiptap-ui/heading-button/use-heading.ts
@@ -0,0 +1,329 @@
+"use client"
+
+import * as React from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+import { type Editor } from "@tiptap/react"
+import { NodeSelection, TextSelection } from "@tiptap/pm/state"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+import { useIsMobile } from "@/hooks/use-mobile"
+
+// --- Lib ---
+import {
+  findNodePosition,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition,
+} from "@/lib/tiptap-utils"
+
+// --- Icons ---
+import { HeadingOneIcon } from "@/components/tiptap-icons/heading-one-icon"
+import { HeadingTwoIcon } from "@/components/tiptap-icons/heading-two-icon"
+import { HeadingThreeIcon } from "@/components/tiptap-icons/heading-three-icon"
+import { HeadingFourIcon } from "@/components/tiptap-icons/heading-four-icon"
+import { HeadingFiveIcon } from "@/components/tiptap-icons/heading-five-icon"
+import { HeadingSixIcon } from "@/components/tiptap-icons/heading-six-icon"
+
+export type Level = 1 | 2 | 3 | 4 | 5 | 6
+
+/**
+ * Configuration for the heading functionality
+ */
+export interface UseHeadingConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The heading level.
+   */
+  level: Level
+  /**
+   * Whether the button should hide when heading is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful heading toggle.
+   */
+  onToggled?: () => void
+}
+
+export const headingIcons = {
+  1: HeadingOneIcon,
+  2: HeadingTwoIcon,
+  3: HeadingThreeIcon,
+  4: HeadingFourIcon,
+  5: HeadingFiveIcon,
+  6: HeadingSixIcon,
+}
+
+export const HEADING_SHORTCUT_KEYS: Record<Level, string> = {
+  1: "ctrl+alt+1",
+  2: "ctrl+alt+2",
+  3: "ctrl+alt+3",
+  4: "ctrl+alt+4",
+  5: "ctrl+alt+5",
+  6: "ctrl+alt+6",
+}
+
+/**
+ * Checks if heading can be toggled in the current editor state
+ */
+export function canToggle(
+  editor: Editor | null,
+  level?: Level,
+  turnInto: boolean = true
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (
+    !isNodeInSchema("heading", editor) ||
+    isNodeTypeSelected(editor, ["image"])
+  )
+    return false
+
+  if (!turnInto) {
+    return level
+      ? editor.can().setNode("heading", { level })
+      : editor.can().setNode("heading")
+  }
+
+  try {
+    const view = editor.view
+    const state = view.state
+    const selection = state.selection
+
+    if (selection.empty || selection instanceof TextSelection) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1),
+      })?.pos
+      if (!isValidPosition(pos)) return false
+    }
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Checks if heading is currently active
+ */
+export function isHeadingActive(
+  editor: Editor | null,
+  level?: Level | Level[]
+): boolean {
+  if (!editor || !editor.isEditable) return false
+
+  if (Array.isArray(level)) {
+    return level.some((l) => editor.isActive("heading", { level: l }))
+  }
+
+  return level
+    ? editor.isActive("heading", { level })
+    : editor.isActive("heading")
+}
+
+/**
+ * Toggles heading in the editor
+ */
+export function toggleHeading(
+  editor: Editor | null,
+  level: Level | Level[]
+): boolean {
+  if (!editor || !editor.isEditable) return false
+
+  const levels = Array.isArray(level) ? level : [level]
+  const toggleLevel = levels.find((l) => canToggle(editor, l))
+
+  if (!toggleLevel) return false
+
+  try {
+    const view = editor.view
+    let state = view.state
+    let tr = state.tr
+
+    // No selection, find the cursor position
+    if (state.selection.empty || state.selection instanceof TextSelection) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1),
+      })?.pos
+      if (!isValidPosition(pos)) return false
+
+      tr = tr.setSelection(NodeSelection.create(state.doc, pos))
+      view.dispatch(tr)
+      state = view.state
+    }
+
+    const selection = state.selection
+    let chain = editor.chain().focus()
+
+    // Handle NodeSelection
+    if (selection instanceof NodeSelection) {
+      const firstChild = selection.node.firstChild?.firstChild
+      const lastChild = selection.node.lastChild?.lastChild
+
+      const from = firstChild
+        ? selection.from + firstChild.nodeSize
+        : selection.from + 1
+
+      const to = lastChild
+        ? selection.to - lastChild.nodeSize
+        : selection.to - 1
+
+      chain = chain.setTextSelection({ from, to }).clearNodes()
+    }
+
+    const isActive = levels.some((l) =>
+      editor.isActive("heading", { level: l })
+    )
+
+    const toggle = isActive
+      ? chain.setNode("paragraph")
+      : chain.setNode("heading", { level: toggleLevel })
+
+    toggle.run()
+
+    editor.chain().focus().selectTextblockEnd().run()
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the heading button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  level?: Level | Level[]
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, level, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isNodeInSchema("heading", editor)) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    if (Array.isArray(level)) {
+      return level.some((l) => canToggle(editor, l))
+    }
+    return canToggle(editor, level)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides heading functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleHeadingButton() {
+ *   const { isVisible, isActive, handleToggle, Icon } = useHeading({ level: 1 })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <button
+ *       onClick={handleToggle}
+ *       aria-pressed={isActive}
+ *     >
+ *       <Icon />
+ *       Heading 1
+ *     </button>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedHeadingButton() {
+ *   const { isVisible, isActive, handleToggle, label, Icon } = useHeading({
+ *     level: 2,
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: (isActive) => console.log('Heading toggled:', isActive)
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       <Icon />
+ *       Toggle Heading 2
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useHeading(config: UseHeadingConfig) {
+  const {
+    editor: providedEditor,
+    level,
+    hideWhenUnavailable = false,
+    onToggled,
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsMobile()
+  const [isVisible, setIsVisible] = React.useState<boolean>(true)
+  const canToggleState = canToggle(editor, level)
+  const isActive = isHeadingActive(editor, level)
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, level, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, level, hideWhenUnavailable])
+
+  const handleToggle = React.useCallback(() => {
+    if (!editor) return false
+
+    const success = toggleHeading(editor, level)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, level, onToggled])
+
+  useHotkeys(
+    HEADING_SHORTCUT_KEYS[level],
+    (event) => {
+      event.preventDefault()
+      handleToggle()
+    },
+    {
+      enabled: isVisible && canToggleState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle: canToggleState,
+    label: `Heading ${level}`,
+    shortcutKeys: HEADING_SHORTCUT_KEYS[level],
+    Icon: headingIcons[level],
+  }
+}
diff --git a/components/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu.tsx b/components/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu.tsx
new file mode 100644
index 0000000..6f1286f
--- /dev/null
+++ b/components/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+
+// --- Icons ---
+import { ChevronDownIcon } from "@/components/tiptap-icons/chevron-down-icon"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import { HeadingButton } from "@/components/tiptap-ui/heading-button"
+import type { UseHeadingDropdownMenuConfig } from "@/components/tiptap-ui/heading-dropdown-menu"
+import { useHeadingDropdownMenu } from "@/components/tiptap-ui/heading-dropdown-menu"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button, ButtonGroup } from "@/components/tiptap-ui-primitive/button"
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/tiptap-ui-primitive/dropdown-menu"
+import { Card, CardBody } from "@/components/tiptap-ui-primitive/card"
+
+export interface HeadingDropdownMenuProps
+  extends Omit<ButtonProps, "type">,
+    UseHeadingDropdownMenuConfig {
+  /**
+   * Whether to render the dropdown menu in a portal
+   * @default false
+   */
+  portal?: boolean
+  /**
+   * Callback for when the dropdown opens or closes
+   */
+  onOpenChange?: (isOpen: boolean) => void
+}
+
+/**
+ * Dropdown menu component for selecting heading levels in a Tiptap editor.
+ *
+ * For custom dropdown implementations, use the `useHeadingDropdownMenu` hook instead.
+ */
+export const HeadingDropdownMenu = React.forwardRef<
+  HTMLButtonElement,
+  HeadingDropdownMenuProps
+>(
+  (
+    {
+      editor: providedEditor,
+      levels = [1, 2, 3, 4, 5, 6],
+      hideWhenUnavailable = false,
+      portal = false,
+      onOpenChange,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const [isOpen, setIsOpen] = React.useState(false)
+    const { isVisible, isActive, canToggle, Icon } = useHeadingDropdownMenu({
+      editor,
+      levels,
+      hideWhenUnavailable,
+    })
+
+    const handleOpenChange = React.useCallback(
+      (open: boolean) => {
+        if (!editor || !canToggle) return
+        setIsOpen(open)
+        onOpenChange?.(open)
+      },
+      [canToggle, editor, onOpenChange]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <DropdownMenu modal open={isOpen} onOpenChange={handleOpenChange}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="button"
+            data-style="ghost"
+            data-active-state={isActive ? "on" : "off"}
+            role="button"
+            tabIndex={-1}
+            disabled={!canToggle}
+            data-disabled={!canToggle}
+            aria-label="Format text as heading"
+            aria-pressed={isActive}
+            tooltip="Heading"
+            {...buttonProps}
+            ref={ref}
+          >
+            <Icon className="tiptap-button-icon" />
+            <ChevronDownIcon className="tiptap-button-dropdown-small" />
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent align="start" portal={portal}>
+          <Card>
+            <CardBody>
+              <ButtonGroup>
+                {levels.map((level) => (
+                  <DropdownMenuItem key={`heading-${level}`} asChild>
+                    <HeadingButton
+                      editor={editor}
+                      level={level}
+                      text={`Heading ${level}`}
+                      showTooltip={false}
+                    />
+                  </DropdownMenuItem>
+                ))}
+              </ButtonGroup>
+            </CardBody>
+          </Card>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+  }
+)
+
+HeadingDropdownMenu.displayName = "HeadingDropdownMenu"
+
+export default HeadingDropdownMenu
diff --git a/components/tiptap-ui/heading-dropdown-menu/index.tsx b/components/tiptap-ui/heading-dropdown-menu/index.tsx
new file mode 100644
index 0000000..33b9679
--- /dev/null
+++ b/components/tiptap-ui/heading-dropdown-menu/index.tsx
@@ -0,0 +1,2 @@
+export * from "./heading-dropdown-menu"
+export * from "./use-heading-dropdown-menu"
diff --git a/components/tiptap-ui/heading-dropdown-menu/use-heading-dropdown-menu.ts b/components/tiptap-ui/heading-dropdown-menu/use-heading-dropdown-menu.ts
new file mode 100644
index 0000000..42e1ad4
--- /dev/null
+++ b/components/tiptap-ui/heading-dropdown-menu/use-heading-dropdown-menu.ts
@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Icons ---
+import { HeadingIcon } from "@/components/tiptap-icons/heading-icon"
+
+// --- Tiptap UI ---
+import {
+  headingIcons,
+  type Level,
+  isHeadingActive,
+  canToggle,
+  shouldShowButton,
+} from "@/components/tiptap-ui/heading-button"
+
+/**
+ * Configuration for the heading dropdown menu functionality
+ */
+export interface UseHeadingDropdownMenuConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Available heading levels to show in the dropdown
+   * @default [1, 2, 3, 4, 5, 6]
+   */
+  levels?: Level[]
+  /**
+   * Whether the dropdown should hide when headings are not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+}
+
+/**
+ * Gets the currently active heading level from the available levels
+ */
+export function getActiveHeadingLevel(
+  editor: Editor | null,
+  levels: Level[] = [1, 2, 3, 4, 5, 6]
+): Level | undefined {
+  if (!editor || !editor.isEditable) return undefined
+  return levels.find((level) => isHeadingActive(editor, level))
+}
+
+/**
+ * Custom hook that provides heading dropdown menu functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyHeadingDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeLevel,
+ *     isAnyHeadingActive,
+ *     canToggle,
+ *     levels,
+ *   } = useHeadingDropdownMenu()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <DropdownMenu>
+ *       // dropdown content
+ *     </DropdownMenu>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedHeadingDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeLevel,
+ *   } = useHeadingDropdownMenu({
+ *     editor: myEditor,
+ *     levels: [1, 2, 3],
+ *     hideWhenUnavailable: true,
+ *   })
+ *
+ *   // component implementation
+ * }
+ * ```
+ */
+export function useHeadingDropdownMenu(config?: UseHeadingDropdownMenuConfig) {
+  const {
+    editor: providedEditor,
+    levels = [1, 2, 3, 4, 5, 6],
+    hideWhenUnavailable = false,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = React.useState(true)
+
+  const activeLevel = getActiveHeadingLevel(editor, levels)
+  const isActive = isHeadingActive(editor)
+  const canToggleState = canToggle(editor)
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(
+        shouldShowButton({ editor, hideWhenUnavailable, level: levels })
+      )
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable, levels])
+
+  return {
+    isVisible,
+    activeLevel,
+    isActive,
+    canToggle: canToggleState,
+    levels,
+    label: "Heading",
+    Icon: activeLevel ? headingIcons[activeLevel] : HeadingIcon,
+  }
+}
diff --git a/components/tiptap-ui/image-upload-button/image-upload-button.tsx b/components/tiptap-ui/image-upload-button/image-upload-button.tsx
new file mode 100644
index 0000000..b95898d
--- /dev/null
+++ b/components/tiptap-ui/image-upload-button/image-upload-button.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import * as React from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "@/lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { UseImageUploadConfig } from "@/components/tiptap-ui/image-upload-button"
+import {
+  IMAGE_UPLOAD_SHORTCUT_KEY,
+  useImageUpload,
+} from "@/components/tiptap-ui/image-upload-button"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Badge } from "@/components/tiptap-ui-primitive/badge"
+
+export interface ImageUploadButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseImageUploadConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function ImageShortcutBadge({
+  shortcutKeys = IMAGE_UPLOAD_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for uploading/inserting images in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useImage` hook instead.
+ */
+export const ImageUploadButton = React.forwardRef<
+  HTMLButtonElement,
+  ImageUploadButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      hideWhenUnavailable = false,
+      onInserted,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canInsert,
+      handleImage,
+      label,
+      isActive,
+      shortcutKeys,
+      Icon,
+    } = useImageUpload({
+      editor,
+      hideWhenUnavailable,
+      onInserted,
+    })
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleImage()
+      },
+      [handleImage, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        role="button"
+        tabIndex={-1}
+        disabled={!canInsert}
+        data-disabled={!canInsert}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && <ImageShortcutBadge shortcutKeys={shortcutKeys} />}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+ImageUploadButton.displayName = "ImageUploadButton"
diff --git a/components/tiptap-ui/image-upload-button/index.tsx b/components/tiptap-ui/image-upload-button/index.tsx
new file mode 100644
index 0000000..815d5bb
--- /dev/null
+++ b/components/tiptap-ui/image-upload-button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./image-upload-button"
+export * from "./use-image-upload"
diff --git a/components/tiptap-ui/image-upload-button/use-image-upload.ts b/components/tiptap-ui/image-upload-button/use-image-upload.ts
new file mode 100644
index 0000000..377a6ed
--- /dev/null
+++ b/components/tiptap-ui/image-upload-button/use-image-upload.ts
@@ -0,0 +1,199 @@
+"use client"
+
+import * as React from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+import { type Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+import { useIsMobile } from "@/hooks/use-mobile"
+
+// --- Lib ---
+import {
+  isExtensionAvailable,
+  isNodeTypeSelected,
+} from "@/lib/tiptap-utils"
+
+// --- Icons ---
+import { ImagePlusIcon } from "@/components/tiptap-icons/image-plus-icon"
+
+export const IMAGE_UPLOAD_SHORTCUT_KEY = "mod+shift+i"
+
+/**
+ * Configuration for the image upload functionality
+ */
+export interface UseImageUploadConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when insertion is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful image insertion.
+   */
+  onInserted?: () => void
+}
+
+/**
+ * Checks if image can be inserted in the current editor state
+ */
+export function canInsertImage(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (
+    !isExtensionAvailable(editor, "imageUpload") ||
+    isNodeTypeSelected(editor, ["image"])
+  )
+    return false
+
+  return editor.can().insertContent({ type: "imageUpload" })
+}
+
+/**
+ * Checks if image is currently active
+ */
+export function isImageActive(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  return editor.isActive("imageUpload")
+}
+
+/**
+ * Inserts an image in the editor
+ */
+export function insertImage(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canInsertImage(editor)) return false
+
+  try {
+    return editor
+      .chain()
+      .focus()
+      .insertContent({
+        type: "imageUpload",
+      })
+      .run()
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the image button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isExtensionAvailable(editor, "imageUpload")) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canInsertImage(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides image functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleImageButton() {
+ *   const { isVisible, handleImage } = useImage()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleImage}>Add Image</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedImageButton() {
+ *   const { isVisible, handleImage, label, isActive } = useImage({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onInserted: () => console.log('Image inserted!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleImage}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Add Image
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useImageUpload(config?: UseImageUploadConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onInserted,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsMobile()
+  const [isVisible, setIsVisible] = React.useState<boolean>(true)
+  const canInsert = canInsertImage(editor)
+  const isActive = isImageActive(editor)
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleImage = React.useCallback(() => {
+    if (!editor) return false
+
+    const success = insertImage(editor)
+    if (success) {
+      onInserted?.()
+    }
+    return success
+  }, [editor, onInserted])
+
+  useHotkeys(
+    IMAGE_UPLOAD_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      handleImage()
+    },
+    {
+      enabled: isVisible && canInsert,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleImage,
+    canInsert,
+    label: "Add image",
+    shortcutKeys: IMAGE_UPLOAD_SHORTCUT_KEY,
+    Icon: ImagePlusIcon,
+  }
+}
diff --git a/components/tiptap-ui/link-popover/index.tsx b/components/tiptap-ui/link-popover/index.tsx
new file mode 100644
index 0000000..e725ea8
--- /dev/null
+++ b/components/tiptap-ui/link-popover/index.tsx
@@ -0,0 +1,2 @@
+export * from "./link-popover"
+export * from "./use-link-popover"
diff --git a/components/tiptap-ui/link-popover/link-popover.tsx b/components/tiptap-ui/link-popover/link-popover.tsx
new file mode 100644
index 0000000..ba7fa08
--- /dev/null
+++ b/components/tiptap-ui/link-popover/link-popover.tsx
@@ -0,0 +1,310 @@
+"use client"
+
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useIsMobile } from "@/hooks/use-mobile"
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Icons ---
+import { CornerDownLeftIcon } from "@/components/tiptap-icons/corner-down-left-icon"
+import { ExternalLinkIcon } from "@/components/tiptap-icons/external-link-icon"
+import { LinkIcon } from "@/components/tiptap-icons/link-icon"
+import { TrashIcon } from "@/components/tiptap-icons/trash-icon"
+
+// --- Tiptap UI ---
+import type { UseLinkPopoverConfig } from "@/components/tiptap-ui/link-popover"
+import { useLinkPopover } from "@/components/tiptap-ui/link-popover"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button, ButtonGroup } from "@/components/tiptap-ui-primitive/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/tiptap-ui-primitive/popover"
+import { Separator } from "@/components/tiptap-ui-primitive/separator"
+import {
+  Card,
+  CardBody,
+  CardItemGroup,
+} from "@/components/tiptap-ui-primitive/card"
+import { Input, InputGroup } from "@/components/tiptap-ui-primitive/input"
+
+export interface LinkMainProps {
+  /**
+   * The URL to set for the link.
+   */
+  url: string
+  /**
+   * Function to update the URL state.
+   */
+  setUrl: React.Dispatch<React.SetStateAction<string | null>>
+  /**
+   * Function to set the link in the editor.
+   */
+  setLink: () => void
+  /**
+   * Function to remove the link from the editor.
+   */
+  removeLink: () => void
+  /**
+   * Function to open the link.
+   */
+  openLink: () => void
+  /**
+   * Whether the link is currently active in the editor.
+   */
+  isActive: boolean
+}
+
+export interface LinkPopoverProps
+  extends Omit<ButtonProps, "type">,
+    UseLinkPopoverConfig {
+  /**
+   * Callback for when the popover opens or closes.
+   */
+  onOpenChange?: (isOpen: boolean) => void
+  /**
+   * Whether to automatically open the popover when a link is active.
+   * @default true
+   */
+  autoOpenOnLinkActive?: boolean
+}
+
+/**
+ * Link button component for triggering the link popover
+ */
+export const LinkButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <Button
+        type="button"
+        className={className}
+        data-style="ghost"
+        role="button"
+        tabIndex={-1}
+        aria-label="Link"
+        tooltip="Link"
+        ref={ref}
+        {...props}
+      >
+        {children || <LinkIcon className="tiptap-button-icon" />}
+      </Button>
+    )
+  }
+)
+
+LinkButton.displayName = "LinkButton"
+
+/**
+ * Main content component for the link popover
+ */
+const LinkMain: React.FC<LinkMainProps> = ({
+  url,
+  setUrl,
+  setLink,
+  removeLink,
+  openLink,
+  isActive,
+}) => {
+  const isMobile = useIsMobile()
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter") {
+      event.preventDefault()
+      setLink()
+    }
+  }
+
+  return (
+    <Card
+      style={{
+        ...(isMobile ? { boxShadow: "none", border: 0 } : {}),
+      }}
+    >
+      <CardBody
+        style={{
+          ...(isMobile ? { padding: 0 } : {}),
+        }}
+      >
+        <CardItemGroup orientation="horizontal">
+          <InputGroup>
+            <Input
+              type="url"
+              placeholder="Paste a link..."
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              onKeyDown={handleKeyDown}
+              autoFocus
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+            />
+          </InputGroup>
+
+          <ButtonGroup orientation="horizontal">
+            <Button
+              type="button"
+              onClick={setLink}
+              title="Apply link"
+              disabled={!url && !isActive}
+              data-style="ghost"
+            >
+              <CornerDownLeftIcon className="tiptap-button-icon" />
+            </Button>
+          </ButtonGroup>
+
+          <Separator />
+
+          <ButtonGroup orientation="horizontal">
+            <Button
+              type="button"
+              onClick={openLink}
+              title="Open in new window"
+              disabled={!url && !isActive}
+              data-style="ghost"
+            >
+              <ExternalLinkIcon className="tiptap-button-icon" />
+            </Button>
+
+            <Button
+              type="button"
+              onClick={removeLink}
+              title="Remove link"
+              disabled={!url && !isActive}
+              data-style="ghost"
+            >
+              <TrashIcon className="tiptap-button-icon" />
+            </Button>
+          </ButtonGroup>
+        </CardItemGroup>
+      </CardBody>
+    </Card>
+  )
+}
+
+/**
+ * Link content component for standalone use
+ */
+export const LinkContent: React.FC<{
+  editor?: Editor | null
+}> = ({ editor }) => {
+  const linkPopover = useLinkPopover({
+    editor,
+  })
+
+  return <LinkMain {...linkPopover} />
+}
+
+/**
+ * Link popover component for Tiptap editors.
+ *
+ * For custom popover implementations, use the `useLinkPopover` hook instead.
+ */
+export const LinkPopover = React.forwardRef<
+  HTMLButtonElement,
+  LinkPopoverProps
+>(
+  (
+    {
+      editor: providedEditor,
+      hideWhenUnavailable = false,
+      onSetLink,
+      onOpenChange,
+      autoOpenOnLinkActive = true,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const [isOpen, setIsOpen] = React.useState(false)
+
+    const {
+      isVisible,
+      canSet,
+      isActive,
+      url,
+      setUrl,
+      setLink,
+      removeLink,
+      openLink,
+      label,
+      Icon,
+    } = useLinkPopover({
+      editor,
+      hideWhenUnavailable,
+      onSetLink,
+    })
+
+    const handleOnOpenChange = React.useCallback(
+      (nextIsOpen: boolean) => {
+        setIsOpen(nextIsOpen)
+        onOpenChange?.(nextIsOpen)
+      },
+      [onOpenChange]
+    )
+
+    const handleSetLink = React.useCallback(() => {
+      setLink()
+      setIsOpen(false)
+    }, [setLink])
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        setIsOpen(!isOpen)
+      },
+      [onClick, isOpen]
+    )
+
+    React.useEffect(() => {
+      if (autoOpenOnLinkActive && isActive) {
+        setIsOpen(true)
+      }
+    }, [autoOpenOnLinkActive, isActive])
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Popover open={isOpen} onOpenChange={handleOnOpenChange}>
+        <PopoverTrigger asChild>
+          <LinkButton
+            disabled={!canSet}
+            data-active-state={isActive ? "on" : "off"}
+            data-disabled={!canSet}
+            aria-label={label}
+            aria-pressed={isActive}
+            onClick={handleClick}
+            {...buttonProps}
+            ref={ref}
+          >
+            {children ?? <Icon className="tiptap-button-icon" />}
+          </LinkButton>
+        </PopoverTrigger>
+
+        <PopoverContent>
+          <LinkMain
+            url={url}
+            setUrl={setUrl}
+            setLink={handleSetLink}
+            removeLink={removeLink}
+            openLink={openLink}
+            isActive={isActive}
+          />
+        </PopoverContent>
+      </Popover>
+    )
+  }
+)
+
+LinkPopover.displayName = "LinkPopover"
+
+export default LinkPopover
diff --git a/components/tiptap-ui/link-popover/use-link-popover.ts b/components/tiptap-ui/link-popover/use-link-popover.ts
new file mode 100644
index 0000000..52b8262
--- /dev/null
+++ b/components/tiptap-ui/link-popover/use-link-popover.ts
@@ -0,0 +1,278 @@
+"use client"
+
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Icons ---
+import { LinkIcon } from "@/components/tiptap-icons/link-icon"
+
+// --- Lib ---
+import { isMarkInSchema, sanitizeUrl } from "@/lib/tiptap-utils"
+
+/**
+ * Configuration for the link popover functionality
+ */
+export interface UseLinkPopoverConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether to hide the link popover when not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called when the link is set.
+   */
+  onSetLink?: () => void
+}
+
+/**
+ * Configuration for the link handler functionality
+ */
+export interface LinkHandlerProps {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor: Editor | null
+  /**
+   * Callback function called when the link is set.
+   */
+  onSetLink?: () => void
+}
+
+/**
+ * Checks if a link can be set in the current editor state
+ */
+export function canSetLink(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  return editor.can().setMark("link")
+}
+
+/**
+ * Checks if a link is currently active in the editor
+ */
+export function isLinkActive(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  return editor.isActive("link")
+}
+
+/**
+ * Determines if the link button should be shown
+ */
+export function shouldShowLinkButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = props
+
+  const linkInSchema = isMarkInSchema("link", editor)
+
+  if (!linkInSchema || !editor) {
+    return false
+  }
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canSetLink(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook for handling link operations in a Tiptap editor
+ */
+export function useLinkHandler(props: LinkHandlerProps) {
+  const { editor, onSetLink } = props
+  const [url, setUrl] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    // Get URL immediately on mount
+    const { href } = editor.getAttributes("link")
+
+    if (isLinkActive(editor) && url === null) {
+      setUrl(href || "")
+    }
+  }, [editor, url])
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const updateLinkState = () => {
+      const { href } = editor.getAttributes("link")
+      setUrl(href || "")
+    }
+
+    editor.on("selectionUpdate", updateLinkState)
+    return () => {
+      editor.off("selectionUpdate", updateLinkState)
+    }
+  }, [editor])
+
+  const setLink = React.useCallback(() => {
+    if (!url || !editor) return
+
+    const { selection } = editor.state
+    const isEmpty = selection.empty
+
+    let chain = editor.chain().focus()
+
+    chain = chain.extendMarkRange("link").setLink({ href: url })
+
+    if (isEmpty) {
+      chain = chain.insertContent({ type: "text", text: url })
+    }
+
+    chain.run()
+
+    setUrl(null)
+
+    onSetLink?.()
+  }, [editor, onSetLink, url])
+
+  const removeLink = React.useCallback(() => {
+    if (!editor) return
+    editor
+      .chain()
+      .focus()
+      .extendMarkRange("link")
+      .unsetLink()
+      .setMeta("preventAutolink", true)
+      .run()
+    setUrl("")
+  }, [editor])
+
+  const openLink = React.useCallback(
+    (target: string = "_blank", features: string = "noopener,noreferrer") => {
+      if (!url) return
+
+      const safeUrl = sanitizeUrl(url, window.location.href)
+      if (safeUrl !== "#") {
+        window.open(safeUrl, target, features)
+      }
+    },
+    [url]
+  )
+
+  return {
+    url: url || "",
+    setUrl,
+    setLink,
+    removeLink,
+    openLink,
+  }
+}
+
+/**
+ * Custom hook for link popover state management
+ */
+export function useLinkState(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}) {
+  const { editor, hideWhenUnavailable = false } = props
+
+  const canSet = canSetLink(editor)
+  const isActive = isLinkActive(editor)
+
+  const [isVisible, setIsVisible] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(
+        shouldShowLinkButton({
+          editor,
+          hideWhenUnavailable,
+        })
+      )
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  return {
+    isVisible,
+    canSet,
+    isActive,
+  }
+}
+
+/**
+ * Main hook that provides link popover functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyLinkButton() {
+ *   const { isVisible, canSet, isActive, Icon, label } = useLinkPopover()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button disabled={!canSet}>Link</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedLinkButton() {
+ *   const { isVisible, canSet, isActive, Icon, label } = useLinkPopover({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onSetLink: () => console.log('Link set!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       disabled={!canSet}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       <Icon />
+ *       {label}
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useLinkPopover(config?: UseLinkPopoverConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onSetLink,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+
+  const { isVisible, canSet, isActive } = useLinkState({
+    editor,
+    hideWhenUnavailable,
+  })
+
+  const linkHandler = useLinkHandler({
+    editor,
+    onSetLink,
+  })
+
+  return {
+    isVisible,
+    canSet,
+    isActive,
+    label: "Link",
+    Icon: LinkIcon,
+    ...linkHandler,
+  }
+}
diff --git a/components/tiptap-ui/list-button/index.tsx b/components/tiptap-ui/list-button/index.tsx
new file mode 100644
index 0000000..9f3d066
--- /dev/null
+++ b/components/tiptap-ui/list-button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./list-button"
+export * from "./use-list"
diff --git a/components/tiptap-ui/list-button/list-button.tsx b/components/tiptap-ui/list-button/list-button.tsx
new file mode 100644
index 0000000..234f5e8
--- /dev/null
+++ b/components/tiptap-ui/list-button/list-button.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import * as React from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "@/lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Badge } from "@/components/tiptap-ui-primitive/badge"
+
+// --- Tiptap UI ---
+import type { ListType, UseListConfig } from "@/components/tiptap-ui/list-button"
+import { LIST_SHORTCUT_KEYS, useList } from "@/components/tiptap-ui/list-button"
+
+export interface ListButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseListConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function ListShortcutBadge({
+  type,
+  shortcutKeys = LIST_SHORTCUT_KEYS[type],
+}: {
+  type: ListType
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for toggling lists in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useList` hook instead.
+ */
+export const ListButton = React.forwardRef<HTMLButtonElement, ListButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      type,
+      text,
+      hideWhenUnavailable = false,
+      onToggled,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canToggle,
+      isActive,
+      handleToggle,
+      label,
+      shortcutKeys,
+      Icon,
+    } = useList({
+      editor,
+      type,
+      hideWhenUnavailable,
+      onToggled,
+    })
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleToggle()
+      },
+      [handleToggle, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        role="button"
+        tabIndex={-1}
+        disabled={!canToggle}
+        data-disabled={!canToggle}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <ListShortcutBadge type={type} shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+ListButton.displayName = "ListButton"
diff --git a/components/tiptap-ui/list-button/use-list.ts b/components/tiptap-ui/list-button/use-list.ts
new file mode 100644
index 0000000..d0e6c19
--- /dev/null
+++ b/components/tiptap-ui/list-button/use-list.ts
@@ -0,0 +1,324 @@
+"use client"
+
+import * as React from "react"
+import { type Editor } from "@tiptap/react"
+import { useHotkeys } from "react-hotkeys-hook"
+import { NodeSelection, TextSelection } from "@tiptap/pm/state"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+import { useIsMobile } from "@/hooks/use-mobile"
+
+// --- Icons ---
+import { ListIcon } from "@/components/tiptap-icons/list-icon"
+import { ListOrderedIcon } from "@/components/tiptap-icons/list-ordered-icon"
+import { ListTodoIcon } from "@/components/tiptap-icons/list-todo-icon"
+
+// --- Lib ---
+import {
+  findNodePosition,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition,
+} from "@/lib/tiptap-utils"
+
+export type ListType = "bulletList" | "orderedList" | "taskList"
+
+/**
+ * Configuration for the list functionality
+ */
+export interface UseListConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The type of list to toggle.
+   */
+  type: ListType
+  /**
+   * Whether the button should hide when list is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful toggle.
+   */
+  onToggled?: () => void
+}
+
+export const listIcons = {
+  bulletList: ListIcon,
+  orderedList: ListOrderedIcon,
+  taskList: ListTodoIcon,
+}
+
+export const listLabels: Record<ListType, string> = {
+  bulletList: "Bullet List",
+  orderedList: "Ordered List",
+  taskList: "Task List",
+}
+
+export const LIST_SHORTCUT_KEYS: Record<ListType, string> = {
+  bulletList: "mod+shift+8",
+  orderedList: "mod+shift+7",
+  taskList: "mod+shift+9",
+}
+
+/**
+ * Checks if a list can be toggled in the current editor state
+ */
+export function canToggleList(
+  editor: Editor | null,
+  type: ListType,
+  turnInto: boolean = true
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!isNodeInSchema(type, editor) || isNodeTypeSelected(editor, ["image"]))
+    return false
+
+  if (!turnInto) {
+    switch (type) {
+      case "bulletList":
+        return editor.can().toggleBulletList()
+      case "orderedList":
+        return editor.can().toggleOrderedList()
+      case "taskList":
+        return editor.can().toggleList("taskList", "taskItem")
+      default:
+        return false
+    }
+  }
+
+  try {
+    const view = editor.view
+    const state = view.state
+    const selection = state.selection
+
+    if (selection.empty || selection instanceof TextSelection) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1),
+      })?.pos
+      if (!isValidPosition(pos)) return false
+    }
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Checks if list is currently active
+ */
+export function isListActive(editor: Editor | null, type: ListType): boolean {
+  if (!editor || !editor.isEditable) return false
+
+  switch (type) {
+    case "bulletList":
+      return editor.isActive("bulletList")
+    case "orderedList":
+      return editor.isActive("orderedList")
+    case "taskList":
+      return editor.isActive("taskList")
+    default:
+      return false
+  }
+}
+
+/**
+ * Toggles list in the editor
+ */
+export function toggleList(editor: Editor | null, type: ListType): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canToggleList(editor, type)) return false
+
+  try {
+    const view = editor.view
+    let state = view.state
+    let tr = state.tr
+
+    // No selection, find the the cursor position
+    if (state.selection.empty || state.selection instanceof TextSelection) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1),
+      })?.pos
+      if (!isValidPosition(pos)) return false
+
+      tr = tr.setSelection(NodeSelection.create(state.doc, pos))
+      view.dispatch(tr)
+      state = view.state
+    }
+
+    const selection = state.selection
+
+    let chain = editor.chain().focus()
+
+    // Handle NodeSelection
+    if (selection instanceof NodeSelection) {
+      const firstChild = selection.node.firstChild?.firstChild
+      const lastChild = selection.node.lastChild?.lastChild
+
+      const from = firstChild
+        ? selection.from + firstChild.nodeSize
+        : selection.from + 1
+
+      const to = lastChild
+        ? selection.to - lastChild.nodeSize
+        : selection.to - 1
+
+      chain = chain.setTextSelection({ from, to }).clearNodes()
+    }
+
+    if (editor.isActive(type)) {
+      // Unwrap list
+      chain
+        .liftListItem("listItem")
+        .lift("bulletList")
+        .lift("orderedList")
+        .lift("taskList")
+        .run()
+    } else {
+      // Wrap in specific list type
+      const toggleMap: Record<ListType, () => typeof chain> = {
+        bulletList: () => chain.toggleBulletList(),
+        orderedList: () => chain.toggleOrderedList(),
+        taskList: () => chain.toggleList("taskList", "taskItem"),
+      }
+
+      const toggle = toggleMap[type]
+      if (!toggle) return false
+
+      toggle().run()
+    }
+
+    editor.chain().focus().selectTextblockEnd().run()
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the list button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  type: ListType
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, type, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isNodeInSchema(type, editor)) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleList(editor, type)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides list functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleListButton() {
+ *   const { isVisible, handleToggle, isActive } = useList({ type: "bulletList" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleToggle}>Bullet List</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedListButton() {
+ *   const { isVisible, handleToggle, label, isActive } = useList({
+ *     type: "orderedList",
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('List toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle List
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useList(config: UseListConfig) {
+  const {
+    editor: providedEditor,
+    type,
+    hideWhenUnavailable = false,
+    onToggled,
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsMobile()
+  const [isVisible, setIsVisible] = React.useState<boolean>(true)
+  const canToggle = canToggleList(editor, type)
+  const isActive = isListActive(editor, type)
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, type, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, type, hideWhenUnavailable])
+
+  const handleToggle = React.useCallback(() => {
+    if (!editor) return false
+
+    const success = toggleList(editor, type)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, type, onToggled])
+
+  useHotkeys(
+    LIST_SHORTCUT_KEYS[type],
+    (event) => {
+      event.preventDefault()
+      handleToggle()
+    },
+    {
+      enabled: isVisible && canToggle,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle,
+    label: listLabels[type],
+    shortcutKeys: LIST_SHORTCUT_KEYS[type],
+    Icon: listIcons[type],
+  }
+}
diff --git a/components/tiptap-ui/list-dropdown-menu/index.tsx b/components/tiptap-ui/list-dropdown-menu/index.tsx
new file mode 100644
index 0000000..9a215b8
--- /dev/null
+++ b/components/tiptap-ui/list-dropdown-menu/index.tsx
@@ -0,0 +1 @@
+export * from "./list-dropdown-menu"
diff --git a/components/tiptap-ui/list-dropdown-menu/list-dropdown-menu.tsx b/components/tiptap-ui/list-dropdown-menu/list-dropdown-menu.tsx
new file mode 100644
index 0000000..97b1da0
--- /dev/null
+++ b/components/tiptap-ui/list-dropdown-menu/list-dropdown-menu.tsx
@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import { type Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Icons ---
+import { ChevronDownIcon } from "@/components/tiptap-icons/chevron-down-icon"
+
+// --- Tiptap UI ---
+import { ListButton, type ListType } from "@/components/tiptap-ui/list-button"
+
+import { useListDropdownMenu } from "./use-list-dropdown-menu"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button, ButtonGroup } from "@/components/tiptap-ui-primitive/button"
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/tiptap-ui-primitive/dropdown-menu"
+import { Card, CardBody } from "@/components/tiptap-ui-primitive/card"
+
+export interface ListDropdownMenuProps extends Omit<ButtonProps, "type"> {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor
+  /**
+   * The list types to display in the dropdown.
+   */
+  types?: ListType[]
+  /**
+   * Whether the dropdown should be hidden when no list types are available
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback for when the dropdown opens or closes
+   */
+  onOpenChange?: (isOpen: boolean) => void
+  /**
+   * Whether to render the dropdown menu in a portal
+   * @default false
+   */
+  portal?: boolean
+}
+
+export function ListDropdownMenu({
+  editor: providedEditor,
+  types = ["bulletList", "orderedList", "taskList"],
+  hideWhenUnavailable = false,
+  onOpenChange,
+  portal = false,
+  ...props
+}: ListDropdownMenuProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const { filteredLists, canToggle, isActive, isVisible, Icon } =
+    useListDropdownMenu({
+      editor,
+      types,
+      hideWhenUnavailable,
+    })
+
+  const handleOnOpenChange = React.useCallback(
+    (open: boolean) => {
+      setIsOpen(open)
+      onOpenChange?.(open)
+    },
+    [onOpenChange]
+  )
+
+  if (!isVisible || !editor || !editor.isEditable) {
+    return null
+  }
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={handleOnOpenChange}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          data-style="ghost"
+          data-active-state={isActive ? "on" : "off"}
+          role="button"
+          tabIndex={-1}
+          disabled={!canToggle}
+          data-disabled={!canToggle}
+          aria-label="List options"
+          tooltip="List"
+          {...props}
+        >
+          <Icon className="tiptap-button-icon" />
+          <ChevronDownIcon className="tiptap-button-dropdown-small" />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" portal={portal}>
+        <Card>
+          <CardBody>
+            <ButtonGroup>
+              {filteredLists.map((option) => (
+                <DropdownMenuItem key={option.type} asChild>
+                  <ListButton
+                    editor={editor}
+                    type={option.type}
+                    text={option.label}
+                    showTooltip={false}
+                  />
+                </DropdownMenuItem>
+              ))}
+            </ButtonGroup>
+          </CardBody>
+        </Card>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default ListDropdownMenu
diff --git a/components/tiptap-ui/list-dropdown-menu/use-list-dropdown-menu.ts b/components/tiptap-ui/list-dropdown-menu/use-list-dropdown-menu.ts
new file mode 100644
index 0000000..fed4ed4
--- /dev/null
+++ b/components/tiptap-ui/list-dropdown-menu/use-list-dropdown-menu.ts
@@ -0,0 +1,219 @@
+"use client"
+
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Icons ---
+import { ListIcon } from "@/components/tiptap-icons/list-icon"
+import { ListOrderedIcon } from "@/components/tiptap-icons/list-ordered-icon"
+import { ListTodoIcon } from "@/components/tiptap-icons/list-todo-icon"
+
+// --- Lib ---
+import { isNodeInSchema } from "@/lib/tiptap-utils"
+
+// --- Tiptap UI ---
+import {
+  canToggleList,
+  isListActive,
+  listIcons,
+  type ListType,
+} from "@/components/tiptap-ui/list-button"
+
+/**
+ * Configuration for the list dropdown menu functionality
+ */
+export interface UseListDropdownMenuConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The list types to display in the dropdown.
+   * @default ["bulletList", "orderedList", "taskList"]
+   */
+  types?: ListType[]
+  /**
+   * Whether the dropdown should be hidden when no list types are available
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+}
+
+export interface ListOption {
+  label: string
+  type: ListType
+  icon: React.ElementType
+}
+
+export const listOptions: ListOption[] = [
+  {
+    label: "Bullet List",
+    type: "bulletList",
+    icon: ListIcon,
+  },
+  {
+    label: "Ordered List",
+    type: "orderedList",
+    icon: ListOrderedIcon,
+  },
+  {
+    label: "Task List",
+    type: "taskList",
+    icon: ListTodoIcon,
+  },
+]
+
+export function canToggleAnyList(
+  editor: Editor | null,
+  listTypes: ListType[]
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  return listTypes.some((type) => canToggleList(editor, type))
+}
+
+export function isAnyListActive(
+  editor: Editor | null,
+  listTypes: ListType[]
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  return listTypes.some((type) => isListActive(editor, type))
+}
+
+export function getFilteredListOptions(
+  availableTypes: ListType[]
+): typeof listOptions {
+  return listOptions.filter(
+    (option) => !option.type || availableTypes.includes(option.type)
+  )
+}
+
+export function shouldShowListDropdown(params: {
+  editor: Editor | null
+  listTypes: ListType[]
+  hideWhenUnavailable: boolean
+  listInSchema: boolean
+  canToggleAny: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable, listInSchema, canToggleAny } = params
+
+  if (!listInSchema || !editor) {
+    return false
+  }
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleAny
+  }
+
+  return true
+}
+
+/**
+ * Gets the currently active list type from the available types
+ */
+export function getActiveListType(
+  editor: Editor | null,
+  availableTypes: ListType[]
+): ListType | undefined {
+  if (!editor || !editor.isEditable) return undefined
+  return availableTypes.find((type) => isListActive(editor, type))
+}
+
+/**
+ * Custom hook that provides list dropdown menu functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyListDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeType,
+ *     isAnyActive,
+ *     canToggleAny,
+ *     filteredLists,
+ *   } = useListDropdownMenu()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <DropdownMenu>
+ *       // dropdown content
+ *     </DropdownMenu>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedListDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeType,
+ *   } = useListDropdownMenu({
+ *     editor: myEditor,
+ *     types: ["bulletList", "orderedList"],
+ *     hideWhenUnavailable: true,
+ *   })
+ *
+ *   // component implementation
+ * }
+ * ```
+ */
+export function useListDropdownMenu(config?: UseListDropdownMenuConfig) {
+  const {
+    editor: providedEditor,
+    types = ["bulletList", "orderedList", "taskList"],
+    hideWhenUnavailable = false,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = React.useState(false)
+
+  const listInSchema = types.some((type) => isNodeInSchema(type, editor))
+
+  const filteredLists = React.useMemo(
+    () => getFilteredListOptions(types),
+    [types]
+  )
+
+  const canToggleAny = canToggleAnyList(editor, types)
+  const isAnyActive = isAnyListActive(editor, types)
+  const activeType = getActiveListType(editor, types)
+  const activeList = filteredLists.find((option) => option.type === activeType)
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(
+        shouldShowListDropdown({
+          editor,
+          listTypes: types,
+          hideWhenUnavailable,
+          listInSchema,
+          canToggleAny,
+        })
+      )
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [canToggleAny, editor, hideWhenUnavailable, listInSchema, types])
+
+  return {
+    isVisible,
+    activeType,
+    isActive: isAnyActive,
+    canToggle: canToggleAny,
+    types,
+    filteredLists,
+    label: "List",
+    Icon: activeList ? listIcons[activeList.type] : ListIcon,
+  }
+}
diff --git a/components/tiptap-ui/mark-button/index.tsx b/components/tiptap-ui/mark-button/index.tsx
new file mode 100644
index 0000000..32e85b9
--- /dev/null
+++ b/components/tiptap-ui/mark-button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./mark-button"
+export * from "./use-mark"
diff --git a/components/tiptap-ui/mark-button/mark-button.tsx b/components/tiptap-ui/mark-button/mark-button.tsx
new file mode 100644
index 0000000..8ee87ce
--- /dev/null
+++ b/components/tiptap-ui/mark-button/mark-button.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import * as React from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "@/lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { Mark, UseMarkConfig } from "@/components/tiptap-ui/mark-button"
+import { MARK_SHORTCUT_KEYS, useMark } from "@/components/tiptap-ui/mark-button"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Badge } from "@/components/tiptap-ui-primitive/badge"
+
+export interface MarkButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseMarkConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function MarkShortcutBadge({
+  type,
+  shortcutKeys = MARK_SHORTCUT_KEYS[type],
+}: {
+  type: Mark
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for toggling marks in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useMark` hook instead.
+ */
+export const MarkButton = React.forwardRef<HTMLButtonElement, MarkButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      type,
+      text,
+      hideWhenUnavailable = false,
+      onToggled,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      handleMark,
+      label,
+      canToggle,
+      isActive,
+      Icon,
+      shortcutKeys,
+    } = useMark({
+      editor,
+      type,
+      hideWhenUnavailable,
+      onToggled,
+    })
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleMark()
+      },
+      [handleMark, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        disabled={!canToggle}
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        data-disabled={!canToggle}
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <MarkShortcutBadge type={type} shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+MarkButton.displayName = "MarkButton"
diff --git a/components/tiptap-ui/mark-button/use-mark.ts b/components/tiptap-ui/mark-button/use-mark.ts
new file mode 100644
index 0000000..7b86ac8
--- /dev/null
+++ b/components/tiptap-ui/mark-button/use-mark.ts
@@ -0,0 +1,230 @@
+"use client"
+
+import * as React from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+import type { Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+import { useIsMobile } from "@/hooks/use-mobile"
+
+// --- Lib ---
+import { isMarkInSchema, isNodeTypeSelected } from "@/lib/tiptap-utils"
+
+// --- Icons ---
+import { BoldIcon } from "@/components/tiptap-icons/bold-icon"
+import { Code2Icon } from "@/components/tiptap-icons/code2-icon"
+import { ItalicIcon } from "@/components/tiptap-icons/italic-icon"
+import { StrikeIcon } from "@/components/tiptap-icons/strike-icon"
+import { SubscriptIcon } from "@/components/tiptap-icons/subscript-icon"
+import { SuperscriptIcon } from "@/components/tiptap-icons/superscript-icon"
+import { UnderlineIcon } from "@/components/tiptap-icons/underline-icon"
+
+export type Mark =
+  | "bold"
+  | "italic"
+  | "strike"
+  | "code"
+  | "underline"
+  | "superscript"
+  | "subscript"
+
+/**
+ * Configuration for the mark functionality
+ */
+export interface UseMarkConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The type of mark to toggle
+   */
+  type: Mark
+  /**
+   * Whether the button should hide when mark is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful mark toggle.
+   */
+  onToggled?: () => void
+}
+
+export const markIcons = {
+  bold: BoldIcon,
+  italic: ItalicIcon,
+  underline: UnderlineIcon,
+  strike: StrikeIcon,
+  code: Code2Icon,
+  superscript: SuperscriptIcon,
+  subscript: SubscriptIcon,
+}
+
+export const MARK_SHORTCUT_KEYS: Record<Mark, string> = {
+  bold: "mod+b",
+  italic: "mod+i",
+  underline: "mod+u",
+  strike: "mod+shift+s",
+  code: "mod+e",
+  superscript: "mod+.",
+  subscript: "mod+,",
+}
+
+/**
+ * Checks if a mark can be toggled in the current editor state
+ */
+export function canToggleMark(editor: Editor | null, type: Mark): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!isMarkInSchema(type, editor) || isNodeTypeSelected(editor, ["image"]))
+    return false
+
+  return editor.can().toggleMark(type)
+}
+
+/**
+ * Checks if a mark is currently active
+ */
+export function isMarkActive(editor: Editor | null, type: Mark): boolean {
+  if (!editor || !editor.isEditable) return false
+  return editor.isActive(type)
+}
+
+/**
+ * Toggles a mark in the editor
+ */
+export function toggleMark(editor: Editor | null, type: Mark): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canToggleMark(editor, type)) return false
+
+  return editor.chain().focus().toggleMark(type).run()
+}
+
+/**
+ * Determines if the mark button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  type: Mark
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, type, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isMarkInSchema(type, editor)) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleMark(editor, type)
+  }
+
+  return true
+}
+
+/**
+ * Gets the formatted mark name
+ */
+export function getFormattedMarkName(type: Mark): string {
+  return type.charAt(0).toUpperCase() + type.slice(1)
+}
+
+/**
+ * Custom hook that provides mark functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleBoldButton() {
+ *   const { isVisible, handleMark } = useMark({ type: "bold" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleMark}>Bold</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedItalicButton() {
+ *   const { isVisible, handleMark, label, isActive } = useMark({
+ *     editor: myEditor,
+ *     type: "italic",
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('Mark toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleMark}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Italic
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useMark(config: UseMarkConfig) {
+  const {
+    editor: providedEditor,
+    type,
+    hideWhenUnavailable = false,
+    onToggled,
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsMobile()
+  const [isVisible, setIsVisible] = React.useState<boolean>(true)
+  const canToggle = canToggleMark(editor, type)
+  const isActive = isMarkActive(editor, type)
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, type, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, type, hideWhenUnavailable])
+
+  const handleMark = React.useCallback(() => {
+    if (!editor) return false
+
+    const success = toggleMark(editor, type)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, type, onToggled])
+
+  useHotkeys(
+    MARK_SHORTCUT_KEYS[type],
+    (event) => {
+      event.preventDefault()
+      handleMark()
+    },
+    {
+      enabled: isVisible && canToggle,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleMark,
+    canToggle,
+    label: getFormattedMarkName(type),
+    shortcutKeys: MARK_SHORTCUT_KEYS[type],
+    Icon: markIcons[type],
+  }
+}
diff --git a/components/tiptap-ui/text-align-button/index.tsx b/components/tiptap-ui/text-align-button/index.tsx
new file mode 100644
index 0000000..d19f95c
--- /dev/null
+++ b/components/tiptap-ui/text-align-button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./text-align-button"
+export * from "./use-text-align"
diff --git a/components/tiptap-ui/text-align-button/text-align-button.tsx b/components/tiptap-ui/text-align-button/text-align-button.tsx
new file mode 100644
index 0000000..ce9d6a0
--- /dev/null
+++ b/components/tiptap-ui/text-align-button/text-align-button.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "@/lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type {
+  TextAlign,
+  UseTextAlignConfig,
+} from "@/components/tiptap-ui/text-align-button"
+import {
+  TEXT_ALIGN_SHORTCUT_KEYS,
+  useTextAlign,
+} from "@/components/tiptap-ui/text-align-button"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Badge } from "@/components/tiptap-ui-primitive/badge"
+
+export interface TextAlignButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseTextAlignConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function TextAlignShortcutBadge({
+  align,
+  shortcutKeys = TEXT_ALIGN_SHORTCUT_KEYS[align],
+}: {
+  align: TextAlign
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for setting text alignment in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useTextAlign` hook instead.
+ */
+export const TextAlignButton = React.forwardRef<
+  HTMLButtonElement,
+  TextAlignButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      align,
+      text,
+      hideWhenUnavailable = false,
+      onAligned,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      handleTextAlign,
+      label,
+      canAlign,
+      isActive,
+      Icon,
+      shortcutKeys,
+    } = useTextAlign({
+      editor,
+      align,
+      hideWhenUnavailable,
+      onAligned,
+    })
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleTextAlign()
+      },
+      [handleTextAlign, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        disabled={!canAlign}
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        data-disabled={!canAlign}
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <TextAlignShortcutBadge
+                align={align}
+                shortcutKeys={shortcutKeys}
+              />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+TextAlignButton.displayName = "TextAlignButton"
diff --git a/components/tiptap-ui/text-align-button/use-text-align.ts b/components/tiptap-ui/text-align-button/use-text-align.ts
new file mode 100644
index 0000000..b32fd20
--- /dev/null
+++ b/components/tiptap-ui/text-align-button/use-text-align.ts
@@ -0,0 +1,240 @@
+"use client"
+
+import * as React from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+import type { ChainedCommands } from "@tiptap/react"
+import { type Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+import { useIsMobile } from "@/hooks/use-mobile"
+
+// --- Lib ---
+import {
+  isExtensionAvailable,
+  isNodeTypeSelected,
+} from "@/lib/tiptap-utils"
+
+// --- Icons ---
+import { AlignCenterIcon } from "@/components/tiptap-icons/align-center-icon"
+import { AlignJustifyIcon } from "@/components/tiptap-icons/align-justify-icon"
+import { AlignLeftIcon } from "@/components/tiptap-icons/align-left-icon"
+import { AlignRightIcon } from "@/components/tiptap-icons/align-right-icon"
+
+export type TextAlign = "left" | "center" | "right" | "justify"
+
+/**
+ * Configuration for the text align functionality
+ */
+export interface UseTextAlignConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The text alignment to apply.
+   */
+  align: TextAlign
+  /**
+   * Whether the button should hide when alignment is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful alignment change.
+   */
+  onAligned?: () => void
+}
+
+export const TEXT_ALIGN_SHORTCUT_KEYS: Record<TextAlign, string> = {
+  left: "mod+shift+l",
+  center: "mod+shift+e",
+  right: "mod+shift+r",
+  justify: "mod+shift+j",
+}
+
+export const textAlignIcons = {
+  left: AlignLeftIcon,
+  center: AlignCenterIcon,
+  right: AlignRightIcon,
+  justify: AlignJustifyIcon,
+}
+
+export const textAlignLabels: Record<TextAlign, string> = {
+  left: "Align left",
+  center: "Align center",
+  right: "Align right",
+  justify: "Align justify",
+}
+
+/**
+ * Checks if text alignment can be performed in the current editor state
+ */
+export function canSetTextAlign(
+  editor: Editor | null,
+  align: TextAlign
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (
+    !isExtensionAvailable(editor, "textAlign") ||
+    isNodeTypeSelected(editor, ["image"])
+  )
+    return false
+
+  return editor.can().setTextAlign(align)
+}
+
+export function hasSetTextAlign(
+  commands: ChainedCommands
+): commands is ChainedCommands & {
+  setTextAlign: (align: TextAlign) => ChainedCommands
+} {
+  return "setTextAlign" in commands
+}
+
+/**
+ * Checks if the text alignment is currently active
+ */
+export function isTextAlignActive(
+  editor: Editor | null,
+  align: TextAlign
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  return editor.isActive({ textAlign: align })
+}
+
+/**
+ * Sets text alignment in the editor
+ */
+export function setTextAlign(editor: Editor | null, align: TextAlign): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canSetTextAlign(editor, align)) return false
+
+  const chain = editor.chain().focus()
+  if (hasSetTextAlign(chain)) {
+    return chain.setTextAlign(align).run()
+  }
+
+  return false
+}
+
+/**
+ * Determines if the text align button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+  align: TextAlign
+}): boolean {
+  const { editor, hideWhenUnavailable, align } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isExtensionAvailable(editor, "textAlign")) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canSetTextAlign(editor, align)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides text align functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleAlignButton() {
+ *   const { isVisible, handleTextAlign } = useTextAlign({ align: "center" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleTextAlign}>Align Center</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedAlignButton() {
+ *   const { isVisible, handleTextAlign, label, isActive } = useTextAlign({
+ *     editor: myEditor,
+ *     align: "right",
+ *     hideWhenUnavailable: true,
+ *     onAligned: () => console.log('Text aligned!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleTextAlign}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Align Right
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useTextAlign(config: UseTextAlignConfig) {
+  const {
+    editor: providedEditor,
+    align,
+    hideWhenUnavailable = false,
+    onAligned,
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsMobile()
+  const [isVisible, setIsVisible] = React.useState<boolean>(true)
+  const canAlign = canSetTextAlign(editor, align)
+  const isActive = isTextAlignActive(editor, align)
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, align, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable, align])
+
+  const handleTextAlign = React.useCallback(() => {
+    if (!editor) return false
+
+    const success = setTextAlign(editor, align)
+    if (success) {
+      onAligned?.()
+    }
+    return success
+  }, [editor, align, onAligned])
+
+  useHotkeys(
+    TEXT_ALIGN_SHORTCUT_KEYS[align],
+    (event) => {
+      event.preventDefault()
+      handleTextAlign()
+    },
+    {
+      enabled: isVisible && canAlign,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleTextAlign,
+    canAlign,
+    label: textAlignLabels[align],
+    shortcutKeys: TEXT_ALIGN_SHORTCUT_KEYS[align],
+    Icon: textAlignIcons[align],
+  }
+}
diff --git a/components/tiptap-ui/undo-redo-button/index.tsx b/components/tiptap-ui/undo-redo-button/index.tsx
new file mode 100644
index 0000000..fa0fdbe
--- /dev/null
+++ b/components/tiptap-ui/undo-redo-button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./undo-redo-button"
+export * from "./use-undo-redo"
diff --git a/components/tiptap-ui/undo-redo-button/undo-redo-button.tsx b/components/tiptap-ui/undo-redo-button/undo-redo-button.tsx
new file mode 100644
index 0000000..9600a55
--- /dev/null
+++ b/components/tiptap-ui/undo-redo-button/undo-redo-button.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import * as React from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "@/lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type {
+  UndoRedoAction,
+  UseUndoRedoConfig,
+} from "@/components/tiptap-ui/undo-redo-button"
+import {
+  UNDO_REDO_SHORTCUT_KEYS,
+  useUndoRedo,
+} from "@/components/tiptap-ui/undo-redo-button"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "@/components/tiptap-ui-primitive/button"
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Badge } from "@/components/tiptap-ui-primitive/badge"
+
+export interface UndoRedoButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseUndoRedoConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function HistoryShortcutBadge({
+  action,
+  shortcutKeys = UNDO_REDO_SHORTCUT_KEYS[action],
+}: {
+  action: UndoRedoAction
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for triggering undo/redo actions in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useHistory` hook instead.
+ */
+export const UndoRedoButton = React.forwardRef<
+  HTMLButtonElement,
+  UndoRedoButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      action,
+      text,
+      hideWhenUnavailable = false,
+      onExecuted,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, handleAction, label, canExecute, Icon, shortcutKeys } =
+      useUndoRedo({
+        editor,
+        action,
+        hideWhenUnavailable,
+        onExecuted,
+      })
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleAction()
+      },
+      [handleAction, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        disabled={!canExecute}
+        data-style="ghost"
+        data-disabled={!canExecute}
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <HistoryShortcutBadge
+                action={action}
+                shortcutKeys={shortcutKeys}
+              />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+UndoRedoButton.displayName = "UndoRedoButton"
diff --git a/components/tiptap-ui/undo-redo-button/use-undo-redo.ts b/components/tiptap-ui/undo-redo-button/use-undo-redo.ts
new file mode 100644
index 0000000..42c3963
--- /dev/null
+++ b/components/tiptap-ui/undo-redo-button/use-undo-redo.ts
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+import { type Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "@/hooks/use-tiptap-editor"
+import { useIsMobile } from "@/hooks/use-mobile"
+
+// --- Lib ---
+import { isNodeTypeSelected } from "@/lib/tiptap-utils"
+
+// --- Icons ---
+import { Redo2Icon } from "@/components/tiptap-icons/redo2-icon"
+import { Undo2Icon } from "@/components/tiptap-icons/undo2-icon"
+
+export type UndoRedoAction = "undo" | "redo"
+
+/**
+ * Configuration for the history functionality
+ */
+export interface UseUndoRedoConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The history action to perform (undo or redo).
+   */
+  action: UndoRedoAction
+  /**
+   * Whether the button should hide when action is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful action execution.
+   */
+  onExecuted?: () => void
+}
+
+export const UNDO_REDO_SHORTCUT_KEYS: Record<UndoRedoAction, string> = {
+  undo: "mod+z",
+  redo: "mod+shift+z",
+}
+
+export const historyActionLabels: Record<UndoRedoAction, string> = {
+  undo: "Undo",
+  redo: "Redo",
+}
+
+export const historyIcons = {
+  undo: Undo2Icon,
+  redo: Redo2Icon,
+}
+
+/**
+ * Checks if a history action can be executed
+ */
+export function canExecuteUndoRedoAction(
+  editor: Editor | null,
+  action: UndoRedoAction
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (isNodeTypeSelected(editor, ["image"])) return false
+
+  return action === "undo" ? editor.can().undo() : editor.can().redo()
+}
+
+/**
+ * Executes a history action on the editor
+ */
+export function executeUndoRedoAction(
+  editor: Editor | null,
+  action: UndoRedoAction
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canExecuteUndoRedoAction(editor, action)) return false
+
+  const chain = editor.chain().focus()
+  return action === "undo" ? chain.undo().run() : chain.redo().run()
+}
+
+/**
+ * Determines if the history button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+  action: UndoRedoAction
+}): boolean {
+  const { editor, hideWhenUnavailable, action } = props
+
+  if (!editor || !editor.isEditable) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canExecuteUndoRedoAction(editor, action)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides history functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleUndoButton() {
+ *   const { isVisible, handleAction } = useHistory({ action: "undo" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleAction}>Undo</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedRedoButton() {
+ *   const { isVisible, handleAction, label } = useHistory({
+ *     editor: myEditor,
+ *     action: "redo",
+ *     hideWhenUnavailable: true,
+ *     onExecuted: () => console.log('Action executed!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleAction}
+ *       aria-label={label}
+ *     >
+ *       Redo
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useUndoRedo(config: UseUndoRedoConfig) {
+  const {
+    editor: providedEditor,
+    action,
+    hideWhenUnavailable = false,
+    onExecuted,
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsMobile()
+  const [isVisible, setIsVisible] = React.useState<boolean>(true)
+  const canExecute = canExecuteUndoRedoAction(editor, action)
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable, action }))
+    }
+
+    handleUpdate()
+
+    editor.on("transaction", handleUpdate)
+
+    return () => {
+      editor.off("transaction", handleUpdate)
+    }
+  }, [editor, hideWhenUnavailable, action])
+
+  const handleAction = React.useCallback(() => {
+    if (!editor) return false
+
+    const success = executeUndoRedoAction(editor, action)
+    if (success) {
+      onExecuted?.()
+    }
+    return success
+  }, [editor, action, onExecuted])
+
+  useHotkeys(
+    UNDO_REDO_SHORTCUT_KEYS[action],
+    (event) => {
+      event.preventDefault()
+      handleAction()
+    },
+    {
+      enabled: isVisible && canExecute,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    handleAction,
+    canExecute,
+    label: historyActionLabels[action],
+    shortcutKeys: UNDO_REDO_SHORTCUT_KEYS[action],
+    Icon: historyIcons[action],
+  }
+}
diff --git a/components/toc-toggle.tsx b/components/toc-toggle.tsx
new file mode 100644
index 0000000..43f4807
--- /dev/null
+++ b/components/toc-toggle.tsx
@@ -0,0 +1,66 @@
+"use client";
+import { cn } from '@/lib/utils';
+
+interface TOCToggleProps {
+    onToggle: (visible: boolean) => void;
+    isVisible: boolean;
+}
+
+export default function TOCToggle({ onToggle, isVisible }: TOCToggleProps) {
+    return (
+        <button
+            onClick={() => onToggle(!isVisible)}
+            className={cn(
+                "fixed left-4 top-20 z-50 group transition-all duration-300 ease-out",
+                "bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700",
+                "rounded-xl shadow-xl backdrop-blur-sm bg-opacity-95 dark:bg-opacity-95",
+                "hover:shadow-2xl hover:scale-105 active:scale-95",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 focus:ring-offset-2",
+                "hidden xl:flex items-center justify-center w-12 h-12",
+                {
+                    "translate-x-0": isVisible,
+                    "-translate-x-2": !isVisible
+                }
+            )}
+            title={isVisible ? "隐藏目录" : "显示目录"}
+        >
+            <div className="relative">
+                {/* 目录图标 */}
+                <svg
+                    className={cn(
+                        "w-5 h-5 text-gray-600 dark:text-gray-400 transition-all duration-300 ease-out group-hover:text-gray-900 dark:group-hover:text-gray-100",
+                        isVisible ? "opacity-100 rotate-0" : "opacity-100 rotate-0"
+                    )}
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                >
+                    {isVisible ? (
+                        /* X 图标 - 关闭 */
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M6 18L18 6M6 6l12 12"
+                        />
+                    ) : (
+                        /* 菜单图标 - 打开 */
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M4 6h16M4 10h12M4 14h8"
+                        />
+                    )}
+                </svg>
+
+                {/* 悬停提示点 */}
+                <div className={cn(
+                    "absolute -top-1 -right-1 w-2 h-2 bg-blue-500 rounded-full transition-all duration-300 ease-out",
+                    "opacity-0 scale-0 group-hover:opacity-100 group-hover:scale-100",
+                    isVisible && "opacity-0"
+                )} />
+            </div>
+        </button>
+    );
+}
\ No newline at end of file
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
new file mode 100644
index 0000000..5e6778c
--- /dev/null
+++ b/components/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..8e4fa13
--- /dev/null
+++ b/components/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/hooks/use-composed-ref.ts b/hooks/use-composed-ref.ts
new file mode 100644
index 0000000..98bab6d
--- /dev/null
+++ b/hooks/use-composed-ref.ts
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+
+// basically Exclude<React.ClassAttributes<T>["ref"], string>
+type UserRef<T> =
+  | ((instance: T | null) => void)
+  | React.RefObject<T | null>
+  | null
+  | undefined
+
+const updateRef = <T>(ref: NonNullable<UserRef<T>>, value: T | null) => {
+  if (typeof ref === "function") {
+    ref(value)
+  } else if (ref && typeof ref === "object" && "current" in ref) {
+    // Safe assignment without MutableRefObject
+    ;(ref as { current: T | null }).current = value
+  }
+}
+
+export const useComposedRef = <T extends HTMLElement>(
+  libRef: React.RefObject<T | null>,
+  userRef: UserRef<T>
+) => {
+  const prevUserRef = React.useRef<UserRef<T>>(null)
+
+  return React.useCallback(
+    (instance: T | null) => {
+      if (libRef && "current" in libRef) {
+        ;(libRef as { current: T | null }).current = instance
+      }
+
+      if (prevUserRef.current) {
+        updateRef(prevUserRef.current, null)
+      }
+
+      prevUserRef.current = userRef
+
+      if (userRef) {
+        updateRef(userRef, instance)
+      }
+    },
+    [libRef, userRef]
+  )
+}
+
+export default useComposedRef
diff --git a/hooks/use-cursor-visibility.ts b/hooks/use-cursor-visibility.ts
new file mode 100644
index 0000000..c99296b
--- /dev/null
+++ b/hooks/use-cursor-visibility.ts
@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import { useWindowSize } from "@/hooks/use-window-size"
+import { useBodyRect } from "./use-element-rect"
+
+export interface CursorVisibilityOptions {
+  /**
+   * The Tiptap editor instance
+   */
+  editor?: Editor | null
+  /**
+   * Reference to the toolbar element that may obscure the cursor
+   */
+  overlayHeight?: number
+}
+
+/**
+ * Custom hook that ensures the cursor remains visible when typing in a Tiptap editor.
+ * Automatically scrolls the window when the cursor would be hidden by the toolbar.
+ *
+ * @param options.editor The Tiptap editor instance
+ * @param options.overlayHeight Toolbar height to account for
+ * @returns The bounding rect of the body
+ */
+export function useCursorVisibility({
+  editor,
+  overlayHeight = 0,
+}: CursorVisibilityOptions) {
+  const { height: windowHeight } = useWindowSize()
+  const rect = useBodyRect({
+    enabled: true,
+    throttleMs: 100,
+    useResizeObserver: true,
+  })
+
+  React.useEffect(() => {
+    const ensureCursorVisibility = () => {
+      if (!editor) return
+
+      const { state, view } = editor
+      if (!view.hasFocus()) return
+
+      // Get current cursor position coordinates
+      const { from } = state.selection
+      const cursorCoords = view.coordsAtPos(from)
+
+      if (windowHeight < rect.height && cursorCoords) {
+        const availableSpace = windowHeight - cursorCoords.top
+
+        // If the cursor is hidden behind the overlay or offscreen, scroll it into view
+        if (availableSpace < overlayHeight) {
+          const targetCursorY = Math.max(windowHeight / 2, overlayHeight)
+          const currentScrollY = window.scrollY
+          const cursorAbsoluteY = cursorCoords.top + currentScrollY
+          const newScrollY = cursorAbsoluteY - targetCursorY
+
+          window.scrollTo({
+            top: Math.max(0, newScrollY),
+            behavior: "smooth",
+          })
+        }
+      }
+    }
+
+    ensureCursorVisibility()
+  }, [editor, overlayHeight, windowHeight, rect.height])
+
+  return rect
+}
diff --git a/hooks/use-element-rect.ts b/hooks/use-element-rect.ts
new file mode 100644
index 0000000..8a7a552
--- /dev/null
+++ b/hooks/use-element-rect.ts
@@ -0,0 +1,166 @@
+"use client"
+
+import * as React from "react"
+import { useThrottledCallback } from "./use-throttled-callback"
+
+export type RectState = Omit<DOMRect, "toJSON">
+
+export interface ElementRectOptions {
+  /**
+   * The element to track. Can be an Element, ref, or selector string.
+   * Defaults to document.body if not provided.
+   */
+  element?: Element | React.RefObject<Element> | string | null
+  /**
+   * Whether to enable rect tracking
+   */
+  enabled?: boolean
+  /**
+   * Throttle delay in milliseconds for rect updates
+   */
+  throttleMs?: number
+  /**
+   * Whether to use ResizeObserver for more accurate tracking
+   */
+  useResizeObserver?: boolean
+}
+
+const initialRect: RectState = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+}
+
+const isSSR = typeof window === "undefined"
+const hasResizeObserver = !isSSR && typeof ResizeObserver !== "undefined"
+
+/**
+ * Helper function to check if code is running on client side
+ */
+const isClientSide = (): boolean => !isSSR
+
+/**
+ * Custom hook that tracks an element's bounding rectangle and updates on resize, scroll, etc.
+ *
+ * @param options Configuration options for element rect tracking
+ * @returns The current bounding rectangle of the element
+ */
+export function useElementRect({
+  element,
+  enabled = true,
+  throttleMs = 100,
+  useResizeObserver = true,
+}: ElementRectOptions = {}): RectState {
+  const [rect, setRect] = React.useState<RectState>(initialRect)
+
+  const getTargetElement = React.useCallback((): Element | null => {
+    if (!enabled || !isClientSide()) return null
+
+    if (!element) {
+      return document.body
+    }
+
+    if (typeof element === "string") {
+      return document.querySelector(element)
+    }
+
+    if ("current" in element) {
+      return element.current
+    }
+
+    return element
+  }, [element, enabled])
+
+  const updateRect = useThrottledCallback(
+    () => {
+      if (!enabled || !isClientSide()) return
+
+      const targetElement = getTargetElement()
+      if (!targetElement) {
+        setRect(initialRect)
+        return
+      }
+
+      const newRect = targetElement.getBoundingClientRect()
+      setRect({
+        x: newRect.x,
+        y: newRect.y,
+        width: newRect.width,
+        height: newRect.height,
+        top: newRect.top,
+        right: newRect.right,
+        bottom: newRect.bottom,
+        left: newRect.left,
+      })
+    },
+    throttleMs,
+    [enabled, getTargetElement],
+    { leading: true, trailing: true }
+  )
+
+  React.useEffect(() => {
+    if (!enabled || !isClientSide()) {
+      setRect(initialRect)
+      return
+    }
+
+    const targetElement = getTargetElement()
+    if (!targetElement) return
+
+    updateRect()
+
+    const cleanup: (() => void)[] = []
+
+    if (useResizeObserver && hasResizeObserver) {
+      const resizeObserver = new ResizeObserver(() => {
+        window.requestAnimationFrame(updateRect)
+      })
+      resizeObserver.observe(targetElement)
+      cleanup.push(() => resizeObserver.disconnect())
+    }
+
+    const handleUpdate = () => updateRect()
+
+    window.addEventListener("scroll", handleUpdate, { passive: true })
+    window.addEventListener("resize", handleUpdate, { passive: true })
+
+    cleanup.push(() => {
+      window.removeEventListener("scroll", handleUpdate)
+      window.removeEventListener("resize", handleUpdate)
+    })
+
+    return () => {
+      cleanup.forEach((fn) => fn())
+      setRect(initialRect)
+    }
+  }, [enabled, getTargetElement, updateRect, useResizeObserver])
+
+  return rect
+}
+
+/**
+ * Convenience hook for tracking document.body rect
+ */
+export function useBodyRect(
+  options: Omit<ElementRectOptions, "element"> = {}
+): RectState {
+  return useElementRect({
+    ...options,
+    element: isClientSide() ? document.body : null,
+  })
+}
+
+/**
+ * Convenience hook for tracking a ref element's rect
+ */
+export function useRefRect<T extends Element>(
+  ref: React.RefObject<T>,
+  options: Omit<ElementRectOptions, "element"> = {}
+): RectState {
+  return useElementRect({ ...options, element: ref })
+}
diff --git a/hooks/use-menu-navigation.ts b/hooks/use-menu-navigation.ts
new file mode 100644
index 0000000..554bda1
--- /dev/null
+++ b/hooks/use-menu-navigation.ts
@@ -0,0 +1,196 @@
+"use client"
+
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+
+type Orientation = "horizontal" | "vertical" | "both"
+
+interface MenuNavigationOptions<T> {
+  /**
+   * The Tiptap editor instance, if using with a Tiptap editor.
+   */
+  editor?: Editor | null
+  /**
+   * Reference to the container element for handling keyboard events.
+   */
+  containerRef?: React.RefObject<HTMLElement | null>
+  /**
+   * Search query that affects the selected item.
+   */
+  query?: string
+  /**
+   * Array of items to navigate through.
+   */
+  items: T[]
+  /**
+   * Callback fired when an item is selected.
+   */
+  onSelect?: (item: T) => void
+  /**
+   * Callback fired when the menu should close.
+   */
+  onClose?: () => void
+  /**
+   * The navigation orientation of the menu.
+   * @default "vertical"
+   */
+  orientation?: Orientation
+  /**
+   * Whether to automatically select the first item when the menu opens.
+   * @default true
+   */
+  autoSelectFirstItem?: boolean
+}
+
+/**
+ * Hook that implements keyboard navigation for dropdown menus and command palettes.
+ *
+ * Handles arrow keys, tab, home/end, enter for selection, and escape to close.
+ * Works with both Tiptap editors and regular DOM elements.
+ *
+ * @param options - Configuration options for the menu navigation
+ * @returns Object containing the selected index and a setter function
+ */
+export function useMenuNavigation<T>({
+  editor,
+  containerRef,
+  query,
+  items,
+  onSelect,
+  onClose,
+  orientation = "vertical",
+  autoSelectFirstItem = true,
+}: MenuNavigationOptions<T>) {
+  const [selectedIndex, setSelectedIndex] = React.useState<number>(
+    autoSelectFirstItem ? 0 : -1
+  )
+
+  React.useEffect(() => {
+    const handleKeyboardNavigation = (event: KeyboardEvent) => {
+      if (!items.length) return false
+
+      const moveNext = () =>
+        setSelectedIndex((currentIndex) => {
+          if (currentIndex === -1) return 0
+          return (currentIndex + 1) % items.length
+        })
+
+      const movePrev = () =>
+        setSelectedIndex((currentIndex) => {
+          if (currentIndex === -1) return items.length - 1
+          return (currentIndex - 1 + items.length) % items.length
+        })
+
+      switch (event.key) {
+        case "ArrowUp": {
+          if (orientation === "horizontal") return false
+          event.preventDefault()
+          movePrev()
+          return true
+        }
+
+        case "ArrowDown": {
+          if (orientation === "horizontal") return false
+          event.preventDefault()
+          moveNext()
+          return true
+        }
+
+        case "ArrowLeft": {
+          if (orientation === "vertical") return false
+          event.preventDefault()
+          movePrev()
+          return true
+        }
+
+        case "ArrowRight": {
+          if (orientation === "vertical") return false
+          event.preventDefault()
+          moveNext()
+          return true
+        }
+
+        case "Tab": {
+          event.preventDefault()
+          if (event.shiftKey) {
+            movePrev()
+          } else {
+            moveNext()
+          }
+          return true
+        }
+
+        case "Home": {
+          event.preventDefault()
+          setSelectedIndex(0)
+          return true
+        }
+
+        case "End": {
+          event.preventDefault()
+          setSelectedIndex(items.length - 1)
+          return true
+        }
+
+        case "Enter": {
+          if (event.isComposing) return false
+          event.preventDefault()
+          if (selectedIndex !== -1 && items[selectedIndex]) {
+            onSelect?.(items[selectedIndex])
+          }
+          return true
+        }
+
+        case "Escape": {
+          event.preventDefault()
+          onClose?.()
+          return true
+        }
+
+        default:
+          return false
+      }
+    }
+
+    let targetElement: HTMLElement | null = null
+
+    if (editor) {
+      targetElement = editor.view.dom
+    } else if (containerRef?.current) {
+      targetElement = containerRef.current
+    }
+
+    if (targetElement) {
+      targetElement.addEventListener("keydown", handleKeyboardNavigation, true)
+
+      return () => {
+        targetElement?.removeEventListener(
+          "keydown",
+          handleKeyboardNavigation,
+          true
+        )
+      }
+    }
+
+    return undefined
+  }, [
+    editor,
+    containerRef,
+    items,
+    selectedIndex,
+    onSelect,
+    onClose,
+    orientation,
+  ])
+
+  React.useEffect(() => {
+    if (query) {
+      setSelectedIndex(autoSelectFirstItem ? 0 : -1)
+    }
+  }, [query, autoSelectFirstItem])
+
+  return {
+    selectedIndex: items.length ? selectedIndex : undefined,
+    setSelectedIndex,
+  }
+}
diff --git a/hooks/use-mobile.ts b/hooks/use-mobile.ts
index 2b0fe1d..ef6b0e3 100644
--- a/hooks/use-mobile.ts
+++ b/hooks/use-mobile.ts
@@ -1,19 +1,19 @@
+"use client"
+
 import * as React from "react"
 
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
+export function useIsMobile(breakpoint = 768) {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`)
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+      setIsMobile(window.innerWidth < breakpoint)
     }
     mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    setIsMobile(window.innerWidth < breakpoint)
     return () => mql.removeEventListener("change", onChange)
-  }, [])
+  }, [breakpoint])
 
   return !!isMobile
 }
diff --git a/hooks/use-scrolling.ts b/hooks/use-scrolling.ts
new file mode 100644
index 0000000..3ba2a40
--- /dev/null
+++ b/hooks/use-scrolling.ts
@@ -0,0 +1,75 @@
+import type { RefObject } from "react"
+import { useEffect, useState } from "react"
+
+type ScrollTarget = RefObject<HTMLElement> | Window | null | undefined
+type EventTargetWithScroll = Window | HTMLElement | Document
+
+interface UseScrollingOptions {
+  debounce?: number
+  fallbackToDocument?: boolean
+}
+
+export function useScrolling(
+  target?: ScrollTarget,
+  options: UseScrollingOptions = {}
+): boolean {
+  const { debounce = 150, fallbackToDocument = true } = options
+  const [isScrolling, setIsScrolling] = useState(false)
+
+  useEffect(() => {
+    // Resolve element or window
+    const element: EventTargetWithScroll =
+      target && typeof Window !== "undefined" && target instanceof Window
+        ? target
+        : ((target as RefObject<HTMLElement>)?.current ?? window)
+
+    // Mobile: fallback to document when using window
+    const eventTarget: EventTargetWithScroll =
+      fallbackToDocument &&
+      element === window &&
+      typeof document !== "undefined"
+        ? document
+        : element
+
+    const on = (
+      el: EventTargetWithScroll,
+      event: string,
+      handler: EventListener
+    ) => el.addEventListener(event, handler, { passive: true })
+
+    const off = (
+      el: EventTargetWithScroll,
+      event: string,
+      handler: EventListener
+    ) => el.removeEventListener(event, handler)
+
+    let timeout: ReturnType<typeof setTimeout>
+    const supportsScrollEnd = element === window && "onscrollend" in window
+
+    const handleScroll: EventListener = () => {
+      if (!isScrolling) setIsScrolling(true)
+
+      if (!supportsScrollEnd) {
+        clearTimeout(timeout)
+        timeout = setTimeout(() => setIsScrolling(false), debounce)
+      }
+    }
+
+    const handleScrollEnd: EventListener = () => setIsScrolling(false)
+
+    on(eventTarget, "scroll", handleScroll)
+    if (supportsScrollEnd) {
+      on(eventTarget, "scrollend", handleScrollEnd)
+    }
+
+    return () => {
+      off(eventTarget, "scroll", handleScroll)
+      if (supportsScrollEnd) {
+        off(eventTarget, "scrollend", handleScrollEnd)
+      }
+      clearTimeout(timeout)
+    }
+  }, [target, debounce, fallbackToDocument, isScrolling])
+
+  return isScrolling
+}
diff --git a/hooks/use-throttled-callback.ts b/hooks/use-throttled-callback.ts
new file mode 100644
index 0000000..d291c6c
--- /dev/null
+++ b/hooks/use-throttled-callback.ts
@@ -0,0 +1,47 @@
+import throttle from "lodash.throttle"
+import * as React from "react"
+import { useUnmount } from "./use-unmount"
+
+interface ThrottleSettings {
+  leading?: boolean | undefined
+  trailing?: boolean | undefined
+}
+
+const defaultOptions: ThrottleSettings = {
+  leading: false,
+  trailing: true,
+}
+
+/**
+ * A hook that returns a throttled callback function.
+ *
+ * @param fn The function to throttle
+ * @param wait The time in ms to wait before calling the function
+ * @param dependencies The dependencies to watch for changes
+ * @param options The throttle options
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useThrottledCallback<T extends (...args: any[]) => any>(
+  fn: T,
+  wait = 250,
+  dependencies: React.DependencyList = [],
+  options: ThrottleSettings = defaultOptions
+): {
+  (this: ThisParameterType<T>, ...args: Parameters<T>): ReturnType<T>
+  cancel: () => void
+  flush: () => void
+} {
+  const handler = React.useMemo(
+    () => throttle<T>(fn, wait, options),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    dependencies
+  )
+
+  useUnmount(() => {
+    handler.cancel()
+  })
+
+  return handler
+}
+
+export default useThrottledCallback
diff --git a/hooks/use-tiptap-editor.ts b/hooks/use-tiptap-editor.ts
new file mode 100644
index 0000000..4983ea2
--- /dev/null
+++ b/hooks/use-tiptap-editor.ts
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import { useCurrentEditor, useEditorState } from "@tiptap/react"
+
+/**
+ * Hook that provides access to a Tiptap editor instance.
+ *
+ * Accepts an optional editor instance directly, or falls back to retrieving
+ * the editor from the Tiptap context if available. This allows components
+ * to work both when given an editor directly and when used within a Tiptap
+ * editor context.
+ *
+ * @param providedEditor - Optional editor instance to use instead of the context editor
+ * @returns The provided editor or the editor from context, whichever is available
+ */
+export function useTiptapEditor(providedEditor?: Editor | null): {
+  editor: Editor | null
+  editorState?: Editor["state"]
+  canCommand?: Editor["can"]
+} {
+  const { editor: coreEditor } = useCurrentEditor()
+  const mainEditor = React.useMemo(
+    () => providedEditor || coreEditor,
+    [providedEditor, coreEditor]
+  )
+
+  const editorState = useEditorState({
+    editor: mainEditor,
+    selector(context) {
+      if (!context.editor) {
+        return {
+          editor: null,
+          editorState: undefined,
+          canCommand: undefined,
+        }
+      }
+
+      return {
+        editor: context.editor,
+        editorState: context.editor.state,
+        canCommand: context.editor.can,
+      }
+    },
+  })
+
+  return editorState || { editor: null }
+}
diff --git a/hooks/use-unmount.ts b/hooks/use-unmount.ts
new file mode 100644
index 0000000..91a22e7
--- /dev/null
+++ b/hooks/use-unmount.ts
@@ -0,0 +1,21 @@
+import { useRef, useEffect } from "react"
+
+/**
+ * Hook that executes a callback when the component unmounts.
+ *
+ * @param callback Function to be called on component unmount
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useUnmount = (callback: (...args: Array<any>) => any) => {
+  const ref = useRef(callback)
+  ref.current = callback
+
+  useEffect(
+    () => () => {
+      ref.current()
+    },
+    []
+  )
+}
+
+export default useUnmount
diff --git a/hooks/use-window-size.ts b/hooks/use-window-size.ts
new file mode 100644
index 0000000..e758b94
--- /dev/null
+++ b/hooks/use-window-size.ts
@@ -0,0 +1,93 @@
+"use client"
+
+import * as React from "react"
+import { useThrottledCallback } from "./use-throttled-callback"
+
+export interface WindowSizeState {
+  /**
+   * The width of the window's visual viewport in pixels.
+   */
+  width: number
+  /**
+   * The height of the window's visual viewport in pixels.
+   */
+  height: number
+  /**
+   * The distance from the top of the visual viewport to the top of the layout viewport.
+   * Particularly useful for handling mobile keyboard appearance.
+   */
+  offsetTop: number
+  /**
+   * The distance from the left of the visual viewport to the left of the layout viewport.
+   */
+  offsetLeft: number
+  /**
+   * The scale factor of the visual viewport.
+   * This is useful for scaling elements based on the current zoom level.
+   */
+  scale: number
+}
+
+/**
+ * Hook that tracks the window's visual viewport dimensions, position, and provides
+ * a CSS transform for positioning elements.
+ *
+ * Uses the Visual Viewport API to get accurate measurements, especially important
+ * for mobile devices where virtual keyboards can change the visible area.
+ * Only updates state when values actually change to optimize performance.
+ *
+ * @returns An object containing viewport properties and a CSS transform string
+ */
+export function useWindowSize(): WindowSizeState {
+  const [windowSize, setWindowSize] = React.useState<WindowSizeState>({
+    width: 0,
+    height: 0,
+    offsetTop: 0,
+    offsetLeft: 0,
+    scale: 0,
+  })
+
+  const handleViewportChange = useThrottledCallback(() => {
+    if (typeof window === "undefined") return
+
+    const vp = window.visualViewport
+    if (!vp) return
+
+    const {
+      width = 0,
+      height = 0,
+      offsetTop = 0,
+      offsetLeft = 0,
+      scale = 0,
+    } = vp
+
+    setWindowSize((prevState) => {
+      if (
+        width === prevState.width &&
+        height === prevState.height &&
+        offsetTop === prevState.offsetTop &&
+        offsetLeft === prevState.offsetLeft &&
+        scale === prevState.scale
+      ) {
+        return prevState
+      }
+
+      return { width, height, offsetTop, offsetLeft, scale }
+    })
+  }, 200)
+
+  React.useEffect(() => {
+    const visualViewport = window.visualViewport
+    if (!visualViewport) return
+
+    visualViewport.addEventListener("resize", handleViewportChange)
+
+    handleViewportChange()
+
+    return () => {
+      visualViewport.removeEventListener("resize", handleViewportChange)
+    }
+  }, [handleViewportChange])
+
+  return windowSize
+}
diff --git a/lib/tiptap-utils.ts b/lib/tiptap-utils.ts
new file mode 100644
index 0000000..14a2c3a
--- /dev/null
+++ b/lib/tiptap-utils.ts
@@ -0,0 +1,356 @@
+import type { Node as TiptapNode } from "@tiptap/pm/model"
+import { NodeSelection } from "@tiptap/pm/state"
+import type { Editor } from "@tiptap/react"
+
+export const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB
+
+export const MAC_SYMBOLS: Record<string, string> = {
+  mod: "⌘",
+  ctrl: "⌘",
+  alt: "⌥",
+  shift: "⇧",
+  backspace: "Del",
+} as const
+
+export function cn(
+  ...classes: (string | boolean | undefined | null)[]
+): string {
+  return classes.filter(Boolean).join(" ")
+}
+
+/**
+ * Determines if the current platform is macOS
+ * @returns boolean indicating if the current platform is Mac
+ */
+export function isMac(): boolean {
+  return (
+    typeof navigator !== "undefined" &&
+    navigator.platform.toLowerCase().includes("mac")
+  )
+}
+
+/**
+ * Formats a shortcut key based on the platform (Mac or non-Mac)
+ * @param key - The key to format (e.g., "ctrl", "alt", "shift")
+ * @param isMac - Boolean indicating if the platform is Mac
+ * @param capitalize - Whether to capitalize the key (default: true)
+ * @returns Formatted shortcut key symbol
+ */
+export const formatShortcutKey = (
+  key: string,
+  isMac: boolean,
+  capitalize: boolean = true
+) => {
+  if (isMac) {
+    const lowerKey = key.toLowerCase()
+    return MAC_SYMBOLS[lowerKey] || (capitalize ? key.toUpperCase() : key)
+  }
+
+  return capitalize ? key.charAt(0).toUpperCase() + key.slice(1) : key
+}
+
+/**
+ * Parses a shortcut key string into an array of formatted key symbols
+ * @param shortcutKeys - The string of shortcut keys (e.g., "ctrl-alt-shift")
+ * @param delimiter - The delimiter used to split the keys (default: "-")
+ * @param capitalize - Whether to capitalize the keys (default: true)
+ * @returns Array of formatted shortcut key symbols
+ */
+export const parseShortcutKeys = (props: {
+  shortcutKeys: string | undefined
+  delimiter?: string
+  capitalize?: boolean
+}) => {
+  const { shortcutKeys, delimiter = "+", capitalize = true } = props
+
+  if (!shortcutKeys) return []
+
+  return shortcutKeys
+    .split(delimiter)
+    .map((key) => key.trim())
+    .map((key) => formatShortcutKey(key, isMac(), capitalize))
+}
+
+/**
+ * Checks if a mark exists in the editor schema
+ * @param markName - The name of the mark to check
+ * @param editor - The editor instance
+ * @returns boolean indicating if the mark exists in the schema
+ */
+export const isMarkInSchema = (
+  markName: string,
+  editor: Editor | null
+): boolean => {
+  if (!editor?.schema) return false
+  return editor.schema.spec.marks.get(markName) !== undefined
+}
+
+/**
+ * Checks if a node exists in the editor schema
+ * @param nodeName - The name of the node to check
+ * @param editor - The editor instance
+ * @returns boolean indicating if the node exists in the schema
+ */
+export const isNodeInSchema = (
+  nodeName: string,
+  editor: Editor | null
+): boolean => {
+  if (!editor?.schema) return false
+  return editor.schema.spec.nodes.get(nodeName) !== undefined
+}
+
+/**
+ * Checks if a value is a valid number (not null, undefined, or NaN)
+ * @param value - The value to check
+ * @returns boolean indicating if the value is a valid number
+ */
+export function isValidPosition(pos: number | null | undefined): pos is number {
+  return typeof pos === "number" && pos >= 0
+}
+
+/**
+ * Checks if one or more extensions are registered in the Tiptap editor.
+ * @param editor - The Tiptap editor instance
+ * @param extensionNames - A single extension name or an array of names to check
+ * @returns True if at least one of the extensions is available, false otherwise
+ */
+export function isExtensionAvailable(
+  editor: Editor | null,
+  extensionNames: string | string[]
+): boolean {
+  if (!editor) return false
+
+  const names = Array.isArray(extensionNames)
+    ? extensionNames
+    : [extensionNames]
+
+  const found = names.some((name) =>
+    editor.extensionManager.extensions.some((ext) => ext.name === name)
+  )
+
+  if (!found) {
+    console.warn(
+      `None of the extensions [${names.join(", ")}] were found in the editor schema. Ensure they are included in the editor configuration.`
+    )
+  }
+
+  return found
+}
+
+/**
+ * Finds a node at the specified position with error handling
+ * @param editor The Tiptap editor instance
+ * @param position The position in the document to find the node
+ * @returns The node at the specified position, or null if not found
+ */
+export function findNodeAtPosition(editor: Editor, position: number) {
+  try {
+    const node = editor.state.doc.nodeAt(position)
+    if (!node) {
+      console.warn(`No node found at position ${position}`)
+      return null
+    }
+    return node
+  } catch (error) {
+    console.error(`Error getting node at position ${position}:`, error)
+    return null
+  }
+}
+
+/**
+ * Finds the position and instance of a node in the document
+ * @param props Object containing editor, node (optional), and nodePos (optional)
+ * @param props.editor The Tiptap editor instance
+ * @param props.node The node to find (optional if nodePos is provided)
+ * @param props.nodePos The position of the node to find (optional if node is provided)
+ * @returns An object with the position and node, or null if not found
+ */
+export function findNodePosition(props: {
+  editor: Editor | null
+  node?: TiptapNode | null
+  nodePos?: number | null
+}): { pos: number; node: TiptapNode } | null {
+  const { editor, node, nodePos } = props
+
+  if (!editor || !editor.state?.doc) return null
+
+  // Zero is valid position
+  const hasValidNode = node !== undefined && node !== null
+  const hasValidPos = isValidPosition(nodePos)
+
+  if (!hasValidNode && !hasValidPos) {
+    return null
+  }
+
+  // First search for the node in the document if we have a node
+  if (hasValidNode) {
+    let foundPos = -1
+    let foundNode: TiptapNode | null = null
+
+    editor.state.doc.descendants((currentNode, pos) => {
+      // TODO: Needed?
+      // if (currentNode.type && currentNode.type.name === node!.type.name) {
+      if (currentNode === node) {
+        foundPos = pos
+        foundNode = currentNode
+        return false
+      }
+      return true
+    })
+
+    if (foundPos !== -1 && foundNode !== null) {
+      return { pos: foundPos, node: foundNode }
+    }
+  }
+
+  // If we have a valid position, use findNodeAtPosition
+  if (hasValidPos) {
+    const nodeAtPos = findNodeAtPosition(editor, nodePos!)
+    if (nodeAtPos) {
+      return { pos: nodePos!, node: nodeAtPos }
+    }
+  }
+
+  return null
+}
+
+/**
+ * Checks if the current selection in the editor is a node selection of specified types
+ * @param editor The Tiptap editor instance
+ * @param types An array of node type names to check against
+ * @returns boolean indicating if the selected node matches any of the specified types
+ */
+export function isNodeTypeSelected(
+  editor: Editor,
+  types: string[] = []
+): boolean {
+  if (!editor || !editor.state.selection) return false
+
+  const { state } = editor
+  const { doc, selection } = state
+
+  if (selection.empty) return false
+
+  if (selection instanceof NodeSelection) {
+    const node = doc.nodeAt(selection.from)
+    return node ? types.includes(node.type.name) : false
+  }
+
+  return false
+}
+
+/**
+ * Handles image upload with progress tracking and abort capability
+ * @param file The file to upload
+ * @param onProgress Optional callback for tracking upload progress
+ * @param abortSignal Optional AbortSignal for cancelling the upload
+ * @returns Promise resolving to the URL of the uploaded image
+ */
+export const handleImageUpload = async (
+  file: File,
+  onProgress?: (event: { progress: number }) => void,
+  abortSignal?: AbortSignal
+): Promise<string> => {
+  // Validate file
+  if (!file) {
+    throw new Error("No file provided")
+  }
+
+  if (file.size > MAX_FILE_SIZE) {
+    throw new Error(
+      `File size exceeds maximum allowed (${MAX_FILE_SIZE / (1024 * 1024)}MB)`
+    )
+  }
+
+  // For demo/testing: Simulate upload progress. In production, replace the following code
+  // with your own upload implementation.
+  for (let progress = 0; progress <= 100; progress += 10) {
+    if (abortSignal?.aborted) {
+      throw new Error("Upload cancelled")
+    }
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    onProgress?.({ progress })
+  }
+
+  return "/images/tiptap-ui-placeholder-image.jpg"
+}
+
+type ProtocolOptions = {
+  /**
+   * The protocol scheme to be registered.
+   * @default '''
+   * @example 'ftp'
+   * @example 'git'
+   */
+  scheme: string
+
+  /**
+   * If enabled, it allows optional slashes after the protocol.
+   * @default false
+   * @example true
+   */
+  optionalSlashes?: boolean
+}
+
+type ProtocolConfig = Array<ProtocolOptions | string>
+
+const ATTR_WHITESPACE =
+  // eslint-disable-next-line no-control-regex
+  /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g
+
+export function isAllowedUri(
+  uri: string | undefined,
+  protocols?: ProtocolConfig
+) {
+  const allowedProtocols: string[] = [
+    "http",
+    "https",
+    "ftp",
+    "ftps",
+    "mailto",
+    "tel",
+    "callto",
+    "sms",
+    "cid",
+    "xmpp",
+  ]
+
+  if (protocols) {
+    protocols.forEach((protocol) => {
+      const nextProtocol =
+        typeof protocol === "string" ? protocol : protocol.scheme
+
+      if (nextProtocol) {
+        allowedProtocols.push(nextProtocol)
+      }
+    })
+  }
+
+  return (
+    !uri ||
+    uri.replace(ATTR_WHITESPACE, "").match(
+      new RegExp(
+        // eslint-disable-next-line no-useless-escape
+        `^(?:(?:${allowedProtocols.join("|")}):|[^a-z]|[a-z0-9+.\-]+(?:[^a-z+.\-:]|$))`,
+        "i"
+      )
+    )
+  )
+}
+
+export function sanitizeUrl(
+  inputUrl: string,
+  baseUrl: string,
+  protocols?: ProtocolConfig
+): string {
+  try {
+    const url = new URL(inputUrl, baseUrl)
+
+    if (isAllowedUri(url.href, protocols)) {
+      return url.href
+    }
+  } catch {
+    // If URL creation fails, it's considered invalid
+  }
+  return "#"
+}
diff --git a/package-lock.json b/package-lock.json
index a4d77ab..4ab3b71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/sortable": "^10.0.0",
+        "@floating-ui/react": "^0.27.15",
         "@hookform/resolvers": "^5.2.0",
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.3.2",
@@ -24,6 +25,8 @@
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-navigation-menu": "^1.2.13",
         "@radix-ui/react-popover": "^1.1.14",
+        "@radix-ui/react-radio-group": "^1.3.7",
+        "@radix-ui/react-scroll-area": "^1.2.9",
         "@radix-ui/react-select": "^2.2.5",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slider": "^1.3.5",
@@ -35,6 +38,18 @@
         "@radix-ui/react-tooltip": "^1.2.7",
         "@tabler/icons-react": "^3.34.1",
         "@tanstack/react-table": "^8.21.3",
+        "@tiptap/extension-highlight": "^3.1.0",
+        "@tiptap/extension-horizontal-rule": "^3.1.0",
+        "@tiptap/extension-image": "^3.1.0",
+        "@tiptap/extension-list": "^3.1.0",
+        "@tiptap/extension-subscript": "^3.1.0",
+        "@tiptap/extension-superscript": "^3.1.0",
+        "@tiptap/extension-text-align": "^3.1.0",
+        "@tiptap/extension-typography": "^3.1.0",
+        "@tiptap/extensions": "^3.1.0",
+        "@tiptap/pm": "^3.1.0",
+        "@tiptap/react": "^3.1.0",
+        "@tiptap/starter-kit": "^3.1.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
@@ -44,6 +59,7 @@
         "graphql": "^16.11.0",
         "graphql-request": "^7.2.0",
         "graphql-ws": "^6.0.6",
+        "lodash.throttle": "^4.1.1",
         "lucide-react": "^0.525.0",
         "maplibre-gl": "^5.6.1",
         "next": "15.4.1",
@@ -54,6 +70,7 @@
         "react-day-picker": "^9.8.0",
         "react-dom": "19.1.0",
         "react-hook-form": "^7.61.1",
+        "react-hotkeys-hook": "^5.1.0",
         "react-markdown": "^10.1.0",
         "recharts": "^2.15.4",
         "rehype-katex": "^7.0.1",
@@ -69,10 +86,12 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/lodash.throttle": "^4.1.9",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "raw-loader": "^4.0.2",
+        "sass": "^1.90.0",
         "tailwindcss": "^4",
         "tw-animate-css": "^1.3.5",
         "typescript": "^5"
@@ -287,28 +306,46 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.2.tgz",
-      "integrity": "sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
       "dependencies": {
         "@floating-ui/utils": "^0.2.10"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.2.tgz",
-      "integrity": "sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.3.tgz",
+      "integrity": "sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==",
+      "license": "MIT",
       "dependencies": {
-        "@floating-ui/core": "^1.7.2",
+        "@floating-ui/core": "^1.7.3",
         "@floating-ui/utils": "^0.2.10"
       }
     },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.4.tgz",
-      "integrity": "sha512-JbbpPhp38UmXDDAu60RJmbeme37Jbgsm7NrHGgzYYFKmblzRUh6Pa641dII6LsjwF4XlScDrde2UAzDo/b9KPw==",
+    "node_modules/@floating-ui/react": {
+      "version": "0.27.15",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.15.tgz",
+      "integrity": "sha512-0LGxhBi3BB1DwuSNQAmuaSuertFzNAerlMdPbotjTVnvPtdOs7CkrHLaev5NIXemhzDXNC0tFzuseut7cWA5mw==",
+      "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.7.2"
+        "@floating-ui/react-dom": "^2.1.5",
+        "@floating-ui/utils": "^0.2.10",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.5.tgz",
+      "integrity": "sha512-HDO/1/1oH9fjj4eLgegrlH3dklZpHtUYYFiVwMUwfGvk9jWDRWqkklA2/NFScknrcNSspbV868WjXORvreDX+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.3"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -990,6 +1027,330 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher/node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/@petamoriken/float16": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.9.2.tgz",
@@ -1245,6 +1606,7 @@
       "version": "2.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.15.tgz",
       "integrity": "sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
@@ -1420,6 +1782,7 @@
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.13.tgz",
       "integrity": "sha512-WG8wWfDiJlSF5hELjwfjSGOXcBR/ZMhBFCGYe8vERpC39CQYZeq1PQ2kaYHdye3V95d06H89KGMsVCIE4LWo3g==",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-collection": "1.1.7",
@@ -1455,6 +1818,7 @@
       "version": "1.1.14",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.14.tgz",
       "integrity": "sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
@@ -1586,6 +1950,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.7.tgz",
+      "integrity": "sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
@@ -1616,6 +2012,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.9.tgz",
+      "integrity": "sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.5.tgz",
@@ -2046,6 +2473,12 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="
     },
+    "node_modules/@remirror/core-constants": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
+      "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==",
+      "license": "MIT"
+    },
     "node_modules/@standard-schema/utils": {
       "version": "0.3.0",
       "resolved": "http://mirrors.cloud.tencent.com/npm/@standard-schema/utils/-/utils-0.3.0.tgz",
@@ -2472,6 +2905,518 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tiptap/core": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.1.0.tgz",
+      "integrity": "sha512-GDxoCrA+ggdzhUcelcWWVsMcmoOYXWmpjIviYXZTyHR/fds8G/mNjG0ZpFqXNmFnZ7Rs16bAsSX2tjDZ9MyTFg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-blockquote": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-3.1.0.tgz",
+      "integrity": "sha512-BRhtu2p/EDU9L0uxTcdk9EBUVOI098F+vUbR4G8qiuVzAb7xbYS5d0h0SaynlL/JMi/VjiLHl7qA/iWBlYpylQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bold": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-3.1.0.tgz",
+      "integrity": "sha512-wHiIR1u8QNBG30Ty0ZL34uKli7+nU4ArU5f/GN3BbhAD/gxQj13eo+TqLw1LjXd1yTzlW/EC4WNSPVy1qxChOg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bubble-menu": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.1.0.tgz",
+      "integrity": "sha512-nuJTNL3OXskObeXElHMqeU9LIWBgfSIudcBMfm0Elj3/2orjd1Z3nLmoloO6zGPmZkpRMjQnTe41PvAGIMibOw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0",
+        "@tiptap/pm": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.1.0.tgz",
+      "integrity": "sha512-lSuj0T/c/lAI01sgOdDUmFmnxItIC2WQHxzg16KOoDCzW/PtWBc6pNmCSexmqqGoTg9xNWytPWvKapZ/GCwhiQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-3.1.0.tgz",
+      "integrity": "sha512-GESYNG11tOm41DH3zhPuWaQU2slK37aC28erkZ1DvUNKlKMhJd+DzbFVNyWqBB2IyeHpgl0eLqZAYB4QApKO1A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.1.0.tgz",
+      "integrity": "sha512-4sVF9ZaHgfkNZJXduGecNzluLfpLdsYW80bVoFKKm2u7itlh2TnhwJZTSSU8h8spR1kFWYu/HOwOYmghKq6dMg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0",
+        "@tiptap/pm": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-document": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.1.0.tgz",
+      "integrity": "sha512-n2X4ZeBsC2pORR1JXfyIFElJvAcQ0kAKqcblZlXzdewsZTS1GNd7NxFXTvuku1P2Op7CpP4X/lx8P7qSzUMFbA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-dropcursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-3.1.0.tgz",
+      "integrity": "sha512-zXyjLLcEYFl0pYQtSe12EKjByxS0qnycZhccpgQ7ePCusoDZTTyw4yE5pMxah5gkWK8N+qqynP+2oFcwcIWSLg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-floating-menu": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-3.1.0.tgz",
+      "integrity": "sha512-dNhRw3gH9VHqaaSEZ5y7n8k5Ot1cH6jzTpXrKOFt0EhrwV+4P+knTHsvKe33AumpukailMpuSGhDr2/RQQCRTQ==",
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "@tiptap/core": "^3.1.0",
+        "@tiptap/pm": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-gapcursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-3.1.0.tgz",
+      "integrity": "sha512-9cm1ngE1SY26hCw/nzDNmWkyeZYRfidLamOuym7sg15pWj8BifTNuByrnK6fpQVSJWneV1y0npDj8WLpQ+t3CA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extensions": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.1.0.tgz",
+      "integrity": "sha512-/4Ax5jX5l7mNd0XE93JNXSa1fWpsyqdSsM465XEsrvekoauaucuCgbWSP4qQ4v6eGBJpmI8o6aZFbQfOVDzVIQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-heading": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-3.1.0.tgz",
+      "integrity": "sha512-GQjuwGeb5PIbAEJ4ZdTly9B2emdrkLiVVXZDWjsWX2PXGL/k+ZK8rP+/+NNYI3fLw0+DAZENu2pNh7F9NaiWlg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-highlight": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-highlight/-/extension-highlight-3.1.0.tgz",
+      "integrity": "sha512-uRd9li79DVfQ2z4Q4pZn7UFmgY7hqTByPvI2/py4AvCgt3/HMwKj8N2izrUyCCrBclh2to+Oet0MqWZkDZhUQA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-horizontal-rule": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.1.0.tgz",
+      "integrity": "sha512-EjYW72H3YAQ/yuvoMz5YtrChVesrgQ1UNB/6WynEg+frvVsfGUcNv6B9zkRT7b+XEnOVzXUW8rNlSlkrWFiSbQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0",
+        "@tiptap/pm": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-image": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-image/-/extension-image-3.1.0.tgz",
+      "integrity": "sha512-qCvmXlkGEwyr/TnbPfGcSzdSXeq4p2nHnWVi/naPisM3JnSpPxSAa07+LxmJ8mThmsPwPAOB5BxRaGOV/SEvyQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-italic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.1.0.tgz",
+      "integrity": "sha512-hsHNhnW5cJp/urTPIjG1C83Vov+gLFaaCsw3/Tdon9/uwAB5sLQ0Ig0iCEsKNh0KpckUnUmRjsPri5q5va7NLg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-link": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-3.1.0.tgz",
+      "integrity": "sha512-JRx3ZBnNqelbX+dBb2y2bSkjFqCLkLwZfjf55LHH4mQUFiPj7zUr6luXp9Ppq0WAFJEKXf+8tQQJrR+3eFUNlg==",
+      "license": "MIT",
+      "dependencies": {
+        "linkifyjs": "^4.3.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0",
+        "@tiptap/pm": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-list": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.1.0.tgz",
+      "integrity": "sha512-6s0LjLzo01VojmUyohZcWiMi4njhYT76P+ESXL+3WIhHWKKVc0zNTMIWLE6Eu08wL+PoAwN2UufECNM7ZRxqkA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0",
+        "@tiptap/pm": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.1.0.tgz",
+      "integrity": "sha512-bI8v+qnlrCGmU41j19W02NpNH3jPf3qzX7tw/LmlM8uVinvjlguZzbNSWzpUFOiscEjoUcuqzGr+Cwa2CaBrQw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-list-keymap": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-keymap/-/extension-list-keymap-3.1.0.tgz",
+      "integrity": "sha512-te50GvzfAaTV+SPR9iH/NGv/nDMaAKhYhr2m0XhuDaVmjgNIkWTKcTCxWt/9eljVJskFMvTHWXV3Tf/48basRg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.1.0.tgz",
+      "integrity": "sha512-bK85PC89/sUyGM3BL0dey8rGBkuDRYA2ynMGa/p+JG0Esqb0o5aKtNACTUKTYOdrDJw5kxNVE4BPzCkqO9/rsQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-paragraph": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.1.0.tgz",
+      "integrity": "sha512-UR0FUc38IsGkfQBHhSJ5V8UGJ4juZZqnn33BzrW1L7elhlVVUM3greBXxa7vdMFBE/IcjpvOM414vJRZoBgvzw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-strike": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-3.1.0.tgz",
+      "integrity": "sha512-7DzMXM5NrtTC3uVcjYgImNuXKMXonPZXwf0Q+No/sKqxtU+yXjusjVMmZqNLbzvtAFKghO0GDJGD4RxBNX9FgQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-subscript": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-subscript/-/extension-subscript-3.1.0.tgz",
+      "integrity": "sha512-Ge3H8Nvte4BzvMqEOODAmOb+SrPi0i4QBLbjK8SL91HTjuGzFCHGYSBgMrmF07oDsK8psT4Rob6qUIUUI/b87Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0",
+        "@tiptap/pm": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-superscript": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-superscript/-/extension-superscript-3.1.0.tgz",
+      "integrity": "sha512-y3mfFBEZ8IcsFrUM6MOWDz9pSP1TuQEFrgReOGGbiE+0VrzgHt+4N6q0nogqfSnLqGGQErEdgmaYCTemo0YoSw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0",
+        "@tiptap/pm": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.1.0.tgz",
+      "integrity": "sha512-BW1FEG4upSfhqBpBiPdEi8IMMJDmu0ThvZWYF385WVveQ5/jFK98RS2Kz7qt82jVvw2oyhOUL4Yy63T0Bh6W1w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text-align": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-align/-/extension-text-align-3.1.0.tgz",
+      "integrity": "sha512-b4Tpj3BvRe41iFjxDSFXObdtOGyK8Hy6sy9EHc7vYDn+NhhZgTcnwUf6QX6H/7JcItRUNi17W9KNSA1+0ZzXBg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-typography": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-typography/-/extension-typography-3.1.0.tgz",
+      "integrity": "sha512-8mCyONmQnDcXC/FnD0axa7EE4bbZV97SbcWViiLW0mcchP48MD2KfF+Gk5DEQgaSjKEm00irWLI50SifMviSMA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extension-underline": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.1.0.tgz",
+      "integrity": "sha512-M/gvRBleLzKeakcy62hWLsdUPE0TncuymwxvfSk8pY0L646vB1yQthH2x7b068mK8VmuNviPURMO35BAZYTYaA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/extensions": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.1.0.tgz",
+      "integrity": "sha512-b8mE6KA9CeyfhMOZPS+I4+Qp+aW6bNI/2mTRpDy0/WHM0XHZSh9/JOXCAuGzbz27Lcz9gp4FWwcpOICE39LPuQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0",
+        "@tiptap/pm": "^3.1.0"
+      }
+    },
+    "node_modules/@tiptap/pm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.1.0.tgz",
+      "integrity": "sha512-9Pjr+bC89/ATSl5J0UMVrr50TML3B5viDoMMpksgkSrnQSJyuGGfCc8DHd0TKydxucMcjVG/oq+evyCW9xXRRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-changeset": "^2.3.0",
+        "prosemirror-collab": "^1.3.1",
+        "prosemirror-commands": "^1.6.2",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-inputrules": "^1.4.0",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.13.1",
+        "prosemirror-menu": "^1.2.4",
+        "prosemirror-model": "^1.24.1",
+        "prosemirror-schema-basic": "^1.2.3",
+        "prosemirror-schema-list": "^1.5.0",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.6.4",
+        "prosemirror-trailing-node": "^3.0.0",
+        "prosemirror-transform": "^1.10.2",
+        "prosemirror-view": "^1.38.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/react": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-3.1.0.tgz",
+      "integrity": "sha512-JjcdnzaMpmE0XcqMKBztscUoranbeJ+GXP9TkdDjJSMgZ5pKn/knFTEr5n0HtpWcBl8QnSDzrk1/B7ULulXpHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "fast-deep-equal": "^3.1.3",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "optionalDependencies": {
+        "@tiptap/extension-bubble-menu": "^3.1.0",
+        "@tiptap/extension-floating-menu": "^3.1.0"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^3.1.0",
+        "@tiptap/pm": "^3.1.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tiptap/starter-kit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-3.1.0.tgz",
+      "integrity": "sha512-L+9WfA+XO4mwq4b0lEUr540q+jIENhZiVSNhOYdWlRyan+HCV60BkC8E/nBuqCk6tbM1jEqFQjVBqJWwjBsalQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tiptap/core": "^3.1.0",
+        "@tiptap/extension-blockquote": "^3.1.0",
+        "@tiptap/extension-bold": "^3.1.0",
+        "@tiptap/extension-bullet-list": "^3.1.0",
+        "@tiptap/extension-code": "^3.1.0",
+        "@tiptap/extension-code-block": "^3.1.0",
+        "@tiptap/extension-document": "^3.1.0",
+        "@tiptap/extension-dropcursor": "^3.1.0",
+        "@tiptap/extension-gapcursor": "^3.1.0",
+        "@tiptap/extension-hard-break": "^3.1.0",
+        "@tiptap/extension-heading": "^3.1.0",
+        "@tiptap/extension-horizontal-rule": "^3.1.0",
+        "@tiptap/extension-italic": "^3.1.0",
+        "@tiptap/extension-link": "^3.1.0",
+        "@tiptap/extension-list": "^3.1.0",
+        "@tiptap/extension-list-item": "^3.1.0",
+        "@tiptap/extension-list-keymap": "^3.1.0",
+        "@tiptap/extension-ordered-list": "^3.1.0",
+        "@tiptap/extension-paragraph": "^3.1.0",
+        "@tiptap/extension-strike": "^3.1.0",
+        "@tiptap/extension-text": "^3.1.0",
+        "@tiptap/extension-underline": "^3.1.0",
+        "@tiptap/extensions": "^3.1.0",
+        "@tiptap/pm": "^3.1.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
     "node_modules/@types/d3-array": {
       "version": "3.2.1",
       "resolved": "http://mirrors.cloud.tencent.com/npm/@types/d3-array/-/d3-array-3.2.1.tgz",
@@ -2610,6 +3555,29 @@
       "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
       "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ=="
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash.throttle": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.9.tgz",
+      "integrity": "sha512-PCPVfpfueguWZQB7pJQK890F2scYKoDUL3iM522AptHWn7d5NQmeS/LTEHIcLr5PaTzl3dK2Z0xSUHHTHwaL5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mapbox__point-geometry": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
@@ -2625,6 +3593,16 @@
         "@types/pbf": "*"
       }
     },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -2633,6 +3611,12 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "license": "MIT"
+    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -2696,6 +3680,12 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -3025,6 +4015,12 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
     "node_modules/aria-hidden": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
@@ -3054,6 +4050,20 @@
         "node": "*"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.25.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
@@ -3158,6 +4168,22 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/chownr": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
@@ -3258,6 +4284,12 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -3647,8 +4679,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-equals": {
       "version": "5.2.2",
@@ -3682,6 +4713,20 @@
       ],
       "peer": true
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "12.23.6",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.6.tgz",
@@ -4070,6 +5115,13 @@
         }
       ]
     },
+    "node_modules/immutable": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
+      "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/ini": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz",
@@ -4129,6 +5181,31 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-hexadecimal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
@@ -4138,6 +5215,17 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -4500,6 +5588,21 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/linkifyjs": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.2.tgz",
+      "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
+      "license": "MIT"
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -4530,6 +5633,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
+      "license": "MIT"
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -4615,6 +5724,35 @@
         "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -4897,6 +6035,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -5457,6 +6601,21 @@
         }
       ]
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -5659,6 +6818,14 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -5726,6 +6893,12 @@
         "tslib": "^2.3.0"
       }
     },
+    "node_modules/orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
+      "license": "MIT"
+    },
     "node_modules/pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
@@ -5792,6 +6965,20 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -5851,6 +7038,213 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/prosemirror-changeset": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.3.1.tgz",
+      "integrity": "sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-collab": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
+      "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-commands": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz",
+      "integrity": "sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.10.2"
+      }
+    },
+    "node_modules/prosemirror-dropcursor": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.2.tgz",
+      "integrity": "sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-gapcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz",
+      "integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-history": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz",
+      "integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "node_modules/prosemirror-inputrules": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.5.0.tgz",
+      "integrity": "sha512-K0xJRCmt+uSw7xesnHmcn72yBGTbY45vm8gXI4LZXbx2Z0jwh5aF9xrGQgrVPu0WbyFVFF3E/o9VhJYz6SQWnA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz",
+      "integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-markdown": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.2.tgz",
+      "integrity": "sha512-FPD9rHPdA9fqzNmIIDhhnYQ6WgNoSWX9StUZ8LEKapaXU9i6XgykaHKhp6XMyXlOWetmaFgGDS/nu/w9/vUc5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/markdown-it": "^14.0.0",
+        "markdown-it": "^14.0.0",
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "node_modules/prosemirror-menu": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.5.tgz",
+      "integrity": "sha512-qwXzynnpBIeg1D7BAtjOusR+81xCp53j7iWu/IargiRZqRjGIlQuu1f3jFi+ehrHhWMLoyOQTSRx/IWZJqOYtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "crelt": "^1.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.25.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.3.tgz",
+      "integrity": "sha512-dY2HdaNXlARknJbrManZ1WyUtos+AP97AmvqdOQtWtrrC5g4mohVX5DTi9rXNFSk09eczLq9GuNTtq3EfMeMGA==",
+      "license": "MIT",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-schema-basic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.4.tgz",
+      "integrity": "sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "node_modules/prosemirror-schema-list": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz",
+      "integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
+      "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "node_modules/prosemirror-tables": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.7.1.tgz",
+      "integrity": "sha512-eRQ97Bf+i9Eby99QbyAiyov43iOKgWa7QCGly+lrDt7efZ1v8NWolhXiB43hSDGIXT1UXgbs4KJN3a06FGpr1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-model": "^1.25.0",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-transform": "^1.10.3",
+        "prosemirror-view": "^1.39.1"
+      }
+    },
+    "node_modules/prosemirror-trailing-node": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
+      "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remirror/core-constants": "3.0.0",
+        "escape-string-regexp": "^4.0.0"
+      },
+      "peerDependencies": {
+        "prosemirror-model": "^1.22.1",
+        "prosemirror-state": "^1.4.2",
+        "prosemirror-view": "^1.33.8"
+      }
+    },
+    "node_modules/prosemirror-trailing-node/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.4.tgz",
+      "integrity": "sha512-pwDy22nAnGqNR1feOQKHxoFkkUtepoFAd3r2hbEDsnf4wp57kKA36hXsB3njA9FtONBEwSDnDeCiJe+ItD+ykw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.21.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.40.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.40.1.tgz",
+      "integrity": "sha512-pbwUjt3G7TlsQQHDiYSupWBhJswpLVB09xXm1YiJPdkjkh9Pe7Y51XdLh5VWIZmROLY8UpUpG03lkdhm9lzIBA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.20.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "node_modules/protocol-buffers-schema": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
@@ -5865,6 +7259,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qss": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/qss/-/qss-3.0.0.tgz",
@@ -5983,6 +7386,19 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-hotkeys-hook": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-5.1.0.tgz",
+      "integrity": "sha512-GCNGXjBzV9buOS3REoQFmSmE4WTvBhYQ0YrAeeMZI83bhXg3dRWsLHXDutcVDdEjwJqJCxk5iewWYX5LtFUd7g==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ],
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "http://mirrors.cloud.tencent.com/npm/react-is/-/react-is-18.3.1.tgz",
@@ -6112,6 +7528,20 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/recharts": {
       "version": "2.15.4",
       "resolved": "http://mirrors.cloud.tencent.com/npm/recharts/-/recharts-2.15.4.tgz",
@@ -6367,6 +7797,12 @@
         "protocol-buffers-schema": "^3.3.1"
       }
     },
+    "node_modules/rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
+      "license": "MIT"
+    },
     "node_modules/rw": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
@@ -6393,6 +7829,27 @@
       ],
       "peer": true
     },
+    "node_modules/sass": {
+      "version": "1.90.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.90.0.tgz",
+      "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
@@ -6634,6 +8091,12 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
     "node_modules/tabler": {
       "version": "1.0.0",
       "resolved": "http://mirrors.cloud.tencent.com/npm/tabler/-/tabler-1.0.0.tgz",
@@ -6804,6 +8267,20 @@
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
       "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g=="
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -6866,6 +8343,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
@@ -7161,6 +8644,12 @@
         "pbf": "^3.2.1"
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/watchpack": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
@@ -7546,28 +9035,38 @@
       }
     },
     "@floating-ui/core": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.2.tgz",
-      "integrity": "sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
       "requires": {
         "@floating-ui/utils": "^0.2.10"
       }
     },
     "@floating-ui/dom": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.2.tgz",
-      "integrity": "sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.3.tgz",
+      "integrity": "sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==",
       "requires": {
-        "@floating-ui/core": "^1.7.2",
+        "@floating-ui/core": "^1.7.3",
         "@floating-ui/utils": "^0.2.10"
       }
     },
-    "@floating-ui/react-dom": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.4.tgz",
-      "integrity": "sha512-JbbpPhp38UmXDDAu60RJmbeme37Jbgsm7NrHGgzYYFKmblzRUh6Pa641dII6LsjwF4XlScDrde2UAzDo/b9KPw==",
+    "@floating-ui/react": {
+      "version": "0.27.15",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.15.tgz",
+      "integrity": "sha512-0LGxhBi3BB1DwuSNQAmuaSuertFzNAerlMdPbotjTVnvPtdOs7CkrHLaev5NIXemhzDXNC0tFzuseut7cWA5mw==",
       "requires": {
-        "@floating-ui/dom": "^1.7.2"
+        "@floating-ui/react-dom": "^2.1.5",
+        "@floating-ui/utils": "^0.2.10",
+        "tabbable": "^6.0.0"
+      }
+    },
+    "@floating-ui/react-dom": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.5.tgz",
+      "integrity": "sha512-HDO/1/1oH9fjj4eLgegrlH3dklZpHtUYYFiVwMUwfGvk9jWDRWqkklA2/NFScknrcNSspbV868WjXORvreDX+Q==",
+      "requires": {
+        "@floating-ui/dom": "^1.7.3"
       }
     },
     "@floating-ui/utils": {
@@ -7912,6 +9411,132 @@
       "integrity": "sha512-y+wTBxelk2xiNofmDOVU7O5WxTHcvOoL3srOM0kxTzKDjQ57kPU0tpnPJ/BWrRnsOwXEv0+3QSbGR7hY4n9LkQ==",
       "optional": true
     },
+    "@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1",
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "dependencies": {
+        "detect-libc": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+          "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "dev": true,
+      "optional": true
+    },
+    "@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "dev": true,
+      "optional": true
+    },
+    "@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "dev": true,
+      "optional": true
+    },
+    "@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "dev": true,
+      "optional": true
+    },
+    "@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "dev": true,
+      "optional": true
+    },
+    "@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "dev": true,
+      "optional": true
+    },
+    "@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "dev": true,
+      "optional": true
+    },
+    "@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "dev": true,
+      "optional": true
+    },
+    "@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "dev": true,
+      "optional": true
+    },
+    "@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "dev": true,
+      "optional": true
+    },
+    "@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "dev": true,
+      "optional": true
+    },
     "@petamoriken/float16": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.9.2.tgz",
@@ -8212,6 +9837,23 @@
         "@radix-ui/react-slot": "1.2.3"
       }
     },
+    "@radix-ui/react-radio-group": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.7.tgz",
+      "integrity": "sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==",
+      "requires": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      }
+    },
     "@radix-ui/react-roving-focus": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
@@ -8228,6 +9870,22 @@
         "@radix-ui/react-use-controllable-state": "1.2.2"
       }
     },
+    "@radix-ui/react-scroll-area": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.9.tgz",
+      "integrity": "sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==",
+      "requires": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      }
+    },
     "@radix-ui/react-select": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.5.tgz",
@@ -8442,6 +10100,11 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="
     },
+    "@remirror/core-constants": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
+      "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg=="
+    },
     "@standard-schema/utils": {
       "version": "0.3.0",
       "resolved": "http://mirrors.cloud.tencent.com/npm/@standard-schema/utils/-/utils-0.3.0.tgz",
@@ -8701,6 +10364,266 @@
       "resolved": "http://mirrors.cloud.tencent.com/npm/@tanstack/table-core/-/table-core-8.21.3.tgz",
       "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg=="
     },
+    "@tiptap/core": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.1.0.tgz",
+      "integrity": "sha512-GDxoCrA+ggdzhUcelcWWVsMcmoOYXWmpjIviYXZTyHR/fds8G/mNjG0ZpFqXNmFnZ7Rs16bAsSX2tjDZ9MyTFg==",
+      "requires": {}
+    },
+    "@tiptap/extension-blockquote": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-3.1.0.tgz",
+      "integrity": "sha512-BRhtu2p/EDU9L0uxTcdk9EBUVOI098F+vUbR4G8qiuVzAb7xbYS5d0h0SaynlL/JMi/VjiLHl7qA/iWBlYpylQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-bold": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-3.1.0.tgz",
+      "integrity": "sha512-wHiIR1u8QNBG30Ty0ZL34uKli7+nU4ArU5f/GN3BbhAD/gxQj13eo+TqLw1LjXd1yTzlW/EC4WNSPVy1qxChOg==",
+      "requires": {}
+    },
+    "@tiptap/extension-bubble-menu": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.1.0.tgz",
+      "integrity": "sha512-nuJTNL3OXskObeXElHMqeU9LIWBgfSIudcBMfm0Elj3/2orjd1Z3nLmoloO6zGPmZkpRMjQnTe41PvAGIMibOw==",
+      "optional": true,
+      "requires": {
+        "@floating-ui/dom": "^1.0.0"
+      }
+    },
+    "@tiptap/extension-bullet-list": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.1.0.tgz",
+      "integrity": "sha512-lSuj0T/c/lAI01sgOdDUmFmnxItIC2WQHxzg16KOoDCzW/PtWBc6pNmCSexmqqGoTg9xNWytPWvKapZ/GCwhiQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-code": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-3.1.0.tgz",
+      "integrity": "sha512-GESYNG11tOm41DH3zhPuWaQU2slK37aC28erkZ1DvUNKlKMhJd+DzbFVNyWqBB2IyeHpgl0eLqZAYB4QApKO1A==",
+      "requires": {}
+    },
+    "@tiptap/extension-code-block": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.1.0.tgz",
+      "integrity": "sha512-4sVF9ZaHgfkNZJXduGecNzluLfpLdsYW80bVoFKKm2u7itlh2TnhwJZTSSU8h8spR1kFWYu/HOwOYmghKq6dMg==",
+      "requires": {}
+    },
+    "@tiptap/extension-document": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.1.0.tgz",
+      "integrity": "sha512-n2X4ZeBsC2pORR1JXfyIFElJvAcQ0kAKqcblZlXzdewsZTS1GNd7NxFXTvuku1P2Op7CpP4X/lx8P7qSzUMFbA==",
+      "requires": {}
+    },
+    "@tiptap/extension-dropcursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-3.1.0.tgz",
+      "integrity": "sha512-zXyjLLcEYFl0pYQtSe12EKjByxS0qnycZhccpgQ7ePCusoDZTTyw4yE5pMxah5gkWK8N+qqynP+2oFcwcIWSLg==",
+      "requires": {}
+    },
+    "@tiptap/extension-floating-menu": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-3.1.0.tgz",
+      "integrity": "sha512-dNhRw3gH9VHqaaSEZ5y7n8k5Ot1cH6jzTpXrKOFt0EhrwV+4P+knTHsvKe33AumpukailMpuSGhDr2/RQQCRTQ==",
+      "optional": true,
+      "requires": {}
+    },
+    "@tiptap/extension-gapcursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-3.1.0.tgz",
+      "integrity": "sha512-9cm1ngE1SY26hCw/nzDNmWkyeZYRfidLamOuym7sg15pWj8BifTNuByrnK6fpQVSJWneV1y0npDj8WLpQ+t3CA==",
+      "requires": {}
+    },
+    "@tiptap/extension-hard-break": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.1.0.tgz",
+      "integrity": "sha512-/4Ax5jX5l7mNd0XE93JNXSa1fWpsyqdSsM465XEsrvekoauaucuCgbWSP4qQ4v6eGBJpmI8o6aZFbQfOVDzVIQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-heading": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-3.1.0.tgz",
+      "integrity": "sha512-GQjuwGeb5PIbAEJ4ZdTly9B2emdrkLiVVXZDWjsWX2PXGL/k+ZK8rP+/+NNYI3fLw0+DAZENu2pNh7F9NaiWlg==",
+      "requires": {}
+    },
+    "@tiptap/extension-highlight": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-highlight/-/extension-highlight-3.1.0.tgz",
+      "integrity": "sha512-uRd9li79DVfQ2z4Q4pZn7UFmgY7hqTByPvI2/py4AvCgt3/HMwKj8N2izrUyCCrBclh2to+Oet0MqWZkDZhUQA==",
+      "requires": {}
+    },
+    "@tiptap/extension-horizontal-rule": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.1.0.tgz",
+      "integrity": "sha512-EjYW72H3YAQ/yuvoMz5YtrChVesrgQ1UNB/6WynEg+frvVsfGUcNv6B9zkRT7b+XEnOVzXUW8rNlSlkrWFiSbQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-image": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-image/-/extension-image-3.1.0.tgz",
+      "integrity": "sha512-qCvmXlkGEwyr/TnbPfGcSzdSXeq4p2nHnWVi/naPisM3JnSpPxSAa07+LxmJ8mThmsPwPAOB5BxRaGOV/SEvyQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-italic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.1.0.tgz",
+      "integrity": "sha512-hsHNhnW5cJp/urTPIjG1C83Vov+gLFaaCsw3/Tdon9/uwAB5sLQ0Ig0iCEsKNh0KpckUnUmRjsPri5q5va7NLg==",
+      "requires": {}
+    },
+    "@tiptap/extension-link": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-3.1.0.tgz",
+      "integrity": "sha512-JRx3ZBnNqelbX+dBb2y2bSkjFqCLkLwZfjf55LHH4mQUFiPj7zUr6luXp9Ppq0WAFJEKXf+8tQQJrR+3eFUNlg==",
+      "requires": {
+        "linkifyjs": "^4.3.2"
+      }
+    },
+    "@tiptap/extension-list": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.1.0.tgz",
+      "integrity": "sha512-6s0LjLzo01VojmUyohZcWiMi4njhYT76P+ESXL+3WIhHWKKVc0zNTMIWLE6Eu08wL+PoAwN2UufECNM7ZRxqkA==",
+      "requires": {}
+    },
+    "@tiptap/extension-list-item": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.1.0.tgz",
+      "integrity": "sha512-bI8v+qnlrCGmU41j19W02NpNH3jPf3qzX7tw/LmlM8uVinvjlguZzbNSWzpUFOiscEjoUcuqzGr+Cwa2CaBrQw==",
+      "requires": {}
+    },
+    "@tiptap/extension-list-keymap": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-keymap/-/extension-list-keymap-3.1.0.tgz",
+      "integrity": "sha512-te50GvzfAaTV+SPR9iH/NGv/nDMaAKhYhr2m0XhuDaVmjgNIkWTKcTCxWt/9eljVJskFMvTHWXV3Tf/48basRg==",
+      "requires": {}
+    },
+    "@tiptap/extension-ordered-list": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.1.0.tgz",
+      "integrity": "sha512-bK85PC89/sUyGM3BL0dey8rGBkuDRYA2ynMGa/p+JG0Esqb0o5aKtNACTUKTYOdrDJw5kxNVE4BPzCkqO9/rsQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-paragraph": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.1.0.tgz",
+      "integrity": "sha512-UR0FUc38IsGkfQBHhSJ5V8UGJ4juZZqnn33BzrW1L7elhlVVUM3greBXxa7vdMFBE/IcjpvOM414vJRZoBgvzw==",
+      "requires": {}
+    },
+    "@tiptap/extension-strike": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-3.1.0.tgz",
+      "integrity": "sha512-7DzMXM5NrtTC3uVcjYgImNuXKMXonPZXwf0Q+No/sKqxtU+yXjusjVMmZqNLbzvtAFKghO0GDJGD4RxBNX9FgQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-subscript": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-subscript/-/extension-subscript-3.1.0.tgz",
+      "integrity": "sha512-Ge3H8Nvte4BzvMqEOODAmOb+SrPi0i4QBLbjK8SL91HTjuGzFCHGYSBgMrmF07oDsK8psT4Rob6qUIUUI/b87Q==",
+      "requires": {}
+    },
+    "@tiptap/extension-superscript": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-superscript/-/extension-superscript-3.1.0.tgz",
+      "integrity": "sha512-y3mfFBEZ8IcsFrUM6MOWDz9pSP1TuQEFrgReOGGbiE+0VrzgHt+4N6q0nogqfSnLqGGQErEdgmaYCTemo0YoSw==",
+      "requires": {}
+    },
+    "@tiptap/extension-text": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.1.0.tgz",
+      "integrity": "sha512-BW1FEG4upSfhqBpBiPdEi8IMMJDmu0ThvZWYF385WVveQ5/jFK98RS2Kz7qt82jVvw2oyhOUL4Yy63T0Bh6W1w==",
+      "requires": {}
+    },
+    "@tiptap/extension-text-align": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-align/-/extension-text-align-3.1.0.tgz",
+      "integrity": "sha512-b4Tpj3BvRe41iFjxDSFXObdtOGyK8Hy6sy9EHc7vYDn+NhhZgTcnwUf6QX6H/7JcItRUNi17W9KNSA1+0ZzXBg==",
+      "requires": {}
+    },
+    "@tiptap/extension-typography": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-typography/-/extension-typography-3.1.0.tgz",
+      "integrity": "sha512-8mCyONmQnDcXC/FnD0axa7EE4bbZV97SbcWViiLW0mcchP48MD2KfF+Gk5DEQgaSjKEm00irWLI50SifMviSMA==",
+      "requires": {}
+    },
+    "@tiptap/extension-underline": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.1.0.tgz",
+      "integrity": "sha512-M/gvRBleLzKeakcy62hWLsdUPE0TncuymwxvfSk8pY0L646vB1yQthH2x7b068mK8VmuNviPURMO35BAZYTYaA==",
+      "requires": {}
+    },
+    "@tiptap/extensions": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.1.0.tgz",
+      "integrity": "sha512-b8mE6KA9CeyfhMOZPS+I4+Qp+aW6bNI/2mTRpDy0/WHM0XHZSh9/JOXCAuGzbz27Lcz9gp4FWwcpOICE39LPuQ==",
+      "requires": {}
+    },
+    "@tiptap/pm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.1.0.tgz",
+      "integrity": "sha512-9Pjr+bC89/ATSl5J0UMVrr50TML3B5viDoMMpksgkSrnQSJyuGGfCc8DHd0TKydxucMcjVG/oq+evyCW9xXRRQ==",
+      "requires": {
+        "prosemirror-changeset": "^2.3.0",
+        "prosemirror-collab": "^1.3.1",
+        "prosemirror-commands": "^1.6.2",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-inputrules": "^1.4.0",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.13.1",
+        "prosemirror-menu": "^1.2.4",
+        "prosemirror-model": "^1.24.1",
+        "prosemirror-schema-basic": "^1.2.3",
+        "prosemirror-schema-list": "^1.5.0",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.6.4",
+        "prosemirror-trailing-node": "^3.0.0",
+        "prosemirror-transform": "^1.10.2",
+        "prosemirror-view": "^1.38.1"
+      }
+    },
+    "@tiptap/react": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-3.1.0.tgz",
+      "integrity": "sha512-JjcdnzaMpmE0XcqMKBztscUoranbeJ+GXP9TkdDjJSMgZ5pKn/knFTEr5n0HtpWcBl8QnSDzrk1/B7ULulXpHQ==",
+      "requires": {
+        "@tiptap/extension-bubble-menu": "^3.1.0",
+        "@tiptap/extension-floating-menu": "^3.1.0",
+        "@types/use-sync-external-store": "^0.0.6",
+        "fast-deep-equal": "^3.1.3",
+        "use-sync-external-store": "^1.4.0"
+      }
+    },
+    "@tiptap/starter-kit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-3.1.0.tgz",
+      "integrity": "sha512-L+9WfA+XO4mwq4b0lEUr540q+jIENhZiVSNhOYdWlRyan+HCV60BkC8E/nBuqCk6tbM1jEqFQjVBqJWwjBsalQ==",
+      "requires": {
+        "@tiptap/core": "^3.1.0",
+        "@tiptap/extension-blockquote": "^3.1.0",
+        "@tiptap/extension-bold": "^3.1.0",
+        "@tiptap/extension-bullet-list": "^3.1.0",
+        "@tiptap/extension-code": "^3.1.0",
+        "@tiptap/extension-code-block": "^3.1.0",
+        "@tiptap/extension-document": "^3.1.0",
+        "@tiptap/extension-dropcursor": "^3.1.0",
+        "@tiptap/extension-gapcursor": "^3.1.0",
+        "@tiptap/extension-hard-break": "^3.1.0",
+        "@tiptap/extension-heading": "^3.1.0",
+        "@tiptap/extension-horizontal-rule": "^3.1.0",
+        "@tiptap/extension-italic": "^3.1.0",
+        "@tiptap/extension-link": "^3.1.0",
+        "@tiptap/extension-list": "^3.1.0",
+        "@tiptap/extension-list-item": "^3.1.0",
+        "@tiptap/extension-list-keymap": "^3.1.0",
+        "@tiptap/extension-ordered-list": "^3.1.0",
+        "@tiptap/extension-paragraph": "^3.1.0",
+        "@tiptap/extension-strike": "^3.1.0",
+        "@tiptap/extension-text": "^3.1.0",
+        "@tiptap/extension-underline": "^3.1.0",
+        "@tiptap/extensions": "^3.1.0",
+        "@tiptap/pm": "^3.1.0"
+      }
+    },
     "@types/d3-array": {
       "version": "3.2.1",
       "resolved": "http://mirrors.cloud.tencent.com/npm/@types/d3-array/-/d3-array-3.2.1.tgz",
@@ -8830,6 +10753,26 @@
       "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
       "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ=="
     },
+    "@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q=="
+    },
+    "@types/lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+      "dev": true
+    },
+    "@types/lodash.throttle": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.9.tgz",
+      "integrity": "sha512-PCPVfpfueguWZQB7pJQK890F2scYKoDUL3iM522AptHWn7d5NQmeS/LTEHIcLr5PaTzl3dK2Z0xSUHHTHwaL5g==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/mapbox__point-geometry": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
@@ -8845,6 +10788,15 @@
         "@types/pbf": "*"
       }
     },
+    "@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "requires": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
     "@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -8853,6 +10805,11 @@
         "@types/unist": "*"
       }
     },
+    "@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg=="
+    },
     "@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -8914,6 +10871,11 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
     },
+    "@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="
+    },
     "@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -9200,6 +11162,11 @@
       "dev": true,
       "requires": {}
     },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
     "aria-hidden": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
@@ -9219,6 +11186,16 @@
       "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
       "dev": true
     },
+    "braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "fill-range": "^7.1.1"
+      }
+    },
     "browserslist": {
       "version": "4.25.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
@@ -9269,6 +11246,15 @@
       "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
       "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw=="
     },
+    "chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "devOptional": true,
+      "requires": {
+        "readdirp": "^4.0.1"
+      }
+    },
     "chownr": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
@@ -9347,6 +11333,11 @@
       "dev": true,
       "peer": true
     },
+    "crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
     "csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -9618,8 +11609,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-equals": {
       "version": "5.2.2",
@@ -9639,6 +11629,16 @@
       "dev": true,
       "peer": true
     },
+    "fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
     "framer-motion": {
       "version": "12.23.6",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.6.tgz",
@@ -9892,6 +11892,12 @@
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
     },
+    "immutable": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
+      "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
+      "devOptional": true
+    },
     "ini": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz",
@@ -9932,11 +11938,35 @@
       "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
       "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A=="
     },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "optional": true
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
     "is-hexadecimal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
       "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg=="
     },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "optional": true
+    },
     "is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -10119,6 +12149,19 @@
       "dev": true,
       "optional": true
     },
+    "linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "requires": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "linkifyjs": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.2.tgz",
+      "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA=="
+    },
     "loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -10142,6 +12185,11 @@
       "resolved": "http://mirrors.cloud.tencent.com/npm/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -10208,6 +12256,26 @@
         "vt-pbf": "^3.1.3"
       }
     },
+    "markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+        }
+      }
+    },
     "markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -10422,6 +12490,11 @@
         "@types/mdast": "^4.0.0"
       }
     },
+    "mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -10740,6 +12813,17 @@
       "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
       "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA=="
     },
+    "micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      }
+    },
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -10857,6 +12941,13 @@
       "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
       "requires": {}
     },
+    "node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "optional": true
+    },
     "node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -10911,6 +13002,11 @@
         "tslib": "^2.3.0"
       }
     },
+    "orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g=="
+    },
     "pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
@@ -10969,6 +13065,13 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "optional": true
+    },
     "postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -11007,6 +13110,185 @@
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
       "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="
     },
+    "prosemirror-changeset": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.3.1.tgz",
+      "integrity": "sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==",
+      "requires": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-collab": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
+      "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
+      "requires": {
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "prosemirror-commands": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz",
+      "integrity": "sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.10.2"
+      }
+    },
+    "prosemirror-dropcursor": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.2.tgz",
+      "integrity": "sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "prosemirror-gapcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz",
+      "integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==",
+      "requires": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "prosemirror-history": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz",
+      "integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==",
+      "requires": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "prosemirror-inputrules": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.5.0.tgz",
+      "integrity": "sha512-K0xJRCmt+uSw7xesnHmcn72yBGTbY45vm8gXI4LZXbx2Z0jwh5aF9xrGQgrVPu0WbyFVFF3E/o9VhJYz6SQWnA==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-keymap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz",
+      "integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "prosemirror-markdown": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.2.tgz",
+      "integrity": "sha512-FPD9rHPdA9fqzNmIIDhhnYQ6WgNoSWX9StUZ8LEKapaXU9i6XgykaHKhp6XMyXlOWetmaFgGDS/nu/w9/vUc5g==",
+      "requires": {
+        "@types/markdown-it": "^14.0.0",
+        "markdown-it": "^14.0.0",
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "prosemirror-menu": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.5.tgz",
+      "integrity": "sha512-qwXzynnpBIeg1D7BAtjOusR+81xCp53j7iWu/IargiRZqRjGIlQuu1f3jFi+ehrHhWMLoyOQTSRx/IWZJqOYtQ==",
+      "requires": {
+        "crelt": "^1.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "prosemirror-model": {
+      "version": "1.25.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.3.tgz",
+      "integrity": "sha512-dY2HdaNXlARknJbrManZ1WyUtos+AP97AmvqdOQtWtrrC5g4mohVX5DTi9rXNFSk09eczLq9GuNTtq3EfMeMGA==",
+      "requires": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "prosemirror-schema-basic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.4.tgz",
+      "integrity": "sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ==",
+      "requires": {
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "prosemirror-schema-list": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz",
+      "integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "prosemirror-state": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
+      "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "prosemirror-tables": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.7.1.tgz",
+      "integrity": "sha512-eRQ97Bf+i9Eby99QbyAiyov43iOKgWa7QCGly+lrDt7efZ1v8NWolhXiB43hSDGIXT1UXgbs4KJN3a06FGpr1Q==",
+      "requires": {
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-model": "^1.25.0",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-transform": "^1.10.3",
+        "prosemirror-view": "^1.39.1"
+      }
+    },
+    "prosemirror-trailing-node": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
+      "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
+      "requires": {
+        "@remirror/core-constants": "3.0.0",
+        "escape-string-regexp": "^4.0.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        }
+      }
+    },
+    "prosemirror-transform": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.4.tgz",
+      "integrity": "sha512-pwDy22nAnGqNR1feOQKHxoFkkUtepoFAd3r2hbEDsnf4wp57kKA36hXsB3njA9FtONBEwSDnDeCiJe+ItD+ykw==",
+      "requires": {
+        "prosemirror-model": "^1.21.0"
+      }
+    },
+    "prosemirror-view": {
+      "version": "1.40.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.40.1.tgz",
+      "integrity": "sha512-pbwUjt3G7TlsQQHDiYSupWBhJswpLVB09xXm1YiJPdkjkh9Pe7Y51XdLh5VWIZmROLY8UpUpG03lkdhm9lzIBA==",
+      "requires": {
+        "prosemirror-model": "^1.20.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "protocol-buffers-schema": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
@@ -11018,6 +13300,11 @@
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true
     },
+    "punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA=="
+    },
     "qss": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/qss/-/qss-3.0.0.tgz",
@@ -11090,6 +13377,12 @@
       "integrity": "sha512-2vbXUFDYgqEgM2RcXcAT2PwDW/80QARi+PKmHy5q2KhuKvOlG8iIYgf7eIlIANR5trW9fJbP4r5aub3a4egsew==",
       "requires": {}
     },
+    "react-hotkeys-hook": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-5.1.0.tgz",
+      "integrity": "sha512-GCNGXjBzV9buOS3REoQFmSmE4WTvBhYQ0YrAeeMZI83bhXg3dRWsLHXDutcVDdEjwJqJCxk5iewWYX5LtFUd7g==",
+      "requires": {}
+    },
     "react-is": {
       "version": "18.3.1",
       "resolved": "http://mirrors.cloud.tencent.com/npm/react-is/-/react-is-18.3.1.tgz",
@@ -11164,6 +13457,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "devOptional": true
+    },
     "recharts": {
       "version": "2.15.4",
       "resolved": "http://mirrors.cloud.tencent.com/npm/recharts/-/recharts-2.15.4.tgz",
@@ -11353,6 +13652,11 @@
         "protocol-buffers-schema": "^3.3.1"
       }
     },
+    "rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ=="
+    },
     "rw": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
@@ -11365,6 +13669,18 @@
       "dev": true,
       "peer": true
     },
+    "sass": {
+      "version": "1.90.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.90.0.tgz",
+      "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
+      "devOptional": true,
+      "requires": {
+        "@parcel/watcher": "^2.4.1",
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "scheduler": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
@@ -11538,6 +13854,11 @@
       "resolved": "http://mirrors.cloud.tencent.com/npm/symbol-observable/-/symbol-observable-4.0.0.tgz",
       "integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ=="
     },
+    "tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "tabler": {
       "version": "1.0.0",
       "resolved": "http://mirrors.cloud.tencent.com/npm/tabler/-/tabler-1.0.0.tgz",
@@ -11656,6 +13977,16 @@
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
       "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g=="
     },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -11696,6 +14027,11 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true
     },
+    "uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
+    },
     "undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
@@ -11895,6 +14231,11 @@
         "pbf": "^3.2.1"
       }
     },
+    "w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+    },
     "watchpack": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
diff --git a/package.json b/package.json
index e7e586b..55b3978 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
+    "@floating-ui/react": "^0.27.15",
     "@hookform/resolvers": "^5.2.0",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",
@@ -25,6 +26,8 @@
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-navigation-menu": "^1.2.13",
     "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slider": "^1.3.5",
@@ -36,6 +39,18 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tabler/icons-react": "^3.34.1",
     "@tanstack/react-table": "^8.21.3",
+    "@tiptap/extension-highlight": "^3.1.0",
+    "@tiptap/extension-horizontal-rule": "^3.1.0",
+    "@tiptap/extension-image": "^3.1.0",
+    "@tiptap/extension-list": "^3.1.0",
+    "@tiptap/extension-subscript": "^3.1.0",
+    "@tiptap/extension-superscript": "^3.1.0",
+    "@tiptap/extension-text-align": "^3.1.0",
+    "@tiptap/extension-typography": "^3.1.0",
+    "@tiptap/extensions": "^3.1.0",
+    "@tiptap/pm": "^3.1.0",
+    "@tiptap/react": "^3.1.0",
+    "@tiptap/starter-kit": "^3.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -45,6 +60,7 @@
     "graphql": "^16.11.0",
     "graphql-request": "^7.2.0",
     "graphql-ws": "^6.0.6",
+    "lodash.throttle": "^4.1.1",
     "lucide-react": "^0.525.0",
     "maplibre-gl": "^5.6.1",
     "next": "15.4.1",
@@ -55,6 +71,7 @@
     "react-day-picker": "^9.8.0",
     "react-dom": "19.1.0",
     "react-hook-form": "^7.61.1",
+    "react-hotkeys-hook": "^5.1.0",
     "react-markdown": "^10.1.0",
     "recharts": "^2.15.4",
     "rehype-katex": "^7.0.1",
@@ -70,10 +87,12 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "raw-loader": "^4.0.2",
+    "sass": "^1.90.0",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.3.5",
     "typescript": "^5"
diff --git a/styles/_keyframe-animations.scss b/styles/_keyframe-animations.scss
new file mode 100644
index 0000000..dd98b7c
--- /dev/null
+++ b/styles/_keyframe-animations.scss
@@ -0,0 +1,91 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0.95);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.95);
+  }
+}
+
+@keyframes zoom {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideFromTop {
+  from {
+    transform: translateY(-0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideFromRight {
+  from {
+    transform: translateX(0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideFromLeft {
+  from {
+    transform: translateX(-0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideFromBottom {
+  from {
+    transform: translateY(0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/styles/_variables.scss b/styles/_variables.scss
new file mode 100644
index 0000000..113a16b
--- /dev/null
+++ b/styles/_variables.scss
@@ -0,0 +1,296 @@
+:root {
+  /****************** 
+  Basics
+  ******************/
+
+  overflow-wrap: break-word;
+  text-size-adjust: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /****************** 
+  Colors variables
+  ******************/
+
+  /* Gray alpha (light mode) */
+  --tt-gray-light-a-50: rgba(56, 56, 56, 0.04);
+  --tt-gray-light-a-100: rgba(15, 22, 36, 0.05);
+  --tt-gray-light-a-200: rgba(37, 39, 45, 0.1);
+  --tt-gray-light-a-300: rgba(47, 50, 55, 0.2);
+  --tt-gray-light-a-400: rgba(40, 44, 51, 0.42);
+  --tt-gray-light-a-500: rgba(52, 55, 60, 0.64);
+  --tt-gray-light-a-600: rgba(36, 39, 46, 0.78);
+  --tt-gray-light-a-700: rgba(35, 37, 42, 0.87);
+  --tt-gray-light-a-800: rgba(30, 32, 36, 0.95);
+  --tt-gray-light-a-900: rgba(29, 30, 32, 0.98);
+
+  /* Gray (light mode) */
+  --tt-gray-light-50: rgba(250, 250, 250, 1);
+  --tt-gray-light-100: rgba(244, 244, 245, 1);
+  --tt-gray-light-200: rgba(234, 234, 235, 1);
+  --tt-gray-light-300: rgba(213, 214, 215, 1);
+  --tt-gray-light-400: rgba(166, 167, 171, 1);
+  --tt-gray-light-500: rgba(125, 127, 130, 1);
+  --tt-gray-light-600: rgba(83, 86, 90, 1);
+  --tt-gray-light-700: rgba(64, 65, 69, 1);
+  --tt-gray-light-800: rgba(44, 45, 48, 1);
+  --tt-gray-light-900: rgba(34, 35, 37, 1);
+
+  /* Gray alpha (dark mode) */
+  --tt-gray-dark-a-50: rgba(232, 232, 253, 0.05);
+  --tt-gray-dark-a-100: rgba(231, 231, 243, 0.07);
+  --tt-gray-dark-a-200: rgba(238, 238, 246, 0.11);
+  --tt-gray-dark-a-300: rgba(239, 239, 245, 0.22);
+  --tt-gray-dark-a-400: rgba(244, 244, 255, 0.37);
+  --tt-gray-dark-a-500: rgba(236, 238, 253, 0.5);
+  --tt-gray-dark-a-600: rgba(247, 247, 253, 0.64);
+  --tt-gray-dark-a-700: rgba(251, 251, 254, 0.75);
+  --tt-gray-dark-a-800: rgba(253, 253, 253, 0.88);
+  --tt-gray-dark-a-900: rgba(255, 255, 255, 0.96);
+
+  /* Gray (dark mode) */
+  --tt-gray-dark-50: rgba(25, 25, 26, 1);
+  --tt-gray-dark-100: rgba(32, 32, 34, 1);
+  --tt-gray-dark-200: rgba(45, 45, 47, 1);
+  --tt-gray-dark-300: rgba(70, 70, 73, 1);
+  --tt-gray-dark-400: rgba(99, 99, 105, 1);
+  --tt-gray-dark-500: rgba(124, 124, 131, 1);
+  --tt-gray-dark-600: rgba(163, 163, 168, 1);
+  --tt-gray-dark-700: rgba(192, 192, 195, 1);
+  --tt-gray-dark-800: rgba(224, 224, 225, 1);
+  --tt-gray-dark-900: rgba(245, 245, 245, 1);
+
+  /* Brand colors */
+  --tt-brand-color-50: rgba(239, 238, 255, 1);
+  --tt-brand-color-100: rgba(222, 219, 255, 1);
+  --tt-brand-color-200: rgba(195, 189, 255, 1);
+  --tt-brand-color-300: rgba(157, 138, 255, 1);
+  --tt-brand-color-400: rgba(122, 82, 255, 1);
+  --tt-brand-color-500: rgba(98, 41, 255, 1);
+  --tt-brand-color-600: rgba(84, 0, 229, 1);
+  --tt-brand-color-700: rgba(75, 0, 204, 1);
+  --tt-brand-color-800: rgba(56, 0, 153, 1);
+  --tt-brand-color-900: rgba(43, 25, 102, 1);
+  --tt-brand-color-950: hsla(257, 100%, 9%, 1);
+
+  /* Green */
+  --tt-color-green-inc-5: hsla(129, 100%, 97%, 1);
+  --tt-color-green-inc-4: hsla(129, 100%, 92%, 1);
+  --tt-color-green-inc-3: hsla(131, 100%, 86%, 1);
+  --tt-color-green-inc-2: hsla(133, 98%, 78%, 1);
+  --tt-color-green-inc-1: hsla(137, 99%, 70%, 1);
+  --tt-color-green-base: hsla(147, 99%, 50%, 1);
+  --tt-color-green-dec-1: hsla(147, 97%, 41%, 1);
+  --tt-color-green-dec-2: hsla(146, 98%, 32%, 1);
+  --tt-color-green-dec-3: hsla(146, 100%, 24%, 1);
+  --tt-color-green-dec-4: hsla(144, 100%, 16%, 1);
+  --tt-color-green-dec-5: hsla(140, 100%, 9%, 1);
+
+  /* Yellow */
+  --tt-color-yellow-inc-5: hsla(50, 100%, 97%, 1);
+  --tt-color-yellow-inc-4: hsla(50, 100%, 91%, 1);
+  --tt-color-yellow-inc-3: hsla(50, 100%, 84%, 1);
+  --tt-color-yellow-inc-2: hsla(50, 100%, 77%, 1);
+  --tt-color-yellow-inc-1: hsla(50, 100%, 68%, 1);
+  --tt-color-yellow-base: hsla(52, 100%, 50%, 1);
+  --tt-color-yellow-dec-1: hsla(52, 100%, 41%, 1);
+  --tt-color-yellow-dec-2: hsla(52, 100%, 32%, 1);
+  --tt-color-yellow-dec-3: hsla(52, 100%, 24%, 1);
+  --tt-color-yellow-dec-4: hsla(51, 100%, 16%, 1);
+  --tt-color-yellow-dec-5: hsla(50, 100%, 9%, 1);
+
+  /* Red */
+  --tt-color-red-inc-5: hsla(11, 100%, 96%, 1);
+  --tt-color-red-inc-4: hsla(11, 100%, 88%, 1);
+  --tt-color-red-inc-3: hsla(10, 100%, 80%, 1);
+  --tt-color-red-inc-2: hsla(9, 100%, 73%, 1);
+  --tt-color-red-inc-1: hsla(7, 100%, 64%, 1);
+  --tt-color-red-base: hsla(7, 100%, 54%, 1);
+  --tt-color-red-dec-1: hsla(7, 100%, 41%, 1);
+  --tt-color-red-dec-2: hsla(5, 100%, 32%, 1);
+  --tt-color-red-dec-3: hsla(4, 100%, 24%, 1);
+  --tt-color-red-dec-4: hsla(3, 100%, 16%, 1);
+  --tt-color-red-dec-5: hsla(1, 100%, 9%, 1);
+
+  /* Basic colors */
+  --white: rgba(255, 255, 255, 1);
+  --black: rgba(14, 14, 17, 1);
+  --transparent: rgba(255, 255, 255, 0);
+
+  /****************** 
+  Shadow variables
+  ******************/
+
+  /* Shadows Light */
+  --tt-shadow-elevated-md:
+    0px 16px 48px 0px rgba(17, 24, 39, 0.04),
+    0px 12px 24px 0px rgba(17, 24, 39, 0.04),
+    0px 6px 8px 0px rgba(17, 24, 39, 0.02),
+    0px 2px 3px 0px rgba(17, 24, 39, 0.02);
+
+  /************************************************** 
+       Radius variables 
+    **************************************************/
+
+  --tt-radius-xxs: 0.125rem; /* 2px */
+  --tt-radius-xs: 0.25rem; /* 4px */
+  --tt-radius-sm: 0.375rem; /* 6px */
+  --tt-radius-md: 0.5rem; /* 8px */
+  --tt-radius-lg: 0.75rem; /* 12px */
+  --tt-radius-xl: 1rem; /* 16px */
+
+  /************************************************** 
+       Transition variables 
+    **************************************************/
+
+  --tt-transition-duration-short: 0.1s;
+  --tt-transition-duration-default: 0.2s;
+  --tt-transition-duration-long: 0.64s;
+  --tt-transition-easing-default: cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  --tt-transition-easing-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
+  --tt-transition-easing-quart: cubic-bezier(0.77, 0, 0.18, 1);
+  --tt-transition-easing-circ: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+  --tt-transition-easing-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+
+  /****************** 
+  Contrast variables
+  ******************/
+
+  --tt-accent-contrast: 8%;
+  --tt-destructive-contrast: 8%;
+  --tt-foreground-contrast: 8%;
+
+  &,
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    transition: none var(--tt-transition-duration-default)
+      var(--tt-transition-easing-default);
+  }
+}
+
+:root {
+  /************************************************** 
+      Global colors 
+  **************************************************/
+
+  /* Global colors - Light mode */
+  --tt-bg-color: var(--white);
+  --tt-border-color: var(--tt-gray-light-a-200);
+  --tt-border-color-tint: var(--tt-gray-light-a-100);
+  --tt-sidebar-bg-color: var(--tt-gray-light-100);
+  --tt-scrollbar-color: var(--tt-gray-light-a-200);
+  --tt-cursor-color: var(--tt-brand-color-500);
+  --tt-selection-color: rgba(157, 138, 255, 0.2);
+  --tt-card-bg-color: var(--white);
+  --tt-card-border-color: var(--tt-gray-light-a-100);
+}
+
+/* Global colors - Dark mode */
+.dark {
+  --tt-bg-color: var(--black);
+  --tt-border-color: var(--tt-gray-dark-a-200);
+  --tt-border-color-tint: var(--tt-gray-dark-a-100);
+  --tt-sidebar-bg-color: var(--tt-gray-dark-100);
+  --tt-scrollbar-color: var(--tt-gray-dark-a-200);
+  --tt-cursor-color: var(--tt-brand-color-400);
+  --tt-selection-color: rgba(122, 82, 255, 0.2);
+  --tt-card-bg-color: var(--tt-gray-dark-50);
+  --tt-card-border-color: var(--tt-gray-dark-a-50);
+
+  --tt-shadow-elevated-md:
+    0px 16px 48px 0px rgba(0, 0, 0, 0.5), 0px 12px 24px 0px rgba(0, 0, 0, 0.24),
+    0px 6px 8px 0px rgba(0, 0, 0, 0.22), 0px 2px 3px 0px rgba(0, 0, 0, 0.12);
+}
+
+/* Text colors */
+:root {
+  --tt-color-text-gray: hsl(45, 2%, 46%);
+  --tt-color-text-brown: hsl(19, 31%, 47%);
+  --tt-color-text-orange: hsl(30, 89%, 45%);
+  --tt-color-text-yellow: hsl(38, 62%, 49%);
+  --tt-color-text-green: hsl(148, 32%, 39%);
+  --tt-color-text-blue: hsl(202, 54%, 43%);
+  --tt-color-text-purple: hsl(274, 32%, 54%);
+  --tt-color-text-pink: hsl(328, 49%, 53%);
+  --tt-color-text-red: hsl(2, 62%, 55%);
+
+  --tt-color-text-gray-contrast: hsla(39, 26%, 26%, 0.15);
+  --tt-color-text-brown-contrast: hsla(18, 43%, 69%, 0.35);
+  --tt-color-text-orange-contrast: hsla(24, 73%, 55%, 0.27);
+  --tt-color-text-yellow-contrast: hsla(44, 82%, 59%, 0.39);
+  --tt-color-text-green-contrast: hsla(126, 29%, 60%, 0.27);
+  --tt-color-text-blue-contrast: hsla(202, 54%, 59%, 0.27);
+  --tt-color-text-purple-contrast: hsla(274, 37%, 64%, 0.27);
+  --tt-color-text-pink-contrast: hsla(331, 60%, 71%, 0.27);
+  --tt-color-text-red-contrast: hsla(8, 79%, 79%, 0.4);
+}
+
+.dark {
+  --tt-color-text-gray: hsl(0, 0%, 61%);
+  --tt-color-text-brown: hsl(18, 35%, 58%);
+  --tt-color-text-orange: hsl(25, 53%, 53%);
+  --tt-color-text-yellow: hsl(36, 54%, 55%);
+  --tt-color-text-green: hsl(145, 32%, 47%);
+  --tt-color-text-blue: hsl(202, 64%, 52%);
+  --tt-color-text-purple: hsl(270, 55%, 62%);
+  --tt-color-text-pink: hsl(329, 57%, 58%);
+  --tt-color-text-red: hsl(1, 69%, 60%);
+
+  --tt-color-text-gray-contrast: hsla(0, 0%, 100%, 0.09);
+  --tt-color-text-brown-contrast: hsla(17, 45%, 50%, 0.25);
+  --tt-color-text-orange-contrast: hsla(27, 82%, 53%, 0.2);
+  --tt-color-text-yellow-contrast: hsla(35, 49%, 47%, 0.2);
+  --tt-color-text-green-contrast: hsla(151, 55%, 39%, 0.2);
+  --tt-color-text-blue-contrast: hsla(202, 54%, 43%, 0.2);
+  --tt-color-text-purple-contrast: hsla(271, 56%, 60%, 0.18);
+  --tt-color-text-pink-contrast: hsla(331, 67%, 58%, 0.22);
+  --tt-color-text-red-contrast: hsla(0, 67%, 60%, 0.25);
+}
+
+/* Highlight colors */
+:root {
+  --tt-color-highlight-yellow: #fef9c3;
+  --tt-color-highlight-green: #dcfce7;
+  --tt-color-highlight-blue: #e0f2fe;
+  --tt-color-highlight-purple: #f3e8ff;
+  --tt-color-highlight-red: #ffe4e6;
+  --tt-color-highlight-gray: rgb(248, 248, 247);
+  --tt-color-highlight-brown: rgb(244, 238, 238);
+  --tt-color-highlight-orange: rgb(251, 236, 221);
+  --tt-color-highlight-pink: rgb(252, 241, 246);
+
+  --tt-color-highlight-yellow-contrast: #fbe604;
+  --tt-color-highlight-green-contrast: #c7fad8;
+  --tt-color-highlight-blue-contrast: #ceeafd;
+  --tt-color-highlight-purple-contrast: #e4ccff;
+  --tt-color-highlight-red-contrast: #ffccd0;
+  --tt-color-highlight-gray-contrast: rgba(84, 72, 49, 0.15);
+  --tt-color-highlight-brown-contrast: rgba(210, 162, 141, 0.35);
+  --tt-color-highlight-orange-contrast: rgba(224, 124, 57, 0.27);
+  --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
+}
+
+.dark {
+  --tt-color-highlight-yellow: #6b6524;
+  --tt-color-highlight-green: #509568;
+  --tt-color-highlight-blue: #6e92aa;
+  --tt-color-highlight-purple: #583e74;
+  --tt-color-highlight-red: #743e42;
+  --tt-color-highlight-gray: rgb(47, 47, 47);
+  --tt-color-highlight-brown: rgb(74, 50, 40);
+  --tt-color-highlight-orange: rgb(92, 59, 35);
+  --tt-color-highlight-pink: rgb(78, 44, 60);
+
+  --tt-color-highlight-yellow-contrast: #58531e;
+  --tt-color-highlight-green-contrast: #47855d;
+  --tt-color-highlight-blue-contrast: #5e86a1;
+  --tt-color-highlight-purple-contrast: #4c3564;
+  --tt-color-highlight-red-contrast: #643539;
+  --tt-color-highlight-gray-contrast: rgba(255, 255, 255, 0.094);
+  --tt-color-highlight-brown-contrast: rgba(184, 101, 69, 0.25);
+  --tt-color-highlight-orange-contrast: rgba(233, 126, 37, 0.2);
+  --tt-color-highlight-pink-contrast: rgba(220, 76, 145, 0.22);
+}
diff --git a/types/config.ts b/types/config.ts
new file mode 100644
index 0000000..bfeb964
--- /dev/null
+++ b/types/config.ts
@@ -0,0 +1,85 @@
+export interface Config {
+    // System Controls
+    volume: number
+    brightness: number
+    temperature: number
+    theme: string
+
+    // Server Configuration
+    serverName: string
+    apiKey: string
+    environment: string
+    region: string
+
+    // Performance Settings
+    maxConnections: number
+    cacheSize: number
+    threadCount: number
+    memoryLimit: number
+    diskQuota: number
+    networkBandwidth: number
+
+    // Security & Features
+    sslEnabled: boolean
+    autoBackup: boolean
+    compressionEnabled: boolean
+    debugMode: boolean
+    maintenanceMode: boolean
+    logLevel: string
+
+    // Notifications & Alerts
+    notifications: boolean
+    emailAlerts: boolean
+    smsAlerts: boolean
+    monitoringEnabled: boolean
+    language: string
+    timezone: string
+
+    // Advanced Configuration
+    description: string
+    selectedFeatures: string[]
+    deploymentStrategy: string
+}
+
+export const defaultConfig: Config = {
+    // System Controls
+    volume: 75,
+    brightness: 60,
+    temperature: 22,
+    theme: "dark",
+
+    // Server Configuration
+    serverName: "Production Server",
+    apiKey: "",
+    environment: "production",
+    region: "us-east-1",
+
+    // Performance Settings
+    maxConnections: 100,
+    cacheSize: 512,
+    threadCount: 8,
+    memoryLimit: 4096,
+    diskQuota: 1000,
+    networkBandwidth: 100,
+
+    // Security & Features
+    sslEnabled: true,
+    autoBackup: true,
+    compressionEnabled: false,
+    debugMode: false,
+    maintenanceMode: false,
+    logLevel: "info",
+
+    // Notifications & Alerts
+    notifications: true,
+    emailAlerts: true,
+    smsAlerts: false,
+    monitoringEnabled: true,
+    language: "en",
+    timezone: "UTC",
+
+    // Advanced Configuration
+    description: "",
+    selectedFeatures: ["analytics", "caching"],
+    deploymentStrategy: "rolling"
+} 
\ No newline at end of file