diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json
index 8101e4a2..b75d7296 100644
--- a/apps/web/messages/en.json
+++ b/apps/web/messages/en.json
@@ -914,11 +914,31 @@
     },
     "editor": {
       "emptyState": "Select a note or create a new one to get started.",
-      "titlePlaceholder": "Untitled"
+      "titlePlaceholder": "Untitled",
+      "saving": "Saving…",
+      "ready": "Ready",
+      "saved": "Saved {time}",
+      "stats": "{words} words · {read} min read",
+      "template": "Template",
+      "applyTemplate": "Apply template",
+      "exportMdLabel": ".md",
+      "exportMd": "Export as Markdown",
+      "exportHtmlLabel": ".html",
+      "exportHtml": "Export as HTML",
+      "focusMode": "Focus mode",
+      "exitFocusMode": "Exit focus mode",
+      "save": "Save",
+      "addTag": "Add tag…",
+      "removeTag": "Remove tag {tag}",
+      "loading": "Loading…",
+      "searchHint": "to search",
+      "focusHint": "focus mode",
+      "notePath": "Note path"
     },
     "context": {
       "authRequiredError": "User not authenticated",
-      "defaultTitle": "Untitled"
+      "defaultTitle": "Untitled",
+      "cloudSyncImageError": "Turn on Cloud Sync to store note images. Text notes stay local."
     }
   },
   "PasswordManager": {
diff --git a/apps/web/package.json b/apps/web/package.json
index ab1ed774..374280c3 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -23,6 +23,8 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^3",
     "@microsoft/clarity": "^1.0.2",
+    "@milkdown/crepe": "7.21.3",
+    "@milkdown/kit": "7.21.3",
     "@monaco-editor/react": "^4.7.0",
     "@peculiar/x509": "^2.0.0",
     "@radix-ui/react-accordion": "^1.2.12",
diff --git a/apps/web/src/app/app/notes/types/Note.ts b/apps/web/src/app/app/notes/types/Note.ts
index bcebe4ce..d1078b66 100644
--- a/apps/web/src/app/app/notes/types/Note.ts
+++ b/apps/web/src/app/app/notes/types/Note.ts
@@ -1,7 +1,10 @@
 export interface Note {
     id: string;
     title: string;
-    content: unknown; // JSON content from rich editor
+    // Markdown string. Legacy notes may still hold the old rich-editor tree
+    // (a JSON object); those are converted to markdown on read and re-saved as
+    // a string on next edit. Typed `unknown` so both shapes are handled safely.
+    content: unknown;
     parentId: string | null;
     icon?: string;
     pinned?: boolean;
diff --git a/apps/web/src/app/app/notes/utils/__tests__/noteContentUtils.test.ts b/apps/web/src/app/app/notes/utils/__tests__/noteContentUtils.test.ts
new file mode 100644
index 00000000..5bcb4406
--- /dev/null
+++ b/apps/web/src/app/app/notes/utils/__tests__/noteContentUtils.test.ts
@@ -0,0 +1,138 @@
+import {
+    noteContentToMarkdown,
+    contentToMarkdown,
+    extractPlainText,
+    countWords,
+    readingTimeMinutes,
+} from "../noteContentUtils";
+
+// Helpers to build legacy rich-editor tree nodes concisely.
+const text = (type: string, content: string, extra: Record<string, unknown> = {}) => ({
+    type,
+    content,
+    attributes: {},
+    ...extra,
+});
+const container = (children: unknown[], attributes: Record<string, unknown> = {}) => ({
+    type: "container",
+    children,
+    attributes,
+});
+
+describe("noteContentToMarkdown", () => {
+    it("passes markdown strings through untouched", () => {
+        expect(noteContentToMarkdown("# Hello\n\nworld")).toBe("# Hello\n\nworld");
+    });
+
+    it("returns empty string for null/undefined/garbage", () => {
+        expect(noteContentToMarkdown(null)).toBe("");
+        expect(noteContentToMarkdown(undefined)).toBe("");
+        expect(noteContentToMarkdown(42)).toBe("");
+    });
+
+    it("converts a legacy tree of headings/paragraphs/quotes", () => {
+        const tree = container([
+            text("h1", "Title"),
+            text("p", "A paragraph."),
+            text("h2", "Sub"),
+            text("blockquote", "quoted"),
+            text("hr", ""),
+        ]);
+        expect(noteContentToMarkdown(tree)).toBe(
+            "# Title\nA paragraph.\n## Sub\n> quoted\n---"
+        );
+    });
+
+    it("converts bullet list items", () => {
+        const tree = container([text("li", "one"), text("li", "two")]);
+        expect(noteContentToMarkdown(tree)).toBe("- one\n- two");
+    });
+
+    it("numbers ordered lists via listType attribute", () => {
+        const tree = container(
+            [text("li", "first"), text("li", "second")],
+            { listType: "ordered" }
+        );
+        expect(noteContentToMarkdown(tree)).toBe("1. first\n2. second");
+    });
+
+    it("converts images and links", () => {
+        const tree = container([
+            text("img", "", { attributes: { src: "https://x/y.png", alt: "pic" } }),
+            text("a", "click", { attributes: { href: "https://x" } }),
+        ]);
+        expect(noteContentToMarkdown(tree)).toBe("![pic](https://x/y.png)\n[click](https://x)");
+    });
+
+    it("converts inline-formatted children", () => {
+        const tree = container([
+            {
+                type: "p",
+                attributes: {},
+                children: [
+                    { content: "bold", bold: true },
+                    { content: " and " },
+                    { content: "code", code: true },
+                ],
+            },
+        ]);
+        expect(noteContentToMarkdown(tree)).toBe("**bold** and `code`");
+    });
+
+    it("converts code blocks", () => {
+        const tree = container([text("pre", "const a = 1")]);
+        expect(noteContentToMarkdown(tree)).toBe("```\nconst a = 1\n```");
+    });
+
+    it("converts a table to GFM", () => {
+        const tree = container([
+            {
+                type: "table",
+                attributes: {},
+                children: [
+                    {
+                        type: "tbody",
+                        attributes: {},
+                        children: [
+                            { type: "tr", attributes: {}, children: [text("p", "A"), text("p", "B")] },
+                            { type: "tr", attributes: {}, children: [text("p", "1"), text("p", "2")] },
+                        ],
+                    },
+                ],
+            },
+        ]);
+        expect(noteContentToMarkdown(tree)).toBe(
+            "| A | B |\n| --- | --- |\n| 1 | 2 |"
+        );
+    });
+});
+
+describe("contentToMarkdown (export)", () => {
+    it("prepends the title as an h1", () => {
+        expect(contentToMarkdown("My Note", "body text")).toBe("# My Note\n\nbody text");
+    });
+    it("works with legacy trees too", () => {
+        const tree = container([text("p", "hi")]);
+        expect(contentToMarkdown("T", tree)).toBe("# T\n\nhi");
+    });
+});
+
+describe("extractPlainText", () => {
+    it("strips markdown syntax", () => {
+        const md = "# H\n\nsome **bold** and `code` and [link](https://x) and ![i](y.png)\n\n- a\n- b";
+        const plain = extractPlainText(md);
+        expect(plain).toContain("some bold and code and link");
+        expect(plain).not.toContain("**");
+        expect(plain).not.toContain("![");
+        expect(plain).not.toContain("#");
+    });
+    it("extracts text from legacy trees", () => {
+        const tree = container([text("h1", "Hello"), text("p", "world")]);
+        expect(extractPlainText(tree)).toBe("Hello world");
+    });
+    it("counts words and reading time", () => {
+        expect(countWords("one two three")).toBe(3);
+        expect(readingTimeMinutes(0)).toBe(1);
+        expect(readingTimeMinutes(400)).toBe(2);
+    });
+});
diff --git a/apps/web/src/app/app/notes/utils/noteContentUtils.ts b/apps/web/src/app/app/notes/utils/noteContentUtils.ts
index 2cfcc1a4..5c23f2ba 100644
--- a/apps/web/src/app/app/notes/utils/noteContentUtils.ts
+++ b/apps/web/src/app/app/notes/utils/noteContentUtils.ts
@@ -1,26 +1,105 @@
-import {
-  EditorNode,
-  getNodeTextContent,
-  isContainerNode,
-  isStructuralNode,
-  isTextNode,
-} from "@/components/ui/rich-editor/types";
-
-/** Recursively extract all plain text from rich editor content JSON. */
+// Note content helpers.
+//
+// Notes are stored as a **markdown string** in `Note.content`. Older notes were
+// stored as the legacy rich-editor tree (a JSON object rooted at a "container"
+// node); those are converted to markdown on read (lazy migration) and re-saved
+// as a string on the next edit. Every function here therefore accepts either
+// shape and normalizes internally — no dependency on the (removed) rich-editor.
+
+// ─── Legacy tree shape (minimal, self-contained) ─────────────────────────────
+
+interface LegacyInline {
+  content: string;
+  bold?: boolean;
+  italic?: boolean;
+  code?: boolean;
+  underline?: boolean;
+  strikethrough?: boolean;
+  href?: string;
+}
+interface LegacyLine {
+  content?: string;
+  children?: LegacyInline[];
+}
+interface LegacyNode {
+  type: string;
+  content?: string;
+  children?: LegacyNode[] | LegacyInline[];
+  lines?: LegacyLine[];
+  attributes?: Record<string, unknown>;
+}
+
+function isLegacyTree(content: unknown): content is LegacyNode {
+  return (
+    !!content &&
+    typeof content === "object" &&
+    typeof (content as LegacyNode).type === "string"
+  );
+}
+
+const CONTAINER_TYPES = new Set(["container", "table", "thead", "tbody", "tr"]);
+
+function isInlineArray(children: unknown): children is LegacyInline[] {
+  return (
+    Array.isArray(children) &&
+    (children.length === 0 ||
+      (typeof children[0] === "object" &&
+        children[0] !== null &&
+        "content" in children[0] &&
+        !("type" in children[0])))
+  );
+}
+
+/** Plain text of a single legacy node (recursively, inline markers stripped). */
+function legacyNodeText(n: LegacyNode): string {
+  if (n.lines && n.lines.length) {
+    return n.lines
+      .map((l) => (l.children ? l.children.map((c) => c.content).join("") : l.content ?? ""))
+      .join(" ");
+  }
+  if (n.children && isInlineArray(n.children)) {
+    return n.children.map((c) => c.content).join("");
+  }
+  if (n.children && Array.isArray(n.children)) {
+    return (n.children as LegacyNode[]).map(legacyNodeText).join(" ");
+  }
+  return n.content ?? "";
+}
+
+// ─── Plain text extraction (markdown OR legacy tree) ─────────────────────────
+
+/** Strip markdown syntax down to readable plain text. Good enough for search
+ *  indexing, word counts, and snippets — not a full parser. */
+function markdownToPlainText(md: string): string {
+  return md
+    .replace(/```[\s\S]*?```/g, " ") // fenced code
+    .replace(/`([^`]+)`/g, "$1") // inline code
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, " ") // images
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1") // links -> text
+    .replace(/^\s{0,3}#{1,6}\s+/gm, "") // headings
+    .replace(/^\s{0,3}>\s?/gm, "") // blockquotes
+    .replace(/^\s*([-*+]|\d+\.)\s+/gm, "") // list markers
+    .replace(/^\s*\|.*\|\s*$/gm, (row) => row.replace(/\|/g, " ")) // table pipes
+    .replace(/[*_~]{1,3}/g, "") // emphasis markers
+    .replace(/^\s*[-*_]{3,}\s*$/gm, " ") // hr
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+/** Recursively extract all plain text from note content (markdown or legacy). */
 export function extractPlainText(content: unknown): string {
-  if (!content || typeof content !== "object") return "";
+  if (typeof content === "string") return markdownToPlainText(content);
+  if (!isLegacyTree(content)) return "";
   const parts: string[] = [];
-
-  function traverse(n: EditorNode) {
-    if (isTextNode(n)) {
-      const text = getNodeTextContent(n).trim();
+  function traverse(n: LegacyNode) {
+    if (CONTAINER_TYPES.has(n.type) && Array.isArray(n.children) && !isInlineArray(n.children)) {
+      (n.children as LegacyNode[]).forEach(traverse);
+    } else {
+      const text = legacyNodeText(n).trim();
       if (text) parts.push(text);
-    } else if (isContainerNode(n) || isStructuralNode(n)) {
-      (n.children as EditorNode[]).forEach(traverse);
     }
   }
-
-  traverse(content as EditorNode);
+  traverse(content);
   return parts.join(" ");
 }
 
@@ -42,40 +121,98 @@ export function extractSnippet(text: string, query: string, maxLen = 80): string
   return (start > 0 ? "…" : "") + text.slice(start, end) + (end < text.length ? "…" : "");
 }
 
-// ─── Markdown export ─────────────────────────────────────────────────────────
+// ─── Legacy tree → markdown (migration + export) ─────────────────────────────
 
-function inlineToMd(children: { content: string; bold?: boolean; italic?: boolean; code?: boolean; href?: string }[]): string {
+function inlineToMd(children: LegacyInline[]): string {
   return children
     .map((c) => {
-      let t = c.content;
+      const t = c.content;
       if (c.code) return "`" + t + "`";
+      if (c.href) return `[${t}](${c.href})`;
       if (c.bold && c.italic) return `***${t}***`;
       if (c.bold) return `**${t}**`;
       if (c.italic) return `_${t}_`;
-      if (c.href) return `[${t}](${c.href})`;
       return t;
     })
     .join("");
 }
 
-function nodeToMd(n: EditorNode, listDepth = 0): string {
-  if (isContainerNode(n) || isStructuralNode(n)) {
-    return (n.children as EditorNode[]).map((c) => nodeToMd(c, listDepth)).join("\n");
+/** Text of a legacy node with inline markdown markers preserved. */
+function legacyNodeMd(n: LegacyNode): string {
+  if (n.lines && n.lines.length) {
+    return n.lines
+      .map((l) => (l.children ? inlineToMd(l.children) : l.content ?? ""))
+      .join("\n");
+  }
+  if (n.children && isInlineArray(n.children)) return inlineToMd(n.children);
+  return n.content ?? "";
+}
+
+/** Collect visible cell text from a table row's children. */
+function rowCells(tr: LegacyNode): string[] {
+  const cells = (tr.children as LegacyNode[]) ?? [];
+  return cells.map((c) => legacyNodeText(c).replace(/\|/g, "\\|").trim());
+}
+
+function tableToMd(table: LegacyNode): string {
+  const rows: string[][] = [];
+  function collectRows(n: LegacyNode) {
+    if (n.type === "tr") {
+      rows.push(rowCells(n));
+    } else if (Array.isArray(n.children) && !isInlineArray(n.children)) {
+      (n.children as LegacyNode[]).forEach(collectRows);
+    }
+  }
+  collectRows(table);
+  if (!rows.length) return "";
+  const width = Math.max(...rows.map((r) => r.length));
+  const pad = (r: string[]) => Array.from({ length: width }, (_, i) => r[i] ?? "");
+  const header = pad(rows[0]);
+  const lines = [
+    `| ${header.join(" | ")} |`,
+    `| ${header.map(() => "---").join(" | ")} |`,
+    ...rows.slice(1).map((r) => `| ${pad(r).join(" | ")} |`),
+  ];
+  return lines.join("\n");
+}
+
+function nodeToMd(n: LegacyNode, listDepth = 0, orderedIndex?: number): string {
+  if (n.type === "table") return tableToMd(n);
+
+  if (CONTAINER_TYPES.has(n.type) && Array.isArray(n.children) && !isInlineArray(n.children)) {
+    // Ordered list container: number its direct list-item children.
+    if (n.type === "container" && n.attributes?.listType === "ordered") {
+      let i = 0;
+      return (n.children as LegacyNode[])
+        .map((c) => nodeToMd(c, listDepth, c.type === "li" ? ++i : undefined))
+        .join("\n");
+    }
+    return (n.children as LegacyNode[]).map((c) => nodeToMd(c, listDepth)).join("\n");
   }
-  if (!isTextNode(n)) return "";
-
-  const raw = n.content ?? "";
-  const inlineText = n.children ? inlineToMd(n.children) : raw;
-  const linesText = n.lines
-    ? n.lines
-        .map((l) =>
-          l.children ? inlineToMd(l.children) : (l.content ?? "")
-        )
-        .join("\n")
-    : null;
-  const text = linesText ?? inlineText;
+
   const indent = "  ".repeat(listDepth);
+  const src = n.attributes ?? {};
 
+  switch (n.type) {
+    case "img": {
+      const alt = (src.alt as string) ?? "";
+      const url = (src.src as string) ?? "";
+      return url ? `![${alt}](${url})` : "";
+    }
+    case "a": {
+      const href = (src.href as string) ?? "";
+      const text = legacyNodeMd(n) || href;
+      return href ? `[${text}](${href})` : text;
+    }
+    case "hr":
+      return "---";
+    case "br":
+      return "";
+    default:
+      break;
+  }
+
+  const text = legacyNodeMd(n);
   switch (n.type) {
     case "h1": return `# ${text}`;
     case "h2": return `## ${text}`;
@@ -84,20 +221,33 @@ function nodeToMd(n: EditorNode, listDepth = 0): string {
     case "h5": return `##### ${text}`;
     case "h6": return `###### ${text}`;
     case "blockquote": return `> ${text}`;
-    case "li": return `${indent}- ${text}`;
+    case "li":
+      return orderedIndex != null ? `${indent}${orderedIndex}. ${text}` : `${indent}- ${text}`;
     case "pre":
     case "code": return "```\n" + text + "\n```";
-    case "hr": return "---";
-    case "br": return "";
     default: return text;
   }
 }
 
+/** Convert legacy tree content to a markdown body (no title heading). */
+function legacyTreeToMarkdown(content: LegacyNode): string {
+  // nodeToMd handles both containers (joining children, honoring ordered lists)
+  // and leaf nodes, so the root routes through it uniformly.
+  return nodeToMd(content).replace(/\n{3,}/g, "\n\n").trim();
+}
+
+/**
+ * Normalize any stored `Note.content` to the markdown string the editor loads.
+ * New notes are already strings; legacy tree notes are converted on the fly.
+ */
+export function noteContentToMarkdown(content: unknown): string {
+  if (typeof content === "string") return content;
+  if (isLegacyTree(content)) return legacyTreeToMarkdown(content);
+  return "";
+}
+
+/** Full markdown document for export: `# title` + body. */
 export function contentToMarkdown(title: string, content: unknown): string {
-  if (!content || typeof content !== "object") return `# ${title}\n`;
-  const body = (content as EditorNode);
-  const lines = isContainerNode(body)
-    ? body.children.map((c) => nodeToMd(c)).join("\n")
-    : nodeToMd(body);
-  return `# ${title}\n\n${lines}`.replace(/\n{3,}/g, "\n\n").trim();
+  const body = noteContentToMarkdown(content);
+  return `# ${title}\n\n${body}`.replace(/\n{3,}/g, "\n\n").trim();
 }
diff --git a/apps/web/src/app/app/notes/utils/noteTemplates.ts b/apps/web/src/app/app/notes/utils/noteTemplates.ts
index a934a873..0eec35e6 100644
--- a/apps/web/src/app/app/notes/utils/noteTemplates.ts
+++ b/apps/web/src/app/app/notes/utils/noteTemplates.ts
@@ -1,32 +1,11 @@
-import { ContainerNode, TextNode } from "@/components/ui/rich-editor/types";
-
-function id() {
-  return Math.random().toString(36).slice(2, 10);
-}
-
-function p(text = ""): TextNode {
-  return { id: id(), type: "p", content: text, attributes: {} };
-}
-function h2(text: string): TextNode {
-  return { id: id(), type: "h2", content: text, attributes: {} };
-}
-function li(text: string): TextNode {
-  return { id: id(), type: "li", content: text, attributes: {} };
-}
-function hr(): TextNode {
-  return { id: id(), type: "hr", content: "", attributes: {} };
-}
-
-function container(children: (TextNode | ContainerNode)[]): ContainerNode {
-  return { id: id(), type: "container", children, attributes: {} };
-}
+// Note templates. `content` is a markdown string applied into the editor.
 
 export interface NoteTemplate {
   id: string;
   label: string;
   icon: string;
   description: string;
-  content: ContainerNode;
+  content: string;
   defaultTitle: string;
 }
 
@@ -37,7 +16,7 @@ export const NOTE_TEMPLATES: NoteTemplate[] = [
     icon: "📄",
     description: "Start from scratch",
     defaultTitle: "Untitled",
-    content: container([p(), p(), p()]),
+    content: "",
   },
   {
     id: "meeting",
@@ -45,16 +24,19 @@ export const NOTE_TEMPLATES: NoteTemplate[] = [
     icon: "🤝",
     description: "Attendees, agenda, action items",
     defaultTitle: "Meeting Notes",
-    content: container([
-      h2("Attendees"),
-      li(""),
-      h2("Agenda"),
-      li(""),
-      h2("Notes"),
-      p(""),
-      h2("Action Items"),
-      li(""),
-    ]),
+    content: [
+      "## Attendees",
+      "- ",
+      "",
+      "## Agenda",
+      "- ",
+      "",
+      "## Notes",
+      "",
+      "## Action Items",
+      "- ",
+      "",
+    ].join("\n"),
   },
   {
     id: "daily",
@@ -62,16 +44,18 @@ export const NOTE_TEMPLATES: NoteTemplate[] = [
     icon: "📅",
     description: "Goals, notes, reflection",
     defaultTitle: "Daily Journal",
-    content: container([
-      h2("Today's Goals"),
-      li(""),
-      li(""),
-      h2("Notes"),
-      p(""),
-      hr(),
-      h2("Reflection"),
-      p(""),
-    ]),
+    content: [
+      "## Today's Goals",
+      "- ",
+      "- ",
+      "",
+      "## Notes",
+      "",
+      "---",
+      "",
+      "## Reflection",
+      "",
+    ].join("\n"),
   },
   {
     id: "bug",
@@ -79,18 +63,19 @@ export const NOTE_TEMPLATES: NoteTemplate[] = [
     icon: "🐛",
     description: "Summary, steps, expected/actual",
     defaultTitle: "Bug Report",
-    content: container([
-      h2("Summary"),
-      p(""),
-      h2("Steps to Reproduce"),
-      li(""),
-      li(""),
-      h2("Expected Behaviour"),
-      p(""),
-      h2("Actual Behaviour"),
-      p(""),
-      h2("Fix / Notes"),
-      p(""),
-    ]),
+    content: [
+      "## Summary",
+      "",
+      "## Steps to Reproduce",
+      "1. ",
+      "2. ",
+      "",
+      "## Expected Behaviour",
+      "",
+      "## Actual Behaviour",
+      "",
+      "## Fix / Notes",
+      "",
+    ].join("\n"),
   },
 ];
diff --git a/apps/web/src/components/api-client/api-client.tsx b/apps/web/src/components/api-client/api-client.tsx
index c0c074c5..159a8f12 100644
--- a/apps/web/src/components/api-client/api-client.tsx
+++ b/apps/web/src/components/api-client/api-client.tsx
@@ -23,7 +23,6 @@ import { recordMetric, recordLog } from "@/lib/observability/metrics"
 import { OfflineIndicator } from "./offline-indicator"
 import { putCachedResponse, getCachedResponse } from "@/lib/cache/response-cache"
 import { registerApiClientServiceWorker } from "@/lib/sw/register-api-client-sw"
-import { P2pSyncDialog } from "./p2p-sync-dialog"
 import { FuzzRunDialog } from "./fuzz-run-dialog"
 import { RecorderDialog } from "./recorder-dialog"
 import { listenForExtensionImports, capturedToTab } from "@/lib/extension/listen"
@@ -51,7 +50,7 @@ import { useIsMobile } from "@/components/hooks/use-mobile"
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 import { Button } from "@/components/ui/button"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { FolderOpen, PanelRight, MoreVertical, Cookie, Download, Gauge } from "lucide-react"
+import { FolderOpen, PanelRight, MoreVertical, MoreHorizontal, Cookie, Download, Gauge, Shuffle, Puzzle, Activity, Server, Radio, Keyboard } from "lucide-react"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from "@/components/ui/dropdown-menu"
 import { IconCode, IconSettings } from "@tabler/icons-react"
 import { cn } from "@/lib/utils"
@@ -147,7 +146,6 @@ function ApiClientInner() {
     const [publicMocksOpen, setPublicMocksOpen] = React.useState(false)
     const [pluginsOpen, setPluginsOpen] = React.useState(false)
     const [metricsOpen, setMetricsOpen] = React.useState(false)
-    const [p2pOpen, setP2pOpen] = React.useState(false)
     const [fuzzOpen, setFuzzOpen] = React.useState(false)
     const [recorderOpen, setRecorderOpen] = React.useState(false)
 
@@ -158,8 +156,8 @@ function ApiClientInner() {
     React.useEffect(() => listenForExtensionImports((captured) => {
         const tab = createNewTab()
         appendTab({ ...tab, name: API_CLIENT_IMPORTED_TAB_NAME, ...capturedToTab(captured) })
-        toast.success(`Imported ${captured.method} ${captured.url} from extension`)
-    }), [appendTab])
+        toast.success(t("toolbar.extensionImported", { method: captured.method, url: captured.url }))
+    }), [appendTab, t])
 
     /** Rehydrate the active tab's response from IndexedDB if missing.
      *  Bodies are stripped from localStorage tabs to dodge the 5MB quota; this
@@ -1138,7 +1136,8 @@ function ApiClientInner() {
                                             {t("toolbar.importCurl")}
                                         </DropdownMenuItem>
                                         <DropdownMenuItem onSelect={() => setImportOpen(true)}>
-                                            Import collection
+                                            <Download className="h-4 w-4 mr-2" />
+                                            {t("toolbar.importCollection")}
                                         </DropdownMenuItem>
                                         <DropdownMenuSeparator />
                                         <DropdownMenuItem onSelect={() => setEnvMgrOpen(true)}>
@@ -1147,31 +1146,36 @@ function ApiClientInner() {
                                         </DropdownMenuItem>
                                         <DropdownMenuItem onSelect={() => setCookieJarOpen(true)}>
                                             <Cookie className="h-4 w-4 mr-2" />
-                                            Cookies
+                                            {t("toolbar.cookies")}
                                         </DropdownMenuItem>
+                                        <DropdownMenuSeparator />
                                         <DropdownMenuItem onSelect={() => setPerfOpen(true)}>
                                             <Gauge className="h-4 w-4 mr-2" />
-                                            Perf run
+                                            {t("toolbar.perfRun")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onSelect={() => setFuzzOpen(true)}>
+                                            <Shuffle className="h-4 w-4 mr-2" />
+                                            {t("toolbar.fuzzRun")}
                                         </DropdownMenuItem>
                                         <DropdownMenuItem onSelect={() => setPublicMocksOpen(true)}>
-                                            Public mocks
+                                            <Server className="h-4 w-4 mr-2" />
+                                            {t("toolbar.publicMocks")}
                                         </DropdownMenuItem>
                                         <DropdownMenuItem onSelect={() => setPluginsOpen(true)}>
-                                            Plugins
+                                            <Puzzle className="h-4 w-4 mr-2" />
+                                            {t("toolbar.plugins")}
                                         </DropdownMenuItem>
                                         <DropdownMenuItem onSelect={() => setMetricsOpen(true)}>
-                                            Metrics
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem onSelect={() => setP2pOpen(true)}>
-                                            Peer sync (WebRTC)
-                                        </DropdownMenuItem>
-                                        <DropdownMenuItem onSelect={() => setFuzzOpen(true)}>
-                                            Fuzz run
+                                            <Activity className="h-4 w-4 mr-2" />
+                                            {t("toolbar.metrics")}
                                         </DropdownMenuItem>
                                         <DropdownMenuItem onSelect={() => setRecorderOpen(true)}>
-                                            Capture &amp; replay
+                                            <Radio className="h-4 w-4 mr-2" />
+                                            {t("toolbar.recorder")}
                                         </DropdownMenuItem>
+                                        <DropdownMenuSeparator />
                                         <DropdownMenuItem onSelect={() => setHelpOpen(true)}>
+                                            <Keyboard className="h-4 w-4 mr-2" />
                                             {t("toolbar.shortcuts")}
                                         </DropdownMenuItem>
                                     </DropdownMenuContent>
@@ -1238,39 +1242,54 @@ function ApiClientInner() {
                                     variant="ghost"
                                     size="icon"
                                     className="h-8 w-8"
-                                    title="Import collection (Postman / HAR)"
+                                    title={t("toolbar.importCollection")}
                                     onClick={() => setImportOpen(true)}
                                 >
                                     <Download className="h-4 w-4" />
                                 </Button>
-                                <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-8 w-8"
-                                    title="Performance run"
-                                    onClick={() => setPerfOpen(true)}
-                                >
-                                    <Gauge className="h-4 w-4" />
-                                </Button>
-                                <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-8 w-8"
-                                    title="Public mocks"
-                                    onClick={() => setPublicMocksOpen(true)}
-                                >
-                                    <span className="text-[10px] font-bold">M</span>
-                                </Button>
-                                <Button
-                                    variant="ghost"
-                                    size="icon"
-                                    className="h-8 w-8"
-                                    title="Cookie jar"
-                                    onClick={() => setCookieJarOpen(true)}
-                                >
-                                    <Cookie className="h-4 w-4" />
-                                </Button>
-                                <HelpShortcutsDialog />
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger asChild>
+                                        <Button variant="ghost" size="icon" className="h-8 w-8" title={t("toolbar.moreActions")} aria-label={t("toolbar.moreActions")}>
+                                            <MoreHorizontal className="h-4 w-4" />
+                                        </Button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent align="end">
+                                        <DropdownMenuItem onSelect={() => setCookieJarOpen(true)}>
+                                            <Cookie className="h-4 w-4 mr-2" />
+                                            {t("toolbar.cookies")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuSeparator />
+                                        <DropdownMenuItem onSelect={() => setPerfOpen(true)}>
+                                            <Gauge className="h-4 w-4 mr-2" />
+                                            {t("toolbar.perfRun")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onSelect={() => setFuzzOpen(true)}>
+                                            <Shuffle className="h-4 w-4 mr-2" />
+                                            {t("toolbar.fuzzRun")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onSelect={() => setPublicMocksOpen(true)}>
+                                            <Server className="h-4 w-4 mr-2" />
+                                            {t("toolbar.publicMocks")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onSelect={() => setPluginsOpen(true)}>
+                                            <Puzzle className="h-4 w-4 mr-2" />
+                                            {t("toolbar.plugins")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onSelect={() => setMetricsOpen(true)}>
+                                            <Activity className="h-4 w-4 mr-2" />
+                                            {t("toolbar.metrics")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onSelect={() => setRecorderOpen(true)}>
+                                            <Radio className="h-4 w-4 mr-2" />
+                                            {t("toolbar.recorder")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuSeparator />
+                                        <DropdownMenuItem onSelect={() => setHelpOpen(true)}>
+                                            <Keyboard className="h-4 w-4 mr-2" />
+                                            {t("toolbar.shortcuts")}
+                                        </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
                                 <div className="h-6 w-px bg-border/50 mx-1" />
                                 <OfflineIndicator />
                                 <Button
@@ -1298,7 +1317,6 @@ function ApiClientInner() {
                         {isMobile && (
                             <>
                                 <ImportCurlDialog onImport={handleImportCurl} open={importCurlOpen} onOpenChange={setImportCurlOpen} />
-                                <HelpShortcutsDialog open={helpOpen} onOpenChange={setHelpOpen} />
                                 <SaveRequestDialog
                                     collections={collections}
                                     onSave={handleSaveRequest}
@@ -1308,6 +1326,7 @@ function ApiClientInner() {
                                 />
                             </>
                         )}
+                        <HelpShortcutsDialog open={helpOpen} onOpenChange={setHelpOpen} />
                         <CookieJarDialog open={cookieJarOpen} onOpenChange={setCookieJarOpen} />
                         <ImportDialog open={importOpen} onOpenChange={setImportOpen} />
                         <SaveExampleDialog
@@ -1324,7 +1343,6 @@ function ApiClientInner() {
                         <PublicMocksDialog open={publicMocksOpen} onOpenChange={setPublicMocksOpen} />
                         <PluginsDialog open={pluginsOpen} onOpenChange={setPluginsOpen} />
                         <MetricsDialog open={metricsOpen} onOpenChange={setMetricsOpen} />
-                        <P2pSyncDialog open={p2pOpen} onOpenChange={setP2pOpen} />
                         <FuzzRunDialog open={fuzzOpen} onOpenChange={setFuzzOpen} tab={activeTab} />
                         <RecorderDialog open={recorderOpen} onOpenChange={setRecorderOpen} />
                     </div>
diff --git a/apps/web/src/components/api-client/generate-code.ts b/apps/web/src/components/api-client/generate-code.ts
index 47223f64..edad3894 100644
--- a/apps/web/src/components/api-client/generate-code.ts
+++ b/apps/web/src/components/api-client/generate-code.ts
@@ -75,6 +75,16 @@ export function generateCode(request: ApiRequestState, language: CodeLanguage):
         } else if (body.type === "form-data") {
             bodyCtx.type = "form-data"
             bodyCtx.formData = (body.formData ?? []).filter(item => item.active && item.key)
+        } else if (body.type === "graphql") {
+            // GraphQL travels as { query, variables } JSON — mirror the send pipeline.
+            let variables: unknown
+            const rawVars = (body.graphqlVariables ?? "").trim()
+            if (rawVars) {
+                try { variables = JSON.parse(rawVars) } catch { /* invalid variables: emit query only */ }
+            }
+            bodyCtx.type = "json"
+            bodyCtx.content = JSON.stringify(variables !== undefined ? { query: body.content, variables } : { query: body.content })
+            if (!hasContentType) headerObj["Content-Type"] = "application/json"
         } else {
             bodyCtx.type = "text"
             bodyCtx.content = body.content
diff --git a/apps/web/src/components/notes/NotionEditor.tsx b/apps/web/src/components/notes/NotionEditor.tsx
index f5e1a34b..2d0c8a5e 100644
--- a/apps/web/src/components/notes/NotionEditor.tsx
+++ b/apps/web/src/components/notes/NotionEditor.tsx
@@ -1,9 +1,8 @@
 import React, { useEffect, useState, useMemo, useCallback, useRef } from "react";
 import { useNotesData, useNotesUI, useNotesActions } from "@/app/app/notes/context/NotesContext";
-import { Editor, EditorProvider, createEmptyContent } from "@/components/ui/rich-editor";
-import { useDebounce, useDebouncedCallback } from "use-debounce";
+import { NoteMarkdownEditor } from "@/components/notes/markdown-editor/NoteMarkdownEditor";
+import { useDebouncedCallback } from "use-debounce";
 import { Input } from "@/components/ui/input";
-import { ContainerNode, EditorState } from "@/components/ui/rich-editor/types";
 import { storage } from "@/database/firebase";
 import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
 import useAuth from "@/utils/useAuth";
@@ -23,20 +22,19 @@ import {
     Loader2,
     ChevronRight,
 } from "lucide-react";
-import { serializeToHtml } from "@/components/ui/rich-editor/utils/serialize-to-html";
+import { marked } from "marked";
 import { cn } from "@/lib/utils";
 import { TemplatePickerDialog } from "./template-picker-dialog";
 import { type NoteTemplate } from "@/app/app/notes/utils/noteTemplates";
-import { contentToMarkdown, countWords, extractPlainText, readingTimeMinutes } from "@/app/app/notes/utils/noteContentUtils";
+import {
+    contentToMarkdown,
+    noteContentToMarkdown,
+    countWords,
+    extractPlainText,
+    readingTimeMinutes,
+} from "@/app/app/notes/utils/noteContentUtils";
 import type { Note } from "@/app/app/notes/types/Note";
 
-function sanitizeFileName(name: string): string {
-    return name
-        .replace(/[^a-zA-Z0-9._-]/g, "_")
-        .replace(/_{2,}/g, "_")
-        .slice(0, 200);
-}
-
 export default function NotionEditor() {
     const tEditor = useTranslations("Notes.editor");
     const tCtx = useTranslations("Notes.context");
@@ -51,13 +49,24 @@ export default function NotionEditor() {
     const [saveState, setSaveState] = useState<"idle" | "saving" | "saved">("idle");
     const [lastSavedAt, setLastSavedAt] = useState<Date | null>(null);
     const [templateDialogOpen, setTemplateDialogOpen] = useState(false);
-    const [currentContent, setCurrentContent] = useState<ContainerNode | null>(null);
+    // Latest editor markdown, kept in a ref so typing doesn't re-render the
+    // toolbar/breadcrumb/tags on every keystroke. `wordCountSource` is a
+    // debounced snapshot that DOES drive a render (word count / read time).
+    const latestMarkdownRef = useRef<string | null>(null);
+    const [wordCountSource, setWordCountSource] = useState<string | null>(null);
+    const pushWordCount = useDebouncedCallback(
+        (md: string) => setWordCountSource(md),
+        500,
+    );
     const [editorKey, setEditorKey] = useState(0);
     const isDirtyRef = useRef(false);
     const [tagInput, setTagInput] = useState("");
     const [tags, setTags] = useState<string[]>([]);
-    // Holds template content until EditorProvider mounts with it; cleared on note switch
-    const [pendingTemplateContent, setPendingTemplateContent] = useState<ContainerNode | null>(null);
+    // Holds template markdown (scoped to the note it was applied to) until the
+    // editor remounts with it; cleared on note switch. Scoping prevents a
+    // just-applied template from leaking into a different note during a switch.
+    const [pendingTemplateContent, setPendingTemplateContent] =
+        useState<{ noteId: string; markdown: string } | null>(null);
 
     useEffect(() => {
         setIsMounted(true);
@@ -71,6 +80,8 @@ export default function NotionEditor() {
             setTags(activeNote.tags ?? []);
             setLastSyncedNoteId(activeNote.id);
             setPendingTemplateContent(null);
+            latestMarkdownRef.current = null;
+            setWordCountSource(null);
         }
     }, [activeNoteId, activeNote, lastSyncedNoteId]);
 
@@ -80,23 +91,11 @@ export default function NotionEditor() {
         return () => clearTimeout(timeout);
     }, [saveState]);
 
-    const stripUndefined = (obj: any): any => {
-        if (obj === null || obj === undefined) return null;
-        if (typeof obj !== 'object') return obj;
-        if (Array.isArray(obj)) return obj.map(stripUndefined);
-        const out: any = {};
-        for (const key in obj) {
-            const value = obj[key];
-            if (value !== undefined) out[key] = stripUndefined(value);
-        }
-        return out;
-    };
-
-    const handleUpdate = useCallback(async (id: string, updates: any) => {
+    const handleUpdate = useCallback(async (id: string, updates: Partial<Note>) => {
         if (id) {
             setSaveState("saving");
             isDirtyRef.current = false;
-            await updateNote(id, stripUndefined(updates));
+            await updateNote(id, updates);
             setLastSavedAt(new Date());
             setSaveState("saved");
         }
@@ -113,13 +112,13 @@ export default function NotionEditor() {
         }
     };
 
-    const handleEditorChange = (state: EditorState) => {
-        const container = state.history[state.historyIndex];
-        setCurrentContent(container);
+    const handleEditorChange = (markdown: string) => {
+        latestMarkdownRef.current = markdown;
+        pushWordCount(markdown);
         if (activeNoteId) {
             isDirtyRef.current = true;
             setSaveState("saving");
-            debouncedUpdate(activeNoteId, { content: container });
+            debouncedUpdate(activeNoteId, { content: markdown });
         }
     };
 
@@ -134,7 +133,7 @@ export default function NotionEditor() {
             const { isSyncEnabled } = await import("@/lib/desktop/sync-engine");
             const allowed = hasRemoteSession() && (await isSyncEnabled());
             if (user.uid === "desktop-local" || !allowed) {
-                throw new Error("Turn on Cloud Sync to store note images. Text notes stay local.");
+                throw new Error(tCtx("cloudSyncImageError"));
             }
         }
         const timestamp = Date.now();
@@ -144,24 +143,15 @@ export default function NotionEditor() {
         return getDownloadURL(storageRef);
     };
 
-    const initialContent = useMemo(() => {
-        // Template was just applied — use it directly (activeNote.content not updated yet)
-        if (pendingTemplateContent) return pendingTemplateContent;
-        if (activeNote && activeNote.content) {
-            const content = activeNote.content as any;
-            if (content.type === 'container' && Array.isArray(content.children)) {
-                return content as ContainerNode;
-            }
+    const initialMarkdown = useMemo(() => {
+        // A template applied to THIS note takes precedence (activeNote.content
+        // isn't updated until the debounced save round-trips).
+        if (pendingTemplateContent?.noteId === activeNoteId) {
+            return pendingTemplateContent.markdown;
         }
-        return {
-            id: "root",
-            type: "container",
-            children: createEmptyContent(),
-            attributes: {},
-        } as ContainerNode;
-        // editorKey in deps so memo re-runs when template forces remount
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeNoteId, editorKey]);
+        // Normalizes both new (string) and legacy (tree) content to markdown.
+        return noteContentToMarkdown(activeNote?.content);
+    }, [activeNoteId, editorKey, activeNote?.content, pendingTemplateContent]);
 
     const activePath = useMemo<Note[]>(() => {
         if (!activeNote) return [];
@@ -198,18 +188,17 @@ export default function NotionEditor() {
         if (activeNoteId) debouncedUpdate(activeNoteId, { tags: next });
     }, [tags, activeNoteId, debouncedUpdate]);
 
-    // Defer word-count compute: heavy extractPlainText runs at most every 500ms
+    // Defer word-count compute: the heavy extract runs at most every 500ms
     // instead of every keystroke.
-    const [debouncedContent] = useDebounce(currentContent, 500);
     const { wordCount, readTime } = useMemo(() => {
-        const src = debouncedContent ?? (activeNote?.content as ContainerNode | undefined);
+        const src = wordCountSource ?? activeNote?.content;
         const text = extractPlainText(src);
         const wc = countWords(text);
         return { wordCount: wc, readTime: readingTimeMinutes(wc) };
-    }, [debouncedContent, activeNote?.content]);
+    }, [wordCountSource, activeNote?.content]);
 
     const handleExportMarkdown = useCallback(() => {
-        const src = currentContent ?? (activeNote?.content as ContainerNode | undefined);
+        const src = latestMarkdownRef.current ?? activeNote?.content;
         const md = contentToMarkdown(title || "Untitled", src);
         const blob = new Blob([md], { type: "text/markdown" });
         const url = URL.createObjectURL(blob);
@@ -218,12 +207,12 @@ export default function NotionEditor() {
         a.download = `${(title || "note").replace(/\s+/g, "-")}.md`;
         a.click();
         URL.revokeObjectURL(url);
-    }, [currentContent, activeNote?.content, title]);
+    }, [activeNote?.content, title]);
 
     const handleExportHtml = useCallback(() => {
-        const src = currentContent ?? (activeNote?.content as ContainerNode | undefined);
-        if (!src) return;
-        const bodyHtml = serializeToHtml(src, { wrapperClass: "note-content max-w-3xl mx-auto px-6 py-8 font-sans" });
+        const src = latestMarkdownRef.current ?? activeNote?.content;
+        const body = noteContentToMarkdown(src);
+        const bodyHtml = marked.parse(body, { async: false }) as string;
         const html = `<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="UTF-8" />\n<title>${title || "Note"}</title>\n</head>\n<body>\n<h1 style="font-size:2rem;font-weight:bold;margin-bottom:1rem">${title || "Untitled"}</h1>\n${bodyHtml}</body>\n</html>`;
         const blob = new Blob([html], { type: "text/html" });
         const url = URL.createObjectURL(blob);
@@ -232,17 +221,20 @@ export default function NotionEditor() {
         a.download = `${(title || "note").replace(/\s+/g, "-")}.html`;
         a.click();
         URL.revokeObjectURL(url);
-    }, [currentContent, activeNote?.content, title]);
+    }, [activeNote?.content, title]);
 
     const handleApplyTemplate = useCallback((tpl: NoteTemplate) => {
         if (!activeNoteId) return;
-        const newContent = { ...tpl.content, id: "root" } as ContainerNode;
         setSaveState("saving");
-        debouncedUpdate(activeNoteId, { content: newContent, title: tpl.defaultTitle });
+        debouncedUpdate(activeNoteId, { content: tpl.content, title: tpl.defaultTitle });
         setTitle(tpl.defaultTitle);
-        setCurrentContent(newContent);
-        setPendingTemplateContent(newContent); // initialContent reads this on remount
-        setLastSyncedNoteId(null);
+        latestMarkdownRef.current = tpl.content;
+        setWordCountSource(tpl.content);
+        // Scope the pending template to this note; initialMarkdown reads it on the
+        // remount forced by bumping editorKey. We deliberately do NOT reset
+        // lastSyncedNoteId here — doing so would re-fire the note-sync effect and
+        // clobber the title/content we just set.
+        setPendingTemplateContent({ noteId: activeNoteId, markdown: tpl.content });
         setEditorKey(k => k + 1);
     }, [activeNoteId, debouncedUpdate]);
 
@@ -283,10 +275,10 @@ export default function NotionEditor() {
                     </div>
                     <div className="flex flex-wrap items-center justify-center gap-2 text-[11px] text-muted-foreground">
                         <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono">⌘K</kbd>
-                        <span>to search</span>
+                        <span>{tEditor("searchHint")}</span>
                         <span className="text-muted-foreground/40">·</span>
                         <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono">⌘⇧F</kbd>
-                        <span>focus mode</span>
+                        <span>{tEditor("focusHint")}</span>
                     </div>
                 </div>
             </div>
@@ -303,7 +295,7 @@ export default function NotionEditor() {
             )}>
                 {/* Breadcrumb */}
                 {!focusMode && activePath.length > 1 && (
-                    <nav className="mb-2 flex items-center gap-1 text-xs text-muted-foreground overflow-x-auto no-scrollbar" aria-label="Note path">
+                    <nav className="mb-2 flex items-center gap-1 text-xs text-muted-foreground overflow-x-auto no-scrollbar" aria-label={tEditor("notePath")}>
                         {activePath.map((node, index) => {
                             const isLast = index === activePath.length - 1;
                             return (
@@ -342,15 +334,15 @@ export default function NotionEditor() {
                         />
                         <span>
                             {saveState === "saving"
-                                ? "Saving…"
+                                ? tEditor("saving")
                                 : saveState === "saved" && lastSavedAt
-                                    ? `Saved ${lastSavedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
-                                    : "Ready"}
+                                    ? tEditor("saved", { time: lastSavedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) })
+                                    : tEditor("ready")}
                         </span>
                     </span>
                     {wordCount > 0 && (
-                        <span aria-label={`${wordCount} words, ${readTime} minute read`}>
-                            {wordCount} words · {readTime} min read
+                        <span aria-label={tEditor("stats", { words: wordCount, read: readTime })}>
+                            {tEditor("stats", { words: wordCount, read: readTime })}
                         </span>
                     )}
 
@@ -362,10 +354,11 @@ export default function NotionEditor() {
                             size="sm"
                             className="h-7 text-xs gap-1.5 cursor-pointer"
                             onClick={() => setTemplateDialogOpen(true)}
-                            title="Apply template"
+                            title={tEditor("applyTemplate")}
+                            aria-label={tEditor("applyTemplate")}
                         >
                             <LayoutTemplate className="h-3.5 w-3.5" />
-                            <span className="hidden sm:inline">Template</span>
+                            <span className="hidden sm:inline">{tEditor("template")}</span>
                         </Button>
 
                         {/* Export markdown */}
@@ -375,10 +368,11 @@ export default function NotionEditor() {
                             size="sm"
                             className="h-7 text-xs gap-1.5 cursor-pointer"
                             onClick={handleExportMarkdown}
-                            title="Export as Markdown"
+                            title={tEditor("exportMd")}
+                            aria-label={tEditor("exportMd")}
                         >
                             <Download className="h-3.5 w-3.5" />
-                            <span className="hidden sm:inline">.md</span>
+                            <span className="hidden sm:inline">{tEditor("exportMdLabel")}</span>
                         </Button>
 
                         {/* Export HTML */}
@@ -388,10 +382,11 @@ export default function NotionEditor() {
                             size="sm"
                             className="h-7 text-xs gap-1.5 cursor-pointer"
                             onClick={handleExportHtml}
-                            title="Export as HTML"
+                            title={tEditor("exportHtml")}
+                            aria-label={tEditor("exportHtml")}
                         >
                             <FileCode className="h-3.5 w-3.5" />
-                            <span className="hidden sm:inline">.html</span>
+                            <span className="hidden sm:inline">{tEditor("exportHtmlLabel")}</span>
                         </Button>
 
                         {/* Focus mode */}
@@ -401,7 +396,9 @@ export default function NotionEditor() {
                             size="sm"
                             className="h-7 text-xs gap-1.5 cursor-pointer"
                             onClick={() => setFocusMode(!focusMode)}
-                            title={focusMode ? "Exit focus mode (⌘⇧F)" : "Focus mode (⌘⇧F)"}
+                            title={`${focusMode ? tEditor("exitFocusMode") : tEditor("focusMode")} (⌘⇧F)`}
+                            aria-label={focusMode ? tEditor("exitFocusMode") : tEditor("focusMode")}
+                            aria-pressed={focusMode}
                         >
                             {focusMode ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
                         </Button>
@@ -415,7 +412,7 @@ export default function NotionEditor() {
                             onClick={() => void saveNow()}
                         >
                             {saveState === "saved" ? <CheckCircle2 className="mr-1.5 h-3.5 w-3.5" /> : <Save className="mr-1.5 h-3.5 w-3.5" />}
-                            Save
+                            {tEditor("save")}
                         </Button>
                     </div>
                 </div>
@@ -423,8 +420,9 @@ export default function NotionEditor() {
                 <Input
                     value={title}
                     onChange={handleTitleChange}
-                    className="text-3xl md:text-4xl font-bold border-none shadow-none focus-visible:ring-0 px-0 placeholder:text-muted-foreground/50 h-auto bg-transparent"
+                    className="text-3xl md:text-4xl font-bold border-none shadow-none focus-visible:ring-0 focus-visible:border-b-2 focus-visible:border-primary/50 rounded-none px-0 placeholder:text-muted-foreground/50 h-auto bg-transparent"
                     placeholder={tEditor("titlePlaceholder")}
+                    aria-label={tEditor("titlePlaceholder")}
                 />
 
                 {/* Tags row */}
@@ -440,10 +438,10 @@ export default function NotionEditor() {
                                 <button
                                     type="button"
                                     onClick={() => removeTag(tag)}
-                                    className="hover:text-destructive ml-0.5"
-                                    aria-label={`Remove tag ${tag}`}
+                                    className="hover:text-destructive ml-0.5 p-0.5 cursor-pointer"
+                                    aria-label={tEditor("removeTag", { tag })}
                                 >
-                                    <X className="h-2.5 w-2.5" />
+                                    <X className="h-3 w-3" />
                                 </button>
                             </span>
                         ))}
@@ -460,7 +458,8 @@ export default function NotionEditor() {
                                     removeTag(tags[tags.length - 1]);
                                 }
                             }}
-                            placeholder={tags.length === 0 ? "Add tag…" : ""}
+                            placeholder={tags.length === 0 ? tEditor("addTag") : ""}
+                            aria-label={tEditor("addTag")}
                             className="text-[11px] bg-transparent outline-none text-muted-foreground placeholder:text-muted-foreground/40 min-w-[60px] max-w-[120px]"
                         />
                     </div>
@@ -468,22 +467,23 @@ export default function NotionEditor() {
             </div>
 
             <div className={cn(
-                "flex-1 overflow-y-auto px-4 md:px-8 mx-auto w-full pb-20",
+                // Horizontal insets are owned by the editor itself (see
+                // crepe-theme.css) so the slash/drag gutter isn't clipped here.
+                "flex-1 overflow-y-auto mx-auto w-full pb-20",
                 focusMode ? "max-w-3xl" : "max-w-6xl"
             )}>
                 {isContentLoading ? (
                     <div className="flex items-center justify-center py-20 text-muted-foreground gap-2">
                         <Loader2 className="h-4 w-4 animate-spin" />
-                        <span className="text-sm">Loading…</span>
+                        <span className="text-sm">{tEditor("loading")}</span>
                     </div>
                 ) : (
-                    <EditorProvider
+                    <NoteMarkdownEditor
                         key={`${activeNoteId}-${editorKey}`}
-                        initialContainer={initialContent}
+                        defaultValue={initialMarkdown}
                         onChange={handleEditorChange}
-                    >
-                        <Editor onUploadImage={handleUploadImage} />
-                    </EditorProvider>
+                        onUploadImage={handleUploadImage}
+                    />
                 )}
             </div>
 
@@ -495,3 +495,10 @@ export default function NotionEditor() {
         </div>
     );
 }
+
+function sanitizeFileName(name: string): string {
+    return name
+        .replace(/[^a-zA-Z0-9._-]/g, "_")
+        .replace(/_{2,}/g, "_")
+        .slice(0, 200);
+}
diff --git a/apps/web/src/components/notes/markdown-editor/NoteMarkdownEditor.tsx b/apps/web/src/components/notes/markdown-editor/NoteMarkdownEditor.tsx
new file mode 100644
index 00000000..9935baa7
--- /dev/null
+++ b/apps/web/src/components/notes/markdown-editor/NoteMarkdownEditor.tsx
@@ -0,0 +1,117 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { Crepe } from "@milkdown/crepe"
+
+import "@milkdown/crepe/theme/common/style.css"
+import "@milkdown/crepe/theme/nord.css"
+import "./crepe-theme.css"
+
+export interface NoteMarkdownEditorProps {
+    /** Initial markdown. The editor is uncontrolled after mount — change the
+     *  `key` (e.g. on note switch) to load different content. */
+    defaultValue?: string
+    readOnly?: boolean
+    placeholder?: string
+    /** Fires (debounced by the editor's own listener) with the full markdown
+     *  document on every change. */
+    onChange?: (markdown: string) => void
+    /** Upload a pasted/dropped/selected image and return its URL. */
+    onUploadImage?: (file: File) => Promise<string>
+}
+
+/**
+ * Markdown editor for Notes, built on Milkdown Crepe. Stores and emits plain
+ * markdown (what gets saved to `Note.content`).
+ *
+ * MUST be loaded with `dynamic(..., { ssr: false })` — Crepe/ProseMirror are
+ * DOM-only. (NotesPage already loads NotionEditor that way, so this is covered.)
+ */
+export function NoteMarkdownEditor({
+    defaultValue = "",
+    readOnly = false,
+    placeholder = "Write something, or press '/' for commands…",
+    onChange,
+    onUploadImage,
+}: NoteMarkdownEditorProps) {
+    const rootRef = useRef<HTMLDivElement>(null)
+    // Keep the latest callbacks reachable without re-creating the editor.
+    const onChangeRef = useRef(onChange)
+    const onUploadRef = useRef(onUploadImage)
+    useEffect(() => {
+        onChangeRef.current = onChange
+        onUploadRef.current = onUploadImage
+    })
+
+    useEffect(() => {
+        const root = rootRef.current
+        if (!root) return
+
+        let destroyed = false
+        let crepe: Crepe | null = null
+
+        const upload = async (file: File): Promise<string> => {
+            if (!onUploadRef.current) return ""
+            return onUploadRef.current(file)
+        }
+
+        crepe = new Crepe({
+            root,
+            defaultValue,
+            featureConfigs: {
+                [Crepe.Feature.Placeholder]: { text: placeholder },
+                // Slash menu's Advanced group: drop the "Image" entry but keep
+                // Code / Table / Math (empty objects retain their defaults).
+                // (Paste/drop image insertion via ImageBlock still works.)
+                [Crepe.Feature.BlockEdit]: {
+                    advancedGroup: {
+                        image: null,
+                        codeBlock: {},
+                        table: {},
+                        math: {},
+                    },
+                },
+                [Crepe.Feature.ImageBlock]: {
+                    onUpload: upload,
+                    blockOnUpload: upload,
+                    inlineOnUpload: upload,
+                },
+            },
+        })
+
+        crepe.on((api) => {
+            api.markdownUpdated((_ctx, markdown) => {
+                onChangeRef.current?.(markdown)
+            })
+        })
+
+        crepe
+            .create()
+            .then(() => {
+                if (destroyed) {
+                    void crepe?.destroy()
+                    return
+                }
+                crepe?.setReadonly(readOnly)
+            })
+            .catch((err) => {
+                console.error("[NoteMarkdownEditor] failed to create editor", err)
+            })
+
+        return () => {
+            destroyed = true
+            void crepe?.destroy()
+            crepe = null
+        }
+        // Create the editor exactly once per mount, capturing the initial
+        // `defaultValue`. Loading different content (note switch, template apply)
+        // is done by changing the React `key` so the component fully remounts —
+        // this avoids destroying/recreating the editor (and losing the cursor)
+        // every time the parent's saved content updates mid-edit.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    return <div ref={rootRef} className="note-markdown-editor" />
+}
+
+export default NoteMarkdownEditor
diff --git a/apps/web/src/components/notes/markdown-editor/crepe-theme.css b/apps/web/src/components/notes/markdown-editor/crepe-theme.css
new file mode 100644
index 00000000..856d927e
--- /dev/null
+++ b/apps/web/src/components/notes/markdown-editor/crepe-theme.css
@@ -0,0 +1,54 @@
+/* Dark-mode layer for the Crepe (nord) theme.
+ *
+ * The prebuilt nord theme scopes every color as a CSS variable under
+ * `.milkdown`. The app toggles dark mode with a `.dark` class on <html>
+ * (Tailwind darkMode: ["class"]), so we load nord (light) as the base and
+ * re-declare only the color variables under `.dark .milkdown` — values lifted
+ * from the nord-dark theme. This avoids shipping two conflicting full themes. */
+
+.dark .milkdown {
+    --crepe-color-background: #1b1c1d;
+    --crepe-color-on-background: #f8f9ff;
+    --crepe-color-surface: #111418;
+    --crepe-color-surface-low: #191c20;
+    --crepe-color-on-surface: #e1e2e8;
+    --crepe-color-on-surface-variant: #c3c6cf;
+    --crepe-color-outline: #8d9199;
+    --crepe-color-primary: #a1c9fd;
+    --crepe-color-secondary: #3c4858;
+    --crepe-color-on-secondary: #d7e3f8;
+    --crepe-color-inverse: #e1e2e8;
+    --crepe-color-on-inverse: #2e3135;
+    --crepe-color-inline-code: #ffb4ab;
+    --crepe-color-error: #ffb4ab;
+    --crepe-color-hover: #1d2024;
+    --crepe-color-selected: #32353a;
+    --crepe-color-inline-area: #111418;
+}
+
+/* Blend the editor into the surrounding Notes chrome and make it the
+ * positioning context for Crepe's floating toolbar / slash menu / block
+ * handles (they anchor to the nearest positioned ancestor). */
+.note-markdown-editor .milkdown {
+    position: relative;
+    background: transparent;
+}
+
+/* Crepe's ProseMirror ships with no content padding and expects the host to
+ * provide it. The left inset is a GUTTER: the drag handle and insert (+) button
+ * render there, and the slash menu anchors from it. Without it, text touches the
+ * edge and the handles get clipped by the parent's overflow-y scroll container.
+ * The editor owns its horizontal insets here (NotionEditor no longer adds any),
+ * so this is the single source of horizontal spacing. */
+.note-markdown-editor .milkdown .ProseMirror {
+    padding: 0.5rem 1rem 6rem 3rem;
+    min-height: 12rem;
+    outline: none;
+}
+
+@media (max-width: 640px) {
+    .note-markdown-editor .milkdown .ProseMirror {
+        padding-left: 1.75rem;
+        padding-right: 0.75rem;
+    }
+}
diff --git a/apps/web/src/components/ui/rich-editor/CoverImage.tsx b/apps/web/src/components/ui/rich-editor/CoverImage.tsx
deleted file mode 100644
index 072027fc..00000000
--- a/apps/web/src/components/ui/rich-editor/CoverImage.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState } from "react"
-import { ImageIcon, MoveVertical, Trash2, Upload, X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-import { EditorActions } from "."
-import { Button } from "../button"
-import { useEditorDispatch, useEditorState } from "./store/editor-store"
-
-interface CoverImageProps {
-  onUploadImage?: (file: File) => Promise<string>
-  readOnly?: boolean
-}
-
-export function CoverImage({
-  onUploadImage,
-  readOnly = false,
-}: CoverImageProps) {
-  const state = useEditorState()
-  const dispatch = useEditorDispatch()
-  const { coverImage } = state
-  const [isHovered, setIsHovered] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
-  const [isUploading, setIsUploading] = useState(false)
-  const [dragPosition, setDragPosition] = useState(coverImage?.position ?? 50)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  // Update drag position when coverImage changes
-  useEffect(() => {
-    if (coverImage?.position !== undefined) {
-      setDragPosition(coverImage.position)
-    }
-  }, [coverImage?.position])
-
-  const handleFileSelect = async (file: File) => {
-    if (!file.type.startsWith("image/")) {
-      console.warn("Selected file is not an image")
-      return
-    }
-
-    setIsUploading(true)
-
-    try {
-      let url: string
-
-      if (onUploadImage) {
-        // Use custom upload handler
-        url = await onUploadImage(file)
-      } else {
-        // Fallback to data URL
-        url = await new Promise((resolve, reject) => {
-          const reader = new FileReader()
-          reader.onload = () => resolve(reader.result as string)
-          reader.onerror = reject
-          reader.readAsDataURL(file)
-        })
-      }
-
-      dispatch(
-        EditorActions.setCoverImage({
-          url,
-          alt: file.name,
-          position: 50,
-        })
-      )
-    } catch (error) {
-      console.error("Failed to upload cover image:", error)
-    } finally {
-      setIsUploading(false)
-    }
-  }
-
-  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) {
-      handleFileSelect(file)
-    }
-  }
-
-  const handleDrop = async (e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    const file = e.dataTransfer.files?.[0]
-    if (file) {
-      await handleFileSelect(file)
-    }
-  }
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }
-
-  const handleRemove = () => {
-    dispatch(EditorActions.removeCoverImage())
-  }
-
-  const handlePositionDragStart = (e: React.MouseEvent) => {
-    e.preventDefault()
-    setIsDragging(true)
-  }
-
-  const handlePositionDrag = (e: MouseEvent) => {
-    if (!isDragging || !containerRef.current) return
-
-    const rect = containerRef.current.getBoundingClientRect()
-    const y = e.clientY - rect.top
-    const percentage = Math.max(0, Math.min(100, (y / rect.height) * 100))
-
-    setDragPosition(percentage)
-    // Update state immediately so position is always saved
-    dispatch(EditorActions.updateCoverImagePosition(percentage))
-  }
-
-  const handlePositionDragEnd = () => {
-    if (isDragging) {
-      setIsDragging(false)
-      // Position is already saved in state during drag
-    }
-  }
-
-  useEffect(() => {
-    if (isDragging) {
-      window.addEventListener("mousemove", handlePositionDrag)
-      window.addEventListener("mouseup", handlePositionDragEnd)
-
-      return () => {
-        window.removeEventListener("mousemove", handlePositionDrag)
-        window.removeEventListener("mouseup", handlePositionDragEnd)
-      }
-    }
-  }, [isDragging, dragPosition])
-
-  const handleChangeImage = () => {
-    fileInputRef.current?.click()
-  }
-
-  // If no cover image, don't render anything
-  if (!coverImage) {
-    return null
-  }
-
-  // Show cover image with controls
-  return (
-    <div
-      ref={containerRef}
-      className="group absolute top-0 mb-8 h-[300px] w-full overflow-hidden rounded-lg lg:h-[420px]"
-      onMouseEnter={() => !readOnly && setIsHovered(true)}
-      onMouseLeave={() => !readOnly && setIsHovered(false)}
-    >
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/*"
-        className="hidden"
-        onChange={handleFileInputChange}
-      />
-
-      {/* Cover Image */}
-      <div className="absolute inset-0">
-        <img
-          src={coverImage.url}
-          alt={coverImage.alt || "Cover image"}
-          className="h-full w-full object-cover"
-          style={{
-            objectPosition: `center ${dragPosition}%`,
-          }}
-        />
-      </div>
-
-      {/* Overlay with controls */}
-      {!readOnly && (
-        <div
-          className={cn(
-            "absolute inset-0 flex items-end justify-end gap-2 bg-black/40 p-4 transition-opacity duration-200",
-            isHovered || isDragging ? "opacity-100" : "opacity-0"
-          )}
-        >
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={handleChangeImage}
-            className="bg-background/90 hover:bg-background gap-2"
-          >
-            <Upload className="h-4 w-4" />
-            Change
-          </Button>
-
-          <Button
-            variant="secondary"
-            size="sm"
-            onMouseDown={handlePositionDragStart}
-            className={cn(
-              "bg-background/90 hover:bg-background cursor-move gap-2",
-              isDragging && "bg-primary text-primary-foreground"
-            )}
-          >
-            <MoveVertical className="h-4 w-4" />
-            Reposition
-          </Button>
-
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={handleRemove}
-            className="bg-background/90 hover:bg-destructive hover:text-destructive-foreground gap-2"
-          >
-            <Trash2 className="h-4 w-4" />
-            Remove
-          </Button>
-        </div>
-      )}
-
-      {/* Dragging indicator */}
-      {isDragging && (
-        <div
-          className="bg-primary pointer-events-none absolute right-0 left-0 z-50 h-0.5"
-          style={{ top: `${dragPosition}%` }}
-        >
-          <div className="bg-primary text-primary-foreground absolute -top-3 left-1/2 -translate-x-1/2 rounded px-2 py-1 text-xs">
-            {Math.round(dragPosition)}%
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/ElementSelector.tsx b/apps/web/src/components/ui/rich-editor/ElementSelector.tsx
deleted file mode 100644
index 8f53bd41..00000000
--- a/apps/web/src/components/ui/rich-editor/ElementSelector.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-"use client"
-
-import React, { useMemo } from "react"
-import { useTranslations } from "next-intl"
-import {
-  Code,
-  Heading1,
-  Heading2,
-  Heading3,
-  List,
-  ListOrdered,
-  Quote,
-  Type,
-} from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../select"
-import {
-  ELEMENT_OPTIONS,
-  type ElementOption,
-  type ElementType,
-} from "./elements"
-
-// Icon mapping
-const iconMap: Record<string, React.ReactNode> = {
-  Type: <Type className="h-4 w-4" />,
-  Heading1: <Heading1 className="h-4 w-4" />,
-  Heading2: <Heading2 className="h-4 w-4" />,
-  Heading3: <Heading3 className="h-4 w-4" />,
-  Code: <Code className="h-4 w-4" />,
-  Quote: <Quote className="h-4 w-4" />,
-  List: <List className="h-4 w-4" />,
-  ListOrdered: <ListOrdered className="h-4 w-4" />,
-}
-
-// Helper to get icon with custom size
-const getIcon = (iconName?: string, iconSize?: string) => {
-  if (!iconName) return null
-  const IconComponent = iconMap[iconName]
-  if (!IconComponent) return null
-
-  // Clone the icon with custom size if provided
-  if (iconSize && React.isValidElement(IconComponent)) {
-    return React.cloneElement(IconComponent, { className: iconSize } as any)
-  }
-  return IconComponent
-}
-
-interface ElementSelectorProps {
-  value: ElementType | null
-  onValueChange: (value: ElementType) => void
-  elements?: ElementOption[]
-  variant?: "default" | "compact" | "icon-only"
-  className?: string
-  disabled?: boolean
-  showDescription?: boolean
-  showIcon?: boolean
-}
-
-export function ElementSelector({
-  value,
-  onValueChange,
-  elements = ELEMENT_OPTIONS,
-  variant = "default",
-  className,
-  disabled = false,
-  showDescription = true,
-  showIcon = true,
-}: ElementSelectorProps) {
-  const tCmd = useTranslations("RichEditor.command")
-
-  const localizedElements = useMemo(
-    () =>
-      elements.map((el) => ({
-        ...el,
-        label: tCmd(`${el.value}.label`),
-        description: el.description
-          ? tCmd(`${el.value}.description`)
-          : undefined,
-      })),
-    [elements, tCmd]
-  )
-
-  // Get the current element option
-  const currentElement =
-    localizedElements.find((el) => el.value === value) ||
-    localizedElements[0]
-
-  // Variant-specific styling
-  const triggerClassName = cn(
-    "transition-colors",
-    variant === "compact" &&
-      "h-8 min-w-[90px] border-0 bg-transparent hover:bg-accent/50 focus:ring-0 text-xs rounded-md px-2 gap-1.5",
-    variant === "icon-only" &&
-      "h-9 w-9 border-0 bg-transparent hover:bg-accent/50 focus:ring-0 p-0",
-    variant === "default" && "min-w-[140px]",
-    className
-  )
-
-  return (
-    <Select
-      value={value || "p"}
-      onValueChange={onValueChange}
-      disabled={disabled}
-    >
-      <SelectTrigger className={triggerClassName}>
-        <SelectValue>
-          {variant === "icon-only" ? (
-            <div className="flex items-center justify-center">
-              {getIcon(currentElement.icon, currentElement.iconSize)}
-            </div>
-          ) : (
-            <div className="flex items-center gap-2">
-              {showIcon &&
-                getIcon(currentElement.icon, currentElement.iconSize)}
-              <span
-                className={cn(
-                  "font-normal",
-                  variant === "compact" ? "text-xs" : "text-sm"
-                )}
-              >
-                {currentElement.label}
-              </span>
-            </div>
-          )}
-        </SelectValue>
-      </SelectTrigger>
-      <SelectContent>
-        {localizedElements.map((element) => (
-          <SelectItem
-            key={element.value}
-            value={element.value}
-            className={cn("cursor-pointer", showDescription && "py-2")}
-          >
-            <div className="flex w-full items-start gap-2">
-              {showIcon && (
-                <div className="text-muted-foreground mt-0.5">
-                  {getIcon(element.icon, element.iconSize)}
-                </div>
-              )}
-              <div className="min-w-0 flex-1">
-                <div className="flex items-center justify-between gap-2">
-                  <span className="font-medium">{element.label}</span>
-                  {element.shortcut && (
-                    <span className="text-muted-foreground font-mono text-xs">
-                      {element.shortcut}
-                    </span>
-                  )}
-                </div>
-                {showDescription && element.description && (
-                  <p className="text-muted-foreground mt-0.5 text-xs">
-                    {element.description}
-                  </p>
-                )}
-              </div>
-            </div>
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  )
-}
-
-// Re-export for convenience
-export { ELEMENT_OPTIONS }
-export type { ElementType, ElementOption }
diff --git a/apps/web/src/components/ui/rich-editor/ExportFloatingButton.tsx b/apps/web/src/components/ui/rich-editor/ExportFloatingButton.tsx
deleted file mode 100644
index 800e1c6a..00000000
--- a/apps/web/src/components/ui/rich-editor/ExportFloatingButton.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-import {
-  Check,
-  Code2,
-  Copy,
-  Download,
-  Eye,
-  FileJson,
-  Sparkles,
-} from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-import { Button } from "../button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "../dialog"
-import { Label } from "../label"
-import { Switch } from "../switch"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs"
-import { type ContainerNode } from "./types"
-import { serializeToHtml } from "./utils/serialize-to-html"
-import { useTranslations } from "next-intl"
-
-interface ExportFloatingButtonProps {
-  container: ContainerNode
-  onCopyHtml: () => void
-  onCopyJson: () => void
-  copiedHtml: boolean
-  copiedJson: boolean
-  enhanceSpaces: boolean
-  onEnhanceSpacesChange: (checked: boolean) => void
-}
-
-export function ExportFloatingButton({
-  container,
-  onCopyHtml,
-  onCopyJson,
-  copiedHtml,
-  copiedJson,
-  enhanceSpaces,
-  onEnhanceSpacesChange,
-}: ExportFloatingButtonProps) {
-  const t = useTranslations("RichEditor.export")
-  const [isOpen, setIsOpen] = useState(false)
-  const [isHovered, setIsHovered] = useState(false)
-
-  return (
-    <>
-      {/* Floating Button */}
-      <div className="fixed right-6 bottom-6 z-50">
-        <Button
-          onClick={() => setIsOpen(true)}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-          aria-label={t("fabAria")}
-          className={cn(
-            "h-14 w-14 rounded-full shadow-2xl transition-all duration-300 ease-out",
-            "from-primary via-primary to-primary/80 bg-gradient-to-br",
-            "hover:shadow-primary/50 hover:scale-110",
-            "border-primary/20 border-2",
-            "group relative overflow-hidden"
-          )}
-          size="icon"
-        >
-          {/* Animated background gradient */}
-          <div
-            className={cn(
-              "from-primary/0 via-primary-foreground/10 to-primary-foreground/20 absolute inset-0 bg-gradient-to-br",
-              "transition-opacity duration-300",
-              isHovered ? "opacity-100" : "opacity-0"
-            )}
-          />
-
-          {/* Icon with sparkle effect */}
-          <div className="relative">
-            <Code2 className="h-6 w-6 transition-transform duration-300 group-hover:rotate-12" />
-          </div>
-
-          {/* Ripple effect on hover */}
-          <span
-            className={cn(
-              "bg-primary-foreground/20 absolute inset-0 rounded-full",
-              "transition-transform duration-700",
-              isHovered ? "scale-150 opacity-0" : "scale-0 opacity-100"
-            )}
-          />
-        </Button>
-      </div>
-
-      {/* Export Dialog */}
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent className="flex max-h-[90vh] max-w-[90vw] min-w-[90vw] flex-col overflow-hidden">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <Download className="h-5 w-5" />
-              {t("title")}
-            </DialogTitle>
-            <DialogDescription>
-              {t("description")}
-            </DialogDescription>
-          </DialogHeader>
-
-          <Tabs
-            defaultValue="preview"
-            className="flex flex-1 flex-col overflow-hidden"
-          >
-            <TabsList className="grid w-full grid-cols-3">
-              <TabsTrigger value="preview" className="gap-2">
-                <Eye className="h-4 w-4" />
-                {t("preview")}
-              </TabsTrigger>
-              <TabsTrigger value="html" className="gap-2">
-                <Code2 className="h-4 w-4" />
-                {t("html")}
-              </TabsTrigger>
-              <TabsTrigger value="json" className="gap-2">
-                <FileJson className="h-4 w-4" />
-                {t("json")}
-              </TabsTrigger>
-            </TabsList>
-
-            {/* Enhance Spaces Toggle */}
-            <div className="mt-4 flex items-center justify-between px-1">
-              <p className="text-muted-foreground text-sm">{t("previewOptions")}</p>
-              <div className="flex items-center gap-2">
-                <Label
-                  htmlFor="enhance-spaces"
-                  className="cursor-pointer text-sm"
-                >
-                  {t("enhanceSpaces")}
-                </Label>
-                <Switch
-                  id="enhance-spaces"
-                  checked={enhanceSpaces}
-                  onCheckedChange={onEnhanceSpacesChange}
-                />
-              </div>
-            </div>
-
-            {/* Preview Tab */}
-            <TabsContent
-              value="preview"
-              className="mt-4 flex flex-1 flex-col overflow-hidden"
-            >
-              <div className="mb-2 flex items-center justify-between">
-                <p className="text-muted-foreground text-sm">
-                  {t("livePreview")}
-                </p>
-              </div>
-              <div
-                className="bg-background flex-1 overflow-auto rounded-lg border p-6"
-                dangerouslySetInnerHTML={{
-                  __html: enhanceSpaces
-                    ? `<div class="[&>*]:my-3 [&_*]:my-5">${serializeToHtml(
-                        container
-                      )}</div>`
-                    : serializeToHtml(container),
-                }}
-              />
-            </TabsContent>
-
-            {/* HTML Tab */}
-            <TabsContent
-              value="html"
-              className="mt-4 flex flex-1 flex-col overflow-hidden"
-            >
-              <div className="mb-2 flex items-center justify-between">
-                <p className="text-muted-foreground text-sm">
-                  {t("htmlTailwind")}
-                </p>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={onCopyHtml}
-                  className="gap-2"
-                >
-                  {copiedHtml ? (
-                    <>
-                      <Check className="h-4 w-4" />
-                      {t("copied")}
-                    </>
-                  ) : (
-                    <>
-                      <Copy className="h-4 w-4" />
-                      {t("copyHtml")}
-                    </>
-                  )}
-                </Button>
-              </div>
-              <pre className="bg-secondary text-secondary-foreground flex-1 overflow-auto rounded-lg border p-4 text-xs">
-                {enhanceSpaces
-                  ? `<div class="[&>*]:my-3 [&_*]:my-5">\n${serializeToHtml(
-                      container
-                    )}\n</div>`
-                  : serializeToHtml(container)}
-              </pre>
-            </TabsContent>
-
-            {/* JSON Tab */}
-            <TabsContent
-              value="json"
-              className="mt-4 flex flex-1 flex-col overflow-hidden"
-            >
-              <div className="mb-2 flex items-center justify-between">
-                <p className="text-muted-foreground text-sm">
-                  {t("editorJson")}
-                </p>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={onCopyJson}
-                  className="gap-2"
-                >
-                  {copiedJson ? (
-                    <>
-                      <Check className="h-4 w-4" />
-                      {t("copied")}
-                    </>
-                  ) : (
-                    <>
-                      <Copy className="h-4 w-4" />
-                      {t("copyJson")}
-                    </>
-                  )}
-                </Button>
-              </div>
-              <pre className="bg-secondary text-secondary-foreground flex-1 overflow-auto rounded-lg border p-4 text-xs">
-                {JSON.stringify(container.children, null, 2)}
-              </pre>
-            </TabsContent>
-          </Tabs>
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/FreeImageBlock.tsx b/apps/web/src/components/ui/rich-editor/FreeImageBlock.tsx
deleted file mode 100644
index 92e0666b..00000000
--- a/apps/web/src/components/ui/rich-editor/FreeImageBlock.tsx
+++ /dev/null
@@ -1,340 +0,0 @@
-"use client"
-
-import React, { useEffect, useRef, useState } from "react"
-import { ImageIcon, Loader2, Move, X } from "lucide-react"
-
-import { EditorActions } from "."
-import { Button } from "../button"
-import { useEditorDispatch } from "./store/editor-store"
-import { TextNode } from "./types"
-
-interface FreeImageBlockProps {
-  node: TextNode
-  isActive: boolean
-  onClick: () => void
-  onDelete?: () => void
-  readOnly?: boolean
-}
-
-export function FreeImageBlock({
-  node,
-  isActive,
-  onClick,
-  onDelete,
-  readOnly = false,
-}: FreeImageBlockProps) {
-  const dispatch = useEditorDispatch()
-  const [imageError, setImageError] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
-  const [isResizing, setIsResizing] = useState(false)
-  const [resizeSide, setResizeSide] = useState<"left" | "right" | null>(null)
-  const [position, setPosition] = useState({
-    x: parseFloat((node.attributes?.styles as any)?.left || "100") || 0,
-    y: parseFloat((node.attributes?.styles as any)?.top || "100") || 0,
-  })
-  const [size, setSize] = useState<{ width: number; height: number | "auto" }>({
-    width: parseFloat((node.attributes?.styles as any)?.width || "400") || 400,
-    height: "auto",
-  })
-  const dragRef = useRef<HTMLDivElement>(null)
-  const startPosRef = useRef({ x: 0, y: 0, mouseX: 0, mouseY: 0 })
-  const startSizeRef = useRef({ width: 0, height: 0, mouseX: 0, mouseY: 0 })
-
-  const imageUrl = node.attributes?.src as string | undefined
-  const altText = node.attributes?.alt as string | undefined
-  const caption = node.content || ""
-  const isUploading =
-    node.attributes?.loading === "true" || node.attributes?.loading === true
-  const hasError =
-    node.attributes?.error === "true" || node.attributes?.error === true
-
-  const handleImageLoad = () => {
-    setImageError(false)
-  }
-
-  const handleImageError = () => {
-    setImageError(true)
-  }
-
-  const handleDragStart = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setIsDragging(true)
-    startPosRef.current = {
-      x: position.x,
-      y: position.y,
-      mouseX: e.clientX,
-      mouseY: e.clientY,
-    }
-  }
-
-  const handleResizeStart = (e: React.MouseEvent, side: "left" | "right") => {
-    e.preventDefault()
-    e.stopPropagation()
-    setIsResizing(true)
-    setResizeSide(side)
-    startSizeRef.current = {
-      width: size.width,
-      height: typeof size.height === "number" ? size.height : 0,
-      mouseX: e.clientX,
-      mouseY: e.clientY,
-    }
-    startPosRef.current = {
-      x: position.x,
-      y: position.y,
-      mouseX: e.clientX,
-      mouseY: e.clientY,
-    }
-  }
-
-  useEffect(() => {
-    if (!isDragging) return
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const deltaX = e.clientX - startPosRef.current.mouseX
-      const deltaY = e.clientY - startPosRef.current.mouseY
-
-      const newX = startPosRef.current.x + deltaX
-      const newY = startPosRef.current.y + deltaY
-
-      setPosition({ x: newX, y: newY })
-    }
-
-    const handleMouseUp = () => {
-      setIsDragging(false)
-
-      // Save position to node attributes
-      const currentStyles = (node.attributes?.styles || {}) as Record<
-        string,
-        string
-      >
-      const newStyles = {
-        ...currentStyles,
-        left: `${position.x}px`,
-        top: `${position.y}px`,
-        position: "fixed",
-        zIndex: currentStyles.zIndex || "10",
-      }
-
-      dispatch(
-        EditorActions.updateNode(node.id, {
-          attributes: {
-            ...node.attributes,
-            styles: newStyles,
-          },
-        })
-      )
-    }
-
-    window.addEventListener("mousemove", handleMouseMove)
-    window.addEventListener("mouseup", handleMouseUp)
-
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove)
-      window.removeEventListener("mouseup", handleMouseUp)
-    }
-  }, [isDragging, position, node.id, node.attributes, dispatch])
-
-  useEffect(() => {
-    if (!isResizing) return
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const deltaX = e.clientX - startSizeRef.current.mouseX
-
-      if (resizeSide === "right") {
-        // Resize from right side - only width changes
-        const newWidth = Math.max(
-          200,
-          Math.min(800, startSizeRef.current.width + deltaX)
-        )
-        setSize({ width: newWidth, height: "auto" })
-      } else if (resizeSide === "left") {
-        // Resize from left side - width and position change
-        const newWidth = Math.max(
-          200,
-          Math.min(800, startSizeRef.current.width - deltaX)
-        )
-        const widthDiff = startSizeRef.current.width - newWidth
-        const newX = startPosRef.current.x + widthDiff
-
-        setSize({ width: newWidth, height: "auto" })
-        setPosition({ x: newX, y: position.y })
-      }
-    }
-
-    const handleMouseUp = () => {
-      setIsResizing(false)
-      setResizeSide(null)
-
-      // Save size and position to node attributes
-      const currentStyles = (node.attributes?.styles || {}) as Record<
-        string,
-        string
-      >
-      const newStyles = {
-        ...currentStyles,
-        width: `${size.width}px`,
-        height: "auto",
-        left: `${position.x}px`,
-        top: `${position.y}px`,
-        position: "fixed",
-        zIndex: currentStyles.zIndex || "10",
-      }
-
-      dispatch(
-        EditorActions.updateNode(node.id, {
-          attributes: {
-            ...node.attributes,
-            styles: newStyles,
-          },
-        })
-      )
-    }
-
-    window.addEventListener("mousemove", handleMouseMove)
-    window.addEventListener("mouseup", handleMouseUp)
-
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove)
-      window.removeEventListener("mouseup", handleMouseUp)
-    }
-  }, [
-    isResizing,
-    resizeSide,
-    size,
-    position,
-    node.id,
-    node.attributes,
-    dispatch,
-  ])
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (!isDragging && !isResizing) {
-      onClick()
-    }
-  }
-
-  return (
-    <div
-      ref={dragRef}
-      className={`group absolute overflow-hidden rounded-lg ${readOnly ? "cursor-default" : isDragging ? "cursor-grabbing" : isResizing ? "cursor-ew-resize" : "cursor-grab"} `}
-      style={{
-        left: `${position.x}px`,
-        top: `${position.y}px`,
-        width: `${size.width}px`,
-        height:
-          typeof size.height === "string" ? size.height : `${size.height}px`,
-        zIndex: isDragging || isResizing ? 1000 : 10,
-      }}
-      onClick={handleClick}
-    >
-      <div className="relative">
-        {/* Drag handle - only in edit mode */}
-        {!readOnly && (
-          <div
-            className="absolute top-2 left-2 z-20 cursor-grab opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing"
-            onMouseDown={handleDragStart}
-          >
-            <Button
-              variant="secondary"
-              size="icon"
-              className="bg-background/90 hover:bg-background h-8 w-8"
-            >
-              <Move className="h-4 w-4" />
-            </Button>
-          </div>
-        )}
-
-        {/* Delete button - only in edit mode */}
-        {!readOnly && onDelete && (
-          <Button
-            variant="destructive"
-            size="icon"
-            className="absolute top-2 right-2 z-20 h-8 w-8 opacity-0 transition-opacity group-hover:opacity-100"
-            onClick={(e) => {
-              e.stopPropagation()
-              onDelete()
-            }}
-          >
-            <X className="h-4 w-4" />
-          </Button>
-        )}
-
-        {/* Image container */}
-        <div className="relative w-full">
-          {/* Uploading state */}
-          {isUploading && (
-            <div className="bg-muted/50 border-primary/50 flex h-64 w-full flex-col items-center justify-center border-2 border-dashed">
-              <Loader2 className="text-primary mb-3 h-12 w-12 animate-spin" />
-              <p className="text-foreground text-sm font-medium">
-                Uploading image...
-              </p>
-            </div>
-          )}
-
-          {/* Error state */}
-          {!isUploading && hasError && (
-            <div className="bg-destructive/10 border-destructive/50 flex h-64 w-full flex-col items-center justify-center border-2 border-dashed">
-              <X className="text-destructive mb-2 h-12 w-12" />
-              <p className="text-destructive text-sm font-medium">
-                Upload Failed
-              </p>
-            </div>
-          )}
-
-          {/* Normal image */}
-          {!isUploading && !hasError && (
-            <>
-              {imageError && (
-                <div className="bg-muted border-muted-foreground/25 flex h-64 w-full flex-col items-center justify-center border-2 border-dashed">
-                  <ImageIcon className="text-muted-foreground/50 mb-2 h-12 w-12" />
-                  <p className="text-muted-foreground text-sm">
-                    Failed to load image
-                  </p>
-                </div>
-              )}
-
-              {imageUrl && (
-                <img
-                  src={imageUrl}
-                  alt={altText || caption || "Free-positioned image"}
-                  className="h-auto w-full rounded-lg object-cover"
-                  onLoad={handleImageLoad}
-                  onError={handleImageError}
-                  draggable={false}
-                />
-              )}
-
-              {caption && (
-                <p className="text-muted-foreground bg-background/50 p-2 text-center text-sm italic">
-                  {caption}
-                </p>
-              )}
-            </>
-          )}
-        </div>
-
-        {/* Resize handles - only in edit mode */}
-        {!readOnly && !isUploading && !hasError && imageUrl && (
-          <>
-            {/* Right resize handle */}
-            <div
-              className="absolute top-1/2 right-0 z-20 flex h-16 w-2 -translate-y-1/2 cursor-ew-resize items-center justify-center opacity-0 transition-opacity group-hover:opacity-100 hover:!opacity-100"
-              onMouseDown={(e) => handleResizeStart(e, "right")}
-            >
-              <div className="bg-primary/50 hover:bg-primary h-12 w-1 rounded-full transition-colors" />
-            </div>
-
-            {/* Left resize handle */}
-            <div
-              className="absolute top-1/2 left-0 z-20 flex h-16 w-2 -translate-y-1/2 cursor-ew-resize items-center justify-center opacity-0 transition-opacity group-hover:opacity-100 hover:!opacity-100"
-              onMouseDown={(e) => handleResizeStart(e, "left")}
-            >
-              <div className="bg-primary/50 hover:bg-primary h-12 w-1 rounded-full transition-colors" />
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/InsertComponentsModal.tsx b/apps/web/src/components/ui/rich-editor/InsertComponentsModal.tsx
deleted file mode 100644
index f33f232b..00000000
--- a/apps/web/src/components/ui/rich-editor/InsertComponentsModal.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-"use client"
-
-import React from "react"
-import { ImagePlus } from "lucide-react"
-import { useTranslations } from "next-intl"
-
-import { cn } from "@/lib/utils"
-
-import { Button } from "../button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "../dialog"
-import {
-  INSERT_COMPONENTS,
-  type InsertComponent,
-} from "./insert-components-data"
-
-interface InsertComponentsModalProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  onSelect: (componentId: string) => void
-}
-
-// Icon mapping for components
-const componentIcons: Record<
-  string,
-  React.ComponentType<{ className?: string }>
-> = {
-  "free-image": ImagePlus,
-}
-
-export function InsertComponentsModal({
-  open,
-  onOpenChange,
-  onSelect,
-}: InsertComponentsModalProps) {
-  const t = useTranslations("RichEditor.insertComponents")
-  const handleSelect = (componentId: string) => {
-    onSelect(componentId)
-    onOpenChange(false)
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl">
-        <DialogHeader className="space-y-3">
-          <DialogTitle className="flex items-center gap-3 text-2xl">
-            <div className="bg-primary/10 rounded-lg p-2">
-              <ImagePlus className="text-primary h-6 w-6" />
-            </div>
-            {t("title")}
-          </DialogTitle>
-          <DialogDescription className="text-base">
-            {t("description")}
-          </DialogDescription>
-        </DialogHeader>
-
-        {/* Components Grid */}
-        <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
-          {INSERT_COMPONENTS.map((component) => {
-            const Icon = componentIcons[component.id] || ImagePlus
-            const title =
-              component.id === "free-image"
-                ? t("freeImage.name")
-                : component.name
-            const description =
-              component.id === "free-image"
-                ? t("freeImage.description")
-                : component.description
-
-            return (
-              <button
-                key={component.id}
-                onClick={() => handleSelect(component.id)}
-                className={cn(
-                  "group border-border/60 relative rounded-xl border p-6",
-                  "hover:border-primary/60 hover:shadow-primary/10 hover:shadow-lg",
-                  "hover:bg-accent/30 hover:scale-[1.02]",
-                  "transition-all duration-300 ease-out",
-                  "bg-background/50 backdrop-blur-sm",
-                  "text-left"
-                )}
-              >
-                {/* Icon */}
-                <div className="mb-3 flex items-center gap-4">
-                  <div className="bg-primary/10 group-hover:bg-primary/20 rounded-lg p-3 transition-colors">
-                    <Icon className="text-primary h-6 w-6" />
-                  </div>
-                  <div className="text-3xl">{component.icon}</div>
-                </div>
-
-                {/* Component Info */}
-                <h3 className="group-hover:text-primary mb-2 text-lg font-semibold transition-colors duration-200">
-                  {title}
-                </h3>
-                <p className="text-muted-foreground text-sm leading-relaxed">
-                  {description}
-                </p>
-
-                {/* Category badge */}
-                <div className="mt-4">
-                  <span className="bg-muted/80 text-muted-foreground inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium">
-                    {t(`categories.${component.category}`)}
-                  </span>
-                </div>
-              </button>
-            )
-          })}
-        </div>
-
-        {/* Empty state for future */}
-        {INSERT_COMPONENTS.length === 0 && (
-          <div className="text-muted-foreground flex flex-col items-center justify-center py-16">
-            <ImagePlus className="mb-4 h-12 w-12 opacity-50" />
-            <p className="text-base">{t("noComponents")}</p>
-          </div>
-        )}
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/MediaUploadPopover.tsx b/apps/web/src/components/ui/rich-editor/MediaUploadPopover.tsx
deleted file mode 100644
index db1f01b3..00000000
--- a/apps/web/src/components/ui/rich-editor/MediaUploadPopover.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client"
-
-import React from "react"
-import { Image as ImageIcon, ImagePlus, LayoutGrid, Video } from "lucide-react"
-
-import { Button } from "../button"
-import { Popover, PopoverContent, PopoverTrigger } from "../popover"
-
-interface MediaUploadPopoverProps {
-  isUploading: boolean
-  onImageUploadClick: () => void
-  onMultipleImagesUploadClick: () => void
-  onVideoUploadClick: () => void
-}
-
-export function MediaUploadPopover({
-  isUploading,
-  onImageUploadClick,
-  onMultipleImagesUploadClick,
-  onVideoUploadClick,
-}: MediaUploadPopoverProps) {
-  const [open, setOpen] = React.useState(false)
-
-  const handleOptionClick = (action: () => void) => {
-    action()
-    setOpen(false)
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          disabled={isUploading}
-          className="h-7 w-7 md:h-8 md:w-8"
-          title="Add media"
-        >
-          <ImageIcon className="size-3 md:size-3.5" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-56 p-2" align="start">
-        <div className="flex flex-col gap-1">
-          <Button
-            variant="ghost"
-            className="h-9 w-full justify-start gap-3"
-            onClick={() => handleOptionClick(onImageUploadClick)}
-            disabled={isUploading}
-          >
-            <ImagePlus className="size-4" />
-            <div className="flex flex-col items-start">
-              <span className="text-sm font-medium">Single Image</span>
-              <span className="text-muted-foreground text-xs">
-                Upload one image
-              </span>
-            </div>
-          </Button>
-
-          <Button
-            variant="ghost"
-            className="h-9 w-full justify-start gap-3"
-            onClick={() => handleOptionClick(onMultipleImagesUploadClick)}
-            disabled={isUploading}
-          >
-            <LayoutGrid className="size-4" />
-            <div className="flex flex-col items-start">
-              <span className="text-sm font-medium">Multiple Images</span>
-              <span className="text-muted-foreground text-xs">
-                Upload image grid
-              </span>
-            </div>
-          </Button>
-
-          <Button
-            variant="ghost"
-            className="h-9 w-full justify-start gap-3"
-            onClick={() => handleOptionClick(onVideoUploadClick)}
-            disabled={isUploading}
-          >
-            <Video className="size-4" />
-            <div className="flex flex-col items-start">
-              <span className="text-sm font-medium">Video</span>
-              <span className="text-muted-foreground text-xs">
-                Upload video file
-              </span>
-            </div>
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/QuickModeToggle.tsx b/apps/web/src/components/ui/rich-editor/QuickModeToggle.tsx
deleted file mode 100644
index c943d09d..00000000
--- a/apps/web/src/components/ui/rich-editor/QuickModeToggle.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-"use client"
-
-import Image from "next/image"
-import { Eye, EyeOff, FileText, Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
-
-import { Button } from "../button"
-import { Separator } from "../separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../tooltip"
-
-interface ToolbarProps {
-  readOnly: boolean
-  onReadOnlyChange: (readOnly: boolean) => void
-  notionBased?: boolean
-  onNotionBasedChange?: (notionBased: boolean) => void
-}
-
-export function QuickModeToggle({
-  readOnly,
-  onReadOnlyChange,
-  notionBased,
-  onNotionBasedChange,
-}: ToolbarProps) {
-  const { theme, setTheme } = useTheme()
-
-  const toggleTheme = () => {
-    setTheme(theme === "dark" ? "light" : "dark")
-  }
-
-  return null
-
-  return (
-    <TooltipProvider>
-      <div className="bg-background fixed top-[4.5rem] right-2 z-[105] flex items-center gap-1 rounded-lg border p-1 shadow-lg md:top-20 md:right-4 md:p-1.5 lg:top-17">
-        {/* Editor Mode Toggle - Only show if handler is provided */}
-        {onNotionBasedChange && (
-          <>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant={notionBased ? "default" : "ghost"}
-                  size="icon"
-                  className="relative h-8 w-8 md:h-9 md:w-9"
-                  onClick={() => onNotionBasedChange?.(!notionBased)}
-                >
-                  <Image
-                    src="/notion-logo.png"
-                    alt="Notion Logo"
-                    width={16}
-                    height={16}
-                    className={`h-3.5 w-3.5 invert-0 md:h-4 md:w-4 dark:invert ${notionBased ? "!invert dark:!invert-0" : ""}`}
-                  />
-                  <span className="sr-only">
-                    {notionBased ? "Notion Mode" : "Rich Editor Mode"}
-                  </span>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p className="text-xs">
-                  {notionBased ? (
-                    <>
-                      <strong>Notion Mode</strong>
-                      <br />
-                      With cover & header
-                    </>
-                  ) : (
-                    <>
-                      <strong>Rich Editor Mode</strong>
-                      <br />
-                      Clean blocks
-                    </>
-                  )}
-                </p>
-              </TooltipContent>
-            </Tooltip>
-
-            <Separator orientation="vertical" className="h-5 md:h-6" />
-          </>
-        )}
-
-        {/* Read-only toggle */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant={readOnly ? "default" : "ghost"}
-              size="icon"
-              className="h-8 w-8 md:h-9 md:w-9"
-              onClick={() => onReadOnlyChange(!readOnly)}
-            >
-              {readOnly ? (
-                <Eye className="h-3.5 w-3.5 md:h-4 md:w-4" />
-              ) : (
-                <EyeOff className="h-3.5 w-3.5 md:h-4 md:w-4" />
-              )}
-              <span className="sr-only">
-                {readOnly ? "View Only Mode" : "Edit Mode"}
-              </span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>{readOnly ? "View Only Mode" : "Edit Mode"}</p>
-          </TooltipContent>
-        </Tooltip>
-
-        <Separator orientation="vertical" className="h-5 md:h-6" />
-
-        {/* Theme toggle */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 md:h-9 md:w-9"
-              onClick={toggleTheme}
-            >
-              <Sun className="h-3.5 w-3.5 scale-100 rotate-0 transition-all md:h-4 md:w-4 dark:scale-0 dark:-rotate-90" />
-              <Moon className="absolute h-3.5 w-3.5 scale-0 rotate-90 transition-all md:h-4 md:w-4 dark:scale-100 dark:rotate-0" />
-              <span className="sr-only">Toggle theme</span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Toggle Theme</p>
-          </TooltipContent>
-        </Tooltip>
-      </div>
-    </TooltipProvider>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/SelectionToolbar.tsx b/apps/web/src/components/ui/rich-editor/SelectionToolbar.tsx
deleted file mode 100644
index a09c25b4..00000000
--- a/apps/web/src/components/ui/rich-editor/SelectionToolbar.tsx
+++ /dev/null
@@ -1,427 +0,0 @@
-"use client"
-
-import React, { useEffect, useRef, useState } from "react"
-import { AnimatePresence, motion } from "framer-motion"
-import { Link as LinkIcon, Type } from "lucide-react"
-import { useTranslations } from "next-intl"
-
-import { cn } from "@/lib/utils"
-import { useToast } from "@/hooks/use-toast"
-
-import { Button } from "../button"
-import { Popover, PopoverContent, PopoverTrigger } from "../popover"
-import { Separator } from "../separator"
-import {
-  CustomClassPopoverContent,
-  FormatButtons,
-  LinkPopoverContent,
-} from "./_toolbar-components"
-import {
-  getUserFriendlyClasses,
-  searchUserFriendlyClasses,
-} from "./class-mappings"
-import { ColorPickerComponent } from "./color-picker"
-import { ElementSelector, ElementType } from "./ElementSelector"
-import { FontSizePicker } from "./font-size-picker"
-import { EditorActions } from "./lib/reducer/actions"
-import { useEditorDispatch, useEditorState } from "./store/editor-store"
-import { tailwindClasses } from "./tailwind-classes"
-import { SelectionInfo } from "./types"
-import { getReplacementInfo, mergeClasses } from "./utils/class-replacement"
-
-interface SelectionToolbarProps {
-  selection: SelectionInfo | null
-  selectedColor: string
-  editorRef: React.RefObject<HTMLDivElement | null>
-  onFormat: (
-    format: "bold" | "italic" | "underline" | "strikethrough" | "code"
-  ) => void
-  onTypeChange: (type: string) => void
-  onColorSelect: (color: string) => void
-  onFontSizeSelect: (fontSize: string) => void
-}
-
-export function SelectionToolbar({
-  selection,
-  selectedColor,
-  editorRef,
-  onFormat,
-  onTypeChange,
-  onColorSelect,
-  onFontSizeSelect,
-}: SelectionToolbarProps) {
-  const tLink = useTranslations("RichEditor.link")
-  const tCustomClass = useTranslations("RichEditor.customClass")
-  const state = useEditorState()
-  const dispatch = useEditorDispatch()
-  const { toast } = useToast()
-  const [position, setPosition] = useState({ top: 0, left: 0 })
-  const [isVisible, setIsVisible] = useState(false)
-  const toolbarRef = useRef<HTMLDivElement>(null)
-
-  // Link popover state
-  const [linkPopoverOpen, setLinkPopoverOpen] = useState(false)
-  const [hrefInput, setHrefInput] = useState("")
-
-  // Custom class popover state
-  const [customClassPopoverOpen, setCustomClassPopoverOpen] = useState(false)
-  const [searchQuery, setSearchQuery] = useState("")
-  const [devMode, setDevMode] = useState(false)
-
-  // Store selection for link/class application
-  const savedSelectionRef = useRef<typeof selection>(null)
-
-  useEffect(() => {
-    // Keep toolbar visible and position stable if either popover is open
-    if (linkPopoverOpen || customClassPopoverOpen) {
-      return
-    }
-
-    if (!selection || selection.text.length === 0) {
-      setIsVisible(false)
-      return
-    }
-
-    // Save selection for later use in popovers
-    savedSelectionRef.current = selection
-
-    // Pre-fill link input if selection has an existing link
-    if (selection.href && !linkPopoverOpen) {
-      setHrefInput(selection.href)
-    }
-
-    // Get the current selection range
-    const domSelection = window.getSelection()
-    if (!domSelection || domSelection.rangeCount === 0) {
-      // Don't hide if we already have a position and saved selection
-      if (savedSelectionRef.current && position.top !== 0) {
-        return
-      }
-      setIsVisible(false)
-      return
-    }
-
-    const range = domSelection.getRangeAt(0)
-    const rect = range.getBoundingClientRect()
-
-    // Don't update position if rect is empty/collapsed and we already have a good position
-    if (rect.width === 0 && rect.height === 0 && position.top !== 0) {
-      return
-    }
-
-    // Get the editor container from ref
-    if (!editorRef.current) {
-      setIsVisible(false)
-      return
-    }
-
-    const editorRect = editorRef.current.getBoundingClientRect()
-
-    // Calculate position above the selection
-    const toolbarHeight = toolbarRef.current?.offsetHeight || 44 // Use actual toolbar height
-    const gap = 8 // Gap between selection and toolbar
-
-    // Position toolbar centered above the selection, relative to editor container
-    let left = rect.left - editorRect.left + rect.width / 2
-    const top = rect.top - editorRect.top - toolbarHeight - gap
-
-    // Adjust horizontal position if toolbar would go off-screen
-    if (toolbarRef.current) {
-      const toolbarWidth = toolbarRef.current.offsetWidth
-      left = left - toolbarWidth / 2
-
-      // Keep toolbar within editor container bounds
-      const padding = 16
-      if (left < padding) {
-        left = padding
-      } else if (left + toolbarWidth > editorRect.width - padding) {
-        left = editorRect.width - toolbarWidth - padding
-      }
-    }
-
-    setPosition({ top, left })
-    setIsVisible(true)
-  }, [
-    selection,
-    linkPopoverOpen,
-    customClassPopoverOpen,
-    position.top,
-    editorRef,
-  ])
-
-  // Link handlers
-  const handleApplyLink = () => {
-    if (!savedSelectionRef.current || !hrefInput.trim()) return
-
-    dispatch(EditorActions.setCurrentSelection(savedSelectionRef.current))
-
-    setTimeout(() => {
-      dispatch(EditorActions.applyLink(hrefInput.trim()))
-
-      toast({
-        title: tLink("toastApplied"),
-        description: tLink("toastLinkedTo", { url: hrefInput }),
-      })
-
-      setHrefInput("")
-      setLinkPopoverOpen(false)
-    }, 0)
-  }
-
-  const handleRemoveLink = () => {
-    if (!savedSelectionRef.current) return
-
-    dispatch(EditorActions.setCurrentSelection(savedSelectionRef.current))
-
-    setTimeout(() => {
-      dispatch(EditorActions.removeLink())
-
-      toast({
-        title: tLink("toastRemoved"),
-        description: tLink("toastRemovedDesc"),
-      })
-
-      setHrefInput("")
-      setLinkPopoverOpen(false)
-    }, 0)
-  }
-
-  // Custom class handlers with smart replacement
-  const handleApplyCustomClass = (className: string) => {
-    if (!savedSelectionRef.current) return
-
-    // Get current classes from selection
-    const currentClassName = savedSelectionRef.current.className || ""
-
-    // Get replacement info
-    const replacementInfo = getReplacementInfo(currentClassName, className)
-
-    // Merge classes intelligently (replaces same-category classes)
-    const mergedClasses = mergeClasses(currentClassName, className)
-
-    dispatch(
-      EditorActions.setCurrentSelection({
-        ...savedSelectionRef.current,
-        formats: {
-          bold: false,
-          italic: false,
-          underline: false,
-          strikethrough: false,
-          code: false,
-        },
-      })
-    )
-
-    setTimeout(() => {
-      dispatch(EditorActions.applyCustomClass(mergedClasses))
-
-      // Show appropriate toast message
-      if (
-        replacementInfo.willReplace &&
-        replacementInfo.replacedClasses.length > 0
-      ) {
-        toast({
-          title: tCustomClass("toastClassReplaced"),
-          description: tCustomClass("toastClassReplacedDesc", {
-            replaced: replacementInfo.replacedClasses.join(", "),
-            className,
-          }),
-        })
-      } else {
-        toast({
-          title: tCustomClass("toastCustomClassApplied"),
-          description: tCustomClass("toastAppliedClass", { className }),
-        })
-      }
-
-      setCustomClassPopoverOpen(false)
-      setSearchQuery("")
-    }, 0)
-  }
-
-  // Filter classes for custom class popover
-  const filteredClasses = devMode
-    ? searchQuery
-      ? tailwindClasses
-          .map((group) => ({
-            ...group,
-            classes: group.classes.filter((cls) =>
-              cls.toLowerCase().includes(searchQuery.toLowerCase())
-            ),
-          }))
-          .filter((group) => group.classes.length > 0)
-      : tailwindClasses
-    : searchQuery
-      ? searchUserFriendlyClasses(searchQuery)
-      : getUserFriendlyClasses()
-
-  // Use savedSelection if current selection is lost but popovers are open
-  const activeSelection = selection || savedSelectionRef.current
-
-  if (!activeSelection && !linkPopoverOpen && !customClassPopoverOpen) {
-    return null
-  }
-
-  const { formats } = activeSelection || {
-    formats: {
-      bold: false,
-      italic: false,
-      underline: false,
-      strikethrough: false,
-      code: false,
-    },
-  }
-  const hasExistingLink = Boolean(savedSelectionRef.current?.href)
-
-  return (
-    <AnimatePresence mode="wait">
-      {position &&
-        isVisible && ( // Keep toolbar visible if either popover is open, even if selection is lost
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            ref={toolbarRef}
-            className={cn(
-              "absolute z-[200] duration-200",
-              "pointer-events-auto inline-flex items-stretch rounded-lg shadow-md",
-              "bg-popover/95 border-border/50 border backdrop-blur-sm",
-              "text-sm leading-tight"
-            )}
-            style={{
-              top: `${position.top}px`,
-              left: `${position.left}px`,
-              height: "40px",
-              padding: "4px",
-            }}
-          >
-            {/* Text Type Selector */}
-            <ElementSelector
-              value={activeSelection?.elementType as ElementType}
-              onValueChange={(value) => onTypeChange(value)}
-              variant="compact"
-              showDescription={false}
-              showIcon={false}
-              className="mr-2"
-            />
-
-            {/* Format Buttons */}
-            <FormatButtons formats={formats} onFormat={onFormat} size="sm" />
-
-            <Separator
-              orientation="vertical"
-              className="bg-border/50 mx-1.5 my-auto h-6"
-            />
-
-            {/* Color Picker */}
-            <ColorPickerComponent
-              disabled={!activeSelection}
-              onColorSelect={onColorSelect}
-              selectedColor={selectedColor}
-            />
-
-            {/* Font Size Picker */}
-            <FontSizePicker
-              disabled={!activeSelection}
-              onFontSizeSelect={onFontSizeSelect}
-              currentFontSize={activeSelection?.styles?.fontSize || undefined}
-            />
-
-            <Separator
-              orientation="vertical"
-              className="bg-border/50 mx-1.5 my-auto h-6"
-            />
-
-            {/* Link Popover */}
-            <Popover open={linkPopoverOpen} onOpenChange={setLinkPopoverOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className={cn(
-                    "hover:bg-accent/50 h-7 min-w-fit gap-1.5 rounded-md px-2 transition-colors duration-75",
-                    hasExistingLink && "text-blue-500"
-                  )}
-                  onMouseDown={(e) => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                  }}
-                >
-                  <LinkIcon className="h-4 w-4" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent
-                className="w-80"
-                align="start"
-                onOpenAutoFocus={(e) => e.preventDefault()}
-                onInteractOutside={(e) => {
-                  // Prevent closing when clicking on the toolbar
-                  const target = e.target as HTMLElement
-                  if (toolbarRef.current?.contains(target)) {
-                    e.preventDefault()
-                  }
-                }}
-              >
-                <LinkPopoverContent
-                  hrefInput={hrefInput}
-                  setHrefInput={setHrefInput}
-                  hasExistingLink={hasExistingLink}
-                  selectedText={savedSelectionRef.current?.text || ""}
-                  onApply={handleApplyLink}
-                  onRemove={handleRemoveLink}
-                />
-              </PopoverContent>
-            </Popover>
-
-            {/* Custom Class Popover */}
-            <Popover
-              open={customClassPopoverOpen}
-              onOpenChange={setCustomClassPopoverOpen}
-            >
-              <PopoverTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="hover:bg-accent/50 h-7 min-w-fit gap-1.5 rounded-md px-2 transition-colors duration-75"
-                  onMouseDown={(e) => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                  }}
-                >
-                  <div className="border-border/50 flex h-6 w-6 items-center justify-center rounded-md border text-center font-medium">
-                    <Type className="h-3.5 w-3.5" />
-                  </div>
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent
-                className="w-96"
-                align="start"
-                onOpenAutoFocus={(e) => e.preventDefault()}
-                onInteractOutside={(e) => {
-                  // Prevent closing when clicking on the toolbar
-                  const target = e.target as HTMLElement
-                  if (toolbarRef.current?.contains(target)) {
-                    e.preventDefault()
-                  }
-                }}
-              >
-                <CustomClassPopoverContent
-                  searchQuery={searchQuery}
-                  setSearchQuery={setSearchQuery}
-                  devMode={devMode}
-                  setDevMode={setDevMode}
-                  filteredClasses={filteredClasses}
-                  onApplyClass={handleApplyCustomClass}
-                />
-              </PopoverContent>
-            </Popover>
-
-            <Separator
-              orientation="vertical"
-              className="bg-border/50 mx-1.5 my-auto h-6"
-            />
-          </motion.div>
-        )}
-    </AnimatePresence>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/TemplateSwitcherButton.tsx b/apps/web/src/components/ui/rich-editor/TemplateSwitcherButton.tsx
deleted file mode 100644
index 6fa8e361..00000000
--- a/apps/web/src/components/ui/rich-editor/TemplateSwitcherButton.tsx
+++ /dev/null
@@ -1,393 +0,0 @@
-"use client"
-
-import React, { useEffect, useRef, useState } from "react"
-import {
-  BookOpen,
-  Briefcase,
-  FileText,
-  Loader2,
-  Plus,
-  Sparkles,
-  User,
-  Zap,
-} from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "../alert-dialog"
-import { Button } from "../button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "../dialog"
-import {
-  getAllTemplateMetadata,
-  getTemplateById,
-  type TemplateMetadata,
-} from "./templates"
-import type { EditorState } from "./types"
-import { useTranslations } from "next-intl"
-
-interface TemplateSwitcherButtonProps {
-  onTemplateChange: (state: EditorState) => void
-  currentState: EditorState
-}
-
-// Category icons
-const categoryIcons: Record<
-  TemplateMetadata["category"],
-  React.ComponentType<{ className?: string }>
-> = {
-  productivity: Zap,
-  creative: Sparkles,
-  business: Briefcase,
-  personal: User,
-}
-
-// Category colors (solid colors for cleaner look)
-const categoryColors: Record<TemplateMetadata["category"], string> = {
-  productivity: "bg-blue-500 hover:bg-blue-600",
-  creative: "bg-purple-500 hover:bg-purple-600",
-  business: "bg-green-500 hover:bg-green-600",
-  personal: "bg-orange-500 hover:bg-orange-600",
-}
-
-export function TemplateSwitcherButton({
-  onTemplateChange,
-  currentState,
-}: TemplateSwitcherButtonProps) {
-  const t = useTranslations("RichEditor.template")
-  const [isOpen, setIsOpen] = useState(false)
-  const [isHovered, setIsHovered] = useState(false)
-  const [selectedCategory, setSelectedCategory] = useState<
-    TemplateMetadata["category"] | "all"
-  >("all")
-  const [showConfirmDialog, setShowConfirmDialog] = useState(false)
-  const [pendingTemplateId, setPendingTemplateId] = useState<string | null>(
-    null
-  )
-  const [isApplying, setIsApplying] = useState(false)
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
-
-  const allTemplates = getAllTemplateMetadata()
-
-  // Reset scroll position when category changes or dialog opens
-  useEffect(() => {
-    if (scrollContainerRef.current && isOpen) {
-      scrollContainerRef.current.scrollTop = 0
-    }
-  }, [selectedCategory, isOpen])
-
-  const filteredTemplates =
-    selectedCategory === "all"
-      ? allTemplates
-      : allTemplates.filter((t) => t.category === selectedCategory)
-
-  const categories: Array<{
-    value: "all" | TemplateMetadata["category"]
-    label: string
-  }> = [
-      { value: "all", label: t("catAll") },
-      { value: "productivity", label: t("catProductivity") },
-      { value: "creative", label: t("catCreative") },
-      { value: "business", label: t("catBusiness") },
-      { value: "personal", label: t("catPersonal") },
-    ]
-
-  // Check if there's existing content
-  const hasExistingContent = () => {
-    const container = currentState.history[currentState.historyIndex]
-    if (!container || !container.children || container.children.length === 0) {
-      return false
-    }
-
-    // Check if there's any non-empty content
-    return container.children.some((child) => {
-      if ("content" in child && child.content && child.content.trim() !== "") {
-        return true
-      }
-      if ("children" in child && child.children && child.children.length > 0) {
-        return true
-      }
-      return false
-    })
-  }
-
-  const handleTemplateSelect = (templateId: string) => {
-    // Set the pending template ID immediately for UI feedback
-    setPendingTemplateId(templateId)
-
-    // Check if there's existing content
-    if (hasExistingContent()) {
-      setShowConfirmDialog(true)
-      return
-    }
-
-    // No existing content, proceed directly
-    applyTemplate(templateId)
-  }
-
-  const applyTemplate = async (templateId: string) => {
-    const template = getTemplateById(templateId)
-    if (!template) return
-
-    setIsApplying(true)
-
-    // Small delay for smoother UX
-    await new Promise((resolve) => setTimeout(resolve, 150))
-
-    // Create completely fresh state with template content
-    // This ensures all editor state is properly reset
-    const newState: EditorState = {
-      version: "1.0.0",
-      history: [
-        {
-          id: "root",
-          type: "container",
-          children: template.content,
-          attributes: {},
-        },
-      ],
-      historyIndex: 0,
-      activeNodeId: null,
-      hasSelection: false,
-      selectionKey: 0,
-      currentSelection: null,
-      selectedBlocks: new Set<string>(),
-      coverImage: template.coverImage || null,
-      metadata: {
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-        templateId: template.metadata.id,
-        templateName: template.metadata.name,
-      },
-    }
-
-    // Apply the new state
-    onTemplateChange(newState)
-
-    // Close dialogs
-    setIsOpen(false)
-    setShowConfirmDialog(false)
-    setPendingTemplateId(null)
-    setIsApplying(false)
-
-    // Force a complete cleanup and re-render
-    setTimeout(() => {
-      // Clear any browser selection and focus
-      const selection = window.getSelection()
-      if (selection) {
-        selection.removeAllRanges()
-      }
-
-      // Remove focus from any active element
-      const activeElement = document.activeElement as HTMLElement
-      if (activeElement && activeElement.blur) {
-        activeElement.blur()
-      }
-
-      // Force scroll to top to show new template from the beginning
-      window.scrollTo({ top: 0, behavior: "smooth" })
-    }, 100)
-  }
-
-  const handleConfirmReplace = () => {
-    if (pendingTemplateId) {
-      applyTemplate(pendingTemplateId)
-    }
-  }
-
-  const handleCancelReplace = () => {
-    setShowConfirmDialog(false)
-    setPendingTemplateId(null)
-  }
-
-  return (
-    <>
-      {/* Floating Button */}
-      <div className="fixed bottom-6 left-6 md:left-[280px] z-50">
-        <Button
-          onClick={() => {
-            setIsOpen(true)
-            setSelectedCategory("all") // Reset to all templates when opening
-          }}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-          className={cn(
-            "h-12 w-12 rounded-full shadow-lg transition-all duration-200",
-            "bg-primary hover:bg-primary/90",
-            "hover:scale-105 hover:shadow-xl",
-            "group"
-          )}
-          size="icon"
-          title={t("fabTitle")}
-        >
-          <Plus
-            className={cn(
-              "h-5 w-5 transition-transform duration-200",
-              isHovered && "scale-110"
-            )}
-          />
-        </Button>
-      </div>
-
-      {/* Template Selector Dialog */}
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent className="bg-background/95 border-border/50 flex max-h-[85vh] max-w-6xl min-w-fit flex-col overflow-hidden shadow-2xl backdrop-blur-xl">
-          <DialogHeader className="space-y-3 pb-6">
-            <DialogTitle className="flex items-center gap-3 text-2xl">
-              <div className="bg-primary/10 rounded-lg p-2">
-                <FileText className="text-primary h-6 w-6" />
-              </div>
-              {t("title")}
-            </DialogTitle>
-            <DialogDescription className="text-base">
-              {t("description")}
-            </DialogDescription>
-          </DialogHeader>
-
-          {/* Category Filter */}
-          <div className="border-border/50 flex flex-wrap gap-2 border-b pb-6">
-            {categories.map((category) => {
-              const Icon =
-                category.value === "all"
-                  ? BookOpen
-                  : categoryIcons[
-                  category.value as TemplateMetadata["category"]
-                  ]
-              const isActive = selectedCategory === category.value
-
-              return (
-                <Button
-                  key={category.value}
-                  variant={isActive ? "default" : "outline"}
-                  size="sm"
-                  onClick={() => setSelectedCategory(category.value)}
-                  className={cn(
-                    "gap-2 transition-all duration-200",
-                    isActive && "scale-105 shadow-md"
-                  )}
-                >
-                  <Icon className="h-4 w-4" />
-                  {category.label}
-                </Button>
-              )
-            })}
-          </div>
-
-          {/* Templates Grid */}
-          <div ref={scrollContainerRef} className="flex-1 overflow-y-auto pt-4">
-            <div className="grid grid-cols-1 gap-5 px-1 pb-2 md:grid-cols-2 lg:grid-cols-4">
-              {filteredTemplates.map((template) => {
-                const CategoryIcon = categoryIcons[template.category]
-                const isCurrentlyApplying =
-                  isApplying && pendingTemplateId === template.id
-
-                return (
-                  <button
-                    key={template.id}
-                    onClick={() => handleTemplateSelect(template.id)}
-                    disabled={isApplying}
-                    className={cn(
-                      "group border-border/60 relative rounded-xl border p-6",
-                      "hover:border-primary/60 hover:shadow-primary/10 hover:shadow-lg",
-                      "hover:bg-accent/30 hover:scale-[1.02]",
-                      "transition-all duration-300 ease-out",
-                      "bg-background/50 backdrop-blur-sm",
-                      "text-left",
-                      isApplying &&
-                      !isCurrentlyApplying &&
-                      "cursor-not-allowed opacity-50",
-                      isCurrentlyApplying &&
-                      "border-primary/80 shadow-primary/20 scale-[1.02] shadow-lg"
-                    )}
-                  >
-                    {/* Category badge */}
-                    <div className="absolute top-4 right-4">
-                      <div className="bg-muted/80 border-border/40 rounded-lg border p-2 backdrop-blur-sm">
-                        <CategoryIcon className="text-muted-foreground h-4 w-4" />
-                      </div>
-                    </div>
-
-                    {/* Loading overlay */}
-                    {isCurrentlyApplying && (
-                      <div className="bg-background/80 absolute inset-0 z-10 flex items-center justify-center rounded-xl backdrop-blur-sm">
-                        <Loader2 className="text-primary h-8 w-8 animate-spin" />
-                      </div>
-                    )}
-
-                    {/* Icon */}
-                    <div className="mb-4 text-5xl transition-transform duration-200 group-hover:scale-110">
-                      {template.icon}
-                    </div>
-
-                    {/* Template Info */}
-                    <h3 className="group-hover:text-primary mb-2 pr-10 text-base font-semibold transition-colors duration-200">
-                      {template.name}
-                    </h3>
-                    <p className="text-muted-foreground line-clamp-2 text-sm leading-relaxed">
-                      {template.description}
-                    </p>
-                  </button>
-                )
-              })}
-            </div>
-
-            {filteredTemplates.length === 0 && (
-              <div className="text-muted-foreground flex flex-col items-center justify-center py-16">
-                <div className="bg-muted/50 mb-4 rounded-full p-4">
-                  <BookOpen className="h-12 w-12 opacity-50" />
-                </div>
-                <p className="text-base">{t("noTemplates")}</p>
-              </div>
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* Confirmation Dialog */}
-      <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
-        <AlertDialogContent className="bg-background/95 border-border/50 backdrop-blur-xl">
-          <AlertDialogHeader>
-            <AlertDialogTitle className="flex items-center gap-2">
-              <div className="bg-destructive/10 rounded-lg p-2">
-                <FileText className="text-destructive h-5 w-5" />
-              </div>
-              {t("confirmTitle")}
-            </AlertDialogTitle>
-            <AlertDialogDescription className="text-base leading-relaxed">
-              {t("confirmDescription")}
-              <br />
-              <span className="text-destructive font-semibold">
-                {t("cannotUndo")}
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel onClick={handleCancelReplace}>
-              {t("cancel")}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmReplace}
-              className="bg-destructive hover:bg-destructive/90"
-            >
-              {t("replaceContent")}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/_toolbar-components/CustomClassPopoverContent.tsx b/apps/web/src/components/ui/rich-editor/_toolbar-components/CustomClassPopoverContent.tsx
deleted file mode 100644
index ab73171c..00000000
--- a/apps/web/src/components/ui/rich-editor/_toolbar-components/CustomClassPopoverContent.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-"use client"
-
-import React from "react"
-import { Code2, Search } from "lucide-react"
-import { useTranslations } from "next-intl"
-
-import { Button } from "../../button"
-import { Input } from "../../input"
-import { ScrollArea } from "../../scroll-area"
-import { Switch } from "../../switch"
-
-interface CustomClassPopoverContentProps {
-  searchQuery: string
-  setSearchQuery: (value: string) => void
-  devMode: boolean
-  setDevMode: (value: boolean) => void
-  filteredClasses: any[]
-  onApplyClass: (className: string) => void
-}
-
-export function CustomClassPopoverContent({
-  searchQuery,
-  setSearchQuery,
-  devMode,
-  setDevMode,
-  filteredClasses,
-  onApplyClass,
-}: CustomClassPopoverContentProps) {
-  const t = useTranslations("RichEditor.customClass")
-  return (
-    <div className="space-y-3">
-      {/* Dev Mode Toggle */}
-      <div className="flex items-center justify-between border-b pb-2">
-        <div className="flex items-center gap-2">
-          <Code2 className="text-muted-foreground h-4 w-4" />
-          <span className="text-sm font-medium">{t("devMode")}</span>
-        </div>
-        <Switch
-          checked={devMode}
-          onCheckedChange={setDevMode}
-          aria-label={t("toggleDevModeAria")}
-        />
-      </div>
-
-      <div className="relative">
-        <Search className="text-muted-foreground absolute top-2.5 left-2 h-4 w-4" />
-        <Input
-          autoFocus
-          placeholder={
-            devMode ? t("searchPlaceholderDev") : t("searchPlaceholderUser")
-          }
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="pl-8"
-          onMouseDown={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        />
-      </div>
-      <ScrollArea className="h-[400px] pr-4">
-        <div className="space-y-4">
-          {devMode ? (
-            // Dev Mode: Show Tailwind classes
-            <>
-              {filteredClasses.map((group) => (
-                <div key={group.category}>
-                  <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                    {group.category}
-                  </h4>
-                  <div className="flex flex-wrap gap-1.5">
-                    {(group as any).classes.map((cls: string) => (
-                      <Button
-                        key={cls}
-                        variant="outline"
-                        size="sm"
-                        onClick={() => onApplyClass(cls)}
-                        className="h-6 px-2 text-xs"
-                      >
-                        {cls}
-                      </Button>
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </>
-          ) : (
-            // User Mode: Show user-friendly names
-            <>
-              {filteredClasses.map((group) => (
-                <div key={group.category}>
-                  <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                    {group.category}
-                  </h4>
-                  <div className="flex flex-wrap gap-1.5">
-                    {(group as any).items.map(
-                      (item: { label: string; value: string }) => (
-                        <Button
-                          key={item.value}
-                          variant="outline"
-                          size="sm"
-                          onClick={() => onApplyClass(item.value)}
-                          className="h-6 px-2 text-xs"
-                          title={t("appliesTitle", {
-                            className: item.value,
-                          })}
-                        >
-                          {item.label}
-                        </Button>
-                      )
-                    )}
-                  </div>
-                </div>
-              ))}
-            </>
-          )}
-          {filteredClasses.length === 0 && (
-            <div className="text-muted-foreground py-8 text-center text-sm">
-              {t("noMatches", { query: searchQuery })}
-            </div>
-          )}
-        </div>
-      </ScrollArea>
-    </div>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/_toolbar-components/FormatButtons.tsx b/apps/web/src/components/ui/rich-editor/_toolbar-components/FormatButtons.tsx
deleted file mode 100644
index 6fece97c..00000000
--- a/apps/web/src/components/ui/rich-editor/_toolbar-components/FormatButtons.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client"
-
-import React from "react"
-import { Bold, Code, Italic, Strikethrough, Underline } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-import { Button } from "../../button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../../tooltip"
-
-interface FormatButtonsProps {
-  formats: {
-    bold: boolean
-    italic: boolean
-    underline: boolean
-    strikethrough: boolean
-    code: boolean
-  }
-  onFormat: (
-    format: "bold" | "italic" | "underline" | "strikethrough" | "code"
-  ) => void
-  size?: "sm" | "md"
-}
-
-export function FormatButtons({
-  formats,
-  onFormat,
-  size = "md",
-}: FormatButtonsProps) {
-  const buttonSize = size === "sm" ? "h-7 w-7" : "h-8 w-8"
-
-  return (
-    <TooltipProvider delayDuration={300}>
-      <div className="border-x-border/50 flex items-center gap-1 border-x px-2">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className={cn(
-                buttonSize,
-                "hover:bg-accent/50 rounded-md transition-colors duration-75",
-                formats.bold &&
-                  "bg-blue-100 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/30"
-              )}
-              onClick={() => onFormat("bold")}
-            >
-              <Bold className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Bold (Ctrl+B)</p>
-          </TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className={cn(
-                buttonSize,
-                "hover:bg-accent/50 rounded-md transition-colors duration-75",
-                formats.italic &&
-                  "bg-blue-100 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/30"
-              )}
-              onClick={() => onFormat("italic")}
-            >
-              <Italic className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Italic (Ctrl+I)</p>
-          </TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className={cn(
-                buttonSize,
-                "hover:bg-accent/50 rounded-md transition-colors duration-75",
-                formats.underline &&
-                  "bg-blue-100 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/30"
-              )}
-              onClick={() => onFormat("underline")}
-            >
-              <Underline className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Underline (Ctrl+U)</p>
-          </TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className={cn(
-                buttonSize,
-                "hover:bg-accent/50 rounded-md transition-colors duration-75",
-                formats.strikethrough &&
-                  "bg-blue-100 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/30"
-              )}
-              onClick={() => onFormat("strikethrough")}
-            >
-              <Strikethrough className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Strikethrough (Ctrl+Shift+S)</p>
-          </TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className={cn(
-                buttonSize,
-                "hover:bg-accent/50 rounded-md transition-colors duration-75",
-                formats.code &&
-                  "bg-blue-100 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/30"
-              )}
-              onClick={() => onFormat("code")}
-            >
-              <Code className="h-4 w-4" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Inline Code (Ctrl+E)</p>
-          </TooltipContent>
-        </Tooltip>
-      </div>
-    </TooltipProvider>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/_toolbar-components/LinkPopoverContent.tsx b/apps/web/src/components/ui/rich-editor/_toolbar-components/LinkPopoverContent.tsx
deleted file mode 100644
index 82e4a1ab..00000000
--- a/apps/web/src/components/ui/rich-editor/_toolbar-components/LinkPopoverContent.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client"
-
-import React from "react"
-import { Link as LinkIcon, Trash2 } from "lucide-react"
-import { useTranslations } from "next-intl"
-
-import { Button } from "../../button"
-import { Input } from "../../input"
-import { Label } from "../../label"
-
-interface LinkPopoverContentProps {
-  hrefInput: string
-  setHrefInput: (value: string) => void
-  hasExistingLink: boolean
-  selectedText: string
-  onApply: () => void
-  onRemove: () => void
-}
-
-export function LinkPopoverContent({
-  hrefInput,
-  setHrefInput,
-  hasExistingLink,
-  selectedText,
-  onApply,
-  onRemove,
-}: LinkPopoverContentProps) {
-  const t = useTranslations("RichEditor.link")
-  return (
-    <div className="space-y-3">
-      <div>
-        <h4 className="mb-1 text-sm font-medium">
-          {hasExistingLink ? t("editLink") : t("addLink")}
-        </h4>
-        <p className="text-muted-foreground text-xs">
-          {t("selectedText", { text: selectedText })}
-        </p>
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="href-input" className="text-xs">
-          {t("linkUrl")}
-        </Label>
-        <Input
-          id="href-input"
-          placeholder={t("urlPlaceholder")}
-          value={hrefInput}
-          onChange={(e) => setHrefInput(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              onApply()
-            }
-          }}
-          className="flex-1"
-          onMouseDown={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        />
-      </div>
-      <div className="flex gap-2">
-        <Button
-          onClick={onApply}
-          disabled={!hrefInput.trim()}
-          size="sm"
-          className="flex-1"
-        >
-          <LinkIcon className="mr-1.5 size-3.5" />
-          {hasExistingLink ? t("update") : t("addLinkButton")}
-        </Button>
-        {hasExistingLink && (
-          <Button onClick={onRemove} variant="destructive" size="sm">
-            <Trash2 className="size-3.5" />
-          </Button>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/_toolbar-components/index.ts b/apps/web/src/components/ui/rich-editor/_toolbar-components/index.ts
deleted file mode 100644
index 38942b0d..00000000
--- a/apps/web/src/components/ui/rich-editor/_toolbar-components/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { LinkPopoverContent } from "./LinkPopoverContent"
-export { CustomClassPopoverContent } from "./CustomClassPopoverContent"
-export { FormatButtons } from "./FormatButtons"
diff --git a/apps/web/src/components/ui/rich-editor/add-block-button.tsx b/apps/web/src/components/ui/rich-editor/add-block-button.tsx
deleted file mode 100644
index 450781fd..00000000
--- a/apps/web/src/components/ui/rich-editor/add-block-button.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-import { Plus } from "lucide-react"
-
-import { Button } from "../button"
-import { useTranslations } from "next-intl"
-
-interface AddBlockButtonProps {
-  onAdd: () => void
-  position?: "before" | "after"
-}
-
-export function AddBlockButton({
-  onAdd,
-  position = "after",
-}: AddBlockButtonProps) {
-  const t = useTranslations("RichEditor")
-  const [isHovered, setIsHovered] = useState(false)
-
-  return (
-    <div
-      className="group relative mx-30 flex h-1 items-center justify-center transition-all"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      {/* Hover area - full width */}
-      <div className="absolute inset-0 w-full" />
-
-      {/* Add button - shows on hover */}
-      <Button
-        variant="outline"
-        size="sm"
-        className={`relative z-10 h-6 gap-1 px-2 shadow-sm transition-all ${
-          isHovered
-            ? "scale-100 opacity-100"
-            : "pointer-events-none scale-95 opacity-0"
-        } `}
-        onClick={(e) => {
-          e.stopPropagation()
-          onAdd()
-        }}
-      >
-        <Plus className="h-3 w-3" />
-        <span className="text-xs">{t("addBlock")}</span>
-      </Button>
-    </div>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/block-context-menu.tsx b/apps/web/src/components/ui/rich-editor/block-context-menu.tsx
deleted file mode 100644
index 3c2a620d..00000000
--- a/apps/web/src/components/ui/rich-editor/block-context-menu.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-"use client"
-
-import React, { useMemo, useState } from "react"
-import { PaintBucket } from "lucide-react"
-import { useTheme } from "next-themes"
-import { useTranslations } from "next-intl"
-
-import { Button } from "../button"
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "../context-menu"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "../dialog"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs"
-import {
-  ColorPickerAlpha,
-  ColorPickerEyeDropper,
-  ColorPickerFormat,
-  ColorPickerHue,
-  ColorPickerOutput,
-  ColorPickerSelection,
-  ColorPicker as ShadcnColorPicker,
-} from "./color-picker-index"
-
-interface BlockContextMenuProps {
-  children: React.ReactNode
-  onBackgroundColorChange: (color: string) => void
-  currentBackgroundColor?: string
-  readOnly?: boolean
-}
-
-type ColorNameKey =
-  | "none"
-  | "red"
-  | "orange"
-  | "yellow"
-  | "green"
-  | "blue"
-  | "indigo"
-  | "purple"
-  | "pink"
-  | "teal"
-  | "cyan"
-  | "gray"
-
-// Light mode colors - subtle, light backgrounds
-const lightModeColors: { nameKey: ColorNameKey; hex: string }[] = [
-  { nameKey: "none", hex: "transparent" },
-  { nameKey: "red", hex: "#fef2f2" },
-  { nameKey: "orange", hex: "#fff7ed" },
-  { nameKey: "yellow", hex: "#fefce8" },
-  { nameKey: "green", hex: "#f0fdf4" },
-  { nameKey: "blue", hex: "#eff6ff" },
-  { nameKey: "indigo", hex: "#eef2ff" },
-  { nameKey: "purple", hex: "#faf5ff" },
-  { nameKey: "pink", hex: "#fdf2f8" },
-  { nameKey: "teal", hex: "#f0fdfa" },
-  { nameKey: "cyan", hex: "#ecfeff" },
-  { nameKey: "gray", hex: "#f9fafb" },
-]
-
-// Dark mode colors - darker, more saturated backgrounds
-const darkModeColors: { nameKey: ColorNameKey; hex: string }[] = [
-  { nameKey: "none", hex: "transparent" },
-  { nameKey: "red", hex: "#450a0a" },
-  { nameKey: "orange", hex: "#431407" },
-  { nameKey: "yellow", hex: "#422006" },
-  { nameKey: "green", hex: "#052e16" },
-  { nameKey: "blue", hex: "#172554" },
-  { nameKey: "indigo", hex: "#1e1b4b" },
-  { nameKey: "purple", hex: "#2e1065" },
-  { nameKey: "pink", hex: "#500724" },
-  { nameKey: "teal", hex: "#042f2e" },
-  { nameKey: "cyan", hex: "#164e63" },
-  { nameKey: "gray", hex: "#1f2937" },
-]
-
-export function BlockContextMenu({
-  children,
-  onBackgroundColorChange,
-  currentBackgroundColor,
-  readOnly = false,
-}: BlockContextMenuProps) {
-  const t = useTranslations("RichEditor.blockBackground")
-  const tColors = useTranslations("RichEditor.blockBackground.colors")
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const [customColor, setCustomColor] = useState("#ffffff")
-  const [displayColor, setDisplayColor] = useState("#ffffff")
-
-  // Get current theme
-  const { theme, resolvedTheme } = useTheme()
-
-  // Determine which color preset to use based on theme
-  // resolvedTheme is 'light' or 'dark' (resolves 'system' to actual theme)
-  const presetColors = useMemo(() => {
-    const currentTheme = resolvedTheme || theme
-    return currentTheme === "dark" ? darkModeColors : lightModeColors
-  }, [theme, resolvedTheme])
-
-  const handleCustomColorChange = (value: any) => {
-    let hexColor = "#ffffff"
-
-    if (typeof value === "string") {
-      hexColor = value
-    } else if (Array.isArray(value)) {
-      // Extract RGB values (ignore alpha - it's the 4th element)
-      const [r, g, b] = value
-
-      // Ensure RGB values are valid numbers, clamp to 0-255 range
-      const rValue = Math.max(0, Math.min(255, Math.round(r || 0)))
-      const gValue = Math.max(0, Math.min(255, Math.round(g || 0)))
-      const bValue = Math.max(0, Math.min(255, Math.round(b || 0)))
-
-      hexColor = `#${rValue.toString(16).padStart(2, "0")}${gValue
-        .toString(16)
-        .padStart(2, "0")}${bValue.toString(16).padStart(2, "0")}`
-    }
-
-    setCustomColor(hexColor)
-    setDisplayColor(hexColor)
-  }
-
-  const handlePresetColorSelect = (color: string) => {
-    onBackgroundColorChange(color)
-    setIsDialogOpen(false)
-  }
-
-  const handleApplyCustomColor = () => {
-    onBackgroundColorChange(customColor)
-    setIsDialogOpen(false)
-  }
-
-  return (
-    <React.Fragment key={readOnly ? "readonly" : "editable"}>
-      {readOnly ? (
-        children
-      ) : (
-        <ContextMenu>
-          <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
-          <ContextMenuContent className="w-56">
-            <ContextMenuItem
-              onClick={() => setIsDialogOpen(true)}
-              className="gap-2"
-            >
-              <PaintBucket className="size-4" />
-              <span>{t("menuItem")}</span>
-            </ContextMenuItem>
-          </ContextMenuContent>
-        </ContextMenu>
-      )}
-
-      {!readOnly && (
-        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogContent className="overflow-y-auto sm:max-w-[450px]">
-            <DialogHeader>
-              <DialogTitle>{t("dialogTitle")}</DialogTitle>
-              <DialogDescription>{t("dialogDescription")}</DialogDescription>
-            </DialogHeader>
-
-            <Tabs defaultValue="preset" className="w-full">
-              <TabsList className="grid w-full grid-cols-2">
-                <TabsTrigger value="preset">{t("tabPreset")}</TabsTrigger>
-                <TabsTrigger value="custom">{t("tabCustom")}</TabsTrigger>
-              </TabsList>
-
-              <TabsContent value="preset" className="space-y-3 pt-4">
-                <h4 className="text-sm font-medium">{t("sectionHeading")}</h4>
-                <div className="grid grid-cols-4 gap-2">
-                  {presetColors.map((color) => (
-                    <button
-                      key={color.hex}
-                      onClick={() => handlePresetColorSelect(color.hex)}
-                      className={`h-16 rounded-md border-2 transition-all hover:scale-105 hover:shadow-md ${
-                        currentBackgroundColor === color.hex
-                          ? "border-primary ring-primary ring-2 ring-offset-2"
-                          : "border-border"
-                      }`}
-                      title={tColors(color.nameKey)}
-                      style={{
-                        backgroundColor: color.hex,
-                        backgroundImage:
-                          color.hex === "transparent"
-                            ? "linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)"
-                            : "none",
-                        backgroundSize:
-                          color.hex === "transparent" ? "10px 10px" : "auto",
-                        backgroundPosition:
-                          color.hex === "transparent"
-                            ? "0 0, 5px 5px"
-                            : "initial",
-                      }}
-                    >
-                      <span className="text-foreground/60 text-xs font-medium">
-                        {tColors(color.nameKey)}
-                      </span>
-                    </button>
-                  ))}
-                </div>
-              </TabsContent>
-
-              <TabsContent value="custom" className="space-y-3 pt-4">
-                <ShadcnColorPicker
-                  defaultValue="#ffffff"
-                  onChange={handleCustomColorChange}
-                  className="bg-background w-full rounded-md border p-3 shadow-sm"
-                >
-                  <ColorPickerSelection className="" />
-                  <div className="mt-2 flex items-center gap-2">
-                    <ColorPickerEyeDropper />
-                    <div className="grid w-full gap-1">
-                      <ColorPickerHue />
-                      <ColorPickerAlpha />
-                    </div>
-                  </div>
-                  <div className="mt-2 flex items-center gap-2">
-                    <ColorPickerOutput className="flex-1" />
-                    <ColorPickerFormat />
-                  </div>
-                </ShadcnColorPicker>
-
-                <div className="flex items-center justify-between gap-3">
-                  <div className="flex min-w-0 flex-1 items-center gap-2">
-                    <div
-                      className="h-8 w-8 shrink-0 rounded border"
-                      style={{ backgroundColor: displayColor }}
-                    />
-                    <span className="truncate font-mono text-xs font-medium">
-                      {displayColor}
-                    </span>
-                  </div>
-                  <Button
-                    onClick={handleApplyCustomColor}
-                    size="sm"
-                    className="shrink-0"
-                  >
-                    {t("apply")}
-                  </Button>
-                </div>
-              </TabsContent>
-            </Tabs>
-          </DialogContent>
-        </Dialog>
-      )}
-    </React.Fragment>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/block.tsx b/apps/web/src/components/ui/rich-editor/block.tsx
deleted file mode 100644
index e59ec1ae..00000000
--- a/apps/web/src/components/ui/rich-editor/block.tsx
+++ /dev/null
@@ -1,1138 +0,0 @@
-"use client"
-
-import React, { useCallback, useEffect, useRef, useState } from "react"
-import {
-  Code,
-  GripVertical,
-  Heading1,
-  Heading2,
-  Heading3,
-  ImageIcon,
-  List,
-  ListOrdered,
-  Plus,
-  Quote,
-  Type,
-} from "lucide-react"
-
-import { Button } from "../button"
-import { Popover, PopoverContent, PopoverTrigger } from "../popover"
-import { BlockContextMenu } from "./block-context-menu"
-import { CommandMenu } from "./command-menu"
-import { ELEMENT_OPTIONS } from "./elements"
-import { FlexContainer } from "./flex-container"
-// Import all block handlers and utilities
-import {
-  buildHTML,
-  createHandleBackgroundColorChange,
-  createHandleBlockDragEnd,
-  createHandleBlockDragStart,
-  createHandleClick,
-  createHandleCommandSelect,
-  createHandleCompositionEnd,
-  createHandleCompositionStart,
-  createHandleInput,
-  createHandleKeyDown,
-  getTypeClassName,
-  restoreSelection,
-  saveSelection,
-} from "./handlers/block"
-import {
-  getContainerClasses,
-  getElementType,
-  getNodeRenderType,
-} from "./handlers/block/block-renderer"
-import { ImageBlock } from "./image-block"
-import {
-  useBlockNode,
-  useEditorDispatch,
-  useEditorStore,
-  useIsNodeActive,
-} from "./store/editor-store"
-import { TableBuilder } from "./table-builder"
-import {
-  ContainerNode,
-  EditorNode,
-  getNodeTextContent,
-  isContainerNode,
-  TextNode,
-} from "./types"
-import { VideoBlock } from "./video-block"
-
-// Icon mapping
-const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
-  Type,
-  Heading1,
-  Heading2,
-  Heading3,
-  Code,
-  Quote,
-  List,
-  ListOrdered,
-}
-
-interface BlockProps {
-  nodeId: string // Changed: pass ID instead of full node to prevent re-renders
-  isActive: boolean
-  nodeRef: (el: HTMLElement | null) => void
-  onInput: (element: HTMLElement) => void
-  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void
-  onClick: () => void
-  onDelete?: (nodeId?: string) => void
-  onCreateNested?: (nodeId: string) => void
-  depth?: number
-  readOnly?: boolean
-  onImageDragStart?: (nodeId: string) => void
-  onChangeBlockType?: (nodeId: string, newType: string) => void
-  onInsertImage?: (nodeId: string) => void
-  onCreateList?: (nodeId: string, listType: string) => void
-  onCreateTable?: (nodeId: string) => void
-  onUploadImage?: (file: File) => Promise<string>
-  onBlockDragStart?: (nodeId: string) => void
-  selectedImageIds?: Set<string>
-  onToggleImageSelection?: (nodeId: string) => void
-  onClickWithModifier?: (e: React.MouseEvent, nodeId: string) => void
-  onFlexContainerDragOver?: (
-    e: React.DragEvent,
-    flexId: string,
-    position: "left" | "right" | null
-  ) => void
-  onFlexContainerDragLeave?: (e: React.DragEvent) => void
-  onFlexContainerDrop?: (
-    e: React.DragEvent,
-    flexId: string,
-    position: "left" | "right" | null
-  ) => void
-  dragOverFlexId?: string | null
-  flexDropPosition?: "left" | "right" | null
-  isFirstBlock?: boolean
-  notionBased?: boolean
-  hasCoverImage?: boolean
-  onUploadCoverImage?: (file: File) => Promise<string>
-  onSetDragOverNodeId?: (nodeId: string | null) => void
-  onSetDropPosition?: (
-    position: "before" | "after" | "left" | "right" | null
-  ) => void
-  draggingNodeId?: string | null
-  onSetDraggingNodeId?: (nodeId: string | null) => void
-}
-
-// Cache for tracking node changes across renders
-const nodeCache = new Map<string, EditorNode>()
-
-export const Block = React.memo(
-  function Block({
-    nodeId,
-    isActive,
-    nodeRef,
-    onInput,
-    onKeyDown,
-    onClick,
-    onDelete,
-    onCreateNested,
-    depth = 0,
-    readOnly = false,
-    onImageDragStart,
-    onChangeBlockType,
-    onInsertImage,
-    onCreateList,
-    onCreateTable,
-    onUploadImage,
-    onBlockDragStart,
-    selectedImageIds,
-    onToggleImageSelection,
-    onClickWithModifier,
-    onFlexContainerDragOver,
-    onFlexContainerDragLeave,
-    onFlexContainerDrop,
-    dragOverFlexId,
-    flexDropPosition,
-    isFirstBlock = false,
-    notionBased = true,
-    hasCoverImage = false,
-    onUploadCoverImage,
-    onSetDragOverNodeId,
-    onSetDropPosition,
-    draggingNodeId,
-    onSetDraggingNodeId,
-  }: BlockProps) {
-    // ✅ OPTIMIZATION: Subscribe to ONLY this node's data
-    // Thanks to structural sharing, this only causes re-render when THIS node changes
-    const node = useBlockNode(nodeId)
-
-    // All hooks must be called before any conditional returns
-    const localRef = useRef<HTMLElement | null>(null)
-    const isComposingRef = useRef(false)
-    const shouldPreserveSelectionRef = useRef(false)
-    const [isHovering, setIsHovering] = useState(false)
-    const coverImageInputRef = useRef<HTMLInputElement>(null)
-    const [isUploadingCover, setIsUploadingCover] = useState(false)
-
-    // DEV: Track renders to verify optimization
-    const renderCountRef = useRef(0)
-    renderCountRef.current += 1
-
-    if (process.env.NODE_ENV === "development") {
-      console.log(`🔄testBlock ${nodeId} render #${renderCountRef.current}`)
-    }
-
-    // ZUSTAND: Get dispatch function (never changes, no re-renders)
-    const dispatch = useEditorDispatch()
-
-    // Command menu state
-    const [showCommandMenu, setShowCommandMenu] = useState(false)
-    const [commandMenuAnchor, setCommandMenuAnchor] =
-      useState<HTMLElement | null>(null)
-
-    // Add block popover state
-    const [addBlockPopoverOpen, setAddBlockPopoverOpen] = useState(false)
-
-    // Touch/drag state for mobile
-    const touchStartRef = useRef<{ x: number; y: number } | null>(null)
-    const [isDraggingTouch, setIsDraggingTouch] = useState(false)
-
-    // If node not found, return null AFTER all hooks are called
-    if (!node) {
-      console.warn(`Block: Node ${nodeId} not found`)
-      return null
-    }
-
-    // Determine how to render this node
-    const renderType = getNodeRenderType(node)
-
-    // Handle container nodes (recursive rendering)
-    switch (renderType) {
-      case "table": {
-        const containerNode = node as ContainerNode
-        return (
-          <TableBuilder
-            key={node.id}
-            node={containerNode}
-            onUpdate={(id, updates) => {
-              if (dispatch) {
-                dispatch({
-                  type: "UPDATE_NODE",
-                  payload: { id, updates },
-                })
-              }
-            }}
-            readOnly={readOnly}
-            onBlockDragStart={onBlockDragStart}
-            onDelete={onDelete}
-          />
-        )
-      }
-
-      case "flex": {
-        const containerNode = node as ContainerNode
-        return (
-          <FlexContainer
-            key={node.id}
-            node={containerNode}
-            onDragOver={(e, position) => {
-              if (onFlexContainerDragOver) {
-                onFlexContainerDragOver(e, node.id, position)
-              }
-            }}
-            onDragLeave={onFlexContainerDragLeave}
-            onDrop={(e, position) => {
-              if (onFlexContainerDrop) {
-                onFlexContainerDrop(e, node.id, position)
-              }
-            }}
-            dragOverPosition={
-              dragOverFlexId === node.id ? flexDropPosition : null
-            }
-          >
-            {containerNode.children.map((childNode) => {
-              const isChildMedia =
-                childNode &&
-                "type" in childNode &&
-                (childNode.type === "img" || childNode.type === "video")
-
-              const blockContent = (
-                <Block
-                  key={childNode.id}
-                  nodeId={childNode.id}
-                  isActive={isActive}
-                  nodeRef={nodeRef}
-                  onInput={onInput}
-                  onKeyDown={(e) => {
-                    onKeyDown(e)
-                  }}
-                  onClick={onClick}
-                  onDelete={
-                    isChildMedia && onDelete
-                      ? () => onDelete(childNode.id)
-                      : undefined
-                  }
-                  onCreateNested={onCreateNested}
-                  depth={depth + 1}
-                  readOnly={readOnly}
-                  onImageDragStart={onImageDragStart}
-                  onChangeBlockType={onChangeBlockType}
-                  onInsertImage={onInsertImage}
-                  onCreateList={onCreateList}
-                  onCreateTable={onCreateTable}
-                  onUploadImage={onUploadImage}
-                  selectedImageIds={selectedImageIds}
-                  onToggleImageSelection={onToggleImageSelection}
-                  onClickWithModifier={onClickWithModifier}
-                  onFlexContainerDragOver={onFlexContainerDragOver}
-                  onFlexContainerDragLeave={onFlexContainerDragLeave}
-                  onFlexContainerDrop={onFlexContainerDrop}
-                  dragOverFlexId={dragOverFlexId}
-                  flexDropPosition={flexDropPosition}
-                  onSetDragOverNodeId={onSetDragOverNodeId}
-                  onSetDropPosition={onSetDropPosition}
-                  draggingNodeId={draggingNodeId}
-                  onSetDraggingNodeId={onSetDraggingNodeId}
-                />
-              )
-
-              // Wrap in flex item div
-              return (
-                <div
-                  key={childNode.id}
-                  className="max-w-full min-w-[280px] flex-1"
-                >
-                  {blockContent}
-                </div>
-              )
-            })}
-          </FlexContainer>
-        )
-      }
-
-      case "nested-container": {
-        const containerNode = node as ContainerNode
-
-        // Get container classes
-        const containerClasses = getContainerClasses(false, isActive)
-
-        return (
-          <div
-            key={node.id}
-            data-node-id={node.id}
-            data-node-type="container"
-            className={containerClasses}
-          >
-            {containerNode.children.map((childNode: EditorNode) => {
-              const isChildMedia =
-                childNode &&
-                "type" in childNode &&
-                (childNode.type === "img" || childNode.type === "video")
-
-              return (
-                <Block
-                  key={childNode.id}
-                  nodeId={childNode.id}
-                  isActive={isActive}
-                  nodeRef={nodeRef}
-                  onInput={onInput}
-                  onKeyDown={(e) => {
-                    onKeyDown(e)
-                  }}
-                  onClick={onClick}
-                  onDelete={
-                    isChildMedia && onDelete
-                      ? () => onDelete(childNode.id)
-                      : undefined
-                  }
-                  onCreateNested={onCreateNested}
-                  depth={depth + 1}
-                  readOnly={readOnly}
-                  onImageDragStart={onImageDragStart}
-                  onChangeBlockType={onChangeBlockType}
-                  onInsertImage={onInsertImage}
-                  onCreateList={onCreateList}
-                  onCreateTable={onCreateTable}
-                  onUploadImage={onUploadImage}
-                  selectedImageIds={selectedImageIds}
-                  onToggleImageSelection={onToggleImageSelection}
-                  onClickWithModifier={onClickWithModifier}
-                  onFlexContainerDragOver={onFlexContainerDragOver}
-                  onFlexContainerDragLeave={onFlexContainerDragLeave}
-                  onFlexContainerDrop={onFlexContainerDrop}
-                  dragOverFlexId={dragOverFlexId}
-                  flexDropPosition={flexDropPosition}
-                  onSetDragOverNodeId={onSetDragOverNodeId}
-                  onSetDropPosition={onSetDropPosition}
-                  draggingNodeId={draggingNodeId}
-                  onSetDraggingNodeId={onSetDraggingNodeId}
-                />
-              )
-            })}
-          </div>
-        )
-      }
-    }
-
-    // Cast to TextNode for remaining cases
-    const textNode = node as TextNode
-
-    // BR elements render as empty space
-    if (textNode.type === "br") {
-      return (
-        <div
-          key={textNode.id}
-          data-node-id={textNode.id}
-          className="h-6"
-          onClick={onClick}
-        />
-      )
-    }
-
-    // Image nodes render as ImageBlock
-    if (textNode.type === "img") {
-      return (
-        <ImageBlock
-          node={textNode}
-          isActive={isActive}
-          onClick={onClick}
-          onDelete={onDelete}
-          onDragStart={onImageDragStart}
-          isSelected={selectedImageIds?.has(textNode.id)}
-          onToggleSelection={onToggleImageSelection}
-          onClickWithModifier={onClickWithModifier}
-        />
-      )
-    }
-
-    // Video nodes render as VideoBlock
-    if (textNode.type === "video") {
-      return (
-        <VideoBlock
-          node={textNode}
-          isActive={isActive}
-          onClick={onClick}
-          onDelete={onDelete}
-          onDragStart={onImageDragStart}
-          isSelected={selectedImageIds?.has(textNode.id)}
-          onToggleSelection={onToggleImageSelection}
-          onClickWithModifier={onClickWithModifier}
-        />
-      )
-    }
-
-    // Build HTML callback
-    const memoizedBuildHTML = useCallback(() => {
-      return buildHTML(textNode, readOnly)
-    }, [textNode, readOnly])
-
-    // Save selection callback
-    const memoizedSaveSelection = useCallback(() => {
-      return saveSelection(localRef)
-    }, [])
-
-    // Restore selection callback
-    const memoizedRestoreSelection = useCallback(
-      (
-        savedSelection: {
-          start: number
-          end: number
-          collapsed: boolean
-        } | null
-      ) => {
-        restoreSelection(localRef, savedSelection)
-      },
-      []
-    )
-
-    // Update content when needed
-    useEffect(() => {
-      if (!localRef.current) return
-
-      if (isComposingRef.current || shouldPreserveSelectionRef.current) {
-        return
-      }
-
-      const element = localRef.current
-      const newHTML = memoizedBuildHTML()
-
-      if (element.innerHTML !== newHTML) {
-        const hadFocus = document.activeElement === element
-        const savedSelectionData = hadFocus ? memoizedSaveSelection() : null
-
-        element.innerHTML = newHTML
-
-        if (hadFocus && savedSelectionData) {
-          memoizedRestoreSelection(savedSelectionData)
-        }
-      }
-    }, [memoizedBuildHTML, memoizedSaveSelection, memoizedRestoreSelection])
-
-    // Create all handlers
-    const handleCompositionStart = useCallback(
-      createHandleCompositionStart()(isComposingRef),
-      []
-    )
-
-    const handleCompositionEnd = useCallback(
-      createHandleCompositionEnd()(isComposingRef),
-      []
-    )
-
-    const handleInput = useCallback(
-      createHandleInput({
-        textNode,
-        readOnly,
-        onInput,
-        onChangeBlockType,
-        showCommandMenu,
-        setShowCommandMenu,
-        setCommandMenuAnchor,
-        shouldPreserveSelectionRef,
-      }),
-      [textNode, readOnly, onInput, onChangeBlockType, showCommandMenu]
-    )
-
-    const handleKeyDown = useCallback(
-      createHandleKeyDown({
-        textNode,
-        readOnly,
-        onInput,
-        onKeyDown,
-        onClick,
-        onCreateNested,
-        onChangeBlockType,
-        onInsertImage,
-        onCreateList,
-        // ✅ Pass getter function - only called when needed, doesn't cause re-renders
-        currentContainer: () =>
-          useEditorStore.getState().history[
-          useEditorStore.getState().historyIndex
-          ],
-        dispatch,
-        localRef,
-        isComposingRef,
-        shouldPreserveSelectionRef,
-        showCommandMenu,
-        setShowCommandMenu,
-        setCommandMenuAnchor,
-      }),
-      [textNode, readOnly, onKeyDown, onCreateNested, showCommandMenu, dispatch]
-    )
-
-    const handleClick = useCallback(createHandleClick({ readOnly, onClick }), [
-      readOnly,
-      onClick,
-    ])
-
-    const handleCommandSelect = useCallback(
-      createHandleCommandSelect({
-        textNode,
-        onChangeBlockType,
-        onInsertImage,
-        onCreateList,
-        onCreateTable,
-        localRef,
-        setShowCommandMenu,
-        setCommandMenuAnchor,
-      }),
-      [textNode, onChangeBlockType, onInsertImage, onCreateList, onCreateTable]
-    )
-
-    const handleBackgroundColorChange = useCallback(
-      createHandleBackgroundColorChange(textNode, dispatch),
-      [textNode, dispatch]
-    )
-
-    const handleBlockDragStartFn = useCallback(
-      createHandleBlockDragStart(textNode, onBlockDragStart),
-      [textNode, onBlockDragStart]
-    )
-
-    const handleBlockDragEndFn = useCallback(
-      createHandleBlockDragEnd(() => {
-        // Clear all drag states when drag ends (including cancelled drags)
-        if (onSetDragOverNodeId && onSetDropPosition && onSetDraggingNodeId) {
-          onSetDragOverNodeId(null)
-          onSetDropPosition(null)
-          onSetDraggingNodeId(null)
-        }
-      }),
-      [onSetDragOverNodeId, onSetDropPosition, onSetDraggingNodeId]
-    )
-
-    // Touch handlers for mobile drag support
-    const handleTouchStart = useCallback(
-      (e: React.TouchEvent) => {
-        // Prevent default to stop scrolling
-        e.preventDefault()
-        e.stopPropagation()
-
-        const touch = e.touches[0]
-        touchStartRef.current = { x: touch.clientX, y: touch.clientY }
-        setIsDraggingTouch(true)
-
-        // Trigger drag start
-        if (onBlockDragStart && textNode?.id) {
-          onBlockDragStart(textNode.id)
-        }
-      },
-      [onBlockDragStart, textNode?.id]
-    )
-
-    const handleTouchMove = useCallback(
-      (e: React.TouchEvent) => {
-        if (!touchStartRef.current || !isDraggingTouch) return
-
-        // Prevent default scrolling while dragging
-        e.preventDefault()
-        e.stopPropagation()
-
-        // Highlight the drop target using the same state as desktop
-        const touch = e.touches[0]
-        const elementBelow = document.elementFromPoint(
-          touch.clientX,
-          touch.clientY
-        )
-        const targetBlock = elementBelow?.closest("[data-node-id]")
-
-        if (targetBlock && onSetDragOverNodeId && onSetDropPosition) {
-          const targetId = targetBlock.getAttribute("data-node-id")
-          if (targetId && targetId !== textNode?.id) {
-            onSetDragOverNodeId(targetId)
-            onSetDropPosition("after") // Default to after position on mobile
-          } else {
-            onSetDragOverNodeId(null)
-            onSetDropPosition(null)
-          }
-        }
-      },
-      [isDraggingTouch, textNode?.id, onSetDragOverNodeId, onSetDropPosition]
-    )
-
-    const handleTouchEnd = useCallback(
-      (e: React.TouchEvent) => {
-        const touch = e.changedTouches[0]
-        const elementBelow = document.elementFromPoint(
-          touch.clientX,
-          touch.clientY
-        )
-
-        // Find the closest block node
-        const targetBlock = elementBelow?.closest("[data-node-id]")
-        if (targetBlock && textNode?.id) {
-          const targetId = targetBlock.getAttribute("data-node-id")
-          if (targetId && targetId !== textNode.id && dispatch) {
-            // Move the block
-            dispatch({
-              type: "MOVE_NODE",
-              payload: {
-                nodeId: textNode.id,
-                targetId,
-                position: "after",
-              },
-            })
-          }
-        }
-
-        // Clean up
-        touchStartRef.current = null
-        setIsDraggingTouch(false)
-
-        // Clear drop indicators using the same state as desktop
-        if (onSetDragOverNodeId && onSetDropPosition) {
-          onSetDragOverNodeId(null)
-          onSetDropPosition(null)
-        }
-      },
-      [textNode?.id, dispatch, onSetDragOverNodeId, onSetDropPosition]
-    )
-
-    const handleTouchCancel = useCallback(() => {
-      // Clean up on touch cancel (e.g., user scrolled or drag was interrupted)
-      touchStartRef.current = null
-      setIsDraggingTouch(false)
-
-      // Clear drop indicators
-      if (onSetDragOverNodeId && onSetDropPosition) {
-        onSetDragOverNodeId(null)
-        onSetDropPosition(null)
-      }
-    }, [onSetDragOverNodeId, onSetDropPosition])
-
-    // Handle cover image upload
-    const handleCoverImageUpload = useCallback(
-      async (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0]
-        if (!file || !onUploadCoverImage) return
-
-        setIsUploadingCover(true)
-        try {
-          const url = await onUploadCoverImage(file)
-          const { EditorActions } = await import("./lib/reducer/actions")
-          dispatch(
-            EditorActions.setCoverImage({
-              url,
-              alt: file.name,
-              position: 50,
-            })
-          )
-        } catch (error) {
-          console.error("Failed to upload cover image:", error)
-        } finally {
-          setIsUploadingCover(false)
-          // Reset input value so the same file can be selected again
-          if (coverImageInputRef.current) {
-            coverImageInputRef.current.value = ""
-          }
-        }
-      },
-      [onUploadCoverImage, dispatch]
-    )
-
-    // Check if block is empty
-    const textContent = getNodeTextContent(textNode)
-    const isEmpty = !textContent || textContent.trim() === ""
-
-    // Get placeholder from attributes
-    const placeholder = textNode.attributes?.placeholder as string | undefined
-
-    // Determine if this is a header block (h1) - headers don't show command menu
-    const isHeaderBlock = textNode.type === "h1"
-
-    // Show command menu placeholder only if no custom placeholder is set and not a header block
-    const showCommandPlaceholder =
-      isEmpty &&
-      isActive &&
-      !readOnly &&
-      onChangeBlockType &&
-      !placeholder &&
-      !isHeaderBlock
-
-    // Determine which HTML element to render based on type
-    const ElementType =
-      textNode.type === "li"
-        ? "li"
-        : textNode.type === "ol"
-          ? "ol"
-          : textNode.type === "h1"
-            ? "h1"
-            : textNode.type === "h2"
-              ? "h2"
-              : textNode.type === "h3"
-                ? "h3"
-                : textNode.type === "h4"
-                  ? "h4"
-                  : textNode.type === "h5"
-                    ? "h5"
-                    : textNode.type === "h6"
-                      ? "h6"
-                      : textNode.type === "p"
-                        ? "p"
-                        : textNode.type === "blockquote"
-                          ? "blockquote"
-                          : textNode.type === "code"
-                            ? "pre"
-                            : "div"
-
-    const isListItem = textNode.type === "li" || textNode.type === "ol"
-
-    // Get custom class from attributes
-    const customClassName = textNode.attributes?.className || ""
-    const isHexColor =
-      typeof customClassName === "string" && customClassName.startsWith("#")
-    const textColor = isHexColor ? customClassName : ""
-    const className = isHexColor ? "" : customClassName
-
-    // Get background color from attributes
-    const backgroundColor = textNode.attributes?.backgroundColor as
-      | string
-      | undefined
-
-    // Common props for all elements
-    const commonProps = {
-      key: textNode.id,
-      "data-node-id": textNode.id,
-      "data-node-type": textNode.type,
-      "data-show-command-placeholder": showCommandPlaceholder
-        ? "true"
-        : undefined,
-      contentEditable: !readOnly,
-      suppressContentEditableWarning: true,
-      ...(placeholder ? { placeholder } : {}),
-      className: `!ml-6
-        ${isListItem ? "relative" : ""} 
-        ${getTypeClassName(textNode.type)}
-        ${className}
-        ${readOnly ? "" : "outline-none focus:outline-none"}
-        ${isListItem ? "px-3 py-0.5 mb-1 list-disc pl-6" : textNode.type.startsWith("h") ? "px-3 py-2 mb-2" : "px-3 py-1.5 mb-2"}
-        ${textNode.type === "ol" ? "list-decimal" : ""}
-        ${notionBased && isFirstBlock && textNode.type === "h1" ? "pb-4" : ""}
-        transition-all
-        ${!readOnly && isActive ? "border-b bg-accent/5" : ""}
-        ${!readOnly ? "hover:bg-accent/5" : ""}
-        ${readOnly ? "cursor-default" : ""}
-        empty:before:content-[attr(placeholder)] empty:before:text-muted-foreground empty:before:opacity-40 empty:before:pointer-events-none
-        ${isListItem ? "empty:before:inline-block empty:before:pl-1" : ""}
-        [&[data-show-command-placeholder='true']]:empty:before:content-['Type_/_for_commands...'] [&[data-show-command-placeholder='true']]:empty:before:text-muted-foreground [&[data-show-command-placeholder='true']]:empty:before:opacity-50
-        ${isListItem ? "[&[data-show-command-placeholder='true']]:empty:before:inline-block [&[data-show-command-placeholder='true']]:empty:before:pl-1" : ""}
-        selection:bg-blue-100 selection:text-blue-900
-        [&::marker]:mr-2
-      `,
-      style: {
-        marginLeft: isListItem
-          ? `${depth * 0.5 + 1.5}rem`
-          : `${depth * 0.5}rem`,
-        ...(textColor ? { color: textColor as string } : {}),
-        ...(backgroundColor ? { backgroundColor: backgroundColor } : {}),
-      },
-      spellCheck: false,
-    }
-
-    return (
-      <>
-        <BlockContextMenu
-          readOnly={readOnly}
-          onBackgroundColorChange={handleBackgroundColorChange}
-          currentBackgroundColor={backgroundColor}
-        >
-          <div
-            className={`group relative transition-all ${isDraggingTouch || draggingNodeId === textNode?.id
-                ? "scale-95 opacity-50"
-                : ""
-              }`}
-            onMouseEnter={() => !readOnly && setIsHovering(true)}
-            onMouseLeave={() => !readOnly && setIsHovering(false)}
-            style={{
-              borderTop: "2px solid transparent",
-              borderBottom: "2px solid transparent",
-            }}
-          >
-            {/* Drag Handle & Add Button - Mobile: inline, Desktop: absolute positioned */}
-            {!readOnly && onBlockDragStart && (
-              <div className="mb-1 flex items-center gap-0.5 transition-opacity duration-200 md:absolute md:top-1/2 md:left-0 md:mb-0 md:-ml-[2rem] md:-translate-y-1/2 md:opacity-0 md:group-hover:opacity-100">
-                {/* Add Cover Button - Only show on first block in Notion mode if no cover */}
-                {notionBased &&
-                  isFirstBlock &&
-                  !hasCoverImage &&
-                  onUploadCoverImage && (
-                    <>
-                      <input
-                        ref={coverImageInputRef}
-                        type="file"
-                        accept="image/*"
-                        className="hidden"
-                        onChange={handleCoverImageUpload}
-                      />
-                      <button
-                        className="hover:bg-accent rounded p-0.5 transition-colors duration-200"
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          coverImageInputRef.current?.click()
-                        }}
-                        onMouseDown={(e) => e.stopPropagation()}
-                        disabled={isUploadingCover}
-                        title="Add Cover"
-                      >
-                        {isUploadingCover ? (
-                          <div className="border-primary h-5 w-5 animate-spin rounded-full border-b-2" />
-                        ) : (
-                          <ImageIcon
-                            className="text-muted-foreground hover:text-foreground h-5 w-5 transition-colors duration-200"
-                            strokeWidth={1.5}
-                          />
-                        )}
-                      </button>
-                    </>
-                  )}
-
-                {/* Add Block Button */}
-                <Popover
-                  open={addBlockPopoverOpen}
-                  onOpenChange={setAddBlockPopoverOpen}
-                >
-                  <PopoverTrigger asChild>
-                    <button
-                      className="hover:bg-accent rounded p-0.5 transition-colors duration-200"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                      }}
-                      onMouseDown={(e) => e.stopPropagation()}
-                    >
-                      <Plus
-                        className="text-muted-foreground hover:text-foreground h-5 w-5 transition-colors duration-200"
-                        strokeWidth={1.5}
-                      />
-                    </button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-56 p-2" align="start">
-                    <div className="flex flex-col gap-1">
-                      {ELEMENT_OPTIONS.map((element) => {
-                        const IconComponent = element.icon
-                          ? iconMap[element.icon]
-                          : null
-                        return (
-                          <Button
-                            key={element.value}
-                            variant="ghost"
-                            size="sm"
-                            className="justify-start gap-2"
-                            onClick={() => {
-                              dispatch({
-                                type: "INSERT_NODE",
-                                payload: {
-                                  node: {
-                                    id: `${element.value}-${Date.now()}`,
-                                    type: element.value as TextNode["type"],
-                                    content: "",
-                                  },
-                                  targetId: textNode.id,
-                                  position: "after",
-                                },
-                              })
-                              setAddBlockPopoverOpen(false)
-                            }}
-                          >
-                            {IconComponent && (
-                              <IconComponent
-                                className={element.iconSize || "h-4 w-4"}
-                              />
-                            )}
-                            <span>{element.label}</span>
-                          </Button>
-                        )
-                      })}
-                    </div>
-                  </PopoverContent>
-                </Popover>
-
-                {/* Drag Handle */}
-                <div
-                  draggable
-                  onDragStart={handleBlockDragStartFn}
-                  onDragEnd={handleBlockDragEndFn}
-                  onTouchStart={handleTouchStart}
-                  onTouchMove={handleTouchMove}
-                  onTouchEnd={handleTouchEnd}
-                  onTouchCancel={handleTouchCancel}
-                  className={`cursor-grab p-0.5 active:cursor-grabbing ${isDraggingTouch ? "opacity-50" : ""}`}
-                  style={{ touchAction: "none" }}
-                  onClick={(e) => e.stopPropagation()}
-                  onMouseDown={(e) => e.stopPropagation()}
-                >
-                  <GripVertical
-                    className="text-muted-foreground hover:text-foreground h-5 w-5 transition-colors duration-200"
-                    strokeWidth={1.5}
-                  />
-                </div>
-              </div>
-            )}
-
-            <ElementType
-              {...commonProps}
-              key={textNode.id}
-              ref={(el: HTMLElement | null) => {
-                localRef.current = el
-                nodeRef(el)
-              }}
-              onInput={readOnly ? undefined : (e) => handleInput(e as any)}
-              onKeyDown={readOnly ? undefined : (e) => handleKeyDown(e as any)}
-              onClick={(e) => handleClick(e as any)}
-              onCompositionStart={readOnly ? undefined : handleCompositionStart}
-              onCompositionEnd={readOnly ? undefined : handleCompositionEnd}
-            />
-          </div>
-        </BlockContextMenu>
-
-        {/* Command Menu */}
-        {!readOnly && (
-          <CommandMenu
-            isOpen={showCommandMenu}
-            onClose={() => setShowCommandMenu(false)}
-            onSelect={handleCommandSelect}
-            anchorElement={commandMenuAnchor}
-            nodeId={textNode.id}
-            onUploadImage={onUploadImage}
-          />
-        )}
-      </>
-    )
-  },
-  (prevProps, nextProps) => {
-    // Custom comparison function for React.memo
-    // Return true if props are equal (component should NOT re-render)
-    // Return false if props are different (component SHOULD re-render)
-
-    // IMPORTANT: We must check if node content changed, because if memo returns true,
-    // the component body never executes, so useBlockNode() never runs, and content
-    // changes would never be detected!
-
-    const DEBUG = process.env.NODE_ENV === "development"
-
-    // Check if the node ID changed (critical prop)
-    if (prevProps.nodeId !== nextProps.nodeId) {
-      if (DEBUG)
-        console.log(
-          `🔄 Block ${prevProps.nodeId} → nodeId changed:`,
-          prevProps.nodeId,
-          "→",
-          nextProps.nodeId
-        )
-      return false
-    }
-
-    // Get the current node from store to check if its content changed
-    const { useEditorStore } = require("./store/editor-store")
-    const store = useEditorStore.getState()
-    const currentNode = store.getNode(nextProps.nodeId)
-
-    // Check if node reference changed (thanks to Zustand structural sharing)
-    const cachedNode = nodeCache.get(nextProps.nodeId)
-
-    // Update cache with current node for next comparison
-    nodeCache.set(nextProps.nodeId, currentNode)
-
-    // If node reference changed, content must have changed
-    // This is the KEY optimization - structural sharing ensures same reference = same data
-    if (cachedNode !== undefined && cachedNode !== currentNode) {
-      if (DEBUG) {
-        console.log(`🔄 Block ${nextProps.nodeId} → node data changed in store`)
-        console.log("  Previous node:", cachedNode)
-        console.log("  Current node:", currentNode)
-      }
-      return false
-    }
-
-    // Check if active state changed
-    if (prevProps.isActive !== nextProps.isActive) {
-      if (DEBUG)
-        console.log(
-          `🔄 Block ${prevProps.nodeId} → isActive changed:`,
-          prevProps.isActive,
-          "→",
-          nextProps.isActive
-        )
-      return false
-    }
-
-    // Check if read-only state changed
-    if (prevProps.readOnly !== nextProps.readOnly) {
-      if (DEBUG)
-        console.log(
-          `🔄 Block ${prevProps.nodeId} → readOnly changed:`,
-          prevProps.readOnly,
-          "→",
-          nextProps.readOnly
-        )
-      return false
-    }
-
-    // Check if depth changed
-    if (prevProps.depth !== nextProps.depth) {
-      if (DEBUG)
-        console.log(
-          `🔄 Block ${prevProps.nodeId} → depth changed:`,
-          prevProps.depth,
-          "→",
-          nextProps.depth
-        )
-      return false
-    }
-
-    // Check if drag-related props changed
-    if (prevProps.draggingNodeId !== nextProps.draggingNodeId) {
-      if (DEBUG)
-        console.log(
-          `🔄 Block ${prevProps.nodeId} → draggingNodeId changed:`,
-          prevProps.draggingNodeId,
-          "→",
-          nextProps.draggingNodeId
-        )
-      return false
-    }
-    if (prevProps.dragOverFlexId !== nextProps.dragOverFlexId) {
-      if (DEBUG)
-        console.log(
-          `🔄 Block ${prevProps.nodeId} → dragOverFlexId changed:`,
-          prevProps.dragOverFlexId,
-          "→",
-          nextProps.dragOverFlexId
-        )
-      return false
-    }
-    if (prevProps.flexDropPosition !== nextProps.flexDropPosition) {
-      if (DEBUG)
-        console.log(
-          `🔄 Block ${prevProps.nodeId} → flexDropPosition changed:`,
-          prevProps.flexDropPosition,
-          "→",
-          nextProps.flexDropPosition
-        )
-      return false
-    }
-
-    // Check if first block status changed
-    if (prevProps.isFirstBlock !== nextProps.isFirstBlock) {
-      if (DEBUG)
-        console.log(
-          `🔄 Block ${prevProps.nodeId} → isFirstBlock changed:`,
-          prevProps.isFirstBlock,
-          "→",
-          nextProps.isFirstBlock
-        )
-      return false
-    }
-    if (prevProps.notionBased !== nextProps.notionBased) {
-      if (DEBUG)
-        console.log(
-          `🔄 Block ${prevProps.nodeId} → notionBased changed:`,
-          prevProps.notionBased,
-          "→",
-          nextProps.notionBased
-        )
-      return false
-    }
-    if (prevProps.hasCoverImage !== nextProps.hasCoverImage) {
-      if (DEBUG)
-        console.log(
-          `🔄 Block ${prevProps.nodeId} → hasCoverImage changed:`,
-          prevProps.hasCoverImage,
-          "→",
-          nextProps.hasCoverImage
-        )
-      return false
-    }
-
-    // Check if selectedImageIds set changed
-    if (prevProps.selectedImageIds !== nextProps.selectedImageIds) {
-      // Deep comparison for Set
-      if (
-        prevProps.selectedImageIds?.size !== nextProps.selectedImageIds?.size
-      ) {
-        if (DEBUG)
-          console.log(
-            `🔄 Block ${prevProps.nodeId} → selectedImageIds size changed:`,
-            prevProps.selectedImageIds?.size,
-            "→",
-            nextProps.selectedImageIds?.size
-          )
-        return false
-      }
-      if (prevProps.selectedImageIds && nextProps.selectedImageIds) {
-        for (const id of prevProps.selectedImageIds) {
-          if (!nextProps.selectedImageIds.has(id)) {
-            if (DEBUG)
-              console.log(
-                `🔄 Block ${prevProps.nodeId} → selectedImageIds content changed`
-              )
-            return false
-          }
-        }
-      }
-    }
-
-    // All callback functions are stable references from parent, no need to compare
-    // The node data itself is fetched via useBlockNode(nodeId) inside the component
-    // so changes to the node will be detected via Zustand subscriptions
-
-    if (DEBUG)
-      console.log(
-        `✅ Block ${prevProps.nodeId} → memo skipped re-render (props unchanged)`
-      )
-    return true // Props are equal, skip re-render
-  }
-)
diff --git a/apps/web/src/components/ui/rich-editor/class-mappings.ts b/apps/web/src/components/ui/rich-editor/class-mappings.ts
deleted file mode 100644
index dd55a4c6..00000000
--- a/apps/web/src/components/ui/rich-editor/class-mappings.ts
+++ /dev/null
@@ -1,1061 +0,0 @@
-export interface ClassMapping {
-  userFriendly: string
-  tailwindClass: string
-  category: string
-}
-
-export const classMappings: ClassMapping[] = [
-  // Text Color
-  {
-    userFriendly: "Red Text",
-    tailwindClass: "text-red-500",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Dark Red Text",
-    tailwindClass: "text-red-600",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Darker Red Text",
-    tailwindClass: "text-red-700",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Blue Text",
-    tailwindClass: "text-blue-500",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Dark Blue Text",
-    tailwindClass: "text-blue-600",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Darker Blue Text",
-    tailwindClass: "text-blue-700",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Green Text",
-    tailwindClass: "text-green-500",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Dark Green Text",
-    tailwindClass: "text-green-600",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Darker Green Text",
-    tailwindClass: "text-green-700",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Yellow Text",
-    tailwindClass: "text-yellow-500",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Dark Yellow Text",
-    tailwindClass: "text-yellow-600",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Darker Yellow Text",
-    tailwindClass: "text-yellow-700",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Purple Text",
-    tailwindClass: "text-purple-500",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Dark Purple Text",
-    tailwindClass: "text-purple-600",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Darker Purple Text",
-    tailwindClass: "text-purple-700",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Pink Text",
-    tailwindClass: "text-pink-500",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Dark Pink Text",
-    tailwindClass: "text-pink-600",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Darker Pink Text",
-    tailwindClass: "text-pink-700",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Indigo Text",
-    tailwindClass: "text-indigo-500",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Dark Indigo Text",
-    tailwindClass: "text-indigo-600",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Darker Indigo Text",
-    tailwindClass: "text-indigo-700",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Gray Text",
-    tailwindClass: "text-gray-500",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Dark Gray Text",
-    tailwindClass: "text-gray-600",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Darker Gray Text",
-    tailwindClass: "text-gray-700",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Very Dark Gray Text",
-    tailwindClass: "text-gray-800",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Black Gray Text",
-    tailwindClass: "text-gray-900",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "White Text",
-    tailwindClass: "text-white",
-    category: "Text Color",
-  },
-  {
-    userFriendly: "Black Text",
-    tailwindClass: "text-black",
-    category: "Text Color",
-  },
-
-  // Background Color
-  {
-    userFriendly: "Light Red Background",
-    tailwindClass: "bg-red-50",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Lighter Red Background",
-    tailwindClass: "bg-red-100",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Soft Red Background",
-    tailwindClass: "bg-red-200",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Red Background",
-    tailwindClass: "bg-red-500",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Light Blue Background",
-    tailwindClass: "bg-blue-50",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Lighter Blue Background",
-    tailwindClass: "bg-blue-100",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Soft Blue Background",
-    tailwindClass: "bg-blue-200",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Blue Background",
-    tailwindClass: "bg-blue-500",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Light Green Background",
-    tailwindClass: "bg-green-50",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Lighter Green Background",
-    tailwindClass: "bg-green-100",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Soft Green Background",
-    tailwindClass: "bg-green-200",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Green Background",
-    tailwindClass: "bg-green-500",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Light Yellow Background",
-    tailwindClass: "bg-yellow-50",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Lighter Yellow Background",
-    tailwindClass: "bg-yellow-100",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Soft Yellow Background",
-    tailwindClass: "bg-yellow-200",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Yellow Background",
-    tailwindClass: "bg-yellow-500",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Light Purple Background",
-    tailwindClass: "bg-purple-50",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Lighter Purple Background",
-    tailwindClass: "bg-purple-100",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Soft Purple Background",
-    tailwindClass: "bg-purple-200",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Purple Background",
-    tailwindClass: "bg-purple-500",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Light Pink Background",
-    tailwindClass: "bg-pink-50",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Lighter Pink Background",
-    tailwindClass: "bg-pink-100",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Soft Pink Background",
-    tailwindClass: "bg-pink-200",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Pink Background",
-    tailwindClass: "bg-pink-500",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Light Indigo Background",
-    tailwindClass: "bg-indigo-50",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Lighter Indigo Background",
-    tailwindClass: "bg-indigo-100",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Soft Indigo Background",
-    tailwindClass: "bg-indigo-200",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Indigo Background",
-    tailwindClass: "bg-indigo-500",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Light Gray Background",
-    tailwindClass: "bg-gray-50",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Lighter Gray Background",
-    tailwindClass: "bg-gray-100",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Soft Gray Background",
-    tailwindClass: "bg-gray-200",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Gray Background",
-    tailwindClass: "bg-gray-500",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "White Background",
-    tailwindClass: "bg-white",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Black Background",
-    tailwindClass: "bg-black",
-    category: "Background Color",
-  },
-  {
-    userFriendly: "Transparent Background",
-    tailwindClass: "bg-transparent",
-    category: "Background Color",
-  },
-
-  // Font Size
-  {
-    userFriendly: "Extra Small Text",
-    tailwindClass: "text-xs",
-    category: "Font Size",
-  },
-  {
-    userFriendly: "Small Text",
-    tailwindClass: "text-sm",
-    category: "Font Size",
-  },
-  {
-    userFriendly: "Normal Text",
-    tailwindClass: "text-base",
-    category: "Font Size",
-  },
-  {
-    userFriendly: "Large Text",
-    tailwindClass: "text-lg",
-    category: "Font Size",
-  },
-  {
-    userFriendly: "Extra Large Text",
-    tailwindClass: "text-xl",
-    category: "Font Size",
-  },
-  {
-    userFriendly: "2X Large Text",
-    tailwindClass: "text-2xl",
-    category: "Font Size",
-  },
-  {
-    userFriendly: "3X Large Text",
-    tailwindClass: "text-3xl",
-    category: "Font Size",
-  },
-  {
-    userFriendly: "4X Large Text",
-    tailwindClass: "text-4xl",
-    category: "Font Size",
-  },
-  {
-    userFriendly: "5X Large Text",
-    tailwindClass: "text-5xl",
-    category: "Font Size",
-  },
-  {
-    userFriendly: "6X Large Text",
-    tailwindClass: "text-6xl",
-    category: "Font Size",
-  },
-  {
-    userFriendly: "7X Large Text",
-    tailwindClass: "text-7xl",
-    category: "Font Size",
-  },
-  {
-    userFriendly: "8X Large Text",
-    tailwindClass: "text-8xl",
-    category: "Font Size",
-  },
-  {
-    userFriendly: "9X Large Text",
-    tailwindClass: "text-9xl",
-    category: "Font Size",
-  },
-
-  // Font Weight
-  {
-    userFriendly: "Thin Weight",
-    tailwindClass: "font-thin",
-    category: "Font Weight",
-  },
-  {
-    userFriendly: "Extra Light Weight",
-    tailwindClass: "font-extralight",
-    category: "Font Weight",
-  },
-  {
-    userFriendly: "Light Weight",
-    tailwindClass: "font-light",
-    category: "Font Weight",
-  },
-  {
-    userFriendly: "Normal Weight",
-    tailwindClass: "font-normal",
-    category: "Font Weight",
-  },
-  {
-    userFriendly: "Medium Weight",
-    tailwindClass: "font-medium",
-    category: "Font Weight",
-  },
-  {
-    userFriendly: "Semi Bold",
-    tailwindClass: "font-semibold",
-    category: "Font Weight",
-  },
-  { userFriendly: "Bold", tailwindClass: "font-bold", category: "Font Weight" },
-  {
-    userFriendly: "Extra Bold",
-    tailwindClass: "font-extrabold",
-    category: "Font Weight",
-  },
-  {
-    userFriendly: "Black Weight",
-    tailwindClass: "font-black",
-    category: "Font Weight",
-  },
-
-  // Text Decoration
-  {
-    userFriendly: "Underline",
-    tailwindClass: "underline",
-    category: "Text Decoration",
-  },
-  {
-    userFriendly: "Overline",
-    tailwindClass: "overline",
-    category: "Text Decoration",
-  },
-  {
-    userFriendly: "Line Through",
-    tailwindClass: "line-through",
-    category: "Text Decoration",
-  },
-  {
-    userFriendly: "No Underline",
-    tailwindClass: "no-underline",
-    category: "Text Decoration",
-  },
-  {
-    userFriendly: "Solid Decoration",
-    tailwindClass: "decoration-solid",
-    category: "Text Decoration",
-  },
-  {
-    userFriendly: "Double Decoration",
-    tailwindClass: "decoration-double",
-    category: "Text Decoration",
-  },
-  {
-    userFriendly: "Dotted Decoration",
-    tailwindClass: "decoration-dotted",
-    category: "Text Decoration",
-  },
-  {
-    userFriendly: "Dashed Decoration",
-    tailwindClass: "decoration-dashed",
-    category: "Text Decoration",
-  },
-  {
-    userFriendly: "Wavy Decoration",
-    tailwindClass: "decoration-wavy",
-    category: "Text Decoration",
-  },
-  {
-    userFriendly: "Small Offset",
-    tailwindClass: "underline-offset-1",
-    category: "Text Decoration",
-  },
-  {
-    userFriendly: "Medium Offset",
-    tailwindClass: "underline-offset-2",
-    category: "Text Decoration",
-  },
-  {
-    userFriendly: "Large Offset",
-    tailwindClass: "underline-offset-4",
-    category: "Text Decoration",
-  },
-  {
-    userFriendly: "Extra Large Offset",
-    tailwindClass: "underline-offset-8",
-    category: "Text Decoration",
-  },
-
-  // Text Alignment
-  {
-    userFriendly: "Align Left",
-    tailwindClass: "text-left",
-    category: "Text Alignment",
-  },
-  {
-    userFriendly: "Align Center",
-    tailwindClass: "text-center",
-    category: "Text Alignment",
-  },
-  {
-    userFriendly: "Align Right",
-    tailwindClass: "text-right",
-    category: "Text Alignment",
-  },
-  {
-    userFriendly: "Justify",
-    tailwindClass: "text-justify",
-    category: "Text Alignment",
-  },
-  {
-    userFriendly: "Align Start",
-    tailwindClass: "text-start",
-    category: "Text Alignment",
-  },
-  {
-    userFriendly: "Align End",
-    tailwindClass: "text-end",
-    category: "Text Alignment",
-  },
-
-  // Text Transform
-  {
-    userFriendly: "Uppercase",
-    tailwindClass: "uppercase",
-    category: "Text Transform",
-  },
-  {
-    userFriendly: "Lowercase",
-    tailwindClass: "lowercase",
-    category: "Text Transform",
-  },
-  {
-    userFriendly: "Capitalize",
-    tailwindClass: "capitalize",
-    category: "Text Transform",
-  },
-  {
-    userFriendly: "Normal Case",
-    tailwindClass: "normal-case",
-    category: "Text Transform",
-  },
-
-  // Padding (Simplified - showing most common ones)
-  { userFriendly: "No Padding", tailwindClass: "p-0", category: "Padding" },
-  { userFriendly: "Tiny Padding", tailwindClass: "p-1", category: "Padding" },
-  { userFriendly: "Small Padding", tailwindClass: "p-2", category: "Padding" },
-  { userFriendly: "Medium Padding", tailwindClass: "p-4", category: "Padding" },
-  { userFriendly: "Large Padding", tailwindClass: "p-6", category: "Padding" },
-  {
-    userFriendly: "Extra Large Padding",
-    tailwindClass: "p-8",
-    category: "Padding",
-  },
-  {
-    userFriendly: "Small Horizontal Padding",
-    tailwindClass: "px-2",
-    category: "Padding",
-  },
-  {
-    userFriendly: "Medium Horizontal Padding",
-    tailwindClass: "px-4",
-    category: "Padding",
-  },
-  {
-    userFriendly: "Large Horizontal Padding",
-    tailwindClass: "px-6",
-    category: "Padding",
-  },
-  {
-    userFriendly: "Small Vertical Padding",
-    tailwindClass: "py-2",
-    category: "Padding",
-  },
-  {
-    userFriendly: "Medium Vertical Padding",
-    tailwindClass: "py-4",
-    category: "Padding",
-  },
-  {
-    userFriendly: "Large Vertical Padding",
-    tailwindClass: "py-6",
-    category: "Padding",
-  },
-
-  // Margin (Simplified - showing most common ones)
-  { userFriendly: "No Margin", tailwindClass: "m-0", category: "Margin" },
-  { userFriendly: "Tiny Margin", tailwindClass: "m-1", category: "Margin" },
-  { userFriendly: "Small Margin", tailwindClass: "m-2", category: "Margin" },
-  { userFriendly: "Medium Margin", tailwindClass: "m-4", category: "Margin" },
-  { userFriendly: "Large Margin", tailwindClass: "m-6", category: "Margin" },
-  {
-    userFriendly: "Extra Large Margin",
-    tailwindClass: "m-8",
-    category: "Margin",
-  },
-  {
-    userFriendly: "Center Horizontally",
-    tailwindClass: "mx-auto",
-    category: "Margin",
-  },
-  {
-    userFriendly: "Small Horizontal Margin",
-    tailwindClass: "mx-2",
-    category: "Margin",
-  },
-  {
-    userFriendly: "Medium Horizontal Margin",
-    tailwindClass: "mx-4",
-    category: "Margin",
-  },
-  {
-    userFriendly: "Small Vertical Margin",
-    tailwindClass: "my-2",
-    category: "Margin",
-  },
-  {
-    userFriendly: "Medium Vertical Margin",
-    tailwindClass: "my-4",
-    category: "Margin",
-  },
-
-  // Border
-  { userFriendly: "Border", tailwindClass: "border", category: "Border" },
-  { userFriendly: "No Border", tailwindClass: "border-0", category: "Border" },
-  {
-    userFriendly: "Thick Border",
-    tailwindClass: "border-2",
-    category: "Border",
-  },
-  {
-    userFriendly: "Very Thick Border",
-    tailwindClass: "border-4",
-    category: "Border",
-  },
-  { userFriendly: "Top Border", tailwindClass: "border-t", category: "Border" },
-  {
-    userFriendly: "Bottom Border",
-    tailwindClass: "border-b",
-    category: "Border",
-  },
-  {
-    userFriendly: "Left Border",
-    tailwindClass: "border-l",
-    category: "Border",
-  },
-  {
-    userFriendly: "Right Border",
-    tailwindClass: "border-r",
-    category: "Border",
-  },
-  {
-    userFriendly: "Solid Border",
-    tailwindClass: "border-solid",
-    category: "Border",
-  },
-  {
-    userFriendly: "Dashed Border",
-    tailwindClass: "border-dashed",
-    category: "Border",
-  },
-  {
-    userFriendly: "Dotted Border",
-    tailwindClass: "border-dotted",
-    category: "Border",
-  },
-
-  // Border Color
-  {
-    userFriendly: "Red Border",
-    tailwindClass: "border-red-500",
-    category: "Border Color",
-  },
-  {
-    userFriendly: "Blue Border",
-    tailwindClass: "border-blue-500",
-    category: "Border Color",
-  },
-  {
-    userFriendly: "Green Border",
-    tailwindClass: "border-green-500",
-    category: "Border Color",
-  },
-  {
-    userFriendly: "Yellow Border",
-    tailwindClass: "border-yellow-500",
-    category: "Border Color",
-  },
-  {
-    userFriendly: "Purple Border",
-    tailwindClass: "border-purple-500",
-    category: "Border Color",
-  },
-  {
-    userFriendly: "Gray Border",
-    tailwindClass: "border-gray-300",
-    category: "Border Color",
-  },
-
-  // Border Radius
-  {
-    userFriendly: "No Rounded",
-    tailwindClass: "rounded-none",
-    category: "Border Radius",
-  },
-  {
-    userFriendly: "Small Rounded",
-    tailwindClass: "rounded-sm",
-    category: "Border Radius",
-  },
-  {
-    userFriendly: "Rounded",
-    tailwindClass: "rounded",
-    category: "Border Radius",
-  },
-  {
-    userFriendly: "Medium Rounded",
-    tailwindClass: "rounded-md",
-    category: "Border Radius",
-  },
-  {
-    userFriendly: "Large Rounded",
-    tailwindClass: "rounded-lg",
-    category: "Border Radius",
-  },
-  {
-    userFriendly: "Extra Large Rounded",
-    tailwindClass: "rounded-xl",
-    category: "Border Radius",
-  },
-  {
-    userFriendly: "Full Rounded (Circle)",
-    tailwindClass: "rounded-full",
-    category: "Border Radius",
-  },
-
-  // Shadow
-  {
-    userFriendly: "No Shadow",
-    tailwindClass: "shadow-none",
-    category: "Shadow",
-  },
-  {
-    userFriendly: "Small Shadow",
-    tailwindClass: "shadow-sm",
-    category: "Shadow",
-  },
-  { userFriendly: "Shadow", tailwindClass: "shadow", category: "Shadow" },
-  {
-    userFriendly: "Medium Shadow",
-    tailwindClass: "shadow-md",
-    category: "Shadow",
-  },
-  {
-    userFriendly: "Large Shadow",
-    tailwindClass: "shadow-lg",
-    category: "Shadow",
-  },
-  {
-    userFriendly: "Extra Large Shadow",
-    tailwindClass: "shadow-xl",
-    category: "Shadow",
-  },
-  {
-    userFriendly: "2X Large Shadow",
-    tailwindClass: "shadow-2xl",
-    category: "Shadow",
-  },
-
-  // Opacity
-  {
-    userFriendly: "Invisible",
-    tailwindClass: "opacity-0",
-    category: "Opacity",
-  },
-  {
-    userFriendly: "Quarter Visible",
-    tailwindClass: "opacity-25",
-    category: "Opacity",
-  },
-  {
-    userFriendly: "Half Visible",
-    tailwindClass: "opacity-50",
-    category: "Opacity",
-  },
-  {
-    userFriendly: "Three-Quarters Visible",
-    tailwindClass: "opacity-75",
-    category: "Opacity",
-  },
-  {
-    userFriendly: "Fully Visible",
-    tailwindClass: "opacity-100",
-    category: "Opacity",
-  },
-
-  // Display
-  { userFriendly: "Block", tailwindClass: "block", category: "Display" },
-  {
-    userFriendly: "Inline Block",
-    tailwindClass: "inline-block",
-    category: "Display",
-  },
-  { userFriendly: "Inline", tailwindClass: "inline", category: "Display" },
-  { userFriendly: "Flex", tailwindClass: "flex", category: "Display" },
-  { userFriendly: "Grid", tailwindClass: "grid", category: "Display" },
-  { userFriendly: "Hidden", tailwindClass: "hidden", category: "Display" },
-
-  // Flex
-  { userFriendly: "Flex Row", tailwindClass: "flex-row", category: "Flex" },
-  { userFriendly: "Flex Column", tailwindClass: "flex-col", category: "Flex" },
-  { userFriendly: "Flex Wrap", tailwindClass: "flex-wrap", category: "Flex" },
-  { userFriendly: "No Wrap", tailwindClass: "flex-nowrap", category: "Flex" },
-
-  // Justify Content
-  {
-    userFriendly: "Justify Start",
-    tailwindClass: "justify-start",
-    category: "Justify Content",
-  },
-  {
-    userFriendly: "Justify Center",
-    tailwindClass: "justify-center",
-    category: "Justify Content",
-  },
-  {
-    userFriendly: "Justify End",
-    tailwindClass: "justify-end",
-    category: "Justify Content",
-  },
-  {
-    userFriendly: "Justify Between",
-    tailwindClass: "justify-between",
-    category: "Justify Content",
-  },
-  {
-    userFriendly: "Justify Around",
-    tailwindClass: "justify-around",
-    category: "Justify Content",
-  },
-
-  // Align Items
-  {
-    userFriendly: "Align Start",
-    tailwindClass: "items-start",
-    category: "Align Items",
-  },
-  {
-    userFriendly: "Align Center",
-    tailwindClass: "items-center",
-    category: "Align Items",
-  },
-  {
-    userFriendly: "Align End",
-    tailwindClass: "items-end",
-    category: "Align Items",
-  },
-  {
-    userFriendly: "Align Stretch",
-    tailwindClass: "items-stretch",
-    category: "Align Items",
-  },
-
-  // Gap
-  { userFriendly: "No Gap", tailwindClass: "gap-0", category: "Gap" },
-  { userFriendly: "Tiny Gap", tailwindClass: "gap-1", category: "Gap" },
-  { userFriendly: "Small Gap", tailwindClass: "gap-2", category: "Gap" },
-  { userFriendly: "Medium Gap", tailwindClass: "gap-4", category: "Gap" },
-  { userFriendly: "Large Gap", tailwindClass: "gap-6", category: "Gap" },
-  { userFriendly: "Extra Large Gap", tailwindClass: "gap-8", category: "Gap" },
-
-  // Transitions
-  {
-    userFriendly: "No Transition",
-    tailwindClass: "transition-none",
-    category: "Transitions",
-  },
-  {
-    userFriendly: "Transition All",
-    tailwindClass: "transition-all",
-    category: "Transitions",
-  },
-  {
-    userFriendly: "Transition",
-    tailwindClass: "transition",
-    category: "Transitions",
-  },
-  {
-    userFriendly: "Transition Colors",
-    tailwindClass: "transition-colors",
-    category: "Transitions",
-  },
-  {
-    userFriendly: "Fast Duration",
-    tailwindClass: "duration-150",
-    category: "Transitions",
-  },
-  {
-    userFriendly: "Normal Duration",
-    tailwindClass: "duration-300",
-    category: "Transitions",
-  },
-  {
-    userFriendly: "Slow Duration",
-    tailwindClass: "duration-500",
-    category: "Transitions",
-  },
-
-  // Cursor
-  {
-    userFriendly: "Pointer Cursor",
-    tailwindClass: "cursor-pointer",
-    category: "Cursor",
-  },
-  {
-    userFriendly: "Default Cursor",
-    tailwindClass: "cursor-default",
-    category: "Cursor",
-  },
-  {
-    userFriendly: "Not Allowed Cursor",
-    tailwindClass: "cursor-not-allowed",
-    category: "Cursor",
-  },
-
-  // Position
-  { userFriendly: "Static", tailwindClass: "static", category: "Position" },
-  { userFriendly: "Relative", tailwindClass: "relative", category: "Position" },
-  { userFriendly: "Absolute", tailwindClass: "absolute", category: "Position" },
-  { userFriendly: "Fixed", tailwindClass: "fixed", category: "Position" },
-  { userFriendly: "Sticky", tailwindClass: "sticky", category: "Position" },
-
-  // Overflow
-  {
-    userFriendly: "Overflow Auto",
-    tailwindClass: "overflow-auto",
-    category: "Overflow",
-  },
-  {
-    userFriendly: "Overflow Hidden",
-    tailwindClass: "overflow-hidden",
-    category: "Overflow",
-  },
-  {
-    userFriendly: "Overflow Scroll",
-    tailwindClass: "overflow-scroll",
-    category: "Overflow",
-  },
-
-  // Letter Spacing
-  {
-    userFriendly: "Tight Spacing",
-    tailwindClass: "tracking-tight",
-    category: "Letter Spacing",
-  },
-  {
-    userFriendly: "Normal Spacing",
-    tailwindClass: "tracking-normal",
-    category: "Letter Spacing",
-  },
-  {
-    userFriendly: "Wide Spacing",
-    tailwindClass: "tracking-wide",
-    category: "Letter Spacing",
-  },
-  {
-    userFriendly: "Wider Spacing",
-    tailwindClass: "tracking-wider",
-    category: "Letter Spacing",
-  },
-
-  // Line Height
-  {
-    userFriendly: "Tight Line Height",
-    tailwindClass: "leading-tight",
-    category: "Line Height",
-  },
-  {
-    userFriendly: "Normal Line Height",
-    tailwindClass: "leading-normal",
-    category: "Line Height",
-  },
-  {
-    userFriendly: "Relaxed Line Height",
-    tailwindClass: "leading-relaxed",
-    category: "Line Height",
-  },
-  {
-    userFriendly: "Loose Line Height",
-    tailwindClass: "leading-loose",
-    category: "Line Height",
-  },
-]
-
-/**
- * Get grouped classes with user-friendly names
- */
-export function getUserFriendlyClasses(): {
-  category: string
-  items: { label: string; value: string }[]
-}[] {
-  const grouped = new Map<string, { label: string; value: string }[]>()
-
-  classMappings.forEach(({ category, userFriendly, tailwindClass }) => {
-    if (!grouped.has(category)) {
-      grouped.set(category, [])
-    }
-    grouped.get(category)!.push({
-      label: userFriendly,
-      value: tailwindClass,
-    })
-  })
-
-  return Array.from(grouped.entries()).map(([category, items]) => ({
-    category,
-    items,
-  }))
-}
-
-/**
- * Search user-friendly classes
- */
-export function searchUserFriendlyClasses(query: string) {
-  const lowerQuery = query.toLowerCase()
-  const grouped = new Map<string, { label: string; value: string }[]>()
-
-  classMappings
-    .filter(
-      ({ userFriendly, tailwindClass }) =>
-        userFriendly.toLowerCase().includes(lowerQuery) ||
-        tailwindClass.toLowerCase().includes(lowerQuery)
-    )
-    .forEach(({ category, userFriendly, tailwindClass }) => {
-      if (!grouped.has(category)) {
-        grouped.set(category, [])
-      }
-      grouped.get(category)!.push({
-        label: userFriendly,
-        value: tailwindClass,
-      })
-    })
-
-  return Array.from(grouped.entries()).map(([category, items]) => ({
-    category,
-    items,
-  }))
-}
diff --git a/apps/web/src/components/ui/rich-editor/color-picker-index.tsx b/apps/web/src/components/ui/rich-editor/color-picker-index.tsx
deleted file mode 100644
index 65dc8ace..00000000
--- a/apps/web/src/components/ui/rich-editor/color-picker-index.tsx
+++ /dev/null
@@ -1,472 +0,0 @@
-"use client"
-
-import {
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ComponentProps,
-  type HTMLAttributes,
-} from "react"
-import * as Slider from "@radix-ui/react-slider"
-import Color from "color"
-import { PipetteIcon } from "lucide-react"
-
-import { Button } from "../button"
-import { Input } from "../input"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../select"
-import { cn } from "./lib/utils"
-
-interface ColorPickerContextValue {
-  hue: number
-  saturation: number
-  lightness: number
-  alpha: number
-  mode: string
-  setHue: (hue: number) => void
-  setSaturation: (saturation: number) => void
-  setLightness: (lightness: number) => void
-  setAlpha: (alpha: number) => void
-  setMode: (mode: string) => void
-}
-
-const ColorPickerContext = createContext<ColorPickerContextValue | undefined>(
-  undefined
-)
-
-export const useColorPicker = () => {
-  const context = useContext(ColorPickerContext)
-
-  if (!context) {
-    throw new Error("useColorPicker must be used within a ColorPickerProvider")
-  }
-
-  return context
-}
-
-export type ColorPickerProps = HTMLAttributes<HTMLDivElement> & {
-  value?: Parameters<typeof Color>[0]
-  defaultValue?: Parameters<typeof Color>[0]
-  onChange?: (value: Parameters<typeof Color.rgb>[0]) => void
-}
-
-export const ColorPicker = ({
-  value,
-  defaultValue = "#000000",
-  onChange,
-  className,
-  ...props
-}: ColorPickerProps) => {
-  const selectedColor = Color(value)
-  const defaultColor = Color(defaultValue)
-
-  const [hue, setHue] = useState(selectedColor.hue() || defaultColor.hue() || 0)
-  const [saturation, setSaturation] = useState(
-    selectedColor.saturationl() || defaultColor.saturationl() || 100
-  )
-  const [lightness, setLightness] = useState(
-    selectedColor.lightness() || defaultColor.lightness() || 50
-  )
-  const [alpha, setAlpha] = useState(
-    selectedColor.alpha() * 100 || defaultColor.alpha() * 100
-  )
-  const [mode, setMode] = useState("hex")
-
-  // Update color when controlled value changes
-  useEffect(() => {
-    if (value) {
-      const color = Color.rgb(value).rgb().object()
-
-      setHue(color.r)
-      setSaturation(color.g)
-      setLightness(color.b)
-      setAlpha(color.a)
-    }
-  }, [value])
-
-  // Notify parent of changes
-  useEffect(() => {
-    if (onChange) {
-      const color = Color.hsl(hue, saturation, lightness).alpha(alpha / 100)
-      const rgba = color.rgb().array()
-
-      onChange([rgba[0], rgba[1], rgba[2], alpha / 100])
-    }
-  }, [hue, saturation, lightness, alpha, onChange])
-
-  return (
-    <ColorPickerContext.Provider
-      value={{
-        hue,
-        saturation,
-        lightness,
-        alpha,
-        mode,
-        setHue,
-        setSaturation,
-        setLightness,
-        setAlpha,
-        setMode,
-      }}
-    >
-      <div
-        className={cn("flex size-full flex-col gap-4", className)}
-        {...props}
-      />
-    </ColorPickerContext.Provider>
-  )
-}
-
-export type ColorPickerSelectionProps = HTMLAttributes<HTMLDivElement>
-
-export const ColorPickerSelection = memo(
-  ({ className, ...props }: ColorPickerSelectionProps) => {
-    const containerRef = useRef<HTMLDivElement>(null)
-    const [isDragging, setIsDragging] = useState(false)
-    const [positionX, setPositionX] = useState(0)
-    const [positionY, setPositionY] = useState(0)
-    const { hue, setSaturation, setLightness } = useColorPicker()
-
-    const backgroundGradient = useMemo(() => {
-      return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),
-            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),
-            hsl(${hue}, 100%, 50%)`
-    }, [hue])
-
-    const handlePointerMove = useCallback(
-      (event: PointerEvent) => {
-        if (!(isDragging && containerRef.current)) {
-          return
-        }
-        const rect = containerRef.current.getBoundingClientRect()
-        const x = Math.max(
-          0,
-          Math.min(1, (event.clientX - rect.left) / rect.width)
-        )
-        const y = Math.max(
-          0,
-          Math.min(1, (event.clientY - rect.top) / rect.height)
-        )
-        setPositionX(x)
-        setPositionY(y)
-        setSaturation(x * 100)
-        const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x)
-        const lightness = topLightness * (1 - y)
-
-        setLightness(lightness)
-      },
-      [isDragging, setSaturation, setLightness]
-    )
-
-    useEffect(() => {
-      const handlePointerUp = () => setIsDragging(false)
-
-      if (isDragging) {
-        window.addEventListener("pointermove", handlePointerMove)
-        window.addEventListener("pointerup", handlePointerUp)
-      }
-
-      return () => {
-        window.removeEventListener("pointermove", handlePointerMove)
-        window.removeEventListener("pointerup", handlePointerUp)
-      }
-    }, [isDragging, handlePointerMove])
-
-    return (
-      <div
-        className={cn("relative size-full cursor-crosshair rounded", className)}
-        onPointerDown={(e) => {
-          e.preventDefault()
-          setIsDragging(true)
-          handlePointerMove(e.nativeEvent)
-        }}
-        ref={containerRef}
-        style={{
-          background: backgroundGradient,
-        }}
-        {...props}
-      >
-        <div
-          className="pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
-          style={{
-            left: `${positionX * 100}%`,
-            top: `${positionY * 100}%`,
-            boxShadow: "0 0 0 1px rgba(0,0,0,0.5)",
-          }}
-        />
-      </div>
-    )
-  }
-)
-
-ColorPickerSelection.displayName = "ColorPickerSelection"
-
-export type ColorPickerHueProps = ComponentProps<typeof Slider.Root>
-
-export const ColorPickerHue = ({
-  className,
-  ...props
-}: ColorPickerHueProps) => {
-  const { hue, setHue } = useColorPicker()
-
-  return (
-    <Slider.Root
-      className={cn("relative flex h-4 w-full touch-none", className)}
-      max={360}
-      onValueChange={([hue]) => setHue(hue)}
-      step={1}
-      value={[hue]}
-      {...props}
-    >
-      <Slider.Track className="relative my-0.5 h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,#FF0000)]">
-        <Slider.Range className="absolute h-full" />
-      </Slider.Track>
-      <Slider.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
-    </Slider.Root>
-  )
-}
-
-export type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>
-
-export const ColorPickerAlpha = ({
-  className,
-  ...props
-}: ColorPickerAlphaProps) => {
-  const { alpha, setAlpha } = useColorPicker()
-
-  return (
-    <Slider.Root
-      className={cn("relative flex h-4 w-full touch-none", className)}
-      max={100}
-      onValueChange={([alpha]) => setAlpha(alpha)}
-      step={1}
-      value={[alpha]}
-      {...props}
-    >
-      <Slider.Track
-        className="relative my-0.5 h-3 w-full grow rounded-full"
-        style={{
-          background:
-            'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center',
-        }}
-      >
-        <div className="absolute inset-0 rounded-full bg-gradient-to-r from-transparent to-black/50" />
-        <Slider.Range className="absolute h-full rounded-full bg-transparent" />
-      </Slider.Track>
-      <Slider.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
-    </Slider.Root>
-  )
-}
-
-export type ColorPickerEyeDropperProps = ComponentProps<typeof Button>
-
-export const ColorPickerEyeDropper = ({
-  className,
-  ...props
-}: ColorPickerEyeDropperProps) => {
-  const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker()
-
-  const handleEyeDropper = async () => {
-    try {
-      // @ts-expect-error - EyeDropper API is experimental
-      const eyeDropper = new EyeDropper()
-      const result = await eyeDropper.open()
-      const color = Color(result.sRGBHex)
-      const [h, s, l] = color.hsl().array()
-
-      setHue(h)
-      setSaturation(s)
-      setLightness(l)
-      setAlpha(100)
-    } catch (error) {
-      console.error("EyeDropper failed:", error)
-    }
-  }
-
-  return (
-    <Button
-      className={cn("text-muted-foreground shrink-0", className)}
-      onClick={handleEyeDropper}
-      size="icon"
-      variant="outline"
-      type="button"
-      {...props}
-    >
-      <PipetteIcon size={16} />
-    </Button>
-  )
-}
-
-export type ColorPickerOutputProps = ComponentProps<typeof SelectTrigger>
-
-const formats = ["hex", "rgb", "css", "hsl"]
-
-export const ColorPickerOutput = ({
-  className,
-  ...props
-}: ColorPickerOutputProps) => {
-  const { mode, setMode } = useColorPicker()
-
-  return (
-    <Select onValueChange={setMode} value={mode}>
-      <SelectTrigger className="h-8 w-20 shrink-0 text-xs" {...props}>
-        <SelectValue placeholder="Mode" />
-      </SelectTrigger>
-      <SelectContent>
-        {formats.map((format) => (
-          <SelectItem className="text-xs" key={format} value={format}>
-            {format.toUpperCase()}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  )
-}
-
-type PercentageInputProps = ComponentProps<typeof Input>
-
-const PercentageInput = ({ className, ...props }: PercentageInputProps) => {
-  return (
-    <div className="relative">
-      <Input
-        readOnly
-        type="text"
-        {...props}
-        className={cn(
-          "bg-secondary h-8 w-[3.25rem] rounded-l-none px-2 text-xs shadow-none",
-          className
-        )}
-      />
-      <span className="text-muted-foreground absolute top-1/2 right-2 -translate-y-1/2 text-xs">
-        %
-      </span>
-    </div>
-  )
-}
-
-export type ColorPickerFormatProps = HTMLAttributes<HTMLDivElement>
-
-export const ColorPickerFormat = ({
-  className,
-  ...props
-}: ColorPickerFormatProps) => {
-  const { hue, saturation, lightness, alpha, mode } = useColorPicker()
-  const color = Color.hsl(hue, saturation, lightness, alpha / 100)
-
-  if (mode === "hex") {
-    const hex = color.hex()
-
-    return (
-      <div
-        className={cn(
-          "relative flex w-full items-center -space-x-px rounded-md shadow-sm",
-          className
-        )}
-        {...props}
-      >
-        <Input
-          className="bg-secondary h-8 rounded-r-none px-2 text-xs shadow-none"
-          readOnly
-          type="text"
-          value={hex}
-        />
-        <PercentageInput value={alpha} />
-      </div>
-    )
-  }
-
-  if (mode === "rgb") {
-    const rgb = color
-      .rgb()
-      .array()
-      .map((value) => Math.round(value))
-
-    return (
-      <div
-        className={cn(
-          "flex items-center -space-x-px rounded-md shadow-sm",
-          className
-        )}
-        {...props}
-      >
-        {rgb.map((value, index) => (
-          <Input
-            className={cn(
-              "bg-secondary h-8 rounded-r-none px-2 text-xs shadow-none",
-              index && "rounded-l-none",
-              className
-            )}
-            key={index}
-            readOnly
-            type="text"
-            value={value}
-          />
-        ))}
-        <PercentageInput value={alpha} />
-      </div>
-    )
-  }
-
-  if (mode === "css") {
-    const rgb = color
-      .rgb()
-      .array()
-      .map((value) => Math.round(value))
-
-    return (
-      <div className={cn("w-full rounded-md shadow-sm", className)} {...props}>
-        <Input
-          className="bg-secondary h-8 w-full px-2 text-xs shadow-none"
-          readOnly
-          type="text"
-          value={`rgba(${rgb.join(", ")}, ${alpha}%)`}
-          {...props}
-        />
-      </div>
-    )
-  }
-
-  if (mode === "hsl") {
-    const hsl = color
-      .hsl()
-      .array()
-      .map((value) => Math.round(value))
-
-    return (
-      <div
-        className={cn(
-          "flex items-center -space-x-px rounded-md shadow-sm",
-          className
-        )}
-        {...props}
-      >
-        {hsl.map((value, index) => (
-          <Input
-            className={cn(
-              "bg-secondary h-8 rounded-r-none px-2 text-xs shadow-none",
-              index && "rounded-l-none",
-              className
-            )}
-            key={index}
-            readOnly
-            type="text"
-            value={value}
-          />
-        ))}
-        <PercentageInput value={alpha} />
-      </div>
-    )
-  }
-
-  return null
-}
diff --git a/apps/web/src/components/ui/rich-editor/color-picker-interface.tsx b/apps/web/src/components/ui/rich-editor/color-picker-interface.tsx
deleted file mode 100644
index 67024e4b..00000000
--- a/apps/web/src/components/ui/rich-editor/color-picker-interface.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-"use client"
-
-import { useRef, useState } from "react"
-import { Palette } from "lucide-react"
-
-import { Button } from "../button"
-import { Popover, PopoverContent, PopoverTrigger } from "../popover"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs"
-import {
-  ColorPickerAlpha,
-  ColorPickerEyeDropper,
-  ColorPickerFormat,
-  ColorPickerHue,
-  ColorPickerOutput,
-  ColorPickerSelection,
-  ColorPicker as ShadcnColorPicker,
-} from "./color-picker-index"
-
-interface ColorPickerComponentProps {
-  disabled?: boolean
-  onColorSelect: (color: string) => void
-  selectedColor?: string
-}
-
-const presetColors = [
-  { name: "Red", hex: "#ef4444" },
-  { name: "Orange", hex: "#f97316" },
-  { name: "Yellow", hex: "#eab308" },
-  { name: "Green", hex: "#22c55e" },
-  { name: "Blue", hex: "#3b82f6" },
-  { name: "Indigo", hex: "#6366f1" },
-  { name: "Purple", hex: "#a855f7" },
-  { name: "Pink", hex: "#ec4899" },
-  { name: "Teal", hex: "#14b8a6" },
-  { name: "Cyan", hex: "#06b6d4" },
-]
-
-export function ColorPickerComponent({
-  disabled,
-  onColorSelect,
-  selectedColor,
-}: ColorPickerComponentProps) {
-  // Start with a vibrant blue so it's clearly not white
-  const [displayColor, setDisplayColor] = useState("rgb(59, 130, 246)")
-  const customColorRef = useRef<string>("#3b82f6")
-
-  const handleCustomColorChange = (value: any) => {
-    let hexColor = "#000000"
-
-    if (typeof value === "string") {
-      hexColor = value
-    } else if (Array.isArray(value)) {
-      // Extract RGB values (ignore alpha - it's the 4th element and can be NaN)
-      const [r, g, b] = value
-
-      // Ensure RGB values are valid numbers, clamp to 0-255 range
-      const rValue = Math.max(0, Math.min(255, Math.round(r || 0)))
-      const gValue = Math.max(0, Math.min(255, Math.round(g || 0)))
-      const bValue = Math.max(0, Math.min(255, Math.round(b || 0)))
-
-      hexColor = `#${rValue.toString(16).padStart(2, "0")}${gValue.toString(16).padStart(2, "0")}${bValue.toString(16).padStart(2, "0")}`
-    }
-
-    // Update ref with the current color
-    customColorRef.current = hexColor
-    // Update display
-    setDisplayColor(hexColor)
-  }
-
-  const handleApplyCustomColor = () => {
-    // Send the hex color directly (we'll handle it as inline style)
-    const hexColor = customColorRef.current
-    onColorSelect(hexColor)
-  }
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          disabled={disabled}
-          className="h-7 gap-1 px-2 md:h-8 md:gap-2 md:px-3"
-        >
-          <Palette className="size-3 md:size-4" />
-          <span className="text-xs md:text-sm">Color</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[calc(100vw-2rem)] max-w-96 sm:w-96">
-        <Tabs defaultValue="preset" className="w-full">
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="preset">Preset Colors</TabsTrigger>
-            <TabsTrigger value="custom">Custom Color</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="preset" className="space-y-3">
-            <h4 className="text-sm font-medium">Text Colors</h4>
-            <div className="grid grid-cols-5 gap-2">
-              {presetColors.map((color) => (
-                <button
-                  key={color.hex}
-                  onClick={() => onColorSelect(color.hex)}
-                  className={`h-10 rounded-md border-2 transition-all hover:scale-110 ${
-                    selectedColor === color.hex
-                      ? "border-foreground"
-                      : "border-border"
-                  }`}
-                  title={color.name}
-                  style={{ color: color.hex }}
-                >
-                  <span className="text-2xl font-bold">A</span>
-                </button>
-              ))}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="custom" className="space-y-3">
-            <h4 className="text-sm font-medium">Custom Color Picker</h4>
-            <ShadcnColorPicker
-              defaultValue="#3b82f6"
-              onChange={handleCustomColorChange}
-              className="bg-background w-full rounded-md border p-4 shadow-sm"
-            >
-              <ColorPickerSelection className="h-32" />
-              <div className="flex items-center gap-4">
-                <ColorPickerEyeDropper />
-                <div className="grid w-full gap-1">
-                  <ColorPickerHue />
-                  <ColorPickerAlpha />
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <ColorPickerOutput />
-                <ColorPickerFormat />
-              </div>
-            </ShadcnColorPicker>
-            <Button
-              onClick={handleApplyCustomColor}
-              className="w-full"
-              size="sm"
-            >
-              Apply Custom Color
-            </Button>
-            <div className="flex items-center gap-2 rounded-md border p-2">
-              <div
-                className="h-8 w-8 rounded border"
-                style={{ backgroundColor: displayColor }}
-              />
-              <span className="font-mono text-xs">{displayColor}</span>
-            </div>
-          </TabsContent>
-        </Tabs>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/color-picker.tsx b/apps/web/src/components/ui/rich-editor/color-picker.tsx
deleted file mode 100644
index 67024e4b..00000000
--- a/apps/web/src/components/ui/rich-editor/color-picker.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-"use client"
-
-import { useRef, useState } from "react"
-import { Palette } from "lucide-react"
-
-import { Button } from "../button"
-import { Popover, PopoverContent, PopoverTrigger } from "../popover"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs"
-import {
-  ColorPickerAlpha,
-  ColorPickerEyeDropper,
-  ColorPickerFormat,
-  ColorPickerHue,
-  ColorPickerOutput,
-  ColorPickerSelection,
-  ColorPicker as ShadcnColorPicker,
-} from "./color-picker-index"
-
-interface ColorPickerComponentProps {
-  disabled?: boolean
-  onColorSelect: (color: string) => void
-  selectedColor?: string
-}
-
-const presetColors = [
-  { name: "Red", hex: "#ef4444" },
-  { name: "Orange", hex: "#f97316" },
-  { name: "Yellow", hex: "#eab308" },
-  { name: "Green", hex: "#22c55e" },
-  { name: "Blue", hex: "#3b82f6" },
-  { name: "Indigo", hex: "#6366f1" },
-  { name: "Purple", hex: "#a855f7" },
-  { name: "Pink", hex: "#ec4899" },
-  { name: "Teal", hex: "#14b8a6" },
-  { name: "Cyan", hex: "#06b6d4" },
-]
-
-export function ColorPickerComponent({
-  disabled,
-  onColorSelect,
-  selectedColor,
-}: ColorPickerComponentProps) {
-  // Start with a vibrant blue so it's clearly not white
-  const [displayColor, setDisplayColor] = useState("rgb(59, 130, 246)")
-  const customColorRef = useRef<string>("#3b82f6")
-
-  const handleCustomColorChange = (value: any) => {
-    let hexColor = "#000000"
-
-    if (typeof value === "string") {
-      hexColor = value
-    } else if (Array.isArray(value)) {
-      // Extract RGB values (ignore alpha - it's the 4th element and can be NaN)
-      const [r, g, b] = value
-
-      // Ensure RGB values are valid numbers, clamp to 0-255 range
-      const rValue = Math.max(0, Math.min(255, Math.round(r || 0)))
-      const gValue = Math.max(0, Math.min(255, Math.round(g || 0)))
-      const bValue = Math.max(0, Math.min(255, Math.round(b || 0)))
-
-      hexColor = `#${rValue.toString(16).padStart(2, "0")}${gValue.toString(16).padStart(2, "0")}${bValue.toString(16).padStart(2, "0")}`
-    }
-
-    // Update ref with the current color
-    customColorRef.current = hexColor
-    // Update display
-    setDisplayColor(hexColor)
-  }
-
-  const handleApplyCustomColor = () => {
-    // Send the hex color directly (we'll handle it as inline style)
-    const hexColor = customColorRef.current
-    onColorSelect(hexColor)
-  }
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          disabled={disabled}
-          className="h-7 gap-1 px-2 md:h-8 md:gap-2 md:px-3"
-        >
-          <Palette className="size-3 md:size-4" />
-          <span className="text-xs md:text-sm">Color</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[calc(100vw-2rem)] max-w-96 sm:w-96">
-        <Tabs defaultValue="preset" className="w-full">
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="preset">Preset Colors</TabsTrigger>
-            <TabsTrigger value="custom">Custom Color</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="preset" className="space-y-3">
-            <h4 className="text-sm font-medium">Text Colors</h4>
-            <div className="grid grid-cols-5 gap-2">
-              {presetColors.map((color) => (
-                <button
-                  key={color.hex}
-                  onClick={() => onColorSelect(color.hex)}
-                  className={`h-10 rounded-md border-2 transition-all hover:scale-110 ${
-                    selectedColor === color.hex
-                      ? "border-foreground"
-                      : "border-border"
-                  }`}
-                  title={color.name}
-                  style={{ color: color.hex }}
-                >
-                  <span className="text-2xl font-bold">A</span>
-                </button>
-              ))}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="custom" className="space-y-3">
-            <h4 className="text-sm font-medium">Custom Color Picker</h4>
-            <ShadcnColorPicker
-              defaultValue="#3b82f6"
-              onChange={handleCustomColorChange}
-              className="bg-background w-full rounded-md border p-4 shadow-sm"
-            >
-              <ColorPickerSelection className="h-32" />
-              <div className="flex items-center gap-4">
-                <ColorPickerEyeDropper />
-                <div className="grid w-full gap-1">
-                  <ColorPickerHue />
-                  <ColorPickerAlpha />
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <ColorPickerOutput />
-                <ColorPickerFormat />
-              </div>
-            </ShadcnColorPicker>
-            <Button
-              onClick={handleApplyCustomColor}
-              className="w-full"
-              size="sm"
-            >
-              Apply Custom Color
-            </Button>
-            <div className="flex items-center gap-2 rounded-md border p-2">
-              <div
-                className="h-8 w-8 rounded border"
-                style={{ backgroundColor: displayColor }}
-              />
-              <span className="font-mono text-xs">{displayColor}</span>
-            </div>
-          </TabsContent>
-        </Tabs>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/command-menu.tsx b/apps/web/src/components/ui/rich-editor/command-menu.tsx
deleted file mode 100644
index c0b4a407..00000000
--- a/apps/web/src/components/ui/rich-editor/command-menu.tsx
+++ /dev/null
@@ -1,512 +0,0 @@
-"use client"
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import {
-  Code,
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  Heading5,
-  Heading6,
-  Image,
-  List,
-  ListOrdered,
-  Quote,
-  Table,
-  Type,
-  Video,
-} from "lucide-react"
-
-import { EditorActions } from "."
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "../command"
-import { Popover, PopoverAnchor, PopoverContent } from "../popover"
-import { useEditorDispatch } from "./store/editor-store"
-import { useTranslations } from "next-intl"
-
-export interface CommandOption {
-  label: string
-  value: string
-  icon: React.ReactNode
-  description?: string
-  keywords?: string[]
-}
-
-interface CommandMenuProps {
-  isOpen: boolean
-  onClose: () => void
-  onSelect: (value: string) => void
-  anchorElement: HTMLElement | null
-  nodeId: string // ID of the block being transformed
-  onUploadImage?: (file: File) => Promise<string> // Custom image upload handler
-}
-
-export function CommandMenu({
-  isOpen,
-  onClose,
-  onSelect,
-  anchorElement,
-  nodeId,
-  onUploadImage,
-}: CommandMenuProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const [search, setSearch] = useState("")
-  const [isUploading, setIsUploading] = useState(false)
-  const commandRef = useRef<HTMLDivElement>(null)
-
-  const dispatch = useEditorDispatch()
-  const t = useTranslations("RichEditor")
-  const tMedia = useTranslations("RichEditor.media")
-  const tToasts = useTranslations("RichEditor.toasts")
-
-  const commands = useMemo<CommandOption[]>(
-    () => [
-      {
-        label: t("command.h1.label"),
-        value: "h1",
-        icon: <Heading1 className="h-4 w-4" />,
-        description: t("command.h1.description"),
-        keywords: t("command.h1.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.h2.label"),
-        value: "h2",
-        icon: <Heading2 className="h-4 w-4" />,
-        description: t("command.h2.description"),
-        keywords: t("command.h2.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.h3.label"),
-        value: "h3",
-        icon: <Heading3 className="h-4 w-4" />,
-        description: t("command.h3.description"),
-        keywords: t("command.h3.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.h4.label"),
-        value: "h4",
-        icon: <Heading4 className="h-4 w-4" />,
-        description: t("command.h4.description"),
-        keywords: t("command.h4.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.h5.label"),
-        value: "h5",
-        icon: <Heading5 className="h-4 w-4" />,
-        description: t("command.h5.description"),
-        keywords: t("command.h5.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.h6.label"),
-        value: "h6",
-        icon: <Heading6 className="h-4 w-4" />,
-        description: t("command.h6.description"),
-        keywords: t("command.h6.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.p.label"),
-        value: "p",
-        icon: <Type className="h-4 w-4" />,
-        description: t("command.p.description"),
-        keywords: t("command.p.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.code.label"),
-        value: "code",
-        icon: <Code className="h-4 w-4" />,
-        description: t("command.code.description"),
-        keywords: t("command.code.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.blockquote.label"),
-        value: "blockquote",
-        icon: <Quote className="h-4 w-4" />,
-        description: t("command.blockquote.description"),
-        keywords: t("command.blockquote.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.li.label"),
-        value: "li",
-        icon: <List className="h-4 w-4" />,
-        description: t("command.li.description"),
-        keywords: t("command.li.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.ol.label"),
-        value: "ol",
-        icon: <ListOrdered className="h-4 w-4" />,
-        description: t("command.ol.description"),
-        keywords: t("command.ol.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.img.label"),
-        value: "img",
-        icon: <Image className="h-4 w-4" />,
-        description: t("command.img.description"),
-        keywords: t("command.img.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.video.label"),
-        value: "video",
-        icon: <Video className="h-4 w-4" />,
-        description: t("command.video.description"),
-        keywords: t("command.video.keywords").split(",").map((s) => s.trim()),
-      },
-      {
-        label: t("command.table.label"),
-        value: "table",
-        icon: <Table className="h-4 w-4" />,
-        description: t("command.table.description"),
-        keywords: t("command.table.keywords").split(",").map((s) => s.trim()),
-      },
-    ],
-    [t]
-  )
-
-  // Handle command selection - for image/video, we'll use dispatch directly here
-  const handleSelect = useCallback(
-    async (commandValue: string) => {
-      // Special handling for image - trigger file picker and upload
-      if (commandValue === "img") {
-        // Close the menu first
-        onClose()
-
-        // Create a hidden file input
-        const fileInput = document.createElement("input")
-        fileInput.type = "file"
-        fileInput.accept = "image/*"
-        fileInput.style.display = "none"
-
-        fileInput.onchange = async (e) => {
-          const file = (e.target as HTMLInputElement).files?.[0]
-          if (!file) return
-
-          // Show loading state immediately
-          setIsUploading(true)
-
-          // Create placeholder image with loading state
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              dispatch(
-                EditorActions.updateNode(nodeId, {
-                  type: "img",
-                  content: "", // Empty caption initially
-                  attributes: {
-                    src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iI2YzZjRmNiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiM5Y2EzYWYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5VcGxvYWRpbmcuLi48L3RleHQ+PC9zdmc+",
-                    alt: tMedia("uploadingAlt"),
-                    loading: "true", // Custom attribute to indicate loading
-                  },
-                })
-              )
-            })
-          })
-
-          try {
-            // Use custom upload handler if provided
-            let imageUrl: string
-
-            if (onUploadImage) {
-              imageUrl = await onUploadImage(file)
-            } else {
-              // Fallback: use default upload
-              const { uploadImage } = await import("./utils/image-upload")
-              const result = await uploadImage(file)
-              if (!result.success || !result.url) {
-                throw new Error(result.error || tToasts("uploadFailed"))
-              }
-              imageUrl = result.url
-            }
-
-            // Update with actual image URL
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                dispatch(
-                  EditorActions.updateNode(nodeId, {
-                    type: "img",
-                    content: "", // Empty caption initially
-                    attributes: {
-                      src: imageUrl,
-                      alt: file.name,
-                    },
-                  })
-                )
-              })
-            })
-          } catch (error) {
-            console.error("Image upload failed:", error)
-            // Revert to error state
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                dispatch(
-                  EditorActions.updateNode(nodeId, {
-                    type: "img",
-                    content: "",
-                    attributes: {
-                      src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iI2ZlZjJmMiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiNlZjQ0NDQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5VcGxvYWQgRmFpbGVkPC90ZXh0Pjwvc3ZnPg==",
-                      alt: tMedia("uploadFailedAlt"),
-                      error: "true",
-                    },
-                  })
-                )
-              })
-            })
-          } finally {
-            setIsUploading(false)
-            // Clean up
-            document.body.removeChild(fileInput)
-          }
-        }
-
-        // Add to DOM and trigger click
-        document.body.appendChild(fileInput)
-        fileInput.click()
-        return
-      }
-
-      // Special handling for video - trigger file picker and upload
-      if (commandValue === "video") {
-        // Close the menu first
-        onClose()
-
-        // Create a hidden file input
-        const fileInput = document.createElement("input")
-        fileInput.type = "file"
-        fileInput.accept = "video/*"
-        fileInput.style.display = "none"
-
-        fileInput.onchange = async (e) => {
-          const file = (e.target as HTMLInputElement).files?.[0]
-          if (!file) return
-
-          // Show loading state immediately
-          setIsUploading(true)
-
-          // Create placeholder video with loading state
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              dispatch(
-                EditorActions.updateNode(nodeId, {
-                  type: "video",
-                  content: "", // Empty caption initially
-                  attributes: {
-                    src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iI2YzZjRmNiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiM5Y2EzYWYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5VcGxvYWRpbmcuLi48L3RleHQ+PC9zdmc+",
-                    alt: tMedia("uploadingAlt"),
-                    loading: "true", // Custom attribute to indicate loading
-                  },
-                })
-              )
-            })
-          })
-
-          try {
-            // Use custom upload handler if provided
-            let videoUrl: string
-
-            if (onUploadImage) {
-              // Reuse the same handler for video uploads
-              videoUrl = await onUploadImage(file)
-            } else {
-              // Fallback: use default upload (works for videos too)
-              const { uploadImage } = await import("./utils/image-upload")
-              const result = await uploadImage(file)
-              if (!result.success || !result.url) {
-                throw new Error(result.error || tToasts("uploadFailed"))
-              }
-              videoUrl = result.url
-            }
-
-            // Update with actual video URL
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                dispatch(
-                  EditorActions.updateNode(nodeId, {
-                    type: "video",
-                    content: "", // Empty caption initially
-                    attributes: {
-                      src: videoUrl,
-                      alt: file.name,
-                    },
-                  })
-                )
-              })
-            })
-          } catch (error) {
-            console.error("Video upload failed:", error)
-            // Revert to error state
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                dispatch(
-                  EditorActions.updateNode(nodeId, {
-                    type: "video",
-                    content: "",
-                    attributes: {
-                      src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iI2ZlZjJmMiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiNlZjQ0NDQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5VcGxvYWQgRmFpbGVkPC90ZXh0Pjwvc3ZnPg==",
-                      alt: tMedia("uploadFailedAlt"),
-                      error: "true",
-                    },
-                  })
-                )
-              })
-            })
-          } finally {
-            setIsUploading(false)
-            // Clean up
-            document.body.removeChild(fileInput)
-          }
-        }
-
-        // Add to DOM and trigger click
-        document.body.appendChild(fileInput)
-        fileInput.click()
-        return
-      }
-
-      // Special handling for table - just call onSelect which will open the table dialog
-      if (commandValue === "table") {
-        onClose()
-        onSelect(commandValue)
-        return
-      }
-
-      // For all other commands (including 'li' and 'ol'), call the original onSelect handler AFTER closing menu
-      onClose()
-      onSelect(commandValue)
-    },
-    [dispatch, nodeId, onSelect, onClose, onUploadImage, tMedia, tToasts]
-  )
-
-  // Filter commands based on search
-  const filteredCommands = search
-    ? commands.filter((cmd) => {
-        const searchLower = search.toLowerCase()
-        return (
-          cmd.label.toLowerCase().includes(searchLower) ||
-          cmd.value.toLowerCase().includes(searchLower) ||
-          cmd.keywords?.some((k) => k.toLowerCase().includes(searchLower))
-        )
-      })
-    : commands
-
-  // Reset selected index when filtered commands change
-  useEffect(() => {
-    setSelectedIndex(0)
-  }, [search])
-
-  // Handle keyboard navigation
-  useEffect(() => {
-    if (!isOpen) return
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "ArrowDown") {
-        e.preventDefault()
-        setSelectedIndex((prev) =>
-          prev < filteredCommands.length - 1 ? prev + 1 : prev
-        )
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault()
-        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev))
-      } else if (e.key === "Enter") {
-        e.preventDefault()
-        if (filteredCommands[selectedIndex]) {
-          handleSelect(filteredCommands[selectedIndex].value)
-        }
-      } else if (e.key === "Escape") {
-        e.preventDefault()
-        onClose()
-      }
-    }
-
-    document.addEventListener("keydown", handleKeyDown)
-    return () => document.removeEventListener("keydown", handleKeyDown)
-  }, [isOpen, selectedIndex, filteredCommands, handleSelect, onClose])
-
-  // Reset search when menu closes
-  useEffect(() => {
-    if (!isOpen) {
-      setSearch("")
-    }
-  }, [isOpen])
-
-  // Don't render if there's no anchor element
-  if (!anchorElement) return null
-
-  return (
-    <Popover
-      open={isOpen}
-      onOpenChange={(open) => {
-        // Only close if explicitly requested
-        if (!open) {
-          onClose()
-        }
-      }}
-    >
-      <PopoverAnchor virtualRef={{ current: anchorElement }} />
-      <PopoverContent
-        side="bottom"
-        align="start"
-        className="w-[320px] p-0"
-        onOpenAutoFocus={(e) => {
-          // Prevent stealing focus from the editor
-          e.preventDefault()
-        }}
-        onEscapeKeyDown={(e) => {
-          // Let Block component handle Escape
-          e.preventDefault()
-        }}
-        onFocusOutside={(e) => {
-          // Prevent closing when focus moves
-          e.preventDefault()
-        }}
-        onPointerDownOutside={(e) => {
-          // Prevent closing when clicking on the editor block
-          const target = e.target as HTMLElement
-          if (
-            target.closest('[contenteditable="true"]') ||
-            target === anchorElement
-          ) {
-            e.preventDefault()
-          }
-        }}
-      >
-        <Command ref={commandRef} shouldFilter={false}>
-          <CommandInput
-            placeholder={t("command.searchPlaceholder")}
-            value={search}
-            onValueChange={setSearch}
-            autoFocus
-          />
-          <CommandList>
-            <CommandEmpty>{t("command.noResults")}</CommandEmpty>
-            <CommandGroup heading={t("command.turnInto")}>
-              {filteredCommands.map((command, index) => (
-                <CommandItem
-                  key={command.value}
-                  value={command.value}
-                  onSelect={() => handleSelect(command.value)}
-                  className={`flex cursor-pointer items-start gap-3 px-3 py-2 ${index === selectedIndex ? "bg-accent" : ""} `}
-                >
-                  <div className="mt-0.5">{command.icon}</div>
-                  <div className="flex flex-col">
-                    <span className="font-medium">{command.label}</span>
-                    {command.description && (
-                      <span className="text-muted-foreground text-xs">
-                        {command.description}
-                      </span>
-                    )}
-                  </div>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/custom-class-popover.tsx b/apps/web/src/components/ui/rich-editor/custom-class-popover.tsx
deleted file mode 100644
index 72c5ec53..00000000
--- a/apps/web/src/components/ui/rich-editor/custom-class-popover.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-"use client"
-
-import React, { useEffect, useRef, useState } from "react"
-import { AnimatePresence, motion } from "framer-motion"
-import { Code2, Pencil, Search } from "lucide-react"
-
-import { useIsMobile } from "@/components/ui/rich-editor/hooks/use-mobile"
-import { useToast } from "@/hooks/use-toast"
-
-import { EditorActions, useEditorDispatch, useEditorState } from "."
-import { Button } from "../button"
-import { Input } from "../input"
-import { Popover, PopoverContent, PopoverTrigger } from "../popover"
-import { ScrollArea } from "../scroll-area"
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "../sheet"
-import { Switch } from "../switch"
-import {
-  getUserFriendlyClasses,
-  searchUserFriendlyClasses,
-} from "./class-mappings"
-import { tailwindClasses } from "./tailwind-classes"
-import { getReplacementInfo, mergeClasses } from "./utils/class-replacement"
-
-export function CustomClassPopover() {
-  const state = useEditorState()
-  const dispatch = useEditorDispatch()
-  const { toast } = useToast()
-  const [searchQuery, setSearchQuery] = useState("")
-  const [isOpen, setIsOpen] = useState(false)
-  const [devMode, setDevMode] = useState(false)
-  const [position, setPosition] = useState<{
-    top: number
-    left: number
-  } | null>(null)
-  const isMobile = useIsMobile()
-
-  // Store the selection in a ref so it persists when focus changes
-  const savedSelectionRef = useRef<{
-    nodeId: string
-    start: number
-    end: number
-    text: string
-  } | null>(null)
-
-  // Filter classes based on search and dev mode
-  const filteredClasses = devMode
-    ? // Dev Mode: Show Tailwind classes
-      searchQuery
-      ? tailwindClasses
-          .map((group) => ({
-            ...group,
-            classes: group.classes.filter((cls) =>
-              cls.toLowerCase().includes(searchQuery.toLowerCase())
-            ),
-          }))
-          .filter((group) => group.classes.length > 0)
-      : tailwindClasses
-    : // User Mode: Show user-friendly names
-      searchQuery
-      ? searchUserFriendlyClasses(searchQuery)
-      : getUserFriendlyClasses()
-
-  // Track selection and position the floating icon
-  useEffect(() => {
-    if (state.currentSelection && state.currentSelection.text.length > 0) {
-      // Save the selection to ref so it persists when focus changes
-      savedSelectionRef.current = {
-        nodeId: state.currentSelection.nodeId,
-        start: state.currentSelection.start,
-        end: state.currentSelection.end,
-        text: state.currentSelection.text,
-      }
-
-      const selection = window.getSelection()
-      if (selection && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0)
-        const rect = range.getBoundingClientRect()
-
-        // Find the editor container (the parent with relative positioning)
-        const editorContainer = document
-          .querySelector("[data-editor-content]")
-          ?.closest(".relative")
-        const containerRect = editorContainer?.getBoundingClientRect()
-
-        if (containerRect) {
-          // Calculate position relative to the editor container
-          setPosition({
-            top: rect.top - containerRect.top - 45, // 45px above the selection, relative to container
-            left: rect.left - containerRect.left + rect.width / 2 - 16, // Centered on selection, relative to container
-          })
-        } else {
-          // Fallback to old behavior if container not found
-          setPosition({
-            top: rect.top + window.scrollY - 45,
-            left: rect.left + window.scrollX + rect.width / 2 - 16,
-          })
-        }
-      }
-    } else {
-      // Only clear position if we don't have a saved selection and popover is closed
-      if (!isOpen) {
-        setPosition(null)
-        savedSelectionRef.current = null
-      }
-    }
-  }, [state.currentSelection, state.selectionKey, isOpen])
-  // Close keyboard on mobile
-  const closeKeyboard = () => {
-    if (isMobile && document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur()
-    }
-  }
-
-  // Handle opening the popover/sheet
-  const handleOpenChange = (open: boolean) => {
-    if (open && isMobile) {
-      closeKeyboard()
-      // Small delay to ensure keyboard is closed before opening
-      setTimeout(() => setIsOpen(true), 100)
-    } else {
-      setIsOpen(open)
-    }
-  }
-
-  // Handle class application with smart replacement
-  const handleQuickStyle = (className: string) => {
-    // Use saved selection from ref instead of state
-    if (!savedSelectionRef.current) return
-
-    // Get current classes from selection
-    const currentClassName = state.currentSelection?.className || ""
-
-    // Get replacement info
-    const replacementInfo = getReplacementInfo(currentClassName, className)
-
-    // Merge classes intelligently (replaces same-category classes)
-    const mergedClasses = mergeClasses(currentClassName, className)
-
-    // Temporarily restore the selection in state for the action
-    dispatch(
-      EditorActions.setCurrentSelection({
-        ...savedSelectionRef.current,
-        formats: {
-          bold: false,
-          italic: false,
-          underline: false,
-          strikethrough: false,
-          code: false,
-        },
-      })
-    )
-
-    // Apply the merged custom class
-    setTimeout(() => {
-      dispatch(EditorActions.applyCustomClass(mergedClasses))
-
-      // Show appropriate toast message
-      if (
-        replacementInfo.willReplace &&
-        replacementInfo.replacedClasses.length > 0
-      ) {
-        toast({
-          title: "Class Replaced",
-          description: `Replaced "${replacementInfo.replacedClasses.join(", ")}" with "${className}"`,
-        })
-      } else {
-        toast({
-          title: "Custom Class Applied",
-          description: `Applied class: ${className}`,
-        })
-      }
-
-      setIsOpen(false)
-      setPosition(null)
-      savedSelectionRef.current = null
-    }, 0)
-  }
-
-  // Reusable content component for both Popover and Sheet
-  const ClassPickerContent = () => (
-    <div className="space-y-3">
-      {/* Dev Mode Toggle */}
-      <div className="flex items-center justify-between border-b pb-2">
-        <div className="flex items-center gap-2">
-          <Code2 className="text-muted-foreground h-4 w-4" />
-          <span className="text-sm font-medium">Dev Mode</span>
-        </div>
-        <Switch
-          checked={devMode}
-          onCheckedChange={setDevMode}
-          aria-label="Toggle dev mode"
-        />
-      </div>
-
-      <div className="relative">
-        <Search className="text-muted-foreground absolute top-2.5 left-2 h-4 w-4" />
-        <Input
-          autoFocus
-          placeholder={
-            devMode
-              ? "Search classes... (e.g., 'text', 'bg', 'flex')"
-              : "Search styles... (e.g., 'red', 'bold', 'shadow')"
-          }
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="pl-8"
-          onMouseDown={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        />
-      </div>
-      <ScrollArea className="h-[500px] pr-4">
-        <div className="space-y-4">
-          {devMode ? (
-            // Dev Mode: Show Tailwind classes
-            <>
-              {filteredClasses.map((group) => (
-                <div key={group.category}>
-                  <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                    {group.category}
-                  </h4>
-                  <div className="flex flex-wrap gap-1.5">
-                    {(group as any).classes.map((cls: string) => (
-                      <Button
-                        key={cls}
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleQuickStyle(cls)}
-                        className="h-6 px-2 text-xs"
-                      >
-                        {cls}
-                      </Button>
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </>
-          ) : (
-            // User Mode: Show user-friendly names
-            <>
-              {filteredClasses.map((group) => (
-                <div key={group.category}>
-                  <h4 className="text-muted-foreground mb-2 text-xs font-semibold">
-                    {group.category}
-                  </h4>
-                  <div className="flex flex-wrap gap-1.5">
-                    {(group as any).items.map(
-                      (item: { label: string; value: string }) => (
-                        <Button
-                          key={item.value}
-                          variant="outline"
-                          size="sm"
-                          onClick={() => handleQuickStyle(item.value)}
-                          className="h-6 px-2 text-xs"
-                          title={`Applies: ${item.value}`}
-                        >
-                          {item.label}
-                        </Button>
-                      )
-                    )}
-                  </div>
-                </div>
-              ))}
-            </>
-          )}
-          {filteredClasses.length === 0 && (
-            <div className="text-muted-foreground py-8 text-center text-sm">
-              No classes found matching &quot;{searchQuery}&quot;
-            </div>
-          )}
-        </div>
-      </ScrollArea>
-    </div>
-  )
-
-  // Trigger button component
-  const TriggerButton = () => (
-    <button
-      data-custom-class-trigger
-      className="bg-background border-border hover:border-primary flex h-8 w-8 items-center justify-center rounded-full border-2 shadow-lg transition-all hover:scale-110"
-      onMouseDown={(e) => {
-        // Prevent default to keep the selection
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-      onClick={(e) => {
-        // Prevent default to keep the selection
-        e.preventDefault()
-        e.stopPropagation()
-        if (isMobile) {
-          closeKeyboard()
-        }
-        setIsOpen(true)
-      }}
-    >
-      <Pencil className="size-4" />
-    </button>
-  )
-
-  return (
-    <AnimatePresence mode="wait">
-      {position && (
-        <motion.div
-          key={position.top + position.left}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          className={`${
-            position ? "opacity-100" : "!opacity-0"
-          } pointer-events-auto absolute z-50 transition-opacity duration-300`}
-          style={{
-            top: `${position?.top || 0}px`,
-            left: `${position?.left || 0}px`,
-          }}
-          exit={{ opacity: 0 }}
-        >
-          {isMobile ? (
-            // Mobile: Use Sheet (drawer from bottom)
-            <Sheet open={isOpen} onOpenChange={handleOpenChange}>
-              <SheetTrigger asChild>
-                <TriggerButton />
-              </SheetTrigger>
-              <SheetContent
-                side="bottom"
-                className="h-[85vh] rounded-t-xl px-5"
-                onOpenAutoFocus={(e) => {
-                  // Prevent auto-focus to avoid reopening keyboard
-                  e.preventDefault()
-                }}
-              >
-                <SheetHeader>
-                  <SheetTitle>Custom Classes</SheetTitle>
-                </SheetHeader>
-                <div className="mt-4 h-[calc(100%-60px)] overflow-y-auto">
-                  <ClassPickerContent />
-                </div>
-              </SheetContent>
-            </Sheet>
-          ) : (
-            // Desktop: Use Popover
-            <Popover open={isOpen} onOpenChange={setIsOpen}>
-              <PopoverTrigger>
-                <TriggerButton />
-              </PopoverTrigger>
-              <PopoverContent
-                className="max-h-[300px] overflow-y-auto lg:w-[300px]"
-                align="start"
-                onOpenAutoFocus={(e) => {
-                  // Prevent the popover from stealing focus and losing selection
-                  e.preventDefault()
-                }}
-              >
-                <ClassPickerContent />
-              </PopoverContent>
-            </Popover>
-          )}
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/demo-content.ts b/apps/web/src/components/ui/rich-editor/demo-content.ts
deleted file mode 100644
index 486133e2..00000000
--- a/apps/web/src/components/ui/rich-editor/demo-content.ts
+++ /dev/null
@@ -1,2573 +0,0 @@
-import { id } from "date-fns/locale"
-
-import { ContainerNode, EditorNode, TextNode } from "./types"
-
-/**
- * Creates comprehensive demo content showcasing all editor features.
- *
- * @param timestamp - Optional timestamp for unique IDs (defaults to a stable value for demo content)
- * @returns Array of demo nodes ready to be used as editor content
- *
- * @example
- * ```typescript
- * import { createDemoContent } from '@/lib/demo-content';
- *
- * const demoNodes = createDemoContent();
- * const newContainer: ContainerNode = {
- *   id: 'root',
- *   type: 'container',
- *   children: demoNodes,
- *   attributes: {}
- * };
- * ```
- */
-export function createDemoContent(
-  timestamp: number = 1000000000000
-): EditorNode[] {
-  return [
-    // ========================================
-    // HERO SECTION
-    // ========================================
-    {
-      id: `h1-${timestamp}-1`,
-      type: "h1",
-      content: "✨ Rich Text Editor",
-      attributes: {},
-    } as TextNode,
-
-    // ========================================
-    // VERSION UPDATE SECTION
-    // ========================================
-    {
-      id: `blockquote-${timestamp}-version-1`,
-      type: "blockquote",
-      children: [
-        {
-          content: "🎉 Version 0.2.0 - Exciting New Features!",
-          bold: true,
-          className: "text-green-600 dark:text-green-400 text-lg",
-        },
-        { content: " ", italic: true },
-        {
-          content:
-            "Major improvements to usability, new Notion-style features, and much more!",
-          italic: true,
-        },
-      ],
-      attributes: {
-        className:
-          "bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border-l-4 border-green-500",
-      },
-    } as TextNode,
-
-    {
-      id: `h2-${timestamp}-version-2`,
-      type: "h2",
-      content: "🆕 What's New in v0.2.0",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-version-3a`,
-      type: "p",
-      content:
-        "Quick-start your content with beautiful pre-designed templates. Switch between templates instantly and customize to your needs:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `li-${timestamp}-version-3c-1`,
-      type: "li",
-      children: [
-        { content: "✅ Blog template", bold: true },
-        { content: " - Perfect for articles and blog posts", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-3c-2`,
-      type: "li",
-      children: [
-        { content: "✅ Gallery template", bold: true },
-        { content: " - Showcase photos and portfolio work", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-3c-3`,
-      type: "li",
-      children: [
-        { content: "✅ Halloween template", bold: true },
-        { content: " - Festive seasonal design", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-3c-4`,
-      type: "li",
-      children: [
-        { content: "✅ Instant switch", bold: true },
-        { content: " - Change templates with one click", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h4-${timestamp}-version-3d`,
-      type: "h3",
-      content: "📝 Blog Template",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-version-3e`,
-      type: "p",
-      content:
-        "Professional blog post layout with metadata, sections, and beautiful typography:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h4-${timestamp}-version-3g`,
-      type: "h3",
-      content: "🖼️ Gallery Template",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-version-3h`,
-      type: "p",
-      content:
-        "Perfect for photographers and artists - showcase your work in stunning image collections:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-version-4`,
-      type: "h3",
-      content: "🎨 Notion-Style Mode",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-version-4a`,
-      type: "p",
-      content:
-        "Toggle between classic rich editor mode and Notion-style mode with cover images and enhanced first-block styling:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `li-${timestamp}-version-4b-1`,
-      type: "li",
-      children: [
-        { content: "✅ Cover images", bold: true },
-        {
-          content: " - Add beautiful header images to your documents",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-4b-2`,
-      type: "li",
-      children: [
-        { content: "✅ First-block styling", bold: true },
-        {
-          content: " - Automatic large heading for document titles",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-4b-3`,
-      type: "li",
-      children: [
-        { content: "✅ Drag to reposition", bold: true },
-        { content: " - Adjust cover image position with slider", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-4b-4`,
-      type: "li",
-      children: [
-        { content: "✅ Upload or remove", bold: true },
-        { content: " - Full control over your document's cover", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-version-5`,
-      type: "h3",
-      content: "🖼️ Free-Floating Images",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-version-5a`,
-      type: "p",
-      content:
-        "New free image mode lets you place images anywhere on the canvas with full positioning control:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `li-${timestamp}-version-5b-1`,
-      type: "li",
-      children: [
-        { content: "✅ Drag anywhere", bold: true },
-        { content: " - Position images freely on the canvas", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-5b-2`,
-      type: "li",
-      children: [
-        { content: "✅ Resize handles", bold: true },
-        { content: " - Adjust image size with visual handles", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-5b-3`,
-      type: "li",
-      children: [
-        { content: "✅ Z-index control", bold: true },
-        { content: " - Layer images in front or behind", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-5b-4`,
-      type: "li",
-      children: [
-        { content: "✅ Perfect for layouts", bold: true },
-        { content: " - Create magazine-style designs", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-version-5c`,
-      type: "p",
-      children: [
-        { content: "To add a free-floating image, click on the ", bold: false },
-        {
-          content: "plus icon (➕)",
-          bold: true,
-          className: "text-blue-600 dark:text-blue-400",
-        },
-        { content: " in the editor toolbar and choose ", bold: false },
-        {
-          content: "Free Movement Image",
-          bold: true,
-          className: "text-purple-600 dark:text-purple-400",
-        },
-        { content: " from the insert component dialog:", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-version-6`,
-      type: "h3",
-      content: "📝 Simplified List Items",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-version-6a`,
-      type: "p",
-      content: "List handling is now much simpler and more intuitive:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `li-${timestamp}-version-6b-1`,
-      type: "li",
-      children: [
-        { content: "✅ Simple li elements", bold: true },
-        { content: " - No complex nested structures", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-6b-2`,
-      type: "li",
-      children: [
-        { content: "✅ Bulleted (li) and numbered (ol)", bold: true },
-        { content: " - Two simple types", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-6b-3`,
-      type: "li",
-      children: [
-        { content: "✅ Auto-convert", bold: true },
-        {
-          content: " - Type '- ' for bullets or '1. ' for numbers",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-6b-4`,
-      type: "li",
-      children: [
-        { content: "✅ Easy exit", bold: true },
-        { content: " - Press Enter on empty item to exit list", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-version-7`,
-      type: "h3",
-      content: "🐛 Bug Fixes & Improvements",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `li-${timestamp}-version-7a-1`,
-      type: "li",
-      children: [
-        { content: "✅ Mobile drag & drop", bold: true },
-        {
-          content:
-            " - Full touch support for dragging blocks on mobile devices with visual feedback",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-7a-2`,
-      type: "li",
-      children: [
-        { content: "✅ Selection improvements", bold: true },
-        {
-          content: " - Fixed text selection and cursor positioning bugs",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-7a-3`,
-      type: "li",
-      children: [
-        { content: "✅ Better image handling", bold: true },
-        { content: " - Improved upload and display logic", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-7a-4`,
-      type: "li",
-      children: [
-        { content: "✅ Video block updates", bold: true },
-        { content: " - Enhanced video embedding and playback", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-7a-5`,
-      type: "li",
-      children: [
-        { content: "✅ Component modal", bold: true },
-        {
-          content: " - New insert components dialog for quick access",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-7a-6`,
-      type: "li",
-      children: [
-        { content: "✅ Performance optimizations", bold: true },
-        {
-          content: " - Faster rendering and smoother interactions",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-version-8a`,
-      type: "p",
-      content:
-        "Comprehensive table support with drag-and-drop, resizing, and markdown import:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `li-${timestamp}-version-8b-1`,
-      type: "li",
-      children: [
-        { content: "✅ Create tables", bold: true },
-        { content: " with custom rows and columns", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-8b-2`,
-      type: "li",
-      children: [
-        { content: "✅ Drag & resize", bold: true },
-        { content: " columns and rows", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-version-8b-3`,
-      type: "li",
-      children: [
-        { content: "✅ Import markdown", bold: true },
-        { content: " tables from any source", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `table-wrapper-${timestamp}-version-8`,
-      type: "container",
-      children: [
-        {
-          id: `table-${timestamp}-version-7`,
-          type: "table",
-          children: [
-            {
-              id: `thead-${timestamp}-version-7`,
-              type: "thead",
-              children: [
-                {
-                  id: `tr-header-${timestamp}-version-7`,
-                  type: "tr",
-                  children: [
-                    {
-                      id: `th-${timestamp}-version-7-0`,
-                      type: "th",
-                      content: "Feature",
-                      attributes: {},
-                    } as TextNode,
-                    {
-                      id: `th-${timestamp}-version-7-1`,
-                      type: "th",
-                      content: "Status",
-                      attributes: {},
-                    } as TextNode,
-                    {
-                      id: `th-${timestamp}-version-7-2`,
-                      type: "th",
-                      content: "Version",
-                      attributes: {},
-                    } as TextNode,
-                  ],
-                  attributes: {},
-                },
-              ],
-              attributes: {},
-            },
-            {
-              id: `tbody-${timestamp}-version-7`,
-              type: "tbody",
-              children: [
-                {
-                  id: `tr-${timestamp}-version-7-0`,
-                  type: "tr",
-                  children: [
-                    {
-                      id: `td-${timestamp}-version-7-0-0`,
-                      type: "td",
-                      content: "Table Support",
-                      attributes: {},
-                    } as TextNode,
-                    {
-                      id: `td-${timestamp}-version-7-0-1`,
-                      type: "td",
-                      content: "✅ Released",
-                      attributes: {},
-                    } as TextNode,
-                    {
-                      id: `td-${timestamp}-version-7-0-2`,
-                      type: "td",
-                      content: "0.1.0",
-                      attributes: {},
-                    } as TextNode,
-                  ],
-                  attributes: {},
-                },
-                {
-                  id: `tr-${timestamp}-version-7-1`,
-                  type: "tr",
-                  children: [
-                    {
-                      id: `td-${timestamp}-version-7-1-0`,
-                      type: "td",
-                      content: "Multi-Select Images",
-                      attributes: {},
-                    } as TextNode,
-                    {
-                      id: `td-${timestamp}-version-7-1-1`,
-                      type: "td",
-                      content: "✅ Released",
-                      attributes: {},
-                    } as TextNode,
-                    {
-                      id: `td-${timestamp}-version-7-1-2`,
-                      type: "td",
-                      content: "0.1.0",
-                      attributes: {},
-                    } as TextNode,
-                  ],
-                  attributes: {},
-                },
-                {
-                  id: `tr-${timestamp}-version-7-2`,
-                  type: "tr",
-                  children: [
-                    {
-                      id: `td-${timestamp}-version-7-2-0`,
-                      type: "td",
-                      content: "Enhanced Drag & Drop",
-                      attributes: {},
-                    } as TextNode,
-                    {
-                      id: `td-${timestamp}-version-7-2-1`,
-                      type: "td",
-                      content: "✅ Released",
-                      attributes: {},
-                    } as TextNode,
-                    {
-                      id: `td-${timestamp}-version-7-2-2`,
-                      type: "td",
-                      content: "0.1.0",
-                      attributes: {},
-                    } as TextNode,
-                  ],
-                  attributes: {},
-                },
-              ],
-              attributes: {},
-            },
-          ],
-          attributes: {},
-        },
-      ],
-      attributes: {},
-    } as ContainerNode,
-
-    {
-      id: `h3-${timestamp}-version-8`,
-      type: "h3",
-      content: "🖼️ Multi-Select Images (from v0.1.0)",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-version-9`,
-      type: "p",
-      content:
-        "Ctrl+Click to select multiple images, then group, reverse, or extract them.",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-version-10`,
-      type: "h3",
-      content: "🎯 Enhanced Drag & Drop (from v0.1.0)",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-version-11`,
-      type: "p",
-      content:
-        "Improved drag & drop for tables, containers, and image grids with smart drop zones and visual feedback.",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `blockquote-${timestamp}-version-21a`,
-      type: "blockquote",
-      children: [
-        {
-          content: "🤝 Collaboration Welcome! ",
-          bold: true,
-          className: "text-blue-600 dark:text-blue-400",
-        },
-        { content: " ", italic: true },
-        {
-          content:
-            "I'm facing a lot of time constraints, so collaboration is much appreciated! ",
-          italic: true,
-        },
-        {
-          content:
-            "Whether you're fixing bugs, adding features, improving documentation, or suggesting ideas - your contributions help make this editor better for everyone. ",
-          italic: true,
-        },
-        {
-          content:
-            "Feel free to open issues, submit PRs, or reach out to discuss improvements. Let's build something amazing together! 🚀",
-          italic: true,
-          bold: true,
-        },
-      ],
-      attributes: {
-        className:
-          "bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 border-l-4 border-blue-500",
-      },
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-version-22`,
-      type: "p",
-      content: "---",
-      attributes: {
-        className: "text-center text-muted-foreground my-8",
-      },
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-2`,
-      type: "p",
-      children: [
-        { content: "A ", bold: false },
-        {
-          content: "modern block-based rich text editor",
-          bold: true,
-          className: "text-blue-600 dark:text-blue-400",
-        },
-        { content: " built entirely with ", bold: false },
-        {
-          content: "Tailwind CSS",
-          bold: true,
-          className: "text-cyan-600 dark:text-cyan-400",
-        },
-        { content: " and ", bold: false },
-        {
-          content: "shadcn/ui",
-          bold: true,
-          className: "text-purple-600 dark:text-purple-400",
-        },
-        { content: ".", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `blockquote-${timestamp}-3`,
-      type: "blockquote",
-      children: [
-        { content: "💡 Quick Tip: ", bold: true },
-        { content: "This entire document is editable! ", italic: true },
-        {
-          content:
-            "Select any text to format it, drag blocks to reorder them, and press ",
-          italic: true,
-        },
-        { content: "Shift+Enter", elementType: "code", bold: true },
-        {
-          content: " to create nested blocks. Have fun exploring!",
-          italic: true,
-        },
-      ],
-      attributes: {
-        style:
-          "background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1)); border-left: 4px solid rgb(59, 130, 246);",
-      },
-    } as TextNode,
-
-    // ========================================
-    // IMPORTANT NOTE
-    // ========================================
-    {
-      id: `blockquote-${timestamp}-9`,
-      type: "blockquote",
-      children: [
-        {
-          content: "⚠️ IMPORTANT NOTE: ",
-          bold: true,
-          className: "text-red-600 dark:text-red-400",
-        },
-        { content: "For transparency, the ", italic: true },
-        { content: "code supports everything", italic: true, bold: true },
-        {
-          content:
-            " mentioned in this document (gradients, shadows, borders, custom styles, etc.), but ",
-          italic: true,
-        },
-        {
-          content: "some advanced features don't have a UI interface yet",
-          italic: true,
-          bold: true,
-        },
-        {
-          content:
-            ". You can still apply them programmatically through the JSON structure or by typing Tailwind classes in the Custom Class Popover. ",
-          italic: true,
-        },
-        {
-          content: "Any collaboration is much appreciated! ",
-          italic: true,
-          bold: true,
-          className: "text-green-600 dark:text-green-400",
-        },
-        {
-          content: "Feel free to contribute UI components for these features.",
-          italic: true,
-        },
-      ],
-      attributes: {
-        className: "bg-red-50 dark:bg-red-900/20 border-l-4 border-red-600",
-      },
-    } as TextNode,
-
-    // ========================================
-    // TEXT FORMATTING SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-10`,
-      type: "h2",
-      content: "✨ Text Formatting",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-11`,
-      type: "p",
-      content:
-        "Select any text and use the toolbar to apply rich formatting. The editor supports all standard text styles:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-12`,
-      type: "p",
-      children: [
-        { content: "You can make text ", bold: false },
-        { content: "bold", bold: true },
-        { content: ", ", bold: false },
-        { content: "italic", italic: true },
-        { content: ", ", bold: false },
-        { content: "underlined", underline: true },
-        { content: ", or even ", bold: false },
-        {
-          content: "combine all three styles",
-          bold: true,
-          italic: true,
-          underline: true,
-        },
-        {
-          content: " together! Mix and match to create beautiful content.",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    // ========================================
-    // BLOCK TYPES SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-20`,
-      type: "h2",
-      content: "📋 Block Types",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-21`,
-      type: "p",
-      content:
-        "The editor supports multiple block types. Each block can be changed using the type selector in the toolbar:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h1-${timestamp}-22`,
-      type: "h1",
-      content: "Heading 1 - The largest heading",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h2-${timestamp}-23`,
-      type: "h2",
-      content: "Heading 2 - Major sections",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-24`,
-      type: "h3",
-      content: "Heading 3 - Subsections",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-25`,
-      type: "p",
-      content:
-        "Paragraph - The standard block type for regular text content. Perfect for body text and descriptions.",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `blockquote-${timestamp}-26`,
-      type: "blockquote",
-      children: [
-        {
-          content: "Blockquote - ",
-          italic: true,
-          bold: true,
-        },
-        {
-          content:
-            'Perfect for quotes, tips, and callouts. "The best way to predict the future is to invent it." - Alan Kay',
-          italic: true,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `code-${timestamp}-27`,
-      type: "code",
-      content: `// Code Block - For displaying code with proper formatting
-function greet(name: string) {
-  return \`Hello, \${name}! Welcome to Mina Rich Editor.\`;
-}
-
-const message = greet("Developer");
-console.log(message);`,
-      attributes: {},
-    } as TextNode,
-
-    // ========================================
-    // LISTS SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-30`,
-      type: "h2",
-      content: "📝 Lists - Ordered & Unordered",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-31`,
-      type: "p",
-      content:
-        "Create ordered lists (numbered) or unordered lists (bullet points) for organized content:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-32`,
-      type: "h3",
-      content: "Ordered List Example (ol)",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `li-${timestamp}-33-1`,
-      type: "ol",
-      content: "First item - Automatically numbered",
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-33-2`,
-      type: "ol",
-      content: "Second item - Numbers increment automatically",
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-33-3`,
-      type: "ol",
-      content: "Third item - Perfect for step-by-step instructions",
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-33-4`,
-      type: "ol",
-      children: [
-        { content: "You can even add ", bold: false },
-        { content: "formatting", bold: true },
-        { content: " to list items!", italic: true },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-34`,
-      type: "h3",
-      content: "Unordered List Example (ul)",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `li-${timestamp}-35-1`,
-      type: "li",
-      content: "Bullet point item",
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-35-2`,
-      type: "li",
-      content: "Another bullet point",
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-35-3`,
-      type: "li",
-      content: "Great for feature lists",
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-35-4`,
-      type: "li",
-      children: [
-        { content: "Supports ", bold: false },
-        {
-          content: "rich text formatting",
-          bold: true,
-          className: "text-blue-600 dark:text-blue-400",
-        },
-        { content: " too!", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `code-${timestamp}-36`,
-      type: "code",
-      content: `// Simple list structure - no container needed!
-// Ordered list items (numbered)
-{ id: 'item-1', type: 'ol', content: 'First item' },
-{ id: 'item-2', type: 'ol', content: 'Second item' },
-{ 
-  id: 'item-3',
-  type: 'ol',
-  children: [
-    { content: 'Formatted ', bold: false },
-    { content: 'item', bold: true }
-  ]
-},
-
-// Unordered list items (bullets)
-{ id: 'item-4', type: 'li', content: 'Bullet item' },
-{ id: 'item-5', type: 'li', content: 'Another bullet' }`,
-      attributes: {},
-    } as TextNode,
-
-    // ========================================
-    // INLINE ELEMENT TYPES SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-40`,
-      type: "h2",
-      content: "🎨 Inline Element Types",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-41`,
-      type: "p",
-      content:
-        "Apply heading styles inline within paragraphs. Select text and choose from the element type dropdown to mix different text sizes and styles:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-42`,
-      type: "p",
-      children: [
-        { content: "This paragraph contains ", bold: false },
-        { content: "H1 styled text", elementType: "h1" },
-        { content: " and ", bold: false },
-        { content: "H2 styled text", elementType: "h2" },
-        { content: " and ", bold: false },
-        { content: "H3 styled text", elementType: "h3" },
-        { content: " all mixed together, plus ", bold: false },
-        { content: "inline code", elementType: "code" },
-        { content: " support for technical content!", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `code-${timestamp}-44`,
-      type: "code",
-      content: `// Inline element types structure
-const richParagraph = {
-  type: 'p',
-  children: [
-    { content: 'Regular text ' },
-    { content: 'Large heading', elementType: 'h1' },
-    { content: ' and ' },
-    { content: 'inline code', elementType: 'code', bold: true }
-  ]
-};`,
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `blockquote-${timestamp}-45`,
-      type: "blockquote",
-      children: [
-        {
-          content: "🤔 Wait, the block above looks a bit weird, right? ",
-          italic: true,
-        },
-        {
-          content:
-            "Oh! I wish I could add custom classes using normal Tailwind... ",
-          italic: true,
-          bold: true,
-        },
-        {
-          content: "Actually, you can! ",
-          italic: true,
-          className: "text-green-600 dark:text-green-400",
-        },
-        { content: "Select your text, then click the ", italic: true },
-        { content: "pencil ✏️ smart icon", italic: true, bold: true },
-        {
-          content: ", and type your class or select from preset classes!",
-          italic: true,
-        },
-      ],
-      attributes: {
-        className:
-          "bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 border-l-4 border-amber-600",
-      },
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-46`,
-      type: "h3",
-      content: "✏️ Custom Class Smart Icon",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-47`,
-      type: "p",
-      content:
-        "After selecting text, you'll see a smart pencil icon appear. Click it to access the Custom Class Popover where you can apply any Tailwind CSS class or choose from presets:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-49`,
-      type: "h3",
-      content: "🎨 Custom Class Popover",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-50`,
-      type: "p",
-      content:
-        "The Custom Class Popover gives you complete control over text styling with preset Tailwind classes organized by category:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `li-${timestamp}-52-1`,
-      type: "li",
-      children: [
-        { content: "Text Colors", bold: true },
-        {
-          content: " - All Tailwind color shades (red, blue, green, etc.)",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-52-2`,
-      type: "li",
-      children: [
-        { content: "Background Colors", bold: true },
-        { content: " - Full palette of background colors", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-52-3`,
-      type: "li",
-      children: [
-        { content: "Font Sizes", bold: true },
-        { content: " - From xs to 9xl", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-52-4`,
-      type: "li",
-      children: [
-        { content: "Search Functionality", bold: true },
-        {
-          content: " - Quick class lookup (e.g., 'text', 'bg', 'flex')",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-    {
-      id: `li-${timestamp}-52-5`,
-      type: "li",
-      children: [
-        { content: "Custom Input", bold: true },
-        { content: " - Type any Tailwind class manually", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-53`,
-      type: "h3",
-      content: "✨ Much Better Results!",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-54`,
-      type: "p",
-      content:
-        "With custom classes, you can create stunning text effects and perfect typography:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-56`,
-      type: "p",
-      children: [
-        { content: "Now let's recreate that beautiful text! ", bold: false },
-        { content: "This paragraph contains ", bold: false },
-        {
-          content: "H1 styled text",
-          elementType: "h1",
-          className:
-            "bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent",
-        },
-        { content: " and ", bold: false },
-        {
-          content: "H2 styled text",
-          elementType: "h2",
-          className:
-            "bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent",
-        },
-        { content: " and ", bold: false },
-        {
-          content: "H3 styled text",
-          elementType: "h3",
-          className:
-            "bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent",
-        },
-        { content: " all mixed together, plus ", bold: false },
-        {
-          content: "inline code",
-          elementType: "code",
-          className:
-            "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded",
-        },
-        { content: " support for technical content!", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `code-${timestamp}-57`,
-      type: "code",
-      content: `// Custom classes with inline element types
-const styledText = {
-  type: 'p',
-  children: [
-    { 
-      content: 'Gradient heading',
-      elementType: 'h1',
-      className: 'bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent'
-    },
-    { content: ' and ' },
-    { 
-      content: 'custom code',
-      elementType: 'code',
-      className: 'bg-yellow-100 text-yellow-800 px-2 rounded'
-    }
-  ]
-};`,
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `blockquote-${timestamp}-58`,
-      type: "blockquote",
-      children: [
-        { content: "💡 Pro Tip: ", bold: true },
-        { content: "You can apply ", italic: true },
-        {
-          content: "any Tailwind class",
-          italic: true,
-          bold: true,
-          className: "text-blue-600 dark:text-blue-400",
-        },
-        {
-          content:
-            " including gradients, shadows, borders, spacing, and more! The Custom Class Popover is your gateway to ",
-          italic: true,
-        },
-        {
-          content: "unlimited styling possibilities",
-          italic: true,
-          bold: true,
-          className:
-            "bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent",
-        },
-        { content: ".", italic: true },
-      ],
-      attributes: {
-        className: "bg-blue-50 dark:bg-blue-900/20 border-blue-600",
-      },
-    } as TextNode,
-
-    // ========================================
-    // COLOR SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-50`,
-      type: "h2",
-      content: "🎨 Color Customization",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-51`,
-      type: "p",
-      content:
-        "The editor includes a powerful color picker with preset colors and custom color selection. Apply colors to any selected text:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-52`,
-      type: "h3",
-      content: "Preset Colors",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-53`,
-      type: "p",
-      children: [
-        {
-          content: "Red ",
-          bold: true,
-          className: "text-red-600 dark:text-red-400",
-        },
-        {
-          content: "Orange ",
-          bold: true,
-          className: "text-orange-600 dark:text-orange-400",
-        },
-        {
-          content: "Amber ",
-          bold: true,
-          className: "text-amber-600 dark:text-amber-400",
-        },
-        {
-          content: "Yellow ",
-          bold: true,
-          className: "text-yellow-600 dark:text-yellow-400",
-        },
-        {
-          content: "Lime ",
-          bold: true,
-          className: "text-lime-600 dark:text-lime-400",
-        },
-        {
-          content: "Green ",
-          bold: true,
-          className: "text-green-600 dark:text-green-400",
-        },
-        {
-          content: "Emerald ",
-          bold: true,
-          className: "text-emerald-600 dark:text-emerald-400",
-        },
-        {
-          content: "Teal ",
-          bold: true,
-          className: "text-teal-600 dark:text-teal-400",
-        },
-        {
-          content: "Cyan ",
-          bold: true,
-          className: "text-cyan-600 dark:text-cyan-400",
-        },
-        {
-          content: "Sky ",
-          bold: true,
-          className: "text-sky-600 dark:text-sky-400",
-        },
-        {
-          content: "Blue ",
-          bold: true,
-          className: "text-blue-600 dark:text-blue-400",
-        },
-        {
-          content: "Indigo ",
-          bold: true,
-          className: "text-indigo-600 dark:text-indigo-400",
-        },
-        {
-          content: "Violet ",
-          bold: true,
-          className: "text-violet-600 dark:text-violet-400",
-        },
-        {
-          content: "Purple ",
-          bold: true,
-          className: "text-purple-600 dark:text-purple-400",
-        },
-        {
-          content: "Fuchsia ",
-          bold: true,
-          className: "text-fuchsia-600 dark:text-fuchsia-400",
-        },
-        {
-          content: "Pink ",
-          bold: true,
-          className: "text-pink-600 dark:text-pink-400",
-        },
-        {
-          content: "Rose",
-          bold: true,
-          className: "text-rose-600 dark:text-rose-400",
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-54`,
-      type: "h3",
-      content: "Custom Colors",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-55`,
-      type: "p",
-      children: [
-        { content: "You can also use ", bold: false },
-        {
-          content: "custom hex colors",
-          bold: true,
-          styles: { color: "#FF6B6B" },
-        },
-        { content: " or ", bold: false },
-        {
-          content: "RGB values",
-          bold: true,
-          styles: { color: "#4ECDC4" },
-        },
-        { content: " or even ", bold: false },
-        {
-          content: "gradient effects",
-          bold: true,
-          styles: { color: "#95E1D3" },
-        },
-        { content: " by using the color picker!", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    // ========================================
-    // FONT SIZE SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-60`,
-      type: "h2",
-      content: "📏 Font Size Control",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-61`,
-      type: "p",
-      content:
-        "Adjust font sizes for any selected text. Choose from preset sizes or enter a custom value:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-62`,
-      type: "p",
-      children: [
-        {
-          content: "Tiny text (12px) ",
-          styles: { fontSize: "12px" },
-        },
-        {
-          content: "Small text (14px) ",
-          styles: { fontSize: "14px" },
-        },
-        {
-          content: "Normal text (16px) ",
-          styles: { fontSize: "16px" },
-        },
-        {
-          content: "Large text (20px) ",
-          bold: true,
-          styles: { fontSize: "20px" },
-        },
-        {
-          content: "Extra Large (24px) ",
-          bold: true,
-          styles: { fontSize: "24px" },
-        },
-        {
-          content: "Huge (32px) ",
-          bold: true,
-          styles: { fontSize: "32px" },
-        },
-        {
-          content: "Massive (48px)",
-          bold: true,
-          styles: { fontSize: "48px" },
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    // ========================================
-    // BACKGROUND COLORS SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-70`,
-      type: "h2",
-      content: "🎨 Background Colors",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-71`,
-      type: "p",
-      content:
-        "Apply background colors to entire blocks using preset Tailwind colors or custom colors. Perfect for highlighting important sections:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-72`,
-      type: "p",
-      content: "This block has a blue background!",
-      attributes: {
-        className: "bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg",
-      },
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-73`,
-      type: "p",
-      content: "This block has a green background with rounded corners!",
-      attributes: {
-        className: "bg-green-100 dark:bg-green-900/30 p-4 rounded-lg",
-      },
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-74`,
-      type: "p",
-      content: "This block has a custom gradient background!",
-      attributes: {
-        style:
-          "background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(59, 130, 246, 0.2)); padding: 1rem; border-radius: 0.5rem;",
-      },
-    } as TextNode,
-
-    {
-      id: `blockquote-${timestamp}-75`,
-      type: "blockquote",
-      children: [
-        { content: "💡 Pro Tip: ", bold: true },
-        {
-          content:
-            "Background colors work with any block type including headings, paragraphs, quotes, and code blocks!",
-          italic: true,
-        },
-      ],
-      attributes: {
-        className: "bg-purple-100 dark:bg-purple-900/30 border-purple-600",
-      },
-    } as TextNode,
-
-    // ========================================
-    // LINKS SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-80`,
-      type: "h2",
-      content: "🔗 Link Support",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-81`,
-      type: "p",
-      content:
-        "Create beautiful, clickable links with the modern link popover. Select text and add a URL to make it interactive:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-82`,
-      type: "p",
-      children: [
-        { content: "You can create clickable links like ", bold: false },
-        {
-          content: "this example link",
-          bold: true,
-          underline: true,
-          href: "https://example.com/",
-          className: "text-blue-600 dark:text-blue-400",
-        },
-        { content: " or ", bold: false },
-        {
-          content: "another link",
-          bold: true,
-          underline: true,
-          href: "https://example.com/page",
-          className: "text-purple-600 dark:text-purple-400",
-        },
-        { content: " anywhere in your content!", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-84`,
-      type: "p",
-      children: [
-        { content: "Multiple links: ", bold: true },
-        {
-          content: "Link One",
-          href: "https://example.com/one",
-          underline: true,
-          className: "text-gray-800 dark:text-gray-200",
-        },
-        { content: " • ", bold: false },
-        {
-          content: "Link Two",
-          href: "https://example.com/two",
-          underline: true,
-          className: "text-blue-600 dark:text-blue-400",
-        },
-        { content: " • ", bold: false },
-        {
-          content: "Link Three",
-          href: "https://example.com/three",
-          underline: true,
-          className: "text-purple-600 dark:text-purple-400",
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    // ========================================
-    // IMAGES SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-90`,
-      type: "h2",
-      content: "🖼️ Image Support",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-91`,
-      type: "p",
-      content:
-        "Upload and manage images with ease. The editor supports single images, grid layouts, and drag-and-drop reordering:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `blockquote-${timestamp}-97`,
-      type: "blockquote",
-      children: [
-        { content: "💡 Image Features: ", bold: true },
-        {
-          content:
-            "Drag to reorder • Click to upload • Add captions • Responsive grid layout • Support for multiple formats (jpg, png, gif, webp)",
-          italic: true,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    // ========================================
-    // NESTED BLOCKS SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-100`,
-      type: "h2",
-      content: "🪆 Nested Blocks",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-101`,
-      type: "p",
-      children: [
-        { content: "Press ", bold: false },
-        { content: "Shift+Enter", elementType: "code", bold: true },
-        {
-          content:
-            " to create nested blocks. Maximum nesting level is 1. Great for grouping related content together:",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `container-${timestamp}-102`,
-      type: "container",
-      children: [
-        {
-          id: `p-${timestamp}-103`,
-          type: "p",
-          children: [
-            { content: "📦 This is a ", bold: false },
-            {
-              content: "nested container",
-              bold: true,
-              className: "text-blue-600 dark:text-blue-400",
-            },
-            {
-              content:
-                "! It groups related content together and can contain any block type.",
-              bold: false,
-            },
-          ],
-          attributes: {
-            className: "bg-blue-50 dark:bg-blue-900/20 p-3 rounded",
-          },
-        } as TextNode,
-
-        {
-          id: `p-${timestamp}-104`,
-          type: "p",
-          content:
-            "Each nested block maintains its own formatting, type, and attributes. You can have paragraphs, headings, code, lists, and more!",
-          attributes: {},
-        } as TextNode,
-
-        {
-          id: `code-${timestamp}-105`,
-          type: "code",
-          content: `// Code blocks work perfectly in nested containers
-const nestedBlock = {
-  type: 'container',
-  children: [
-    { type: 'p', content: 'First nested item' },
-    { type: 'code', content: 'const x = 1;' },
-    { type: 'blockquote', content: 'Quote in nest' }
-  ]
-};`,
-          attributes: {},
-        } as TextNode,
-
-        {
-          id: `blockquote-${timestamp}-106`,
-          type: "blockquote",
-          children: [
-            {
-              content: "Even blockquotes work in nested containers! ",
-              italic: true,
-            },
-            {
-              content: "Perfect for organizing complex content hierarchically.",
-              italic: true,
-              bold: true,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-
-        {
-          id: `li-${timestamp}-107-1`,
-          type: "li",
-          content: "Nested lists are supported",
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-107-2`,
-          type: "li",
-          content: "Drag handles work in nested blocks too",
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-107-3`,
-          type: "li",
-          content: "All formatting features available",
-          attributes: {},
-        } as TextNode,
-      ],
-      attributes: {
-        style:
-          "border: 2px dashed rgba(59, 130, 246, 0.3); padding: 1rem; border-radius: 0.5rem; background: rgba(59, 130, 246, 0.05);",
-      },
-    } as ContainerNode,
-
-    // ========================================
-    // DRAG & DROP SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-110`,
-      type: "h2",
-      content: "🎯 Drag & Drop",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-111`,
-      type: "p",
-      content:
-        "Every block has a drag handle (⋮⋮). Click and drag to reorder blocks, swap images in grids, or reorganize your entire document:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-112`,
-      type: "p",
-      content: "🎪 Try dragging this block!",
-      attributes: {
-        className:
-          "bg-gradient-to-r from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 p-4 rounded-lg",
-      },
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-113`,
-      type: "p",
-      content: "🎨 Or drag this one!",
-      attributes: {
-        className:
-          "bg-gradient-to-r from-blue-100 to-cyan-100 dark:from-blue-900/30 dark:to-cyan-900/30 p-4 rounded-lg",
-      },
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-114`,
-      type: "p",
-      content: "🚀 Drag and drop works everywhere!",
-      attributes: {
-        className:
-          "bg-gradient-to-r from-green-100 to-emerald-100 dark:from-green-900/30 dark:to-emerald-900/30 p-4 rounded-lg",
-      },
-    } as TextNode,
-
-    {
-      id: `blockquote-${timestamp}-115`,
-      type: "blockquote",
-      children: [
-        { content: "💡 Drag & Drop Features: ", bold: true },
-        {
-          content:
-            "Reorder any block • Swap images in grids • Move blocks in and out of containers • Visual feedback during drag • Auto-scroll support",
-          italic: true,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    // ========================================
-    // CUSTOM CLASSES SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-120`,
-      type: "h2",
-      content: "✨ Custom Tailwind Classes",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-121`,
-      type: "p",
-      content:
-        "Apply any Tailwind CSS class to your text. This is where the editor truly shines - unlimited customization with the full power of Tailwind:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-122`,
-      type: "p",
-      children: [
-        { content: "Add ", bold: false },
-        {
-          content: "gradients",
-          bold: true,
-          className:
-            "bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent",
-        },
-        { content: ", ", bold: false },
-        {
-          content: "shadows",
-          bold: true,
-          className: "drop-shadow-lg text-blue-600",
-        },
-        { content: ", ", bold: false },
-        {
-          content: "borders",
-          bold: true,
-          className: "border-2 border-green-600 px-2 rounded",
-        },
-        { content: ", ", bold: false },
-        {
-          content: "backgrounds",
-          bold: true,
-          className: "bg-yellow-200 dark:bg-yellow-800 px-2 py-1 rounded",
-        },
-        { content: ", and ", bold: false },
-        {
-          content: "any Tailwind class",
-          bold: true,
-          className: "ring-2 ring-purple-600 ring-offset-2 px-2 rounded",
-        },
-        { content: "!", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `code-${timestamp}-123`,
-      type: "code",
-      content: `// Custom classes in the data structure
-const styledText = {
-  content: 'Gradient text',
-  bold: true,
-  className: 'bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent'
-};`,
-      attributes: {},
-    } as TextNode,
-
-    // ========================================
-    // EXPORT SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-130`,
-      type: "h2",
-      content: "📤 HTML Export",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-131`,
-      type: "p",
-      content:
-        "Export your entire document to clean, semantic HTML with all Tailwind classes preserved. Perfect for blogs, documentation, and content management:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `code-${timestamp}-132`,
-      type: "code",
-      content: `import { serializeToHtml } from '@/lib/utils/serialize-to-html';
-import { useEditor } from '@/lib';
-
-function MyComponent() {
-  const { state } = useEditor();
-  
-  // Export to HTML
-  const html = serializeToHtml(state.history[state.historyIndex]);
-  
-  // Returns formatted HTML like:
-  // <h1>Title</h1>
-  // <p>This is <strong>bold</strong> and <em>italic</em> text.</p>
-  // <div class="bg-blue-100 p-4">Custom styled block</div>
-  
-  return <div dangerouslySetInnerHTML={{ __html: html }} />;
-}`,
-      attributes: {},
-    } as TextNode,
-
-    // ========================================
-    // KEYBOARD SHORTCUTS SECTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-140`,
-      type: "h2",
-      content: "⌨️ Keyboard Shortcuts",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-141`,
-      type: "p",
-      content:
-        "Master these keyboard shortcuts for a blazing-fast editing experience:",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `container-${timestamp}-142`,
-      type: "container",
-      attributes: {
-        listType: "ul",
-      },
-      children: [
-        {
-          id: `li-${timestamp}-142-1`,
-          type: "li",
-          children: [
-            { content: "Enter", elementType: "code", bold: true },
-            { content: " - Create new block after current one", bold: false },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-142-2`,
-          type: "li",
-          children: [
-            { content: "Shift + Enter", elementType: "code", bold: true },
-            {
-              content: " - Create nested block or add to existing container",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-142-3`,
-          type: "li",
-          children: [
-            { content: "Ctrl/Cmd + A", elementType: "code", bold: true },
-            { content: " - Select all content for copying", bold: false },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-142-4`,
-          type: "li",
-          children: [
-            { content: "Backspace/Delete", elementType: "code", bold: true },
-            { content: " - Delete current block (when empty)", bold: false },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-142-5`,
-          type: "li",
-          children: [
-            { content: "Ctrl/Cmd + B", elementType: "code", bold: true },
-            {
-              content: " - Toggle bold formatting on selected text",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-142-6`,
-          type: "li",
-          children: [
-            { content: "Ctrl/Cmd + I", elementType: "code", bold: true },
-            {
-              content: " - Toggle italic formatting on selected text",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-142-7`,
-          type: "li",
-          children: [
-            { content: "Ctrl/Cmd + U", elementType: "code", bold: true },
-            {
-              content: " - Toggle underline formatting on selected text",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-142-8`,
-          type: "li",
-          children: [
-            { content: "Ctrl/Cmd + Z", elementType: "code", bold: true },
-            { content: " - Undo last action", bold: false },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-142-9`,
-          type: "li",
-          children: [
-            {
-              content: "Ctrl/Cmd + Shift + Z",
-              elementType: "code",
-              bold: true,
-            },
-            { content: " - Redo last undone action", bold: false },
-          ],
-          attributes: {},
-        } as TextNode,
-      ],
-    } as ContainerNode,
-
-    // ========================================
-    // KEY FEATURES SUMMARY
-    // ========================================
-    {
-      id: `h2-${timestamp}-150`,
-      type: "h2",
-      content: "🎯 Complete Feature List",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `container-${timestamp}-151`,
-      type: "container",
-      attributes: {
-        listType: "ul",
-      },
-      children: [
-        {
-          id: `li-${timestamp}-151-1`,
-          type: "li",
-          children: [
-            { content: "✅ Block-Based Architecture", bold: true },
-            {
-              content: " - Each element is an independent, draggable block",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-2`,
-          type: "li",
-          children: [
-            { content: "✅ Rich Text Formatting", bold: true },
-            {
-              content: " - Bold, italic, underline, and combinations",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-3`,
-          type: "li",
-          children: [
-            { content: "✅ Multiple Block Types", bold: true },
-            {
-              content: " - h1-h6, paragraph, code, blockquote, lists (ol/ul)",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-4`,
-          type: "li",
-          children: [
-            { content: "✅ Inline Element Types", bold: true },
-            { content: " - Mix heading styles within paragraphs", bold: false },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-5`,
-          type: "li",
-          children: [
-            { content: "✅ Color Support", bold: true },
-            {
-              content: " - Preset Tailwind colors + custom hex/RGB colors",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-6`,
-          type: "li",
-          children: [
-            { content: "✅ Font Size Control", bold: true },
-            { content: " - Preset sizes + custom pixel values", bold: false },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-7`,
-          type: "li",
-          children: [
-            { content: "✅ Background Colors", bold: true },
-            {
-              content:
-                " - Apply backgrounds to any block with presets or custom colors",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-8`,
-          type: "li",
-          children: [
-            { content: "✅ Link Support", bold: true },
-            {
-              content: " - Beautiful link popover with URL management",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-9`,
-          type: "li",
-          children: [
-            { content: "✅ Image Upload", bold: true },
-            {
-              content: " - Single images and grid layouts with drag-to-reorder",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-10`,
-          type: "li",
-          children: [
-            { content: "✅ Nested Blocks", bold: true },
-            {
-              content: " - Create containers for organizing related content",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-11`,
-          type: "li",
-          children: [
-            { content: "✅ Drag & Drop", bold: true },
-            {
-              content: " - Reorder blocks, swap images, reorganize everything",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-12`,
-          type: "li",
-          children: [
-            { content: "✅ Custom Tailwind Classes", bold: true },
-            {
-              content:
-                " - Unlimited styling possibilities with full Tailwind support",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-13`,
-          type: "li",
-          children: [
-            { content: "✅ HTML Export", bold: true },
-            {
-              content: " - Clean, semantic HTML with preserved styling",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-14`,
-          type: "li",
-          children: [
-            { content: "✅ TypeScript-First", bold: true },
-            {
-              content: " - Fully typed API with excellent IntelliSense",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-15`,
-          type: "li",
-          children: [
-            { content: "✅ Immutable State", bold: true },
-            {
-              content: " - Built with reducers for predictable updates",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-16`,
-          type: "li",
-          children: [
-            { content: "✅ Undo/Redo", bold: true },
-            {
-              content: " - Full history management for all actions",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-17`,
-          type: "li",
-          children: [
-            { content: "✅ Read-Only Mode", bold: true },
-            {
-              content: " - Perfect for displaying published content",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-18`,
-          type: "li",
-          children: [
-            { content: "✅ Dark Mode", bold: true },
-            {
-              content: " - Beautiful themes that work everywhere",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-19`,
-          type: "li",
-          children: [
-            { content: "✅ Keyboard Shortcuts", bold: true },
-            {
-              content: " - Efficient editing with common shortcuts",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-        {
-          id: `li-${timestamp}-151-20`,
-          type: "li",
-          children: [
-            { content: "✅ Context Menu", bold: true },
-            {
-              content:
-                " - Right-click for quick actions (duplicate, delete, move)",
-              bold: false,
-            },
-          ],
-          attributes: {},
-        } as TextNode,
-      ],
-    } as ContainerNode,
-
-    // ========================================
-    // INSTALLATION & USAGE
-    // ========================================
-    {
-      id: `h2-${timestamp}-160`,
-      type: "h2",
-      content: "🚀 Quick Start",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-161`,
-      type: "h3",
-      content: "Installation",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `code-${timestamp}-162`,
-      type: "code",
-      content: `
-# Clone the repository      
-git clone https://github.com/Mina-Massoud/mina-rich-editor.git
-
-# Install and run
-npm install
-npm run dev`,
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-163`,
-      type: "h3",
-      content: "Basic Usage",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `code-${timestamp}-164`,
-      type: "code",
-      content: `import { EditorProvider } from '@/lib';
-import { SimpleEditor } from '@/components/SimpleEditor';
-
-export default function App() {
-  return (
-    <EditorProvider>
-      <SimpleEditor />
-    </EditorProvider>
-  );
-}`,
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-165`,
-      type: "h3",
-      content: "Read-Only Mode",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `code-${timestamp}-166`,
-      type: "code",
-      content: `// Display content without editing
-<SimpleEditor readOnly={true} />`,
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `h3-${timestamp}-167`,
-      type: "h3",
-      content: "With Initial Content",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `code-${timestamp}-168`,
-      type: "code",
-      content: `import { createDemoContent } from '@/lib/demo-content';
-
-const initialContent = {
-  id: 'root',
-  type: 'container',
-  children: createDemoContent(),
-  attributes: {}
-};
-
-<EditorProvider initialContainer={initialContent}>
-  <SimpleEditor />
-</EditorProvider>`,
-      attributes: {},
-    } as TextNode,
-
-    // ========================================
-    // CALL TO ACTION
-    // ========================================
-    {
-      id: `h2-${timestamp}-200`,
-      type: "h2",
-      content: "🎨 Start Creating!",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-201`,
-      type: "p",
-      children: [
-        { content: "👉 ", bold: false },
-        {
-          content: "Select any text",
-          bold: true,
-          className: "text-blue-600 dark:text-blue-400",
-        },
-        {
-          content:
-            " and use the toolbar to format it with bold, italic, colors, fonts, and more",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-202`,
-      type: "p",
-      children: [
-        { content: "👉 Press ", bold: false },
-        { content: "Enter", elementType: "code" },
-        { content: " to create new blocks at any time", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-203`,
-      type: "p",
-      children: [
-        { content: "👉 Press ", bold: false },
-        { content: "Shift+Enter", elementType: "code" },
-        { content: " for nested blocks and hierarchical content", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-204`,
-      type: "p",
-      children: [
-        { content: "👉 Use the ", bold: false },
-        { content: "drag handles (⋮⋮)", bold: true },
-        {
-          content: " to reorder blocks and reorganize your document",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-205`,
-      type: "p",
-      children: [
-        { content: "👉 Toggle ", bold: false },
-        { content: "View Only", bold: true },
-        {
-          content: " mode in the top-right to see the read-only version",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-206`,
-      type: "p",
-      children: [
-        { content: "👉 Switch to ", bold: false },
-        { content: "Dark Mode", bold: true },
-        {
-          content: " using the theme toggle for a different experience",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-207`,
-      type: "p",
-      children: [
-        { content: "👉 Check the ", bold: false },
-        { content: "debug panel below", bold: true },
-        { content: " to see JSON structure and export HTML", bold: false },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `blockquote-${timestamp}-208`,
-      type: "blockquote",
-      children: [
-        { content: "🚀 Pro Tip: ", bold: true },
-        {
-          content: "This is your living documentation! ",
-          italic: true,
-        },
-        {
-          content:
-            "Feel free to edit, experiment, delete sections, add your own content, and explore all features. ",
-          italic: true,
-        },
-        {
-          content:
-            "The editor is designed to be intuitive and powerful - discover features as you use it!",
-          italic: true,
-          bold: true,
-        },
-      ],
-      attributes: {
-        className:
-          "bg-gradient-to-r from-green-100 to-emerald-100 dark:from-green-900/30 dark:to-emerald-900/30 border-l-4 border-green-600",
-      },
-    } as TextNode,
-
-    // ========================================
-    // CLOSING
-    // ========================================
-    {
-      id: `h2-${timestamp}-210`,
-      type: "h2",
-      content: "💖 Thank You!",
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `p-${timestamp}-211`,
-      type: "p",
-      children: [
-        { content: "Thank you for trying this ", bold: false },
-        {
-          content: "Rich Text Editor",
-          bold: true,
-          className: "text-purple-600 dark:text-purple-400",
-        },
-        { content: "! This is a ", bold: false },
-        { content: "modern block-based editor", bold: true },
-        { content: " built entirely with ", bold: false },
-        {
-          content: "Tailwind CSS",
-          bold: true,
-          className: "text-cyan-600 dark:text-cyan-400",
-        },
-        { content: " and ", bold: false },
-        {
-          content: "shadcn/ui",
-          bold: true,
-          className: "text-purple-600 dark:text-purple-400",
-        },
-        {
-          content:
-            ". If you find it useful, feel free to share it with other developers!",
-          bold: false,
-        },
-      ],
-      attributes: {},
-    } as TextNode,
-
-    {
-      id: `blockquote-${timestamp}-213`,
-      type: "blockquote",
-      children: [
-        {
-          content: "Built with ❤️ using modern web technologies",
-          italic: true,
-        },
-      ],
-      attributes: {
-        style:
-          "background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(236, 72, 153, 0.1)); border-left: 4px solid rgb(147, 51, 234); text-align: center;",
-      },
-    } as TextNode,
-  ]
-}
diff --git a/apps/web/src/components/ui/rich-editor/editor-toolbar.tsx b/apps/web/src/components/ui/rich-editor/editor-toolbar.tsx
deleted file mode 100644
index 122a726a..00000000
--- a/apps/web/src/components/ui/rich-editor/editor-toolbar.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-"use client"
-
-import React, { useEffect, useRef } from "react"
-import {
-  Eye,
-  EyeOff,
-  List,
-  ListOrdered,
-  Plus,
-  Table as TableIcon,
-} from "lucide-react"
-
-import { Button } from "../button"
-import { ButtonGroup } from "../button-group"
-import { CardContent } from "../card"
-import { Separator } from "../separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../tooltip"
-import { MediaUploadPopover } from "./media-upload-popover"
-import { useTranslations } from "next-intl"
-
-interface EditorToolbarProps {
-  isUploading: boolean
-  readOnly?: boolean
-  onReadOnlyChange?: (readOnly: boolean) => void
-  onImageUploadClick: () => void
-  onMultipleImagesUploadClick: () => void
-  onVideoUploadClick: () => void
-  onInsertComponentClick: () => void
-  onCreateList: (listType: "ul" | "ol" | "li") => void
-  onCreateTable: () => void
-}
-
-export function EditorToolbar({
-  isUploading,
-  readOnly = false,
-  onReadOnlyChange,
-  onImageUploadClick,
-  onMultipleImagesUploadClick,
-  onVideoUploadClick,
-  onInsertComponentClick,
-  onCreateList,
-  onCreateTable,
-}: EditorToolbarProps) {
-  const t = useTranslations("RichEditor.toolbar")
-  const toolbarRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    // Measure toolbar height and set it as CSS variable
-    const updateToolbarHeight = () => {
-      if (toolbarRef.current) {
-        const height = toolbarRef.current.offsetHeight
-        document.documentElement.style.setProperty(
-          "--toolbar-height",
-          `${height + 4}px`
-        )
-      }
-    }
-
-    // Update on mount and when window resizes
-    updateToolbarHeight()
-    window.addEventListener("resize", updateToolbarHeight)
-
-    return () => {
-      window.removeEventListener("resize", updateToolbarHeight)
-    }
-  }, [])
-
-  return (
-    <TooltipProvider>
-      <CardContent
-        ref={toolbarRef}
-        className="bg-background/30 sticky top-0 z-[100] mx-auto w-full border-b p-2 backdrop-blur-2xl transition-all duration-300"
-      >
-        <div className="mx-auto flex w-full max-w-4xl flex-col items-stretch justify-center gap-2 md:flex-row md:items-center md:gap-3 lg:px-6">
-          {/* Insert Elements */}
-          <div className="flex flex-wrap items-center justify-center gap-1.5 md:gap-2">
-            {/* Read-Only Toggle - Only show if handler is provided */}
-            {onReadOnlyChange && (
-              <>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant={readOnly ? "default" : "ghost"}
-                      size="icon"
-                      onClick={() => onReadOnlyChange(!readOnly)}
-                      className="h-7 w-7 md:h-8 md:w-8"
-                      title={readOnly ? t("viewOnlyMode") : t("editMode")}
-                    >
-                      {readOnly ? (
-                        <Eye className="size-3 md:size-3.5" />
-                      ) : (
-                        <EyeOff className="size-3 md:size-3.5" />
-                      )}
-                      <span className="sr-only">
-                        {readOnly ? t("viewOnlyMode") : t("editMode")}
-                      </span>
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{readOnly ? t("viewOnlyMode") : t("editMode")}</p>
-                  </TooltipContent>
-                </Tooltip>
-
-                <Separator
-                  orientation="vertical"
-                  className="hidden h-5 sm:block md:h-6"
-                />
-              </>
-            )}
-
-            {/* Media Upload Popover - combines image and video uploads */}
-            <MediaUploadPopover
-              isUploading={isUploading}
-              onImageUploadClick={onImageUploadClick}
-              onMultipleImagesUploadClick={onMultipleImagesUploadClick}
-              onVideoUploadClick={onVideoUploadClick}
-            />
-
-            <Separator
-              orientation="vertical"
-              className="hidden h-5 sm:block md:h-6"
-            />
-
-            {/* Insert Component Button */}
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={onInsertComponentClick}
-              className="h-7 w-7 md:h-8 md:w-8"
-              title={t("insertComponent")}
-              disabled={isUploading}
-            >
-              <Plus className="size-3 md:size-3.5" />
-            </Button>
-
-            <Separator
-              orientation="vertical"
-              className="hidden h-5 sm:block md:h-6"
-            />
-
-            {/* List Button Group */}
-            <ButtonGroup>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => onCreateList("ul")}
-                className="h-7 w-7 md:h-8 md:w-8"
-                title={t("addUnorderedList")}
-              >
-                <List className="size-3 md:size-3.5" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => onCreateList("ol")}
-                className="h-7 w-7 md:h-8 md:w-8"
-                title={t("addOrderedList")}
-              >
-                <ListOrdered className="size-3 md:size-3.5" />
-              </Button>
-            </ButtonGroup>
-
-            {/* Table Button */}
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={onCreateTable}
-              className="h-7 w-7 md:h-8 md:w-8"
-              title={t("addTable")}
-            >
-              <TableIcon className="size-3 md:size-3.5" />
-            </Button>
-          </div>
-        </div>
-      </CardContent>
-    </TooltipProvider>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/editor.tsx b/apps/web/src/components/ui/rich-editor/editor.tsx
deleted file mode 100644
index 34a7bb63..00000000
--- a/apps/web/src/components/ui/rich-editor/editor.tsx
+++ /dev/null
@@ -1,1361 +0,0 @@
-"use client"
-
-import React, { useCallback, useEffect, useRef, useState } from "react"
-
-import { useToast } from "@/hooks/use-toast"
-
-import { Card, CardContent } from "../card"
-import { AddBlockButton } from "./add-block-button"
-import { Block } from "./block"
-import { CoverImage } from "./CoverImage"
-import { CustomClassPopover } from "./custom-class-popover"
-
-import { ExportFloatingButton } from "./ExportFloatingButton"
-import { FreeImageBlock } from "./FreeImageBlock"
-import { GroupImagesButton } from "./group-images-button"
-import {
-  createHandleBlockDragStart,
-  createHandleDragEnter,
-  createHandleDragLeave,
-  createHandleDragOver,
-  createHandleDrop,
-  createHandleImageDragStart,
-} from "./handlers/drag-drop-handlers"
-import {
-  createHandleFileChange,
-  createHandleFreeImageFileChange,
-  createHandleFreeImageUploadClick,
-  createHandleImageUploadClick,
-  createHandleMultipleFilesChange,
-  createHandleMultipleImagesUploadClick,
-} from "./handlers/file-upload-handlers"
-import {
-  createHandleFlexContainerDragLeave,
-  createHandleFlexContainerDragOver,
-  createHandleFlexContainerDrop,
-} from "./handlers/flex-container-handlers"
-import {
-  checkImagesInSameFlex,
-  createHandleClearImageSelection,
-  createHandleExtractFromFlex,
-  createHandleGroupSelectedImages,
-  createHandleReverseImagesInFlex,
-  createHandleToggleImageSelection,
-} from "./handlers/image-selection-handlers"
-import {
-  createHandleClickWithModifier,
-  createHandleContentChange,
-  createHandleKeyDown,
-} from "./handlers/keyboard-handlers"
-import {
-  createHandleAddBlock,
-  createHandleChangeBlockType,
-  createHandleCopyHtml,
-  createHandleCopyJson,
-  createHandleCreateLink,
-  createHandleCreateList,
-  createHandleCreateListFromCommand,
-  createHandleCreateNested,
-  createHandleCreateTable,
-  createHandleDeleteNode,
-  createHandleInsertImageFromCommand,
-  createHandleNodeClick,
-} from "./handlers/node-operation-handlers"
-// Import all handlers
-import {
-  createHandleApplyColor,
-  createHandleApplyFontSize,
-  createHandleFormat,
-  createHandleSelectionChange,
-  createHandleTypeChange,
-} from "./handlers/selection-handlers"
-import { InsertComponentsModal } from "./InsertComponentsModal"
-import { EditorActions } from "./lib/reducer/actions"
-import { QuickModeToggle } from "./QuickModeToggle"
-import { SelectionToolbar } from "./SelectionToolbar"
-import {
-  useContainer,
-  useEditorDispatch,
-  useEditorStore,
-  useSelection,
-  useSelectionManager,
-} from "./store/editor-store"
-import { TableDialog } from "./table-dialog"
-import { TemplateSwitcherButton } from "./TemplateSwitcherButton"
-import { ContainerNode, isTextNode, type TextNode } from "./types"
-import { useDragAutoScroll } from "./utils/drag-auto-scroll"
-import { findNodeInTree } from "./utils/editor-helpers"
-import { useTranslations } from "next-intl"
-
-/**
- * Editor Component Props
- */
-interface EditorProps {
-  readOnly?: boolean // View-only mode - renders content without editing capabilities
-  onUploadImage?: (file: File) => Promise<string> // Custom image upload handler - should return the uploaded image URL
-  notionBased?: boolean // Enable Notion-style features (cover image, first header spacing) - default: true
-  onNotionBasedChange?: (notionBased: boolean) => void // Callback when notion mode is toggled
-  // enableVirtualization?: boolean; // Enable virtualization for better performance with many blocks - default: false
-  // virtualizationThreshold?: number; // Number of blocks before virtualization kicks in - default: 50
-}
-
-export function Editor({
-  readOnly: initialReadOnly = false,
-  onUploadImage,
-  notionBased = true,
-  onNotionBasedChange,
-}: // enableVirtualization = false,
-  // virtualizationThreshold = 50,
-  EditorProps = {}) {
-  // ✅ OPTIMIZATION: Subscribe to specific state pieces instead of full state
-  // This prevents Editor from re-rendering on every state change
-  const activeNodeId = useEditorStore((state) => state.activeNodeId)
-  const historyIndex = useEditorStore((state) => state.historyIndex)
-  const historyLength = useEditorStore((state) => state.history.length)
-  const coverImage = useEditorStore((state) => state.coverImage)
-  const currentSelection = useEditorStore((state) => state.currentSelection)
-
-  const dispatch = useEditorDispatch()
-  const container = useContainer()
-  const selectionManager = useSelectionManager()
-  const { toast } = useToast()
-  const tToasts = useTranslations("RichEditor.toasts")
-  const lastEnterTime = useRef<number>(0)
-  const nodeRefs = useRef<Map<string, HTMLElement>>(new Map())
-  const contentUpdateTimers = useRef<Map<string, NodeJS.Timeout>>(new Map())
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const multipleFileInputRef = useRef<HTMLInputElement>(null)
-  const videoInputRef = useRef<HTMLInputElement>(null)
-  const freeImageInputRef = useRef<HTMLInputElement>(null)
-  const editorContentRef = useRef<HTMLDivElement>(null)
-  const [readOnly, setReadOnly] = useState(initialReadOnly)
-
-  // Enable auto-scroll when dragging near viewport edges
-  useDragAutoScroll(editorContentRef, {
-    scrollZone: 100,
-    scrollSpeed: 15,
-    enableVertical: true,
-    enableHorizontal: false,
-  })
-
-  const [isUploading, setIsUploading] = useState(false)
-  const [copiedHtml, setCopiedHtml] = useState(false)
-  const [copiedJson, setCopiedJson] = useState(false)
-  const [enhanceSpaces, setEnhanceSpaces] = useState(true)
-  const [dragOverNodeId, setDragOverNodeId] = useState<string | null>(null)
-  const [dropPosition, setDropPosition] = useState<
-    "before" | "after" | "left" | "right" | null
-  >(null)
-  const [draggingNodeId, setDraggingNodeId] = useState<string | null>(null)
-  const [selectedColor, setSelectedColor] = useState<string>("")
-  const [selectedImageIds, setSelectedImageIds] = useState<Set<string>>(
-    new Set()
-  )
-  const [dragOverFlexId, setDragOverFlexId] = useState<string | null>(null)
-  const [flexDropPosition, setFlexDropPosition] = useState<
-    "left" | "right" | null
-  >(null)
-  const [tableDialogOpen, setTableDialogOpen] = useState(false)
-  const [tableInsertionTargetId, setTableInsertionTargetId] = useState<
-    string | undefined
-  >(undefined)
-  const [insertComponentModalOpen, setInsertComponentModalOpen] =
-    useState(false)
-
-  // Container is now obtained from useContainer hook above
-
-  const currentNode = activeNodeId
-    ? (container.children.find((n) => n.id === activeNodeId) as
-      | TextNode
-      | undefined)
-    : (container.children[0] as TextNode | undefined)
-
-  // Debounced dispatch for selection state updates
-  const selectionDispatchTimerRef = useRef<NodeJS.Timeout | null>(null)
-
-  // Create handler parameters
-  const selectionParams = {
-    container,
-    state: {
-      activeNodeId,
-      historyIndex,
-      history: [container],
-      currentSelection,
-    } as any, // Minimal state object for handlers
-    dispatch,
-    selectionManager,
-    nodeRefs,
-  }
-
-  // keyboardParams will be created dynamically with the handlers
-
-  const nodeOperationParams = {
-    container,
-    dispatch,
-    toast,
-    nodeRefs,
-    editorContentRef,
-  }
-
-  const dragDropParams = {
-    container,
-    dispatch,
-    toast,
-    draggingNodeId,
-    setDraggingNodeId,
-    setDragOverNodeId,
-    setDropPosition,
-    setIsUploading,
-    onUploadImage,
-  }
-
-  const fileUploadParams = {
-    container,
-    dispatch,
-    state: { activeNodeId, historyIndex, history: [container] } as any,
-    toast,
-    setIsUploading,
-    fileInputRef,
-    multipleFileInputRef,
-    onUploadImage,
-  }
-
-  const videoUploadParams = {
-    container,
-    dispatch,
-    state: { activeNodeId, historyIndex, history: [container] } as any,
-    toast,
-    setIsUploading,
-    fileInputRef: videoInputRef,
-    multipleFileInputRef: videoInputRef, // Reuse the same ref for consistency
-    onUploadImage,
-  }
-
-  const freeImageUploadParams = {
-    container,
-    dispatch,
-    state: { activeNodeId, historyIndex, history: [container] } as any,
-    toast,
-    setIsUploading,
-    fileInputRef: freeImageInputRef,
-    multipleFileInputRef: freeImageInputRef,
-    onUploadImage,
-  }
-
-  // Create all handlers
-  const handleSelectionChange = useCallback(
-    createHandleSelectionChange(selectionParams, selectionDispatchTimerRef),
-    [container, activeNodeId, selectionManager, dispatch]
-  )
-
-  const handleFormat = useCallback(createHandleFormat(selectionParams), [
-    container,
-    dispatch,
-    selectionManager,
-  ])
-
-  const handleApplyColor = useCallback(
-    createHandleApplyColor(selectionParams, toast, setSelectedColor),
-    [dispatch, selectionManager, toast]
-  )
-
-  const handleApplyFontSize = useCallback(
-    createHandleApplyFontSize(selectionParams, toast),
-    [dispatch, selectionManager, toast]
-  )
-
-  const handleTypeChange = useCallback(
-    createHandleTypeChange(selectionParams, handleSelectionChange),
-    [dispatch, selectionManager, handleSelectionChange]
-  )
-
-  const handleToggleImageSelection = useCallback(
-    createHandleToggleImageSelection(selectedImageIds, setSelectedImageIds),
-    [selectedImageIds]
-  )
-
-  const handleContentChange = useCallback(
-    createHandleContentChange(
-      {
-        container,
-        dispatch,
-        nodeRefs,
-        lastEnterTime,
-        onToggleImageSelection: handleToggleImageSelection,
-      },
-      contentUpdateTimers
-    ),
-    [container, dispatch, handleToggleImageSelection]
-  )
-
-  const handleKeyDown = useCallback(
-    createHandleKeyDown({
-      container,
-      dispatch,
-      nodeRefs,
-      lastEnterTime,
-      onToggleImageSelection: handleToggleImageSelection,
-    }),
-    [container, dispatch, nodeRefs, lastEnterTime, handleToggleImageSelection]
-  )
-
-  const handleClickWithModifier = useCallback(
-    createHandleClickWithModifier({
-      container,
-      dispatch,
-      nodeRefs,
-      lastEnterTime,
-      onToggleImageSelection: handleToggleImageSelection,
-    }),
-    [container, handleToggleImageSelection]
-  )
-
-  const handleNodeClick = useCallback(
-    createHandleNodeClick({ container, dispatch }),
-    [container, dispatch]
-  )
-
-  const handleDeleteNode = useCallback(
-    createHandleDeleteNode({ container, dispatch, toast }),
-    [container, dispatch, toast]
-  )
-
-  const handleAddBlock = useCallback(
-    createHandleAddBlock({ dispatch, nodeRefs }),
-    [dispatch, nodeRefs]
-  )
-
-  const handleCreateNested = useCallback(
-    createHandleCreateNested({ container, dispatch, toast }),
-    [container, dispatch, toast]
-  )
-
-  const handleChangeBlockType = useCallback(
-    createHandleChangeBlockType({ dispatch, nodeRefs }),
-    [dispatch, nodeRefs]
-  )
-
-  const handleInsertImageFromCommand = useCallback(
-    createHandleInsertImageFromCommand({ dispatch, nodeRefs }, fileInputRef),
-    [dispatch, fileInputRef]
-  )
-
-  const handleCreateList = useCallback(
-    createHandleCreateList(nodeOperationParams),
-    [container, dispatch, toast, editorContentRef]
-  )
-
-  const handleCreateListFromCommand = useCallback(
-    createHandleCreateListFromCommand({ dispatch, toast, nodeRefs }),
-    [dispatch, toast, nodeRefs]
-  )
-
-  const handleCreateLink = useCallback(
-    createHandleCreateLink(nodeOperationParams),
-    [container, dispatch, toast, editorContentRef]
-  )
-
-  const handleCreateTable = useCallback(
-    createHandleCreateTable(nodeOperationParams, tableInsertionTargetId),
-    [container, dispatch, toast, editorContentRef, tableInsertionTargetId]
-  )
-
-  const handleCreateTableFromCommand = useCallback(
-    (nodeId: string) => {
-      // Store the node ID for later use when table is created
-      setTableInsertionTargetId(nodeId)
-      dispatch(EditorActions.setActiveNode(nodeId))
-      // Open the table dialog
-      setTableDialogOpen(true)
-    },
-    [dispatch]
-  )
-
-  const handleImportMarkdownTable = useCallback(
-    (table: any) => {
-      const timestamp = Date.now()
-
-      // Wrap table in a container for consistent handling
-      const tableWrapper: ContainerNode = {
-        id: `table-wrapper-${timestamp}`,
-        type: "container",
-        children: [table],
-        attributes: {},
-      }
-
-      // Determine where to insert the table
-      let targetNode = null
-      let targetPosition: "after" | "before" = "after"
-
-      if (tableInsertionTargetId) {
-        // If we have a target node (from command menu), insert after it
-        targetNode = container.children.find(
-          (n) => n.id === tableInsertionTargetId
-        )
-        targetPosition = "after"
-      }
-
-      if (!targetNode) {
-        // Fallback: insert at the end
-        targetNode = container.children[container.children.length - 1]
-        targetPosition = "after"
-      }
-
-      if (targetNode) {
-        dispatch(
-          EditorActions.insertNode(tableWrapper, targetNode.id, targetPosition)
-        )
-      } else {
-        // If no nodes exist, replace the container
-        dispatch(
-          EditorActions.replaceContainer({
-            ...container,
-            children: [tableWrapper],
-          })
-        )
-      }
-
-      toast({
-        title: tToasts("tableImported"),
-        description: tToasts("tableImportedDesc"),
-      })
-
-      // Smooth scroll to the newly created table
-      setTimeout(() => {
-        const editorContent = editorContentRef.current
-        if (editorContent) {
-          const tableElement = editorContent.querySelector(
-            `[data-node-id="${tableWrapper.id}"]`
-          )
-          if (tableElement) {
-            tableElement.scrollIntoView({
-              behavior: "smooth",
-              block: "center",
-              inline: "nearest",
-            })
-          }
-        }
-      }, 150)
-    },
-    [container, dispatch, toast, editorContentRef, tableInsertionTargetId, tToasts]
-  )
-
-  const handleCopyHtml = useCallback(
-    () =>
-      createHandleCopyHtml({ toast }, enhanceSpaces, setCopiedHtml)(container),
-    [container, enhanceSpaces, toast]
-  )
-
-  const handleCopyJson = useCallback(
-    () => createHandleCopyJson({ toast }, setCopiedJson)(container),
-    [container, toast]
-  )
-
-  const handleImageDragStart = useCallback(
-    createHandleImageDragStart(setDraggingNodeId),
-    []
-  )
-
-  const handleBlockDragStart = useCallback(
-    createHandleBlockDragStart(setDraggingNodeId),
-    []
-  )
-
-  const handleDragEnter = useCallback(createHandleDragEnter(), [])
-
-  const handleDragOver = useCallback(
-    createHandleDragOver({
-      container,
-      dispatch,
-      draggingNodeId,
-      setDraggingNodeId,
-      setDragOverNodeId,
-      setDropPosition,
-    }),
-    [container, draggingNodeId]
-  )
-
-  const handleDragLeave = useCallback(
-    createHandleDragLeave(setDragOverNodeId, setDropPosition),
-    []
-  )
-
-  const handleDrop = useCallback(
-    createHandleDrop(dragDropParams, dropPosition),
-    [container, dispatch, toast, draggingNodeId, dropPosition, onUploadImage]
-  )
-
-  const handleFileChange = useCallback(
-    createHandleFileChange(fileUploadParams),
-    [container, dispatch, activeNodeId, toast, onUploadImage]
-  )
-
-  const handleMultipleFilesChange = useCallback(
-    createHandleMultipleFilesChange(fileUploadParams),
-    [container, dispatch, activeNodeId, toast, onUploadImage]
-  )
-
-  const handleImageUploadClick = useCallback(
-    createHandleImageUploadClick(fileInputRef),
-    []
-  )
-
-  const handleMultipleImagesUploadClick = useCallback(
-    createHandleMultipleImagesUploadClick(multipleFileInputRef),
-    []
-  )
-
-  const handleVideoUploadClick = useCallback(
-    createHandleImageUploadClick(videoInputRef),
-    []
-  )
-
-  const handleVideoFileChange = useCallback(
-    createHandleFileChange(videoUploadParams),
-    [container, dispatch, activeNodeId, toast, onUploadImage]
-  )
-
-  const handleFreeImageFileChange = useCallback(
-    createHandleFreeImageFileChange(freeImageUploadParams),
-    [container, dispatch, activeNodeId, toast, onUploadImage]
-  )
-
-  const handleFreeImageUploadClick = useCallback(
-    createHandleFreeImageUploadClick(freeImageInputRef),
-    []
-  )
-
-  const handleInsertComponentClick = useCallback(() => {
-    setInsertComponentModalOpen(true)
-  }, [])
-
-  const handleInsertComponentSelect = useCallback(
-    (componentId: string) => {
-      if (componentId === "free-image") {
-        handleFreeImageUploadClick()
-      }
-      // Future: handle other component types here
-    },
-    [handleFreeImageUploadClick]
-  )
-
-  const handleClearImageSelection = useCallback(
-    createHandleClearImageSelection(setSelectedImageIds),
-    []
-  )
-
-  const handleGroupSelectedImages = useCallback(
-    createHandleGroupSelectedImages(
-      { container, dispatch, toast },
-      selectedImageIds,
-      handleClearImageSelection
-    ),
-    [container, dispatch, toast, selectedImageIds, handleClearImageSelection]
-  )
-
-  // Check if selected images are in same flex container
-  const flexInfo = React.useMemo(() => {
-    if (selectedImageIds.size < 2) {
-      return { inSameFlex: false, flexParentId: null }
-    }
-    return checkImagesInSameFlex(
-      { container, dispatch, toast },
-      selectedImageIds
-    )
-  }, [container, selectedImageIds, dispatch, toast])
-
-  const handleReverseImagesInFlex = useCallback(
-    createHandleReverseImagesInFlex(
-      { container, dispatch, toast },
-      selectedImageIds,
-      flexInfo.flexParentId || ""
-    ),
-    [container, dispatch, toast, selectedImageIds, flexInfo.flexParentId]
-  )
-
-  const handleExtractFromFlex = useCallback(
-    createHandleExtractFromFlex(
-      { container, dispatch, toast },
-      selectedImageIds,
-      flexInfo.flexParentId || "",
-      handleClearImageSelection
-    ),
-    [
-      container,
-      dispatch,
-      toast,
-      selectedImageIds,
-      flexInfo.flexParentId,
-      handleClearImageSelection,
-    ]
-  )
-
-  const handleFlexContainerDragOver = useCallback(
-    createHandleFlexContainerDragOver({
-      container,
-      dispatch,
-      toast,
-      draggingNodeId,
-      setDragOverFlexId,
-      setFlexDropPosition,
-    }),
-    [container, dispatch, toast, draggingNodeId]
-  )
-
-  const handleFlexContainerDragLeave = useCallback(
-    createHandleFlexContainerDragLeave(setDragOverFlexId, setFlexDropPosition),
-    []
-  )
-
-  const handleFlexContainerDrop = useCallback(
-    createHandleFlexContainerDrop({
-      container,
-      dispatch,
-      toast,
-      draggingNodeId,
-      setDragOverFlexId,
-      setFlexDropPosition,
-    }),
-    [container, dispatch, toast, draggingNodeId]
-  )
-
-  // Selection change listener
-  useEffect(() => {
-    document.addEventListener("selectionchange", handleSelectionChange)
-    return () => {
-      document.removeEventListener("selectionchange", handleSelectionChange)
-    }
-  }, [handleSelectionChange])
-
-  // Focus on current node when it changes
-  useEffect(() => {
-    if (!activeNodeId) return
-
-    const activeId = activeNodeId
-    let focusTimer: NodeJS.Timeout
-
-    const attemptFocus = (retries = 0) => {
-      const element = nodeRefs.current.get(activeId)
-
-      if (element && document.activeElement !== element) {
-        element.focus()
-      } else if (!element && retries < 20) { // Increased retries
-        focusTimer = setTimeout(() => attemptFocus(retries + 1), 50)
-      } else if (!element) {
-        // Only warn if we really expected it to be there
-        console.warn(
-          "⚠️ [Focus Failed] Element not found:",
-          activeId
-        )
-      }
-    }
-
-    attemptFocus()
-
-    return () => {
-      clearTimeout(focusTimer)
-    }
-  }, [activeNodeId])
-
-  // Cleanup timers on unmount
-  useEffect(() => {
-    return () => {
-      contentUpdateTimers.current.forEach((timer) => clearTimeout(timer))
-      contentUpdateTimers.current.clear()
-    }
-  }, [])
-
-  // Handle paste events for images/videos
-  useEffect(() => {
-    const handlePaste = async (e: ClipboardEvent) => {
-      const activeElement = document.activeElement
-      const isInEditor = Array.from(nodeRefs.current.values()).some(
-        (el) => el === activeElement || el.contains(activeElement)
-      )
-
-      if (!isInEditor || readOnly) return
-
-      const items = e.clipboardData?.items
-      if (!items) return
-
-      // Check if any item is an image or video file
-      const mediaFiles: File[] = []
-      for (let i = 0; i < items.length; i++) {
-        const item = items[i]
-        if (
-          item.kind === "file" &&
-          (item.type.startsWith("image/") || item.type.startsWith("video/"))
-        ) {
-          const file = item.getAsFile()
-          if (file) {
-            mediaFiles.push(file)
-          }
-        }
-      }
-
-      if (mediaFiles.length === 0) return
-
-      // Prevent default paste behavior
-      e.preventDefault()
-
-      // Upload the files
-      setIsUploading(true)
-
-      try {
-        const uploadPromises = mediaFiles.map(async (file) => {
-          if (onUploadImage) {
-            return await onUploadImage(file)
-          } else {
-            const { uploadImage } = await import("./utils/image-upload")
-            const result = await uploadImage(file)
-            if (!result.success || !result.url) {
-              throw new Error(result.error || tToasts("uploadFailed"))
-            }
-            return result.url
-          }
-        })
-
-        const mediaUrls = await Promise.all(uploadPromises)
-
-        // Create media nodes
-        const timestamp = Date.now()
-        const mediaNodes: TextNode[] = mediaUrls.map((url, index) => {
-          const file = mediaFiles[index]
-          const isVideo = file.type.startsWith("video/")
-
-          return {
-            id: `${isVideo ? "video" : "img"}-${timestamp}-${index}`,
-            type: isVideo ? "video" : "img",
-            content: "",
-            attributes: {
-              src: url,
-              alt: file.name,
-            },
-          }
-        })
-
-        // Insert media nodes after current active node
-        const targetId =
-          activeNodeId || container.children[container.children.length - 1]?.id
-
-        if (mediaFiles.length === 1) {
-          // Single media file - insert directly
-          if (targetId) {
-            dispatch(EditorActions.insertNode(mediaNodes[0], targetId, "after"))
-          }
-        } else {
-          // Multiple media files - create flex container
-          const flexContainer: ContainerNode = {
-            id: `flex-container-${timestamp}`,
-            type: "container",
-            children: mediaNodes,
-            attributes: {
-              layoutType: "flex",
-              gap: "4",
-              flexWrap: "wrap",
-            },
-          }
-
-          if (targetId) {
-            dispatch(EditorActions.insertNode(flexContainer, targetId, "after"))
-          }
-        }
-
-        const videoCount = mediaFiles.filter((f) =>
-          f.type.startsWith("video/")
-        ).length
-        const imageCount = mediaFiles.filter((f) =>
-          f.type.startsWith("image/")
-        ).length
-        let description = ""
-        if (videoCount > 0 && imageCount > 0) {
-          description = tToasts("pasteMixed", {
-            imageCount,
-            videoCount,
-          })
-        } else if (videoCount > 0) {
-          description = tToasts("pasteVideos", { count: videoCount })
-        } else {
-          description = tToasts("pasteImages", { count: imageCount })
-        }
-
-        toast({
-          title: tToasts("mediaPasted"),
-          description,
-        })
-      } catch (error) {
-        toast({
-          variant: "destructive",
-          title: tToasts("pasteFailed"),
-          description:
-            error instanceof Error
-              ? error.message
-              : tToasts("unexpectedError"),
-        })
-      } finally {
-        setIsUploading(false)
-      }
-    }
-
-    document.addEventListener("paste", handlePaste)
-    return () => {
-      document.removeEventListener("paste", handlePaste)
-    }
-  }, [
-    readOnly,
-    activeNodeId,
-    container,
-    dispatch,
-    toast,
-    onUploadImage,
-    setIsUploading,
-    tToasts,
-  ])
-
-  // Handle global keyboard shortcuts
-  useEffect(() => {
-    const handleGlobalKeyDown = (e: KeyboardEvent) => {
-      const isCtrlOrCmd = e.ctrlKey || e.metaKey
-
-      const activeElement = document.activeElement
-      const isInEditor = Array.from(nodeRefs.current.values()).some(
-        (el) => el === activeElement || el.contains(activeElement)
-      )
-
-      // Ctrl+A / Cmd+A - Select all content in current block only
-      if (isCtrlOrCmd && e.key === "a" && isInEditor) {
-        e.preventDefault()
-
-        const selection = window.getSelection()
-        if (!selection) return
-
-        const currentBlock = activeElement as HTMLElement
-        if (currentBlock && currentBlock.isContentEditable) {
-          const range = document.createRange()
-          range.selectNodeContents(currentBlock)
-          selection.removeAllRanges()
-          selection.addRange(range)
-        }
-      }
-
-      // Ctrl+B / Cmd+B - Toggle Bold
-      if (isCtrlOrCmd && e.key === "b" && isInEditor) {
-        e.preventDefault()
-        const selection = window.getSelection()
-        if (selection && !selection.isCollapsed) {
-          handleFormat("bold")
-        }
-      }
-
-      // Ctrl+I / Cmd+I - Toggle Italic
-      if (isCtrlOrCmd && e.key === "i" && isInEditor) {
-        e.preventDefault()
-        const selection = window.getSelection()
-        if (selection && !selection.isCollapsed) {
-          handleFormat("italic")
-        }
-      }
-
-      // Ctrl+U / Cmd+U - Toggle Underline
-      if (isCtrlOrCmd && e.key === "u" && isInEditor) {
-        e.preventDefault()
-        const selection = window.getSelection()
-        if (selection && !selection.isCollapsed) {
-          handleFormat("underline")
-        }
-      }
-
-      // Ctrl+Shift+S / Cmd+Shift+S - Toggle Strikethrough
-      if (isCtrlOrCmd && e.shiftKey && e.key === "S" && isInEditor) {
-        e.preventDefault()
-        const selection = window.getSelection()
-        if (selection && !selection.isCollapsed) {
-          handleFormat("strikethrough")
-        }
-      }
-
-      // Ctrl+E / Cmd+E - Toggle Code
-      if (isCtrlOrCmd && e.key === "e" && isInEditor) {
-        e.preventDefault()
-        const selection = window.getSelection()
-        if (selection && !selection.isCollapsed) {
-          handleFormat("code")
-        }
-      }
-
-      // Ctrl+Z / Cmd+Z - Undo
-      if (isCtrlOrCmd && e.key === "z" && !e.shiftKey) {
-        if (
-          !isInEditor &&
-          (activeElement?.tagName === "INPUT" ||
-            activeElement?.tagName === "TEXTAREA")
-        ) {
-          return
-        }
-        e.preventDefault()
-        if (historyIndex > 0) {
-          dispatch(EditorActions.undo())
-        }
-      }
-
-      // Ctrl+Y / Cmd+Y or Ctrl+Shift+Z - Redo
-      if (
-        (isCtrlOrCmd && e.key === "y") ||
-        (isCtrlOrCmd && e.shiftKey && e.key === "z")
-      ) {
-        if (
-          !isInEditor &&
-          (activeElement?.tagName === "INPUT" ||
-            activeElement?.tagName === "TEXTAREA")
-        ) {
-          return
-        }
-        e.preventDefault()
-        if (historyIndex < historyLength - 1) {
-          dispatch(EditorActions.redo())
-        }
-      }
-
-      // Arrow Up/Down - Navigate between blocks
-      if (
-        (e.key === "ArrowUp" || e.key === "ArrowDown") &&
-        isInEditor &&
-        activeNodeId
-      ) {
-        const currentElement = activeElement as HTMLElement
-        const currentNodeId =
-          currentElement?.getAttribute("data-node-id") || activeNodeId
-
-        // Find the current node and its siblings
-        const result = findNodeInTree(currentNodeId, container)
-        if (!result) return
-
-        const { siblings } = result
-        const currentIndex = siblings.findIndex((n) => n.id === currentNodeId)
-        if (currentIndex === -1) return
-
-        // ArrowUp: Navigate to previous block
-        if (e.key === "ArrowUp" && currentIndex > 0) {
-          e.preventDefault()
-          const prevNode = siblings[currentIndex - 1]
-          dispatch(EditorActions.setActiveNode(prevNode.id))
-
-          // Focus and place cursor at the end of the previous node
-          setTimeout(() => {
-            const prevElement = nodeRefs.current.get(prevNode.id)
-            if (prevElement) {
-              prevElement.focus()
-              const range = document.createRange()
-              const sel = window.getSelection()
-
-              // Place cursor at the end
-              const lastChild =
-                prevElement.childNodes[prevElement.childNodes.length - 1]
-              if (lastChild?.nodeType === Node.TEXT_NODE) {
-                range.setStart(lastChild, lastChild.textContent?.length || 0)
-              } else if (lastChild) {
-                range.setStartAfter(lastChild)
-              } else {
-                range.selectNodeContents(prevElement)
-              }
-              range.collapse(true)
-              sel?.removeAllRanges()
-              sel?.addRange(range)
-            }
-          }, 10)
-        }
-
-        // ArrowDown: Navigate to next block
-        if (e.key === "ArrowDown" && currentIndex < siblings.length - 1) {
-          e.preventDefault()
-          const nextNode = siblings[currentIndex + 1]
-          dispatch(EditorActions.setActiveNode(nextNode.id))
-
-          // Focus and place cursor at the end of the next node
-          setTimeout(() => {
-            const nextElement = nodeRefs.current.get(nextNode.id)
-            if (nextElement) {
-              nextElement.focus()
-              const range = document.createRange()
-              const sel = window.getSelection()
-
-              // Place cursor at the end
-              const lastChild =
-                nextElement.childNodes[nextElement.childNodes.length - 1]
-              if (lastChild?.nodeType === Node.TEXT_NODE) {
-                range.setStart(lastChild, lastChild.textContent?.length || 0)
-              } else if (lastChild) {
-                range.setStartAfter(lastChild)
-              } else {
-                range.selectNodeContents(nextElement)
-              }
-              range.collapse(true)
-              sel?.removeAllRanges()
-              sel?.addRange(range)
-            }
-          }, 10)
-        }
-      }
-    }
-
-    document.addEventListener("keydown", handleGlobalKeyDown)
-    return () => {
-      document.removeEventListener("keydown", handleGlobalKeyDown)
-    }
-  }, [
-    historyIndex,
-    historyLength,
-    activeNodeId,
-    dispatch,
-    toast,
-    handleFormat,
-    container,
-  ])
-
-  return (
-    <div className="bg-background flex flex-1 flex-col transition-colors duration-300">
-      {/* Editor with integrated toolbar */}
-      <div className="mx-auto flex w-full flex-1 flex-col">
-        <QuickModeToggle
-          readOnly={readOnly}
-          onReadOnlyChange={setReadOnly}
-          notionBased={notionBased}
-          onNotionBasedChange={onNotionBasedChange}
-        />
-        {/* Toolbar - always shown now with read-only toggle */}
-        {/* Toolbar removed as per user request */}
-        <div className="relative flex flex-1 flex-col gap-3 rounded-none transition-all duration-300">
-          {/* Table Dialog */}
-          <TableDialog
-            open={tableDialogOpen}
-            onOpenChange={(open) => {
-              setTableDialogOpen(open)
-              // Clear the target ID when dialog closes
-              if (!open) {
-                setTableInsertionTargetId(undefined)
-              }
-            }}
-            onCreateTable={handleCreateTable}
-            onImportMarkdown={handleImportMarkdownTable}
-          />
-
-          {/* Insert Components Modal */}
-          <InsertComponentsModal
-            open={insertComponentModalOpen}
-            onOpenChange={setInsertComponentModalOpen}
-            onSelect={handleInsertComponentSelect}
-          />
-
-          {/* Hidden file inputs for image and video uploads */}
-          {!readOnly && (
-            <>
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept="image/*"
-                onChange={handleFileChange}
-                className="hidden"
-              />
-              <input
-                ref={multipleFileInputRef}
-                type="file"
-                accept="image/*"
-                multiple
-                onChange={handleMultipleFilesChange}
-                className="hidden"
-              />
-              <input
-                ref={videoInputRef}
-                type="file"
-                accept="video/*"
-                onChange={handleVideoFileChange}
-                className="hidden"
-              />
-              <input
-                ref={freeImageInputRef}
-                type="file"
-                accept="image/*"
-                onChange={handleFreeImageFileChange}
-                className="hidden"
-              />
-            </>
-          )}
-
-          {/* Editor Content */}
-          <CardContent
-            className={`mx-auto flex w-full flex-1 flex-col px-0 transition-all duration-300`}
-          >
-            <div ref={editorContentRef} className="h-full">
-              <>
-                {/* Cover Image - Only in Notion mode for non-virtualized */}
-                {notionBased && (
-                  <CoverImage
-                    onUploadImage={onUploadImage}
-                    readOnly={readOnly}
-                  />
-                )}
-
-                <div
-                  data-editor-content
-                  className={`${notionBased && coverImage
-                    ? "pt-[280px] lg:pt-[420px]"
-                    : notionBased
-                      ? "pt-[30px]"
-                      : "pt-4"
-                    } relative px-10 transition-all duration-300`}
-                >
-                  {container.children.map((node, index) => {
-                    const isText = isTextNode(node)
-                    const textNode = isText ? (node as TextNode) : null
-
-                    // Skip free-positioned images - they'll be rendered separately
-                    if (
-                      textNode &&
-                      textNode.type === "img" &&
-                      textNode.attributes?.isFreePositioned
-                    ) {
-                      return null
-                    }
-
-                    // Use stable key based only on node.id to prevent unnecessary remounts
-                    // Previously included children.length which caused remounts on every edit
-                    const nodeKey = node.id
-
-                    const isFirstBlock = index === 0
-                    const isSecondBlock = index === 1
-
-                    return (
-                      <div className="mx-auto w-full max-w-6xl" key={nodeKey}>
-                        {/* Add block button before first block */}
-                        {!readOnly && isFirstBlock && (
-                          <AddBlockButton
-                            onAdd={() => handleAddBlock(node.id, "before")}
-                            position="before"
-                          />
-                        )}
-
-                        <div
-                          onDragEnter={(e) => handleDragEnter(e, node.id)}
-                          onDragOver={(e) => handleDragOver(e, node.id)}
-                          onDragLeave={handleDragLeave}
-                          onDrop={(e) => handleDrop(e, node.id)}
-                          className={`relative transition-all ${dragOverNodeId === node.id &&
-                            dropPosition === "before" &&
-                            draggingNodeId !== node.id
-                            ? "before:bg-primary/30 before:absolute before:inset-x-0 before:-top-1 before:z-10 before:h-1 before:rounded-full"
-                            : ""
-                            } ${dragOverNodeId === node.id &&
-                              dropPosition === "after" &&
-                              draggingNodeId !== node.id
-                              ? "after:bg-primary/30 after:absolute after:inset-x-0 after:-bottom-1 after:z-10 after:h-1 after:rounded-full"
-                              : ""
-                            } ${dragOverNodeId === node.id &&
-                              dropPosition === "left" &&
-                              draggingNodeId !== node.id
-                              ? "before:absolute before:inset-y-0 before:-left-1 before:z-10 before:w-1 before:rounded-full before:bg-blue-500/50"
-                              : ""
-                            } ${dragOverNodeId === node.id &&
-                              dropPosition === "right" &&
-                              draggingNodeId !== node.id
-                              ? "after:absolute after:inset-y-0 after:-right-1 after:z-10 after:w-1 after:rounded-full after:bg-blue-500/50"
-                              : ""
-                            } `}
-                        >
-                          <Block
-                            nodeId={node.id}
-                            isActive={activeNodeId === node.id}
-                            isFirstBlock={isFirstBlock}
-                            notionBased={notionBased}
-                            hasCoverImage={!!coverImage}
-                            onUploadCoverImage={onUploadImage}
-                            nodeRef={(el) => {
-                              if (el) {
-                                const elementNodeId =
-                                  el.getAttribute("data-node-id")
-                                if (elementNodeId) {
-                                  nodeRefs.current.set(elementNodeId, el)
-                                }
-
-                                if (textNode && elementNodeId === node.id) {
-                                  const isCurrentlyFocused =
-                                    document.activeElement === el
-                                  const selection = window.getSelection()
-
-                                  const hasActiveSelection =
-                                    selection &&
-                                    selection.rangeCount > 0 &&
-                                    !selection.isCollapsed
-
-                                  let selectionInThisElement = false
-                                  if (
-                                    hasActiveSelection &&
-                                    selection.rangeCount > 0
-                                  ) {
-                                    const range = selection.getRangeAt(0)
-                                    selectionInThisElement = el.contains(
-                                      range.commonAncestorContainer
-                                    )
-                                  }
-
-                                  // Check if node has inline children
-                                  const nodeHasChildren =
-                                    textNode &&
-                                    Array.isArray(textNode.children) &&
-                                    textNode.children.length > 0
-
-                                  if (
-                                    !isCurrentlyFocused &&
-                                    !nodeHasChildren &&
-                                    !hasActiveSelection &&
-                                    !selectionInThisElement
-                                  ) {
-                                    const displayContent =
-                                      textNode.content || ""
-                                    const currentContent = el.textContent || ""
-
-                                    if (currentContent !== displayContent) {
-                                      el.textContent = displayContent
-                                    }
-                                  }
-                                }
-                              } else {
-                                nodeRefs.current.delete(node.id)
-                              }
-                            }}
-                            onInput={(element) =>
-                              handleContentChange(node.id, element)
-                            }
-                            onKeyDown={(e) => handleKeyDown(e, node.id)}
-                            onClick={() => handleNodeClick(node.id)}
-                            onDelete={(nodeId?: string) =>
-                              handleDeleteNode(nodeId || node.id)
-                            }
-                            onCreateNested={handleCreateNested}
-                            readOnly={readOnly}
-                            onImageDragStart={handleImageDragStart}
-                            onBlockDragStart={handleBlockDragStart}
-                            onChangeBlockType={handleChangeBlockType}
-                            onInsertImage={handleInsertImageFromCommand}
-                            onCreateList={handleCreateListFromCommand}
-                            onCreateTable={handleCreateTableFromCommand}
-                            onUploadImage={onUploadImage}
-                            selectedImageIds={selectedImageIds}
-                            onToggleImageSelection={handleToggleImageSelection}
-                            onClickWithModifier={handleClickWithModifier}
-                            onFlexContainerDragOver={
-                              handleFlexContainerDragOver
-                            }
-                            onFlexContainerDragLeave={
-                              handleFlexContainerDragLeave
-                            }
-                            onFlexContainerDrop={handleFlexContainerDrop}
-                            dragOverFlexId={dragOverFlexId}
-                            flexDropPosition={flexDropPosition}
-                            onSetDragOverNodeId={setDragOverNodeId}
-                            onSetDropPosition={setDropPosition}
-                            draggingNodeId={draggingNodeId}
-                            onSetDraggingNodeId={setDraggingNodeId}
-                          />
-                        </div>
-
-                        {/* Add block button after each block */}
-                        {!readOnly && (
-                          <AddBlockButton
-                            onAdd={() => handleAddBlock(node.id, "after")}
-                            position="after"
-                          />
-                        )}
-                      </div>
-                    )
-                  })}
-                </div>
-              </>
-            </div>
-          </CardContent>
-
-          {/* Free-positioned images - rendered absolutely */}
-          {container.children
-            .filter((node) => {
-              const textNode = isTextNode(node) ? (node as TextNode) : null
-              return (
-                textNode &&
-                textNode.type === "img" &&
-                textNode.attributes?.isFreePositioned
-              )
-            })
-            .map((node) => (
-              <FreeImageBlock
-                key={node.id}
-                node={node as TextNode}
-                isActive={activeNodeId === node.id}
-                onClick={() => handleNodeClick(node.id)}
-                onDelete={
-                  readOnly ? undefined : () => handleDeleteNode(node.id)
-                }
-                readOnly={readOnly}
-              />
-            ))}
-        </div>
-      </div>
-
-      {/* Selection Toolbar - Floats above selected text (Notion-style) */}
-      {/* LinkPopover and CustomClassPopover are now integrated directly into SelectionToolbar */}
-      {!readOnly && (
-        <SelectionToolbar
-          selection={currentSelection}
-          selectedColor={selectedColor}
-          editorRef={editorContentRef}
-          onFormat={handleFormat}
-          onTypeChange={(type) => handleTypeChange(type as TextNode["type"])}
-          onColorSelect={handleApplyColor}
-          onFontSizeSelect={handleApplyFontSize}
-        />
-      )}
-
-      {/* Group Images Button - Floats when multiple images selected */}
-      {!readOnly && (
-        <GroupImagesButton
-          selectedCount={selectedImageIds.size}
-          inSameFlex={flexInfo.inSameFlex}
-          onGroup={handleGroupSelectedImages}
-          onReverse={
-            flexInfo.inSameFlex ? handleReverseImagesInFlex : undefined
-          }
-          onExtract={flexInfo.inSameFlex ? handleExtractFromFlex : undefined}
-          onClear={handleClearImageSelection}
-        />
-      )}
-
-      {/* Floating Export Button */}
-      {!readOnly && (
-        <ExportFloatingButton
-          container={container}
-          onCopyHtml={handleCopyHtml}
-          onCopyJson={handleCopyJson}
-          copiedHtml={copiedHtml}
-          copiedJson={copiedJson}
-          enhanceSpaces={enhanceSpaces}
-          onEnhanceSpacesChange={setEnhanceSpaces}
-        />
-      )}
-
-      {/* Template Switcher Button - Bottom Left */}
-      {!readOnly && (
-        <TemplateSwitcherButton
-          currentState={
-            {
-              activeNodeId,
-              historyIndex,
-              history: [container],
-              currentSelection,
-              coverImage,
-            } as any
-          }
-          onTemplateChange={(newState) => {
-            dispatch({ type: "SET_STATE", payload: { state: newState } })
-          }}
-        />
-      )}
-    </div>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/elements.ts b/apps/web/src/components/ui/rich-editor/elements.ts
deleted file mode 100644
index 81f218af..00000000
--- a/apps/web/src/components/ui/rich-editor/elements.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-export type ElementType =
-  | "p"
-  | "h1"
-  | "h2"
-  | "h3"
-  | "h4"
-  | "h5"
-  | "h6"
-  | "code"
-  | "blockquote"
-  | "li"
-  | "ol"
-
-export interface ElementOption {
-  value: ElementType
-  label: string
-  description?: string
-  icon?: string // Icon name from lucide-react
-  iconSize?: string // Tailwind class for icon size
-  shortcut?: string
-}
-
-export const ELEMENT_OPTIONS: ElementOption[] = [
-  {
-    value: "p",
-    label: "Text",
-    description: "Plain text paragraph",
-    icon: "Type",
-    iconSize: "h-4 w-4",
-  },
-  {
-    value: "h1",
-    label: "Heading 1",
-    description: "Big section heading",
-    icon: "Heading1",
-    iconSize: "h-4 w-4",
-    shortcut: "⌘⌥1",
-  },
-  {
-    value: "h2",
-    label: "Heading 2",
-    description: "Medium section heading",
-    icon: "Heading2",
-    iconSize: "h-4 w-4",
-    shortcut: "⌘⌥2",
-  },
-  {
-    value: "h3",
-    label: "Heading 3",
-    description: "Small section heading",
-    icon: "Heading3",
-    iconSize: "h-4 w-4",
-    shortcut: "⌘⌥3",
-  },
-  {
-    value: "h4",
-    label: "Heading 4",
-    description: "Smaller heading",
-    icon: "Type",
-    iconSize: "h-3.5 w-3.5",
-  },
-  {
-    value: "h5",
-    label: "Heading 5",
-    description: "Tiny heading",
-    icon: "Type",
-    iconSize: "h-3 w-3",
-  },
-  {
-    value: "h6",
-    label: "Heading 6",
-    description: "Smallest heading",
-    icon: "Type",
-    iconSize: "h-2.5 w-2.5",
-  },
-  {
-    value: "code",
-    label: "Code",
-    description: "Code block with syntax highlighting",
-    icon: "Code",
-    iconSize: "h-4 w-4",
-  },
-  {
-    value: "blockquote",
-    label: "Quote",
-    description: "Quote or callout",
-    icon: "Quote",
-    iconSize: "h-4 w-4",
-  },
-  {
-    value: "li",
-    label: "Bulleted List",
-    description: "Unordered list item",
-    icon: "List",
-    iconSize: "h-4 w-4",
-  },
-  {
-    value: "ol",
-    label: "Numbered List",
-    description: "Ordered list item",
-    icon: "ListOrdered",
-    iconSize: "h-4 w-4",
-  },
-]
diff --git a/apps/web/src/components/ui/rich-editor/empty-content.ts b/apps/web/src/components/ui/rich-editor/empty-content.ts
deleted file mode 100644
index 29943517..00000000
--- a/apps/web/src/components/ui/rich-editor/empty-content.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { EditorNode, TextNode } from "./types"
-
-/**
- * Creates minimal empty content for normal rich editor mode.
- *
- * Returns 3 empty paragraph blocks ready for editing.
- * No headers, no cover images - just clean, empty blocks.
- *
- * @param timestamp - Optional timestamp for unique IDs (defaults to current time)
- * @returns Array of empty paragraph nodes
- *
- * @example
- * ```typescript
- * import { createEmptyContent } from '@/lib/empty-content';
- *
- * const emptyNodes = createEmptyContent();
- * const newContainer: ContainerNode = {
- *   id: 'root',
- *   type: 'container',
- *   children: emptyNodes,
- *   attributes: {}
- * };
- * ```
- */
-export function createEmptyContent(
-  timestamp: number = Date.now()
-): EditorNode[] {
-  return [
-    {
-      id: `p-${timestamp}-1`,
-      type: "p",
-      content: "",
-      attributes: {},
-    } as TextNode,
-    {
-      id: `p-${timestamp}-2`,
-      type: "p",
-      content: "",
-      attributes: {},
-    } as TextNode,
-    {
-      id: `p-${timestamp}-3`,
-      type: "p",
-      content: "",
-      attributes: {},
-    } as TextNode,
-  ]
-}
diff --git a/apps/web/src/components/ui/rich-editor/flex-container.tsx b/apps/web/src/components/ui/rich-editor/flex-container.tsx
deleted file mode 100644
index a793ec0c..00000000
--- a/apps/web/src/components/ui/rich-editor/flex-container.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-
-import { ContainerNode } from "./types"
-
-interface FlexContainerProps {
-  node: ContainerNode
-  children: React.ReactNode
-  onDragOver?: (e: React.DragEvent, position: "left" | "right" | null) => void
-  onDragLeave?: (e: React.DragEvent) => void
-  onDrop?: (e: React.DragEvent, position: "left" | "right" | null) => void
-  dragOverPosition?: "left" | "right" | null
-  className?: string
-}
-
-export function FlexContainer({
-  node,
-  children,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  dragOverPosition,
-  className = "",
-}: FlexContainerProps) {
-  const [localDragPosition, setLocalDragPosition] = useState<
-    "left" | "right" | null
-  >(null)
-
-  const gap = node.attributes?.gap as string | undefined
-  const flexWrap = node.attributes?.flexWrap as string | undefined
-
-  const handleDragOver = (e: React.DragEvent) => {
-    // Only prevent default and handle if we're in an edge zone
-    // This allows images to be dragged out of the container
-
-    // Get the container's bounding rectangle
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-
-    // Define edge threshold (30% from each edge)
-    const edgeThreshold = rect.width * 0.3
-
-    // Determine if we're near the left or right edge
-    let position: "left" | "right" | null = null
-
-    if (e.clientX < rect.left + edgeThreshold) {
-      position = "left"
-    } else if (e.clientX > rect.right - edgeThreshold) {
-      position = "right"
-    }
-
-    // Only handle if we're in an edge zone
-    if (position) {
-      e.preventDefault()
-      e.stopPropagation()
-      setLocalDragPosition(position)
-
-      if (onDragOver) {
-        onDragOver(e, position)
-      }
-    } else {
-      // Not in an edge zone - clear any indicators but don't prevent default
-      // This allows the drag to bubble up to parent handlers
-      setLocalDragPosition(null)
-    }
-  }
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    // Only clear if we're actually leaving the element (not entering a child)
-    const relatedTarget = e.relatedTarget as HTMLElement
-    const currentTarget = e.currentTarget as HTMLElement
-
-    if (!currentTarget.contains(relatedTarget)) {
-      setLocalDragPosition(null)
-
-      if (onDragLeave) {
-        onDragLeave(e)
-      }
-    }
-  }
-
-  const handleDrop = (e: React.DragEvent) => {
-    const position = localDragPosition
-
-    // Only handle the drop if we have a position (in an edge zone)
-    if (position) {
-      e.preventDefault()
-      e.stopPropagation()
-
-      if (onDrop) {
-        onDrop(e, position)
-      }
-    }
-
-    // Always clear the position indicator
-    setLocalDragPosition(null)
-  }
-
-  const displayPosition = dragOverPosition ?? localDragPosition
-
-  return (
-    <div
-      data-node-id={node.id}
-      data-node-type="container"
-      data-layout-type="flex"
-      className={`relative flex flex-row gap-${gap || "4"} items-start ${flexWrap === "wrap" ? "flex-wrap items-center" : ""} ${className} `}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-    >
-      {/* Left edge indicator */}
-      {displayPosition === "left" && (
-        <div className="pointer-events-none absolute inset-y-0 -left-1 z-10 w-1 rounded-full bg-blue-500/50" />
-      )}
-
-      {/* Right edge indicator */}
-      {displayPosition === "right" && (
-        <div className="pointer-events-none absolute inset-y-0 -right-1 z-10 w-1 rounded-full bg-blue-500/50" />
-      )}
-
-      {children}
-    </div>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/font-size-picker.tsx b/apps/web/src/components/ui/rich-editor/font-size-picker.tsx
deleted file mode 100644
index d1684df5..00000000
--- a/apps/web/src/components/ui/rich-editor/font-size-picker.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-"use client"
-
-import React, { useEffect, useState } from "react"
-import { Minus, Plus } from "lucide-react"
-
-import { Button } from "../button"
-import { Input } from "../input"
-
-interface FontSizePickerProps {
-  disabled?: boolean
-  onFontSizeSelect: (fontSize: string) => void
-  currentFontSize?: string
-}
-
-// Extract numeric value from inline style fontSize value
-const extractFontSize = (fontSizeValue?: string): number => {
-  if (!fontSizeValue) return 16 // default
-
-  // Check if it's a pixel value
-  if (fontSizeValue.includes("px")) {
-    return parseInt(fontSizeValue.replace("px", "")) || 16
-  }
-
-  // If it's just a number
-  const parsed = parseInt(fontSizeValue)
-  if (!isNaN(parsed)) {
-    return parsed
-  }
-
-  return 16
-}
-
-export function FontSizePicker({
-  disabled = false,
-  onFontSizeSelect,
-  currentFontSize,
-}: FontSizePickerProps) {
-  const [fontSize, setFontSize] = useState<number>(
-    extractFontSize(currentFontSize)
-  )
-
-  // Update fontSize when currentFontSize changes (selection changes)
-  useEffect(() => {
-    const extractedSize = extractFontSize(currentFontSize)
-    setFontSize(extractedSize)
-  }, [currentFontSize])
-
-  const handleIncrement = () => {
-    const newSize = Math.min(fontSize + 2, 128)
-    setFontSize(newSize)
-    onFontSizeSelect(`${newSize}px`)
-  }
-
-  const handleDecrement = () => {
-    const newSize = Math.max(fontSize - 2, 8)
-    setFontSize(newSize)
-    onFontSizeSelect(`${newSize}px`)
-  }
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value) || 16
-    const clampedValue = Math.max(8, Math.min(value, 128))
-    setFontSize(clampedValue)
-  }
-
-  const handleInputBlur = () => {
-    onFontSizeSelect(`${fontSize}px`)
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
-    if (e.key === "Enter") {
-      onFontSizeSelect(`${fontSize}px`)
-      e.currentTarget.blur()
-    }
-  }
-
-  return (
-    <div className="bg-muted/50 flex items-center gap-0.5 rounded-md">
-      <Button
-        variant="ghost"
-        size="icon"
-        onClick={handleDecrement}
-        disabled={disabled || fontSize <= 8}
-        className="hover:bg-muted h-7 w-6 rounded-r-none md:h-8 md:w-7"
-        title="Decrease font size"
-      >
-        <Minus className="size-3 md:size-3.5" />
-      </Button>
-
-      <Input
-        type="number"
-        value={fontSize}
-        onChange={handleInputChange}
-        onBlur={handleInputBlur}
-        onKeyDown={handleKeyDown}
-        disabled={disabled}
-        min={8}
-        max={128}
-        className="h-7 w-10 [appearance:textfield] rounded-none border-0 bg-transparent px-0.5 text-center text-xs focus-visible:ring-0 focus-visible:ring-offset-0 md:h-8 md:w-14 md:px-1 md:text-sm [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-        title="Font size in pixels"
-      />
-
-      <Button
-        variant="ghost"
-        size="icon"
-        onClick={handleIncrement}
-        disabled={disabled || fontSize >= 128}
-        className="hover:bg-muted h-7 w-6 rounded-l-none md:h-8 md:w-7"
-        title="Increase font size"
-      >
-        <Plus className="size-3 md:size-3.5" />
-      </Button>
-    </div>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/group-images-button.tsx b/apps/web/src/components/ui/rich-editor/group-images-button.tsx
deleted file mode 100644
index b68a56f2..00000000
--- a/apps/web/src/components/ui/rich-editor/group-images-button.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-"use client"
-
-import React from "react"
-import { AnimatePresence, motion } from "framer-motion"
-import { ArrowLeftRight, Images, Package, X } from "lucide-react"
-
-import { Button } from "../button"
-
-interface GroupImagesButtonProps {
-  selectedCount: number
-  inSameFlex: boolean
-  onGroup: () => void
-  onReverse?: () => void
-  onExtract?: () => void
-  onClear: () => void
-}
-
-export function GroupImagesButton({
-  selectedCount,
-  inSameFlex,
-  onGroup,
-  onReverse,
-  onExtract,
-  onClear,
-}: GroupImagesButtonProps) {
-  if (selectedCount < 2) return null
-
-  return (
-    <AnimatePresence>
-      <motion.div
-        initial={{ opacity: 0, y: 20, scale: 0.9 }}
-        animate={{ opacity: 1, y: 0, scale: 1 }}
-        exit={{ opacity: 0, y: 20, scale: 0.9 }}
-        transition={{ duration: 0.2 }}
-        className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2"
-      >
-        <div className="bg-background border-border flex items-center gap-2 rounded-lg border p-2 shadow-2xl">
-          {/* Selection count */}
-          <div className="text-muted-foreground px-3 py-2 text-sm font-medium">
-            {selectedCount} {selectedCount === 1 ? "image" : "images"} selected
-          </div>
-
-          {/* Show different actions based on whether in flex */}
-          {inSameFlex ? (
-            <>
-              {/* Reverse button */}
-              {onReverse && (
-                <Button
-                  onClick={onReverse}
-                  size="sm"
-                  variant="secondary"
-                  className="gap-2"
-                >
-                  <ArrowLeftRight className="h-4 w-4" />
-                  Reverse Order
-                </Button>
-              )}
-
-              {/* Extract button */}
-              {onExtract && (
-                <Button
-                  onClick={onExtract}
-                  size="sm"
-                  variant="secondary"
-                  className="gap-2"
-                >
-                  <Package className="h-4 w-4" />
-                  Extract from Flex
-                </Button>
-              )}
-            </>
-          ) : (
-            /* Group button */
-            <Button onClick={onGroup} size="sm" className="gap-2">
-              <Images className="h-4 w-4" />
-              Group into Flex
-            </Button>
-          )}
-
-          {/* Clear button */}
-          <Button
-            onClick={onClear}
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8"
-          >
-            <X className="h-4 w-4" />
-          </Button>
-        </div>
-      </motion.div>
-    </AnimatePresence>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/handlers/block/block-drag-handlers.ts b/apps/web/src/components/ui/rich-editor/handlers/block/block-drag-handlers.ts
deleted file mode 100644
index 9618a027..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/block/block-drag-handlers.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react"
-
-import { TextNode } from "../../types"
-
-/**
- * Create handle block drag start
- */
-export function createHandleBlockDragStart(
-  textNode: TextNode,
-  onBlockDragStart?: (nodeId: string) => void
-) {
-  return (e: React.DragEvent) => {
-    e.stopPropagation()
-    e.dataTransfer.effectAllowed = "move"
-    e.dataTransfer.setData("text/plain", textNode.id)
-    e.dataTransfer.setData(
-      "application/json",
-      JSON.stringify({
-        nodeId: textNode.id,
-        type: textNode.type,
-      })
-    )
-    if (onBlockDragStart) {
-      onBlockDragStart(textNode.id)
-    }
-  }
-}
-
-/**
- * Create handle block drag end
- */
-export function createHandleBlockDragEnd(onDragEnd?: () => void) {
-  return (e: React.DragEvent) => {
-    e.stopPropagation()
-    // Clear dragging state
-    if (onDragEnd) {
-      onDragEnd()
-    }
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/handlers/block/block-event-handlers.ts b/apps/web/src/components/ui/rich-editor/handlers/block/block-event-handlers.ts
deleted file mode 100644
index ae399cb7..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/block/block-event-handlers.ts
+++ /dev/null
@@ -1,347 +0,0 @@
-import React from "react"
-
-import { EditorAction } from "../../lib/reducer/actions"
-import { ContainerNode, TextNode } from "../../types"
-import { findParentById } from "../../utils/tree-operations"
-
-export interface BlockEventHandlerParams {
-  textNode: TextNode
-  readOnly: boolean
-  onInput: (element: HTMLElement) => void
-  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void
-  onClick: () => void
-  onCreateNested?: (nodeId: string) => void
-  onChangeBlockType?: (nodeId: string, newType: string) => void
-  onInsertImage?: (nodeId: string) => void
-  onCreateList?: (nodeId: string, listType: string) => void
-  currentContainer: ContainerNode | (() => ContainerNode) // Can be value or getter for optimization
-  dispatch: React.Dispatch<EditorAction>
-  localRef: React.RefObject<HTMLElement | null>
-  isComposingRef: React.MutableRefObject<boolean>
-  shouldPreserveSelectionRef: React.MutableRefObject<boolean>
-  showCommandMenu: boolean
-  setShowCommandMenu: (show: boolean) => void
-  setCommandMenuAnchor: (el: HTMLElement | null) => void
-}
-
-/**
- * Create handle composition start
- */
-export function createHandleCompositionStart() {
-  return (isComposingRef: React.MutableRefObject<boolean>) => {
-    return () => {
-      isComposingRef.current = true
-    }
-  }
-}
-
-/**
- * Create handle composition end
- */
-export function createHandleCompositionEnd() {
-  return (isComposingRef: React.MutableRefObject<boolean>) => {
-    return () => {
-      isComposingRef.current = false
-    }
-  }
-}
-
-/**
- * Create handle input
- */
-export function createHandleInput(
-  params: Pick<
-    BlockEventHandlerParams,
-    | "textNode"
-    | "readOnly"
-    | "onInput"
-    | "onChangeBlockType"
-    | "showCommandMenu"
-    | "setShowCommandMenu"
-    | "setCommandMenuAnchor"
-    | "shouldPreserveSelectionRef"
-  >
-) {
-  return (e: React.FormEvent<HTMLDivElement>) => {
-    const {
-      textNode,
-      readOnly,
-      onInput,
-      onChangeBlockType,
-      showCommandMenu,
-      setShowCommandMenu,
-      setCommandMenuAnchor,
-      shouldPreserveSelectionRef,
-    } = params
-    const element = e.currentTarget
-    const text = element.textContent || ""
-
-    // DEBUG: Log what user is typing
-    if (process.env.NODE_ENV === "development") {
-      console.log(`📝 [INPUT] Block ${textNode.id}:`, {
-        text,
-        innerHTML: element.innerHTML,
-        currentNodeContent: textNode.content,
-      })
-    }
-
-    // Check if this is a header block (h1) - headers don't show command menu
-    const isHeaderBlock = textNode.type === "h1"
-
-    // Check if the block is empty and user typed "/" (but not for header blocks)
-    if (text === "/" && !readOnly && onChangeBlockType && !isHeaderBlock) {
-      setShowCommandMenu(true)
-      setCommandMenuAnchor(element)
-    } else if (showCommandMenu && text !== "/") {
-      // Close menu if user continues typing
-      setShowCommandMenu(false)
-    }
-
-    // Set flag to prevent content updates until next render
-    shouldPreserveSelectionRef.current = true
-
-    // Call the parent onInput handler
-    onInput(element)
-
-    // Reset the flag quickly to allow Block component to sync with state
-    // Reduced from 200ms since we're no longer debouncing state updates
-    setTimeout(() => {
-      shouldPreserveSelectionRef.current = false
-    }, 50)
-  }
-}
-
-/**
- * Create handle key down
- */
-export function createHandleKeyDown(params: BlockEventHandlerParams) {
-  return (e: React.KeyboardEvent<HTMLDivElement>) => {
-    const {
-      textNode,
-      onKeyDown,
-      onCreateNested,
-      showCommandMenu,
-      setShowCommandMenu,
-      setCommandMenuAnchor,
-      currentContainer,
-      dispatch,
-    } = params
-
-    // DEBUG: Log key presses
-    if (process.env.NODE_ENV === "development" && e.key === "Enter") {
-      const element = e.currentTarget
-      console.log(`⏎ [ENTER] Block ${textNode.id}:`, {
-        key: e.key,
-        shiftKey: e.shiftKey,
-        textContent: element.textContent,
-        innerHTML: element.innerHTML,
-        currentNodeContent: textNode.content,
-        nodeType: textNode.type,
-      })
-    }
-
-    // Close command menu on Escape
-    if (e.key === "Escape" && showCommandMenu) {
-      e.preventDefault()
-      setShowCommandMenu(false)
-      setCommandMenuAnchor(null)
-      return
-    }
-
-    // If command menu is open, let it handle the keyboard events
-    if (showCommandMenu && ["ArrowDown", "ArrowUp", "Enter"].includes(e.key)) {
-      // Don't prevent default - let CommandMenu handle it
-      return
-    }
-
-    // For list items (ol/li), handle Enter and Shift+Enter specially
-    // For non-list items, Shift+Enter creates nested blocks
-    const isListItem = textNode.type === "ol" || textNode.type === "li"
-
-    // Handle Shift+Enter for list items - add line break within item
-    if (e.key === "Enter" && e.shiftKey && isListItem) {
-      e.preventDefault()
-      e.stopPropagation()
-
-      // Pass to SimpleEditor to handle line break insertion
-      onKeyDown(e)
-      return
-    }
-
-    // Handle Shift+Enter for non-list items - create nested block
-    if (e.key === "Enter" && e.shiftKey && !isListItem && onCreateNested) {
-      e.preventDefault()
-      onCreateNested(textNode.id)
-      return
-    }
-
-    // Handle regular Enter for list items - create new list item at same level
-    if (e.key === "Enter" && !e.shiftKey && isListItem) {
-      e.preventDefault()
-      e.stopPropagation()
-
-      // Get current container (call it if it's a getter function)
-      const container =
-        typeof currentContainer === "function"
-          ? currentContainer()
-          : currentContainer
-
-      // Find the parent container
-      const parent = findParentById(container, textNode.id)
-
-      if (parent) {
-        // Create a new list item with the same type
-        const newListItem: TextNode = {
-          id: `li-${Date.now()}`,
-          type: textNode.type, // Keep the same type (ul/ol/li)
-          content: "",
-        }
-
-        // Insert after the current list item
-        dispatch({
-          type: "INSERT_NODE",
-          payload: {
-            node: newListItem,
-            targetId: textNode.id,
-            position: "after",
-          },
-        })
-
-        // Focus the new list item after a short delay
-        setTimeout(() => {
-          const newElement = document.querySelector(
-            `[data-node-id="${newListItem.id}"]`
-          ) as HTMLElement
-          if (newElement) {
-            newElement.focus()
-          }
-        }, 0)
-      } else {
-        console.warn(
-          "🔷 [Block.tsx] Could not find parent container for list item"
-        )
-      }
-
-      return
-    }
-
-    // Pass to parent handler for other keys
-    onKeyDown(e)
-  }
-}
-
-/**
- * Create handle click
- */
-export function createHandleClick(
-  params: Pick<BlockEventHandlerParams, "readOnly" | "onClick">
-) {
-  return (e: React.MouseEvent<HTMLDivElement>) => {
-    const { readOnly, onClick } = params
-    // Check if the click target is a link
-    const target = e.target as HTMLElement
-    if (target.tagName === "A" && target.hasAttribute("href")) {
-      // In read-only mode, let links work naturally
-      if (readOnly) {
-        return // Let the browser handle the link
-      } else {
-        // In edit mode, prevent link navigation
-        e.preventDefault()
-      }
-    }
-
-    // Call the parent onClick handler
-    onClick()
-  }
-}
-
-/**
- * Create handle command select
- */
-export function createHandleCommandSelect(params: {
-  textNode: TextNode
-  onChangeBlockType?: (nodeId: string, newType: string) => void
-  onInsertImage?: (nodeId: string) => void
-  onCreateList?: (nodeId: string, listType: string) => void
-  onCreateTable?: (nodeId: string) => void
-  localRef: React.RefObject<HTMLElement | null>
-  setShowCommandMenu: (show: boolean) => void
-  setCommandMenuAnchor: (el: HTMLElement | null) => void
-}) {
-  return (commandValue: string) => {
-    const {
-      textNode,
-      onChangeBlockType,
-      onInsertImage,
-      onCreateList,
-      onCreateTable,
-      localRef,
-      setShowCommandMenu,
-      setCommandMenuAnchor,
-    } = params
-
-    if (!localRef.current) return
-
-    // Clear the "/" character
-    localRef.current.textContent = ""
-
-    // Close the menu immediately
-    setShowCommandMenu(false)
-    setCommandMenuAnchor(null)
-
-    // Handle image insertion specially
-    if (commandValue === "img" && onInsertImage) {
-      onInsertImage(textNode.id)
-      return
-    }
-
-    // Handle list creation (both ordered and unordered) - create a container with multiple list items
-    if ((commandValue === "ol" || commandValue === "ul") && onCreateList) {
-      // Small delay to ensure menu is closed before creating the list
-      setTimeout(() => {
-        onCreateList(textNode.id, commandValue)
-      }, 50)
-      return
-    }
-
-    // Handle table creation
-    if (commandValue === "table" && onCreateTable) {
-      // Small delay to ensure menu is closed before opening table dialog
-      setTimeout(() => {
-        onCreateTable(textNode.id)
-      }, 50)
-      return
-    }
-
-    // For other block types (including 'li'), just change the type
-    if (onChangeBlockType) {
-      onChangeBlockType(textNode.id, commandValue)
-
-      // Focus back on the block
-      setTimeout(() => {
-        localRef.current?.focus()
-      }, 0)
-    }
-  }
-}
-
-/**
- * Create handle background color change
- */
-export function createHandleBackgroundColorChange(
-  textNode: TextNode,
-  dispatch: React.Dispatch<EditorAction>
-) {
-  return (color: string) => {
-    dispatch({
-      type: "UPDATE_ATTRIBUTES",
-      payload: {
-        id: textNode.id,
-        attributes: {
-          backgroundColor: color,
-        },
-        merge: true,
-      },
-    })
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/handlers/block/block-renderer.ts b/apps/web/src/components/ui/rich-editor/handlers/block/block-renderer.ts
deleted file mode 100644
index b42032d6..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/block/block-renderer.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import {
-  ContainerNode,
-  EditorNode,
-  isContainerNode,
-  TextNode,
-} from "../../types"
-
-/**
- * Determine which HTML element to render based on node type
- */
-export function getElementType(
-  type: string
-):
-  | "li"
-  | "ol"
-  | "h1"
-  | "h2"
-  | "h3"
-  | "h4"
-  | "h5"
-  | "h6"
-  | "p"
-  | "blockquote"
-  | "pre"
-  | "div" {
-  switch (type) {
-    case "li":
-      return "li"
-    case "ol":
-      return "ol"
-    case "h1":
-      return "h1"
-    case "h2":
-      return "h2"
-    case "h3":
-      return "h3"
-    case "h4":
-      return "h4"
-    case "h5":
-      return "h5"
-    case "h6":
-      return "h6"
-    case "p":
-      return "p"
-    case "blockquote":
-      return "blockquote"
-    case "code":
-      return "pre"
-    default:
-      return "div"
-  }
-}
-
-/**
- * Check if node should render as a special component
- */
-export function getNodeRenderType(
-  node: EditorNode
-):
-  | "container"
-  | "table"
-  | "flex"
-  | "nested-container"
-  | "br"
-  | "img"
-  | "video"
-  | "text" {
-  if (node.type === "br") return "br"
-  if (node.type === "img") return "img"
-  if (node.type === "video") return "video"
-
-  if (isContainerNode(node)) {
-    const containerNode = node as ContainerNode
-    const firstChild = containerNode.children[0]
-    const layoutType = containerNode.attributes?.layoutType as
-      | string
-      | undefined
-
-    if (firstChild?.type === "table") return "table"
-    if (layoutType === "flex") return "flex"
-
-    return "nested-container"
-  }
-
-  return "text"
-}
-
-/**
- * Get container CSS classes
- */
-export function getContainerClasses(
-  isFlexContainer: boolean,
-  isActive: boolean
-): string {
-  if (isFlexContainer) return ""
-
-  return `border-l-2 border-border/50 pl-2 ml-6 transition-all ${
-    isActive ? "border-primary" : "hover:border-border"
-  }`
-}
diff --git a/apps/web/src/components/ui/rich-editor/handlers/block/block-styles.ts b/apps/web/src/components/ui/rich-editor/handlers/block/block-styles.ts
deleted file mode 100644
index fdfa6958..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/block/block-styles.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { TextNode } from "../../types"
-import { getTypeClassName } from "./block-utils"
-
-interface BlockStyleParams {
-  textNode: TextNode
-  className: string
-  readOnly: boolean
-  isActive: boolean
-  isListItem: boolean
-  isFirstBlock: boolean
-  notionBased: boolean
-}
-
-/**
- * Build the complete className string for a block
- */
-export function buildBlockClassName({
-  textNode,
-  className,
-  readOnly,
-  isActive,
-  isListItem,
-  isFirstBlock,
-  notionBased,
-}: BlockStyleParams): string {
-  const parts = [
-    // List item positioning
-    isListItem ? "relative" : "",
-
-    // Type-specific styles (h1, h2, p, etc.)
-    getTypeClassName(textNode.type),
-
-    // Custom className from node attributes
-    className,
-
-    // Editor mode styles
-    readOnly ? "" : "outline-none",
-
-    // Spacing based on type
-    getBlockSpacing(textNode.type, isListItem),
-
-    // Notion-style first block spacing
-    notionBased && isFirstBlock && textNode.type === "h1" ? "mt-8 pb-12" : "",
-
-    // Transitions
-    "transition-all",
-
-    // Active/hover states
-    !readOnly && isActive ? "border-b bg-accent/5" : "",
-    !readOnly ? "hover:bg-accent/5" : "",
-    readOnly ? "cursor-default" : "",
-  ]
-
-  return parts.filter(Boolean).join(" ")
-}
-
-/**
- * Get spacing classes based on node type
- */
-function getBlockSpacing(nodeType: string, isListItem: boolean): string {
-  if (isListItem) {
-    return "px-3 py-0.5 mb-0.5"
-  }
-
-  if (nodeType.startsWith("h")) {
-    return "px-3 py-1"
-  }
-
-  return "px-3 py-1 mb-1"
-}
-
-/**
- * Build inline styles for a block
- */
-export function buildBlockStyles(
-  depth: number,
-  isListItem: boolean,
-  textColor: string,
-  backgroundColor?: string
-): React.CSSProperties {
-  return {
-    marginLeft: isListItem ? `${depth * 0.5 + 1.5}rem` : `${depth * 0.5}rem`,
-    ...(textColor ? { color: textColor } : {}),
-    ...(backgroundColor ? { backgroundColor } : {}),
-  }
-}
-
-/**
- * Parse custom className to extract color and class
- */
-export function parseCustomClassName(
-  customClassName:
-    | string
-    | number
-    | boolean
-    | Record<string, string>
-    | undefined
-): {
-  textColor: string
-  className: string
-} {
-  const classNameStr =
-    typeof customClassName === "string" ? customClassName : ""
-  const isHexColor = classNameStr.startsWith("#")
-
-  return {
-    textColor: isHexColor ? classNameStr : "",
-    className: isHexColor ? "" : classNameStr,
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/handlers/block/block-utils.ts b/apps/web/src/components/ui/rich-editor/handlers/block/block-utils.ts
deleted file mode 100644
index c498bcf7..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/block/block-utils.ts
+++ /dev/null
@@ -1,305 +0,0 @@
-import { TextNode } from "../../types"
-
-/**
- * Helper function to escape HTML entities
- */
-export function escapeHTML(text: string): string {
-  const div = document.createElement("div")
-  div.textContent = text
-  return div.innerHTML
-}
-
-/**
- * Get CSS classes for each node type
- */
-export function getTypeClassName(type: string): string {
-  switch (type) {
-    case "h1":
-      return "text-4xl font-bold text-foreground leading-[1.2] mb-2"
-    case "h2":
-      return "text-3xl font-bold text-foreground leading-[1.2] mb-1.5"
-    case "h3":
-      return "text-2xl font-bold text-foreground leading-[1.2] mb-1"
-    case "h4":
-      return "text-xl font-semibold text-foreground leading-[1.3] mb-1"
-    case "h5":
-      return "text-lg font-semibold text-foreground leading-[1.4] mb-0.5"
-    case "h6":
-      return "text-base font-semibold text-foreground leading-[1.4] mb-0.5"
-    case "p":
-      return "text-base text-foreground leading-[1.6]"
-    case "ol":
-      return "text-base text-foreground leading-[1.6] list-decimal list-inside"
-    case "li":
-      return "text-base text-foreground leading-[1.6] list-disc list-inside"
-    case "blockquote":
-      return "text-base text-muted-foreground italic border-l-4 border-primary pl-6 py-1"
-    case "code":
-      return "font-mono text-sm bg-secondary text-secondary-foreground px-4 py-2 rounded-lg whitespace-pre-wrap break-words"
-    default:
-      return "text-base text-foreground leading-[1.6]"
-  }
-}
-
-/**
- * Build HTML content from children or lines
- */
-export function buildHTML(textNode: TextNode, readOnly: boolean): string {
-  // Check if node has inline children with formatting
-  const hasChildren =
-    Array.isArray(textNode.children) && textNode.children.length > 0
-  // Check if node has multiple lines
-  const hasLines = Array.isArray(textNode.lines) && textNode.lines.length > 0
-
-  // For code blocks, we need to escape HTML entities
-  const isCodeBlock = textNode.type === "code"
-
-  // If node has multiple lines (e.g., ordered list with multiple items)
-  if (hasLines) {
-    return textNode
-      .lines!.map((line, index) => {
-        let lineContent = ""
-
-        // If line has inline children with formatting
-        if (line.children && line.children.length > 0) {
-          lineContent = line.children
-            .map((child) => {
-              // Check if className is a hex color or Tailwind class
-              const isHexColor =
-                child.className && child.className.startsWith("#")
-              const colorStyle = isHexColor ? child.className : ""
-              const className = isHexColor ? "" : child.className
-
-              const classes = [
-                child.bold ? "font-bold" : "",
-                child.italic ? "italic" : "",
-                child.underline ? "underline" : "",
-                child.strikethrough ? "line-through" : "",
-                child.code
-                  ? "font-mono bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded"
-                  : "",
-                className || "", // Include custom className (only if not hex color)
-              ]
-                .filter(Boolean)
-                .join(" ")
-
-              const styleAttr = colorStyle
-                ? ` style="color: ${colorStyle};"`
-                : ""
-              const childContent = isCodeBlock
-                ? escapeHTML(child.content || "")
-                : child.content || ""
-
-              // If it's a link
-              if (child.href) {
-                const linkClasses = ["hover:underline cursor-pointer", classes]
-                  .filter(Boolean)
-                  .join(" ")
-                const italicSpacing = child.italic ? "inline" : ""
-                const combinedClasses = [linkClasses, italicSpacing]
-                  .filter(Boolean)
-                  .join(" ")
-                return `<a href="${child.href}" target="_blank" rel="noopener noreferrer" class="${combinedClasses}"${styleAttr}>${childContent}</a>`
-              }
-
-              if (child.elementType) {
-                const elementClasses = getTypeClassName(child.elementType)
-                const italicSpacing = child.italic ? "inline" : ""
-                const combinedClasses = [elementClasses, classes, italicSpacing]
-                  .filter(Boolean)
-                  .join(" ")
-                return `<span class="${combinedClasses}"${styleAttr}>${childContent}</span>`
-              }
-
-              if (classes || colorStyle) {
-                const italicSpacing = child.italic ? "inline" : ""
-                const combinedClasses = [classes, italicSpacing]
-                  .filter(Boolean)
-                  .join(" ")
-                const classAttr = combinedClasses
-                  ? ` class="${combinedClasses}"`
-                  : ""
-                return `<span${classAttr}${styleAttr}>${childContent}</span>`
-              }
-              return childContent
-            })
-            .join("")
-        } else {
-          lineContent = isCodeBlock
-            ? escapeHTML(line.content || "")
-            : line.content || ""
-        }
-
-        return lineContent
-      })
-      .join("<br>")
-  }
-
-  // If node has inline children with formatting (single line)
-  if (hasChildren) {
-    return textNode
-      .children!.map((child) => {
-        // Build inline styles from the styles object
-        let inlineStyles = ""
-        if (child.styles) {
-          inlineStyles = Object.entries(child.styles)
-            .map(([key, value]) => {
-              // Convert camelCase to kebab-case (fontSize -> font-size)
-              const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase()
-              return `${kebabKey}: ${value}`
-            })
-            .join("; ")
-        }
-
-        const classes = [
-          child.bold ? "font-bold" : "",
-          child.italic ? "italic" : "",
-          child.underline ? "underline" : "",
-          child.strikethrough ? "line-through" : "",
-          child.code
-            ? "font-mono bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded"
-            : "",
-          child.className || "",
-        ]
-          .filter(Boolean)
-          .join(" ")
-
-        const styleAttr = inlineStyles ? ` style="${inlineStyles}"` : ""
-        const childContent = isCodeBlock
-          ? escapeHTML(child.content || "")
-          : child.content || ""
-
-        // If it's a link
-        if (child.href) {
-          const linkClasses = ["underline cursor-pointer", classes]
-            .filter(Boolean)
-            .join(" ")
-          const combinedClasses = [linkClasses].filter(Boolean).join(" ")
-          return `<a href="${child.href}" target="_blank" rel="noopener noreferrer" class="${combinedClasses}"${styleAttr}>${childContent}</a>`
-        }
-
-        // If child has an elementType, wrap in appropriate element
-        if (child.elementType) {
-          const elementClasses = getTypeClassName(child.elementType)
-          // Add extra spacing for italic text to prevent overlapping
-          const combinedClasses = [elementClasses, classes]
-            .filter(Boolean)
-            .join(" ")
-          return `<span class="${combinedClasses}"${styleAttr}>${childContent}</span>`
-        }
-
-        if (classes || inlineStyles) {
-          // Add extra spacing for italic text to prevent overlapping
-          const combinedClasses = [classes].filter(Boolean).join(" ")
-          const classAttr = combinedClasses ? ` class="${combinedClasses}"` : ""
-          return `<span${classAttr}${styleAttr}>${childContent}</span>`
-        }
-        return childContent
-      })
-      .join("")
-  }
-
-  // Simple content (single line, no formatting)
-  const content = textNode.content || ""
-  return isCodeBlock ? escapeHTML(content) : content
-}
-
-/**
- * Save current selection position
- */
-export function saveSelection(localRef: React.RefObject<HTMLElement | null>): {
-  start: number
-  end: number
-  collapsed: boolean
-} | null {
-  if (!localRef.current) return null
-
-  const selection = window.getSelection()
-  if (!selection || selection.rangeCount === 0) return null
-
-  const range = selection.getRangeAt(0)
-  if (!localRef.current.contains(range.commonAncestorContainer)) return null
-
-  // Create a simplified representation of the selection
-  const preCaretRange = range.cloneRange()
-  preCaretRange.selectNodeContents(localRef.current)
-  preCaretRange.setEnd(range.startContainer, range.startOffset)
-
-  return {
-    start: preCaretRange.toString().length,
-    end: preCaretRange.toString().length + range.toString().length,
-    collapsed: range.collapsed,
-  }
-}
-
-/**
- * Restore selection to saved position
- */
-export function restoreSelection(
-  localRef: React.RefObject<HTMLElement | null>,
-  savedSelection: { start: number; end: number; collapsed: boolean } | null
-): void {
-  if (!savedSelection || !localRef.current) return
-
-  const selection = window.getSelection()
-  if (!selection) return
-
-  let charIndex = 0
-  let startNode: Node | undefined = undefined
-  let startOffset = 0
-  let endNode: Node | undefined = undefined
-  let endOffset = 0
-
-  const walk = (node: Node): void => {
-    if (startNode && endNode) return
-
-    if (node.nodeType === Node.TEXT_NODE) {
-      const textLength = node.textContent?.length || 0
-
-      // Find start position
-      if (!startNode && charIndex + textLength >= savedSelection.start) {
-        startNode = node
-        startOffset = savedSelection.start - charIndex
-      }
-
-      // Find end position
-      if (!endNode && charIndex + textLength >= savedSelection.end) {
-        endNode = node
-        endOffset = savedSelection.end - charIndex
-      }
-
-      charIndex += textLength
-    } else {
-      for (let i = 0; i < node.childNodes.length; i++) {
-        walk(node.childNodes[i])
-        if (startNode && endNode) break
-      }
-    }
-  }
-
-  walk(localRef.current)
-
-  try {
-    const range = document.createRange()
-
-    if (startNode && endNode) {
-      const start = startNode as Node
-      const end = endNode as Node
-      range.setStart(
-        start,
-        Math.min(startOffset, start.textContent?.length || 0)
-      )
-
-      if (savedSelection.collapsed) {
-        range.collapse(true)
-      } else {
-        range.setEnd(end, Math.min(endOffset, end.textContent?.length || 0))
-      }
-
-      selection.removeAllRanges()
-      selection.addRange(range)
-    }
-  } catch (e) {
-    console.warn("Failed to restore selection:", e)
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/handlers/block/index.ts b/apps/web/src/components/ui/rich-editor/handlers/block/index.ts
deleted file mode 100644
index f931cca4..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/block/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from "./block-utils"
-
-// Event handlers
-export * from "./block-event-handlers"
-
-// Drag handlers
-export * from "./block-drag-handlers"
diff --git a/apps/web/src/components/ui/rich-editor/handlers/drag-drop-handlers.ts b/apps/web/src/components/ui/rich-editor/handlers/drag-drop-handlers.ts
deleted file mode 100644
index 487987c9..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/drag-drop-handlers.ts
+++ /dev/null
@@ -1,807 +0,0 @@
-import { EditorActions } from "../lib/reducer/actions"
-import {
-  ContainerNode,
-  EditorNode,
-  isContainerNode,
-  isTextNode,
-  TextNode,
-} from "../types"
-import { findNodeAnywhere } from "../utils/editor-helpers"
-import { uploadImage } from "../utils/image-upload"
-
-export interface DragDropHandlerParams {
-  container: ContainerNode
-  dispatch: React.Dispatch<any>
-  toast: any
-  draggingNodeId: string | null
-  setDraggingNodeId: (id: string | null) => void
-  setDragOverNodeId: (id: string | null) => void
-  setDropPosition: (pos: "before" | "after" | "left" | "right" | null) => void
-  setIsUploading: (uploading: boolean) => void
-  onUploadImage?: (file: File) => Promise<string>
-}
-
-/**
- * Handle image drag start
- */
-export function createHandleImageDragStart(
-  setDraggingNodeId: (id: string) => void
-) {
-  return (nodeId: string) => {
-    setDraggingNodeId(nodeId)
-  }
-}
-
-/**
- * Handle block drag start
- */
-export function createHandleBlockDragStart(
-  setDraggingNodeId: (id: string) => void
-) {
-  return (nodeId: string) => {
-    setDraggingNodeId(nodeId)
-  }
-}
-
-/**
- * Handle drag enter
- */
-export function createHandleDragEnter() {
-  return (e: React.DragEvent, nodeId: string) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }
-}
-
-/**
- * Handle drag over
- */
-export function createHandleDragOver(
-  params: Omit<
-    DragDropHandlerParams,
-    "toast" | "setIsUploading" | "onUploadImage"
-  >
-) {
-  return (e: React.DragEvent, nodeId: string) => {
-    const { container, draggingNodeId, setDragOverNodeId, setDropPosition } =
-      params
-    e.preventDefault()
-    e.stopPropagation()
-
-    // Check if we're dragging an existing block (image) or files from outside
-    const draggedNodeId = e.dataTransfer.getData("text/plain")
-
-    // Don't show drop indicator if we're hovering over the dragged element itself
-    if (draggingNodeId === nodeId) {
-      e.dataTransfer.dropEffect = "none"
-      setDragOverNodeId(null)
-      setDropPosition(null)
-      return
-    }
-
-    const targetResult = findNodeAnywhere(nodeId, container)
-    const draggingResult = draggingNodeId
-      ? findNodeAnywhere(draggingNodeId, container)
-      : null
-
-    if (!targetResult) return
-
-    const targetNode = targetResult.node
-    const draggingNode = draggingResult?.node
-    const isTargetImage =
-      isTextNode(targetNode) && (targetNode as TextNode).type === "img"
-    const isDraggingImage =
-      draggingNode &&
-      isTextNode(draggingNode) &&
-      (draggingNode as TextNode).type === "img"
-
-    // Check if target and dragging nodes are in the same flex container
-    const inSameFlexContainer =
-      targetResult.parentId &&
-      draggingResult?.parentId &&
-      targetResult.parentId === draggingResult.parentId
-
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-
-    // If both are images, check for horizontal (left/right) drop zones
-    if (isTargetImage && isDraggingImage) {
-      const edgeThreshold = rect.width * 0.3 // 30% from each edge
-
-      // If in same flex container, allow reordering via horizontal drop
-      if (inSameFlexContainer) {
-        // Get the parent container to check positions
-        const parent = draggingResult?.parentId
-          ? (container.children.find(
-              (c) => c.id === draggingResult.parentId
-            ) as ContainerNode)
-          : null
-
-        if (parent) {
-          const dragIndex = parent.children.findIndex(
-            (c) => c.id === draggingNodeId
-          )
-          const targetIndex = parent.children.findIndex((c) => c.id === nodeId)
-
-          // Check if we're on the left edge
-          if (e.clientX < rect.left + edgeThreshold) {
-            // Prevent dropping to the left of the item immediately to our right
-            if (targetIndex === dragIndex + 1) {
-              e.dataTransfer.dropEffect = "none"
-              setDragOverNodeId(null)
-              setDropPosition(null)
-              return
-            }
-            setDragOverNodeId(nodeId)
-            setDropPosition("left")
-            e.dataTransfer.dropEffect = "move"
-            return
-          }
-          // Check if we're on the right edge
-          else if (e.clientX > rect.right - edgeThreshold) {
-            // Prevent dropping to the right of the item immediately to our left
-            if (targetIndex === dragIndex - 1) {
-              e.dataTransfer.dropEffect = "none"
-              setDragOverNodeId(null)
-              setDropPosition(null)
-              return
-            }
-            setDragOverNodeId(nodeId)
-            setDropPosition("right")
-            e.dataTransfer.dropEffect = "move"
-            return
-          }
-        }
-        // If we're in the middle of an item in the same flex container, no drop
-        e.dataTransfer.dropEffect = "none"
-        setDragOverNodeId(null)
-        setDropPosition(null)
-        return
-      } else {
-        // Not in same container - allow horizontal merge
-        if (e.clientX < rect.left + edgeThreshold) {
-          setDragOverNodeId(nodeId)
-          setDropPosition("left")
-          e.dataTransfer.dropEffect = "move"
-          return
-        } else if (e.clientX > rect.right - edgeThreshold) {
-          setDragOverNodeId(nodeId)
-          setDropPosition("right")
-          e.dataTransfer.dropEffect = "move"
-          return
-        }
-      }
-    }
-
-    // Default vertical drop logic
-    const midPoint = rect.top + rect.height / 2
-    const position = e.clientY < midPoint ? "before" : "after"
-
-    // If dragging an existing block, check if this would result in no movement
-    if (draggingNodeId) {
-      // Find the indices of the dragged node and target node
-      const draggedIndex = container.children.findIndex(
-        (n) => n.id === draggingNodeId
-      )
-      const targetIndex = container.children.findIndex((n) => n.id === nodeId)
-
-      // Don't allow drops that would result in no movement:
-      // - Dropping "after" on the previous block (would stay in same position)
-      // - Dropping "before" on the next block (would stay in same position)
-      if (
-        (position === "after" && targetIndex === draggedIndex - 1) ||
-        (position === "before" && targetIndex === draggedIndex + 1)
-      ) {
-        e.dataTransfer.dropEffect = "none"
-        setDragOverNodeId(null)
-        setDropPosition(null)
-        return
-      }
-    }
-
-    // Allow drop - this is required for drop to work
-    // Use "move" for existing blocks, "copy" for external files
-    e.dataTransfer.dropEffect =
-      draggedNodeId || draggingNodeId ? "move" : "copy"
-
-    setDragOverNodeId(nodeId)
-    setDropPosition(position)
-  }
-}
-
-/**
- * Handle drag leave
- */
-export function createHandleDragLeave(
-  setDragOverNodeId: (id: string | null) => void,
-  setDropPosition: (pos: "before" | "after" | "left" | "right" | null) => void
-) {
-  return (e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    // Only clear if we're actually leaving the element (not entering a child)
-    const relatedTarget = e.relatedTarget as HTMLElement
-    const currentTarget = e.currentTarget as HTMLElement
-
-    if (!currentTarget.contains(relatedTarget)) {
-      setDragOverNodeId(null)
-      setDropPosition(null)
-    }
-  }
-}
-
-/**
- * Handle drop - This is a complex function that handles multiple drop scenarios
- * Note: This function should be further broken down in the future
- */
-export function createHandleDrop(
-  params: DragDropHandlerParams,
-  dropPosition: "before" | "after" | "left" | "right" | null
-) {
-  return async (e: React.DragEvent, nodeId: string) => {
-    const {
-      container,
-      dispatch,
-      toast,
-      draggingNodeId,
-      setDraggingNodeId,
-      setDragOverNodeId,
-      setDropPosition,
-      setIsUploading,
-      onUploadImage,
-    } = params
-
-    e.preventDefault()
-    e.stopPropagation()
-
-    // Check if we're moving an existing image block
-    const draggedNodeId = e.dataTransfer.getData("text/plain")
-
-    if (draggedNodeId && draggingNodeId) {
-      // Moving an existing image
-
-      // Don't drop on itself
-      if (draggingNodeId === nodeId) {
-        setDragOverNodeId(null)
-        setDropPosition(null)
-        setDraggingNodeId(null)
-        return
-      }
-
-      const draggingResult = findNodeAnywhere(draggingNodeId, container)
-      const targetResult = findNodeAnywhere(nodeId, container)
-
-      if (!draggingResult || !targetResult) {
-        setDragOverNodeId(null)
-        setDropPosition(null)
-        setDraggingNodeId(null)
-        return
-      }
-
-      const draggingNode = draggingResult.node
-      const targetNode = targetResult.node
-      const inSameFlexContainer =
-        draggingResult.parentId &&
-        targetResult.parentId &&
-        draggingResult.parentId === targetResult.parentId
-
-      // Check if this is a horizontal drop (left/right)
-      if (dropPosition === "left" || dropPosition === "right") {
-        // Case 1: Reordering images within the same flex container
-        if (
-          inSameFlexContainer &&
-          draggingResult.parent &&
-          targetResult.parent
-        ) {
-          const parent = draggingResult.parent
-          const newChildren = [...parent.children]
-
-          const dragIndex = newChildren.findIndex(
-            (c) => c.id === draggingNodeId
-          )
-          const targetIndex = newChildren.findIndex((c) => c.id === nodeId)
-
-          // Remove the dragged item from its current position
-          const [draggedItem] = newChildren.splice(dragIndex, 1)
-
-          // Calculate the new target index after removal
-          const adjustedTargetIndex =
-            dragIndex < targetIndex ? targetIndex - 1 : targetIndex
-
-          // Insert at the correct position based on drop side
-          if (dropPosition === "left") {
-            newChildren.splice(adjustedTargetIndex, 0, draggedItem)
-          } else {
-            // "right"
-            newChildren.splice(adjustedTargetIndex + 1, 0, draggedItem)
-          }
-
-          // Update the container with new order (single action for history)
-          dispatch(
-            EditorActions.updateNode(parent.id, {
-              children: newChildren as any,
-            })
-          )
-
-          toast({
-            title: "Image repositioned!",
-            description: "Image order updated in flex layout",
-          })
-
-          setDragOverNodeId(null)
-          setDropPosition(null)
-          setDraggingNodeId(null)
-          return
-        }
-
-        // Case 2: Merging two separate images into a flex container (or adding to existing one)
-        if (isTextNode(draggingNode) && isTextNode(targetNode)) {
-          // If one of them is already in a flex container, add the dragged one to it
-          if (
-            draggingResult.parentId &&
-            draggingResult.parent?.attributes?.layoutType === "flex"
-          ) {
-            // Dragging node is in a flex container, extract it and merge with target
-          } else if (
-            targetResult.parentId &&
-            targetResult.parent?.attributes?.layoutType === "flex"
-          ) {
-            // Target is in flex container, add dragged node to it
-            const parent = targetResult.parent
-            const targetIndex = parent.children.findIndex(
-              (c) => c.id === nodeId
-            )
-            const newChildren = [...parent.children]
-
-            // Insert dragged node at the appropriate position
-            if (dropPosition === "left") {
-              newChildren.splice(targetIndex, 0, draggingNode as TextNode)
-            } else {
-              newChildren.splice(targetIndex + 1, 0, draggingNode as TextNode)
-            }
-
-            // Batch: delete from old location and update container (single history entry)
-            dispatch(
-              EditorActions.batch([
-                EditorActions.deleteNode(draggingNodeId),
-                EditorActions.updateNode(parent.id, {
-                  children: newChildren as any,
-                }),
-              ])
-            )
-
-            toast({
-              title: "Image added!",
-              description: "Image added to the flex layout",
-            })
-
-            setDragOverNodeId(null)
-            setDropPosition(null)
-            setDraggingNodeId(null)
-            return
-          }
-
-          // Neither is in a flex container - create a new one
-
-          // Find reference nodes at root level
-          const targetRootIndex = container.children.findIndex(
-            (n) =>
-              n.id === nodeId ||
-              (isContainerNode(n) &&
-                (n as ContainerNode).children.some((c) => c.id === nodeId))
-          )
-          const draggingRootIndex = container.children.findIndex(
-            (n) =>
-              n.id === draggingNodeId ||
-              (isContainerNode(n) &&
-                (n as ContainerNode).children.some(
-                  (c) => c.id === draggingNodeId
-                ))
-          )
-
-          // Find a stable reference node for insertion
-          let referenceNodeId: string | null = null
-          let insertPosition: "before" | "after" = "after"
-
-          const firstIndex = Math.min(targetRootIndex, draggingRootIndex)
-          if (firstIndex > 0) {
-            referenceNodeId = container.children[firstIndex - 1].id
-            insertPosition = "after"
-          } else if (container.children.length > 2) {
-            for (let i = 0; i < container.children.length; i++) {
-              if (i !== targetRootIndex && i !== draggingRootIndex) {
-                referenceNodeId = container.children[i].id
-                insertPosition = i < firstIndex ? "after" : "before"
-                break
-              }
-            }
-          }
-
-          // Create a flex container with both images
-          const timestamp = Date.now()
-          const flexContainer: ContainerNode = {
-            id: `flex-container-${timestamp}`,
-            type: "container",
-            children:
-              dropPosition === "left"
-                ? [draggingNode as TextNode, targetNode as TextNode]
-                : [targetNode as TextNode, draggingNode as TextNode],
-            attributes: {
-              layoutType: "flex",
-              gap: "4",
-            },
-          }
-
-          // Batch: delete both images and insert flex container (single history entry)
-          const actions: any[] = [
-            EditorActions.deleteNode(draggingNodeId),
-            EditorActions.deleteNode(nodeId),
-          ]
-
-          if (referenceNodeId) {
-            actions.push(
-              EditorActions.insertNode(
-                flexContainer,
-                referenceNodeId,
-                insertPosition
-              )
-            )
-          } else {
-            actions.push(
-              EditorActions.replaceContainer({
-                ...container,
-                children: [flexContainer],
-              })
-            )
-          }
-
-          dispatch(EditorActions.batch(actions))
-
-          toast({
-            title: "Images merged!",
-            description: "Images placed side by side in a flex layout",
-          })
-
-          setDragOverNodeId(null)
-          setDropPosition(null)
-          setDraggingNodeId(null)
-          return
-        }
-      }
-
-      // Vertical drop - extract from container or move at root level
-
-      // If the dragging node is in a flex container, we need to extract it
-      if (draggingResult.parentId && draggingResult.parent) {
-        const parent = draggingResult.parent
-        const remainingChildren = parent.children.filter(
-          (c) => c.id !== draggingNodeId
-        )
-
-        const insertPos =
-          dropPosition === "before" || dropPosition === "after"
-            ? dropPosition
-            : "after"
-
-        // Batch all actions for single history entry
-        const actions: any[] = []
-
-        // If only one child remains, unwrap the container
-        if (remainingChildren.length === 1) {
-          // Find where to insert the remaining child
-          const parentIndex = container.children.findIndex(
-            (c) => c.id === parent.id
-          )
-
-          // Check if target is the flex container itself
-          const isTargetTheFlexContainer = nodeId === parent.id
-
-          if (isTargetTheFlexContainer) {
-            // We're trying to drop on the flex container itself
-            // We need to find a better reference point
-            let referenceNodeId: string | null = null
-            let referencePosition: "before" | "after" =
-              insertPos === "before" ? "before" : "after"
-
-            if (parentIndex > 0) {
-              // Use the previous sibling
-              referenceNodeId = container.children[parentIndex - 1].id
-              referencePosition = "after"
-            } else if (parentIndex < container.children.length - 1) {
-              // Use the next sibling
-              referenceNodeId = container.children[parentIndex + 1].id
-              referencePosition = "before"
-            }
-
-            if (referenceNodeId) {
-              // Insert remaining child first (it will replace the flex container position)
-              actions.push(
-                EditorActions.insertNode(
-                  remainingChildren[0],
-                  referenceNodeId,
-                  referencePosition
-                )
-              )
-
-              // Now insert the dragged node next to the remaining child
-              actions.push(
-                EditorActions.insertNode(
-                  draggingNode,
-                  remainingChildren[0].id,
-                  insertPos
-                )
-              )
-
-              // Delete the flex container (which also removes dragging node)
-              actions.push(EditorActions.deleteNode(parent.id))
-            } else {
-              // Fallback: no siblings, use container
-              actions.push(
-                EditorActions.insertNode(
-                  remainingChildren[0],
-                  container.id,
-                  "append"
-                )
-              )
-              actions.push(
-                EditorActions.insertNode(
-                  draggingNode,
-                  remainingChildren[0].id,
-                  insertPos
-                )
-              )
-              actions.push(EditorActions.deleteNode(parent.id))
-            }
-          } else {
-            // Target is NOT the flex container - normal case
-
-            // Check if the target node is right before or after the flex container
-            const targetIndex = container.children.findIndex(
-              (c) => c.id === nodeId
-            )
-            const isTargetBeforeFlex =
-              targetIndex === parentIndex - 1 && insertPos === "after"
-            const isTargetAfterFlex =
-              targetIndex === parentIndex + 1 && insertPos === "before"
-
-            if (isTargetBeforeFlex || isTargetAfterFlex) {
-              // We're inserting right next to where the flex container is
-              // Need to be careful about ordering
-
-              // Insert dragged node at the target position
-              actions.push(
-                EditorActions.insertNode(draggingNode, nodeId, insertPos)
-              )
-
-              // Insert remaining child next to the dragged node (maintaining order)
-              if (isTargetBeforeFlex) {
-                // Inserting before flex, so remaining child should be after dragged node
-                actions.push(
-                  EditorActions.insertNode(
-                    remainingChildren[0],
-                    draggingNodeId,
-                    "after"
-                  )
-                )
-              } else {
-                // Inserting after flex, so remaining child should be before dragged node
-                actions.push(
-                  EditorActions.insertNode(
-                    remainingChildren[0],
-                    draggingNodeId,
-                    "before"
-                  )
-                )
-              }
-
-              // Delete the flex container (also removes old dragged node reference)
-              actions.push(EditorActions.deleteNode(parent.id))
-            } else {
-              // Target is somewhere else - use standard logic
-
-              // Insert dragged node at new position first
-              actions.push(
-                EditorActions.insertNode(draggingNode, nodeId, insertPos)
-              )
-
-              // Delete the dragging node from flex
-              actions.push(EditorActions.deleteNode(draggingNodeId))
-
-              // Insert remaining child where the flex container was
-              if (parentIndex > 0) {
-                const prevNode = container.children[parentIndex - 1]
-                actions.push(
-                  EditorActions.insertNode(
-                    remainingChildren[0],
-                    prevNode.id,
-                    "after"
-                  )
-                )
-              } else if (parentIndex === 0 && container.children.length > 1) {
-                const nextNode = container.children[1]
-                actions.push(
-                  EditorActions.insertNode(
-                    remainingChildren[0],
-                    nextNode.id,
-                    "before"
-                  )
-                )
-              } else {
-                // Only the flex container exists, just insert at root
-                actions.push(
-                  EditorActions.insertNode(
-                    remainingChildren[0],
-                    container.id,
-                    "append"
-                  )
-                )
-              }
-
-              // Delete the flex container
-              actions.push(EditorActions.deleteNode(parent.id))
-            }
-          }
-        } else {
-          // Multiple children remain, just update the flex container
-          actions.push(
-            EditorActions.updateNode(parent.id, {
-              children: remainingChildren as any,
-            })
-          )
-
-          // Insert dragged node at new position
-          actions.push(
-            EditorActions.insertNode(draggingNode, nodeId, insertPos)
-          )
-        }
-
-        actions.push(EditorActions.setActiveNode(draggingNodeId))
-
-        dispatch(EditorActions.batch(actions))
-
-        toast({
-          title: "Image moved!",
-          description: "Image extracted and repositioned",
-        })
-
-        setDragOverNodeId(null)
-        setDropPosition(null)
-        setDraggingNodeId(null)
-        return
-      }
-
-      // Standard move at root level
-      const draggingNodeAtRoot = container.children.find(
-        (n) => n.id === draggingNodeId
-      )
-
-      if (draggingNodeAtRoot) {
-        const targetNodeAtRoot = container.children.find((n) => n.id === nodeId)
-
-        // Check if both are at root level and not images - use swap for blocks
-        const isDraggingImage =
-          isTextNode(draggingNode) && (draggingNode as TextNode).type === "img"
-        const isTargetImage =
-          targetNodeAtRoot &&
-          isTextNode(targetNodeAtRoot) &&
-          (targetNodeAtRoot as TextNode).type === "img"
-
-        // Use swap for non-image blocks, use move for images
-        if (!isDraggingImage && !isTargetImage && targetNodeAtRoot) {
-          dispatch(EditorActions.swapNodes(draggingNodeId, nodeId))
-          dispatch(EditorActions.setActiveNode(draggingNodeId))
-
-          toast({
-            title: "Blocks swapped!",
-            description: "Block positions exchanged",
-          })
-        } else {
-          // Convert dropPosition to valid InsertPosition
-          const insertPos =
-            dropPosition === "before" || dropPosition === "after"
-              ? dropPosition
-              : "after"
-
-          dispatch(EditorActions.moveNode(draggingNodeId, nodeId, insertPos))
-          dispatch(EditorActions.setActiveNode(draggingNodeId))
-
-          toast({
-            title: isDraggingImage ? "Image moved!" : "Block moved!",
-            description: `${isDraggingImage ? "Image" : "Block"} repositioned ${dropPosition} the block`,
-          })
-        }
-      }
-
-      setDragOverNodeId(null)
-      setDropPosition(null)
-      setDraggingNodeId(null)
-      return
-    }
-
-    // Otherwise, handle file upload
-
-    // Try to get files from dataTransfer
-    let files: File[] = []
-
-    if (e.dataTransfer.items) {
-      // Use DataTransferItemList interface
-      const items = Array.from(e.dataTransfer.items)
-      files = items
-        .filter((item) => item.kind === "file")
-        .map((item) => item.getAsFile())
-        .filter((file): file is File => file !== null)
-    } else {
-      // Use DataTransferList interface
-      files = Array.from(e.dataTransfer.files)
-    }
-
-    // Find first image or video file
-    const mediaFile = files.find(
-      (file) => file.type.startsWith("image/") || file.type.startsWith("video/")
-    )
-
-    if (!mediaFile) {
-      setDragOverNodeId(null)
-      setDropPosition(null)
-      setDraggingNodeId(null)
-      return
-    }
-
-    const isVideo = mediaFile.type.startsWith("video/")
-    setIsUploading(true)
-
-    try {
-      // Use custom upload handler if provided, otherwise use default
-      let mediaUrl: string
-
-      if (onUploadImage) {
-        mediaUrl = await onUploadImage(mediaFile)
-      } else {
-        const result = await uploadImage(mediaFile)
-        if (!result.success || !result.url) {
-          throw new Error(result.error || "Upload failed")
-        }
-        mediaUrl = result.url
-      }
-
-      const mediaNode: TextNode = {
-        id: `${isVideo ? "video" : "img"}-${Date.now()}`,
-        type: isVideo ? "video" : "img",
-        content: "", // Optional caption
-        attributes: {
-          src: mediaUrl,
-          alt: mediaFile.name,
-        },
-      }
-
-      // Insert at the determined position
-      // Convert dropPosition to valid InsertPosition
-      const insertPos =
-        dropPosition === "before" || dropPosition === "after"
-          ? dropPosition
-          : "after"
-
-      dispatch(EditorActions.insertNode(mediaNode, nodeId, insertPos))
-      dispatch(EditorActions.setActiveNode(mediaNode.id))
-
-      toast({
-        title: `${isVideo ? "Video" : "Image"} uploaded!`,
-        description: `${isVideo ? "Video" : "Image"} placed ${dropPosition} the block`,
-      })
-    } catch (error) {
-      toast({
-        variant: "destructive",
-        title: "Upload failed",
-        description:
-          error instanceof Error
-            ? error.message
-            : "Failed to upload file. Please try again.",
-      })
-    } finally {
-      setIsUploading(false)
-      setDragOverNodeId(null)
-      setDropPosition(null)
-      setDraggingNodeId(null)
-    }
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/handlers/file-upload-handlers.ts b/apps/web/src/components/ui/rich-editor/handlers/file-upload-handlers.ts
deleted file mode 100644
index 2f383760..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/file-upload-handlers.ts
+++ /dev/null
@@ -1,359 +0,0 @@
-import { EditorActions } from "../lib/reducer/actions"
-import { ContainerNode, TextNode } from "../types"
-import { uploadImage } from "../utils/image-upload"
-
-export interface FileUploadHandlerParams {
-  container: ContainerNode
-  dispatch: React.Dispatch<any>
-  state: any
-  toast: any
-  setIsUploading: (uploading: boolean) => void
-  fileInputRef: React.RefObject<HTMLInputElement | null>
-  multipleFileInputRef: React.RefObject<HTMLInputElement | null>
-  onUploadImage?: (file: File) => Promise<string>
-}
-
-/**
- * Handle single file change (supports both images and videos)
- */
-export function createHandleFileChange(params: FileUploadHandlerParams) {
-  return async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const {
-      container,
-      dispatch,
-      state,
-      toast,
-      setIsUploading,
-      fileInputRef,
-      onUploadImage,
-    } = params
-    const file = e.target.files?.[0]
-    if (!file) return
-
-    setIsUploading(true)
-
-    // Determine if file is image or video
-    const isVideo = file.type.startsWith("video/")
-    const isImage = file.type.startsWith("image/")
-
-    if (!isImage && !isVideo) {
-      toast({
-        variant: "destructive",
-        title: "Invalid file type",
-        description: "Please upload an image or video file.",
-      })
-      setIsUploading(false)
-      return
-    }
-
-    try {
-      // Use custom upload handler if provided, otherwise use default
-      let fileUrl: string
-
-      if (onUploadImage) {
-        fileUrl = await onUploadImage(file)
-      } else {
-        const result = await uploadImage(file)
-        if (!result.success || !result.url) {
-          throw new Error(result.error || "Upload failed")
-        }
-        fileUrl = result.url
-      }
-
-      // Create new media node (image or video)
-      const mediaNode: TextNode = {
-        id: `${isVideo ? "video" : "img"}-${Date.now()}`,
-        type: isVideo ? "video" : "img",
-        content: "", // Optional caption
-        attributes: {
-          src: fileUrl,
-          alt: file.name,
-        },
-      }
-
-      // Insert media after current node or at end
-      const targetId =
-        state.activeNodeId ||
-        container.children[container.children.length - 1]?.id
-      if (targetId) {
-        dispatch(EditorActions.insertNode(mediaNode, targetId, "after"))
-      } else {
-        dispatch(EditorActions.insertNode(mediaNode, container.id, "append"))
-      }
-
-      toast({
-        title: `${isVideo ? "Video" : "Image"} uploaded`,
-        description: `Your ${isVideo ? "video" : "image"} has been added to the editor.`,
-      })
-    } catch (error) {
-      toast({
-        variant: "destructive",
-        title: "Upload failed",
-        description:
-          error instanceof Error
-            ? error.message
-            : "An unexpected error occurred",
-      })
-    } finally {
-      setIsUploading(false)
-      // Reset file input
-      if (fileInputRef.current) {
-        fileInputRef.current.value = ""
-      }
-    }
-  }
-}
-
-/**
- * Handle multiple files change (supports both images and videos)
- */
-export function createHandleMultipleFilesChange(
-  params: FileUploadHandlerParams
-) {
-  return async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const {
-      container,
-      dispatch,
-      state,
-      toast,
-      setIsUploading,
-      multipleFileInputRef,
-      onUploadImage,
-    } = params
-    const files = Array.from(e.target.files || [])
-    if (files.length === 0) return
-
-    setIsUploading(true)
-
-    try {
-      // Filter to only images and videos
-      const validFiles = files.filter(
-        (file) =>
-          file.type.startsWith("image/") || file.type.startsWith("video/")
-      )
-
-      if (validFiles.length === 0) {
-        toast({
-          variant: "destructive",
-          title: "Invalid file types",
-          description: "Please upload only image or video files.",
-        })
-        setIsUploading(false)
-        return
-      }
-
-      // Upload all media files
-      const uploadPromises = validFiles.map(async (file) => {
-        if (onUploadImage) {
-          return await onUploadImage(file)
-        } else {
-          const result = await uploadImage(file)
-          if (!result.success || !result.url) {
-            throw new Error(result.error || "Upload failed")
-          }
-          return result.url
-        }
-      })
-
-      const mediaUrls = await Promise.all(uploadPromises)
-
-      // Create media nodes (images and videos)
-      const timestamp = Date.now()
-      const mediaNodes: TextNode[] = mediaUrls.map((url, index) => {
-        const file = validFiles[index]
-        const isVideo = file.type.startsWith("video/")
-
-        return {
-          id: `${isVideo ? "video" : "img"}-${timestamp}-${index}`,
-          type: isVideo ? "video" : "img",
-          content: "",
-          attributes: {
-            src: url,
-            alt: file.name,
-          },
-        }
-      })
-
-      // Create flex container with media
-      const flexContainer: ContainerNode = {
-        id: `flex-container-${timestamp}`,
-        type: "container",
-        children: mediaNodes,
-        attributes: {
-          layoutType: "flex",
-          gap: "4",
-          flexWrap: "wrap", // Enable wrapping
-        },
-      }
-
-      // Insert the flex container after current node or at end
-      const targetId =
-        state.activeNodeId ||
-        container.children[container.children.length - 1]?.id
-      if (targetId) {
-        dispatch(EditorActions.insertNode(flexContainer, targetId, "after"))
-      } else {
-        dispatch(
-          EditorActions.insertNode(flexContainer, container.id, "append")
-        )
-      }
-
-      // For flex containers, set the first child as active (containers themselves aren't focusable)
-      if (mediaNodes.length > 0) {
-        dispatch(EditorActions.setActiveNode(mediaNodes[0].id))
-      }
-
-      const videoCount = validFiles.filter((f) =>
-        f.type.startsWith("video/")
-      ).length
-      const imageCount = validFiles.filter((f) =>
-        f.type.startsWith("image/")
-      ).length
-      let description = ""
-      if (videoCount > 0 && imageCount > 0) {
-        description = `${imageCount} image(s) and ${videoCount} video(s) added in a flex layout.`
-      } else if (videoCount > 0) {
-        description = `${videoCount} video(s) added in a flex layout.`
-      } else {
-        description = `${imageCount} image(s) added in a flex layout.`
-      }
-
-      toast({
-        title: "Media uploaded",
-        description,
-      })
-    } catch (error) {
-      toast({
-        variant: "destructive",
-        title: "Upload failed",
-        description:
-          error instanceof Error
-            ? error.message
-            : "An unexpected error occurred",
-      })
-    } finally {
-      setIsUploading(false)
-      // Reset file input
-      if (multipleFileInputRef.current) {
-        multipleFileInputRef.current.value = ""
-      }
-    }
-  }
-}
-
-/**
- * Handle image upload click
- */
-export function createHandleImageUploadClick(
-  fileInputRef: React.RefObject<HTMLInputElement | null>
-) {
-  return () => {
-    fileInputRef.current?.click()
-  }
-}
-
-/**
- * Handle multiple images upload click
- */
-export function createHandleMultipleImagesUploadClick(
-  multipleFileInputRef: React.RefObject<HTMLInputElement | null>
-) {
-  return () => {
-    multipleFileInputRef.current?.click()
-  }
-}
-
-/**
- * Handle free image file change - creates free-positioned image
- */
-export function createHandleFreeImageFileChange(
-  params: FileUploadHandlerParams
-) {
-  return async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { dispatch, toast, setIsUploading, fileInputRef, onUploadImage } =
-      params
-    const file = e.target.files?.[0]
-    if (!file) return
-
-    setIsUploading(true)
-
-    if (!file.type.startsWith("image/")) {
-      toast({
-        variant: "destructive",
-        title: "Invalid file type",
-        description: "Please upload an image file.",
-      })
-      setIsUploading(false)
-      return
-    }
-
-    try {
-      // Use custom upload handler if provided, otherwise use default
-      let fileUrl: string
-
-      if (onUploadImage) {
-        fileUrl = await onUploadImage(file)
-      } else {
-        const result = await uploadImage(file)
-        if (!result.success || !result.url) {
-          throw new Error(result.error || "Upload failed")
-        }
-        fileUrl = result.url
-      }
-
-      // Create new free-positioned image node
-      const freeImageNode: TextNode = {
-        id: `free-img-${Date.now()}`,
-        type: "img",
-        content: "", // Optional caption
-        attributes: {
-          src: fileUrl,
-          alt: file.name,
-          isFreePositioned: true, // Flag to identify free-positioned images
-          styles: {
-            left: "100px",
-            top: "100px",
-            width: "400px",
-            height: "auto",
-            position: "fixed",
-            zIndex: "10",
-          },
-        },
-      }
-
-      // Insert the free image node at the end of container
-      dispatch(EditorActions.insertNode(freeImageNode, "root", "append"))
-
-      toast({
-        title: "Free image added",
-        description: "You can drag the image to position it anywhere.",
-      })
-    } catch (error) {
-      toast({
-        variant: "destructive",
-        title: "Upload failed",
-        description:
-          error instanceof Error
-            ? error.message
-            : "An unexpected error occurred",
-      })
-    } finally {
-      setIsUploading(false)
-      // Reset file input
-      if (fileInputRef.current) {
-        fileInputRef.current.value = ""
-      }
-    }
-  }
-}
-
-/**
- * Handle free image upload click
- */
-export function createHandleFreeImageUploadClick(
-  freeImageInputRef: React.RefObject<HTMLInputElement | null>
-) {
-  return () => {
-    freeImageInputRef.current?.click()
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/handlers/flex-container-handlers.ts b/apps/web/src/components/ui/rich-editor/handlers/flex-container-handlers.ts
deleted file mode 100644
index a69ec586..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/flex-container-handlers.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-import { EditorActions } from "../lib/reducer/actions"
-import { ContainerNode, isTextNode, TextNode } from "../types"
-import { findNodeAnywhere } from "../utils/editor-helpers"
-
-export interface FlexContainerHandlerParams {
-  container: ContainerNode
-  dispatch: React.Dispatch<any>
-  toast: any
-  draggingNodeId: string | null
-  setDragOverFlexId: (id: string | null) => void
-  setFlexDropPosition: (pos: "left" | "right" | null) => void
-}
-
-/**
- * Handle drag over on flex container edges
- */
-export function createHandleFlexContainerDragOver(
-  params: FlexContainerHandlerParams
-) {
-  return (
-    e: React.DragEvent,
-    flexContainerId: string,
-    position: "left" | "right" | null
-  ) => {
-    const {
-      container,
-      draggingNodeId,
-      setDragOverFlexId,
-      setFlexDropPosition,
-    } = params
-
-    e.preventDefault()
-    e.stopPropagation()
-
-    // Check if we're dragging something
-    const draggedNodeId = e.dataTransfer.getData("text/plain")
-    if (!draggedNodeId && !draggingNodeId) {
-      return
-    }
-
-    const actualDraggingId = draggingNodeId || draggedNodeId
-
-    // Find the dragging node
-    const draggingResult = actualDraggingId
-      ? findNodeAnywhere(actualDraggingId, container)
-      : null
-
-    if (!draggingResult || !isTextNode(draggingResult.node)) {
-      // Not a valid node to drag
-      setDragOverFlexId(null)
-      setFlexDropPosition(null)
-      return
-    }
-
-    const draggingNode = draggingResult.node as TextNode
-
-    // Only allow image nodes
-    if (draggingNode.type !== "img") {
-      setDragOverFlexId(null)
-      setFlexDropPosition(null)
-      return
-    }
-
-    // Check if we're in the edge zones
-    if (position) {
-      setDragOverFlexId(flexContainerId)
-      setFlexDropPosition(position)
-      e.dataTransfer.dropEffect = "move"
-    } else {
-      setDragOverFlexId(null)
-      setFlexDropPosition(null)
-    }
-  }
-}
-
-/**
- * Handle drag leave on flex container
- */
-export function createHandleFlexContainerDragLeave(
-  setDragOverFlexId: (id: string | null) => void,
-  setFlexDropPosition: (pos: "left" | "right" | null) => void
-) {
-  return (e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    setDragOverFlexId(null)
-    setFlexDropPosition(null)
-  }
-}
-
-/**
- * Handle drop on flex container edges
- */
-export function createHandleFlexContainerDrop(
-  params: FlexContainerHandlerParams
-) {
-  return (
-    e: React.DragEvent,
-    flexContainerId: string,
-    position: "left" | "right" | null
-  ) => {
-    const {
-      container,
-      dispatch,
-      toast,
-      draggingNodeId,
-      setDragOverFlexId,
-      setFlexDropPosition,
-    } = params
-
-    e.preventDefault()
-    e.stopPropagation()
-
-    if (!position || !draggingNodeId) {
-      setDragOverFlexId(null)
-      setFlexDropPosition(null)
-      return
-    }
-
-    // Find the dragging node and the flex container
-    const draggingResult = findNodeAnywhere(draggingNodeId, container)
-    const flexResult = findNodeAnywhere(flexContainerId, container)
-
-    if (!draggingResult || !flexResult) {
-      setDragOverFlexId(null)
-      setFlexDropPosition(null)
-      return
-    }
-
-    const draggingNode = draggingResult.node as TextNode
-    const flexContainer = flexResult.node as ContainerNode
-
-    // Only handle image nodes
-    if (draggingNode.type !== "img") {
-      setDragOverFlexId(null)
-      setFlexDropPosition(null)
-      return
-    }
-
-    // Check if the dragging node is already in this flex container
-    const isInSameContainer = draggingResult.parentId === flexContainerId
-
-    if (isInSameContainer) {
-      // Case 1: Reordering within the same flex container
-
-      const currentIndex = flexContainer.children.findIndex(
-        (c) => c.id === draggingNodeId
-      )
-      const newChildren = [...flexContainer.children]
-
-      // Remove from current position
-      const [movedNode] = newChildren.splice(currentIndex, 1)
-
-      // Insert at new position
-      if (position === "left") {
-        newChildren.unshift(movedNode)
-      } else {
-        newChildren.push(movedNode)
-      }
-
-      dispatch(
-        EditorActions.updateNode(flexContainerId, {
-          children: newChildren as any,
-        })
-      )
-
-      toast({
-        title: "Image repositioned!",
-        description: "Image moved within the flex container",
-      })
-    } else {
-      // Case 2: Adding image from outside to the flex container
-
-      const newChildren = [...flexContainer.children]
-
-      if (position === "left") {
-        newChildren.unshift(draggingNode)
-      } else {
-        newChildren.push(draggingNode)
-      }
-
-      // Batch: delete from old location and update container
-      const actions = [
-        EditorActions.deleteNode(draggingNodeId),
-        EditorActions.updateNode(flexContainerId, {
-          children: newChildren as any,
-        }),
-      ]
-
-      dispatch(EditorActions.batch(actions))
-
-      toast({
-        title: "Image added!",
-        description: "Image added to the flex container",
-      })
-    }
-
-    setDragOverFlexId(null)
-    setFlexDropPosition(null)
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/handlers/image-selection-handlers.ts b/apps/web/src/components/ui/rich-editor/handlers/image-selection-handlers.ts
deleted file mode 100644
index c80c6db6..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/image-selection-handlers.ts
+++ /dev/null
@@ -1,368 +0,0 @@
-import { EditorActions } from "../lib/reducer/actions"
-import { ContainerNode, TextNode } from "../types"
-import { findNodeAnywhere } from "../utils/editor-helpers"
-
-export interface ImageSelectionHandlerParams {
-  container: ContainerNode
-  dispatch: React.Dispatch<any>
-  toast: any
-}
-
-/**
- * Create flex container from selected images
- */
-export function createHandleGroupSelectedImages(
-  params: ImageSelectionHandlerParams,
-  selectedImageIds: Set<string>,
-  clearSelection: () => void
-) {
-  return () => {
-    const { container, dispatch, toast } = params
-
-    if (selectedImageIds.size < 2) {
-      toast({
-        variant: "destructive",
-        title: "Not enough images",
-        description: "Please select at least 2 images to group",
-      })
-      return
-    }
-
-    // Find all selected image nodes
-    const imageNodes: TextNode[] = []
-    const imageResults = []
-
-    for (const imageId of selectedImageIds) {
-      const result = findNodeAnywhere(imageId, container)
-      if (result && result.node.type === "img") {
-        imageNodes.push(result.node as TextNode)
-        imageResults.push(result)
-      }
-    }
-
-    if (imageNodes.length < 2) {
-      toast({
-        variant: "destructive",
-        title: "Invalid selection",
-        description: "Could not find all selected images",
-      })
-      return
-    }
-
-    // Check if images are in different flex containers - we can't group them
-    const parentIds = new Set(
-      imageResults.map((r) => r.parentId).filter(Boolean)
-    )
-    const hasFlexParent = imageResults.some(
-      (r) => r.parent && r.parent.attributes?.layoutType === "flex"
-    )
-
-    // Find the position to insert the new flex container
-    // Use the position of the first selected image (topmost in the document)
-    let referenceNodeId: string | null = null
-    let insertPosition: "before" | "after" = "after"
-
-    // Find the first image in the root container
-    for (const child of container.children) {
-      if (selectedImageIds.has(child.id)) {
-        // Found the first selected image at root level
-        const index = container.children.indexOf(child)
-        if (index > 0) {
-          referenceNodeId = container.children[index - 1].id
-          insertPosition = "after"
-        } else if (container.children.length > imageNodes.length) {
-          // Find a non-selected node to use as reference
-          const nextNonSelected = container.children.find(
-            (c) => !selectedImageIds.has(c.id)
-          )
-          if (nextNonSelected) {
-            referenceNodeId = nextNonSelected.id
-            insertPosition = "before"
-          }
-        }
-        break
-      }
-    }
-
-    // Create a flex container with all selected images
-    const timestamp = Date.now()
-    const flexContainer: ContainerNode = {
-      id: `flex-container-${timestamp}`,
-      type: "container",
-      children: imageNodes,
-      attributes: {
-        layoutType: "flex",
-        gap: "4",
-        flexWrap: "wrap",
-      },
-    }
-
-    // Batch: delete all selected images and insert flex container
-    const actions: any[] = []
-
-    // Delete all selected images
-    for (const imageId of selectedImageIds) {
-      actions.push(EditorActions.deleteNode(imageId))
-    }
-
-    // Insert the flex container
-    if (referenceNodeId) {
-      actions.push(
-        EditorActions.insertNode(flexContainer, referenceNodeId, insertPosition)
-      )
-    } else {
-      // If no reference node, replace entire container
-      actions.push(
-        EditorActions.replaceContainer({
-          ...container,
-          children: [flexContainer],
-        })
-      )
-    }
-
-    dispatch(EditorActions.batch(actions))
-
-    toast({
-      title: "Images grouped!",
-      description: `${imageNodes.length} images placed in a flex layout`,
-    })
-
-    clearSelection()
-  }
-}
-
-/**
- * Toggle image selection
- */
-export function createHandleToggleImageSelection(
-  selectedImageIds: Set<string>,
-  setSelectedImageIds: (ids: Set<string>) => void
-) {
-  return (imageId: string) => {
-    const newSelection = new Set(selectedImageIds)
-    if (newSelection.has(imageId)) {
-      newSelection.delete(imageId)
-    } else {
-      newSelection.add(imageId)
-    }
-    setSelectedImageIds(newSelection)
-  }
-}
-
-/**
- * Clear all image selections
- */
-export function createHandleClearImageSelection(
-  setSelectedImageIds: (ids: Set<string>) => void
-) {
-  return () => {
-    setSelectedImageIds(new Set())
-  }
-}
-
-/**
- * Check if selected images are in the same flex container
- */
-export function checkImagesInSameFlex(
-  params: ImageSelectionHandlerParams,
-  selectedImageIds: Set<string>
-): { inSameFlex: boolean; flexParentId: string | null } {
-  const { container } = params
-
-  if (selectedImageIds.size < 2) {
-    return { inSameFlex: false, flexParentId: null }
-  }
-
-  const imageResults = []
-  for (const imageId of selectedImageIds) {
-    const result = findNodeAnywhere(imageId, container)
-    if (result && result.node.type === "img") {
-      imageResults.push(result)
-    }
-  }
-
-  // Check if all images have the same parent that is a flex container
-  const firstParentId = imageResults[0]?.parentId
-  const firstParent = imageResults[0]?.parent
-
-  if (
-    !firstParentId ||
-    !firstParent ||
-    firstParent.attributes?.layoutType !== "flex"
-  ) {
-    return { inSameFlex: false, flexParentId: null }
-  }
-
-  // Check all images have the same flex parent
-  const allSameParent = imageResults.every(
-    (r) =>
-      r.parentId === firstParentId &&
-      r.parent?.attributes?.layoutType === "flex"
-  )
-
-  return {
-    inSameFlex: allSameParent,
-    flexParentId: allSameParent ? firstParentId : null,
-  }
-}
-
-/**
- * Reverse order of selected images in flex container
- */
-export function createHandleReverseImagesInFlex(
-  params: ImageSelectionHandlerParams,
-  selectedImageIds: Set<string>,
-  flexParentId: string
-) {
-  return () => {
-    const { container, dispatch, toast } = params
-
-    // Find the flex container
-    const flexResult = findNodeAnywhere(flexParentId, container)
-    if (!flexResult || flexResult.node.type !== "container") {
-      return
-    }
-
-    const flexContainer = flexResult.node as ContainerNode
-    const children = [...flexContainer.children]
-
-    // Separate selected and non-selected images
-    const selectedIndices: number[] = []
-    const selectedNodes: TextNode[] = []
-
-    children.forEach((child, index) => {
-      if (selectedImageIds.has(child.id)) {
-        selectedIndices.push(index)
-        selectedNodes.push(child as TextNode)
-      }
-    })
-
-    // Reverse only the selected images
-    selectedNodes.reverse()
-
-    // Put them back in their positions
-    selectedIndices.forEach((originalIndex, i) => {
-      children[originalIndex] = selectedNodes[i]
-    })
-
-    // Update the flex container
-    dispatch(
-      EditorActions.updateNode(flexParentId, {
-        children: children as any,
-      })
-    )
-
-    toast({
-      title: "Images reversed!",
-      description: `Order of ${selectedImageIds.size} images reversed`,
-    })
-  }
-}
-
-/**
- * Extract selected images from flex container
- */
-export function createHandleExtractFromFlex(
-  params: ImageSelectionHandlerParams,
-  selectedImageIds: Set<string>,
-  flexParentId: string,
-  clearSelection: () => void
-) {
-  return () => {
-    const { container, dispatch, toast } = params
-
-    // Find the flex container
-    const flexResult = findNodeAnywhere(flexParentId, container)
-    if (!flexResult || flexResult.node.type !== "container") {
-      return
-    }
-
-    const flexContainer = flexResult.node as ContainerNode
-    const imagesToExtract: TextNode[] = []
-    const remainingChildren = flexContainer.children.filter((child) => {
-      if (selectedImageIds.has(child.id)) {
-        imagesToExtract.push(child as TextNode)
-        return false
-      }
-      return true
-    })
-
-    const actions: any[] = []
-
-    // If only one or no children remain, unwrap the flex container
-    if (remainingChildren.length <= 1) {
-      // Find the flex container's position in root
-      const flexIndex = container.children.findIndex(
-        (c) => c.id === flexParentId
-      )
-
-      if (flexIndex > 0) {
-        const prevNode = container.children[flexIndex - 1]
-
-        // Insert remaining child if exists
-        if (remainingChildren.length === 1) {
-          actions.push(
-            EditorActions.insertNode(remainingChildren[0], prevNode.id, "after")
-          )
-        }
-
-        // Insert extracted images
-        let lastNodeId =
-          remainingChildren.length === 1 ? remainingChildren[0].id : prevNode.id
-        imagesToExtract.forEach((image) => {
-          actions.push(EditorActions.insertNode(image, lastNodeId, "after"))
-          lastNodeId = image.id
-        })
-
-        // Delete the flex container
-        actions.push(EditorActions.deleteNode(flexParentId))
-      } else {
-        // First position - just delete flex and add all children
-        actions.push(EditorActions.deleteNode(flexParentId))
-
-        if (remainingChildren.length === 1) {
-          actions.push(
-            EditorActions.insertNode(
-              remainingChildren[0],
-              container.children[1]?.id || container.id,
-              container.children[1]?.id ? "before" : "append"
-            )
-          )
-        }
-
-        imagesToExtract.forEach((image) => {
-          actions.push(
-            EditorActions.insertNode(
-              image,
-              container.children[1]?.id || container.id,
-              container.children[1]?.id ? "before" : "append"
-            )
-          )
-        })
-      }
-    } else {
-      // Update flex container with remaining children
-      actions.push(
-        EditorActions.updateNode(flexParentId, {
-          children: remainingChildren as any,
-        })
-      )
-
-      // Insert extracted images after the flex container
-      let lastNodeId = flexParentId
-      imagesToExtract.forEach((image) => {
-        actions.push(EditorActions.insertNode(image, lastNodeId, "after"))
-        lastNodeId = image.id
-      })
-    }
-
-    dispatch(EditorActions.batch(actions))
-
-    toast({
-      title: "Images extracted!",
-      description: `${imagesToExtract.length} images removed from flex container`,
-    })
-
-    clearSelection()
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/handlers/index.ts b/apps/web/src/components/ui/rich-editor/handlers/index.ts
deleted file mode 100644
index 2ae2fb02..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export * from "./selection-handlers"
-
-// Keyboard handlers
-export * from "./keyboard-handlers"
-
-// Drag and drop handlers
-export * from "./drag-drop-handlers"
-
-// File upload handlers
-export * from "./file-upload-handlers"
-
-// Node operation handlers
-export * from "./node-operation-handlers"
diff --git a/apps/web/src/components/ui/rich-editor/handlers/keyboard-handlers.ts b/apps/web/src/components/ui/rich-editor/handlers/keyboard-handlers.ts
deleted file mode 100644
index 04bda257..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/keyboard-handlers.ts
+++ /dev/null
@@ -1,540 +0,0 @@
-import { EditorActions } from "../lib/reducer/actions"
-import {
-  ContainerNode,
-  getNodeTextContent,
-  hasInlineChildren,
-  isTextNode,
-  TextNode,
-} from "../types"
-import { findNodeInTree } from "../utils/editor-helpers"
-
-export interface KeyboardHandlerParams {
-  container: ContainerNode
-  dispatch: React.Dispatch<any>
-  nodeRefs: React.MutableRefObject<Map<string, HTMLElement>>
-  lastEnterTime: React.MutableRefObject<number>
-  onToggleImageSelection?: (nodeId: string) => void
-}
-
-/**
- * Handle content change in a node
- */
-export function createHandleContentChange(
-  params: KeyboardHandlerParams,
-  contentUpdateTimers: React.MutableRefObject<Map<string, NodeJS.Timeout>>
-) {
-  return (nodeId: string, element: HTMLElement) => {
-    const { container, dispatch } = params
-    const result = findNodeInTree(nodeId, container)
-    if (!result || !isTextNode(result.node)) return
-    const node = result.node as TextNode
-
-    const newContent = element.textContent || ""
-
-    // Get the current text content (from plain content or inline children)
-    const currentContent = getNodeTextContent(node)
-
-    // DEBUG: Log content change detection
-    if (process.env.NODE_ENV === "development") {
-      console.log(`💾 [CONTENT CHANGE] Block ${nodeId}:`, {
-        newContent,
-        currentContent,
-        changed: newContent !== currentContent,
-      })
-    }
-
-    // Only update if content actually changed
-    if (newContent !== currentContent) {
-      // Clear any existing timer for this node
-      const existingTimer = contentUpdateTimers.current.get(nodeId)
-      if (existingTimer) {
-        clearTimeout(existingTimer)
-        if (process.env.NODE_ENV === "development") {
-          console.log(`⏱️  [DEBOUNCE] Cleared existing timer for ${nodeId}`)
-        }
-      }
-
-      // Small debounce (50ms) for better performance while avoiding content loss
-      const timer = setTimeout(() => {
-        if (process.env.NODE_ENV === "development") {
-          console.log(
-            `✅ [SAVE] Dispatching content update for ${nodeId}:`,
-            newContent
-          )
-        }
-        // Auto-detect ordered list pattern: "1. ", "2. ", etc. (only with space)
-        const orderedListMatch = newContent.match(/^(\d+)\.\s(.+)$/)
-        // Auto-detect unordered list pattern: "- " or "* "
-        const unorderedListMatch = newContent.match(/^[-*]\s(.+)$/)
-
-        if (orderedListMatch && node.type === "p") {
-          // Convert to ordered list item and remove only the number prefix
-          const [_, number, content] = orderedListMatch
-
-          dispatch(
-            EditorActions.updateNode(node.id, {
-              type: "ol",
-              content: content,
-            })
-          )
-        } else if (unorderedListMatch && node.type === "p") {
-          // Convert to unordered list item and remove the bullet prefix
-          const [_, content] = unorderedListMatch
-
-          dispatch(
-            EditorActions.updateNode(node.id, {
-              type: "li",
-              content: content,
-            })
-          )
-        } else if (
-          node.type === "li" &&
-          (node.lines || newContent.includes("\n"))
-        ) {
-          // List items with line breaks should always use lines structure
-          const textLines = newContent
-            .split("\n")
-            .filter((line) => line.trim() !== "")
-
-          if (textLines.length > 1) {
-            // Multiple lines - use lines structure
-            const updatedLines = textLines.map((lineText) => {
-              // Remove number prefix if present (e.g., "1. text" -> "text")
-              const cleanedText = lineText.replace(/^\d+\.\s*/, "")
-              return { content: cleanedText }
-            })
-
-            dispatch(
-              EditorActions.updateNode(node.id, {
-                lines: updatedLines,
-                content: undefined, // Clear simple content
-                children: undefined, // Clear children
-              })
-            )
-          } else {
-            // Single line - use simple content
-            dispatch(EditorActions.updateContent(node.id, newContent))
-          }
-        } else if (!hasInlineChildren(node)) {
-          // Simple content node - just update the text
-          dispatch(EditorActions.updateContent(node.id, newContent))
-        } else {
-          // Node has inline children with formatting - parse DOM to preserve formatting
-          const {
-            parseDOMToInlineChildren,
-          } = require("../utils/editor-helpers")
-          const parsedChildren = parseDOMToInlineChildren(element)
-
-          dispatch(
-            EditorActions.updateNode(node.id, {
-              children: parsedChildren,
-            })
-          )
-        }
-
-        // Clean up the timer reference
-        contentUpdateTimers.current.delete(nodeId)
-      }, 50) // Small 50ms debounce - fast enough to avoid content loss
-
-      // Store the timer reference
-      contentUpdateTimers.current.set(nodeId, timer)
-    }
-  }
-}
-
-/**
- * Handle click events with modifier keys (Ctrl/Cmd + Click)
- */
-export function createHandleClickWithModifier(params: KeyboardHandlerParams) {
-  return (e: React.MouseEvent, nodeId: string) => {
-    const { container, onToggleImageSelection } = params
-
-    // Check if Ctrl (Windows/Linux) or Cmd (Mac) is pressed
-    const isCtrlOrCmd = e.ctrlKey || e.metaKey
-
-    if (isCtrlOrCmd && onToggleImageSelection) {
-      // Find the node to check if it's an image
-      const result = findNodeInTree(nodeId, container)
-      if (result && isTextNode(result.node)) {
-        const node = result.node as TextNode
-
-        // Only toggle selection for image nodes
-        if (node.type === "img") {
-          e.preventDefault()
-          e.stopPropagation()
-          onToggleImageSelection(nodeId)
-        }
-      }
-    }
-  }
-}
-
-/**
- * Handle key down events
- */
-export function createHandleKeyDown(params: KeyboardHandlerParams) {
-  return (e: React.KeyboardEvent<HTMLElement>, nodeId: string) => {
-    const { container, dispatch, nodeRefs, lastEnterTime } = params
-    // CRITICAL: Get the actual node ID from the DOM element's data attribute
-    // This ensures we get the correct ID for nested list items, not the container's ID
-    const actualNodeId =
-      (e.currentTarget as HTMLElement).getAttribute("data-node-id") || nodeId
-
-    if (e.key === "Enter") {
-      const result = findNodeInTree(actualNodeId, container)
-      if (!result || !isTextNode(result.node)) {
-        return
-      }
-      const node = result.node as TextNode
-
-      // Shift+Enter: Add a line break within the same block
-      if (e.shiftKey) {
-        e.preventDefault()
-        const selection = window.getSelection()
-        if (selection && selection.rangeCount > 0) {
-          const range = selection.getRangeAt(0)
-          range.deleteContents()
-          const br = document.createElement("br")
-          range.insertNode(br)
-          range.setStartAfter(br)
-          range.collapse(true)
-          selection.removeAllRanges()
-          selection.addRange(range)
-        }
-
-        return
-      }
-
-      e.preventDefault()
-
-      const currentTime = Date.now()
-      const timeSinceLastEnter = currentTime - lastEnterTime.current
-
-      // Get cursor position
-      const selection = window.getSelection()
-      const element = nodeRefs.current.get(actualNodeId)
-
-      if (!element || !selection) return
-
-      // Calculate cursor position in text
-      let cursorPosition = 0
-      if (selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0)
-        const preSelectionRange = range.cloneRange()
-        preSelectionRange.selectNodeContents(element)
-        preSelectionRange.setEnd(range.startContainer, range.startOffset)
-        cursorPosition = preSelectionRange.toString().length
-      }
-
-      // Get the full text content
-      const fullText = getNodeTextContent(node)
-
-      // Check if this is a list item (li or ol)
-      if (node.type === "li" || node.type === "ol") {
-        // Split content at cursor position
-        const beforeCursor = fullText.substring(0, cursorPosition)
-        const afterCursor = fullText.substring(cursorPosition)
-
-        // If the current item is empty (no text before or after cursor), exit the list
-        if (!beforeCursor.trim() && !afterCursor.trim()) {
-          // Convert to paragraph and exit list
-          const newNode: TextNode = {
-            id: "p-" + Date.now(),
-            type: "p",
-            content: "",
-            attributes: {},
-          }
-
-          dispatch(EditorActions.deleteNode(actualNodeId))
-          dispatch(EditorActions.insertNode(newNode, actualNodeId, "after"))
-          dispatch(EditorActions.setActiveNode(newNode.id))
-
-          setTimeout(() => {
-            const newElement = nodeRefs.current.get(newNode.id)
-            if (newElement) {
-              newElement.focus()
-            }
-          }, 10)
-
-          return
-        }
-
-        // Create new list item with same type as current one
-        // Update current node with content before cursor
-        dispatch(
-          EditorActions.updateNode(actualNodeId, {
-            content: beforeCursor,
-            children: undefined, // Clear inline formatting when splitting
-            lines: undefined, // Clear multiline structure
-          })
-        )
-
-        // Create new list item with content after cursor, same type as current
-        const newNode: TextNode = {
-          id: `${node.type}-${Date.now()}`,
-          type: node.type,
-          content: afterCursor,
-          attributes: {},
-        }
-
-        dispatch(EditorActions.insertNode(newNode, actualNodeId, "after"))
-        dispatch(EditorActions.setActiveNode(newNode.id))
-
-        lastEnterTime.current = currentTime
-
-        setTimeout(() => {
-          const newElement = nodeRefs.current.get(newNode.id)
-          if (newElement) {
-            newElement.focus()
-            // For list items, place cursor after the bullet/number marker
-            // For other blocks, place at the start
-            if (node.type === "li" || node.type === "ol") {
-              // Place cursor at the very start of the text content, which will be after the marker
-              const range = document.createRange()
-              const sel = window.getSelection()
-              // Use setStart on the element itself to position after the list marker
-              range.selectNodeContents(newElement)
-              range.collapse(true)
-              sel?.removeAllRanges()
-              sel?.addRange(range)
-            } else {
-              const range = document.createRange()
-              const sel = window.getSelection()
-              if (newElement.childNodes.length > 0) {
-                const firstNode = newElement.childNodes[0]
-                range.setStart(firstNode, 0)
-                range.collapse(true)
-                sel?.removeAllRanges()
-                sel?.addRange(range)
-              }
-            }
-          }
-        }, 10)
-
-        return
-      }
-
-      // Regular paragraph/heading - create normal block
-      {
-        // Split content at cursor position
-        const beforeCursor = fullText.substring(0, cursorPosition)
-        const afterCursor = fullText.substring(cursorPosition)
-
-        // Check if node has inline children (formatted content)
-        const nodeHasInlineChildren = hasInlineChildren(node)
-
-        if (nodeHasInlineChildren && node.children) {
-          // Split inline children at cursor position
-          let currentPos = 0
-          const beforeChildren: typeof node.children = []
-          const afterChildren: typeof node.children = []
-          let splitDone = false
-
-          for (const child of node.children) {
-            const childLength = (child.content || "").length
-            const childStart = currentPos
-            const childEnd = currentPos + childLength
-
-            if (splitDone) {
-              // Everything after the split goes to the new node
-              afterChildren.push({ ...child })
-            } else if (cursorPosition <= childStart) {
-              // Cursor is before this child - entire child goes to new node
-              afterChildren.push({ ...child })
-              splitDone = true
-            } else if (cursorPosition >= childEnd) {
-              // Cursor is after this child - entire child stays in current node
-              beforeChildren.push({ ...child })
-            } else {
-              // Cursor is in the middle of this child - need to split it
-              const offsetInChild = cursorPosition - childStart
-
-              // Part before cursor stays in current node
-              if (offsetInChild > 0) {
-                beforeChildren.push({
-                  ...child,
-                  content: child.content!.substring(0, offsetInChild),
-                })
-              }
-
-              // Part after cursor goes to new node
-              if (offsetInChild < childLength) {
-                afterChildren.push({
-                  ...child,
-                  content: child.content!.substring(offsetInChild),
-                })
-              }
-
-              splitDone = true
-            }
-
-            currentPos = childEnd
-          }
-
-          // Update current node with children before cursor
-          dispatch(
-            EditorActions.updateNode(actualNodeId, {
-              children: beforeChildren.length > 0 ? beforeChildren : undefined,
-              content:
-                beforeChildren.length === 0 ? beforeCursor : node.content,
-            })
-          )
-
-          // Create new node with children after cursor (always create a paragraph on Enter)
-          const newNode: TextNode = {
-            id: `p-` + Date.now(),
-            type: "p",
-            content: afterChildren.length === 0 ? afterCursor : node.content,
-            children: afterChildren.length > 0 ? afterChildren : undefined,
-            attributes: {},
-          }
-
-          dispatch(EditorActions.insertNode(newNode, actualNodeId, "after"))
-          dispatch(EditorActions.setActiveNode(newNode.id))
-        } else {
-          // Simple case: no inline children, just plain text
-          // Update current node with content before cursor
-          dispatch(
-            EditorActions.updateNode(actualNodeId, {
-              content: beforeCursor,
-            })
-          )
-
-          // Create new node with content after cursor (always create a paragraph on Enter)
-          const newNode: TextNode = {
-            id: `p-` + Date.now(),
-            type: "p",
-            content: afterCursor,
-            attributes: {},
-          }
-
-          dispatch(EditorActions.insertNode(newNode, actualNodeId, "after"))
-          dispatch(EditorActions.setActiveNode(newNode.id))
-        }
-
-        lastEnterTime.current = currentTime
-
-        // Focus the new node after a brief delay and place cursor at start
-        setTimeout(() => {
-          const newElement = nodeRefs.current.get(`p-` + currentTime)
-          if (newElement) {
-            newElement.focus()
-            // Place cursor at the start of the new node
-            const range = document.createRange()
-            const sel = window.getSelection()
-            if (newElement.childNodes.length > 0) {
-              const firstNode = newElement.childNodes[0]
-              range.setStart(firstNode, 0)
-              range.collapse(true)
-              sel?.removeAllRanges()
-              sel?.addRange(range)
-            }
-          }
-        }, 10)
-      }
-    } else if (e.key === "Backspace" || e.key === "Delete") {
-      const result = findNodeInTree(actualNodeId, container)
-      if (!result || !isTextNode(result.node)) return
-
-      const node = result.node as TextNode
-      const { siblings } = result
-
-      const selection = window.getSelection()
-      const cursorAtStart =
-        selection && selection.anchorOffset === 0 && selection.isCollapsed
-
-      // Get the actual DOM element to check real text content
-      const element = nodeRefs.current.get(actualNodeId)
-      const domTextContent = element?.textContent || ""
-
-      // Get the full text content (handles both simple content and inline children)
-      const fullTextContent = getNodeTextContent(node)
-      // For list items, check if the DOM content is empty (what the user actually sees)
-      // For other nodes, check both state and DOM
-      const isListItemType = node.type === "li" || node.type === "ol"
-      const isNodeEmpty = isListItemType
-        ? !domTextContent || domTextContent.trim() === ""
-        : (!fullTextContent || fullTextContent.trim() === "") &&
-          (!domTextContent || domTextContent.trim() === "")
-
-      // If cursor is at the start and node is empty or BR, delete the node
-      if ((cursorAtStart && isNodeEmpty) || node.type === "br") {
-        e.preventDefault()
-
-        const currentIndex = siblings.findIndex((n) => n.id === actualNodeId)
-
-        // Don't delete if it's the only node in the container
-        if (siblings.length === 1) {
-          // Just clear the content instead
-          if (hasInlineChildren(node)) {
-            dispatch(EditorActions.updateNode(node.id, { children: [] }))
-          } else if (node.content) {
-            dispatch(EditorActions.updateContent(node.id, ""))
-          }
-          return
-        }
-
-        // Count non-image blocks
-        const nonImageBlocks = siblings.filter((n) => {
-          if (!isTextNode(n)) return true // Container nodes are not images
-          return (n as TextNode).type !== "img"
-        })
-
-        // Don't delete if this is the last non-image block
-        if (nonImageBlocks.length === 1 && node.type !== "img") {
-          // Just clear the content instead
-          if (hasInlineChildren(node)) {
-            dispatch(EditorActions.updateNode(node.id, { children: [] }))
-          } else if (node.content) {
-            dispatch(EditorActions.updateContent(node.id, ""))
-          }
-          return
-        }
-
-        // Delete the current node
-        dispatch(EditorActions.deleteNode(actualNodeId))
-
-        // Focus the previous node if it exists, otherwise the next one
-        const prevNode = siblings[currentIndex - 1]
-        const nextNode = siblings[currentIndex + 1]
-        const nodeToFocus = prevNode || nextNode
-
-        if (nodeToFocus) {
-          dispatch(EditorActions.setActiveNode(nodeToFocus.id))
-
-          // Place cursor at the end of the focused node
-          setTimeout(() => {
-            const elementToFocus = nodeRefs.current.get(nodeToFocus.id)
-            if (elementToFocus) {
-              elementToFocus.focus()
-              const range = document.createRange()
-              const sel = window.getSelection()
-
-              // Find the last text node to place cursor at the end
-              const lastChild =
-                elementToFocus.childNodes[elementToFocus.childNodes.length - 1]
-              if (lastChild) {
-                if (lastChild.nodeType === Node.TEXT_NODE) {
-                  // Place at end of text node
-                  range.setStart(lastChild, lastChild.textContent?.length || 0)
-                } else {
-                  // Place after the last child element
-                  range.setStartAfter(lastChild)
-                }
-                range.collapse(true)
-                sel?.removeAllRanges()
-                sel?.addRange(range)
-              } else if (elementToFocus.childNodes.length === 0) {
-                // Empty element, place cursor inside it
-                range.selectNodeContents(elementToFocus)
-                range.collapse(false)
-                sel?.removeAllRanges()
-                sel?.addRange(range)
-              }
-            }
-          }, 10)
-        }
-      }
-    }
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/handlers/node-operation-handlers.ts b/apps/web/src/components/ui/rich-editor/handlers/node-operation-handlers.ts
deleted file mode 100644
index b7932009..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/node-operation-handlers.ts
+++ /dev/null
@@ -1,651 +0,0 @@
-import { EditorActions } from "../lib/reducer/actions"
-import {
-  ContainerNode,
-  EditorNode,
-  isContainerNode,
-  isTextNode,
-  StructuralNode,
-  TextNode,
-} from "../types"
-import { findNodeInTree } from "../utils/editor-helpers"
-
-export interface NodeOperationHandlerParams {
-  container: ContainerNode
-  dispatch: React.Dispatch<any>
-  toast: any
-  nodeRefs: React.MutableRefObject<Map<string, HTMLElement>>
-  editorContentRef: React.RefObject<HTMLDivElement | null>
-}
-
-/**
- * Handle node click
- */
-export function createHandleNodeClick(
-  params: Pick<NodeOperationHandlerParams, "container" | "dispatch">
-) {
-  return (nodeId: string) => {
-    const { container, dispatch } = params
-    // Don't set container nodes as active - they're not focusable
-    // Only text nodes and image nodes can be focused
-    const result = findNodeInTree(nodeId, container)
-    if (result && isContainerNode(result.node)) {
-      // For container nodes, don't set as active
-      // The child blocks will handle their own clicks
-      return
-    }
-    dispatch(EditorActions.setActiveNode(nodeId))
-  }
-}
-
-/**
- * Handle delete node
- */
-export function createHandleDeleteNode(
-  params: Pick<NodeOperationHandlerParams, "container" | "dispatch" | "toast">
-) {
-  return (nodeId: string) => {
-    const { container, dispatch, toast } = params
-
-    // Find the node being deleted to determine its type
-    const findNode = (nodes: EditorNode[]): EditorNode | null => {
-      for (const node of nodes) {
-        if (node.id === nodeId) return node
-        if (isContainerNode(node)) {
-          const found = findNode((node as ContainerNode).children)
-          if (found) return found
-        }
-      }
-      return null
-    }
-
-    const nodeToDelete = findNode(container.children)
-
-    // Determine the type of content being deleted
-    let contentType = "Block"
-    let contentDescription = "The block has been deleted."
-
-    if (nodeToDelete) {
-      if (isContainerNode(nodeToDelete)) {
-        const firstChild = (nodeToDelete as ContainerNode).children[0]
-        if (firstChild?.type === "table") {
-          contentType = "Table removed"
-          contentDescription = "The table has been deleted."
-        }
-      } else if (nodeToDelete.type === "img") {
-        contentType = "Image removed"
-        contentDescription = "The image has been deleted."
-      } else if (nodeToDelete.type === "video") {
-        contentType = "Video removed"
-        contentDescription = "The video has been deleted."
-      }
-    }
-
-    // Check if the node is inside a flex container
-    const parentContainer = container.children.find(
-      (child) =>
-        isContainerNode(child) &&
-        (child as ContainerNode).children.some((c) => c.id === nodeId)
-    )
-
-    if (parentContainer) {
-      const containerNode = parentContainer as ContainerNode
-      const remainingChildren = containerNode.children.filter(
-        (c) => c.id !== nodeId
-      )
-
-      // If only one child left, unwrap it from the container
-      if (remainingChildren.length === 1) {
-        // Batch: delete container and insert remaining child (single history entry)
-        const containerIndex = container.children.findIndex(
-          (c) => c.id === parentContainer.id
-        )
-        const actions: any[] = [EditorActions.deleteNode(parentContainer.id)]
-
-        if (containerIndex > 0) {
-          const prevNode = container.children[containerIndex - 1]
-          actions.push(
-            EditorActions.insertNode(remainingChildren[0], prevNode.id, "after")
-          )
-        } else if (containerIndex === 0 && container.children.length > 1) {
-          const nextNode = container.children[1]
-          actions.push(
-            EditorActions.insertNode(
-              remainingChildren[0],
-              nextNode.id,
-              "before"
-            )
-          )
-        }
-
-        dispatch(EditorActions.batch(actions))
-      } else if (remainingChildren.length === 0) {
-        // No children left, delete the container
-        dispatch(EditorActions.deleteNode(parentContainer.id))
-      } else {
-        // Multiple children remain, just remove this one
-        dispatch(EditorActions.deleteNode(nodeId))
-      }
-    } else {
-      dispatch(EditorActions.deleteNode(nodeId))
-    }
-
-    toast({
-      title: contentType,
-      description: contentDescription,
-    })
-  }
-}
-
-/**
- * Handle add block
- */
-export function createHandleAddBlock(
-  params: Pick<NodeOperationHandlerParams, "dispatch" | "nodeRefs">
-) {
-  return (targetId: string, position: "before" | "after" = "after") => {
-    const { dispatch, nodeRefs } = params
-    // Create new paragraph node
-    const newNode: TextNode = {
-      id: "p-" + Date.now(),
-      type: "p",
-      content: "",
-      attributes: {},
-    }
-
-    dispatch(EditorActions.insertNode(newNode, targetId, position))
-    dispatch(EditorActions.setActiveNode(newNode.id))
-
-    // Focus the new node after a brief delay
-    setTimeout(() => {
-      const newElement = nodeRefs.current.get(newNode.id)
-      if (newElement) {
-        newElement.focus()
-      }
-    }, 50)
-  }
-}
-
-/**
- * Handle create nested block
- */
-export function createHandleCreateNested(
-  params: Pick<NodeOperationHandlerParams, "container" | "dispatch" | "toast">
-) {
-  return (nodeId: string) => {
-    const { container, dispatch, toast } = params
-    const result = findNodeInTree(nodeId, container)
-    if (!result) return
-
-    const { node, parentId } = result
-
-    // If the node is inside a nested container (not root), we need to handle it differently
-    // We only allow 1 level of nesting, so if we're already nested, add to the parent container
-    const isAlreadyNested = parentId !== container.id
-
-    if (isAlreadyNested) {
-      // We're inside a nested container, so just add a new paragraph to the parent container
-      const newParagraph: TextNode = {
-        id: "p-" + Date.now(),
-        type: "p",
-        content: "",
-        attributes: {},
-      }
-
-      // Insert after the current node within the parent container
-      dispatch(EditorActions.insertNode(newParagraph, nodeId, "after"))
-      dispatch(EditorActions.setActiveNode(newParagraph.id))
-
-      // Focus is handled by the useEffect watching state.activeNodeId
-      return
-    }
-
-    // Node is at root level, create a nested container
-    if (!isTextNode(node)) return
-    const textNode = node as TextNode
-
-    // Create the new paragraph that will be focused
-    const newParagraphId = "p-" + Date.now()
-    const newParagraph: TextNode = {
-      id: newParagraphId,
-      type: "p",
-      content: "",
-      attributes: {},
-    }
-
-    // Create a nested container with the current node inside it
-    const nestedContainer: ContainerNode = {
-      id: "container-" + Date.now(),
-      type: "container",
-      children: [
-        // Copy the current node
-        { ...textNode },
-        // Add a new empty paragraph inside the nested container
-        newParagraph,
-      ],
-      attributes: {},
-    }
-
-    // Delete the original node
-    dispatch(EditorActions.deleteNode(nodeId))
-
-    // Insert the nested container in its place
-    // Since we deleted the node, we insert after the previous node or prepend to container
-    const nodeIndex = container.children.findIndex((n) => n.id === nodeId)
-    if (nodeIndex > 0) {
-      const previousNode = container.children[nodeIndex - 1]
-      dispatch(
-        EditorActions.insertNode(nestedContainer, previousNode.id, "after")
-      )
-    } else {
-      dispatch(
-        EditorActions.insertNode(nestedContainer, container.id, "prepend")
-      )
-    }
-
-    // Set the new paragraph as active
-    dispatch(EditorActions.setActiveNode(newParagraphId))
-
-    toast({
-      title: "Nested block created",
-      description:
-        "Press Shift+Enter again to add more blocks in this container",
-    })
-
-    // Focus is handled by the useEffect watching state.activeNodeId
-  }
-}
-
-/**
- * Handle change block type
- */
-export function createHandleChangeBlockType(
-  params: Pick<NodeOperationHandlerParams, "dispatch" | "nodeRefs">
-) {
-  return (nodeId: string, newType: string) => {
-    const { dispatch, nodeRefs } = params
-    // When changing block type from command menu, clear the content (removes the "/" character)
-    dispatch(
-      EditorActions.updateNode(nodeId, {
-        type: newType as any,
-        content: "",
-      })
-    )
-
-    // Focus the updated node after a brief delay
-    setTimeout(() => {
-      const element = nodeRefs.current.get(nodeId)
-      if (element) {
-        element.focus()
-      }
-    }, 50)
-  }
-}
-
-/**
- * Handle insert image from command
- */
-export function createHandleInsertImageFromCommand(
-  params: Pick<NodeOperationHandlerParams, "dispatch" | "nodeRefs">,
-  fileInputRef: React.RefObject<HTMLInputElement | null>
-) {
-  return (nodeId: string) => {
-    const { dispatch } = params
-    // Delete the current empty block
-    dispatch(EditorActions.deleteNode(nodeId))
-
-    // Trigger the file input
-    setTimeout(() => {
-      fileInputRef.current?.click()
-    }, 100)
-  }
-}
-
-/**
- * Handle create list - Creates a simple list item (li, ol, or ul type based on listType)
- */
-export function createHandleCreateList(params: NodeOperationHandlerParams) {
-  return (listType: "ul" | "ol" | "li") => {
-    const { container, dispatch, toast, editorContentRef } = params
-    const timestamp = Date.now()
-
-    // For 'ul' and 'ol', we create 'ol' type items (numbered)
-    // For 'li', we create 'li' type items (bulleted)
-    const itemType = listType === "ul" ? "li" : listType === "ol" ? "ol" : "li"
-
-    // Create a simple list item
-    const listItem: TextNode = {
-      id: `${itemType}-${timestamp}`,
-      type: itemType as any,
-      content: "",
-      attributes: {},
-    }
-
-    // Insert the list item at the end
-    const lastNode = container.children[container.children.length - 1]
-    if (lastNode) {
-      dispatch(EditorActions.insertNode(listItem, lastNode.id, "after"))
-    } else {
-      // If no nodes exist, replace the container
-      dispatch(
-        EditorActions.replaceContainer({
-          ...container,
-          children: [listItem],
-        })
-      )
-    }
-
-    const listTypeLabel = listType === "ol" ? "numbered" : "bulleted"
-    toast({
-      title: "List Item Added",
-      description: `Added a new ${listTypeLabel} list item`,
-    })
-
-    // Smooth scroll to the newly created list item
-    setTimeout(() => {
-      const editorContent = editorContentRef.current
-      if (editorContent) {
-        const lastChild = editorContent.querySelector(
-          "[data-editor-content]"
-        )?.lastElementChild
-        if (lastChild) {
-          lastChild.scrollIntoView({
-            behavior: "smooth",
-            block: "end",
-            inline: "nearest",
-          })
-        }
-      }
-    }, 150)
-  }
-}
-
-/**
- * Handle create list from command menu - converts current block to a list item
- */
-export function createHandleCreateListFromCommand(
-  params: Pick<NodeOperationHandlerParams, "dispatch" | "toast" | "nodeRefs">
-) {
-  return (nodeId: string, listType: string) => {
-    const { dispatch, toast, nodeRefs } = params
-
-    // Convert the current block to a list item
-    // listType can be 'li' (bulleted) or 'ol' (numbered)
-    dispatch(
-      EditorActions.updateNode(nodeId, {
-        type: listType as any,
-        content: "", // Clear content when converting
-      })
-    )
-
-    const listTypeLabel = listType === "ol" ? "numbered" : "bulleted"
-    toast({
-      title: "List Item Created",
-      description: `Converted to ${listTypeLabel} list item`,
-    })
-
-    // Focus the converted item
-    setTimeout(() => {
-      const element = nodeRefs.current.get(nodeId)
-      if (element) {
-        element.focus()
-        dispatch(EditorActions.setActiveNode(nodeId))
-      }
-    }, 50)
-  }
-}
-
-/**
- * Handle create link
- */
-export function createHandleCreateLink(params: NodeOperationHandlerParams) {
-  return () => {
-    const { container, dispatch, toast, editorContentRef } = params
-    const timestamp = Date.now()
-
-    // Create a paragraph with a link
-    const linkNode: TextNode = {
-      id: `p-${timestamp}`,
-      type: "p",
-      children: [
-        {
-          content: "www.text.com",
-          href: "https://www.text.com",
-        },
-      ],
-      attributes: {},
-    }
-
-    // Insert the link node at the end
-    const lastNode = container.children[container.children.length - 1]
-    if (lastNode) {
-      dispatch(EditorActions.insertNode(linkNode, lastNode.id, "after"))
-    } else {
-      // If no nodes exist, replace the container
-      dispatch(
-        EditorActions.replaceContainer({
-          ...container,
-          children: [linkNode],
-        })
-      )
-    }
-
-    toast({
-      title: "Link Created",
-      description: "Added a new link element",
-    })
-
-    // Smooth scroll to the newly created link
-    setTimeout(() => {
-      const editorContent = editorContentRef.current
-      if (editorContent) {
-        const lastChild = editorContent.querySelector(
-          "[data-editor-content]"
-        )?.lastElementChild
-        if (lastChild) {
-          lastChild.scrollIntoView({
-            behavior: "smooth",
-            block: "end",
-            inline: "nearest",
-          })
-        }
-      }
-    }, 150)
-  }
-}
-
-/**
- * Handle create table
- */
-export function createHandleCreateTable(
-  params: NodeOperationHandlerParams,
-  activeNodeId?: string
-) {
-  return (rows: number, cols: number) => {
-    const { container, dispatch, toast, editorContentRef } = params
-    const timestamp = Date.now()
-
-    // Create header cells
-    const headerCells: TextNode[] = Array.from({ length: cols }, (_, i) => ({
-      id: `th-${timestamp}-${i}`,
-      type: "th",
-      content: `Column ${i + 1}`,
-      attributes: {},
-    }))
-
-    // Create header row
-    const headerRow: StructuralNode = {
-      id: `tr-header-${timestamp}`,
-      type: "tr",
-      children: headerCells,
-      attributes: {},
-    }
-
-    // Create thead
-    const thead: StructuralNode = {
-      id: `thead-${timestamp}`,
-      type: "thead",
-      children: [headerRow],
-      attributes: {},
-    }
-
-    // Create body rows
-    const bodyRows: StructuralNode[] = Array.from(
-      { length: rows },
-      (_, rowIdx) => {
-        const cells: TextNode[] = Array.from({ length: cols }, (_, colIdx) => ({
-          id: `td-${timestamp}-${rowIdx}-${colIdx}`,
-          type: "td",
-          content: "",
-          attributes: {},
-        }))
-
-        return {
-          id: `tr-${timestamp}-${rowIdx}`,
-          type: "tr",
-          children: cells,
-          attributes: {},
-        }
-      }
-    )
-
-    // Create tbody
-    const tbody: StructuralNode = {
-      id: `tbody-${timestamp}`,
-      type: "tbody",
-      children: bodyRows,
-      attributes: {},
-    }
-
-    // Create table
-    const table: StructuralNode = {
-      id: `table-${timestamp}`,
-      type: "table",
-      children: [thead, tbody],
-      attributes: {},
-    }
-
-    // Wrap table in a container for consistent handling
-    const tableWrapper: ContainerNode = {
-      id: `table-wrapper-${timestamp}`,
-      type: "container",
-      children: [table],
-      attributes: {},
-    }
-
-    // Determine where to insert the table
-    let targetNode = null
-    let targetPosition: "after" | "before" = "after"
-
-    if (activeNodeId) {
-      // If we have an active node (from command menu), insert after it
-      targetNode = container.children.find((n) => n.id === activeNodeId)
-      targetPosition = "after"
-    }
-
-    if (!targetNode) {
-      // Fallback: insert at the end
-      targetNode = container.children[container.children.length - 1]
-      targetPosition = "after"
-    }
-
-    if (targetNode) {
-      dispatch(
-        EditorActions.insertNode(tableWrapper, targetNode.id, targetPosition)
-      )
-    } else {
-      // If no nodes exist, replace the container
-      dispatch(
-        EditorActions.replaceContainer({
-          ...container,
-          children: [tableWrapper],
-        })
-      )
-    }
-
-    toast({
-      title: "Table Created",
-      description: `Added a ${rows}×${cols} table`,
-    })
-
-    // Smooth scroll to the newly created table
-    setTimeout(() => {
-      const editorContent = editorContentRef.current
-      if (editorContent) {
-        const tableElement = editorContent.querySelector(
-          `[data-node-id="${tableWrapper.id}"]`
-        )
-        if (tableElement) {
-          tableElement.scrollIntoView({
-            behavior: "smooth",
-            block: "center",
-            inline: "nearest",
-          })
-        }
-      }
-    }, 150)
-  }
-}
-
-/**
- * Handle copy HTML
- */
-export function createHandleCopyHtml(
-  params: Pick<NodeOperationHandlerParams, "toast">,
-  enhanceSpaces: boolean,
-  setCopiedHtml: (copied: boolean) => void
-) {
-  return async (container: ContainerNode) => {
-    const { toast } = params
-    const { serializeToHtml } = require("../utils/serialize-to-html")
-    let html = serializeToHtml(container)
-
-    // Wrap with spacing classes if enhance spaces is enabled
-    if (enhanceSpaces) {
-      html = `<div class="[&>*]:my-3 [&_*]:my-5">\n${html}\n</div>`
-    }
-
-    try {
-      await navigator.clipboard.writeText(html)
-      setCopiedHtml(true)
-      toast({
-        title: "HTML copied!",
-        description: "HTML code has been copied to clipboard.",
-      })
-      setTimeout(() => setCopiedHtml(false), 2000)
-    } catch (error) {
-      toast({
-        variant: "destructive",
-        title: "Copy failed",
-        description: "Failed to copy HTML to clipboard.",
-      })
-    }
-  }
-}
-
-/**
- * Handle copy JSON
- */
-export function createHandleCopyJson(
-  params: Pick<NodeOperationHandlerParams, "toast">,
-  setCopiedJson: (copied: boolean) => void
-) {
-  return async (container: ContainerNode) => {
-    const { toast } = params
-    const json = JSON.stringify(container.children, null, 2)
-    try {
-      await navigator.clipboard.writeText(json)
-      setCopiedJson(true)
-      toast({
-        title: "JSON copied!",
-        description: "JSON data has been copied to clipboard.",
-      })
-      setTimeout(() => setCopiedJson(false), 2000)
-    } catch (error) {
-      toast({
-        variant: "destructive",
-        title: "Copy failed",
-        description: "Failed to copy JSON to clipboard.",
-      })
-    }
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/handlers/selection-handlers.ts b/apps/web/src/components/ui/rich-editor/handlers/selection-handlers.ts
deleted file mode 100644
index 4dcd5de4..00000000
--- a/apps/web/src/components/ui/rich-editor/handlers/selection-handlers.ts
+++ /dev/null
@@ -1,335 +0,0 @@
-import { EditorActions } from "../lib/reducer/actions"
-import { ContainerNode, isTextNode, SelectionInfo, TextNode } from "../types"
-import { detectFormatsInRange, restoreSelection } from "../utils/editor-helpers"
-import { findNodeById } from "../utils/tree-operations"
-
-export interface SelectionHandlerParams {
-  container: ContainerNode
-  state: any
-  dispatch: React.Dispatch<any>
-  selectionManager: any
-  nodeRefs: React.MutableRefObject<Map<string, HTMLElement>>
-}
-
-/**
- * Track text selection - updates ref immediately, state with debounce
- */
-export function createHandleSelectionChange(
-  params: SelectionHandlerParams,
-  selectionDispatchTimerRef: React.MutableRefObject<NodeJS.Timeout | null>
-) {
-  return () => {
-    const { container, state, dispatch, selectionManager, nodeRefs } = params
-    const selection = window.getSelection()
-    const hasText =
-      selection !== null &&
-      !selection.isCollapsed &&
-      selection.toString().length > 0
-
-    // Also track collapsed cursor (even when no text selected)
-    const hasCursor = selection !== null && selection.isCollapsed
-
-    if ((hasText || hasCursor) && selection && selection.rangeCount > 0) {
-      // NEW APPROACH: Find the actual node by traversing the DOM upwards from the selection
-      const range = selection.getRangeAt(0)
-      let currentElement: HTMLElement | null = null
-
-      // Start from the selection's common ancestor
-      let node: Node | null = range.commonAncestorContainer
-
-      // Walk up the DOM to find the closest element with data-node-id
-      while (node) {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-          const element = node as HTMLElement
-          const nodeId = element.getAttribute("data-node-id")
-          const nodeType = element.getAttribute("data-node-type")
-
-          // We found a text node (not a container)
-          if (nodeId && nodeType && nodeType !== "container") {
-            currentElement = element
-            break
-          }
-        }
-        node = node.parentNode
-      }
-
-      if (!currentElement) {
-        // Fallback to old behavior if we can't find via DOM
-        const freshCurrentNode = state.activeNodeId
-          ? (findNodeById(container, state.activeNodeId) as
-            | TextNode
-            | undefined)
-          : (container.children[0] as TextNode | undefined)
-
-        if (freshCurrentNode) {
-          currentElement = nodeRefs.current.get(freshCurrentNode.id) || null
-        }
-      }
-
-      if (currentElement) {
-        const actualNodeId = currentElement.getAttribute("data-node-id")
-
-        if (actualNodeId) {
-          // Find the actual node in the tree (including nested nodes)
-          const actualNode = findNodeById(container, actualNodeId) as
-            | TextNode
-            | undefined
-
-          if (actualNode && isTextNode(actualNode)) {
-            const preSelectionRange = range.cloneRange()
-            preSelectionRange.selectNodeContents(currentElement)
-            preSelectionRange.setEnd(range.startContainer, range.startOffset)
-            let start = preSelectionRange.toString().length
-            let end = start + range.toString().length
-
-            // Get the selected text
-            const selectedText = selection.toString()
-
-            // For collapsed cursor (no selection), we still want to detect formatting at cursor position
-            const isCollapsed = start === end
-
-            // Detect active formats in the selected range
-            const detected = detectFormatsInRange(actualNode, start, end)
-
-            const selectionInfo: SelectionInfo = {
-              text: selection.toString(),
-              start,
-              end,
-              nodeId: actualNode.id,
-              formats: {
-                bold: detected.bold,
-                italic: detected.italic,
-                underline: detected.underline,
-                strikethrough: detected.strikethrough,
-                code: detected.code,
-              },
-              elementType: detected.elementType,
-              href: detected.href,
-              className: detected.className,
-              styles: detected.styles,
-            }
-
-            // Check if selection actually changed
-            const currentSel = selectionManager.getSelection()
-            const changed =
-              !currentSel ||
-              currentSel.start !== start ||
-              currentSel.end !== end ||
-              currentSel.nodeId !== actualNode.id ||
-              currentSel.formats.bold !== detected.bold ||
-              currentSel.formats.italic !== detected.italic ||
-              currentSel.formats.underline !== detected.underline ||
-              currentSel.elementType !== detected.elementType
-
-            if (changed) {
-              // Update ref immediately (fast, no re-renders)
-              selectionManager.setSelection(selectionInfo)
-
-              // Debounce state dispatch to avoid excessive re-renders
-              if (selectionDispatchTimerRef.current) {
-                clearTimeout(selectionDispatchTimerRef.current)
-              }
-
-              selectionDispatchTimerRef.current = setTimeout(() => {
-                dispatch(EditorActions.setCurrentSelection(selectionInfo))
-              }, 150) // 150ms debounce for toolbar updates
-            }
-            return // Exit early on success
-          }
-        }
-      }
-    }
-
-    // Clear selection if no valid selection found
-    const currentSel = selectionManager.getSelection()
-    if (currentSel !== null) {
-      // Clear ref immediately
-      selectionManager.setSelection(null)
-
-      // Clear state with debounce
-      if (selectionDispatchTimerRef.current) {
-        clearTimeout(selectionDispatchTimerRef.current)
-      }
-
-      selectionDispatchTimerRef.current = setTimeout(() => {
-        dispatch(EditorActions.setCurrentSelection(null))
-      }, 150)
-    }
-  }
-}
-
-/**
- * Handle format button clicks - completely state-driven!
- */
-export function createHandleFormat(params: SelectionHandlerParams) {
-  return (
-    format: "bold" | "italic" | "underline" | "strikethrough" | "code"
-  ) => {
-    const { container, dispatch, selectionManager, nodeRefs } = params
-    console.group("🔘 [handleFormat] Button clicked")
-
-    // Get fresh selection from ref (more up-to-date than state)
-    const refSelection = selectionManager.getSelection()
-    if (!refSelection) {
-      console.warn("❌ No current selection, aborting")
-      console.groupEnd()
-      return
-    }
-
-    // Save selection for restoration
-    const { start, end, nodeId, formats } = refSelection
-
-    // Dispatch toggle format action - reducer handles everything!
-    dispatch(EditorActions.toggleFormat(format))
-
-    // After state updates, check what happened
-    setTimeout(() => {
-      const updatedNode = container.children.find((n) => n.id === nodeId)
-    }, 100)
-
-    // Restore selection after formatting
-    setTimeout(() => {
-      const element = nodeRefs.current.get(nodeId)
-      if (element) {
-        restoreSelection(element, start, end)
-      } else {
-        console.warn("❌ Element not found for selection restoration")
-      }
-      console.groupEnd()
-    }, 0)
-  }
-}
-
-/**
- * Handle color selection
- */
-export function createHandleApplyColor(
-  params: SelectionHandlerParams,
-  toast: any,
-  setSelectedColor: (color: string) => void
-) {
-  return (color: string) => {
-    const { dispatch, selectionManager, nodeRefs } = params
-    // Get fresh selection from ref
-    const refSelection = selectionManager.getSelection()
-    if (!refSelection) return
-
-    const { nodeId, start, end } = refSelection
-
-    // Apply color as inline style
-    dispatch(EditorActions.applyInlineStyle("color", color))
-
-    setSelectedColor(color)
-
-    toast({
-      title: "Color Applied",
-      description: `Applied color: ${color}`,
-    })
-
-    // Restore selection with a slightly longer delay to allow state update
-    setTimeout(() => {
-      const element = nodeRefs.current.get(nodeId)
-      if (element) {
-        restoreSelection(element, start, end)
-      }
-    }, 50)
-  }
-}
-
-/**
- * Handle font size selection
- */
-export function createHandleApplyFontSize(
-  params: SelectionHandlerParams,
-  toast: any
-) {
-  return (fontSize: string) => {
-    const { dispatch, selectionManager, nodeRefs } = params
-    // Get fresh selection from ref
-    const refSelection = selectionManager.getSelection()
-    if (!refSelection) return
-
-    const { nodeId, start, end } = refSelection
-
-    // Apply font size as inline style
-    dispatch(EditorActions.applyInlineStyle("fontSize", fontSize))
-
-    toast({
-      title: "Font Size Applied",
-      description: `Applied font size: ${fontSize}`,
-    })
-
-    // Restore selection with a slightly longer delay to allow state update
-    setTimeout(() => {
-      const element = nodeRefs.current.get(nodeId)
-      if (element) {
-        restoreSelection(element, start, end)
-      }
-    }, 50)
-  }
-}
-
-/**
- * Handle type change
- */
-export function createHandleTypeChange(
-  params: SelectionHandlerParams,
-  handleSelectionChange: () => void
-) {
-  return (type: TextNode["type"]) => {
-    const { dispatch, selectionManager, nodeRefs } = params
-
-    // Check if there's a selection (use ref for freshest data)
-    const refSelection = selectionManager.getSelection()
-    if (!refSelection) return
-
-    // Save selection info before dispatch
-    const { start, end, nodeId } = refSelection
-
-    // List types should change the entire block, not inline formatting
-    if (type === "ol" || type === "li") {
-      dispatch(EditorActions.updateNode(nodeId, { type: type }))
-
-      setTimeout(() => {
-        const element = nodeRefs.current.get(nodeId)
-        if (element) {
-          restoreSelection(element, start, end)
-          handleSelectionChange()
-        }
-      }, 0)
-      return
-    }
-
-    // Apply as inline element type to selected text (or at cursor position)
-    // Note: "code" is excluded here - use the code formatting button for inline code
-    const elementType = type as
-      | "p"
-      | "h1"
-      | "h2"
-      | "h3"
-      | "h4"
-      | "h5"
-      | "h6"
-      | "blockquote"
-
-    // Skip applying if trying to apply "code" - that should be a block-level change only
-    if (type === "code") {
-      console.warn(
-        "Code element type not supported as inline - use the code formatting button instead"
-      )
-      return
-    }
-
-    dispatch(EditorActions.applyInlineElementType(elementType))
-
-    // Restore selection after state update and trigger re-detection
-    setTimeout(() => {
-      const element = nodeRefs.current.get(nodeId)
-      if (element) {
-        restoreSelection(element, start, end)
-        // Manually trigger selection change detection to update the UI
-        handleSelectionChange()
-      }
-    }, 0)
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/hooks/use-mobile.ts b/apps/web/src/components/ui/rich-editor/hooks/use-mobile.ts
deleted file mode 100644
index 2b0fe1df..00000000
--- a/apps/web/src/components/ui/rich-editor/hooks/use-mobile.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}
diff --git a/apps/web/src/components/ui/rich-editor/hooks/use-toast.ts b/apps/web/src/components/ui/rich-editor/hooks/use-toast.ts
deleted file mode 100644
index a3349da8..00000000
--- a/apps/web/src/components/ui/rich-editor/hooks/use-toast.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { toast as sonnerToast } from "sonner"
-
-export interface ToastProps {
-  title?: string
-  description?: string
-  variant?: "default" | "destructive"
-}
-
-export function useToast() {
-  const toast = ({ title, description, variant }: ToastProps) => {
-    if (variant === "destructive") {
-      sonnerToast.error(title, {
-        description,
-      })
-    } else {
-      sonnerToast.success(title, {
-        description,
-      })
-    }
-  }
-
-  return { toast }
-}
diff --git a/apps/web/src/components/ui/rich-editor/image-block.tsx b/apps/web/src/components/ui/rich-editor/image-block.tsx
deleted file mode 100644
index 888a78ab..00000000
--- a/apps/web/src/components/ui/rich-editor/image-block.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-import { ImageIcon, Loader2, X } from "lucide-react"
-
-import { Button } from "../button"
-import { Card } from "../card"
-import { Checkbox } from "../checkbox"
-import { Skeleton } from "../skeleton"
-import { TextNode } from "./types"
-
-interface ImageBlockProps {
-  node: TextNode
-  isActive: boolean
-  onClick: () => void
-  onDelete?: () => void
-  onDragStart?: (nodeId: string) => void
-  isSelected?: boolean
-  onToggleSelection?: (nodeId: string) => void
-  onClickWithModifier?: (e: React.MouseEvent, nodeId: string) => void
-}
-
-export function ImageBlock({
-  node,
-  isActive,
-  onClick,
-  onDelete,
-  onDragStart,
-  isSelected = false,
-  onToggleSelection,
-  onClickWithModifier,
-}: ImageBlockProps) {
-  const [imageError, setImageError] = useState(false)
-
-  const handleClick = (e: React.MouseEvent) => {
-    // Check for Ctrl/Cmd click first
-    if (onClickWithModifier) {
-      onClickWithModifier(e, node.id)
-    }
-
-    // Only call regular onClick if not a modifier click
-    if (!e.ctrlKey && !e.metaKey) {
-      onClick()
-    }
-  }
-
-  const handleDragStart = (e: React.DragEvent) => {
-    e.dataTransfer.effectAllowed = "move"
-    e.dataTransfer.setData("text/plain", node.id)
-    e.dataTransfer.setData(
-      "application/json",
-      JSON.stringify({
-        nodeId: node.id,
-        type: node.type,
-        src: node.attributes?.src,
-      })
-    )
-    if (onDragStart) {
-      onDragStart(node.id)
-    }
-  }
-
-  const handleDragEnd = (e: React.DragEvent) => {}
-
-  const imageUrl = node.attributes?.src as string | undefined
-  const altText = node.attributes?.alt as string | undefined
-  const caption = node.content || ""
-  const isUploading =
-    node.attributes?.loading === "true" || node.attributes?.loading === true
-  const hasError =
-    node.attributes?.error === "true" || node.attributes?.error === true
-
-  const handleImageLoad = () => {
-    setImageError(false)
-  }
-
-  const handleImageError = () => {
-    setImageError(true)
-  }
-
-  return (
-    <Card
-      draggable
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      className={`group relative mb-4 cursor-move !border-0 p-4 transition-all duration-200 ${isActive ? "ring-primary/50 bg-accent/5 ring-2" : "hover:bg-accent/5"} ${isSelected ? "bg-blue-500/10 ring-2 ring-blue-500" : ""} `}
-      onClick={handleClick}
-    >
-      {/* Selection checkbox */}
-      {onToggleSelection && (
-        <div
-          className={`absolute top-2 left-2 z-10 transition-opacity ${
-            isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-          }`}
-          onClick={(e: React.MouseEvent) => {
-            e.stopPropagation()
-          }}
-        >
-          <Checkbox
-            checked={isSelected}
-            onCheckedChange={() => onToggleSelection(node.id)}
-            className="bg-background h-5 w-5 border-2"
-          />
-        </div>
-      )}
-
-      {/* Delete button */}
-      {onDelete && (
-        <Button
-          variant="destructive"
-          size="icon"
-          className="absolute top-2 right-2 z-10 h-8 w-8 opacity-0 transition-opacity group-hover:opacity-100"
-          onClick={(e) => {
-            e.stopPropagation()
-            onDelete()
-          }}
-        >
-          <X className="h-4 w-4" />
-        </Button>
-      )}
-
-      {/* Image container */}
-      <div className="relative w-full">
-        {/* Uploading state - show spinner overlay */}
-        {isUploading && (
-          <div className="bg-muted/50 border-primary/50 flex h-64 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed">
-            <Loader2 className="text-primary mb-3 h-12 w-12 animate-spin" />
-            <p className="text-foreground text-sm font-medium">
-              Uploading image...
-            </p>
-            <p className="text-muted-foreground mt-1 text-xs">Please wait</p>
-          </div>
-        )}
-
-        {/* Error state (from upload failure) */}
-        {!isUploading && hasError && (
-          <div className="bg-destructive/10 border-destructive/50 flex h-64 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed">
-            <X className="text-destructive mb-2 h-12 w-12" />
-            <p className="text-destructive text-sm font-medium">
-              Upload Failed
-            </p>
-            <p className="text-muted-foreground mt-1 text-xs">
-              Please try again
-            </p>
-          </div>
-        )}
-
-        {/* Normal image loading/error states */}
-        {!isUploading && !hasError && (
-          <>
-            {/* Error state */}
-            {imageError && (
-              <div className="bg-muted border-muted-foreground/25 flex h-64 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed">
-                <ImageIcon className="text-muted-foreground/50 mb-2 h-12 w-12" />
-                <p className="text-muted-foreground text-sm">
-                  Failed to load image
-                </p>
-                {imageUrl && (
-                  <p className="text-muted-foreground/70 mt-1 max-w-xs truncate text-xs">
-                    {imageUrl}
-                  </p>
-                )}
-              </div>
-            )}
-
-            {/* Actual image */}
-            {imageUrl && (
-              <img
-                src={imageUrl}
-                alt={altText || caption || "Uploaded image"}
-                className="h-auto max-h-[600px] rounded-lg object-cover"
-                style={{ width: "auto", margin: "auto" }}
-                onLoad={handleImageLoad}
-                onError={handleImageError}
-              />
-            )}
-
-            {/* Caption */}
-            {caption && (
-              <p className="text-muted-foreground mt-3 text-center text-sm italic">
-                {caption}
-              </p>
-            )}
-          </>
-        )}
-      </div>
-    </Card>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/index.ts b/apps/web/src/components/ui/rich-editor/index.ts
deleted file mode 100644
index 0f8a4e6b..00000000
--- a/apps/web/src/components/ui/rich-editor/index.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-export type {
-  NodeType,
-  NodeAttributes,
-  BaseNode,
-  TextNode,
-  ContainerNode,
-  StructuralNode,
-  EditorNode,
-  EditorState,
-  SelectionInfo,
-  InlineText,
-  BlockLine,
-  CoverImage,
-} from "./types"
-
-export {
-  isContainerNode,
-  isStructuralNode,
-  isTextNode,
-  hasInlineChildren,
-  getNodeTextContent,
-} from "./types"
-
-// ============================================================================
-// Actions
-// ============================================================================
-export type {
-  UpdateNodeAction,
-  UpdateAttributesAction,
-  UpdateContentAction,
-  DeleteNodeAction,
-  InsertNodeAction,
-  MoveNodeAction,
-  DuplicateNodeAction,
-  ReplaceContainerAction,
-  ResetAction,
-  BatchAction,
-  EditorAction,
-} from "./lib/reducer/actions"
-
-export { EditorActions } from "./lib/reducer/actions"
-
-// ============================================================================
-// Reducer
-// ============================================================================
-export { editorReducer, createInitialState } from "./lib/reducer/editor-reducer"
-
-// ============================================================================
-// Zustand Store and Hooks
-// ============================================================================
-export {
-  EditorProvider,
-  useEditorState,
-  useEditorDispatch,
-  useBlockNode,
-  useIsNodeActive,
-  useActiveNodeId,
-  useContainerChildrenIds,
-  useContainer,
-  useSelectionManager,
-  useSelection,
-} from "./store/editor-store"
-
-export type { EditorProviderProps } from "./store/editor-store"
-
-// ============================================================================
-// Utilities
-// ============================================================================
-export {
-  findNodeById,
-  findParentById,
-  updateNodeById,
-  deleteNodeById,
-  insertNode,
-  moveNode,
-  cloneNode,
-  traverseTree,
-  validateTree,
-} from "./utils/tree-operations"
-
-export type { InsertPosition } from "./utils/tree-operations"
-
-export {
-  splitTextAtSelection,
-  convertToInlineFormat,
-  applyFormatting,
-  removeFormatting,
-  mergeAdjacentTextNodes,
-  getFormattingAtPosition,
-} from "./utils/inline-formatting"
-
-export {
-  serializeToHtml,
-  serializeToHtmlFragment,
-  serializeToHtmlWithClass,
-} from "./utils/serialize-to-html"
-
-export {
-  parseMarkdownTable,
-  isMarkdownTable,
-} from "./utils/markdown-table-parser"
-
-export {
-  setupDragAutoScroll,
-  useDragAutoScroll,
-} from "./utils/drag-auto-scroll"
-
-export type { AutoScrollConfig } from "./utils/drag-auto-scroll"
-
-// ============================================================================
-// Tailwind Classes Utilities
-// ============================================================================
-export {
-  tailwindClasses,
-  popularClasses,
-  searchTailwindClasses,
-  getAllClasses,
-} from "./tailwind-classes"
-
-export type { TailwindClassGroup } from "./tailwind-classes"
-
-// ============================================================================
-// Demo Content
-// ============================================================================
-export { createDemoContent } from "./demo-content"
-export { createEmptyContent } from "./empty-content"
-
-export { Editor } from "./editor"
diff --git a/apps/web/src/components/ui/rich-editor/insert-components-data.ts b/apps/web/src/components/ui/rich-editor/insert-components-data.ts
deleted file mode 100644
index c28bdc2e..00000000
--- a/apps/web/src/components/ui/rich-editor/insert-components-data.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-export interface InsertComponent {
-  id: string
-  name: string
-  description: string
-  icon: string
-  category: "media" | "layout" | "interactive" | "decoration"
-  action: "free-image" | "video" | "table" | "custom"
-}
-
-export const INSERT_COMPONENTS: InsertComponent[] = [
-  {
-    id: "free-image",
-    name: "Free Movement Image",
-    description:
-      "Add an image that can be positioned anywhere and resized freely",
-    icon: "",
-    category: "media",
-    action: "free-image",
-  },
-  // Future components can be added here:
-  // {
-  //   id: "sticky-note",
-  //   name: "Sticky Note",
-  //   description: "Add a movable sticky note for annotations",
-  //   icon: "📝",
-  //   category: "decoration",
-  //   action: "custom",
-  // },
-  // {
-  //   id: "floating-text",
-  //   name: "Floating Text Box",
-  //   description: "Add a text box that can be positioned freely",
-  //   icon: "💬",
-  //   category: "layout",
-  //   action: "custom",
-  // },
-]
-
-export function getInsertComponentById(
-  id: string
-): InsertComponent | undefined {
-  return INSERT_COMPONENTS.find((component) => component.id === id)
-}
-
-export function getInsertComponentsByCategory(
-  category: InsertComponent["category"]
-): InsertComponent[] {
-  return INSERT_COMPONENTS.filter(
-    (component) => component.category === category
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/lib/reducer/actions.ts b/apps/web/src/components/ui/rich-editor/lib/reducer/actions.ts
deleted file mode 100644
index 3a7f3a21..00000000
--- a/apps/web/src/components/ui/rich-editor/lib/reducer/actions.ts
+++ /dev/null
@@ -1,736 +0,0 @@
-import {
-  ContainerNode,
-  CoverImage,
-  EditorNode,
-  EditorState,
-  NodeAttributes,
-  SelectionInfo,
-} from "../../types"
-import { InsertPosition } from "../../utils/tree-operations"
-
-/**
- * Updates a node's properties by ID.
- * Performs a shallow merge of the provided updates.
- *
- * @example
- * ```typescript
- * dispatch({
- *   type: 'UPDATE_NODE',
- *   payload: {
- *     id: 'p-1',
- *     updates: {
- *       content: 'New content',
- *       attributes: { className: 'text-blue-500' }
- *     }
- *   }
- * });
- * ```
- */
-export interface UpdateNodeAction {
-  type: "UPDATE_NODE"
-  payload: {
-    id: string
-    updates: Partial<EditorNode>
-  }
-}
-
-/**
- * Updates only the attributes of a node.
- * More convenient than UPDATE_NODE when only changing attributes.
- *
- * @example
- * ```typescript
- * dispatch({
- *   type: 'UPDATE_ATTRIBUTES',
- *   payload: {
- *     id: 'img-1',
- *     attributes: { src: 'new-image.jpg', alt: 'Updated image' }
- *   }
- * });
- * ```
- */
-export interface UpdateAttributesAction {
-  type: "UPDATE_ATTRIBUTES"
-  payload: {
-    id: string
-    attributes: NodeAttributes
-    merge?: boolean // If true, merges with existing attributes; if false, replaces them
-  }
-}
-
-/**
- * Updates the text content of a node.
- *
- * @example
- * ```typescript
- * dispatch({
- *   type: 'UPDATE_CONTENT',
- *   payload: {
- *     id: 'p-1',
- *     content: 'Updated paragraph text'
- *   }
- * });
- * ```
- */
-export interface UpdateContentAction {
-  type: "UPDATE_CONTENT"
-  payload: {
-    id: string
-    content: string
-  }
-}
-
-/**
- * Deletes a node by ID.
- *
- * @example
- * ```typescript
- * dispatch({
- *   type: 'DELETE_NODE',
- *   payload: { id: 'p-2' }
- * });
- * ```
- */
-export interface DeleteNodeAction {
-  type: "DELETE_NODE"
-  payload: {
-    id: string
-  }
-}
-
-/**
- * Inserts a new node relative to a target node.
- *
- * @example
- * ```typescript
- * dispatch({
- *   type: 'INSERT_NODE',
- *   payload: {
- *     node: { id: 'p-new', type: 'p', content: 'New paragraph' },
- *     targetId: 'p-1',
- *     position: 'after'
- *   }
- * });
- * ```
- */
-export interface InsertNodeAction {
-  type: "INSERT_NODE"
-  payload: {
-    node: EditorNode
-    targetId: string
-    position: InsertPosition
-  }
-}
-
-/**
- * Moves a node to a new position in the tree.
- *
- * @example
- * ```typescript
- * dispatch({
- *   type: 'MOVE_NODE',
- *   payload: {
- *     nodeId: 'p-3',
- *     targetId: 'p-1',
- *     position: 'before'
- *   }
- * });
- * ```
- */
-export interface MoveNodeAction {
-  type: "MOVE_NODE"
-  payload: {
-    nodeId: string
-    targetId: string
-    position: InsertPosition
-  }
-}
-
-/**
- * Swaps the positions of two nodes in the tree.
- *
- * @example
- * ```typescript
- * dispatch({
- *   type: 'SWAP_NODES',
- *   payload: {
- *     nodeId1: 'p-1',
- *     nodeId2: 'p-3'
- *   }
- * });
- * ```
- */
-export interface SwapNodesAction {
-  type: "SWAP_NODES"
-  payload: {
-    nodeId1: string
-    nodeId2: string
-  }
-}
-
-/**
- * Duplicates a node and inserts it after the original.
- *
- * @example
- * ```typescript
- * dispatch({
- *   type: 'DUPLICATE_NODE',
- *   payload: {
- *     id: 'p-1',
- *     newId: 'p-1-copy' // Optional
- *   }
- * });
- * ```
- */
-export interface DuplicateNodeAction {
-  type: "DUPLICATE_NODE"
-  payload: {
-    id: string
-    newId?: string
-  }
-}
-
-/**
- * Replaces the entire container with a new one.
- * Useful for loading saved documents or resetting the editor.
- *
- * @example
- * ```typescript
- * dispatch({
- *   type: 'REPLACE_CONTAINER',
- *   payload: { container: loadedDocument }
- * });
- * ```
- */
-export interface ReplaceContainerAction {
-  type: "REPLACE_CONTAINER"
-  payload: {
-    container: ContainerNode
-  }
-}
-
-/**
- * Resets the editor to its initial state.
- *
- * @example
- * ```typescript
- * dispatch({ type: 'RESET' });
- * ```
- */
-export interface ResetAction {
-  type: "RESET"
-}
-
-/**
- * Sets the entire editor state at once.
- * Useful for loading saved documents or replacing the entire state.
- *
- * @example
- * ```typescript
- * dispatch({
- *   type: 'SET_STATE',
- *   payload: { state: loadedState }
- * });
- * ```
- */
-export interface SetStateAction {
-  type: "SET_STATE"
-  payload: {
-    state: EditorState
-  }
-}
-
-/**
- * Batch multiple actions into a single update.
- * Useful for performance when making multiple changes at once.
- *
- * @example
- * ```typescript
- * dispatch({
- *   type: 'BATCH',
- *   payload: {
- *     actions: [
- *       { type: 'UPDATE_CONTENT', payload: { id: 'p-1', content: 'A' } },
- *       { type: 'UPDATE_CONTENT', payload: { id: 'p-2', content: 'B' } },
- *     ]
- *   }
- * });
- * ```
- */
-export interface BatchAction {
-  type: "BATCH"
-  payload: {
-    actions: EditorAction[]
-  }
-}
-
-/**
- * SET_ACTIVE_NODE action - sets the currently active/focused node
- */
-export interface SetActiveNodeAction {
-  type: "SET_ACTIVE_NODE"
-  payload: {
-    nodeId: string | null
-  }
-}
-
-/**
- * SET_SELECTION action - updates selection state
- */
-export interface SetSelectionAction {
-  type: "SET_SELECTION"
-  payload: {
-    hasSelection: boolean
-  }
-}
-
-/**
- * INCREMENT_SELECTION_KEY action - triggers re-render for selection changes
- */
-export interface IncrementSelectionKeyAction {
-  type: "INCREMENT_SELECTION_KEY"
-}
-
-/**
- * SET_CURRENT_SELECTION action - updates the current selection info with formatting states
- */
-export interface SetCurrentSelectionAction {
-  type: "SET_CURRENT_SELECTION"
-  payload: {
-    selection: SelectionInfo | null
-  }
-}
-
-/**
- * TOGGLE_FORMAT action - toggles a format style on the current selection
- */
-export interface ToggleFormatAction {
-  type: "TOGGLE_FORMAT"
-  payload: {
-    format: "bold" | "italic" | "underline" | "strikethrough" | "code"
-  }
-}
-
-/**
- * APPLY_INLINE_ELEMENT_TYPE action - applies element type to selected text inline
- * Note: 'code' is excluded - use toggleFormat('code') for inline code formatting
- */
-export interface ApplyInlineElementTypeAction {
-  type: "APPLY_INLINE_ELEMENT_TYPE"
-  payload: {
-    elementType:
-      | "p"
-      | "h1"
-      | "h2"
-      | "h3"
-      | "h4"
-      | "h5"
-      | "h6"
-      | "li"
-      | "blockquote"
-  }
-}
-
-/**
- * APPLY_CUSTOM_CLASS action - applies custom Tailwind class to selected text
- */
-export interface ApplyCustomClassAction {
-  type: "APPLY_CUSTOM_CLASS"
-  payload: {
-    className: string
-  }
-}
-
-/**
- * APPLY_INLINE_STYLE action - applies inline CSS style to selected text
- */
-export interface ApplyInlineStyleAction {
-  type: "APPLY_INLINE_STYLE"
-  payload: {
-    property: string // e.g., 'fontSize', 'color'
-    value: string // e.g., '24px', '#ff0000'
-  }
-}
-
-/**
- * APPLY_LINK action - applies link href to selected text
- */
-export interface ApplyLinkAction {
-  type: "APPLY_LINK"
-  payload: {
-    href: string
-  }
-}
-
-/**
- * REMOVE_LINK action - removes link from selected text
- */
-export interface RemoveLinkAction {
-  type: "REMOVE_LINK"
-}
-
-/**
- * SELECT_ALL_BLOCKS action - marks all blocks as selected
- */
-export interface SelectAllBlocksAction {
-  type: "SELECT_ALL_BLOCKS"
-}
-
-/**
- * CLEAR_BLOCK_SELECTION action - clears all block selections
- */
-export interface ClearBlockSelectionAction {
-  type: "CLEAR_BLOCK_SELECTION"
-}
-
-/**
- * DELETE_SELECTED_BLOCKS action - deletes all selected blocks
- */
-export interface DeleteSelectedBlocksAction {
-  type: "DELETE_SELECTED_BLOCKS"
-}
-
-/**
- * UNDO action - moves back one step in history
- */
-export interface UndoAction {
-  type: "UNDO"
-}
-
-/**
- * REDO action - moves forward one step in history
- */
-export interface RedoAction {
-  type: "REDO"
-}
-
-/**
- * SET_COVER_IMAGE action - sets or updates the cover image
- */
-export interface SetCoverImageAction {
-  type: "SET_COVER_IMAGE"
-  payload: {
-    coverImage: CoverImage
-  }
-}
-
-/**
- * REMOVE_COVER_IMAGE action - removes the cover image
- */
-export interface RemoveCoverImageAction {
-  type: "REMOVE_COVER_IMAGE"
-}
-
-/**
- * UPDATE_COVER_IMAGE_POSITION action - updates the vertical position of the cover image
- */
-export interface UpdateCoverImagePositionAction {
-  type: "UPDATE_COVER_IMAGE_POSITION"
-  payload: {
-    position: number
-  }
-}
-
-/**
- * Union type of all possible editor actions.
- */
-export type EditorAction =
-  | UpdateNodeAction
-  | UpdateAttributesAction
-  | UpdateContentAction
-  | DeleteNodeAction
-  | InsertNodeAction
-  | MoveNodeAction
-  | SwapNodesAction
-  | DuplicateNodeAction
-  | ReplaceContainerAction
-  | ResetAction
-  | SetStateAction
-  | BatchAction
-  | SetActiveNodeAction
-  | SetSelectionAction
-  | IncrementSelectionKeyAction
-  | SetCurrentSelectionAction
-  | ToggleFormatAction
-  | ApplyInlineElementTypeAction
-  | ApplyCustomClassAction
-  | ApplyInlineStyleAction
-  | ApplyLinkAction
-  | RemoveLinkAction
-  | SelectAllBlocksAction
-  | ClearBlockSelectionAction
-  | DeleteSelectedBlocksAction
-  | UndoAction
-  | RedoAction
-  | SetCoverImageAction
-  | RemoveCoverImageAction
-  | UpdateCoverImagePositionAction
-
-/**
- * Action creator helpers for type-safe action creation.
- */
-export const EditorActions = {
-  /**
-   * Creates an UPDATE_NODE action.
-   */
-  updateNode: (id: string, updates: Partial<EditorNode>): UpdateNodeAction => ({
-    type: "UPDATE_NODE",
-    payload: { id, updates },
-  }),
-
-  /**
-   * Creates an UPDATE_ATTRIBUTES action.
-   */
-  updateAttributes: (
-    id: string,
-    attributes: NodeAttributes,
-    merge = true
-  ): UpdateAttributesAction => ({
-    type: "UPDATE_ATTRIBUTES",
-    payload: { id, attributes, merge },
-  }),
-
-  /**
-   * Creates an UPDATE_CONTENT action.
-   */
-  updateContent: (id: string, content: string): UpdateContentAction => ({
-    type: "UPDATE_CONTENT",
-    payload: { id, content },
-  }),
-
-  /**
-   * Creates a DELETE_NODE action.
-   */
-  deleteNode: (id: string): DeleteNodeAction => ({
-    type: "DELETE_NODE",
-    payload: { id },
-  }),
-
-  /**
-   * Creates an INSERT_NODE action.
-   */
-  insertNode: (
-    node: EditorNode,
-    targetId: string,
-    position: InsertPosition
-  ): InsertNodeAction => ({
-    type: "INSERT_NODE",
-    payload: { node, targetId, position },
-  }),
-
-  /**
-   * Creates a MOVE_NODE action.
-   */
-  moveNode: (
-    nodeId: string,
-    targetId: string,
-    position: InsertPosition
-  ): MoveNodeAction => ({
-    type: "MOVE_NODE",
-    payload: { nodeId, targetId, position },
-  }),
-
-  /**
-   * Creates a SWAP_NODES action.
-   */
-  swapNodes: (nodeId1: string, nodeId2: string): SwapNodesAction => ({
-    type: "SWAP_NODES",
-    payload: { nodeId1, nodeId2 },
-  }),
-
-  /**
-   * Creates a DUPLICATE_NODE action.
-   */
-  duplicateNode: (id: string, newId?: string): DuplicateNodeAction => ({
-    type: "DUPLICATE_NODE",
-    payload: { id, newId },
-  }),
-
-  /**
-   * Creates a REPLACE_CONTAINER action.
-   */
-  replaceContainer: (container: ContainerNode): ReplaceContainerAction => ({
-    type: "REPLACE_CONTAINER",
-    payload: { container },
-  }),
-
-  /**
-   * Creates a RESET action.
-   */
-  reset: (): ResetAction => ({
-    type: "RESET",
-  }),
-
-  /**
-   * Creates a SET_STATE action.
-   */
-  setState: (state: EditorState): SetStateAction => ({
-    type: "SET_STATE",
-    payload: { state },
-  }),
-
-  /**
-   * Creates a BATCH action.
-   */
-  batch: (actions: EditorAction[]): BatchAction => ({
-    type: "BATCH",
-    payload: { actions },
-  }),
-
-  /**
-   * Creates a SET_ACTIVE_NODE action.
-   */
-  setActiveNode: (nodeId: string | null): SetActiveNodeAction => ({
-    type: "SET_ACTIVE_NODE",
-    payload: { nodeId },
-  }),
-
-  /**
-   * Creates a SET_SELECTION action.
-   */
-  setSelection: (hasSelection: boolean): SetSelectionAction => ({
-    type: "SET_SELECTION",
-    payload: { hasSelection },
-  }),
-
-  /**
-   * Creates an INCREMENT_SELECTION_KEY action.
-   */
-  incrementSelectionKey: (): IncrementSelectionKeyAction => ({
-    type: "INCREMENT_SELECTION_KEY",
-  }),
-
-  /**
-   * Creates a SET_CURRENT_SELECTION action.
-   */
-  setCurrentSelection: (
-    selection: SelectionInfo | null
-  ): SetCurrentSelectionAction => ({
-    type: "SET_CURRENT_SELECTION",
-    payload: { selection },
-  }),
-
-  /**
-   * Creates a TOGGLE_FORMAT action.
-   */
-  toggleFormat: (
-    format: "bold" | "italic" | "underline" | "strikethrough" | "code"
-  ): ToggleFormatAction => ({
-    type: "TOGGLE_FORMAT",
-    payload: { format },
-  }),
-
-  /**
-   * Creates an APPLY_INLINE_ELEMENT_TYPE action.
-   * Note: 'code' is excluded - use toggleFormat('code') for inline code formatting
-   */
-  applyInlineElementType: (
-    elementType:
-      | "p"
-      | "h1"
-      | "h2"
-      | "h3"
-      | "h4"
-      | "h5"
-      | "h6"
-      | "li"
-      | "blockquote"
-  ): ApplyInlineElementTypeAction => ({
-    type: "APPLY_INLINE_ELEMENT_TYPE",
-    payload: { elementType },
-  }),
-
-  /**
-   * Creates an APPLY_CUSTOM_CLASS action.
-   */
-  applyCustomClass: (className: string): ApplyCustomClassAction => ({
-    type: "APPLY_CUSTOM_CLASS",
-    payload: { className },
-  }),
-
-  /**
-   * Creates an APPLY_INLINE_STYLE action.
-   */
-  applyInlineStyle: (
-    property: string,
-    value: string
-  ): ApplyInlineStyleAction => ({
-    type: "APPLY_INLINE_STYLE",
-    payload: { property, value },
-  }),
-
-  /**
-   * Creates an APPLY_LINK action.
-   */
-  applyLink: (href: string): ApplyLinkAction => ({
-    type: "APPLY_LINK",
-    payload: { href },
-  }),
-
-  /**
-   * Creates a REMOVE_LINK action.
-   */
-  removeLink: (): RemoveLinkAction => ({
-    type: "REMOVE_LINK",
-  }),
-
-  /**
-   * Creates a SELECT_ALL_BLOCKS action.
-   */
-  selectAllBlocks: (): SelectAllBlocksAction => ({
-    type: "SELECT_ALL_BLOCKS",
-  }),
-
-  /**
-   * Creates a CLEAR_BLOCK_SELECTION action.
-   */
-  clearBlockSelection: (): ClearBlockSelectionAction => ({
-    type: "CLEAR_BLOCK_SELECTION",
-  }),
-
-  /**
-   * Creates a DELETE_SELECTED_BLOCKS action.
-   */
-  deleteSelectedBlocks: (): DeleteSelectedBlocksAction => ({
-    type: "DELETE_SELECTED_BLOCKS",
-  }),
-
-  /**
-   * Creates an UNDO action.
-   */
-  undo: (): UndoAction => ({
-    type: "UNDO",
-  }),
-
-  /**
-   * Creates a REDO action.
-   */
-  redo: (): RedoAction => ({
-    type: "REDO",
-  }),
-
-  /**
-   * Creates a SET_COVER_IMAGE action.
-   */
-  setCoverImage: (coverImage: CoverImage): SetCoverImageAction => ({
-    type: "SET_COVER_IMAGE",
-    payload: { coverImage },
-  }),
-
-  /**
-   * Creates a REMOVE_COVER_IMAGE action.
-   */
-  removeCoverImage: (): RemoveCoverImageAction => ({
-    type: "REMOVE_COVER_IMAGE",
-  }),
-
-  /**
-   * Creates an UPDATE_COVER_IMAGE_POSITION action.
-   */
-  updateCoverImagePosition: (
-    position: number
-  ): UpdateCoverImagePositionAction => ({
-    type: "UPDATE_COVER_IMAGE_POSITION",
-    payload: { position },
-  }),
-}
diff --git a/apps/web/src/components/ui/rich-editor/lib/reducer/editor-reducer.ts b/apps/web/src/components/ui/rich-editor/lib/reducer/editor-reducer.ts
deleted file mode 100644
index d3e5a130..00000000
--- a/apps/web/src/components/ui/rich-editor/lib/reducer/editor-reducer.ts
+++ /dev/null
@@ -1,1241 +0,0 @@
-import {
-  ContainerNode,
-  EditorState,
-  hasInlineChildren,
-  isTextNode,
-  TextNode,
-} from "../../types"
-import {
-  cloneNode,
-  deleteNodeById,
-  findNodeById,
-  insertNode,
-  moveNode,
-  updateNodeById,
-} from "../../utils/tree-operations"
-import { EditorAction } from "./actions"
-
-/**
- * Maximum number of history states to keep
- */
-const MAX_HISTORY_SIZE = 100
-
-/**
- * NOTE: We removed the deepCloneContainer function that was here before.
- *
- * Deep cloning was destroying structural sharing! The tree operations
- * (updateNodeById, deleteNodeById, etc.) already return new immutable trees
- * with structural sharing - unchanged nodes keep their original references.
- *
- * Deep cloning would create new references for ALL nodes, causing ALL React
- * components to re-render even when their data didn't change. By removing it,
- * only components whose nodes actually changed will re-render.
- */
-
-/**
- * Add a new container state to history
- * This truncates any "future" history if we're not at the end
- *
- * TEMPORARY: History disabled - directly update current state without tracking
- */
-function addToHistory(
-  state: EditorState,
-  newContainer: ContainerNode
-): EditorState {
-  // HISTORY DISABLED: Update current position instead of adding to history
-  const newHistory = [...state.history]
-  newHistory[state.historyIndex] = newContainer
-
-  return {
-    ...state,
-    history: newHistory,
-  }
-
-  /* ORIGINAL CODE - RE-ENABLE TO RESTORE HISTORY:
-  // No need to clone - the container is already immutable from tree operations
-
-  // Get current history up to the current index
-  const newHistory = state.history.slice(0, state.historyIndex + 1);
-
-  // Add the new state (already immutable with structural sharing)
-  newHistory.push(newContainer);
-
-  // Limit history size
-  if (newHistory.length > MAX_HISTORY_SIZE) {
-    newHistory.shift(); // Remove oldest entry
-    return {
-      ...state,
-      history: newHistory,
-      historyIndex: newHistory.length - 1,
-    };
-  }
-
-  return {
-    ...state,
-    history: newHistory,
-    historyIndex: newHistory.length - 1,
-  };
-  */
-}
-
-/**
- * The main reducer function for the editor.
- * Handles all state transformations immutably.
- *
- * @param state - Current editor state
- * @param action - Action to apply
- * @returns New state after applying the action
- *
- * @example
- * ```typescript
- * const newState = editorReducer(currentState, {
- *   type: 'UPDATE_CONTENT',
- *   payload: { id: 'p-1', content: 'New text' }
- * });
- * ```
- */
-export function editorReducer(
-  state: EditorState,
-  action: EditorAction
-): EditorState {
-  switch (action.type) {
-    case "UPDATE_NODE": {
-      const { id, updates } = action.payload
-      const currentContainer = state.history[state.historyIndex]
-      const newContainer = updateNodeById(
-        currentContainer,
-        id,
-        () => updates
-      ) as ContainerNode
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "UPDATE_ATTRIBUTES": {
-      const { id, attributes, merge = true } = action.payload
-      const currentContainer = state.history[state.historyIndex]
-      const newContainer = updateNodeById(currentContainer, id, (node) => ({
-        attributes: merge ? { ...node.attributes, ...attributes } : attributes,
-      })) as ContainerNode
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "UPDATE_CONTENT": {
-      const { id, content } = action.payload
-      const currentContainer = state.history[state.historyIndex]
-      const newContainer = updateNodeById(currentContainer, id, (node) => {
-        if (isTextNode(node)) {
-          return { content }
-        }
-        console.warn(`Cannot update content of container node ${id}`)
-        return {}
-      }) as ContainerNode
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "DELETE_NODE": {
-      const { id } = action.payload
-      const currentContainer = state.history[state.historyIndex]
-
-      // Check if this is the only h1 header block in the root container
-      const isH1Block = currentContainer.children.find((child) => {
-        if (isTextNode(child)) {
-          const textChild = child as TextNode
-          return textChild.id === id && textChild.type === "h1"
-        }
-        return false
-      })
-
-      // If it's an h1 and it's the only child, don't delete - just clear content
-      if (isH1Block && currentContainer.children.length === 1) {
-        console.warn(
-          "Cannot delete the last h1 header block. Clearing content instead."
-        )
-        const newContainer = updateNodeById(currentContainer, id, () => ({
-          content: "",
-          children: undefined,
-        })) as ContainerNode
-
-        return addToHistory(
-          {
-            ...state,
-            metadata: {
-              ...state.metadata,
-              updatedAt: new Date().toISOString(),
-            },
-          },
-          newContainer
-        )
-      }
-
-      const result = deleteNodeById(currentContainer, id)
-
-      // If the root container was deleted, prevent it
-      if (result === null) {
-        console.warn("Cannot delete the root container")
-        return state
-      }
-
-      // If after deletion there are no children left, create a default h1 header
-      const resultContainer = result as ContainerNode
-      if (resultContainer.children.length === 0) {
-        const timestamp = Date.now()
-        const defaultNode: TextNode = {
-          id: `h1-${timestamp}`,
-          type: "h1",
-          content: "",
-          attributes: {
-            placeholder: "New page",
-          },
-        }
-        resultContainer.children = [defaultNode]
-
-        return addToHistory(
-          {
-            ...state,
-            activeNodeId: defaultNode.id,
-            metadata: {
-              ...state.metadata,
-              updatedAt: new Date().toISOString(),
-            },
-          },
-          resultContainer
-        )
-      }
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        resultContainer
-      )
-    }
-
-    case "INSERT_NODE": {
-      const { node, targetId, position } = action.payload
-      const currentContainer = state.history[state.historyIndex]
-      const newContainer = insertNode(
-        currentContainer,
-        targetId,
-        node,
-        position
-      ) as ContainerNode
-
-      // Automatically set the newly inserted node as active for better UX
-      // This ensures the node is focused immediately after insertion
-      return addToHistory(
-        {
-          ...state,
-          activeNodeId: node.id,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "MOVE_NODE": {
-      const { nodeId, targetId, position } = action.payload
-      const currentContainer = state.history[state.historyIndex]
-      const newContainer = moveNode(
-        currentContainer,
-        nodeId,
-        targetId,
-        position
-      ) as ContainerNode
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "SWAP_NODES": {
-      const { nodeId1, nodeId2 } = action.payload
-      const currentContainer = state.history[state.historyIndex]
-
-      // Find indices of both nodes
-      const index1 = currentContainer.children.findIndex(
-        (n) => n.id === nodeId1
-      )
-      const index2 = currentContainer.children.findIndex(
-        (n) => n.id === nodeId2
-      )
-
-      // If either node not found, return current state
-      if (index1 === -1 || index2 === -1) {
-        return state
-      }
-
-      // Clone container and swap positions
-      const newChildren = [...currentContainer.children]
-      ;[newChildren[index1], newChildren[index2]] = [
-        newChildren[index2],
-        newChildren[index1],
-      ]
-
-      const newContainer: ContainerNode = {
-        ...currentContainer,
-        children: newChildren,
-      }
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "DUPLICATE_NODE": {
-      const { id, newId } = action.payload
-      const currentContainer = state.history[state.historyIndex]
-
-      // Clone the node with a new ID
-      const nodeToClone = updateNodeById(currentContainer, id, (node) => node)
-      const clonedNode = cloneNode(nodeToClone, newId)
-
-      // Insert the cloned node after the original
-      const newContainer = insertNode(
-        currentContainer,
-        id,
-        clonedNode,
-        "after"
-      ) as ContainerNode
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "REPLACE_CONTAINER": {
-      const { container } = action.payload
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        container
-      )
-    }
-
-    case "RESET": {
-      return createInitialState()
-    }
-
-    case "SET_STATE": {
-      const { state: newState } = action.payload
-      return newState
-    }
-
-    case "BATCH": {
-      const { actions } = action.payload
-
-      // Apply all actions sequentially
-      return actions.reduce(
-        (currentState, batchAction) => editorReducer(currentState, batchAction),
-        state
-      )
-    }
-
-    case "SET_ACTIVE_NODE": {
-      const { nodeId } = action.payload
-      return {
-        ...state,
-        activeNodeId: nodeId,
-      }
-    }
-
-    case "SET_SELECTION": {
-      const { hasSelection } = action.payload
-      return {
-        ...state,
-        hasSelection,
-      }
-    }
-
-    case "INCREMENT_SELECTION_KEY": {
-      return {
-        ...state,
-        selectionKey: state.selectionKey + 1,
-      }
-    }
-
-    case "SET_CURRENT_SELECTION": {
-      const { selection } = action.payload
-
-      return {
-        ...state,
-        currentSelection: selection,
-        hasSelection: selection !== null,
-      }
-    }
-
-    case "APPLY_INLINE_ELEMENT_TYPE": {
-      const { elementType } = action.payload
-
-      console.group("🎨 [APPLY_INLINE_ELEMENT_TYPE] Reducer executing")
-
-      if (!state.currentSelection) {
-        console.warn("❌ Cannot apply element type without active selection")
-        console.groupEnd()
-        return state
-      }
-
-      const { nodeId, start, end } = state.currentSelection
-
-      const currentContainer = state.history[state.historyIndex]
-      const node = findNodeById(currentContainer, nodeId) as
-        | TextNode
-        | undefined
-
-      if (!node || !isTextNode(node)) {
-        console.warn("❌ Node not found or not a text node")
-        console.groupEnd()
-        return state
-      }
-
-      // Convert node to inline children if it's still plain content
-      const children = hasInlineChildren(node)
-        ? node.children!
-        : [{ content: node.content || "" }]
-
-      // Build new children array by splitting segments that overlap with selection
-      const newChildren: typeof node.children = []
-      let currentPos = 0
-
-      for (const child of children) {
-        const childLength = (child.content || "").length
-        const childStart = currentPos
-        const childEnd = currentPos + childLength
-
-        // Check overlap with selection [start, end)
-        if (childEnd <= start || childStart >= end) {
-          // No overlap - keep as is
-          newChildren.push({ ...child })
-        } else {
-          // There's overlap - need to split this child
-          const overlapStart = Math.max(childStart, start)
-          const overlapEnd = Math.min(childEnd, end)
-
-          // Before overlap (within this child)
-          if (childStart < overlapStart) {
-            newChildren.push({
-              ...child,
-              content: child.content!.substring(0, overlapStart - childStart),
-            })
-          }
-
-          // Overlapping part - apply the element type
-          newChildren.push({
-            ...child,
-            content: child.content!.substring(
-              overlapStart - childStart,
-              overlapEnd - childStart
-            ),
-            elementType: elementType,
-          })
-
-          // After overlap (within this child)
-          if (childEnd > overlapEnd) {
-            newChildren.push({
-              ...child,
-              content: child.content!.substring(overlapEnd - childStart),
-            })
-          }
-        }
-
-        currentPos = childEnd
-      }
-
-      // Update the node in the tree
-      const newContainer = updateNodeById(currentContainer, nodeId, () => ({
-        content: undefined, // Clear simple content
-        children: newChildren, // Set inline children
-      })) as ContainerNode
-
-      console.groupEnd()
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "TOGGLE_FORMAT": {
-      const { format } = action.payload
-
-      if (!state.currentSelection) {
-        console.warn("❌ Cannot toggle format without active selection")
-        console.groupEnd()
-        return state
-      }
-
-      const { nodeId, start, end, formats } = state.currentSelection
-
-      const currentContainer = state.history[state.historyIndex]
-      const node = findNodeById(currentContainer, nodeId) as
-        | TextNode
-        | undefined
-
-      if (!node || !isTextNode(node)) {
-        console.warn("❌ Node not found or not a text node")
-        console.groupEnd()
-        return state
-      }
-
-      const isActive = formats[format]
-
-      // Convert node to inline children if it's still plain content
-      const children = hasInlineChildren(node)
-        ? node.children!
-        : [{ content: node.content || "" }]
-
-      // Build new children array by splitting segments that overlap with selection
-      const newChildren: typeof node.children = []
-      let currentPos = 0
-
-      for (const child of children) {
-        const childLength = (child.content || "").length
-        const childStart = currentPos
-        const childEnd = currentPos + childLength
-
-        // Check overlap with selection [start, end)
-        if (childEnd <= start || childStart >= end) {
-          // No overlap - keep as is
-          newChildren.push({ ...child })
-        } else {
-          // There's overlap - need to split this child
-          const overlapStart = Math.max(childStart, start)
-          const overlapEnd = Math.min(childEnd, end)
-
-          // Before overlap (within this child)
-          if (childStart < overlapStart) {
-            newChildren.push({
-              ...child,
-              content: child.content!.substring(0, overlapStart - childStart),
-            })
-          }
-
-          // Overlapping part - toggle the format
-          newChildren.push({
-            ...child,
-            content: child.content!.substring(
-              overlapStart - childStart,
-              overlapEnd - childStart
-            ),
-            bold: format === "bold" ? !isActive : child.bold,
-            italic: format === "italic" ? !isActive : child.italic,
-            underline: format === "underline" ? !isActive : child.underline,
-            strikethrough:
-              format === "strikethrough" ? !isActive : child.strikethrough,
-            code: format === "code" ? !isActive : child.code,
-          })
-
-          // After overlap (within this child)
-          if (childEnd > overlapEnd) {
-            newChildren.push({
-              ...child,
-              content: child.content!.substring(overlapEnd - childStart),
-            })
-          }
-        }
-
-        currentPos = childEnd
-      }
-
-      // Ensure there's always a text node at the end to allow cursor escape
-      const lastChild = newChildren[newChildren.length - 1]
-      const hasFormatting =
-        lastChild &&
-        (lastChild.bold ||
-          lastChild.italic ||
-          lastChild.underline ||
-          lastChild.strikethrough ||
-          lastChild.code ||
-          lastChild.elementType)
-
-      if (hasFormatting) {
-        // Add non-breaking space for cursor positioning (regular space gets collapsed by browser)
-        newChildren.push({ content: "\u00A0" })
-      }
-
-      // Update the node in the tree
-      const newContainer = updateNodeById(currentContainer, nodeId, () => ({
-        content: undefined, // Clear simple content
-        children: newChildren, // Set inline children
-      })) as ContainerNode
-
-      // Update the selection's format state
-      const newSelection = {
-        ...state.currentSelection,
-        formats: {
-          ...state.currentSelection.formats,
-          [format]: !isActive,
-        },
-      }
-
-      console.groupEnd()
-
-      return addToHistory(
-        {
-          ...state,
-          currentSelection: newSelection,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "APPLY_CUSTOM_CLASS": {
-      const { className } = action.payload
-
-      console.group("🎨 [APPLY_CUSTOM_CLASS] Reducer executing")
-
-      if (!state.currentSelection) {
-        console.warn("❌ Cannot apply custom class without active selection")
-        console.groupEnd()
-        return state
-      }
-
-      const { nodeId, start, end } = state.currentSelection
-
-      const currentContainer = state.history[state.historyIndex]
-      const node = findNodeById(currentContainer, nodeId) as
-        | TextNode
-        | undefined
-
-      if (!node || !isTextNode(node)) {
-        console.warn("❌ Node not found or not a text node")
-        console.groupEnd()
-        return state
-      }
-
-      // Convert node to inline children if it's still plain content
-      const children = hasInlineChildren(node)
-        ? node.children!
-        : [{ content: node.content || "" }]
-
-      // Build new children array by splitting segments that overlap with selection
-      const newChildren: typeof node.children = []
-      let currentPos = 0
-
-      for (const child of children) {
-        const childLength = (child.content || "").length
-        const childStart = currentPos
-        const childEnd = currentPos + childLength
-
-        // Check overlap with selection [start, end)
-        if (childEnd <= start || childStart >= end) {
-          // No overlap - keep as is
-          newChildren.push({ ...child })
-        } else {
-          // There's overlap - need to split this child
-          const overlapStart = Math.max(childStart, start)
-          const overlapEnd = Math.min(childEnd, end)
-
-          // Before overlap (within this child)
-          if (childStart < overlapStart) {
-            newChildren.push({
-              ...child,
-              content: child.content!.substring(0, overlapStart - childStart),
-            })
-          }
-
-          // Overlapping part - merge className (just combine classes now, no styles)
-          const existingClasses = (child.className || "")
-            .split(" ")
-            .filter(Boolean)
-          const newClasses = className.split(" ").filter(Boolean)
-          const mergedClasses = [
-            ...new Set([...existingClasses, ...newClasses]),
-          ]
-          const mergedClassName = mergedClasses.join(" ").trim()
-
-          newChildren.push({
-            ...child,
-            content: child.content!.substring(
-              overlapStart - childStart,
-              overlapEnd - childStart
-            ),
-            className: mergedClassName || undefined,
-          })
-
-          // After overlap (within this child)
-          if (childEnd > overlapEnd) {
-            newChildren.push({
-              ...child,
-              content: child.content!.substring(overlapEnd - childStart),
-            })
-          }
-        }
-
-        currentPos = childEnd
-      }
-
-      // Update the node in the tree
-      const newContainer = updateNodeById(currentContainer, nodeId, () => ({
-        content: undefined, // Clear simple content
-        children: newChildren, // Set inline children
-      })) as ContainerNode
-
-      console.groupEnd()
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "APPLY_INLINE_STYLE": {
-      const { property, value } = action.payload
-
-      console.group(`🎨 [APPLY_INLINE_STYLE] Applying ${property}: ${value}`)
-
-      if (!state.currentSelection) {
-        console.warn("❌ Cannot apply inline style without active selection")
-        console.groupEnd()
-        return state
-      }
-
-      const { nodeId, start, end } = state.currentSelection
-
-      const currentContainer = state.history[state.historyIndex]
-      const node = findNodeById(currentContainer, nodeId) as
-        | TextNode
-        | undefined
-
-      if (!node || !isTextNode(node)) {
-        console.warn("❌ Node not found or not a text node")
-        console.groupEnd()
-        return state
-      }
-
-      // Convert node to inline children if it's still plain content
-      const children = hasInlineChildren(node)
-        ? node.children!
-        : [{ content: node.content || "" }]
-
-      // Build new children array by splitting segments that overlap with selection
-      const newChildren: typeof node.children = []
-      let currentPos = 0
-
-      for (const child of children) {
-        const childLength = (child.content || "").length
-        const childStart = currentPos
-        const childEnd = currentPos + childLength
-
-        // Check overlap with selection [start, end)
-        if (childEnd <= start || childStart >= end) {
-          // No overlap - keep as is
-          newChildren.push({ ...child })
-        } else {
-          // There's overlap - need to split this child
-          const overlapStart = Math.max(childStart, start)
-          const overlapEnd = Math.min(childEnd, end)
-
-          // Before overlap (within this child)
-          if (childStart < overlapStart) {
-            newChildren.push({
-              ...child,
-              content: child.content!.substring(0, overlapStart - childStart),
-            })
-          }
-
-          // Overlapping part - merge inline styles
-          const mergedStyles = {
-            ...child.styles,
-            [property]: value,
-          }
-
-          newChildren.push({
-            ...child,
-            content: child.content!.substring(
-              overlapStart - childStart,
-              overlapEnd - childStart
-            ),
-            styles: mergedStyles,
-          })
-
-          // After overlap (within this child)
-          if (childEnd > overlapEnd) {
-            newChildren.push({
-              ...child,
-              content: child.content!.substring(overlapEnd - childStart),
-            })
-          }
-        }
-
-        currentPos = childEnd
-      }
-
-      // Update the node in the tree
-      const newContainer = updateNodeById(currentContainer, nodeId, () => ({
-        content: undefined, // Clear simple content
-        children: newChildren, // Set inline children
-      })) as ContainerNode
-
-      console.groupEnd()
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "APPLY_LINK": {
-      const { href } = action.payload
-
-      console.group("🔗 [APPLY_LINK] Reducer executing")
-
-      if (!state.currentSelection) {
-        console.warn("❌ Cannot apply link without active selection")
-        console.groupEnd()
-        return state
-      }
-
-      const { nodeId, start, end } = state.currentSelection
-
-      const currentContainer = state.history[state.historyIndex]
-      const node = findNodeById(currentContainer, nodeId) as
-        | TextNode
-        | undefined
-
-      if (!node || !isTextNode(node)) {
-        console.warn("❌ Node not found or not a text node")
-        console.groupEnd()
-        return state
-      }
-
-      // Convert node to inline children if it's still plain content
-      const children = hasInlineChildren(node)
-        ? node.children!
-        : [{ content: node.content || "" }]
-
-      // Build new children array by splitting segments that overlap with selection
-      const newChildren: typeof node.children = []
-      let currentPos = 0
-
-      for (const child of children) {
-        const childLength = (child.content || "").length
-        const childStart = currentPos
-        const childEnd = currentPos + childLength
-
-        // Check overlap with selection [start, end)
-        if (childEnd <= start || childStart >= end) {
-          // No overlap - keep as is
-          newChildren.push({ ...child })
-        } else {
-          // There's overlap - need to split this child
-          const overlapStart = Math.max(childStart, start)
-          const overlapEnd = Math.min(childEnd, end)
-
-          // Before overlap (within this child)
-          if (childStart < overlapStart) {
-            newChildren.push({
-              ...child,
-              content: child.content!.substring(0, overlapStart - childStart),
-            })
-          }
-
-          // Overlapping part - apply the link
-          newChildren.push({
-            ...child,
-            content: child.content!.substring(
-              overlapStart - childStart,
-              overlapEnd - childStart
-            ),
-            href: href,
-          })
-
-          // After overlap (within this child)
-          if (childEnd > overlapEnd) {
-            newChildren.push({
-              ...child,
-              content: child.content!.substring(overlapEnd - childStart),
-            })
-          }
-        }
-
-        currentPos = childEnd
-      }
-
-      // Update the node in the tree
-      const newContainer = updateNodeById(currentContainer, nodeId, () => ({
-        content: undefined, // Clear simple content
-        children: newChildren, // Set inline children
-      })) as ContainerNode
-
-      console.groupEnd()
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "REMOVE_LINK": {
-      console.group("🔗 [REMOVE_LINK] Reducer executing")
-
-      if (!state.currentSelection) {
-        console.warn("❌ Cannot remove link without active selection")
-        console.groupEnd()
-        return state
-      }
-
-      const { nodeId, start, end } = state.currentSelection
-
-      const currentContainer = state.history[state.historyIndex]
-      const node = findNodeById(currentContainer, nodeId) as
-        | TextNode
-        | undefined
-
-      if (!node || !isTextNode(node)) {
-        console.warn("❌ Node not found or not a text node")
-        console.groupEnd()
-        return state
-      }
-
-      // Convert node to inline children if it's still plain content
-      const children = hasInlineChildren(node)
-        ? node.children!
-        : [{ content: node.content || "" }]
-
-      // Build new children array by splitting segments that overlap with selection
-      const newChildren: typeof node.children = []
-      let currentPos = 0
-
-      for (const child of children) {
-        const childLength = (child.content || "").length
-        const childStart = currentPos
-        const childEnd = currentPos + childLength
-
-        // Check overlap with selection [start, end)
-        if (childEnd <= start || childStart >= end) {
-          // No overlap - keep as is
-          newChildren.push({ ...child })
-        } else {
-          // There's overlap - need to split this child
-          const overlapStart = Math.max(childStart, start)
-          const overlapEnd = Math.min(childEnd, end)
-
-          // Before overlap (within this child)
-          if (childStart < overlapStart) {
-            newChildren.push({
-              ...child,
-              content: child.content!.substring(0, overlapStart - childStart),
-            })
-          }
-
-          // Overlapping part - remove the link
-          newChildren.push({
-            ...child,
-            content: child.content!.substring(
-              overlapStart - childStart,
-              overlapEnd - childStart
-            ),
-            href: undefined, // Remove the href
-          })
-
-          // After overlap (within this child)
-          if (childEnd > overlapEnd) {
-            newChildren.push({
-              ...child,
-              content: child.content!.substring(overlapEnd - childStart),
-            })
-          }
-        }
-
-        currentPos = childEnd
-      }
-
-      // Update the node in the tree
-      const newContainer = updateNodeById(currentContainer, nodeId, () => ({
-        content: undefined, // Clear simple content
-        children: newChildren, // Set inline children
-      })) as ContainerNode
-
-      console.groupEnd()
-
-      return addToHistory(
-        {
-          ...state,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        newContainer
-      )
-    }
-
-    case "SELECT_ALL_BLOCKS": {
-      // Select all block IDs
-      const currentContainer = state.history[state.historyIndex]
-      const allBlockIds = new Set(
-        currentContainer.children.map((child) => child.id)
-      )
-      return {
-        ...state,
-        selectedBlocks: allBlockIds,
-      }
-    }
-
-    case "CLEAR_BLOCK_SELECTION": {
-      return {
-        ...state,
-        selectedBlocks: new Set(),
-      }
-    }
-
-    case "DELETE_SELECTED_BLOCKS": {
-      if (state.selectedBlocks.size === 0) {
-        return state
-      }
-
-      const currentContainer = state.history[state.historyIndex]
-      // Delete all selected blocks
-      const newChildren = currentContainer.children.filter(
-        (child) => !state.selectedBlocks.has(child.id)
-      )
-
-      // If all blocks were deleted, create a new empty paragraph
-      if (newChildren.length === 0) {
-        const newNode: TextNode = {
-          id: "p-" + Date.now(),
-          type: "p",
-          content: "",
-          attributes: {},
-        }
-        newChildren.push(newNode)
-      }
-
-      return addToHistory(
-        {
-          ...state,
-          selectedBlocks: new Set(),
-          activeNodeId: newChildren[0]?.id || null,
-          metadata: {
-            ...state.metadata,
-            updatedAt: new Date().toISOString(),
-          },
-        },
-        {
-          ...currentContainer,
-          children: newChildren,
-        }
-      )
-    }
-
-    case "UNDO": {
-      if (state.historyIndex > 0) {
-        const newIndex = state.historyIndex - 1
-        return {
-          ...state,
-          historyIndex: newIndex,
-        }
-      }
-      return state
-    }
-
-    case "REDO": {
-      if (state.historyIndex < state.history.length - 1) {
-        const newIndex = state.historyIndex + 1
-        return {
-          ...state,
-          historyIndex: newIndex,
-        }
-      }
-      return state
-    }
-
-    case "SET_COVER_IMAGE": {
-      const { coverImage } = action.payload
-      return {
-        ...state,
-        coverImage,
-        metadata: {
-          ...state.metadata,
-          updatedAt: new Date().toISOString(),
-        },
-      }
-    }
-
-    case "REMOVE_COVER_IMAGE": {
-      return {
-        ...state,
-        coverImage: null,
-        metadata: {
-          ...state.metadata,
-          updatedAt: new Date().toISOString(),
-        },
-      }
-    }
-
-    case "UPDATE_COVER_IMAGE_POSITION": {
-      const { position } = action.payload
-      if (!state.coverImage) {
-        console.warn("Cannot update position: no cover image set")
-        return state
-      }
-      return {
-        ...state,
-        coverImage: {
-          ...state.coverImage,
-          position,
-        },
-        metadata: {
-          ...state.metadata,
-          updatedAt: new Date().toISOString(),
-        },
-      }
-    }
-
-    default:
-      // Exhaustiveness check
-      const _exhaustive: never = action
-      console.warn("Unknown action type:", _exhaustive)
-      return state
-  }
-}
-
-/**
- * Creates the initial state for a new editor instance.
- *
- * @param container - Optional custom root container
- * @returns Initial editor state
- *
- * @example
- * ```typescript
- * const initialState = createInitialState();
- * const [state, dispatch] = useReducer(editorReducer, initialState);
- * ```
- */
-export function createInitialState(
-  container?: Partial<ContainerNode>
-): EditorState {
-  // If container is provided, use it; otherwise create with at least one empty block
-  let defaultChildren = container?.children
-
-  // If no children provided or empty array, create a default empty heading
-  if (!defaultChildren || defaultChildren.length === 0) {
-    const timestamp = 'initial-header-node'
-    const defaultNode: TextNode = {
-      id: `h1-${timestamp}`,
-      type: "h1",
-      content: "",
-      attributes: {
-        placeholder: "New page",
-      },
-    }
-    defaultChildren = [defaultNode]
-  }
-
-  const initialContainer: ContainerNode = {
-    id: "root",
-    type: "container",
-    children: defaultChildren,
-    ...container,
-  }
-
-  // No need to clone - the container is already a new object
-  // Structural sharing will be maintained as we make edits
-  return {
-    version: "1.0.0",
-    history: [initialContainer],
-    historyIndex: 0,
-    activeNodeId: initialContainer.children[0].id,
-    hasSelection: false,
-    selectionKey: 0,
-    currentSelection: null,
-    selectedBlocks: new Set(),
-    coverImage: null,
-    metadata: {
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
-    },
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/lib/utils.ts b/apps/web/src/components/ui/rich-editor/lib/utils.ts
deleted file mode 100644
index bd0c391d..00000000
--- a/apps/web/src/components/ui/rich-editor/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
diff --git a/apps/web/src/components/ui/rich-editor/link-popover.tsx b/apps/web/src/components/ui/rich-editor/link-popover.tsx
deleted file mode 100644
index 17d485df..00000000
--- a/apps/web/src/components/ui/rich-editor/link-popover.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-"use client"
-
-import React, { useEffect, useRef, useState } from "react"
-import { AnimatePresence, motion } from "framer-motion"
-import { Link as LinkIcon, Trash2 } from "lucide-react"
-import { useTranslations } from "next-intl"
-
-import { Button } from "../button"
-import { Input } from "../input"
-import { Label } from "../label"
-import { Popover, PopoverContent, PopoverTrigger } from "../popover"
-import { useToast } from "./hooks/use-toast"
-import { EditorActions, useEditorDispatch, useEditorState, SelectionInfo } from "./index"
-
-export function LinkPopover() {
-  const t = useTranslations("RichEditor.link")
-  const state = useEditorState()
-  const dispatch = useEditorDispatch()
-  const { toast } = useToast()
-  const [hrefInput, setHrefInput] = useState("")
-  const [isOpen, setIsOpen] = useState(false)
-  const [position, setPosition] = useState<{
-    top: number
-    left: number
-  } | null>(null)
-
-  // Store the selection in a ref so it persists when focus changes
-  const savedSelectionRef = useRef<SelectionInfo | null>(null)
-
-  // Track selection and position the floating icon
-  useEffect(() => {
-    if (state.currentSelection && state.currentSelection.text.length > 0) {
-      // Save the selection to ref so it persists when focus changes
-      savedSelectionRef.current = state.currentSelection
-
-      // Pre-fill the href input if selection has an existing link
-      if (state.currentSelection.href && !isOpen) {
-        setHrefInput(state.currentSelection.href)
-      }
-
-      const selection = window.getSelection()
-      if (selection && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0)
-        const rect = range.getBoundingClientRect()
-
-        // Find the editor container (the parent with relative positioning)
-        const editorContainer = document
-          .querySelector("[data-editor-content]")
-          ?.closest(".relative")
-        const containerRect = editorContainer?.getBoundingClientRect()
-
-        if (containerRect) {
-          // Calculate position relative to the editor container
-          setPosition({
-            top: rect.top - containerRect.top - 45, // 45px above the selection, relative to container
-            left: rect.left - containerRect.left + rect.width / 2 + 16, // Offset to the right, relative to container
-          })
-        } else {
-          // Fallback to old behavior if container not found
-          setPosition({
-            top: rect.top + window.scrollY - 45,
-            left: rect.left + window.scrollX + rect.width / 2 + 16,
-          })
-        }
-      }
-    } else {
-      // Only clear position if we don't have a saved selection and popover is closed
-      if (!isOpen) {
-        setPosition(null)
-        savedSelectionRef.current = null
-      }
-    }
-  }, [state.currentSelection, state.selectionKey, isOpen])
-
-  // Handle link application
-  const handleApplyLink = () => {
-    // Use saved selection from ref instead of state
-    if (!savedSelectionRef.current || !hrefInput.trim()) return
-
-    // Temporarily restore the selection in state for the action
-    dispatch(EditorActions.setCurrentSelection(savedSelectionRef.current))
-
-    // Apply the link
-    setTimeout(() => {
-      dispatch(EditorActions.applyLink(hrefInput.trim()))
-
-      toast({
-        title: t("toastApplied"),
-        description: t("toastLinkedTo", { url: hrefInput }),
-      })
-
-      setHrefInput("")
-      setIsOpen(false)
-      setPosition(null)
-      savedSelectionRef.current = null
-    }, 0)
-  }
-
-  // Handle link removal
-  const handleRemoveLink = () => {
-    // Use saved selection from ref instead of state
-    if (!savedSelectionRef.current) return
-
-    // Temporarily restore the selection in state for the action
-    dispatch(EditorActions.setCurrentSelection(savedSelectionRef.current))
-
-    // Remove the link
-    setTimeout(() => {
-      dispatch(EditorActions.removeLink())
-
-      toast({
-        title: t("toastRemoved"),
-        description: t("toastRemovedDesc"),
-      })
-
-      setHrefInput("")
-      setIsOpen(false)
-      setPosition(null)
-      savedSelectionRef.current = null
-    }, 0)
-  }
-
-  const hasExistingLink = savedSelectionRef.current?.href
-
-  return (
-    <AnimatePresence mode="wait">
-      {position && (
-        <motion.div
-          key={position.top + position.left}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          className={`${position ? "opacity-100" : "!opacity-0"
-            } pointer-events-auto absolute z-50 transition-opacity duration-300`}
-          style={{
-            top: `${position?.top || 0}px`,
-            left: `${position?.left || 0}px`,
-          }}
-          exit={{ opacity: 0 }}
-        >
-          <Popover open={isOpen} onOpenChange={setIsOpen}>
-            <PopoverTrigger asChild>
-              <button
-                className={`bg-background flex h-8 w-8 items-center justify-center rounded-full border-2 shadow-lg transition-all hover:scale-110 ${hasExistingLink
-                  ? "border-blue-500 text-blue-500"
-                  : "border-border hover:border-primary"
-                  }`}
-                onMouseDown={(e) => {
-                  // Prevent default to keep the selection
-                  e.preventDefault()
-                  e.stopPropagation()
-                }}
-                onClick={(e) => {
-                  // Prevent default to keep the selection
-                  e.preventDefault()
-                  e.stopPropagation()
-                  setIsOpen(true)
-                }}
-              >
-                <LinkIcon className="size-4" />
-              </button>
-            </PopoverTrigger>
-            <PopoverContent
-              className="w-80"
-              align="start"
-              onOpenAutoFocus={(e) => {
-                // Prevent the popover from stealing focus and losing selection
-                e.preventDefault()
-              }}
-            >
-              <div className="space-y-3">
-                <div>
-                  <h4 className="mb-1 text-sm font-medium">
-                    {hasExistingLink ? t("editLink") : t("addLink")}
-                  </h4>
-                  <p className="text-muted-foreground text-xs">
-                    {t("selectedText", {
-                      text: savedSelectionRef.current?.text ?? "",
-                    })}
-                  </p>
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="href-input" className="text-xs">
-                    {t("linkUrl")}
-                  </Label>
-                  <Input
-                    id="href-input"
-                    placeholder={t("urlPlaceholder")}
-                    value={hrefInput}
-                    onChange={(e) => setHrefInput(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        handleApplyLink()
-                      }
-                    }}
-                    className="flex-1"
-                    onMouseDown={(e) => e.stopPropagation()}
-                    onClick={(e) => e.stopPropagation()}
-                  />
-                </div>
-                <div className="flex gap-2">
-                  <Button
-                    onClick={handleApplyLink}
-                    disabled={!hrefInput.trim()}
-                    size="sm"
-                    className="flex-1"
-                  >
-                    <LinkIcon className="mr-1.5 size-3.5" />
-                    {hasExistingLink ? t("update") : t("addLinkButton")}
-                  </Button>
-                  {hasExistingLink && (
-                    <Button
-                      onClick={handleRemoveLink}
-                      variant="destructive"
-                      size="sm"
-                    >
-                      <Trash2 className="size-3.5" />
-                    </Button>
-                  )}
-                </div>
-              </div>
-            </PopoverContent>
-          </Popover>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/media-upload-popover.tsx b/apps/web/src/components/ui/rich-editor/media-upload-popover.tsx
deleted file mode 100644
index 4089e45f..00000000
--- a/apps/web/src/components/ui/rich-editor/media-upload-popover.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client"
-
-import React from "react"
-import { Image as ImageIcon, ImagePlus, LayoutGrid, Video } from "lucide-react"
-
-import { Button } from "../button"
-import { Popover, PopoverContent, PopoverTrigger } from "../popover"
-import { useTranslations } from "next-intl"
-
-interface MediaUploadPopoverProps {
-  isUploading: boolean
-  onImageUploadClick: () => void
-  onMultipleImagesUploadClick: () => void
-  onVideoUploadClick: () => void
-}
-
-export function MediaUploadPopover({
-  isUploading,
-  onImageUploadClick,
-  onMultipleImagesUploadClick,
-  onVideoUploadClick,
-}: MediaUploadPopoverProps) {
-  const t = useTranslations("RichEditor.media")
-  const [open, setOpen] = React.useState(false)
-
-  const handleOptionClick = (action: () => void) => {
-    action()
-    setOpen(false)
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          disabled={isUploading}
-          className="h-7 w-7 md:h-8 md:w-8"
-          title={t("popoverTitle")}
-        >
-          <ImageIcon className="size-3 md:size-3.5" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-56 p-2" align="start">
-        <div className="flex flex-col gap-1">
-          <Button
-            variant="ghost"
-            className="h-9 w-full justify-start gap-3"
-            onClick={() => handleOptionClick(onImageUploadClick)}
-            disabled={isUploading}
-          >
-            <ImagePlus className="size-4" />
-            <div className="flex flex-col items-start">
-              <span className="text-sm font-medium">{t("singleImage")}</span>
-              <span className="text-muted-foreground text-xs">
-                {t("singleImageDesc")}
-              </span>
-            </div>
-          </Button>
-
-          <Button
-            variant="ghost"
-            className="h-9 w-full justify-start gap-3"
-            onClick={() => handleOptionClick(onMultipleImagesUploadClick)}
-            disabled={isUploading}
-          >
-            <LayoutGrid className="size-4" />
-            <div className="flex flex-col items-start">
-              <span className="text-sm font-medium">{t("multipleImages")}</span>
-              <span className="text-muted-foreground text-xs">
-                {t("multipleImagesDesc")}
-              </span>
-            </div>
-          </Button>
-
-          <Button
-            variant="ghost"
-            className="h-9 w-full justify-start gap-3"
-            onClick={() => handleOptionClick(onVideoUploadClick)}
-            disabled={isUploading}
-          >
-            <Video className="size-4" />
-            <div className="flex flex-col items-start">
-              <span className="text-sm font-medium">{t("video")}</span>
-              <span className="text-muted-foreground text-xs">
-                {t("videoDesc")}
-              </span>
-            </div>
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/store/editor-store.ts b/apps/web/src/components/ui/rich-editor/store/editor-store.ts
deleted file mode 100644
index 51870458..00000000
--- a/apps/web/src/components/ui/rich-editor/store/editor-store.ts
+++ /dev/null
@@ -1,345 +0,0 @@
-import React from "react"
-import { create } from "zustand"
-import { subscribeWithSelector } from "zustand/middleware"
-import { useShallow } from "zustand/react/shallow"
-
-import { EditorAction } from "../lib/reducer/actions"
-import {
-  createInitialState,
-  editorReducer,
-} from "../lib/reducer/editor-reducer"
-import {
-  ContainerNode,
-  EditorNode,
-  EditorState,
-  SelectionInfo,
-  TextNode,
-} from "../types"
-
-// Store interface
-interface EditorStore extends EditorState {
-  // Actions
-  dispatch: (action: EditorAction) => void
-
-  // Optimized selectors that don't cause re-renders
-  getNode: (nodeId: string) => EditorNode | undefined
-  getContainer: () => ContainerNode
-  isNodeActive: (nodeId: string) => boolean
-  getActiveNodeId: () => string | null
-  getContainerChildrenIds: () => string[]
-
-  // Selection management (optimized to avoid re-renders)
-  selectionManager: {
-    getSelection: () => SelectionInfo | null
-    setSelection: (selection: SelectionInfo | null) => void
-    subscribe: (
-      callback: (selection: SelectionInfo | null) => void
-    ) => () => void
-  }
-
-  // Internal selection state (not reactive)
-  _selection: SelectionInfo | null
-  _selectionSubscribers: Set<(selection: SelectionInfo | null) => void>
-}
-
-// Helper function to find node by ID in tree
-function findNodeById(
-  container: ContainerNode,
-  nodeId: string
-): EditorNode | undefined {
-  if (container.id === nodeId) return container
-
-  for (const child of container.children) {
-    if (child.id === nodeId) return child
-
-    if ("children" in child && Array.isArray(child.children)) {
-      const found = findNodeById(child as ContainerNode, nodeId)
-      if (found) return found
-    }
-  }
-
-  return undefined
-}
-
-// Static empty Set to avoid creating new instances
-const EMPTY_SELECTED_BLOCKS = new Set<string>()
-
-// Create the store with subscribeWithSelector middleware for fine-grained subscriptions
-export const useEditorStore = create<EditorStore>()(
-  subscribeWithSelector((set, get) => {
-    // Initialize selection subscribers
-    const selectionSubscribers = new Set<
-      (selection: SelectionInfo | null) => void
-    >()
-
-    return {
-      // Initialize with default state
-      ...createInitialState(),
-
-      // Selection state (non-reactive)
-      _selection: null,
-      _selectionSubscribers: selectionSubscribers,
-
-      // Main dispatch function
-      dispatch: (action: EditorAction) => {
-        const currentState = get()
-        const newState = editorReducer(currentState, action)
-
-        // Update the store with new state
-        set(newState)
-      },
-
-      // Optimized selectors (these don't cause subscriptions)
-      getNode: (nodeId: string) => {
-        const container = get().history[get().historyIndex]
-        return findNodeById(container, nodeId)
-      },
-
-      getContainer: () => {
-        return get().history[get().historyIndex]
-      },
-
-      isNodeActive: (nodeId: string) => {
-        return get().activeNodeId === nodeId
-      },
-
-      getActiveNodeId: () => {
-        return get().activeNodeId
-      },
-
-      getContainerChildrenIds: () => {
-        const container = get().history[get().historyIndex]
-        return container.children.map((child) => child.id)
-      },
-
-      // Selection manager (optimized to avoid re-renders)
-      selectionManager: {
-        getSelection: () => get()._selection,
-
-        setSelection: (selection: SelectionInfo | null) => {
-          // Update internal selection without triggering re-renders
-          set({ _selection: selection })
-
-          // Notify subscribers (e.g., toolbar) but don't trigger full re-render
-          const subscribers = get()._selectionSubscribers
-          subscribers.forEach((callback) => callback(selection))
-        },
-
-        subscribe: (callback: (selection: SelectionInfo | null) => void) => {
-          const subscribers = get()._selectionSubscribers
-          subscribers.add(callback)
-          return () => {
-            subscribers.delete(callback)
-          }
-        },
-      },
-    }
-  })
-)
-
-// Specialized hooks for components to subscribe to specific data
-
-/**
- * Hook for blocks to subscribe only to their specific node data
- * This prevents re-renders when other nodes change
- *
- * OPTIMIZATION: Uses subscribeWithSelector to ONLY subscribe to this specific node.
- * The selector function extracts just this node, and Zustand only notifies us
- * when the RETURN VALUE changes (using Object.is for reference equality).
- *
- * How it works:
- * 1. Selector extracts ONLY this specific node from state
- * 2. Zustand tracks the selector's return value
- * 3. On state change, Zustand re-runs selector and compares old vs new return value
- * 4. Only triggers re-render if the node reference actually changed
- * 5. Combined with structural sharing in reducer, unchanged nodes keep same reference
- *
- * Result:
- * - Type in block A → only block A's node reference changes → only block A re-renders ✅
- * - All other blocks keep same reference → selector returns same value → no re-render ✅
- */
-export function useBlockNode(nodeId: string) {
-  return useEditorStore((state) => {
-    const container = state.history[state.historyIndex]
-    return findNodeById(container, nodeId)
-  })
-}
-
-/**
- * Hook to check if a specific node is active
- * Only re-renders when the active status of THIS node changes
- */
-export function useIsNodeActive(nodeId: string): boolean {
-  return useEditorStore((state) => state.activeNodeId === nodeId)
-}
-
-/**
- * Hook to get the current active node ID
- * Only re-renders when the active node ID changes
- */
-export function useActiveNodeId(): string | null {
-  return useEditorStore((state) => state.activeNodeId)
-}
-
-/**
- * Hook to get the current container's children IDs
- * Only re-renders when the children array changes
- * Uses useShallow to prevent unnecessary re-renders from array recreation
- */
-export function useContainerChildrenIds(): string[] {
-  return useEditorStore(
-    useShallow((state) => {
-      const container = state.history[state.historyIndex]
-      return container.children.map((child) => child.id)
-    })
-  )
-}
-
-/**
- * Hook to get the current container
- * Use sparingly - prefer more specific hooks when possible
- * Uses useShallow to prevent unnecessary re-renders when container reference hasn't changed
- */
-export function useContainer(): ContainerNode {
-  return useEditorStore(
-    useShallow((state) => state.history[state.historyIndex])
-  )
-}
-
-/**
- * Hook to get the current container (non-reactive, for use in callbacks)
- * This doesn't subscribe to changes, use it for one-time reads in event handlers
- * Uses shallow equality since the getter function should be stable
- */
-export function useContainerGetter(): () => ContainerNode {
-  return useEditorStore(
-    useShallow((state) => () => state.history[state.historyIndex])
-  )
-}
-
-/**
- * Hook to get the dispatch function
- * This never changes so no re-renders
- * Uses shallow equality to ensure stable reference
- */
-export function useEditorDispatch() {
-  return useEditorStore(useShallow((state) => state.dispatch))
-}
-
-/**
- * Hook to get the full editor state
- * Use only when you need the complete state (like for toolbars)
- * Uses useShallow to prevent infinite loops by caching the result
- */
-export function useEditorState(): EditorState {
-  return useEditorStore(
-    useShallow((state) => ({
-      history: state.history,
-      historyIndex: state.historyIndex,
-      activeNodeId: state.activeNodeId,
-      currentSelection: state.currentSelection,
-      version: state.version,
-      coverImage: state.coverImage,
-      hasSelection: state.currentSelection !== null,
-      selectionKey: state.version
-        ? parseInt(state.version.split(".").join(""))
-        : 0,
-      selectedBlocks: EMPTY_SELECTED_BLOCKS,
-    }))
-  )
-}
-
-/**
- * Hook for selection management (optimized to avoid re-renders)
- * Uses shallow equality since selectionManager is a stable object
- */
-export function useSelectionManager() {
-  return useEditorStore(useShallow((state) => state.selectionManager))
-}
-
-/**
- * Hook to subscribe to selection changes (for toolbar/UI updates)
- * Only components that need to react to selection changes should use this
- */
-export function useSelection(): SelectionInfo | null {
-  const selectionManager = useSelectionManager()
-  const [selection, setSelection] = React.useState<SelectionInfo | null>(
-    selectionManager.getSelection()
-  )
-
-  React.useEffect(() => {
-    const unsubscribe = selectionManager.subscribe(setSelection)
-    return unsubscribe
-  }, [selectionManager])
-
-  return selection
-}
-
-// Provider component for initialization
-export interface EditorProviderProps {
-  children: React.ReactNode
-  initialContainer?: ContainerNode
-  initialState?: EditorState
-  onChange?: (state: EditorState) => void
-  debug?: boolean
-}
-
-export function EditorProvider({
-  children,
-  initialContainer,
-  initialState,
-  onChange,
-  debug = false,
-}: EditorProviderProps) {
-  const store = useEditorStore()
-
-  // Initialize store with provided state
-  React.useEffect(() => {
-    if (initialState) {
-      // Set the initial state
-      useEditorStore.setState(initialState)
-    } else if (initialContainer) {
-      // Create initial state from container
-      const newState = createInitialState(initialContainer)
-      useEditorStore.setState(newState)
-    }
-  }, [initialContainer, initialState])
-
-  // Subscribe to state changes for onChange callback
-  React.useEffect(() => {
-    if (!onChange) return
-
-    return useEditorStore.subscribe((state) => {
-      const editorState: EditorState = {
-        history: state.history,
-        historyIndex: state.historyIndex,
-        activeNodeId: state.activeNodeId,
-        currentSelection: state.currentSelection,
-        version: state.version,
-        coverImage: state.coverImage,
-        hasSelection: state.currentSelection !== null,
-        selectionKey: state.version
-          ? parseInt(state.version.split(".").join(""))
-          : 0,
-        selectedBlocks: new Set<string>(),
-      }
-      onChange(editorState)
-    })
-  }, [onChange])
-
-  // Debug logging
-  React.useEffect(() => {
-    if (!debug) return
-
-    let prevState = useEditorStore.getState()
-    return useEditorStore.subscribe((state) => {
-      console.group("🎬 [Mina Editor] State Change")
-      console.log("Previous:", prevState)
-      console.log("Current:", state)
-      console.groupEnd()
-      prevState = state
-    })
-  }, [debug])
-
-  return React.createElement(React.Fragment, null, children)
-}
diff --git a/apps/web/src/components/ui/rich-editor/table-builder.tsx b/apps/web/src/components/ui/rich-editor/table-builder.tsx
deleted file mode 100644
index cced7667..00000000
--- a/apps/web/src/components/ui/rich-editor/table-builder.tsx
+++ /dev/null
@@ -1,762 +0,0 @@
-"use client"
-
-import React, { useRef, useState } from "react"
-import { GripVertical, Plus, Trash2, X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-import { Button } from "../button"
-import {
-  ContainerNode,
-  StructuralNode,
-  TextNode,
-  type EditorNode,
-} from "./types"
-
-interface TableBuilderProps {
-  node: ContainerNode
-  onUpdate: (id: string, updates: Partial<EditorNode>) => void
-  readOnly?: boolean
-  onBlockDragStart?: (nodeId: string) => void
-  onDelete?: (nodeId?: string) => void
-}
-
-export function TableBuilder({
-  node,
-  onUpdate,
-  readOnly = false,
-  onBlockDragStart,
-  onDelete,
-}: TableBuilderProps) {
-  const [hoveredCol, setHoveredCol] = useState<number | null>(null)
-  const [hoveredRow, setHoveredRow] = useState<number | null>(null)
-  const [showColControls, setShowColControls] = useState(false)
-  const [showRowControls, setShowRowControls] = useState(false)
-  const [isHovering, setIsHovering] = useState(false)
-  const [columnWidths, setColumnWidths] = useState<number[]>([])
-  const [resizingCol, setResizingCol] = useState<number | null>(null)
-  const [startX, setStartX] = useState(0)
-  const [startWidth, setStartWidth] = useState(0)
-  const [draggingCol, setDraggingCol] = useState<number | null>(null)
-  const [draggingRow, setDraggingRow] = useState<number | null>(null)
-  const [dragOverCol, setDragOverCol] = useState<number | null>(null)
-  const [dragOverRow, setDragOverRow] = useState<number | null>(null)
-  const tableRef = useRef<HTMLTableElement>(null)
-
-  // Helper to find table structure
-  const table = node.children.find((child) => child.type === "table") as
-    | StructuralNode
-    | undefined
-  if (!table) return null
-
-  const thead = table.children.find((child) => child.type === "thead") as
-    | StructuralNode
-    | undefined
-  const tbody = table.children.find((child) => child.type === "tbody") as
-    | StructuralNode
-    | undefined
-
-  const headerRow = thead?.children[0] as StructuralNode | undefined
-  const bodyRows = tbody?.children as StructuralNode[] | undefined
-
-  const numCols = headerRow?.children.length || 0
-  const numRows = (bodyRows?.length || 0) + 1 // +1 for header
-
-  // Initialize column widths if not set (using 'auto' for natural sizing)
-  React.useEffect(() => {
-    if (columnWidths.length === 0 && numCols > 0) {
-      // Start with auto-sizing (0 means auto)
-      setColumnWidths(Array(numCols).fill(0))
-    }
-  }, [numCols, columnWidths.length])
-
-  // Handle resize start
-  const handleResizeStart = (colIndex: number, e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    // Get actual width from DOM if it's auto-sized (0)
-    const actualWidth =
-      columnWidths[colIndex] ||
-      tableRef.current
-        ?.querySelector(`th:nth-child(${colIndex + 1})`)
-        ?.getBoundingClientRect().width ||
-      150
-
-    setResizingCol(colIndex)
-    setStartX(e.clientX)
-    setStartWidth(actualWidth)
-  }
-
-  // Handle resize move
-  React.useEffect(() => {
-    if (resizingCol === null) return
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const diff = e.clientX - startX
-      const newWidth = Math.max(80, startWidth + diff) // Minimum width 80px
-
-      setColumnWidths((prev) => {
-        const newWidths = [...prev]
-        newWidths[resizingCol] = newWidth
-        return newWidths
-      })
-    }
-
-    const handleMouseUp = () => {
-      setResizingCol(null)
-    }
-
-    document.addEventListener("mousemove", handleMouseMove)
-    document.addEventListener("mouseup", handleMouseUp)
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove)
-      document.removeEventListener("mouseup", handleMouseUp)
-    }
-  }, [resizingCol, startX, startWidth])
-
-  // Column drag handlers
-  const handleColumnDragStart = (colIndex: number, e: React.DragEvent) => {
-    if (readOnly) return
-    e.stopPropagation()
-    setDraggingCol(colIndex)
-    e.dataTransfer.effectAllowed = "move"
-  }
-
-  const handleColumnDragOver = (colIndex: number, e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    if (draggingCol === null || draggingCol === colIndex) return
-    setDragOverCol(colIndex)
-  }
-
-  const handleColumnDrop = (targetColIndex: number, e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    if (
-      draggingCol === null ||
-      draggingCol === targetColIndex ||
-      !headerRow ||
-      !bodyRows
-    )
-      return
-
-    // Swap columns in header
-    const newHeaderChildren = [...headerRow.children]
-    const [draggedHeader] = newHeaderChildren.splice(draggingCol, 1)
-    newHeaderChildren.splice(targetColIndex, 0, draggedHeader)
-
-    const newHeaderRow: StructuralNode = {
-      ...headerRow,
-      children: newHeaderChildren,
-    }
-
-    // Swap columns in all body rows
-    const newBodyRows = bodyRows.map((row) => {
-      const newRowChildren = [...row.children]
-      const [draggedCell] = newRowChildren.splice(draggingCol, 1)
-      newRowChildren.splice(targetColIndex, 0, draggedCell)
-      return {
-        ...row,
-        children: newRowChildren,
-      }
-    })
-
-    // Swap column widths
-    const newWidths = [...columnWidths]
-    const [draggedWidth] = newWidths.splice(draggingCol, 1)
-    newWidths.splice(targetColIndex, 0, draggedWidth)
-    setColumnWidths(newWidths)
-
-    // Update table
-    const newThead: StructuralNode = {
-      ...thead!,
-      children: [newHeaderRow],
-    }
-
-    const newTbody: StructuralNode = {
-      ...tbody!,
-      children: newBodyRows,
-    }
-
-    const newTable: StructuralNode = {
-      ...table,
-      children: [newThead, newTbody],
-    }
-
-    onUpdate(node.id, {
-      children: [newTable],
-    })
-
-    setDraggingCol(null)
-    setDragOverCol(null)
-  }
-
-  const handleColumnDragEnd = () => {
-    setDraggingCol(null)
-    setDragOverCol(null)
-  }
-
-  // Row drag handlers
-  const handleRowDragStart = (rowIndex: number, e: React.DragEvent) => {
-    if (readOnly) return
-    e.stopPropagation()
-    setDraggingRow(rowIndex)
-    e.dataTransfer.effectAllowed = "move"
-  }
-
-  const handleRowDragOver = (rowIndex: number, e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    if (draggingRow === null || draggingRow === rowIndex) return
-    setDragOverRow(rowIndex)
-  }
-
-  const handleRowDrop = (targetRowIndex: number, e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    if (draggingRow === null || draggingRow === targetRowIndex || !bodyRows)
-      return
-
-    // Reorder rows
-    const newBodyRows = [...bodyRows]
-    const [draggedRow] = newBodyRows.splice(draggingRow, 1)
-    newBodyRows.splice(targetRowIndex, 0, draggedRow)
-
-    const newTbody: StructuralNode = {
-      ...tbody!,
-      children: newBodyRows,
-    }
-
-    const newTable: StructuralNode = {
-      ...table,
-      children: [thead!, newTbody],
-    }
-
-    onUpdate(node.id, {
-      children: [newTable],
-    })
-
-    setDraggingRow(null)
-    setDragOverRow(null)
-  }
-
-  const handleRowDragEnd = () => {
-    setDraggingRow(null)
-    setDragOverRow(null)
-  }
-
-  const addColumn = () => {
-    if (!headerRow || !bodyRows || readOnly) return
-
-    // Add th to header
-    const newHeader: StructuralNode = {
-      ...headerRow,
-      children: [
-        ...headerRow.children,
-        {
-          id: `th-${Date.now()}`,
-          type: "th" as const,
-          content: `Column ${numCols + 1}`,
-          attributes: {},
-        } as TextNode,
-      ],
-    }
-
-    // Add td to each body row
-    const newBodyRows = bodyRows.map((row, idx) => ({
-      ...row,
-      children: [
-        ...row.children,
-        {
-          id: `td-${Date.now()}-${idx}`,
-          type: "td" as const,
-          content: "",
-          attributes: {},
-        } as TextNode,
-      ],
-    }))
-
-    const newThead: StructuralNode = {
-      ...thead!,
-      children: [newHeader],
-    }
-
-    const newTbody: StructuralNode = {
-      ...tbody!,
-      children: newBodyRows,
-    }
-
-    const newTable: StructuralNode = {
-      ...table,
-      children: [newThead, newTbody],
-    }
-
-    onUpdate(node.id, {
-      children: [newTable],
-    })
-
-    // Add width for new column (default 150px for empty columns)
-    setColumnWidths((prev) => [...prev, 150])
-  }
-
-  const addRow = () => {
-    if (!bodyRows || !headerRow || readOnly) return
-
-    const newCells = Array.from({ length: numCols }, (_, idx) => ({
-      id: `td-${Date.now()}-${idx}`,
-      type: "td" as const,
-      content: "",
-      attributes: {},
-    }))
-
-    const newRow: StructuralNode = {
-      id: `tr-${Date.now()}`,
-      type: "tr",
-      children: newCells,
-      attributes: {},
-    }
-
-    const newTbody: StructuralNode = {
-      ...tbody!,
-      children: [...bodyRows, newRow],
-    }
-
-    const newTable: StructuralNode = {
-      ...table,
-      children: [thead!, newTbody],
-    }
-
-    onUpdate(node.id, {
-      children: [newTable],
-    })
-  }
-
-  const removeColumn = (colIndex: number) => {
-    if (!headerRow || !bodyRows || readOnly || numCols <= 1) return
-
-    const newHeader: StructuralNode = {
-      ...headerRow,
-      children: headerRow.children.filter((_, idx) => idx !== colIndex),
-    }
-
-    const newBodyRows = bodyRows.map((row) => ({
-      ...row,
-      children: row.children.filter((_, idx) => idx !== colIndex),
-    }))
-
-    const newThead: StructuralNode = {
-      ...thead!,
-      children: [newHeader],
-    }
-
-    const newTbody: StructuralNode = {
-      ...tbody!,
-      children: newBodyRows,
-    }
-
-    const newTable: StructuralNode = {
-      ...table,
-      children: [newThead, newTbody],
-    }
-
-    onUpdate(node.id, {
-      children: [newTable],
-    })
-
-    // Remove width for deleted column
-    setColumnWidths((prev) => prev.filter((_, idx) => idx !== colIndex))
-  }
-
-  const removeRow = (rowIndex: number) => {
-    if (!bodyRows || readOnly || bodyRows.length <= 1) return
-
-    const newBodyRows = bodyRows.filter((_, idx) => idx !== rowIndex)
-
-    const newTbody: StructuralNode = {
-      ...tbody!,
-      children: newBodyRows,
-    }
-
-    const newTable: StructuralNode = {
-      ...table,
-      children: [thead!, newTbody],
-    }
-
-    onUpdate(node.id, {
-      children: [newTable],
-    })
-  }
-
-  const handleCellChange = (
-    rowIndex: number,
-    colIndex: number,
-    content: string,
-    isHeader: boolean
-  ) => {
-    if (readOnly) return
-
-    if (isHeader && headerRow) {
-      const newHeader: StructuralNode = {
-        ...headerRow,
-        children: headerRow.children.map((cell, idx) =>
-          idx === colIndex ? { ...cell, content } : cell
-        ),
-      }
-
-      const newThead: StructuralNode = {
-        ...thead!,
-        children: [newHeader],
-      }
-
-      const newTable: StructuralNode = {
-        ...table,
-        children: [newThead, tbody!],
-      }
-
-      onUpdate(node.id, {
-        children: [newTable],
-      })
-    } else if (bodyRows) {
-      const newBodyRows = bodyRows.map((row, rIdx) => {
-        if (rIdx === rowIndex) {
-          return {
-            ...row,
-            children: row.children.map((cell, cIdx) =>
-              cIdx === colIndex ? { ...cell, content } : cell
-            ),
-          }
-        }
-        return row
-      })
-
-      const newTbody: StructuralNode = {
-        ...tbody!,
-        children: newBodyRows,
-      }
-
-      const newTable: StructuralNode = {
-        ...table,
-        children: [thead!, newTbody],
-      }
-
-      onUpdate(node.id, {
-        children: [newTable],
-      })
-    }
-  }
-
-  // Drag handlers for the entire table
-  const handleTableDragStart = (e: React.DragEvent) => {
-    if (readOnly || !onBlockDragStart) return
-    e.stopPropagation()
-    e.dataTransfer.effectAllowed = "move"
-    e.dataTransfer.setData("text/plain", node.id)
-    e.dataTransfer.setData(
-      "application/json",
-      JSON.stringify({
-        nodeId: node.id,
-        type: "table",
-      })
-    )
-    onBlockDragStart(node.id)
-  }
-
-  const handleTableDragEnd = () => {
-    // Cleanup if needed
-  }
-
-  return (
-    <div
-      className="group/table relative"
-      style={{
-        paddingLeft: readOnly ? "0" : "28px",
-        marginLeft: readOnly ? "0" : "-28px",
-      }}
-      onMouseEnter={() => {
-        if (!readOnly) {
-          setShowColControls(true)
-          setShowRowControls(true)
-          setIsHovering(true)
-        }
-      }}
-      onMouseLeave={() => {
-        setShowColControls(false)
-        setShowRowControls(false)
-        setHoveredCol(null)
-        setHoveredRow(null)
-        setIsHovering(false)
-      }}
-    >
-      {/* Drag Handle for entire table */}
-      {!readOnly && isHovering && onBlockDragStart && (
-        <div
-          draggable
-          onDragStart={handleTableDragStart}
-          onDragEnd={handleTableDragEnd}
-          className="absolute top-8 left-1 z-20 cursor-grab opacity-0 transition-opacity duration-200 group-hover/table:opacity-100 active:cursor-grabbing"
-          onClick={(e) => e.stopPropagation()}
-          onMouseDown={(e) => e.stopPropagation()}
-        >
-          <GripVertical
-            className="text-muted-foreground hover:text-foreground h-4 w-4 transition-colors duration-200"
-            strokeWidth={1.5}
-          />
-        </div>
-      )}
-
-      {/* Delete Button for entire table */}
-      {!readOnly && isHovering && onDelete && (
-        <div className="absolute top-2 right-0 z-20 opacity-0 transition-opacity duration-200 group-hover/table:opacity-100">
-          <Button
-            size="icon"
-            variant="destructive"
-            className="h-6 w-6"
-            onClick={() => onDelete(node.id)}
-            title="Delete table"
-          >
-            <Trash2 className="h-3 w-3" />
-          </Button>
-        </div>
-      )}
-
-      <div className="relative mx-auto w-fit">
-        {/* Column controls - top */}
-        {showColControls && (
-          <div className="absolute top-0 right-0 left-8 z-10 flex justify-center gap-1">
-            {Array.from({ length: numCols }).map((_, idx) => (
-              <div
-                key={idx}
-                className="flex flex-col items-center"
-                style={{ width: `${100 / numCols}%` }}
-                onMouseEnter={() => setHoveredCol(idx)}
-                onMouseLeave={() => setHoveredCol(null)}
-              >
-                {hoveredCol === idx && numCols > 1 && (
-                  <Button
-                    size="icon"
-                    variant="destructive"
-                    className="h-5 w-5"
-                    onClick={() => removeColumn(idx)}
-                    title="Remove column"
-                  >
-                    <X className="h-3 w-3" />
-                  </Button>
-                )}
-              </div>
-            ))}
-            <Button
-              size="icon"
-              variant="secondary"
-              className="ml-1 h-6 w-6"
-              onClick={addColumn}
-              title="Add column"
-            >
-              <Plus className="h-3 w-3" />
-            </Button>
-          </div>
-        )}
-
-        {/* Row controls - left side */}
-        {showRowControls && bodyRows && (
-          <div className="absolute top-0 bottom-0 -left-2 z-10 flex flex-col justify-start gap-1 pt-10">
-            {bodyRows.map((_, idx) => (
-              <div
-                key={idx}
-                className="flex items-center justify-center"
-                style={{ height: "40px" }}
-                onMouseEnter={() => setHoveredRow(idx)}
-                onMouseLeave={() => setHoveredRow(null)}
-              >
-                {hoveredRow === idx && bodyRows.length > 1 && (
-                  <Button
-                    size="icon"
-                    variant="destructive"
-                    className="h-4 w-4"
-                    onClick={() => removeRow(idx)}
-                    title="Remove row"
-                  >
-                    <X className="h-2.5 w-2.5" />
-                  </Button>
-                )}
-              </div>
-            ))}
-            <Button
-              size="icon"
-              variant="secondary"
-              className="mt-1 h-4 w-4"
-              onClick={addRow}
-              title="Add row"
-            >
-              <Plus className="h-2.5 w-2.5" />
-            </Button>
-          </div>
-        )}
-
-        <div className="relative mx-auto w-fit overflow-x-auto py-5">
-          {/* Table */}
-          <table
-            ref={tableRef}
-            className="border-border border-collapse border"
-            style={{ width: "auto" }}
-          >
-            <thead>
-              {headerRow && (
-                <tr>
-                  {headerRow.children.map((cell, colIdx) => (
-                    <th
-                      key={cell.id}
-                      className={cn(
-                        "border-border bg-muted/50 group/cell relative border p-2 text-left font-semibold",
-                        hoveredCol === colIdx && "bg-muted",
-                        dragOverCol === colIdx &&
-                          draggingCol !== colIdx &&
-                          "bg-primary/20"
-                      )}
-                      style={
-                        columnWidths[colIdx]
-                          ? {
-                              width: columnWidths[colIdx],
-                              minWidth: columnWidths[colIdx],
-                              maxWidth: columnWidths[colIdx],
-                            }
-                          : {
-                              whiteSpace: "nowrap",
-                            }
-                      }
-                      draggable={!readOnly}
-                      onDragStart={(e) => handleColumnDragStart(colIdx, e)}
-                      onDragOver={(e) => handleColumnDragOver(colIdx, e)}
-                      onDrop={(e) => handleColumnDrop(colIdx, e)}
-                      onDragEnd={handleColumnDragEnd}
-                    >
-                      <div className="flex items-center gap-1">
-                        {/* Drag handle for column */}
-                        {!readOnly && (
-                          <div
-                            className="cursor-grab opacity-0 transition-opacity group-hover/cell:opacity-100 active:cursor-grabbing"
-                            onMouseDown={(e) => e.stopPropagation()}
-                          >
-                            <GripVertical className="text-muted-foreground h-3 w-3" />
-                          </div>
-                        )}
-
-                        <input
-                          type="text"
-                          value={(cell as TextNode).content || ""}
-                          onChange={(e) =>
-                            handleCellChange(0, colIdx, e.target.value, true)
-                          }
-                          onKeyDown={(e) => {
-                            if (
-                              e.key === "Backspace" &&
-                              !(cell as TextNode).content &&
-                              numCols > 1
-                            ) {
-                              e.preventDefault()
-                              removeColumn(colIdx)
-                            }
-                          }}
-                          readOnly={readOnly}
-                          className="w-full border-none bg-transparent outline-none focus:ring-0 focus:outline-none"
-                          placeholder={`Column ${colIdx + 1}`}
-                        />
-                      </div>
-
-                      {/* Resize handle */}
-                      {!readOnly && (
-                        <div
-                          className={cn(
-                            "hover:bg-primary/50 absolute top-0 right-0 bottom-0 w-1 cursor-col-resize transition-colors",
-                            resizingCol === colIdx && "bg-primary"
-                          )}
-                          onMouseDown={(e) => handleResizeStart(colIdx, e)}
-                          style={{ userSelect: "none" }}
-                        >
-                          <div className="absolute top-1/2 right-0 -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity hover:opacity-100">
-                            <GripVertical className="text-muted-foreground h-4 w-4" />
-                          </div>
-                        </div>
-                      )}
-                    </th>
-                  ))}
-                </tr>
-              )}
-            </thead>
-            <tbody>
-              {bodyRows?.map((row, rowIdx) => (
-                <tr
-                  key={row.id}
-                  className={cn(
-                    "group/row",
-                    hoveredRow === rowIdx && "bg-muted/30",
-                    dragOverRow === rowIdx &&
-                      draggingRow !== rowIdx &&
-                      "bg-primary/20"
-                  )}
-                  draggable={!readOnly}
-                  onDragStart={(e) => handleRowDragStart(rowIdx, e)}
-                  onDragOver={(e) => handleRowDragOver(rowIdx, e)}
-                  onDrop={(e) => handleRowDrop(rowIdx, e)}
-                  onDragEnd={handleRowDragEnd}
-                >
-                  {row.children.map((cell, colIdx) => (
-                    <td
-                      key={cell.id}
-                      className={cn(
-                        "border-border relative border p-2",
-                        hoveredCol === colIdx && "bg-muted/50"
-                      )}
-                      style={
-                        columnWidths[colIdx]
-                          ? {
-                              width: columnWidths[colIdx],
-                              minWidth: columnWidths[colIdx],
-                              maxWidth: columnWidths[colIdx],
-                            }
-                          : {
-                              whiteSpace: "nowrap",
-                            }
-                      }
-                    >
-                      <div className="flex items-center gap-1">
-                        {/* Drag handle for row (only show in first column) */}
-                        {!readOnly && colIdx === 0 && (
-                          <div
-                            className="cursor-grab opacity-0 transition-opacity group-hover/row:opacity-100 active:cursor-grabbing"
-                            onMouseDown={(e) => e.stopPropagation()}
-                          >
-                            <GripVertical className="text-muted-foreground h-3 w-3" />
-                          </div>
-                        )}
-
-                        <input
-                          type="text"
-                          value={(cell as TextNode).content || ""}
-                          onChange={(e) =>
-                            handleCellChange(
-                              rowIdx,
-                              colIdx,
-                              e.target.value,
-                              false
-                            )
-                          }
-                          readOnly={readOnly}
-                          className="w-full border-none bg-transparent outline-none focus:ring-0 focus:outline-none"
-                          placeholder="Enter text"
-                        />
-                      </div>
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/table-dialog.tsx b/apps/web/src/components/ui/rich-editor/table-dialog.tsx
deleted file mode 100644
index 384ee00b..00000000
--- a/apps/web/src/components/ui/rich-editor/table-dialog.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-import { AlertCircle, Table } from "lucide-react"
-import { useTranslations } from "next-intl"
-
-import { Button } from "../button"
-import { Checkbox } from "../checkbox"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../dialog"
-import { Input } from "../input"
-import { Label } from "../label"
-import { Textarea } from "../textarea"
-import { StructuralNode } from "./types"
-import {
-  isMarkdownTable,
-  parseMarkdownTable,
-} from "./utils/markdown-table-parser"
-
-interface TableDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  onCreateTable: (rows: number, cols: number) => void
-  onImportMarkdown: (table: StructuralNode) => void
-}
-
-export function TableDialog({
-  open,
-  onOpenChange,
-  onCreateTable,
-  onImportMarkdown,
-}: TableDialogProps) {
-  const t = useTranslations("RichEditor.tableDialog")
-  const tParse = useTranslations("RichEditor.tableParse.errors")
-  const [rows, setRows] = useState(3)
-  const [cols, setCols] = useState(3)
-  const [useMarkdown, setUseMarkdown] = useState(false)
-  const [markdownText, setMarkdownText] = useState("")
-  const [error, setError] = useState<string | null>(null)
-
-  const handleCreate = () => {
-    if (useMarkdown) {
-      // Parse and import markdown
-      const result = parseMarkdownTable(markdownText)
-      if (result.success && result.table) {
-        onImportMarkdown(result.table)
-        onOpenChange(false)
-        // Reset
-        setMarkdownText("")
-        setUseMarkdown(false)
-        setError(null)
-      } else if (!result.success) {
-        const { errorKey, params } = result
-        if (errorKey === "rowColumnMismatch" && params) {
-          setError(
-            tParse(errorKey, {
-              row: params.row!,
-              got: params.got!,
-              expected: params.expected!,
-            })
-          )
-        } else {
-          setError(tParse(errorKey))
-        }
-      }
-    } else {
-      // Create empty table
-      if (rows > 0 && cols > 0 && rows <= 20 && cols <= 10) {
-        onCreateTable(rows, cols)
-        onOpenChange(false)
-        // Reset to defaults
-        setRows(3)
-        setCols(3)
-        setError(null)
-      }
-    }
-  }
-
-  const handleMarkdownChange = (value: string) => {
-    setMarkdownText(value)
-    setError(null)
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Table className="h-5 w-5" />
-            {t("title")}
-          </DialogTitle>
-          <DialogDescription>{t("description")}</DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          {/* Markdown checkbox */}
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="markdown"
-              checked={useMarkdown}
-              onCheckedChange={(checked: boolean) => {
-                setUseMarkdown(checked as boolean)
-                setError(null)
-              }}
-            />
-            <Label
-              htmlFor="markdown"
-              className="cursor-pointer text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              {t("markdownCheckbox")}
-            </Label>
-          </div>
-
-          {useMarkdown ? (
-            <>
-              {/* Markdown input */}
-              <div className="grid gap-2">
-                <Label htmlFor="markdown-input">{t("pasteMarkdownLabel")}</Label>
-                <Textarea
-                  id="markdown-input"
-                  placeholder={t("markdownPlaceholder")}
-                  value={markdownText}
-                  onChange={(e) => handleMarkdownChange(e.target.value)}
-                  className="max-h-[400px] min-h-[150px] font-mono text-xs"
-                />
-                <div className="text-muted-foreground text-xs">
-                  {t("markdownHint")}
-                </div>
-              </div>
-
-              {/* Error message */}
-              {error && (
-                <div className="text-destructive bg-destructive/10 flex items-start gap-2 rounded p-2 text-xs">
-                  <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0" />
-                  <span>{error}</span>
-                </div>
-              )}
-            </>
-          ) : (
-            <>
-              {/* Manual input */}
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="rows" className="text-right">
-                  {t("rows")}
-                </Label>
-                <Input
-                  id="rows"
-                  type="number"
-                  min="1"
-                  max="20"
-                  value={rows}
-                  onChange={(e) => setRows(parseInt(e.target.value) || 1)}
-                  className="col-span-3"
-                />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="cols" className="text-right">
-                  {t("columns")}
-                </Label>
-                <Input
-                  id="cols"
-                  type="number"
-                  min="1"
-                  max="10"
-                  value={cols}
-                  onChange={(e) => setCols(parseInt(e.target.value) || 1)}
-                  className="col-span-3"
-                />
-              </div>
-              <div className="text-muted-foreground px-1 text-xs">
-                {t("maxDimensions")}
-              </div>
-            </>
-          )}
-        </div>
-        <div className="flex justify-end gap-2">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t("cancel")}
-          </Button>
-          <Button
-            onClick={handleCreate}
-            disabled={
-              useMarkdown
-                ? !markdownText.trim() || !isMarkdownTable(markdownText)
-                : rows <= 0 || cols <= 0 || rows > 20 || cols > 10
-            }
-          >
-            {useMarkdown ? t("importTable") : t("createTable")}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/tailwind-classes.ts b/apps/web/src/components/ui/rich-editor/tailwind-classes.ts
deleted file mode 100644
index 91dc1ea8..00000000
--- a/apps/web/src/components/ui/rich-editor/tailwind-classes.ts
+++ /dev/null
@@ -1,670 +0,0 @@
-export interface TailwindClassGroup {
-  category: string
-  classes: string[]
-}
-
-export const tailwindClasses: TailwindClassGroup[] = [
-  {
-    category: "Text Color",
-    classes: [
-      "text-red-500",
-      "text-red-600",
-      "text-red-700",
-      "text-blue-500",
-      "text-blue-600",
-      "text-blue-700",
-      "text-green-500",
-      "text-green-600",
-      "text-green-700",
-      "text-yellow-500",
-      "text-yellow-600",
-      "text-yellow-700",
-      "text-purple-500",
-      "text-purple-600",
-      "text-purple-700",
-      "text-pink-500",
-      "text-pink-600",
-      "text-pink-700",
-      "text-indigo-500",
-      "text-indigo-600",
-      "text-indigo-700",
-      "text-gray-500",
-      "text-gray-600",
-      "text-gray-700",
-      "text-gray-800",
-      "text-gray-900",
-      "text-white",
-      "text-black",
-    ],
-  },
-  {
-    category: "Background Color",
-    classes: [
-      "bg-red-50",
-      "bg-red-100",
-      "bg-red-200",
-      "bg-red-500",
-      "bg-blue-50",
-      "bg-blue-100",
-      "bg-blue-200",
-      "bg-blue-500",
-      "bg-green-50",
-      "bg-green-100",
-      "bg-green-200",
-      "bg-green-500",
-      "bg-yellow-50",
-      "bg-yellow-100",
-      "bg-yellow-200",
-      "bg-yellow-500",
-      "bg-purple-50",
-      "bg-purple-100",
-      "bg-purple-200",
-      "bg-purple-500",
-      "bg-pink-50",
-      "bg-pink-100",
-      "bg-pink-200",
-      "bg-pink-500",
-      "bg-indigo-50",
-      "bg-indigo-100",
-      "bg-indigo-200",
-      "bg-indigo-500",
-      "bg-gray-50",
-      "bg-gray-100",
-      "bg-gray-200",
-      "bg-gray-500",
-      "bg-white",
-      "bg-black",
-      "bg-transparent",
-    ],
-  },
-  {
-    category: "Font Size",
-    classes: [
-      "text-xs",
-      "text-sm",
-      "text-base",
-      "text-lg",
-      "text-xl",
-      "text-2xl",
-      "text-3xl",
-      "text-4xl",
-      "text-5xl",
-      "text-6xl",
-      "text-7xl",
-      "text-8xl",
-      "text-9xl",
-    ],
-  },
-  {
-    category: "Font Weight",
-    classes: [
-      "font-thin",
-      "font-extralight",
-      "font-light",
-      "font-normal",
-      "font-medium",
-      "font-semibold",
-      "font-bold",
-      "font-extrabold",
-      "font-black",
-    ],
-  },
-  {
-    category: "Text Decoration",
-    classes: [
-      "underline",
-      "overline",
-      "line-through",
-      "no-underline",
-      "decoration-solid",
-      "decoration-double",
-      "decoration-dotted",
-      "decoration-dashed",
-      "decoration-wavy",
-      "underline-offset-1",
-      "underline-offset-2",
-      "underline-offset-4",
-      "underline-offset-8",
-    ],
-  },
-  {
-    category: "Text Alignment",
-    classes: [
-      "text-left",
-      "text-center",
-      "text-right",
-      "text-justify",
-      "text-start",
-      "text-end",
-    ],
-  },
-  {
-    category: "Text Transform",
-    classes: ["uppercase", "lowercase", "capitalize", "normal-case"],
-  },
-  {
-    category: "Padding",
-    classes: [
-      "p-0",
-      "p-1",
-      "p-2",
-      "p-3",
-      "p-4",
-      "p-5",
-      "p-6",
-      "p-8",
-      "p-10",
-      "p-12",
-      "px-1",
-      "px-2",
-      "px-3",
-      "px-4",
-      "px-6",
-      "px-8",
-      "py-1",
-      "py-2",
-      "py-3",
-      "py-4",
-      "py-6",
-      "py-8",
-      "pt-1",
-      "pt-2",
-      "pt-4",
-      "pt-6",
-      "pt-8",
-      "pb-1",
-      "pb-2",
-      "pb-4",
-      "pb-6",
-      "pb-8",
-      "pl-1",
-      "pl-2",
-      "pl-4",
-      "pl-6",
-      "pl-8",
-      "pr-1",
-      "pr-2",
-      "pr-4",
-      "pr-6",
-      "pr-8",
-    ],
-  },
-  {
-    category: "Margin",
-    classes: [
-      "m-0",
-      "m-1",
-      "m-2",
-      "m-3",
-      "m-4",
-      "m-5",
-      "m-6",
-      "m-8",
-      "m-10",
-      "m-12",
-      "mx-1",
-      "mx-2",
-      "mx-3",
-      "mx-4",
-      "mx-6",
-      "mx-8",
-      "mx-auto",
-      "my-1",
-      "my-2",
-      "my-3",
-      "my-4",
-      "my-6",
-      "my-8",
-      "mt-1",
-      "mt-2",
-      "mt-4",
-      "mt-6",
-      "mt-8",
-      "mb-1",
-      "mb-2",
-      "mb-4",
-      "mb-6",
-      "mb-8",
-      "ml-1",
-      "ml-2",
-      "ml-4",
-      "ml-6",
-      "ml-8",
-      "mr-1",
-      "mr-2",
-      "mr-4",
-      "mr-6",
-      "mr-8",
-    ],
-  },
-  {
-    category: "Border",
-    classes: [
-      "border",
-      "border-0",
-      "border-2",
-      "border-4",
-      "border-8",
-      "border-t",
-      "border-b",
-      "border-l",
-      "border-r",
-      "border-solid",
-      "border-dashed",
-      "border-dotted",
-      "border-double",
-      "border-none",
-    ],
-  },
-  {
-    category: "Border Color",
-    classes: [
-      "border-red-500",
-      "border-blue-500",
-      "border-green-500",
-      "border-yellow-500",
-      "border-purple-500",
-      "border-pink-500",
-      "border-indigo-500",
-      "border-gray-200",
-      "border-gray-300",
-      "border-gray-400",
-      "border-gray-500",
-      "border-white",
-      "border-black",
-      "border-transparent",
-    ],
-  },
-  {
-    category: "Border Radius",
-    classes: [
-      "rounded-none",
-      "rounded-sm",
-      "rounded",
-      "rounded-md",
-      "rounded-lg",
-      "rounded-xl",
-      "rounded-2xl",
-      "rounded-3xl",
-      "rounded-full",
-      "rounded-t-lg",
-      "rounded-b-lg",
-      "rounded-l-lg",
-      "rounded-r-lg",
-    ],
-  },
-  {
-    category: "Shadow",
-    classes: [
-      "shadow-none",
-      "shadow-sm",
-      "shadow",
-      "shadow-md",
-      "shadow-lg",
-      "shadow-xl",
-      "shadow-2xl",
-      "shadow-inner",
-    ],
-  },
-  {
-    category: "Opacity",
-    classes: [
-      "opacity-0",
-      "opacity-5",
-      "opacity-10",
-      "opacity-20",
-      "opacity-25",
-      "opacity-30",
-      "opacity-40",
-      "opacity-50",
-      "opacity-60",
-      "opacity-70",
-      "opacity-75",
-      "opacity-80",
-      "opacity-90",
-      "opacity-95",
-      "opacity-100",
-    ],
-  },
-  {
-    category: "Width",
-    classes: [
-      "w-auto",
-      "w-full",
-      "w-screen",
-      "w-min",
-      "w-max",
-      "w-fit",
-      "w-1/2",
-      "w-1/3",
-      "w-2/3",
-      "w-1/4",
-      "w-3/4",
-      "w-1/5",
-      "w-2/5",
-      "w-3/5",
-      "w-4/5",
-      "w-32",
-      "w-40",
-      "w-48",
-      "w-56",
-      "w-64",
-      "w-72",
-      "w-80",
-      "w-96",
-    ],
-  },
-  {
-    category: "Height",
-    classes: [
-      "h-auto",
-      "h-full",
-      "h-screen",
-      "h-min",
-      "h-max",
-      "h-fit",
-      "h-32",
-      "h-40",
-      "h-48",
-      "h-56",
-      "h-64",
-      "h-72",
-      "h-80",
-      "h-96",
-    ],
-  },
-  {
-    category: "Display",
-    classes: [
-      "block",
-      "inline-block",
-      "inline",
-      "flex",
-      "inline-flex",
-      "grid",
-      "inline-grid",
-      "hidden",
-    ],
-  },
-  {
-    category: "Flex",
-    classes: [
-      "flex-row",
-      "flex-row-reverse",
-      "flex-col",
-      "flex-col-reverse",
-      "flex-wrap",
-      "flex-wrap-reverse",
-      "flex-nowrap",
-      "flex-1",
-      "flex-auto",
-      "flex-initial",
-      "flex-none",
-    ],
-  },
-  {
-    category: "Justify Content",
-    classes: [
-      "justify-start",
-      "justify-end",
-      "justify-center",
-      "justify-between",
-      "justify-around",
-      "justify-evenly",
-    ],
-  },
-  {
-    category: "Align Items",
-    classes: [
-      "items-start",
-      "items-end",
-      "items-center",
-      "items-baseline",
-      "items-stretch",
-    ],
-  },
-  {
-    category: "Gap",
-    classes: [
-      "gap-0",
-      "gap-1",
-      "gap-2",
-      "gap-3",
-      "gap-4",
-      "gap-5",
-      "gap-6",
-      "gap-8",
-      "gap-10",
-      "gap-12",
-      "gap-x-1",
-      "gap-x-2",
-      "gap-x-4",
-      "gap-x-6",
-      "gap-y-1",
-      "gap-y-2",
-      "gap-y-4",
-      "gap-y-6",
-    ],
-  },
-  {
-    category: "Position",
-    classes: ["static", "fixed", "absolute", "relative", "sticky"],
-  },
-  {
-    category: "Z-Index",
-    classes: ["z-0", "z-10", "z-20", "z-30", "z-40", "z-50", "z-auto"],
-  },
-  {
-    category: "Overflow",
-    classes: [
-      "overflow-auto",
-      "overflow-hidden",
-      "overflow-visible",
-      "overflow-scroll",
-      "overflow-x-auto",
-      "overflow-y-auto",
-      "overflow-x-hidden",
-      "overflow-y-hidden",
-    ],
-  },
-  {
-    category: "Cursor",
-    classes: [
-      "cursor-auto",
-      "cursor-default",
-      "cursor-pointer",
-      "cursor-wait",
-      "cursor-text",
-      "cursor-move",
-      "cursor-help",
-      "cursor-not-allowed",
-    ],
-  },
-  {
-    category: "User Select",
-    classes: ["select-none", "select-text", "select-all", "select-auto"],
-  },
-  {
-    category: "Transitions",
-    classes: [
-      "transition-none",
-      "transition-all",
-      "transition",
-      "transition-colors",
-      "transition-opacity",
-      "transition-shadow",
-      "transition-transform",
-      "duration-75",
-      "duration-100",
-      "duration-150",
-      "duration-200",
-      "duration-300",
-      "duration-500",
-      "duration-700",
-      "duration-1000",
-      "ease-linear",
-      "ease-in",
-      "ease-out",
-      "ease-in-out",
-    ],
-  },
-  {
-    category: "Transform",
-    classes: [
-      "scale-0",
-      "scale-50",
-      "scale-75",
-      "scale-90",
-      "scale-95",
-      "scale-100",
-      "scale-105",
-      "scale-110",
-      "scale-125",
-      "scale-150",
-      "rotate-0",
-      "rotate-45",
-      "rotate-90",
-      "rotate-180",
-      "-rotate-45",
-      "-rotate-90",
-      "-rotate-180",
-      "skew-x-3",
-      "skew-x-6",
-      "skew-x-12",
-      "skew-y-3",
-      "skew-y-6",
-      "skew-y-12",
-    ],
-  },
-  {
-    category: "Gradient",
-    classes: [
-      "bg-gradient-to-t",
-      "bg-gradient-to-tr",
-      "bg-gradient-to-r",
-      "bg-gradient-to-br",
-      "bg-gradient-to-b",
-      "bg-gradient-to-bl",
-      "bg-gradient-to-l",
-      "bg-gradient-to-tl",
-      "from-red-500",
-      "from-blue-500",
-      "from-green-500",
-      "from-yellow-500",
-      "from-purple-500",
-      "via-red-500",
-      "via-blue-500",
-      "via-green-500",
-      "to-red-500",
-      "to-blue-500",
-      "to-green-500",
-      "to-yellow-500",
-      "to-purple-500",
-    ],
-  },
-  {
-    category: "Letter Spacing",
-    classes: [
-      "tracking-tighter",
-      "tracking-tight",
-      "tracking-normal",
-      "tracking-wide",
-      "tracking-wider",
-      "tracking-widest",
-    ],
-  },
-  {
-    category: "Line Height",
-    classes: [
-      "leading-none",
-      "leading-tight",
-      "leading-snug",
-      "leading-normal",
-      "leading-relaxed",
-      "leading-loose",
-      "leading-3",
-      "leading-4",
-      "leading-5",
-      "leading-6",
-      "leading-7",
-      "leading-8",
-      "leading-9",
-      "leading-10",
-    ],
-  },
-  {
-    category: "List Style",
-    classes: [
-      "list-none",
-      "list-disc",
-      "list-decimal",
-      "list-inside",
-      "list-outside",
-    ],
-  },
-  {
-    category: "Whitespace",
-    classes: [
-      "whitespace-normal",
-      "whitespace-nowrap",
-      "whitespace-pre",
-      "whitespace-pre-line",
-      "whitespace-pre-wrap",
-    ],
-  },
-  {
-    category: "Word Break",
-    classes: ["break-normal", "break-words", "break-all", "truncate"],
-  },
-]
-
-/**
- * Get popular/frequently used classes for quick access
- */
-export const popularClasses = [
-  "text-red-500",
-  "text-blue-500",
-  "text-green-500",
-  "bg-yellow-100",
-  "bg-blue-100",
-  "bg-green-100",
-  "font-bold",
-  "font-semibold",
-  "underline",
-  "text-2xl",
-  "text-xl",
-  "opacity-50",
-  "rounded-lg",
-  "shadow-md",
-  "p-4",
-  "m-4",
-  "border",
-  "flex",
-  "grid",
-  "text-center",
-]
-
-/**
- * Search classes by keyword
- */
-export function searchTailwindClasses(query: string): string[] {
-  const lowerQuery = query.toLowerCase()
-  const results: string[] = []
-
-  tailwindClasses.forEach((group) => {
-    group.classes.forEach((className) => {
-      if (className.toLowerCase().includes(lowerQuery)) {
-        results.push(className)
-      }
-    })
-  })
-
-  return results
-}
-
-/**
- * Get all classes as a flat array
- */
-export function getAllClasses(): string[] {
-  return tailwindClasses.flatMap((group) => group.classes)
-}
diff --git a/apps/web/src/components/ui/rich-editor/templates.ts b/apps/web/src/components/ui/rich-editor/templates.ts
deleted file mode 100644
index d40e6183..00000000
--- a/apps/web/src/components/ui/rich-editor/templates.ts
+++ /dev/null
@@ -1,4031 +0,0 @@
-import { ContainerNode, EditorNode, StructuralNode, TextNode } from "./types"
-
-/**
- * Template metadata for organizing and displaying templates
- */
-export interface TemplateMetadata {
-  id: string
-  name: string
-  description: string
-  category: "productivity" | "creative" | "business" | "personal"
-  icon: string
-  thumbnail?: string
-}
-
-/**
- * Complete template with metadata and content
- */
-export interface Template {
-  metadata: TemplateMetadata
-  content: EditorNode[]
-  coverImage?: {
-    url: string
-    alt: string
-    position: number
-  }
-}
-
-/**
- * Generate unique IDs for template nodes
- */
-function id(templateId: string, suffix: string): string {
-  return `${templateId}-${Date.now()}-${suffix}`
-}
-
-// ========================================
-// BLANK TEMPLATE
-// ========================================
-
-export function createBlankTemplate(): Template {
-  const tid = "blank"
-  return {
-    metadata: {
-      id: tid,
-      name: "Blank Document",
-      description: "Start with a clean slate",
-      category: "productivity",
-      icon: "📄",
-    },
-    content: [
-      {
-        id: id(tid, "1"),
-        type: "p",
-        content: "Start writing...",
-        attributes: {},
-      } as TextNode,
-    ],
-  }
-}
-
-// ========================================
-// MEETING NOTES TEMPLATE
-// ========================================
-
-export function createMeetingNotesTemplate(): Template {
-  const tid = "meeting-notes"
-  return {
-    metadata: {
-      id: tid,
-      name: "Meeting Notes",
-      description: "Structured template for meeting documentation",
-      category: "productivity",
-      icon: "📝",
-    },
-    content: [
-      {
-        id: id(tid, "title"),
-        type: "h1",
-        content: "Meeting Notes - [Date]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "meta-section"),
-        type: "blockquote",
-        children: [
-          { content: "📅 Date: ", bold: true },
-          { content: "[Insert Date]", italic: true },
-          { content: " | ", bold: false },
-          { content: "⏰ Time: ", bold: true },
-          { content: "[Insert Time]", italic: true },
-          { content: " | ", bold: false },
-          { content: "📍 Location: ", bold: true },
-          { content: "[Insert Location]", italic: true },
-        ],
-        attributes: {
-          className: "bg-blue-50 dark:bg-blue-900/20 border-blue-500",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "attendees-heading"),
-        type: "h2",
-        content: "👥 Attendees",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "attendees-list"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "attendee-1"),
-            type: "li",
-            content: "[Name 1] - [Role]",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "attendee-2"),
-            type: "li",
-            content: "[Name 2] - [Role]",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "attendee-3"),
-            type: "li",
-            content: "[Name 3] - [Role]",
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "agenda-heading"),
-        type: "h2",
-        content: "📋 Agenda",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "agenda-list"),
-        type: "container",
-        attributes: { listType: "ol" },
-        children: [
-          {
-            id: id(tid, "agenda-1"),
-            type: "li",
-            content: "Introduction and welcome",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "agenda-2"),
-            type: "li",
-            content: "Review previous action items",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "agenda-3"),
-            type: "li",
-            content: "Main discussion topics",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "agenda-4"),
-            type: "li",
-            content: "Action items and next steps",
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "discussion-heading"),
-        type: "h2",
-        content: "💬 Discussion Points",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "discussion-1-title"),
-        type: "h3",
-        content: "Topic 1: [Title]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "discussion-1-content"),
-        type: "p",
-        content: "[Discussion notes and key points go here...]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "discussion-2-title"),
-        type: "h3",
-        content: "Topic 2: [Title]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "discussion-2-content"),
-        type: "p",
-        content: "[Discussion notes and key points go here...]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "decisions-heading"),
-        type: "h2",
-        content: "✅ Decisions Made",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "decisions-list"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "decision-1"),
-            type: "li",
-            content: "[Decision 1]",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "decision-2"),
-            type: "li",
-            content: "[Decision 2]",
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "actions-heading"),
-        type: "h2",
-        content: "🎯 Action Items",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "actions-table-wrapper"),
-        type: "container",
-        children: [
-          {
-            id: id(tid, "actions-table"),
-            type: "table",
-            children: [
-              {
-                id: id(tid, "actions-thead"),
-                type: "thead",
-                children: [
-                  {
-                    id: id(tid, "actions-tr-header"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "th-action"),
-                        type: "th",
-                        content: "Action Item",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-owner"),
-                        type: "th",
-                        content: "Owner",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-deadline"),
-                        type: "th",
-                        content: "Deadline",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-status"),
-                        type: "th",
-                        content: "Status",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-              {
-                id: id(tid, "actions-tbody"),
-                type: "tbody",
-                children: [
-                  {
-                    id: id(tid, "actions-tr-1"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-action-1"),
-                        type: "td",
-                        content: "[Action description]",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-owner-1"),
-                        type: "td",
-                        content: "[Person name]",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-deadline-1"),
-                        type: "td",
-                        content: "[Date]",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-status-1"),
-                        type: "td",
-                        content: "🔄 In Progress",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "actions-tr-2"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-action-2"),
-                        type: "td",
-                        content: "[Action description]",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-owner-2"),
-                        type: "td",
-                        content: "[Person name]",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-deadline-2"),
-                        type: "td",
-                        content: "[Date]",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-status-2"),
-                        type: "td",
-                        content: "⏳ Pending",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      } as ContainerNode,
-
-      {
-        id: id(tid, "next-meeting"),
-        type: "h2",
-        content: "📅 Next Meeting",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "next-meeting-info"),
-        type: "blockquote",
-        children: [
-          { content: "📅 Date: ", bold: true },
-          { content: "[Insert Date]", italic: true },
-          { content: " | ", bold: false },
-          { content: "⏰ Time: ", bold: true },
-          { content: "[Insert Time]", italic: true },
-          { content: " | ", bold: false },
-          { content: "📍 Location: ", bold: true },
-          { content: "[Insert Location]", italic: true },
-        ],
-        attributes: {
-          className: "bg-green-50 dark:bg-green-900/20 border-green-500",
-        },
-      } as TextNode,
-    ],
-  }
-}
-
-// ========================================
-// PRODUCT REQUIREMENTS DOCUMENT (PRD)
-// ========================================
-
-export function createPRDTemplate(): Template {
-  const tid = "prd"
-  return {
-    metadata: {
-      id: tid,
-      name: "Product Requirements Document",
-      description: "Professional PRD template for product development",
-      category: "business",
-      icon: "📊",
-    },
-    content: [
-      {
-        id: id(tid, "title"),
-        type: "h1",
-        content: "[Product Name] - Requirements Document",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "version-info"),
-        type: "blockquote",
-        children: [
-          { content: "📄 Version: ", bold: true },
-          { content: "1.0", italic: true },
-          { content: " | ", bold: false },
-          { content: "📅 Date: ", bold: true },
-          { content: "[Current Date]", italic: true },
-          { content: " | ", bold: false },
-          { content: "✍️ Author: ", bold: true },
-          { content: "[Your Name]", italic: true },
-        ],
-        attributes: {
-          className: "bg-blue-50 dark:bg-blue-900/20 border-blue-500",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "overview-heading"),
-        type: "h2",
-        content: "🎯 Product Overview",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "overview-desc"),
-        type: "p",
-        content:
-          "[Brief description of the product, its purpose, and the problem it solves. Include the vision and strategic goals.]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "objectives-heading"),
-        type: "h2",
-        content: "🚀 Objectives & Success Metrics",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "objectives-table-wrapper"),
-        type: "container",
-        children: [
-          {
-            id: id(tid, "objectives-table"),
-            type: "table",
-            children: [
-              {
-                id: id(tid, "objectives-thead"),
-                type: "thead",
-                children: [
-                  {
-                    id: id(tid, "objectives-tr-header"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "th-objective"),
-                        type: "th",
-                        content: "Objective",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-metric"),
-                        type: "th",
-                        content: "Success Metric",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-target"),
-                        type: "th",
-                        content: "Target",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-              {
-                id: id(tid, "objectives-tbody"),
-                type: "tbody",
-                children: [
-                  {
-                    id: id(tid, "objectives-tr-1"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-objective-1"),
-                        type: "td",
-                        content: "Increase user engagement",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-metric-1"),
-                        type: "td",
-                        content: "Daily Active Users (DAU)",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-target-1"),
-                        type: "td",
-                        content: "+25%",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "objectives-tr-2"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-objective-2"),
-                        type: "td",
-                        content: "Improve conversion rate",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-metric-2"),
-                        type: "td",
-                        content: "Signup to paid conversion",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-target-2"),
-                        type: "td",
-                        content: "+15%",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      } as ContainerNode,
-
-      {
-        id: id(tid, "user-stories-heading"),
-        type: "h2",
-        content: "👥 User Stories",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "user-story-1"),
-        type: "blockquote",
-        children: [
-          { content: "As a ", italic: true },
-          { content: "[user type]", bold: true, italic: true },
-          { content: ", I want to ", italic: true },
-          { content: "[action]", bold: true, italic: true },
-          { content: " so that ", italic: true },
-          { content: "[benefit]", bold: true, italic: true },
-          { content: ".", italic: true },
-        ],
-        attributes: {
-          className: "bg-purple-50 dark:bg-purple-900/20 border-purple-500",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "features-heading"),
-        type: "h2",
-        content: "✨ Feature Requirements",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "feature-1-title"),
-        type: "h3",
-        content: "Feature 1: [Feature Name]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "feature-1-desc"),
-        type: "p",
-        content: "[Detailed description of the feature and its purpose]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "feature-1-requirements"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "feature-1-req-1"),
-            type: "li",
-            children: [
-              { content: "Must have: ", bold: true },
-              { content: "[Core requirement]", bold: false },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "feature-1-req-2"),
-            type: "li",
-            children: [
-              { content: "Should have: ", bold: true },
-              { content: "[Important requirement]", bold: false },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "feature-1-req-3"),
-            type: "li",
-            children: [
-              { content: "Could have: ", bold: true },
-              { content: "[Nice to have]", bold: false },
-            ],
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "technical-heading"),
-        type: "h2",
-        content: "⚙️ Technical Requirements",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "technical-list"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "tech-1"),
-            type: "li",
-            children: [
-              { content: "Performance: ", bold: true },
-              { content: "Load time < 2 seconds", bold: false },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "tech-2"),
-            type: "li",
-            children: [
-              { content: "Scalability: ", bold: true },
-              { content: "Support 100,000+ concurrent users", bold: false },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "tech-3"),
-            type: "li",
-            children: [
-              { content: "Security: ", bold: true },
-              {
-                content: "GDPR compliant, encrypted data at rest",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "tech-4"),
-            type: "li",
-            children: [
-              { content: "Compatibility: ", bold: true },
-              {
-                content:
-                  "Support modern browsers (Chrome, Firefox, Safari, Edge)",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "timeline-heading"),
-        type: "h2",
-        content: "📅 Timeline & Milestones",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "timeline-table-wrapper"),
-        type: "container",
-        children: [
-          {
-            id: id(tid, "timeline-table"),
-            type: "table",
-            children: [
-              {
-                id: id(tid, "timeline-thead"),
-                type: "thead",
-                children: [
-                  {
-                    id: id(tid, "timeline-tr-header"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "th-milestone"),
-                        type: "th",
-                        content: "Milestone",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-deliverables"),
-                        type: "th",
-                        content: "Deliverables",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-date"),
-                        type: "th",
-                        content: "Target Date",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-              {
-                id: id(tid, "timeline-tbody"),
-                type: "tbody",
-                children: [
-                  {
-                    id: id(tid, "timeline-tr-1"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-milestone-1"),
-                        type: "td",
-                        content: "Design Phase",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-deliverables-1"),
-                        type: "td",
-                        content: "Wireframes, mockups, prototype",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-date-1"),
-                        type: "td",
-                        content: "Week 1-2",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "timeline-tr-2"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-milestone-2"),
-                        type: "td",
-                        content: "Development Sprint 1",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-deliverables-2"),
-                        type: "td",
-                        content: "Core features implementation",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-date-2"),
-                        type: "td",
-                        content: "Week 3-6",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "timeline-tr-3"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-milestone-3"),
-                        type: "td",
-                        content: "Beta Release",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-deliverables-3"),
-                        type: "td",
-                        content: "Feature complete, testing",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-date-3"),
-                        type: "td",
-                        content: "Week 7-8",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      } as ContainerNode,
-
-      {
-        id: id(tid, "risks-heading"),
-        type: "h2",
-        content: "⚠️ Risks & Mitigation",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "risk-1"),
-        type: "blockquote",
-        children: [
-          { content: "Risk: ", bold: true },
-          { content: "[Potential risk description]", italic: true },
-          { content: " | ", bold: false },
-          { content: "Mitigation: ", bold: true },
-          { content: "[How to address this risk]", italic: true },
-        ],
-        attributes: {
-          className: "bg-red-50 dark:bg-red-900/20 border-red-500",
-        },
-      } as TextNode,
-    ],
-  }
-}
-
-// ========================================
-// PHOTO GALLERY TEMPLATE
-// ========================================
-
-export function createGalleryTemplate(): Template {
-  const tid = "gallery"
-  return {
-    metadata: {
-      id: tid,
-      name: "Photo Gallery",
-      description: "Showcase images in beautiful gallery layouts",
-      category: "creative",
-      icon: "🖼️",
-    },
-    content: [
-      {
-        id: id(tid, "title"),
-        type: "h1",
-        content: "My Photo Gallery",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "intro"),
-        type: "p",
-        children: [
-          { content: "Welcome to my ", bold: false },
-          {
-            content: "photo gallery",
-            bold: true,
-            className: "text-purple-600 dark:text-purple-400",
-          },
-          {
-            content:
-              "! This collection showcases various moments and memories. Click on any image to view it larger, or use Ctrl+Click to select multiple images.",
-            bold: false,
-          },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "collection-1-title"),
-        type: "h2",
-        content: "🌅 Landscape Collection",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "collection-1-desc"),
-        type: "p",
-        content:
-          "Beautiful landscapes captured during travels around the world.",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "placeholder-note"),
-        type: "p",
-        children: [
-          {
-            content: "Remove this content and type ",
-            bold: false,
-          },
-          {
-            content: "/image",
-            bold: true,
-            elementType: "code",
-          },
-        ],
-        attributes: {
-          className:
-            "border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg py-16 text-center bg-gray-50 dark:bg-gray-900/30",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "collection-2-title"),
-        type: "h2",
-        content: "🏙️ Urban Photography",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "collection-2-desc"),
-        type: "p",
-        content:
-          "City streets, architecture, and urban life captured in stunning detail.",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "placeholder-note-2"),
-        type: "p",
-        children: [
-          {
-            content: "Remove this content and type ",
-            bold: false,
-          },
-          {
-            content: "/image",
-            bold: true,
-            elementType: "code",
-          },
-        ],
-        attributes: {
-          className:
-            "border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg py-16 text-center bg-gray-50 dark:bg-gray-900/30",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "collection-3-title"),
-        type: "h2",
-        content: "👨‍👩‍👧‍👦 Portrait Gallery",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "collection-3-desc"),
-        type: "p",
-        content: "Portraits capturing emotions, personalities, and moments.",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "placeholder-note-3"),
-        type: "p",
-        children: [
-          {
-            content: "Remove this content and type ",
-            bold: false,
-          },
-          {
-            content: "/image",
-            bold: true,
-            elementType: "code",
-          },
-        ],
-        attributes: {
-          className:
-            "border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg py-16 text-center bg-gray-50 dark:bg-gray-900/30",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "features"),
-        type: "h2",
-        content: "✨ Gallery Features",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "features-list"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "feature-1"),
-            type: "li",
-            children: [
-              { content: "📷 Multi-select images", bold: true },
-              {
-                content: " with Ctrl+Click to group or rearrange",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "feature-2"),
-            type: "li",
-            children: [
-              { content: "🎨 Flexible layouts", bold: true },
-              {
-                content: " - single images or grid arrangements",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "feature-3"),
-            type: "li",
-            children: [
-              { content: "🖱️ Drag & drop", bold: true },
-              { content: " to reorder images within grids", bold: false },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "feature-4"),
-            type: "li",
-            children: [
-              { content: "📝 Add captions", bold: true },
-              {
-                content: " to describe each photo and provide context",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "footer"),
-        type: "blockquote",
-        children: [
-          {
-            content: "📸 ",
-            bold: false,
-          },
-          {
-            content: "Pro Tip: ",
-            bold: true,
-          },
-          {
-            content:
-              "Upload multiple images at once, then select them with Ctrl+Click and use the ",
-            italic: true,
-          },
-          {
-            content: "Group Images",
-            bold: true,
-            italic: true,
-          },
-          {
-            content: " button to create beautiful side-by-side layouts!",
-            italic: true,
-          },
-        ],
-        attributes: {
-          className: "bg-purple-50 dark:bg-purple-900/20 border-purple-500",
-        },
-      } as TextNode,
-    ],
-    coverImage: {
-      url: "/templates/gallery/gallery-cover.jpg",
-      alt: "Gallery cover image",
-      position: 50,
-    },
-  }
-}
-
-// ========================================
-// PROJECT PLANNING TEMPLATE
-// ========================================
-
-export function createProjectPlanTemplate(): Template {
-  const tid = "project-plan"
-  return {
-    metadata: {
-      id: tid,
-      name: "Project Plan",
-      description: "Comprehensive project planning and tracking",
-      category: "productivity",
-      icon: "🗓️",
-    },
-    content: [
-      {
-        id: id(tid, "title"),
-        type: "h1",
-        content: "[Project Name] - Project Plan",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "summary"),
-        type: "blockquote",
-        children: [
-          { content: "📋 Project ID: ", bold: true },
-          { content: "[PRJ-001]", italic: true },
-          { content: " | ", bold: false },
-          { content: "📅 Start Date: ", bold: true },
-          { content: "[Date]", italic: true },
-          { content: " | ", bold: false },
-          { content: "🎯 Target Date: ", bold: true },
-          { content: "[Date]", italic: true },
-          { content: " | ", bold: false },
-          { content: "👤 PM: ", bold: true },
-          { content: "[Name]", italic: true },
-        ],
-        attributes: {
-          className: "bg-blue-50 dark:bg-blue-900/20 border-blue-500",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "executive-heading"),
-        type: "h2",
-        content: "📄 Executive Summary",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "executive-content"),
-        type: "p",
-        content:
-          "[High-level overview of the project, its goals, and expected outcomes. Keep it concise - 2-3 sentences.]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "team-heading"),
-        type: "h2",
-        content: "👥 Team Structure",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "team-table-wrapper"),
-        type: "container",
-        children: [
-          {
-            id: id(tid, "team-table"),
-            type: "table",
-            children: [
-              {
-                id: id(tid, "team-thead"),
-                type: "thead",
-                children: [
-                  {
-                    id: id(tid, "team-tr-header"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "th-name"),
-                        type: "th",
-                        content: "Name",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-role"),
-                        type: "th",
-                        content: "Role",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-responsibilities"),
-                        type: "th",
-                        content: "Key Responsibilities",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-              {
-                id: id(tid, "team-tbody"),
-                type: "tbody",
-                children: [
-                  {
-                    id: id(tid, "team-tr-1"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-name-1"),
-                        type: "td",
-                        content: "[Name]",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-role-1"),
-                        type: "td",
-                        content: "Project Manager",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-resp-1"),
-                        type: "td",
-                        content:
-                          "Overall coordination, stakeholder communication",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "team-tr-2"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-name-2"),
-                        type: "td",
-                        content: "[Name]",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-role-2"),
-                        type: "td",
-                        content: "Lead Developer",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-resp-2"),
-                        type: "td",
-                        content: "Technical architecture, code review",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "team-tr-3"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-name-3"),
-                        type: "td",
-                        content: "[Name]",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-role-3"),
-                        type: "td",
-                        content: "UX Designer",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-resp-3"),
-                        type: "td",
-                        content: "User research, wireframes, prototypes",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      } as ContainerNode,
-
-      {
-        id: id(tid, "phases-heading"),
-        type: "h2",
-        content: "🔄 Project Phases",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "phase-1-title"),
-        type: "h3",
-        content: "Phase 1: Discovery & Planning",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "phase-1-duration"),
-        type: "p",
-        children: [
-          { content: "⏱️ Duration: ", bold: true },
-          { content: "2 weeks", bold: false },
-          { content: " | ", bold: false },
-          { content: "📅 Dates: ", bold: true },
-          { content: "[Start] - [End]", bold: false },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "phase-1-tasks"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "phase-1-task-1"),
-            type: "li",
-            content: "Stakeholder interviews and requirements gathering",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "phase-1-task-2"),
-            type: "li",
-            content: "Technical feasibility assessment",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "phase-1-task-3"),
-            type: "li",
-            content: "Create project charter and communication plan",
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "phase-2-title"),
-        type: "h3",
-        content: "Phase 2: Design & Architecture",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "phase-2-duration"),
-        type: "p",
-        children: [
-          { content: "⏱️ Duration: ", bold: true },
-          { content: "3 weeks", bold: false },
-          { content: " | ", bold: false },
-          { content: "📅 Dates: ", bold: true },
-          { content: "[Start] - [End]", bold: false },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "phase-2-tasks"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "phase-2-task-1"),
-            type: "li",
-            content: "Create wireframes and mockups",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "phase-2-task-2"),
-            type: "li",
-            content: "Design system architecture",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "phase-2-task-3"),
-            type: "li",
-            content: "Set up development environment",
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "phase-3-title"),
-        type: "h3",
-        content: "Phase 3: Development",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "phase-3-duration"),
-        type: "p",
-        children: [
-          { content: "⏱️ Duration: ", bold: true },
-          { content: "6 weeks", bold: false },
-          { content: " | ", bold: false },
-          { content: "📅 Dates: ", bold: true },
-          { content: "[Start] - [End]", bold: false },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "phase-3-tasks"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "phase-3-task-1"),
-            type: "li",
-            content: "Sprint 1: Core functionality",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "phase-3-task-2"),
-            type: "li",
-            content: "Sprint 2: User interface implementation",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "phase-3-task-3"),
-            type: "li",
-            content: "Sprint 3: Integration and testing",
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "risks-heading"),
-        type: "h2",
-        content: "⚠️ Risk Management",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "risks-table-wrapper"),
-        type: "container",
-        children: [
-          {
-            id: id(tid, "risks-table"),
-            type: "table",
-            children: [
-              {
-                id: id(tid, "risks-thead"),
-                type: "thead",
-                children: [
-                  {
-                    id: id(tid, "risks-tr-header"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "th-risk"),
-                        type: "th",
-                        content: "Risk",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-impact"),
-                        type: "th",
-                        content: "Impact",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-probability"),
-                        type: "th",
-                        content: "Probability",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-mitigation"),
-                        type: "th",
-                        content: "Mitigation Strategy",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-              {
-                id: id(tid, "risks-tbody"),
-                type: "tbody",
-                children: [
-                  {
-                    id: id(tid, "risks-tr-1"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-risk-1"),
-                        type: "td",
-                        content: "Scope creep",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-impact-1"),
-                        type: "td",
-                        content: "High",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-prob-1"),
-                        type: "td",
-                        content: "Medium",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-mit-1"),
-                        type: "td",
-                        content: "Strict change control process",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "risks-tr-2"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-risk-2"),
-                        type: "td",
-                        content: "Resource availability",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-impact-2"),
-                        type: "td",
-                        content: "High",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-prob-2"),
-                        type: "td",
-                        content: "Low",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-mit-2"),
-                        type: "td",
-                        content: "Cross-train team members",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      } as ContainerNode,
-
-      {
-        id: id(tid, "budget-heading"),
-        type: "h2",
-        content: "💰 Budget Overview",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "budget-table-wrapper"),
-        type: "container",
-        children: [
-          {
-            id: id(tid, "budget-table"),
-            type: "table",
-            children: [
-              {
-                id: id(tid, "budget-thead"),
-                type: "thead",
-                children: [
-                  {
-                    id: id(tid, "budget-tr-header"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "th-category"),
-                        type: "th",
-                        content: "Category",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-allocated"),
-                        type: "th",
-                        content: "Allocated",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-spent"),
-                        type: "th",
-                        content: "Spent",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-remaining"),
-                        type: "th",
-                        content: "Remaining",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-              {
-                id: id(tid, "budget-tbody"),
-                type: "tbody",
-                children: [
-                  {
-                    id: id(tid, "budget-tr-1"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-category-1"),
-                        type: "td",
-                        content: "Personnel",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-allocated-1"),
-                        type: "td",
-                        content: "$50,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-spent-1"),
-                        type: "td",
-                        content: "$12,500",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-remaining-1"),
-                        type: "td",
-                        content: "$37,500",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "budget-tr-2"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-category-2"),
-                        type: "td",
-                        content: "Software/Tools",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-allocated-2"),
-                        type: "td",
-                        content: "$10,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-spent-2"),
-                        type: "td",
-                        content: "$5,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-remaining-2"),
-                        type: "td",
-                        content: "$5,000",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "budget-tr-3"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-category-3"),
-                        type: "td",
-                        content: "Infrastructure",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-allocated-3"),
-                        type: "td",
-                        content: "$15,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-spent-3"),
-                        type: "td",
-                        content: "$2,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-remaining-3"),
-                        type: "td",
-                        content: "$13,000",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      } as ContainerNode,
-    ],
-  }
-}
-
-// ========================================
-// FINANCIAL REPORT TEMPLATE
-// ========================================
-
-export function createFinancialReportTemplate(): Template {
-  const tid = "financial"
-  return {
-    metadata: {
-      id: tid,
-      name: "Financial Report",
-      description: "Professional financial reporting with tables",
-      category: "business",
-      icon: "💰",
-    },
-    content: [
-      {
-        id: id(tid, "title"),
-        type: "h1",
-        content: "Financial Report - Q4 2024",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "summary"),
-        type: "blockquote",
-        children: [
-          { content: "📊 Reporting Period: ", bold: true },
-          { content: "Q4 2024", italic: true },
-          { content: " | ", bold: false },
-          { content: "📅 Report Date: ", bold: true },
-          { content: "[Current Date]", italic: true },
-          { content: " | ", bold: false },
-          { content: "✍️ Prepared by: ", bold: true },
-          { content: "[Your Name]", italic: true },
-        ],
-        attributes: {
-          className: "bg-green-50 dark:bg-green-900/20 border-green-500",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "executive-heading"),
-        type: "h2",
-        content: "📈 Executive Summary",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "executive-content"),
-        type: "p",
-        content:
-          "[Brief overview of financial performance, key highlights, and major trends for the period.]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "revenue-heading"),
-        type: "h2",
-        content: "💵 Revenue Analysis",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "revenue-table-wrapper"),
-        type: "container",
-        children: [
-          {
-            id: id(tid, "revenue-table"),
-            type: "table",
-            children: [
-              {
-                id: id(tid, "revenue-thead"),
-                type: "thead",
-                children: [
-                  {
-                    id: id(tid, "revenue-tr-header"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "th-source"),
-                        type: "th",
-                        content: "Revenue Source",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-q3"),
-                        type: "th",
-                        content: "Q3 2024",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-q4"),
-                        type: "th",
-                        content: "Q4 2024",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-change"),
-                        type: "th",
-                        content: "Change %",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-              {
-                id: id(tid, "revenue-tbody"),
-                type: "tbody",
-                children: [
-                  {
-                    id: id(tid, "revenue-tr-1"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-source-1"),
-                        type: "td",
-                        content: "Product Sales",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-q3-1"),
-                        type: "td",
-                        content: "$125,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-q4-1"),
-                        type: "td",
-                        content: "$145,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-change-1"),
-                        type: "td",
-                        content: "+16%",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "revenue-tr-2"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-source-2"),
-                        type: "td",
-                        content: "Services",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-q3-2"),
-                        type: "td",
-                        content: "$75,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-q4-2"),
-                        type: "td",
-                        content: "$82,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-change-2"),
-                        type: "td",
-                        content: "+9.3%",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "revenue-tr-3"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-source-3"),
-                        type: "td",
-                        content: "Subscriptions",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-q3-3"),
-                        type: "td",
-                        content: "$50,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-q4-3"),
-                        type: "td",
-                        content: "$65,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-change-3"),
-                        type: "td",
-                        content: "+30%",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "revenue-tr-total"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-source-total"),
-                        type: "td",
-                        content: "Total Revenue",
-                        attributes: { className: "font-bold" },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-q3-total"),
-                        type: "td",
-                        content: "$250,000",
-                        attributes: { className: "font-bold" },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-q4-total"),
-                        type: "td",
-                        content: "$292,000",
-                        attributes: { className: "font-bold" },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-change-total"),
-                        type: "td",
-                        content: "+16.8%",
-                        attributes: { className: "font-bold text-green-600" },
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      } as ContainerNode,
-
-      {
-        id: id(tid, "expenses-heading"),
-        type: "h2",
-        content: "💸 Expense Breakdown",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "expenses-table-wrapper"),
-        type: "container",
-        children: [
-          {
-            id: id(tid, "expenses-table"),
-            type: "table",
-            children: [
-              {
-                id: id(tid, "expenses-thead"),
-                type: "thead",
-                children: [
-                  {
-                    id: id(tid, "expenses-tr-header"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "th-expense-category"),
-                        type: "th",
-                        content: "Category",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-amount"),
-                        type: "th",
-                        content: "Amount",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-percentage"),
-                        type: "th",
-                        content: "% of Total",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-              {
-                id: id(tid, "expenses-tbody"),
-                type: "tbody",
-                children: [
-                  {
-                    id: id(tid, "expenses-tr-1"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-exp-cat-1"),
-                        type: "td",
-                        content: "Salaries & Wages",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-amount-1"),
-                        type: "td",
-                        content: "$120,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-percentage-1"),
-                        type: "td",
-                        content: "60%",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "expenses-tr-2"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-exp-cat-2"),
-                        type: "td",
-                        content: "Marketing",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-amount-2"),
-                        type: "td",
-                        content: "$30,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-percentage-2"),
-                        type: "td",
-                        content: "15%",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "expenses-tr-3"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-exp-cat-3"),
-                        type: "td",
-                        content: "Operations",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-amount-3"),
-                        type: "td",
-                        content: "$25,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-percentage-3"),
-                        type: "td",
-                        content: "12.5%",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "expenses-tr-4"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-exp-cat-4"),
-                        type: "td",
-                        content: "Technology & Tools",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-amount-4"),
-                        type: "td",
-                        content: "$15,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-percentage-4"),
-                        type: "td",
-                        content: "7.5%",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "expenses-tr-5"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-exp-cat-5"),
-                        type: "td",
-                        content: "Other",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-amount-5"),
-                        type: "td",
-                        content: "$10,000",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-percentage-5"),
-                        type: "td",
-                        content: "5%",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "expenses-tr-total"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-exp-cat-total"),
-                        type: "td",
-                        content: "Total Expenses",
-                        attributes: { className: "font-bold" },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-amount-total"),
-                        type: "td",
-                        content: "$200,000",
-                        attributes: { className: "font-bold" },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-percentage-total"),
-                        type: "td",
-                        content: "100%",
-                        attributes: { className: "font-bold" },
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      } as ContainerNode,
-
-      {
-        id: id(tid, "profit-heading"),
-        type: "h2",
-        content: "📊 Profit & Loss Summary",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "profit-table-wrapper"),
-        type: "container",
-        children: [
-          {
-            id: id(tid, "profit-table"),
-            type: "table",
-            children: [
-              {
-                id: id(tid, "profit-thead"),
-                type: "thead",
-                children: [
-                  {
-                    id: id(tid, "profit-tr-header"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "th-metric"),
-                        type: "th",
-                        content: "Metric",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-value"),
-                        type: "th",
-                        content: "Value",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-              {
-                id: id(tid, "profit-tbody"),
-                type: "tbody",
-                children: [
-                  {
-                    id: id(tid, "profit-tr-1"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-metric-1"),
-                        type: "td",
-                        content: "Total Revenue",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-value-1"),
-                        type: "td",
-                        content: "$292,000",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "profit-tr-2"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-metric-2"),
-                        type: "td",
-                        content: "Total Expenses",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-value-2"),
-                        type: "td",
-                        content: "$200,000",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "profit-tr-3"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-metric-3"),
-                        type: "td",
-                        content: "Net Profit",
-                        attributes: {
-                          className:
-                            "font-bold text-green-600 dark:text-green-400",
-                        },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-value-3"),
-                        type: "td",
-                        content: "$92,000",
-                        attributes: {
-                          className:
-                            "font-bold text-green-600 dark:text-green-400",
-                        },
-                      } as TextNode,
-                    ],
-                    attributes: {
-                      className: "bg-green-50 dark:bg-green-900/20",
-                    },
-                  },
-                  {
-                    id: id(tid, "profit-tr-4"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-metric-4"),
-                        type: "td",
-                        content: "Profit Margin",
-                        attributes: { className: "font-bold" },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-value-4"),
-                        type: "td",
-                        content: "31.5%",
-                        attributes: { className: "font-bold" },
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      } as ContainerNode,
-
-      {
-        id: id(tid, "insights-heading"),
-        type: "h2",
-        content: "💡 Key Insights",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "insights-list"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "insight-1"),
-            type: "li",
-            children: [
-              { content: "Strong Revenue Growth: ", bold: true },
-              {
-                content:
-                  "16.8% increase quarter-over-quarter driven by subscription model",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "insight-2"),
-            type: "li",
-            children: [
-              { content: "Healthy Profit Margin: ", bold: true },
-              {
-                content:
-                  "31.5% profit margin indicates sustainable business model",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "insight-3"),
-            type: "li",
-            children: [
-              { content: "Subscription Success: ", bold: true },
-              {
-                content:
-                  "30% growth in subscription revenue - highest performing segment",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "recommendations-heading"),
-        type: "h2",
-        content: "🎯 Recommendations",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "recommendations-list"),
-        type: "container",
-        attributes: { listType: "ol" },
-        children: [
-          {
-            id: id(tid, "rec-1"),
-            type: "li",
-            content:
-              "Continue investing in subscription model - highest growth potential",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "rec-2"),
-            type: "li",
-            content:
-              "Optimize marketing spend - track ROI more closely for better efficiency",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "rec-3"),
-            type: "li",
-            content:
-              "Explore cost reduction in operations while maintaining quality",
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-    ],
-  }
-}
-
-// ========================================
-// BLOG POST TEMPLATE
-// ========================================
-
-export function createBlogPostTemplate(): Template {
-  const tid = "blog"
-  return {
-    metadata: {
-      id: tid,
-      name: "Blog Post",
-      description: "Professional blog post with rich formatting",
-      category: "creative",
-      icon: "✍️",
-    },
-    content: [
-      {
-        id: id(tid, "title"),
-        type: "h1",
-        content: "[Your Blog Post Title Goes Here]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "meta"),
-        type: "blockquote",
-        children: [
-          { content: "✍️ By: ", bold: true },
-          { content: "[Your Name]", italic: true },
-          { content: " | ", bold: false },
-          { content: "📅 Published: ", bold: true },
-          { content: "[Date]", italic: true },
-          { content: " | ", bold: false },
-          { content: "⏱️ ", bold: true },
-          { content: "[5 min read]", italic: true },
-        ],
-        attributes: {
-          className: "bg-purple-50 dark:bg-purple-900/20 border-purple-500",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "intro-heading"),
-        type: "h2",
-        content: "Introduction",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "intro-content"),
-        type: "p",
-        content:
-          "[Start with a hook! Grab your reader's attention with an interesting question, statistic, or story. The introduction should clearly state what the blog post is about and why readers should care.]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "main-heading"),
-        type: "h2",
-        content: "[Main Topic 1]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "main-content-1"),
-        type: "p",
-        content:
-          "[Develop your first main point. Use clear, concise language and support your arguments with evidence, examples, or data.]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "quote"),
-        type: "blockquote",
-        children: [
-          { content: '"', bold: false },
-          {
-            content:
-              "Add a relevant quote here to emphasize your point and add credibility to your argument.",
-            italic: true,
-          },
-          { content: '"', bold: false },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "section-2-heading"),
-        type: "h2",
-        content: "[Main Topic 2]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "section-2-content"),
-        type: "p",
-        content:
-          "[Develop your second main point. Use examples, case studies, or personal anecdotes to make your content more engaging and relatable.]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "subsection-1-heading"),
-        type: "h3",
-        content: "[Subsection: Specific Detail]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "subsection-1-content"),
-        type: "p",
-        content:
-          "[Dive deeper into a specific aspect. Break down complex ideas into digestible parts.]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "tips-heading"),
-        type: "h2",
-        content: "Key Takeaways",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "tips-list"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "tip-1"),
-            type: "li",
-            children: [
-              { content: "💡 ", bold: false },
-              { content: "Takeaway #1: ", bold: true },
-              { content: "[Brief description]", bold: false },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "tip-2"),
-            type: "li",
-            children: [
-              { content: "💡 ", bold: false },
-              { content: "Takeaway #2: ", bold: true },
-              { content: "[Brief description]", bold: false },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "tip-3"),
-            type: "li",
-            children: [
-              { content: "💡 ", bold: false },
-              { content: "Takeaway #3: ", bold: true },
-              { content: "[Brief description]", bold: false },
-            ],
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "code-example-heading"),
-        type: "h2",
-        content: "Code Example (if applicable)",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "code-example"),
-        type: "code",
-        content: `// Example code snippet
-function example() {
-  console.log("Add relevant code examples to technical posts");
-  return true;
-}`,
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "conclusion-heading"),
-        type: "h2",
-        content: "Conclusion",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "conclusion-content"),
-        type: "p",
-        content:
-          "[Wrap up your main points and restate the key message. End with a call-to-action or thought-provoking question to encourage reader engagement.]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "cta"),
-        type: "blockquote",
-        children: [
-          {
-            content: "💬 What are your thoughts on this topic? ",
-            bold: true,
-          },
-          {
-            content: "Share your experiences in the comments below!",
-            italic: true,
-          },
-        ],
-        attributes: {
-          className: "bg-blue-50 dark:bg-blue-900/20 border-blue-500",
-        },
-      } as TextNode,
-    ],
-    coverImage: {
-      url: "/templates/blog/blog-cover.jpg",
-      alt: "Blog cover image",
-      position: 50,
-    },
-  }
-}
-
-// ========================================
-// RECIPE TEMPLATE
-// ========================================
-
-export function createRecipeTemplate(): Template {
-  const tid = "recipe"
-  return {
-    metadata: {
-      id: tid,
-      name: "Recipe",
-      description: "Beautiful recipe layout for cooking and baking",
-      category: "personal",
-      icon: "🍳",
-    },
-    content: [
-      {
-        id: id(tid, "title"),
-        type: "h1",
-        content: "[Recipe Name]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "meta"),
-        type: "blockquote",
-        children: [
-          { content: "⏱️ Prep: ", bold: true },
-          { content: "15 mins", italic: true },
-          { content: " | ", bold: false },
-          { content: "🔥 Cook: ", bold: true },
-          { content: "30 mins", italic: true },
-          { content: " | ", bold: false },
-          { content: "🍽️ Serves: ", bold: true },
-          { content: "4 people", italic: true },
-          { content: " | ", bold: false },
-          { content: "😋 Difficulty: ", bold: true },
-          { content: "Easy", italic: true },
-        ],
-        attributes: {
-          className: "bg-orange-50 dark:bg-orange-900/20 border-orange-500",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "description-heading"),
-        type: "h2",
-        content: "📖 Description",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "description"),
-        type: "p",
-        content:
-          "[Brief description of the dish - what it is, why it's special, and any interesting background or serving suggestions.]",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "ingredients-heading"),
-        type: "h2",
-        content: "🛒 Ingredients",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "ingredients-list"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "ingredient-1"),
-            type: "li",
-            content: "2 cups all-purpose flour",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "ingredient-2"),
-            type: "li",
-            content: "1 cup sugar",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "ingredient-3"),
-            type: "li",
-            content: "1/2 cup butter (softened)",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "ingredient-4"),
-            type: "li",
-            content: "3 eggs",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "ingredient-5"),
-            type: "li",
-            content: "1 tsp vanilla extract",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "ingredient-6"),
-            type: "li",
-            content: "1 tsp baking powder",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "ingredient-7"),
-            type: "li",
-            content: "1/2 tsp salt",
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "instructions-heading"),
-        type: "h2",
-        content: "👨‍🍳 Instructions",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "instructions-list"),
-        type: "container",
-        attributes: { listType: "ol" },
-        children: [
-          {
-            id: id(tid, "step-1"),
-            type: "li",
-            children: [
-              { content: "Preheat & Prepare: ", bold: true },
-              {
-                content:
-                  "Preheat your oven to 350°F (175°C). Grease and flour a 9-inch baking pan.",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "step-2"),
-            type: "li",
-            children: [
-              { content: "Mix Dry Ingredients: ", bold: true },
-              {
-                content:
-                  "In a large bowl, whisk together flour, baking powder, and salt. Set aside.",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "step-3"),
-            type: "li",
-            children: [
-              { content: "Cream Butter & Sugar: ", bold: true },
-              {
-                content:
-                  "In another bowl, beat butter and sugar until light and fluffy (about 3-4 minutes).",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "step-4"),
-            type: "li",
-            children: [
-              { content: "Add Eggs: ", bold: true },
-              {
-                content:
-                  "Beat in eggs one at a time, then stir in vanilla extract.",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "step-5"),
-            type: "li",
-            children: [
-              { content: "Combine: ", bold: true },
-              {
-                content:
-                  "Gradually mix in the dry ingredients until just combined. Do not overmix.",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "step-6"),
-            type: "li",
-            children: [
-              { content: "Bake: ", bold: true },
-              {
-                content:
-                  "Pour batter into prepared pan and bake for 25-30 minutes, or until a toothpick inserted comes out clean.",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "step-7"),
-            type: "li",
-            children: [
-              { content: "Cool & Serve: ", bold: true },
-              {
-                content:
-                  "Let cool in pan for 10 minutes, then transfer to a wire rack to cool completely.",
-                bold: false,
-              },
-            ],
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "tips-heading"),
-        type: "h2",
-        content: "💡 Chef's Tips",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "tips-list"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "tip-1"),
-            type: "li",
-            content:
-              "For best results, make sure all ingredients are at room temperature",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "tip-2"),
-            type: "li",
-            content:
-              "Don't overmix the batter - this keeps the texture light and tender",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "tip-3"),
-            type: "li",
-            content:
-              "Store leftovers in an airtight container at room temperature for up to 3 days",
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "nutrition-heading"),
-        type: "h2",
-        content: "📊 Nutrition Information (per serving)",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "nutrition-table-wrapper"),
-        type: "container",
-        children: [
-          {
-            id: id(tid, "nutrition-table"),
-            type: "table",
-            children: [
-              {
-                id: id(tid, "nutrition-thead"),
-                type: "thead",
-                children: [
-                  {
-                    id: id(tid, "nutrition-tr-header"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "th-nutrient"),
-                        type: "th",
-                        content: "Nutrient",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-amount"),
-                        type: "th",
-                        content: "Amount",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-              {
-                id: id(tid, "nutrition-tbody"),
-                type: "tbody",
-                children: [
-                  {
-                    id: id(tid, "nutrition-tr-1"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-nutrient-1"),
-                        type: "td",
-                        content: "Calories",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-amount-1"),
-                        type: "td",
-                        content: "250 kcal",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "nutrition-tr-2"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-nutrient-2"),
-                        type: "td",
-                        content: "Protein",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-amount-2"),
-                        type: "td",
-                        content: "4g",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "nutrition-tr-3"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-nutrient-3"),
-                        type: "td",
-                        content: "Carbohydrates",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-amount-3"),
-                        type: "td",
-                        content: "35g",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "nutrition-tr-4"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-nutrient-4"),
-                        type: "td",
-                        content: "Fat",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-amount-4"),
-                        type: "td",
-                        content: "12g",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      } as ContainerNode,
-    ],
-  }
-}
-
-// ========================================
-// HALLOWEEN PARTY INVITATION TEMPLATE
-// ========================================
-
-export function createHalloweenPartyTemplate(): Template {
-  const tid = "halloween-party"
-  return {
-    metadata: {
-      id: tid,
-      name: "Halloween Party Invitation",
-      description: "Spooky party invitation with timeline and RSVP table",
-      category: "personal",
-      icon: "🎃",
-    },
-    coverImage: {
-      url: "/templates/haloween/haloween.gif",
-      alt: "Halloween Party Cover",
-      position: 50,
-    },
-    content: [
-      {
-        id: id(tid, "title"),
-        type: "h1",
-        content: "Halloween Party Invitation",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "subtitle"),
-        type: "h3",
-        children: [
-          {
-            content: "You are invited to our Halloween Party! ",
-            className: "text-orange-600 dark:text-orange-400",
-            bold: false,
-          },
-          { content: "👻", bold: false },
-          { content: " ", bold: false },
-          { content: "🎃", bold: false },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      // Two-column layout
-      {
-        id: id(tid, "main-columns"),
-        type: "container",
-        attributes: { className: "flex-container" },
-        children: [
-          // LEFT COLUMN - Intro Quote
-          {
-            id: id(tid, "left-column"),
-            type: "container",
-            attributes: { className: "flex-50" },
-            children: [
-              {
-                id: id(tid, "intro"),
-                type: "blockquote",
-                children: [
-                  { content: "On a dark Halloween night,", bold: false },
-                  {
-                    content: "\nmusic and delicious food? All ready!",
-                    bold: false,
-                  },
-                ],
-                attributes: {
-                  className:
-                    "border-l-4 border-purple-500 dark:border-purple-600",
-                },
-              } as TextNode,
-            ],
-          } as ContainerNode,
-
-          // RIGHT COLUMN - Timeline Preview
-          {
-            id: id(tid, "right-column"),
-            type: "container",
-            attributes: { className: "flex-50" },
-            children: [
-              {
-                id: id(tid, "timeline-preview-heading"),
-                type: "h3",
-                children: [
-                  { content: "Timeline ", bold: true },
-                  { content: "🥳", bold: false },
-                ],
-                attributes: {},
-              } as TextNode,
-              {
-                id: id(tid, "timeline-preview-1"),
-                type: "p",
-                children: [
-                  { content: "🍸 ", bold: false },
-                  { content: "19:00 ~ 19:30", bold: true },
-                  {
-                    content: "      Entrance & Welcome Drinks",
-                    bold: false,
-                    className: "text-purple-600 dark:text-purple-400",
-                  },
-                ],
-                attributes: { className: "text-sm" },
-              } as TextNode,
-              {
-                id: id(tid, "timeline-preview-2"),
-                type: "p",
-                children: [
-                  { content: "🧙🏻‍♀️ ", bold: false },
-                  { content: "19:30 ~ 20:00", bold: true },
-                  {
-                    content: "      Costume Photo Session",
-                    bold: false,
-                    className: "text-purple-600 dark:text-purple-400",
-                  },
-                ],
-                attributes: { className: "text-sm" },
-              } as TextNode,
-              {
-                id: id(tid, "timeline-preview-3"),
-                type: "p",
-                children: [
-                  { content: "🍽️ ", bold: false },
-                  { content: "20:00 ~ 21:00", bold: true },
-                  {
-                    content: "      Dinner & Light Networking",
-                    bold: false,
-                    className: "text-purple-600 dark:text-purple-400",
-                  },
-                ],
-                attributes: { className: "text-sm" },
-              } as TextNode,
-              {
-                id: id(tid, "timeline-preview-4"),
-                type: "p",
-                children: [
-                  { content: "🕹️ ", bold: false },
-                  { content: "21:00 ~ 22:00", bold: true },
-                  {
-                    content: "      Halloween Games Mystery Box Challenge!",
-                    bold: false,
-                    className: "text-purple-600 dark:text-purple-400",
-                  },
-                ],
-                attributes: { className: "text-sm" },
-              } as TextNode,
-              {
-                id: id(tid, "timeline-preview-5"),
-                type: "p",
-                children: [
-                  { content: "🎃 ", bold: false },
-                  { content: "22:00 ~ 22:30", bold: true },
-                  {
-                    content: "      Best Costume Contest",
-                    bold: false,
-                    className: "text-purple-600 dark:text-purple-400",
-                  },
-                ],
-                attributes: { className: "text-sm" },
-              } as TextNode,
-              {
-                id: id(tid, "timeline-preview-6"),
-                type: "p",
-                children: [
-                  { content: "🎥 ", bold: false },
-                  { content: "22:30 ~ 늦은 밤", bold: true },
-                  {
-                    content: "      Horror Movie Clip Screening",
-                    bold: false,
-                    className: "text-purple-600 dark:text-purple-400",
-                  },
-                ],
-                attributes: { className: "text-sm" },
-              } as TextNode,
-            ],
-          } as ContainerNode,
-        ],
-      } as ContainerNode,
-
-      // Party details as a simple list (mimicking Notion properties)
-      {
-        id: id(tid, "detail-date"),
-        type: "p",
-        children: [
-          {
-            content: "📅 Date",
-            bold: true,
-            className: "text-gray-600 dark:text-gray-400",
-          },
-          { content: "      Friday, October 31st, 2025", bold: false },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "detail-time"),
-        type: "p",
-        children: [
-          {
-            content: "⏰ Time",
-            bold: true,
-            className: "text-gray-600 dark:text-gray-400",
-          },
-          { content: "      7 PM ~ Late night! 🌙", bold: false },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "detail-venue"),
-        type: "p",
-        children: [
-          {
-            content: "📍 Venue",
-            bold: true,
-            className: "text-gray-600 dark:text-gray-400",
-          },
-          { content: "      Halloween Party Room 👻", bold: false },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "detail-dress"),
-        type: "p",
-        children: [
-          {
-            content: "👔 Dress Code",
-            bold: true,
-            className: "text-gray-600 dark:text-gray-400",
-          },
-          {
-            content: "      Costumes required! (Light makeup OK too) 🎃",
-            bold: false,
-          },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "detail-contact"),
-        type: "p",
-        children: [
-          {
-            content: "📞 Contact",
-            bold: true,
-            className: "text-gray-600 dark:text-gray-400",
-          },
-          { content: "      Ava / 010-1234-5678", bold: false },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "detail-bring"),
-        type: "p",
-        children: [
-          {
-            content: "🎒 What to Bring",
-            bold: true,
-            className: "text-gray-600 dark:text-gray-400",
-          },
-          { content: "      TBD", bold: false },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "detail-rsvp"),
-        type: "p",
-        children: [
-          {
-            content: "✉️ RSVP",
-            bold: true,
-            className: "text-gray-600 dark:text-gray-400",
-          },
-          { content: "      ", bold: false },
-          {
-            content: "Please let us know by October 25th!",
-            bold: true,
-            className: "text-orange-600 dark:text-orange-400",
-          },
-        ],
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "divider-1"),
-        type: "p",
-        content: "",
-        attributes: {},
-      } as TextNode,
-
-      // Two-column layout for Location and RSVP
-      {
-        id: id(tid, "location-rsvp-columns"),
-        type: "container",
-        attributes: { className: "flex-container" },
-        children: [
-          // LEFT COLUMN - Location
-          {
-            id: id(tid, "location-column"),
-            type: "container",
-            attributes: { className: "flex-50" },
-            children: [
-              {
-                id: id(tid, "location-heading"),
-                type: "h2",
-                content: "📍 Party Location",
-                attributes: {},
-              } as TextNode,
-
-              {
-                id: id(tid, "location-address"),
-                type: "p",
-                children: [
-                  { content: "Address: ", bold: true },
-                  { content: "[Enter detailed address here]", bold: false },
-                ],
-                attributes: {},
-              } as TextNode,
-
-              {
-                id: id(tid, "transportation-heading"),
-                type: "h3",
-                content: "🚗 Transportation Information",
-                attributes: {},
-              } as TextNode,
-
-              {
-                id: id(tid, "transportation-list"),
-                type: "container",
-                attributes: { listType: "ul" },
-                children: [
-                  {
-                    id: id(tid, "transport-1"),
-                    type: "li",
-                    content:
-                      "🚇 Subway exit information and how long it takes to walk to the party venue",
-                    attributes: {},
-                  } as TextNode,
-                  {
-                    id: id(tid, "transport-2"),
-                    type: "li",
-                    content:
-                      "🚍 Bus stops near the party venue and bus numbers",
-                    attributes: {},
-                  } as TextNode,
-                ],
-              } as ContainerNode,
-
-              {
-                id: id(tid, "parking-heading"),
-                type: "h3",
-                content: "🚗 Parking Information",
-                attributes: {},
-              } as TextNode,
-
-              {
-                id: id(tid, "parking-list"),
-                type: "container",
-                attributes: { listType: "ul" },
-                children: [
-                  {
-                    id: id(tid, "parking-1"),
-                    type: "li",
-                    content: "Underground parking available in the building",
-                    attributes: {},
-                  } as TextNode,
-                  {
-                    id: id(tid, "parking-2"),
-                    type: "li",
-                    content: "Nearby public parking lots available",
-                    attributes: {},
-                  } as TextNode,
-                ],
-              } as ContainerNode,
-            ],
-          } as ContainerNode,
-
-          // RIGHT COLUMN - RSVP
-          {
-            id: id(tid, "rsvp-column"),
-            type: "container",
-            attributes: { className: "flex-50" },
-            children: [
-              {
-                id: id(tid, "rsvp-heading"),
-                type: "h2",
-                content: "✉️ RSVP 👇🏻",
-                attributes: {},
-              } as TextNode,
-
-              {
-                id: id(tid, "rsvp-deadline"),
-                type: "p",
-                children: [
-                  { content: "Please reply by ", bold: true },
-                  {
-                    content: "October 25th!",
-                    bold: true,
-                    elementType: "code",
-                    className: "text-purple-600 dark:text-purple-400",
-                  },
-                ],
-                attributes: {},
-              } as TextNode,
-
-              {
-                id: id(tid, "guest-list-heading"),
-                type: "h3",
-                content: "👥 Guest List",
-                attributes: {},
-              } as TextNode,
-            ],
-          } as ContainerNode,
-        ],
-      } as ContainerNode,
-
-      {
-        id: id(tid, "guest-list-table-wrapper"),
-        type: "container",
-        children: [
-          {
-            id: id(tid, "guest-list-table"),
-            type: "table",
-            children: [
-              {
-                id: id(tid, "guest-list-thead"),
-                type: "thead",
-                children: [
-                  {
-                    id: id(tid, "guest-list-tr-header"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "th-guest-name"),
-                        type: "th",
-                        content: "Guest Name",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-rsvp-status"),
-                        type: "th",
-                        content: "RSVP Status",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-plus-ones"),
-                        type: "th",
-                        content: "Plus Ones",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "th-dietary"),
-                        type: "th",
-                        content: "Dietary Restrictions",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-              {
-                id: id(tid, "guest-list-tbody"),
-                type: "tbody",
-                children: [
-                  {
-                    id: id(tid, "guest-tr-1"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-name-1"),
-                        type: "td",
-                        content: "🎃 Ethan",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-status-1"),
-                        type: "td",
-                        content: "Attending",
-                        attributes: {
-                          className:
-                            "text-green-600 dark:text-green-400 font-semibold",
-                        },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-plus-1"),
-                        type: "td",
-                        content: "0",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-dietary-1"),
-                        type: "td",
-                        content: "Vegetarian",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "guest-tr-2"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-name-2"),
-                        type: "td",
-                        content: "🎃 Joshua",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-status-2"),
-                        type: "td",
-                        content: "Attending",
-                        attributes: {
-                          className:
-                            "text-green-600 dark:text-green-400 font-semibold",
-                        },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-plus-2"),
-                        type: "td",
-                        content: "1",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-dietary-2"),
-                        type: "td",
-                        content: "Shellfish",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "guest-tr-3"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-name-3"),
-                        type: "td",
-                        content: "🎃 Michael",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-status-3"),
-                        type: "td",
-                        content: "Not Attending",
-                        attributes: {
-                          className:
-                            "text-red-600 dark:text-red-400 font-semibold",
-                        },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-plus-3"),
-                        type: "td",
-                        content: "-",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-dietary-3"),
-                        type: "td",
-                        content: "-",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "guest-tr-4"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-name-4"),
-                        type: "td",
-                        content: "🎃 Daniel",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-status-4"),
-                        type: "td",
-                        content: "Maybe",
-                        attributes: {
-                          className:
-                            "text-yellow-600 dark:text-yellow-400 font-semibold",
-                        },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-plus-4"),
-                        type: "td",
-                        content: "-",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-dietary-4"),
-                        type: "td",
-                        content: "-",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "guest-tr-5"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-name-5"),
-                        type: "td",
-                        content: "🎃 Sophia",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-status-5"),
-                        type: "td",
-                        content: "Maybe",
-                        attributes: {
-                          className:
-                            "text-yellow-600 dark:text-yellow-400 font-semibold",
-                        },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-plus-5"),
-                        type: "td",
-                        content: "2",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-dietary-5"),
-                        type: "td",
-                        content: "Dairy, Peanuts",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "guest-tr-6"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-name-6"),
-                        type: "td",
-                        content: "🎃 Ava",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-status-6"),
-                        type: "td",
-                        content: "Maybe",
-                        attributes: {
-                          className:
-                            "text-yellow-600 dark:text-yellow-400 font-semibold",
-                        },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-plus-6"),
-                        type: "td",
-                        content: "-",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-dietary-6"),
-                        type: "td",
-                        content: "-",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                  {
-                    id: id(tid, "guest-tr-7"),
-                    type: "tr",
-                    children: [
-                      {
-                        id: id(tid, "td-name-7"),
-                        type: "td",
-                        content: "🎃 Emma",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-status-7"),
-                        type: "td",
-                        content: "Maybe",
-                        attributes: {
-                          className:
-                            "text-yellow-600 dark:text-yellow-400 font-semibold",
-                        },
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-plus-7"),
-                        type: "td",
-                        content: "-",
-                        attributes: {},
-                      } as TextNode,
-                      {
-                        id: id(tid, "td-dietary-7"),
-                        type: "td",
-                        content: "-",
-                        attributes: {},
-                      } as TextNode,
-                    ],
-                    attributes: {},
-                  },
-                ],
-                attributes: {},
-              },
-            ],
-            attributes: {},
-          },
-        ],
-        attributes: {},
-      } as ContainerNode,
-
-      {
-        id: id(tid, "guestbook-heading"),
-        type: "h2",
-        content: "✍🏻 Guestbook",
-        attributes: {},
-      } as TextNode,
-
-      {
-        id: id(tid, "guestbook-note"),
-        type: "blockquote",
-        children: [
-          { content: "💬 ", bold: false },
-          {
-            content:
-              "Leave a message or share your excitement about the party!",
-            italic: true,
-          },
-        ],
-        attributes: {
-          className: "bg-blue-50 dark:bg-blue-900/20 border-blue-500",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "guestbook-1"),
-        type: "blockquote",
-        children: [
-          {
-            content: "Sophia: ",
-            bold: true,
-            className: "text-orange-600 dark:text-orange-400",
-          },
-          {
-            content:
-              "\"So excited for this year's Halloween party! It's going to be even more fun than last year~~\"",
-            italic: true,
-          },
-        ],
-        attributes: {
-          className: "bg-gray-50 dark:bg-gray-900/20 border-gray-400",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "guestbook-2"),
-        type: "blockquote",
-        children: [
-          {
-            content: "Ethan: ",
-            bold: true,
-            className: "text-orange-600 dark:text-orange-400",
-          },
-          {
-            content:
-              '"I\'ve prepared the perfect costume to fully enjoy the Halloween atmosphere!"',
-            italic: true,
-          },
-        ],
-        attributes: {
-          className: "bg-gray-50 dark:bg-gray-900/20 border-gray-400",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "guestbook-3"),
-        type: "blockquote",
-        children: [
-          {
-            content: "Daniel: ",
-            bold: true,
-            className: "text-orange-600 dark:text-orange-400",
-          },
-          { content: '"I\'ve prepared some scary stories!"', italic: true },
-        ],
-        attributes: {
-          className: "bg-gray-50 dark:bg-gray-900/20 border-gray-400",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "guestbook-4"),
-        type: "blockquote",
-        children: [
-          {
-            content: "Emma: ",
-            bold: true,
-            className: "text-orange-600 dark:text-orange-400",
-          },
-          {
-            content:
-              '"I have plans until late afternoon, so I\'m still thinking about it!"',
-            italic: true,
-          },
-        ],
-        attributes: {
-          className: "bg-gray-50 dark:bg-gray-900/20 border-gray-400",
-        },
-      } as TextNode,
-
-      {
-        id: id(tid, "footer"),
-        type: "p",
-        children: [
-          { content: "🎃 ", bold: false },
-          {
-            content:
-              "Can't wait to see everyone in their amazing costumes! Let's make this Halloween unforgettable! 👻",
-            bold: false,
-            italic: true,
-          },
-        ],
-        attributes: {
-          className:
-            "text-center text-orange-600 dark:text-orange-400 text-lg mt-8",
-        },
-      } as TextNode,
-
-      // Free-positioned spider decoration
-      {
-        id: id(tid, "spider-decoration"),
-        type: "img",
-        content: "",
-        attributes: {
-          src: "/templates/haloween/Halloween-Noicon.gif",
-          alt: "Halloween spider decoration",
-          isFreePositioned: true,
-          styles: {
-            left: "140px",
-            top: "0px",
-            width: "150px",
-            height: "auto",
-            position: "fixed",
-            zIndex: "10",
-          },
-        },
-      } as TextNode,
-    ],
-  }
-}
-
-// ========================================
-// DAILY JOURNAL TEMPLATE
-// ========================================
-
-export function createDailyJournalTemplate(): Template {
-  const tid = "daily-journal"
-  return {
-    metadata: {
-      id: tid,
-      name: "Daily Journal",
-      description: "Track your day, mood, and priorities",
-      category: "personal",
-      icon: "📓",
-    },
-    content: [
-      {
-        id: id(tid, "title"),
-        type: "h1",
-        content: "Daily Journal - [Date]",
-        attributes: {},
-      } as TextNode,
-      {
-        id: id(tid, "mood-section"),
-        type: "blockquote",
-        children: [
-          { content: "🌟 Mood: ", bold: true },
-          { content: "[1-10]", italic: true },
-          { content: " | 🔋 Energy: ", bold: true },
-          { content: "[High/Medium/Low]", italic: true },
-        ],
-        attributes: {
-          className: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500",
-        },
-      } as TextNode,
-      {
-        id: id(tid, "priorities-heading"),
-        type: "h2",
-        content: "🎯 Top 3 Priorities",
-        attributes: {},
-      } as TextNode,
-      {
-        id: id(tid, "priorities-list"),
-        type: "container",
-        attributes: { listType: "ol" },
-        children: [
-          {
-            id: id(tid, "p1"),
-            type: "li",
-            content: "[Priority 1]",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "p2"),
-            type: "li",
-            content: "[Priority 2]",
-            attributes: {},
-          } as TextNode,
-          {
-            id: id(tid, "p3"),
-            type: "li",
-            content: "[Priority 3]",
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-      {
-        id: id(tid, "notes-heading"),
-        type: "h2",
-        content: "📝 Notes & Thoughts",
-        attributes: {},
-      } as TextNode,
-      {
-        id: id(tid, "notes-content"),
-        type: "p",
-        content: "Write about your day here...",
-        attributes: {},
-      } as TextNode,
-      {
-        id: id(tid, "gratitude-heading"),
-        type: "h2",
-        content: "🙏 Gratitude",
-        attributes: {},
-      } as TextNode,
-      {
-        id: id(tid, "gratitude-list"),
-        type: "container",
-        attributes: { listType: "ul" },
-        children: [
-          {
-            id: id(tid, "g1"),
-            type: "li",
-            content: "I am grateful for...",
-            attributes: {},
-          } as TextNode,
-        ],
-      } as ContainerNode,
-    ],
-  }
-}
-
-// ========================================
-// TEMPLATE REGISTRY
-// ========================================
-
-/**
- * All available templates
- */
-export const TEMPLATES: Record<string, () => Template> = {
-  blank: createBlankTemplate,
-  "meeting-notes": createMeetingNotesTemplate,
-  prd: createPRDTemplate,
-  gallery: createGalleryTemplate,
-  "project-plan": createProjectPlanTemplate,
-  financial: createFinancialReportTemplate,
-  blog: createBlogPostTemplate,
-  recipe: createRecipeTemplate,
-  "halloween-party": createHalloweenPartyTemplate,
-  "daily-journal": createDailyJournalTemplate,
-}
-
-/**
- * Get all template metadata for displaying in a template chooser
- */
-export function getAllTemplateMetadata(): TemplateMetadata[] {
-  return Object.values(TEMPLATES).map(
-    (createTemplate) => createTemplate().metadata
-  )
-}
-
-/**
- * Get a template by ID
- */
-export function getTemplateById(id: string): Template | null {
-  const createTemplate = TEMPLATES[id]
-  return createTemplate ? createTemplate() : null
-}
-
-/**
- * Get templates by category
- */
-export function getTemplatesByCategory(
-  category: TemplateMetadata["category"]
-): TemplateMetadata[] {
-  return getAllTemplateMetadata().filter((t) => t.category === category)
-}
diff --git a/apps/web/src/components/ui/rich-editor/types.ts b/apps/web/src/components/ui/rich-editor/types.ts
deleted file mode 100644
index b86b9c61..00000000
--- a/apps/web/src/components/ui/rich-editor/types.ts
+++ /dev/null
@@ -1,423 +0,0 @@
-export type NodeType =
-  | "h1"
-  | "h2"
-  | "h3"
-  | "h4"
-  | "h5"
-  | "h6"
-  | "p"
-  | "blockquote"
-  | "ol"
-  | "li"
-  | "code"
-  | "pre"
-  | "img"
-  | "video"
-  | "audio"
-  | "a"
-  | "span"
-  | "div"
-  | "hr"
-  | "br"
-  | "table"
-  | "thead"
-  | "tbody"
-  | "tr"
-  | "th"
-  | "td"
-  | "container"
-  | "text"
-
-/**
- * Dynamic attributes that can be attached to any node.
- * Allows for custom styling, classes, data attributes, etc.
- *
- * Special formatting attributes:
- * - bold: boolean - makes text bold
- * - italic: boolean - makes text italic
- * - underline: boolean - makes text underlined
- * - strikethrough: boolean - makes text strikethrough
- * - code: boolean - makes text inline code
- * - styles: Record<string, string> - inline CSS styles (e.g., { width: '50%' })
- *
- * @example
- * ```typescript
- * const attributes: NodeAttributes = {
- *   bold: true,
- *   italic: true,
- *   className: 'text-blue-500',
- *   href: 'https://example.com',
- *   styles: { width: '75%' },
- * };
- * ```
- */
-export interface NodeAttributes {
-  bold?: boolean
-  italic?: boolean
-  underline?: boolean
-  strikethrough?: boolean
-  code?: boolean
-  styles?: Record<string, string>
-  [key: string]: string | number | boolean | Record<string, string> | undefined
-}
-
-/**
- * Base interface for all editor nodes.
- * Every node must have an id, type, and attributes.
- */
-export interface BaseNode {
-  /** Unique identifier for the node (used for updates, deletion, etc.) */
-  id: string
-
-  /** The type of node (h1, p, img, container, etc.) */
-  type: NodeType
-
-  /** Dynamic attributes (className, style, href, src, etc.) */
-  attributes?: NodeAttributes
-}
-
-/**
- * Inline text segment with its own formatting
- */
-export interface InlineText {
-  content: string
-  bold?: boolean
-  italic?: boolean
-  underline?: boolean
-  strikethrough?: boolean
-  code?: boolean
-  // Inline element type (for text that should render as p, h1, h2, etc. within a paragraph)
-  // Note: 'code' is not included here - use the 'code' boolean property for inline code formatting
-  elementType?:
-    | "p"
-    | "h1"
-    | "h2"
-    | "h3"
-    | "h4"
-    | "h5"
-    | "h6"
-    | "li"
-    | "blockquote"
-  // Link URL (makes the text a clickable link)
-  href?: string
-  // Custom Tailwind CSS classes
-  className?: string
-  // Inline CSS styles (e.g., { fontSize: '24px', color: '#ff0000' })
-  styles?: Record<string, string>
-}
-
-/**
- * A single line of content within a block.
- * Can contain either plain text or inline formatted children.
- */
-export interface BlockLine {
-  /** Plain text content (if no formatting) */
-  content?: string
-  /** Inline children with formatting */
-  children?: InlineText[]
-}
-
-/**
- * Text content node - represents actual content/text.
- * Can be simple text, have inline children with formatting, OR have multiple lines.
- *
- * @example Simple text (no formatting):
- * ```typescript
- * const textNode: TextNode = {
- *   id: 'p-1',
- *   type: 'p',
- *   content: 'Hello, world!',
- * };
- * ```
- *
- * @example Block with inline children (rich formatting):
- * ```typescript
- * const paragraph: TextNode = {
- *   id: 'p-1',
- *   type: 'p',
- *   children: [
- *     { content: 'Hello ', bold: false },
- *     { content: 'world', bold: true },
- *     { content: '!', bold: false }
- *   ]
- * };
- * ```
- *
- * @example Block with multiple lines (e.g., ordered list):
- * ```typescript
- * const listItem: TextNode = {
- *   id: 'li-1',
- *   type: 'li',
- *   lines: [
- *     { content: 'First item' },
- *     { content: 'Second item' },
- *     { content: 'Third item' }
- *   ]
- * };
- * ```
- */
-export interface TextNode extends BaseNode {
-  type: Exclude<NodeType, "container">
-
-  /** The actual text content (used when no inline formatting and single line) */
-  content?: string
-
-  /** Inline children with individual formatting (used for rich text, single line) */
-  children?: InlineText[]
-
-  /** Multiple lines of content (used for multi-line blocks like ordered lists) */
-  lines?: BlockLine[]
-}
-
-/**
- * Container node - can have children nodes (nested structure).
- * Allows building complex document trees.
- *
- * @example
- * ```typescript
- * const container: ContainerNode = {
- *   id: 'root',
- *   type: 'container',
- *   children: [
- *     { id: 'h1-1', type: 'h1', content: 'Title' },
- *     { id: 'p-1', type: 'p', content: 'Paragraph' },
- *     {
- *       id: 'nested',
- *       type: 'container',
- *       children: [...]
- *     }
- *   ]
- * };
- * ```
- */
-export interface ContainerNode extends BaseNode {
-  type: "container"
-
-  /** Child nodes (can be TextNode or ContainerNode) */
-  children: EditorNode[]
-}
-
-/**
- * Structural node - similar to container but for specific structures like tables
- * Can have children nodes for table elements (thead, tbody, tr)
- */
-export interface StructuralNode extends BaseNode {
-  type: "table" | "thead" | "tbody" | "tr"
-
-  /** Child nodes */
-  children: EditorNode[]
-}
-
-/**
- * Union type representing any node in the editor.
- */
-export type EditorNode = TextNode | ContainerNode | StructuralNode
-
-/**
- * Information about the current text selection
- */
-export interface SelectionInfo {
-  /** The selected text */
-  text: string
-
-  /** Start position in the text content */
-  start: number
-
-  /** End position in the text content */
-  end: number
-
-  /** ID of the node containing the selection */
-  nodeId: string
-
-  /** Active formatting styles on the selection */
-  formats: {
-    bold: boolean
-    italic: boolean
-    underline: boolean
-    strikethrough: boolean
-    code: boolean
-  }
-
-  /** Active element type on the selection (if all selected text has the same type) */
-  elementType?:
-    | "p"
-    | "h1"
-    | "h2"
-    | "h3"
-    | "h4"
-    | "h5"
-    | "h6"
-    | "code"
-    | "blockquote"
-    | "li"
-    | "ol"
-    | null
-
-  /** Active link href on the selection (if all selected text has the same href) */
-  href?: string | null
-
-  /** Active custom class on the selection (if all selected text has the same class) */
-  className?: string | null
-
-  /** Active inline styles on the selection (if all selected text has the same styles) */
-  styles?: Record<string, string> | null
-}
-
-/**
- * Cover image configuration for the document
- */
-export interface CoverImage {
-  /** URL of the cover image */
-  url: string
-
-  /** Alt text for accessibility */
-  alt?: string
-
-  /** Vertical position (0-100) for image positioning */
-  position?: number
-}
-
-/**
- * The root document state for the editor.
- * Contains metadata, the root container, UI state, and history for undo/redo.
- */
-export interface EditorState {
-  /** Schema version for future migrations */
-  version: string
-
-  /** History stack of container states for undo/redo */
-  history: ContainerNode[]
-
-  /** Current position in the history stack */
-  historyIndex: number
-
-  /** Currently active/focused node ID */
-  activeNodeId: string | null
-
-  /** Whether there is an active text selection */
-  hasSelection: boolean
-
-  /** Selection key to trigger re-renders when selection changes */
-  selectionKey: number
-
-  /** Current selection information (null if no selection) */
-  currentSelection: SelectionInfo | null
-
-  /** Set of block IDs that are currently selected (for multi-block operations like Ctrl+A) */
-  selectedBlocks: Set<string>
-
-  /** Cover image for the document (like Notion) */
-  coverImage: CoverImage | null
-
-  /** Optional metadata (created date, last modified, author, etc.) */
-  metadata?: {
-    createdAt?: string
-    updatedAt?: string
-    [key: string]: any
-  }
-}
-
-/**
- * Type guard to check if a node is a ContainerNode.
- *
- * @param node - The node to check
- * @returns True if node is a ContainerNode
- *
- * @example
- * ```typescript
- * if (isContainerNode(node)) {
- *   console.log(node.children.length);
- * }
- * ```
- */
-export function isContainerNode(node: EditorNode): node is ContainerNode {
-  return node.type === "container"
-}
-
-/**
- * Type guard to check if a node is a StructuralNode (table, thead, tbody, tr).
- *
- * @param node - The node to check
- * @returns True if node is a StructuralNode
- */
-export function isStructuralNode(node: EditorNode): node is StructuralNode {
-  return (
-    node.type === "table" ||
-    node.type === "thead" ||
-    node.type === "tbody" ||
-    node.type === "tr"
-  )
-}
-
-/**
- * Type guard to check if a node is a TextNode.
- *
- * @param node - The node to check
- * @returns True if node is a TextNode
- *
- * @example
- * ```typescript
- * if (isTextNode(node)) {
- *   console.log(node.content);
- * }
- * ```
- */
-export function isTextNode(node: EditorNode): node is TextNode {
-  return node.type !== "container" && !isStructuralNode(node)
-}
-
-/**
- * Type guard to check if a node has inline children (rich text).
- *
- * @param node - The node to check
- * @returns True if node has inline children
- *
- * @example
- * ```typescript
- * if (hasInlineChildren(node)) {
- *   console.log(node.children); // Array of inline text segments
- * }
- * ```
- */
-export function hasInlineChildren(
-  node: EditorNode
-): node is TextNode & { children: InlineText[] } {
-  return (
-    isTextNode(node) &&
-    Array.isArray((node as TextNode).children) &&
-    (node as TextNode).children!.length > 0
-  )
-}
-
-/**
- * Get the text content of a node (whether simple or with inline children).
- *
- * @param node - The node to extract text from
- * @returns The full text content
- *
- * @example
- * ```typescript
- * const text = getNodeTextContent(node); // "Hello world!"
- * ```
- */
-export function getNodeTextContent(node: TextNode): string {
-  // If node has multiple lines, join them with newlines
-  if (node.lines && node.lines.length > 0) {
-    return node.lines
-      .map((line) => {
-        if (line.children && line.children.length > 0) {
-          return line.children.map((child) => child.content).join("")
-        }
-        return line.content || ""
-      })
-      .join("\n")
-  }
-
-  // If node has inline children (single line with formatting)
-  if (hasInlineChildren(node)) {
-    return node.children!.map((child) => child.content).join("")
-  }
-
-  // Simple content (single line, no formatting)
-  return node.content || ""
-}
diff --git a/apps/web/src/components/ui/rich-editor/utils/class-replacement.ts b/apps/web/src/components/ui/rich-editor/utils/class-replacement.ts
deleted file mode 100644
index 11ebdaf0..00000000
--- a/apps/web/src/components/ui/rich-editor/utils/class-replacement.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import { tailwindClasses } from "../tailwind-classes"
-
-/**
- * Get the category of a Tailwind class
- * @param className - The class to categorize
- * @returns The category name or null if not found
- */
-export function getClassCategory(className: string): string | null {
-  for (const group of tailwindClasses) {
-    if (group.classes.includes(className)) {
-      return group.category
-    }
-  }
-  return null
-}
-
-/**
- * Get all classes from a specific category
- * @param category - The category name
- * @returns Array of class names in that category
- */
-export function getClassesInCategory(category: string): string[] {
-  const group = tailwindClasses.find((g) => g.category === category)
-  return group ? group.classes : []
-}
-
-/**
- * Check if two classes are in the same category
- * @param class1 - First class name
- * @param class2 - Second class name
- * @returns true if both classes are in the same category
- */
-export function areSameCategory(class1: string, class2: string): boolean {
-  const cat1 = getClassCategory(class1)
-  const cat2 = getClassCategory(class2)
-  return cat1 !== null && cat1 === cat2
-}
-
-/**
- * Replace classes in the same category with a new class
- * @param currentClasses - Space-separated string of current classes
- * @param newClass - The new class to add
- * @returns Updated space-separated string of classes
- */
-export function replaceClassInCategory(
-  currentClasses: string,
-  newClass: string
-): string {
-  if (!currentClasses) return newClass
-
-  const classes = currentClasses.split(" ").filter(Boolean)
-  const newCategory = getClassCategory(newClass)
-
-  if (!newCategory) {
-    // If new class is not in our known categories, just add it
-    return [...classes, newClass].join(" ")
-  }
-
-  const categoryClasses = getClassesInCategory(newCategory)
-
-  // Remove all classes from the same category
-  const filtered = classes.filter((cls) => !categoryClasses.includes(cls))
-
-  // Add the new class
-  return [...filtered, newClass].join(" ")
-}
-
-/**
- * Get a summary of what will be replaced
- * @param currentClasses - Space-separated string of current classes
- * @param newClass - The new class to add
- * @returns Object with replacement info
- */
-export function getReplacementInfo(
-  currentClasses: string,
-  newClass: string
-): {
-  willReplace: boolean
-  replacedClasses: string[]
-  newClasses: string
-  category: string | null
-} {
-  const classes = currentClasses.split(" ").filter(Boolean)
-  const newCategory = getClassCategory(newClass)
-
-  if (!newCategory) {
-    return {
-      willReplace: false,
-      replacedClasses: [],
-      newClasses: replaceClassInCategory(currentClasses, newClass),
-      category: null,
-    }
-  }
-
-  const categoryClasses = getClassesInCategory(newCategory)
-  const replacedClasses = classes.filter((cls) => categoryClasses.includes(cls))
-
-  return {
-    willReplace: replacedClasses.length > 0,
-    replacedClasses,
-    newClasses: replaceClassInCategory(currentClasses, newClass),
-    category: newCategory,
-  }
-}
-
-/**
- * Get current classes from a selection's className attribute
- * @param className - The className string (might be null/undefined)
- * @returns Array of class names
- */
-export function getCurrentClasses(
-  className: string | null | undefined
-): string[] {
-  if (!className) return []
-  return className.split(" ").filter(Boolean)
-}
-
-/**
- * Merge new class with existing classes, replacing same-category classes
- * @param existingClassName - Current className string
- * @param newClass - New class to apply
- * @returns Updated className string
- */
-export function mergeClasses(
-  existingClassName: string | null | undefined,
-  newClass: string
-): string {
-  const current = existingClassName || ""
-  return replaceClassInCategory(current, newClass)
-}
diff --git a/apps/web/src/components/ui/rich-editor/utils/drag-auto-scroll.ts b/apps/web/src/components/ui/rich-editor/utils/drag-auto-scroll.ts
deleted file mode 100644
index 8a455bc1..00000000
--- a/apps/web/src/components/ui/rich-editor/utils/drag-auto-scroll.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-import React from "react"
-
-/**
- * Auto-scroll configuration
- */
-export interface AutoScrollConfig {
-  /** Distance from edge (in pixels) that triggers auto-scroll */
-  scrollZone?: number
-  /** Scroll speed in pixels per frame */
-  scrollSpeed?: number
-  /** Whether to enable horizontal scrolling */
-  enableHorizontal?: boolean
-  /** Whether to enable vertical scrolling */
-  enableVertical?: boolean
-}
-
-const DEFAULT_CONFIG: Required<AutoScrollConfig> = {
-  scrollZone: 80,
-  scrollSpeed: 10,
-  enableHorizontal: false,
-  enableVertical: true,
-}
-
-/**
- * Setup auto-scroll for drag operations
- * Returns a cleanup function to remove event listeners
- */
-export function setupDragAutoScroll(
-  containerRef: React.RefObject<HTMLElement | null>,
-  config: AutoScrollConfig = {}
-): () => void {
-  const finalConfig = { ...DEFAULT_CONFIG, ...config }
-  let rafId: number | null = null
-  let isDragging = false
-  let lastMouseX = 0
-  let lastMouseY = 0
-
-  /**
-   * Auto-scroll logic
-   */
-  const autoScroll = () => {
-    if (!isDragging || !containerRef.current) {
-      rafId = null
-      return
-    }
-
-    const container = containerRef.current
-    const rect = container.getBoundingClientRect()
-    const { scrollZone, scrollSpeed, enableVertical, enableHorizontal } =
-      finalConfig
-
-    let scrollX = 0
-    let scrollY = 0
-
-    // Check vertical scrolling
-    if (enableVertical) {
-      // Scroll down when near bottom
-      if (lastMouseY > rect.bottom - scrollZone) {
-        const distance = lastMouseY - (rect.bottom - scrollZone)
-        const intensity = Math.min(distance / scrollZone, 1)
-        scrollY = scrollSpeed * intensity
-      }
-      // Scroll up when near top
-      else if (lastMouseY < rect.top + scrollZone) {
-        const distance = rect.top + scrollZone - lastMouseY
-        const intensity = Math.min(distance / scrollZone, 1)
-        scrollY = -scrollSpeed * intensity
-      }
-    }
-
-    // Check horizontal scrolling
-    if (enableHorizontal) {
-      // Scroll right when near right edge
-      if (lastMouseX > rect.right - scrollZone) {
-        const distance = lastMouseX - (rect.right - scrollZone)
-        const intensity = Math.min(distance / scrollZone, 1)
-        scrollX = scrollSpeed * intensity
-      }
-      // Scroll left when near left edge
-      else if (lastMouseX < rect.left + scrollZone) {
-        const distance = rect.left + scrollZone - lastMouseX
-        const intensity = Math.min(distance / scrollZone, 1)
-        scrollX = -scrollSpeed * intensity
-      }
-    }
-
-    // Perform scroll
-    if (scrollX !== 0 || scrollY !== 0) {
-      // Try to find the scrollable parent (could be window or a container)
-      const scrollableParent = findScrollableParent(container)
-
-      if (scrollableParent === window) {
-        window.scrollBy(scrollX, scrollY)
-      } else if (scrollableParent instanceof HTMLElement) {
-        scrollableParent.scrollLeft += scrollX
-        scrollableParent.scrollTop += scrollY
-      }
-    }
-
-    // Continue animation loop
-    rafId = requestAnimationFrame(autoScroll)
-  }
-
-  /**
-   * Find the scrollable parent element
-   */
-  const findScrollableParent = (element: HTMLElement): HTMLElement | Window => {
-    let parent = element.parentElement
-
-    while (parent) {
-      const style = window.getComputedStyle(parent)
-      const isScrollable =
-        (style.overflowY === "auto" ||
-          style.overflowY === "scroll" ||
-          style.overflowX === "auto" ||
-          style.overflowX === "scroll") &&
-        (parent.scrollHeight > parent.clientHeight ||
-          parent.scrollWidth > parent.clientWidth)
-
-      if (isScrollable) {
-        return parent
-      }
-
-      parent = parent.parentElement
-    }
-
-    // Default to window if no scrollable parent found
-    return window
-  }
-
-  /**
-   * Track mouse movement during drag
-   */
-  const handleDragOver = (e: DragEvent) => {
-    lastMouseX = e.clientX
-    lastMouseY = e.clientY
-
-    // Start auto-scroll loop if not already running
-    if (!rafId && isDragging) {
-      rafId = requestAnimationFrame(autoScroll)
-    }
-  }
-
-  /**
-   * Start tracking drag
-   */
-  const handleDragStart = () => {
-    isDragging = true
-  }
-
-  /**
-   * Stop tracking drag
-   */
-  const handleDragEnd = () => {
-    isDragging = false
-    if (rafId) {
-      cancelAnimationFrame(rafId)
-      rafId = null
-    }
-  }
-
-  // Attach event listeners
-  document.addEventListener("dragstart", handleDragStart)
-  document.addEventListener("dragover", handleDragOver)
-  document.addEventListener("dragend", handleDragEnd)
-  document.addEventListener("drop", handleDragEnd)
-
-  // Return cleanup function
-  return () => {
-    isDragging = false
-    if (rafId) {
-      cancelAnimationFrame(rafId)
-      rafId = null
-    }
-    document.removeEventListener("dragstart", handleDragStart)
-    document.removeEventListener("dragover", handleDragOver)
-    document.removeEventListener("dragend", handleDragEnd)
-    document.removeEventListener("drop", handleDragEnd)
-  }
-}
-
-/**
- * React hook for drag auto-scroll
- */
-export function useDragAutoScroll(
-  containerRef: React.RefObject<HTMLElement | null>,
-  config?: AutoScrollConfig
-) {
-  const configRef = React.useRef(config)
-
-  React.useEffect(() => {
-    configRef.current = config
-  }, [config])
-
-  React.useEffect(() => {
-    const cleanup = setupDragAutoScroll(containerRef, configRef.current)
-    return cleanup
-  }, [containerRef])
-}
-
-// For non-React usage
-export default setupDragAutoScroll
diff --git a/apps/web/src/components/ui/rich-editor/utils/editor-helpers.ts b/apps/web/src/components/ui/rich-editor/utils/editor-helpers.ts
deleted file mode 100644
index 0eeb55a2..00000000
--- a/apps/web/src/components/ui/rich-editor/utils/editor-helpers.ts
+++ /dev/null
@@ -1,544 +0,0 @@
-import {
-  ContainerNode,
-  EditorNode,
-  InlineText,
-  isContainerNode,
-  SelectionInfo,
-  TextNode,
-} from "../types"
-
-/**
- * Parse DOM element back into inline children structure
- * This preserves formatting when user types in a formatted block
- */
-export function parseDOMToInlineChildren(
-  element: HTMLElement
-): TextNode["children"] {
-  const children: TextNode["children"] = []
-
-  const walkNode = (
-    node: Node,
-    inheritedFormats: {
-      bold?: boolean
-      italic?: boolean
-      underline?: boolean
-      strikethrough?: boolean
-      code?: boolean
-      className?: string
-      elementType?:
-        | "p"
-        | "h1"
-        | "h2"
-        | "h3"
-        | "h4"
-        | "h5"
-        | "h6"
-        | "li"
-        | "blockquote"
-    } = {}
-  ) => {
-    if (node.nodeType === Node.TEXT_NODE) {
-      // Direct text node - use inherited formatting
-      const content = node.textContent || ""
-
-      const hasAnyFormatting =
-        inheritedFormats.bold ||
-        inheritedFormats.italic ||
-        inheritedFormats.underline ||
-        inheritedFormats.strikethrough ||
-        inheritedFormats.code ||
-        inheritedFormats.className ||
-        inheritedFormats.elementType
-
-      // Always add content if it exists OR if it's empty but has formatting
-      // This prevents structure changes when user deletes the last character
-      if (content || hasAnyFormatting) {
-        if (hasAnyFormatting) {
-          children.push({
-            content,
-            bold: inheritedFormats.bold || undefined,
-            italic: inheritedFormats.italic || undefined,
-            underline: inheritedFormats.underline || undefined,
-            strikethrough: inheritedFormats.strikethrough || undefined,
-            code: inheritedFormats.code || undefined,
-            className: inheritedFormats.className || undefined,
-            elementType: inheritedFormats.elementType,
-          })
-        } else {
-          children.push({ content })
-        }
-      }
-    } else if (node.nodeType === Node.ELEMENT_NODE) {
-      const el = node as HTMLElement
-      const classList = Array.from(el.classList)
-
-      // Detect formatting from classes
-      const bold = classList.includes("font-bold")
-      const italic = classList.includes("italic")
-      const underline = classList.includes("underline")
-      const strikethrough = classList.includes("line-through")
-      const code = classList.includes("font-mono")
-
-      // Detect element type from classes
-      let elementType:
-        | "p"
-        | "h1"
-        | "h2"
-        | "h3"
-        | "h4"
-        | "h5"
-        | "h6"
-        | "blockquote"
-        | undefined = undefined
-      if (classList.some((c) => c.includes("text-4xl"))) {
-        elementType = "h1"
-      } else if (classList.some((c) => c.includes("text-3xl"))) {
-        elementType = "h2"
-      } else if (classList.some((c) => c.includes("text-2xl"))) {
-        elementType = "h3"
-      } else if (classList.some((c) => c.includes("text-xl"))) {
-        elementType = "h4"
-      } else if (
-        classList.some((c) => c.includes("text-lg")) &&
-        classList.includes("font-semibold")
-      ) {
-        elementType = "h5"
-      } else if (
-        classList.some((c) => c.includes("text-base")) &&
-        classList.includes("font-semibold")
-      ) {
-        elementType = "h6"
-      } else if (classList.includes("border-l-4")) {
-        elementType = "blockquote"
-      } else if (
-        classList.some((c) => c.includes("text-base")) &&
-        classList.some((c) => c.includes("leading-relaxed"))
-      ) {
-        elementType = "p"
-      }
-
-      // Extract custom classes (filter out known formatting classes and extra spacing classes)
-      const knownClasses = [
-        "font-bold",
-        "italic",
-        "underline",
-        "line-through",
-        "font-mono",
-        "bg-gray-100",
-        "dark:bg-gray-800",
-        "px-1",
-        "py-0.5",
-        "rounded",
-        "text-sm",
-        "text-5xl",
-        "text-4xl",
-        "text-3xl",
-        "text-2xl",
-        "text-xl",
-        "text-lg",
-        "font-semibold",
-        "border-l-4",
-        "pl-4",
-        "text-primary",
-        "hover:underline",
-        "cursor-pointer",
-        "inline-block",
-        "inline",
-      ]
-      const customClasses = classList.filter((c) => !knownClasses.includes(c))
-      const customClassName =
-        customClasses.length > 0 ? customClasses.join(" ") : undefined
-
-      // Merge with inherited formatting
-      const currentFormats = {
-        bold: bold || inheritedFormats.bold,
-        italic: italic || inheritedFormats.italic,
-        underline: underline || inheritedFormats.underline,
-        strikethrough: strikethrough || inheritedFormats.strikethrough,
-        code: code || inheritedFormats.code,
-        className: customClassName || inheritedFormats.className,
-        elementType: elementType || inheritedFormats.elementType,
-      }
-
-      // If it's a span with formatting, walk its children with inherited formats
-      if (el.tagName === "SPAN") {
-        // Check if the span is empty (no child nodes)
-        if (node.childNodes.length === 0) {
-          // Empty span with formatting - preserve it
-          const hasAnyFormatting =
-            currentFormats.bold ||
-            currentFormats.italic ||
-            currentFormats.underline ||
-            currentFormats.strikethrough ||
-            currentFormats.code ||
-            currentFormats.className ||
-            currentFormats.elementType
-
-          if (hasAnyFormatting) {
-            children.push({
-              content: "",
-              bold: currentFormats.bold || undefined,
-              italic: currentFormats.italic || undefined,
-              underline: currentFormats.underline || undefined,
-              strikethrough: currentFormats.strikethrough || undefined,
-              code: currentFormats.code || undefined,
-              className: currentFormats.className || undefined,
-              elementType: currentFormats.elementType,
-            })
-          }
-        } else {
-          // Span has children, walk them with inherited formats
-          for (let i = 0; i < node.childNodes.length; i++) {
-            walkNode(node.childNodes[i], currentFormats)
-          }
-        }
-      } else {
-        // For other elements (like the main div), just walk children
-        for (let i = 0; i < node.childNodes.length; i++) {
-          walkNode(node.childNodes[i], inheritedFormats)
-        }
-      }
-    }
-  }
-
-  for (let i = 0; i < element.childNodes.length; i++) {
-    walkNode(element.childNodes[i])
-  }
-
-  // Filter out empty content ONLY if it has no formatting
-  // Keep empty spans with formatting so user can continue typing in them
-  return children.filter((child) => {
-    // If content exists and is not empty, always keep it
-    if (child.content && child.content.length > 0) {
-      return true
-    }
-
-    // If content is empty, only keep it if it has any formatting attributes
-    // This prevents the structure from changing when user deletes the last character
-    const hasFormatting =
-      child.bold ||
-      child.italic ||
-      child.underline ||
-      child.strikethrough ||
-      child.code ||
-      child.className ||
-      child.elementType ||
-      child.href ||
-      child.styles
-
-    return hasFormatting
-  })
-}
-
-/**
- * Detect which formats are active in a given range of a node
- */
-export function detectFormatsInRange(
-  node: TextNode,
-  start: number,
-  end: number
-): {
-  bold: boolean
-  italic: boolean
-  underline: boolean
-  strikethrough: boolean
-  code: boolean
-  elementType?:
-    | "h1"
-    | "h2"
-    | "h3"
-    | "h4"
-    | "h5"
-    | "h6"
-    | "li"
-    | "blockquote"
-    | null
-  href?: string | null
-  className?: string | null
-  styles?: Record<string, string> | null
-} {
-  const formats = {
-    bold: false,
-    italic: false,
-    underline: false,
-    strikethrough: false,
-    code: false,
-    elementType: null as any,
-    href: null as string | null,
-    className: null as string | null,
-    styles: null as Record<string, string> | null,
-  }
-
-  // If node has no children, check node-level attributes
-  if (!node.children || node.children.length === 0) {
-    // For nodes without inline children, use the node's type as elementType if it's a heading
-    // Note: 'code' is excluded from element types - it's only a block-level type, not inline
-    const nodeElementType = [
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6",
-      "blockquote",
-      "li",
-    ].includes(node.type)
-      ? (node.type as
-          | "h1"
-          | "h2"
-          | "h3"
-          | "h4"
-          | "h5"
-          | "h6"
-          | "li"
-          | "blockquote")
-      : null
-
-    return {
-      bold: node.attributes?.bold === true,
-      italic: node.attributes?.italic === true,
-      underline: node.attributes?.underline === true,
-      strikethrough: node.attributes?.strikethrough === true,
-      code: node.attributes?.code === true,
-      elementType: nodeElementType,
-      href: null,
-      className: null,
-      styles: null,
-    }
-  }
-
-  // Node has children array - analyze the range
-  let currentPos = 0
-  let hasAnyBold = false
-  let hasAnyItalic = false
-  let hasAnyUnderline = false
-  let hasAnyStrikethrough = false
-  let hasAnyCode = false
-  let allBold = true
-  let allItalic = true
-  let allUnderline = true
-  let allStrikethrough = true
-  let allCode = true
-  let charsInRange = 0
-  let firstElementType: typeof formats.elementType = undefined
-  let allSameElementType = true
-  let firstHref: string | undefined = undefined
-  let allSameHref = true
-  let firstClassName: string | undefined = undefined
-  let allSameClassName = true
-  let firstStyles: Record<string, string> | undefined = undefined
-  let allSameStyles = true
-
-  for (const child of node.children) {
-    const childLength = (child.content || "").length
-    const childStart = currentPos
-    const childEnd = currentPos + childLength
-
-    // Check if this child overlaps with the selection
-    const overlaps = childStart < end && childEnd > start
-
-    if (overlaps) {
-      charsInRange += Math.min(childEnd, end) - Math.max(childStart, start)
-
-      if (child.bold) {
-        hasAnyBold = true
-      } else {
-        allBold = false
-      }
-
-      if (child.italic) {
-        hasAnyItalic = true
-      } else {
-        allItalic = false
-      }
-
-      if (child.underline) {
-        hasAnyUnderline = true
-      } else {
-        allUnderline = false
-      }
-
-      if (child.strikethrough) {
-        hasAnyStrikethrough = true
-      } else {
-        allStrikethrough = false
-      }
-
-      if (child.code) {
-        hasAnyCode = true
-      } else {
-        allCode = false
-      }
-
-      // Check element type
-      const childElementType = child.elementType || null
-      if (firstElementType === undefined) {
-        firstElementType = childElementType
-      } else if (firstElementType !== childElementType) {
-        allSameElementType = false
-      }
-
-      // Check href
-      const childHref = child.href || null
-      if (firstHref === undefined) {
-        firstHref = childHref || undefined
-      } else if (firstHref !== childHref) {
-        allSameHref = false
-      }
-
-      // Check className
-      const childClassName = child.className || null
-      if (firstClassName === undefined) {
-        firstClassName = childClassName || undefined
-      } else if (firstClassName !== childClassName) {
-        allSameClassName = false
-      }
-
-      // Check styles
-      const childStyles = child.styles || null
-      if (firstStyles === undefined) {
-        firstStyles = childStyles || undefined
-      } else if (JSON.stringify(firstStyles) !== JSON.stringify(childStyles)) {
-        allSameStyles = false
-      }
-    }
-
-    currentPos = childEnd
-  }
-
-  // A format is "active" if ALL selected text has that format
-  const detectedFormats = {
-    bold: charsInRange > 0 && allBold,
-    italic: charsInRange > 0 && allItalic,
-    underline: charsInRange > 0 && allUnderline,
-    strikethrough: charsInRange > 0 && allStrikethrough,
-    code: charsInRange > 0 && allCode,
-    elementType: allSameElementType ? firstElementType : null,
-    href: allSameHref ? firstHref || null : null,
-    className: allSameClassName ? firstClassName || null : null,
-    styles: allSameStyles ? firstStyles || null : null,
-  }
-
-  return detectedFormats
-}
-
-/**
- * Helper function to find a node in the tree (including nested containers)
- */
-export function findNodeInTree(
-  searchId: string,
-  container: ContainerNode
-): {
-  node: EditorNode
-  parentId: string | null
-  siblings: EditorNode[]
-} | null {
-  // Check direct children
-  for (let i = 0; i < container.children.length; i++) {
-    const child = container.children[i]
-    if (child.id === searchId) {
-      return {
-        node: child,
-        parentId: container.id,
-        siblings: container.children,
-      }
-    }
-    // If child is a container, search recursively
-    if (isContainerNode(child)) {
-      const found = findNodeInTree(searchId, child as ContainerNode)
-      if (found) return found
-    }
-  }
-  return null
-}
-
-/**
- * Helper to find a node anywhere (root or in container)
- */
-export function findNodeAnywhere(
-  id: string,
-  container: ContainerNode
-): {
-  node: EditorNode
-  parentId?: string
-  parent?: ContainerNode
-} | null {
-  // Check root level
-  const rootNode = container.children.find((n) => n.id === id)
-  if (rootNode) return { node: rootNode }
-
-  // Check inside containers
-  for (const child of container.children) {
-    if (isContainerNode(child)) {
-      const containerNode = child as ContainerNode
-      const foundInContainer = containerNode.children.find((c) => c.id === id)
-      if (foundInContainer)
-        return {
-          node: foundInContainer,
-          parentId: child.id,
-          parent: containerNode,
-        }
-    }
-  }
-  return null
-}
-
-/**
- * Helper to restore selection after formatting
- */
-export function restoreSelection(
-  element: HTMLElement,
-  start: number,
-  end: number
-) {
-  const range = document.createRange()
-  const sel = window.getSelection()
-
-  let currentPos = 0
-  let startNode: Node | null = null
-  let startOffset = 0
-  let endNode: Node | null = null
-  let endOffset = 0
-  let found = false
-
-  const walk = (node: Node) => {
-    if (found) return
-
-    if (node.nodeType === Node.TEXT_NODE) {
-      const textLength = node.textContent?.length || 0
-
-      if (!startNode && currentPos + textLength >= start) {
-        startNode = node
-        startOffset = start - currentPos
-      }
-
-      if (!endNode && currentPos + textLength >= end) {
-        endNode = node
-        endOffset = end - currentPos
-        found = true
-      }
-
-      currentPos += textLength
-    } else if (node.nodeType === Node.ELEMENT_NODE) {
-      for (let i = 0; i < node.childNodes.length; i++) {
-        walk(node.childNodes[i])
-        if (found) break
-      }
-    }
-  }
-
-  walk(element)
-
-  if (startNode && endNode && sel) {
-    try {
-      const startLength = (startNode as Text).textContent?.length || 0
-      const endLength = (endNode as Text).textContent?.length || 0
-      range.setStart(startNode, Math.min(startOffset, startLength))
-      range.setEnd(endNode, Math.min(endOffset, endLength))
-      sel.removeAllRanges()
-      sel.addRange(range)
-    } catch (e) {
-      console.warn("Failed to restore selection:", e)
-    }
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/utils/image-upload.ts b/apps/web/src/components/ui/rich-editor/utils/image-upload.ts
deleted file mode 100644
index 3867f393..00000000
--- a/apps/web/src/components/ui/rich-editor/utils/image-upload.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-const MOCK_IMAGES = [
-  "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80",
-  "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&q=80",
-  "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&q=80",
-  "https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=800&q=80",
-  "https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?w=800&q=80",
-  "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=800&q=80",
-]
-
-export interface UploadResult {
-  success: boolean
-  url?: string
-  error?: string
-}
-
-/**
- * Mock function to simulate image upload to server
- *
- * @param file - The image file to upload
- * @returns Promise with upload result containing the image URL
- *
- * @example
- * ```typescript
- * const result = await uploadImage(file);
- * if (result.success) {
- *
- * }
- * ```
- */
-export async function uploadImage(file: File): Promise<UploadResult> {
-  // Simulate network delay (500ms - 1500ms)
-  const delay = Math.random() * 1000 + 500
-  await new Promise((resolve) => setTimeout(resolve, delay))
-
-  // Validate file type
-  if (!file.type.startsWith("image/")) {
-    return {
-      success: false,
-      error: "File must be an image",
-    }
-  }
-
-  // Validate file size (max 10MB)
-  const maxSize = 10 * 1024 * 1024 // 10MB
-  if (file.size > maxSize) {
-    return {
-      success: false,
-      error: "Image must be smaller than 10MB",
-    }
-  }
-
-  // Simulate 5% chance of upload failure for testing
-  if (Math.random() < 0.05) {
-    return {
-      success: false,
-      error: "Upload failed. Please try again.",
-    }
-  }
-
-  // Return a random mock image URL
-  const randomIndex = Math.floor(Math.random() * MOCK_IMAGES.length)
-  const url = MOCK_IMAGES[randomIndex]
-
-  return {
-    success: true,
-    url,
-  }
-}
-
-/**
- * In production, replace the above mock function with actual API call:
- *
- * export async function uploadImage(file: File): Promise<UploadResult> {
- *   const formData = new FormData();
- *   formData.append('image', file);
- *
- *   try {
- *     const response = await fetch('/api/upload', {
- *       method: 'POST',
- *       body: formData,
- *     });
- *
- *     if (!response.ok) {
- *       throw new Error('Upload failed');
- *     }
- *
- *     const data = await response.json();
- *     return {
- *       success: true,
- *       url: data.url,
- *     };
- *   } catch (error) {
- *     return {
- *       success: false,
- *       error: error instanceof Error ? error.message : 'Upload failed',
- *     };
- *   }
- * }
- */
diff --git a/apps/web/src/components/ui/rich-editor/utils/inline-formatting.ts b/apps/web/src/components/ui/rich-editor/utils/inline-formatting.ts
deleted file mode 100644
index f4190c51..00000000
--- a/apps/web/src/components/ui/rich-editor/utils/inline-formatting.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-import { getNodeTextContent, hasInlineChildren, TextNode, InlineText } from "../types"
-
-/**
- * Split a text node into inline segments based on selection range
- *
- * @param node - The node to split
- * @param startOffset - Start offset of selection
- * @param endOffset - End offset of selection
- * @returns Array of text segments: [before, selected, after]
- *
- * @example
- * ```typescript
- * const node = { id: 'p-1', type: 'p', content: 'Hello world' };
- * const [before, selected, after] = splitTextNode(node, 6, 11);
- * // before: 'Hello ', selected: 'world', after: ''
- * ```
- */
-export function splitTextAtSelection(
-  content: string,
-  startOffset: number,
-  endOffset: number
-): { before: string; selected: string; after: string } {
-  return {
-    before: content.substring(0, startOffset),
-    selected: content.substring(startOffset, endOffset),
-    after: content.substring(endOffset),
-  }
-}
-
-/**
- * Convert a simple text node to inline children format
- *
- * @param node - The simple text node
- * @returns Node with inline children
- */
-export function convertToInlineFormat(node: TextNode): TextNode {
-  if (hasInlineChildren(node)) {
-    return node // Already in inline format
-  }
-
-  const content = node.content || ""
-
-  return {
-    ...node,
-    content: undefined, // Remove content property
-    children: [
-      {
-        content: content,
-      },
-    ],
-  }
-}
-
-/**
- * Apply formatting to a selection within a node
- *
- * @param node - The node to format
- * @param startOffset - Start offset of selection (in text content)
- * @param endOffset - End offset of selection (in text content)
- * @param className - Tailwind classes to apply
- * @returns New node with formatting applied
- */
-export function applyFormatting(
-  node: TextNode,
-  startOffset: number,
-  endOffset: number,
-  className: string
-): TextNode {
-  // Convert to inline format if needed
-  const inlineNode = convertToInlineFormat(node)
-  const fullText = getNodeTextContent(inlineNode)
-
-  // Split the text
-  const { before, selected, after } = splitTextAtSelection(
-    fullText,
-    startOffset,
-    endOffset
-  )
-
-  // Build new children array
-  const newChildren: InlineText[] = []
-
-  // Add "before" text if it exists
-  if (before) {
-    newChildren.push({
-      content: before,
-    })
-  }
-
-  // Add formatted selection as a span
-  if (selected) {
-    newChildren.push({
-      content: selected,
-      className: className,
-    })
-  }
-
-  // Add "after" text if it exists
-  if (after) {
-    newChildren.push({
-      content: after,
-    })
-  }
-
-  return {
-    ...inlineNode,
-    children: newChildren,
-  }
-}
-
-/**
- * Merge adjacent text nodes with the same formatting
- *
- * @param children - Array of inline text nodes
- * @returns Merged array
- */
-export function mergeAdjacentTextNodes(children: InlineText[]): InlineText[] {
-  if (children.length <= 1) return children
-
-  const merged: InlineText[] = []
-  let current = children[0]
-
-  for (let i = 1; i < children.length; i++) {
-    const next = children[i]
-
-    // Check if both are plain text nodes (not spans) with same attributes
-    if (
-      current.className === next.className &&
-      current.bold === next.bold &&
-      current.italic === next.italic &&
-      current.underline === next.underline &&
-      current.strikethrough === next.strikethrough &&
-      current.code === next.code
-    ) {
-      // Merge them
-      current = {
-        ...current,
-        content: (current.content || "") + (next.content || ""),
-      }
-    } else {
-      merged.push(current)
-      current = next
-    }
-  }
-
-  merged.push(current)
-  return merged
-}
-
-/**
- * Remove formatting from a selection
- *
- * @param node - The node with inline formatting
- * @param startOffset - Start offset of selection
- * @param endOffset - End offset of selection
- * @param className - Class name to remove
- * @returns New node with formatting removed
- */
-export function removeFormatting(
-  node: TextNode,
-  startOffset: number,
-  endOffset: number,
-  className: string
-): TextNode {
-  if (!hasInlineChildren(node)) {
-    return node // Nothing to remove
-  }
-
-  // This is more complex - we need to traverse inline children
-  // and split spans that intersect with the selection
-  // For now, simplified implementation
-
-  return node
-}
-
-/**
- * Get the formatting at a specific cursor position
- *
- * @param node - The node to check
- * @param offset - Cursor position
- * @returns Array of class names at that position
- */
-export function getFormattingAtPosition(
-  node: TextNode,
-  offset: number
-): string[] {
-  if (!hasInlineChildren(node)) {
-    return node.attributes?.className ? [String(node.attributes.className)] : []
-  }
-
-  let currentOffset = 0
-  for (const child of node.children!) {
-    const childLength = (child.content || "").length
-    if (offset >= currentOffset && offset <= currentOffset + childLength) {
-      return child.className
-        ? [String(child.className)]
-        : []
-    }
-    currentOffset += childLength
-  }
-
-  return []
-}
diff --git a/apps/web/src/components/ui/rich-editor/utils/markdown-table-parser.ts b/apps/web/src/components/ui/rich-editor/utils/markdown-table-parser.ts
deleted file mode 100644
index 8eaf7ccf..00000000
--- a/apps/web/src/components/ui/rich-editor/utils/markdown-table-parser.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-import { StructuralNode, TextNode } from "../types"
-
-export const MARKDOWN_TABLE_PARSE_ERROR_KEYS = [
-  "minRows",
-  "pipeFormat",
-  "headerMinCol",
-  "separatorRow",
-  "rowColumnMismatch",
-  "parseFailed",
-] as const
-
-export type MarkdownTableParseErrorKey =
-  (typeof MARKDOWN_TABLE_PARSE_ERROR_KEYS)[number]
-
-export type ParseMarkdownTableResult =
-  | { success: true; table: StructuralNode }
-  | {
-      success: false
-      errorKey: MarkdownTableParseErrorKey
-      params?: {
-        row?: number
-        got?: number
-        expected?: number
-      }
-    }
-
-/**
- * Parse markdown table string into table structure
- *
- * @example
- * ```
- * | Header 1 | Header 2 |
- * |----------|----------|
- * | Cell 1   | Cell 2   |
- * ```
- */
-export function parseMarkdownTable(markdown: string): ParseMarkdownTableResult {
-  try {
-    // Split into lines and remove empty lines
-    const lines = markdown
-      .trim()
-      .split("\n")
-      .map((line) => line.trim())
-      .filter((line) => line.length > 0)
-
-    if (lines.length < 2) {
-      return {
-        success: false,
-        errorKey: "minRows",
-      }
-    }
-
-    // Parse header row
-    const headerLine = lines[0]
-    if (!headerLine.startsWith("|") || !headerLine.endsWith("|")) {
-      return {
-        success: false,
-        errorKey: "pipeFormat",
-      }
-    }
-
-    const headerCells = headerLine
-      .split("|")
-      .slice(1, -1) // Remove first and last empty strings
-      .map((cell) => cell.trim())
-
-    if (headerCells.length === 0) {
-      return {
-        success: false,
-        errorKey: "headerMinCol",
-      }
-    }
-
-    // Check separator row
-    const separatorLine = lines[1]
-    if (!separatorLine.includes("---") && !separatorLine.includes("-")) {
-      return {
-        success: false,
-        errorKey: "separatorRow",
-      }
-    }
-
-    // Parse body rows
-    const bodyLines = lines.slice(2)
-    const numCols = headerCells.length
-
-    // Validate all rows have same number of columns
-    for (let i = 0; i < bodyLines.length; i++) {
-      const cells = bodyLines[i]
-        .split("|")
-        .slice(1, -1)
-        .map((cell) => cell.trim())
-
-      if (cells.length !== numCols) {
-        return {
-          success: false,
-          errorKey: "rowColumnMismatch",
-          params: {
-            row: i + 3,
-            got: cells.length,
-            expected: numCols,
-          },
-        }
-      }
-    }
-
-    const timestamp = Date.now()
-
-    // Create header cells
-    const headerCellNodes: TextNode[] = headerCells.map((content, idx) => ({
-      id: `th-${timestamp}-${idx}`,
-      type: "th",
-      content: content || "",
-      attributes: {},
-    }))
-
-    // Create header row
-    const headerRow: StructuralNode = {
-      id: `tr-header-${timestamp}`,
-      type: "tr",
-      children: headerCellNodes,
-      attributes: {},
-    }
-
-    // Create thead
-    const thead: StructuralNode = {
-      id: `thead-${timestamp}`,
-      type: "thead",
-      children: [headerRow],
-      attributes: {},
-    }
-
-    // Create body rows
-    const bodyRows: StructuralNode[] = bodyLines.map((line, rowIdx) => {
-      const cells = line
-        .split("|")
-        .slice(1, -1)
-        .map((cell) => cell.trim())
-
-      const cellNodes: TextNode[] = cells.map((content, colIdx) => ({
-        id: `td-${timestamp}-${rowIdx}-${colIdx}`,
-        type: "td",
-        content: content || "",
-        attributes: {},
-      }))
-
-      return {
-        id: `tr-${timestamp}-${rowIdx}`,
-        type: "tr",
-        children: cellNodes,
-        attributes: {},
-      }
-    })
-
-    // Create tbody
-    const tbody: StructuralNode = {
-      id: `tbody-${timestamp}`,
-      type: "tbody",
-      children: bodyRows,
-      attributes: {},
-    }
-
-    // Create table
-    const table: StructuralNode = {
-      id: `table-${timestamp}`,
-      type: "table",
-      children: [thead, tbody],
-      attributes: {},
-    }
-
-    return {
-      success: true,
-      table,
-    }
-  } catch {
-    return {
-      success: false,
-      errorKey: "parseFailed",
-    }
-  }
-}
-
-/**
- * Validate if string looks like a markdown table
- */
-export function isMarkdownTable(text: string): boolean {
-  const lines = text
-    .trim()
-    .split("\n")
-    .filter((line) => line.trim().length > 0)
-
-  if (lines.length < 2) return false
-
-  // Check if first line has pipes
-  if (!lines[0].includes("|")) return false
-
-  // Check if second line is separator
-  const secondLine = lines[1]
-  return (
-    secondLine.includes("---") ||
-    (secondLine.includes("-") && secondLine.includes("|"))
-  )
-}
diff --git a/apps/web/src/components/ui/rich-editor/utils/serialize-to-html.ts b/apps/web/src/components/ui/rich-editor/utils/serialize-to-html.ts
deleted file mode 100644
index 8929f91f..00000000
--- a/apps/web/src/components/ui/rich-editor/utils/serialize-to-html.ts
+++ /dev/null
@@ -1,614 +0,0 @@
-import {
-  ContainerNode,
-  EditorNode,
-  hasInlineChildren,
-  isContainerNode,
-  isStructuralNode,
-  isTextNode,
-  StructuralNode,
-  TextNode,
-} from "../types"
-
-/**
- * Get Tailwind CSS classes for block-level element types
- */
-function getBlockTypeClasses(type: string): string {
-  switch (type) {
-    case "h1":
-      return "text-4xl font-bold text-foreground leading-[1.2] mb-2"
-    case "h2":
-      return "text-3xl font-bold text-foreground leading-[1.2] mb-1.5"
-    case "h3":
-      return "text-2xl font-bold text-foreground leading-[1.2] mb-1"
-    case "h4":
-      return "text-xl font-semibold text-foreground leading-[1.3] mb-1"
-    case "h5":
-      return "text-lg font-semibold text-foreground leading-[1.4] mb-0.5"
-    case "h6":
-      return "text-base font-semibold text-foreground leading-[1.4] mb-0.5"
-    case "p":
-      return "text-base text-foreground leading-[1.6]"
-    case "li":
-      return "text-base text-foreground leading-[1.6] list-disc list-inside"
-    case "blockquote":
-      return "text-base text-muted-foreground italic border-l-4 border-primary pl-6 py-1"
-    case "code":
-      return "font-mono text-sm bg-secondary text-secondary-foreground px-4 py-2 rounded-lg whitespace-pre-wrap break-words"
-    case "br":
-      return ""
-    default:
-      return "text-base text-foreground leading-[1.6]"
-  }
-}
-
-/**
- * Get Tailwind CSS classes for inline element types (when used within text)
- */
-function getInlineElementTypeClasses(elementType: string): string {
-  switch (elementType) {
-    case "h1":
-      return "text-4xl font-bold text-foreground leading-[1.2]"
-    case "h2":
-      return "text-3xl font-bold text-foreground leading-[1.2]"
-    case "h3":
-      return "text-2xl font-bold text-foreground leading-[1.2]"
-    case "h4":
-      return "text-xl font-semibold text-foreground leading-[1.3]"
-    case "h5":
-      return "text-lg font-semibold text-foreground leading-[1.4]"
-    case "h6":
-      return "text-base font-semibold text-foreground leading-[1.4]"
-    case "code":
-      return "font-mono text-sm bg-secondary text-secondary-foreground px-4 py-2 rounded-lg whitespace-pre-wrap break-words"
-    case "blockquote":
-      return "text-base text-muted-foreground italic border-l-4 border-primary pl-6 py-1"
-    default:
-      return ""
-  }
-}
-
-/**
- * Build inline formatting classes (bold, italic, underline, strikethrough, code)
- */
-function getInlineFormattingClasses(
-  bold?: boolean,
-  italic?: boolean,
-  underline?: boolean,
-  strikethrough?: boolean,
-  code?: boolean
-): string {
-  const classes: string[] = []
-
-  if (bold) classes.push("font-bold")
-  if (italic) classes.push("italic")
-  if (underline) classes.push("underline")
-  if (strikethrough) classes.push("line-through")
-  if (code)
-    classes.push("font-mono bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded")
-
-  return classes.join(" ")
-}
-
-/**
- * Escape HTML special characters
- */
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#039;")
-}
-
-/**
- * Serialize a text node with inline children (formatted content)
- */
-function serializeInlineChildren(node: TextNode): string {
-  if (!hasInlineChildren(node)) {
-    return escapeHtml(node.content || "")
-  }
-
-  return node
-    .children!.map((child) => {
-      const formattingClasses = getInlineFormattingClasses(
-        child.bold,
-        child.italic,
-        child.underline,
-        child.strikethrough,
-        child.code
-      )
-
-      const elementTypeClasses = child.elementType
-        ? getInlineElementTypeClasses(child.elementType)
-        : ""
-
-      // Build inline styles from the styles object
-      let inlineStyles = ""
-      if (child.styles) {
-        inlineStyles =
-          Object.entries(child.styles)
-            .map(([key, value]) => {
-              // Convert camelCase to kebab-case (fontSize -> font-size)
-              const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase()
-              return `${kebabKey}: ${value}`
-            })
-            .join("; ") + ";"
-      }
-
-      const allClasses = [
-        elementTypeClasses,
-        formattingClasses,
-        child.className,
-      ]
-        .filter(Boolean)
-        .join(" ")
-
-      const content = escapeHtml(child.content || "")
-
-      // If it's a link
-      if (child.href) {
-        const linkClasses = [
-          "text-primary hover:underline cursor-pointer",
-          allClasses,
-        ]
-          .filter(Boolean)
-          .join(" ")
-        const italicSpacing = child.italic ? "inline" : ""
-        const finalClasses = [linkClasses, italicSpacing]
-          .filter(Boolean)
-          .join(" ")
-        const styleAttr = inlineStyles ? ` style="${inlineStyles}"` : ""
-        return `<a href="${escapeHtml(child.href)}" target="_blank" rel="noopener noreferrer" class="${finalClasses}"${styleAttr}>${content}</a>`
-      }
-
-      if (allClasses || inlineStyles) {
-        // Add inline-blockfor italic text to prevent overlapping
-        const italicSpacing = child.italic ? "inline" : ""
-        const finalClasses = [allClasses, italicSpacing]
-          .filter(Boolean)
-          .join(" ")
-        const classAttr = finalClasses ? ` class="${finalClasses}"` : ""
-        const styleAttr = inlineStyles ? ` style="${inlineStyles}"` : ""
-        return `<span${classAttr}${styleAttr}>${content}</span>`
-      }
-
-      return content
-    })
-    .join("")
-}
-
-/**
- * Serialize a single text node to HTML
- */
-function serializeTextNode(node: TextNode, indent: string = ""): string {
-  const { type, attributes } = node
-
-  // Handle BR elements
-  if (type === "br") {
-    return `${indent}<br />\n`
-  }
-
-  // Handle image nodes
-  if (type === "img") {
-    const src = (attributes?.src as string) || ""
-    const alt = (attributes?.alt as string) || ""
-    const caption = node.content || ""
-
-    // Build inline styles for the image
-    const imgStyles: string[] = ["width: auto", "margin: auto"]
-
-    // Add custom styles from attributes.styles if they exist
-    if (
-      attributes?.styles &&
-      typeof attributes.styles === "object" &&
-      !Array.isArray(attributes.styles)
-    ) {
-      const styles = attributes.styles as Record<string, string>
-      if (styles.width) {
-        imgStyles[0] = `width: ${styles.width}`
-      }
-    }
-
-    const imgStyleAttr = ` style="${imgStyles.join("; ")};"`
-
-    let html = `${indent}<figure class="mb-4">\n`
-    html += `${indent}  <img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="h-auto rounded-lg object-cover max-h-[600px]"${imgStyleAttr} />\n`
-
-    if (caption) {
-      html += `${indent}  <figcaption class="text-sm text-muted-foreground text-center mt-3 italic">${escapeHtml(caption)}</figcaption>\n`
-    }
-
-    html += `${indent}</figure>\n`
-    return html
-  }
-
-  // Handle video nodes
-  if (type === "video") {
-    const src = (attributes?.src as string) || ""
-    const caption = node.content || ""
-
-    let html = `${indent}<figure class="mb-4">\n`
-    html += `${indent}  <video src="${escapeHtml(src)}" controls class="w-full h-auto rounded-lg object-cover max-h-[600px]" preload="metadata">\n`
-    html += `${indent}    Your browser does not support the video tag.\n`
-    html += `${indent}  </video>\n`
-
-    if (caption) {
-      html += `${indent}  <figcaption class="text-sm text-muted-foreground text-center mt-3 italic">${escapeHtml(caption)}</figcaption>\n`
-    }
-
-    html += `${indent}</figure>\n`
-    return html
-  }
-
-  // Get block-level classes
-  const blockClasses = getBlockTypeClasses(type)
-
-  // Get custom className from attributes
-  const customClassName = (attributes?.className as string) || ""
-
-  // Check if className is a hex color (starts with #)
-  const isHexColor =
-    typeof customClassName === "string" && customClassName.startsWith("#")
-  const textColor = isHexColor ? customClassName : ""
-  const className = isHexColor ? "" : customClassName
-
-  // Combine all classes
-  const allClasses = [blockClasses, className].filter(Boolean).join(" ")
-
-  // Get backgroundColor from attributes
-  const backgroundColor = attributes?.backgroundColor as string | undefined
-
-  // Build inline styles
-  const styles: string[] = []
-  if (backgroundColor) {
-    styles.push(`background-color: ${backgroundColor}`)
-  }
-  if (textColor) {
-    styles.push(`color: ${textColor}`)
-  }
-
-  const styleAttr = styles.length > 0 ? ` style="${styles.join("; ")};"` : ""
-
-  // Get content (with inline formatting if present)
-  const content = serializeInlineChildren(node)
-
-  // Check if the block is empty (no content and no inline children with content)
-  const isEmpty = !content || content.trim() === ""
-
-  // If empty, render as <br/> tag
-  if (isEmpty) {
-    return `${indent}<br />\n`
-  }
-
-  // Build the HTML element
-  const classAttr = allClasses ? ` class="${allClasses}"` : ""
-
-  // Use appropriate HTML tag
-  const tag = type === "code" ? "pre" : type
-
-  return `${indent}<${tag}${classAttr}${styleAttr}>${content}</${tag}>\n`
-}
-
-/**
- * Serialize a table node to HTML
- */
-function serializeTableNode(
-  node: StructuralNode | ContainerNode,
-  indent: string = ""
-): string {
-  // This function handles table, thead, tbody, tr, th, td nodes
-  const tag = node.type
-
-  if (tag === "table") {
-    let html = `${indent}<table class="border-collapse border border-border w-full">\n`
-
-    // Serialize children (thead, tbody)
-    for (const child of node.children) {
-      if (isStructuralNode(child)) {
-        html += serializeTableNode(child, indent + "  ")
-      }
-    }
-
-    html += `${indent}</table>\n`
-    return html
-  } else if (tag === "thead") {
-    let html = `${indent}<thead>\n`
-
-    // Serialize children (tr)
-    for (const child of node.children) {
-      if (isStructuralNode(child)) {
-        html += serializeTableNode(child, indent + "  ")
-      }
-    }
-
-    html += `${indent}</thead>\n`
-    return html
-  } else if (tag === "tbody") {
-    let html = `${indent}<tbody>\n`
-
-    // Serialize children (tr)
-    for (const child of node.children) {
-      if (isStructuralNode(child)) {
-        html += serializeTableNode(child, indent + "  ")
-      }
-    }
-
-    html += `${indent}</tbody>\n`
-    return html
-  } else if (tag === "tr") {
-    let html = `${indent}<tr>\n`
-
-    // Serialize children (th, td)
-    for (const child of node.children) {
-      if (isTextNode(child)) {
-        const cellNode = child as TextNode
-        const cellTag = cellNode.type // 'th' or 'td'
-        const content = escapeHtml(cellNode.content || "")
-        const cellClass =
-          cellTag === "th"
-            ? "border border-border bg-muted/50 p-2 font-semibold text-left min-w-[100px]"
-            : "border border-border p-2"
-        html += `${indent}  <${cellTag} class="${cellClass}">${content}</${cellTag}>\n`
-      }
-    }
-
-    html += `${indent}</tr>\n`
-    return html
-  }
-
-  return ""
-}
-
-/**
- * Serialize a container node to HTML (recursive)
- */
-function serializeContainerNode(
-  node: ContainerNode,
-  indent: string = ""
-): string {
-  // Check if this is a table wrapper container
-  const firstChild = node.children[0]
-  const isTableWrapper = firstChild?.type === "table"
-
-  if (isTableWrapper && isStructuralNode(firstChild)) {
-    // Serialize the table directly
-    return serializeTableNode(firstChild, indent)
-  }
-
-  // Check if this is a flex container for images
-  const layoutType = node.attributes?.layoutType as string | undefined
-  const isFlexContainer = layoutType === "flex"
-  const gap = node.attributes?.gap as string | undefined
-  const flexWrap = node.attributes?.flexWrap as string | undefined
-
-  // Determine container type and classes
-  const listTypeFromAttribute = node.attributes?.listType as string | undefined
-  const listType =
-    listTypeFromAttribute ||
-    (isTextNode(firstChild) && (firstChild as TextNode).type === "li"
-      ? "ol"
-      : undefined)
-  const isListContainer = !!listType
-
-  // Get custom className from attributes
-  const customClassName = (node.attributes?.className as string) || ""
-
-  // Build container classes matching the preview
-  let containerClasses = isFlexContainer
-    ? `flex flex-row gap-${gap || "4"} items-start ${flexWrap === "wrap" ? "flex-wrap items-center" : ""}`
-    : isListContainer
-      ? `list-none pl-0 ml-6`
-      : `border-l-2 border-border/50 pl-2 ml-6 transition-all`
-
-  // Add custom classes
-  if (customClassName) {
-    containerClasses = `${containerClasses} ${customClassName}`.trim()
-  }
-
-  // Get backgroundColor from attributes
-  const backgroundColor = node.attributes?.backgroundColor as string | undefined
-
-  // Build inline styles
-  const styles: string[] = []
-  if (backgroundColor) {
-    styles.push(`background-color: ${backgroundColor}`)
-  }
-
-  const styleAttr = styles.length > 0 ? ` style="${styles.join("; ")};"` : ""
-
-  // Use ul/ol for list containers, div for regular/flex containers
-  const containerTag =
-    listType === "ul" ? "ul" : listType === "ol" ? "ol" : "div"
-
-  let html = `${indent}<${containerTag} class="${containerClasses}"${styleAttr}>\n`
-
-  // Recursively serialize children
-  let i = 0
-  while (i < node.children.length) {
-    const child = node.children[i]
-
-    if (isTextNode(child)) {
-      const textNode = child as TextNode
-
-      // For flex containers, wrap each child in a flex item div
-      if (isFlexContainer) {
-        html += `${indent}  <div class="flex-1 min-w-[280px] max-w-full">\n`
-        html += serializeTextNode(textNode, indent + "    ")
-        html += `${indent}  </div>\n`
-        i++
-      }
-      // Check if this is the start of a list (and not already in a list container)
-      else if (textNode.type === "li" && !isListContainer) {
-        // Start ordered list
-        html += `${indent}  <ol class="list-decimal list-inside space-y-1">\n`
-
-        // Add all consecutive list items
-        while (i < node.children.length) {
-          const listItem = node.children[i]
-          if (isTextNode(listItem) && (listItem as TextNode).type === "li") {
-            const content = serializeInlineChildren(listItem as TextNode)
-            const isEmpty = !content || content.trim() === ""
-
-            if (!isEmpty) {
-              const liIndent = indent + "    "
-              const liClasses = getBlockTypeClasses("li")
-              html += `${liIndent}<li class="${liClasses}">${content}</li>\n`
-            }
-            i++
-          } else {
-            break
-          }
-        }
-
-        // Close ordered list
-        html += `${indent}  </ol>\n`
-      } else {
-        // Regular text node
-        html += serializeTextNode(textNode, indent + "  ")
-        i++
-      }
-    } else if (isContainerNode(child)) {
-      // For flex containers, wrap nested containers in flex items
-      if (isFlexContainer) {
-        html += `${indent}  <div class="flex-1 min-w-[280px] max-w-full">\n`
-        html += serializeContainerNode(child as ContainerNode, indent + "    ")
-        html += `${indent}  </div>\n`
-        i++
-      } else {
-        // Nested container - recurse!
-        html += serializeContainerNode(child as ContainerNode, indent + "  ")
-        i++
-      }
-    } else {
-      i++
-    }
-  }
-
-  html += `${indent}</${containerTag}>\n`
-  return html
-}
-
-/**
- * Serialize any editor node (TextNode or ContainerNode) to HTML
- */
-function serializeEditorNode(node: EditorNode, indent: string = ""): string {
-  if (isContainerNode(node)) {
-    return serializeContainerNode(node as ContainerNode, indent)
-  }
-  return serializeTextNode(node as TextNode, indent)
-}
-
-/**
- * Serialize the entire container to HTML
- *
- * @param container - The root container node from editor state
- * @param options - Serialization options
- * @returns HTML string with Tailwind classes
- *
- * @example
- * ```typescript
- * const html = serializeToHtml(state.container);
- *
- * // Output:
- * // <div class="editor-content">
- * //   <h1 class="text-5xl font-extrabold">Title</h1>
- * //   <p class="text-lg"><span class="font-bold">Bold text</span></p>
- * // </div>
- * ```
- */
-export function serializeToHtml(
-  container: ContainerNode,
-  options: {
-    wrapperClass?: string
-    includeWrapper?: boolean
-    indent?: string
-  } = {}
-): string {
-  const {
-    wrapperClass = "editor-content",
-    includeWrapper = true,
-    indent = "  ",
-  } = options
-
-  let html = ""
-
-  // Add wrapper div if requested
-  if (includeWrapper) {
-    html += `<div class="${wrapperClass}">\n`
-  }
-
-  // Serialize each child node, grouping consecutive list items and handling containers
-  let i = 0
-  while (i < container.children.length) {
-    const child = container.children[i]
-
-    if (isTextNode(child)) {
-      const textNode = child as TextNode
-
-      // Check if this is the start of a list
-      if (textNode.type === "li") {
-        // Start ordered list
-        html += `${includeWrapper ? indent : ""}<ol class="list-decimal list-inside space-y-1">\n`
-
-        // Add all consecutive list items
-        while (i < container.children.length) {
-          const listItem = container.children[i]
-          if (isTextNode(listItem) && (listItem as TextNode).type === "li") {
-            const content = serializeInlineChildren(listItem as TextNode)
-            const isEmpty = !content || content.trim() === ""
-
-            if (!isEmpty) {
-              const liIndent = includeWrapper ? indent + "  " : "  "
-              const liClasses = getBlockTypeClasses("li")
-              html += `${liIndent}<li class="${liClasses}">${content}</li>\n`
-            }
-            i++
-          } else {
-            break
-          }
-        }
-
-        // Close ordered list
-        html += `${includeWrapper ? indent : ""}</ol>\n`
-      } else {
-        // Regular text node (not a list item)
-        html += serializeTextNode(textNode, includeWrapper ? indent : "")
-        i++
-      }
-    } else if (isContainerNode(child)) {
-      // Nested container - recurse!
-      html += serializeContainerNode(
-        child as ContainerNode,
-        includeWrapper ? indent : ""
-      )
-      i++
-    } else {
-      i++
-    }
-  }
-
-  // Close wrapper div
-  if (includeWrapper) {
-    html += `</div>\n`
-  }
-
-  return html
-}
-
-/**
- * Serialize to HTML without wrapper div
- */
-export function serializeToHtmlFragment(container: ContainerNode): string {
-  return serializeToHtml(container, { includeWrapper: false, indent: "" })
-}
-
-/**
- * Serialize to HTML with custom wrapper class
- */
-export function serializeToHtmlWithClass(
-  container: ContainerNode,
-  wrapperClass: string
-): string {
-  return serializeToHtml(container, { wrapperClass })
-}
diff --git a/apps/web/src/components/ui/rich-editor/utils/tree-operations.ts b/apps/web/src/components/ui/rich-editor/utils/tree-operations.ts
deleted file mode 100644
index 8712dc13..00000000
--- a/apps/web/src/components/ui/rich-editor/utils/tree-operations.ts
+++ /dev/null
@@ -1,448 +0,0 @@
-import {
-  ContainerNode,
-  EditorNode,
-  isContainerNode,
-  isStructuralNode,
-  StructuralNode,
-} from "../types"
-
-/**
- * Recursively finds a node by its ID in the tree.
- *
- * @param node - The root node to start searching from
- * @param targetId - The ID of the node to find
- * @returns The found node or undefined if not found
- *
- * @example
- * ```typescript
- * const found = findNodeById(rootContainer, 'paragraph-123');
- * if (found) {
- *
- * }
- * ```
- */
-export function findNodeById(
-  node: EditorNode,
-  targetId: string
-): EditorNode | undefined {
-  // Base case: current node matches
-  if (node.id === targetId) {
-    return node
-  }
-
-  // Recursive case: search children if it's a container or structural node
-  if (isContainerNode(node) || isStructuralNode(node)) {
-    for (const child of node.children) {
-      const found = findNodeById(child, targetId)
-      if (found) {
-        return found
-      }
-    }
-  }
-
-  return undefined
-}
-
-/**
- * Finds the parent container of a node with the given ID.
- * Useful for operations that need to modify the parent.
- *
- * @param node - The root node to start searching from
- * @param targetId - The ID of the child node
- * @returns The parent ContainerNode or undefined if not found
- *
- * @example
- * ```typescript
- * const parent = findParentById(rootContainer, 'child-node-id');
- * if (parent) {
- *
- * }
- * ```
- */
-export function findParentById(
-  node: EditorNode,
-  targetId: string
-): ContainerNode | StructuralNode | undefined {
-  if (!isContainerNode(node) && !isStructuralNode(node)) {
-    return undefined
-  }
-
-  // Check if target is a direct child
-  for (const child of node.children) {
-    if (child.id === targetId) {
-      return node
-    }
-  }
-
-  // Recursively search in children
-  for (const child of node.children) {
-    if (isContainerNode(child) || isStructuralNode(child)) {
-      const found = findParentById(child, targetId)
-      if (found) {
-        return found
-      }
-    }
-  }
-
-  return undefined
-}
-
-/**
- * Updates a node immutably by ID with a partial update.
- * Returns a new tree with the updated node.
- *
- * @param node - The root node
- * @param targetId - The ID of the node to update
- * @param updater - Function that receives the old node and returns updates
- * @returns A new tree with the node updated, or the original if not found
- *
- * @example
- * ```typescript
- * const newTree = updateNodeById(root, 'p-1', (node) => ({
- *   content: 'Updated content',
- *   attributes: { ...node.attributes, className: 'highlight' }
- * }));
- * ```
- */
-export function updateNodeById(
-  node: EditorNode,
-  targetId: string,
-  updater: (node: EditorNode) => Partial<EditorNode>
-): EditorNode {
-  // Base case: found the target node
-  if (node.id === targetId) {
-    const updates = updater(node)
-    return { ...node, ...updates } as EditorNode
-  }
-
-  // Recursive case: update children if it's a container or structural node
-  if (isContainerNode(node) || isStructuralNode(node)) {
-    const newChildren = node.children.map((child) =>
-      updateNodeById(child, targetId, updater)
-    )
-
-    // Only create new object if children actually changed
-    const childrenChanged = newChildren.some(
-      (newChild, index) => newChild !== node.children[index]
-    )
-
-    if (childrenChanged) {
-      return {
-        ...node,
-        children: newChildren,
-      }
-    }
-  }
-
-  // No changes, return original node
-  return node
-}
-
-/**
- * Deletes a node by ID immutably.
- * Returns a new tree without the specified node.
- *
- * @param node - The root node
- * @param targetId - The ID of the node to delete
- * @returns A new tree without the deleted node
- *
- * @example
- * ```typescript
- * const newTree = deleteNodeById(root, 'paragraph-to-remove');
- * ```
- */
-export function deleteNodeById(
-  node: EditorNode,
-  targetId: string
-): EditorNode | null {
-  // If this is the target node, signal deletion
-  if (node.id === targetId) {
-    return null
-  }
-
-  // If it's a container or structural node, filter out the target from children
-  if (isContainerNode(node) || isStructuralNode(node)) {
-    const newChildren = node.children
-      .map((child) => deleteNodeById(child, targetId))
-      .filter((child): child is EditorNode => child !== null)
-
-    // Only create new object if children changed
-    if (newChildren.length !== node.children.length) {
-      return {
-        ...node,
-        children: newChildren,
-      }
-    }
-  }
-
-  return node
-}
-
-/**
- * Position for inserting a node relative to another node.
- */
-export type InsertPosition = "before" | "after" | "prepend" | "append"
-
-/**
- * Inserts a new node relative to a target node.
- *
- * @param root - The root node
- * @param targetId - The ID of the reference node
- * @param newNode - The node to insert
- * @param position - Where to insert relative to target ('before', 'after', 'prepend', 'append')
- * @returns A new tree with the node inserted
- *
- * @example
- * ```typescript
- * // Insert after a specific paragraph
- * const newTree = insertNode(root, 'p-1', newParagraph, 'after');
- *
- * // Prepend to a container
- * const newTree = insertNode(root, 'container-1', newHeading, 'prepend');
- * ```
- */
-export function insertNode(
-  root: EditorNode,
-  targetId: string,
-  newNode: EditorNode,
-  position: InsertPosition
-): EditorNode {
-  // For 'prepend' and 'append', insert inside the target container
-  if (position === "prepend" || position === "append") {
-    return updateNodeById(root, targetId, (node) => {
-      if (!isContainerNode(node) && !isStructuralNode(node)) {
-        console.warn(
-          `Cannot ${position} to non-container/structural node ${targetId}`
-        )
-        return {}
-      }
-
-      return {
-        children:
-          position === "prepend"
-            ? [newNode, ...node.children]
-            : [...node.children, newNode],
-      }
-    })
-  }
-
-  // For 'before' and 'after', insert as sibling
-  // We need to find the parent and insert at the right position
-  return insertNodeRecursive(root, targetId, newNode, position)
-}
-
-/**
- * Helper function for inserting nodes as siblings.
- * @internal
- */
-function insertNodeRecursive(
-  node: EditorNode,
-  targetId: string,
-  newNode: EditorNode,
-  position: "before" | "after"
-): EditorNode {
-  if (!isContainerNode(node) && !isStructuralNode(node)) {
-    return node
-  }
-
-  // Check if target is a direct child
-  const targetIndex = node.children.findIndex((child) => child.id === targetId)
-
-  if (targetIndex !== -1) {
-    // Found the target, insert the new node
-    const newChildren = [...node.children]
-    const insertIndex = position === "before" ? targetIndex : targetIndex + 1
-    newChildren.splice(insertIndex, 0, newNode)
-
-    return {
-      ...node,
-      children: newChildren,
-    }
-  }
-
-  // Recursively search in children
-  const newChildren = node.children.map((child) =>
-    insertNodeRecursive(child, targetId, newNode, position)
-  )
-
-  // Only create new object if children changed
-  const childrenChanged = newChildren.some(
-    (newChild, index) => newChild !== node.children[index]
-  )
-
-  if (childrenChanged) {
-    return {
-      ...node,
-      children: newChildren,
-    }
-  }
-
-  return node
-}
-
-/**
- * Moves a node to a new position in the tree.
- *
- * @param root - The root node
- * @param nodeId - The ID of the node to move
- * @param targetId - The ID of the reference node
- * @param position - Where to move relative to target
- * @returns A new tree with the node moved
- *
- * @example
- * ```typescript
- * // Move paragraph-2 before paragraph-1
- * const newTree = moveNode(root, 'p-2', 'p-1', 'before');
- * ```
- */
-export function moveNode(
-  root: EditorNode,
-  nodeId: string,
-  targetId: string,
-  position: InsertPosition
-): EditorNode {
-  // Cannot move a node to itself
-  if (nodeId === targetId) {
-    console.warn("Cannot move a node to itself")
-    return root
-  }
-
-  // Find the node to move
-  const nodeToMove = findNodeById(root, nodeId)
-  if (!nodeToMove) {
-    console.warn(`Node ${nodeId} not found`)
-    return root
-  }
-
-  // Verify target exists
-  const targetNode = findNodeById(root, targetId)
-  if (!targetNode) {
-    console.warn(`Target node ${targetId} not found`)
-    return root
-  }
-
-  // First, remove the node from its current position
-  const treeWithoutNode = deleteNodeById(root, nodeId)
-  if (!treeWithoutNode) {
-    return root
-  }
-
-  // Then, insert it at the new position
-  return insertNode(treeWithoutNode, targetId, nodeToMove, position)
-}
-
-/**
- * Deep clones a node (and all its children if it's a container).
- * Useful for duplicating content.
- *
- * @param node - The node to clone
- * @param newId - Optional new ID for the cloned node
- * @returns A deep clone of the node
- *
- * @example
- * ```typescript
- * const clone = cloneNode(originalNode, 'new-unique-id');
- * ```
- */
-export function cloneNode(node: EditorNode, newId?: string): EditorNode {
-  const cloned: EditorNode = {
-    ...node,
-    id: newId || `${node.id}-clone-${Date.now()}`,
-  }
-
-  if (
-    (isContainerNode(cloned) || isStructuralNode(cloned)) &&
-    (isContainerNode(node) || isStructuralNode(node))
-  ) {
-    cloned.children = node.children.map((child) => cloneNode(child))
-  }
-
-  return cloned
-}
-
-/**
- * Traverses the tree and calls a callback for each node.
- * Useful for analytics, validation, or batch operations.
- *
- * @param node - The root node to traverse
- * @param callback - Function called for each node
- * @param depth - Current depth (starts at 0)
- *
- * @example
- * ```typescript
- * // Count all nodes
- * let count = 0;
- * traverseTree(root, () => count++);
- *
- *
- * // Find all images
- * const images: TextNode[] = [];
- * traverseTree(root, (node) => {
- *   if (node.type === 'img') images.push(node as TextNode);
- * });
- * ```
- */
-export function traverseTree(
-  node: EditorNode,
-  callback: (node: EditorNode, depth: number) => void,
-  depth: number = 0
-): void {
-  callback(node, depth)
-
-  if (isContainerNode(node) || isStructuralNode(node)) {
-    for (const child of node.children) {
-      traverseTree(child, callback, depth + 1)
-    }
-  }
-}
-
-/**
- * Validates the tree structure.
- * Checks for duplicate IDs, orphaned nodes, etc.
- *
- * @param node - The root node to validate
- * @returns Validation result with errors if any
- *
- * @example
- * ```typescript
- * const result = validateTree(root);
- * if (!result.valid) {
- *   console.error('Tree validation errors:', result.errors);
- * }
- * ```
- */
-export function validateTree(node: EditorNode): {
-  valid: boolean
-  errors: string[]
-} {
-  const errors: string[] = []
-  const seenIds = new Set<string>()
-
-  traverseTree(node, (currentNode) => {
-    // Check for duplicate IDs
-    if (seenIds.has(currentNode.id)) {
-      errors.push(`Duplicate ID found: ${currentNode.id}`)
-    }
-    seenIds.add(currentNode.id)
-
-    // Check for empty IDs
-    if (!currentNode.id || currentNode.id.trim() === "") {
-      errors.push("Node found with empty or missing ID")
-    }
-
-    // Check for invalid container/structural node children
-    if (
-      (isContainerNode(currentNode) || isStructuralNode(currentNode)) &&
-      !Array.isArray(currentNode.children)
-    ) {
-      errors.push(
-        `Container/Structural node ${currentNode.id} has invalid children property`
-      )
-    }
-  })
-
-  return {
-    valid: errors.length === 0,
-    errors,
-  }
-}
diff --git a/apps/web/src/components/ui/rich-editor/video-block.tsx b/apps/web/src/components/ui/rich-editor/video-block.tsx
deleted file mode 100644
index a35d9b21..00000000
--- a/apps/web/src/components/ui/rich-editor/video-block.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-import { Loader2, Video as VideoIcon, X } from "lucide-react"
-
-import { Button } from "../button"
-import { Card } from "../card"
-import { Checkbox } from "../checkbox"
-import { TextNode } from "./types"
-
-interface VideoBlockProps {
-  node: TextNode
-  isActive: boolean
-  onClick: () => void
-  onDelete?: () => void
-  onDragStart?: (nodeId: string) => void
-  isSelected?: boolean
-  onToggleSelection?: (nodeId: string) => void
-  onClickWithModifier?: (e: React.MouseEvent, nodeId: string) => void
-}
-
-export function VideoBlock({
-  node,
-  isActive,
-  onClick,
-  onDelete,
-  onDragStart,
-  isSelected = false,
-  onToggleSelection,
-  onClickWithModifier,
-}: VideoBlockProps) {
-  const [videoError, setVideoError] = useState(false)
-
-  const handleClick = (e: React.MouseEvent) => {
-    // Check for Ctrl/Cmd click first
-    if (onClickWithModifier) {
-      onClickWithModifier(e, node.id)
-    }
-
-    // Only call regular onClick if not a modifier click
-    if (!e.ctrlKey && !e.metaKey) {
-      onClick()
-    }
-  }
-
-  const handleDragStart = (e: React.DragEvent) => {
-    e.dataTransfer.effectAllowed = "move"
-    e.dataTransfer.setData("text/plain", node.id)
-    e.dataTransfer.setData(
-      "application/json",
-      JSON.stringify({
-        nodeId: node.id,
-        type: node.type,
-        src: node.attributes?.src,
-      })
-    )
-    if (onDragStart) {
-      onDragStart(node.id)
-    }
-  }
-
-  const handleDragEnd = (e: React.DragEvent) => {}
-
-  const videoUrl = node.attributes?.src as string | undefined
-  const caption = node.content || ""
-  const isUploading =
-    node.attributes?.loading === "true" || node.attributes?.loading === true
-  const hasError =
-    node.attributes?.error === "true" || node.attributes?.error === true
-
-  // Check if the video URL is a base64 data URL (indicates no upload handler provided)
-  const isBase64Video =
-    videoUrl?.startsWith("data:video/") ||
-    videoUrl?.startsWith("data:image/svg")
-  const needsUploadHandler = isBase64Video && !isUploading && !hasError
-
-  const handleVideoLoad = () => {
-    setVideoError(false)
-  }
-
-  const handleVideoError = () => {
-    setVideoError(true)
-  }
-
-  return (
-    <Card
-      draggable
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      className={`group relative mb-4 cursor-move !border-0 p-4 transition-all duration-200 ${isActive ? "ring-primary/50 bg-accent/5 ring-2" : "hover:bg-accent/5"} ${isSelected ? "bg-blue-500/10 ring-2 ring-blue-500" : ""} `}
-      onClick={handleClick}
-    >
-      {/* Selection checkbox */}
-      {onToggleSelection && (
-        <div
-          className={`absolute top-2 left-2 z-10 transition-opacity ${
-            isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-          }`}
-          onClick={(e) => {
-            e.stopPropagation()
-          }}
-        >
-          <Checkbox
-            checked={isSelected}
-            onCheckedChange={() => onToggleSelection(node.id)}
-            className="bg-background h-5 w-5 border-2"
-          />
-        </div>
-      )}
-
-      {/* Delete button */}
-      {onDelete && (
-        <Button
-          variant="destructive"
-          size="icon"
-          className="absolute top-2 right-2 z-10 h-8 w-8 opacity-0 transition-opacity group-hover:opacity-100"
-          onClick={(e) => {
-            e.stopPropagation()
-            onDelete()
-          }}
-        >
-          <X className="h-4 w-4" />
-        </Button>
-      )}
-
-      {/* Video container */}
-      <div className="relative w-full">
-        {/* Uploading state - show spinner overlay */}
-        {isUploading && (
-          <div className="bg-muted/50 border-primary/50 flex h-64 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed">
-            <Loader2 className="text-primary mb-3 h-12 w-12 animate-spin" />
-            <p className="text-foreground text-sm font-medium">
-              Uploading video...
-            </p>
-            <p className="text-muted-foreground mt-1 text-xs">Please wait</p>
-          </div>
-        )}
-
-        {/* Error state (from upload failure) */}
-        {!isUploading && hasError && (
-          <div className="bg-destructive/10 border-destructive/50 flex h-64 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed">
-            <X className="text-destructive mb-2 h-12 w-12" />
-            <p className="text-destructive text-sm font-medium">
-              Upload Failed
-            </p>
-            <p className="text-muted-foreground mt-1 text-xs">
-              Please try again
-            </p>
-          </div>
-        )}
-
-        {/* Normal video loading/error states */}
-        {!isUploading && !hasError && (
-          <>
-            {/* Upload handler required message */}
-            {needsUploadHandler && (
-              <div className="flex h-64 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-amber-500/50 bg-amber-500/10">
-                <VideoIcon className="mb-3 h-12 w-12 text-amber-500" />
-                <p className="text-foreground text-sm font-medium">
-                  Video Upload Handler Required
-                </p>
-                <p className="text-muted-foreground mt-2 max-w-md px-4 text-center text-xs">
-                  Video files need a custom upload handler. The default handler
-                  only supports images.
-                </p>
-                <p className="text-muted-foreground mt-1 max-w-md px-4 text-center text-xs">
-                  Pass{" "}
-                  <code className="bg-muted rounded px-1 py-0.5 text-xs">
-                    onUploadImage
-                  </code>{" "}
-                  prop to the Editor component.
-                </p>
-              </div>
-            )}
-
-            {/* Error state */}
-            {videoError && !needsUploadHandler && (
-              <div className="bg-muted border-muted-foreground/25 flex h-64 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed">
-                <VideoIcon className="text-muted-foreground/50 mb-2 h-12 w-12" />
-                <p className="text-muted-foreground text-sm">
-                  Failed to load video
-                </p>
-                {videoUrl && (
-                  <p className="text-muted-foreground/70 mt-1 max-w-xs truncate text-xs">
-                    {videoUrl}
-                  </p>
-                )}
-              </div>
-            )}
-
-            {/* Actual video */}
-            {videoUrl && !videoError && !needsUploadHandler && (
-              <video
-                src={videoUrl}
-                controls
-                className="h-auto max-h-[600px] w-full rounded-lg object-cover"
-                onLoadedData={handleVideoLoad}
-                onError={handleVideoError}
-                preload="metadata"
-              >
-                Your browser does not support the video tag.
-              </video>
-            )}
-
-            {/* Caption */}
-            {caption && (
-              <p className="text-muted-foreground mt-3 text-center text-sm italic">
-                {caption}
-              </p>
-            )}
-          </>
-        )}
-      </div>
-    </Card>
-  )
-}
diff --git a/apps/web/src/i18n/request.ts b/apps/web/src/i18n/request.ts
index 5679dfd0..ae649587 100644
--- a/apps/web/src/i18n/request.ts
+++ b/apps/web/src/i18n/request.ts
@@ -16,8 +16,29 @@ export default getRequestConfig(async () => {
   const locale: AppLocale = locales.includes(raw as AppLocale)
     ? (raw as AppLocale)
     : 'en';
-  return {
-    locale,
-    messages: (await import(`../../messages/${locale}.json`)).default
-  };
+  const en = (await import(`../../messages/en.json`)).default;
+  const messages =
+    locale === 'en'
+      ? en
+      // Fall back to English for any key missing in the active locale, so a new
+      // string added to en.json renders in English everywhere until translated —
+      // instead of showing the raw key path in 26 locales.
+      : deepMerge(en, (await import(`../../messages/${locale}.json`)).default);
+  return { locale, messages };
 });
+
+// Deep-merges translation objects: `override` (locale) wins over `base` (en);
+// missing keys inherit from base. Both are trusted, static JSON.
+type Messages = { [k: string]: string | Messages };
+function deepMerge(base: Messages, override: Messages): Messages {
+  const out: Messages = { ...base };
+  for (const key of Object.keys(override)) {
+    const b = base[key];
+    const o = override[key];
+    out[key] =
+      b && o && typeof b === 'object' && typeof o === 'object'
+        ? deepMerge(b, o)
+        : o;
+  }
+  return out;
+}
diff --git a/apps/web/src/lib/environment-manager-utils.ts b/apps/web/src/lib/environment-manager-utils.ts
index db7b8364..3c6ce0fc 100644
--- a/apps/web/src/lib/environment-manager-utils.ts
+++ b/apps/web/src/lib/environment-manager-utils.ts
@@ -3,6 +3,34 @@ import type { EnvSetEntry, EnvVariableRow } from "@/store/environment-manager-st
 /** Typical .env export key: letters, digits, underscore; must not start with digit. */
 const ENV_KEY_RE = /^[A-Za-z_][A-Za-z0-9_]*$/
 
+/** Index of the closing quote matching `s[0]`, or -1 if unterminated. `\` escapes inside `"`. */
+function findClosingQuote(s: string, quote: string): number {
+    for (let i = 1; i < s.length; i++) {
+        if (quote === '"' && s[i] === "\\") {
+            i++ // skip the escaped character
+            continue
+        }
+        if (s[i] === quote) return i
+    }
+    return -1
+}
+
+/** Unescape a double-quoted value in a single pass so `\\n` stays a literal backslash + n. */
+function unescapeDoubleQuoted(val: string): string {
+    return val.replace(/\\([\\nrt"'])/g, (_, c: string) => {
+        switch (c) {
+            case "n":
+                return "\n"
+            case "r":
+                return "\r"
+            case "t":
+                return "\t"
+            default:
+                return c // \\  \"  \'
+        }
+    })
+}
+
 function parseEnvAssignmentBody(line: string): EnvVariableRow | null {
     let s = line.trim()
     if (s.startsWith("export ")) {
@@ -12,14 +40,26 @@ function parseEnvAssignmentBody(line: string): EnvVariableRow | null {
     if (eq <= 0) return null
     const rawKey = s.slice(0, eq).trim()
     if (!ENV_KEY_RE.test(rawKey)) return null
-    let val = s.slice(eq + 1)
-    if (
-        (val.startsWith('"') && val.endsWith('"')) ||
-        (val.startsWith("'") && val.endsWith("'"))
-    ) {
-        val = val.slice(1, -1)
-        val = val.replace(/\\n/g, "\n").replace(/\\r/g, "\r").replace(/\\"/g, '"').replace(/\\'/g, "'")
+
+    // Whitespace between `=` and the value (e.g. `KEY = value`) is not part of the value.
+    const rest = s.slice(eq + 1).replace(/^[ \t]+/, "")
+
+    const quote = rest[0]
+    if (quote === '"' || quote === "'") {
+        const close = findClosingQuote(rest, quote)
+        if (close !== -1) {
+            const inner = rest.slice(1, close)
+            // Only double-quoted values process escapes; single-quoted are literal.
+            // Anything after the closing quote (e.g. an inline comment) is discarded.
+            const val = quote === '"' ? unescapeDoubleQuoted(inner) : inner
+            return { key: rawKey, value: val }
+        }
+        // Unterminated quote: fall through and treat the whole thing as an unquoted value.
     }
+
+    // Unquoted: an inline comment (` #...`) and trailing whitespace are not part of the value.
+    const commentAt = rest.search(/\s#/)
+    const val = (commentAt === -1 ? rest : rest.slice(0, commentAt)).replace(/[ \t]+$/, "")
     return { key: rawKey, value: val }
 }