From 601d5231fb9f31dcc9e98da51972410002aa4955 Mon Sep 17 00:00:00 2001
From: kumarabhirup <hey@kumareth.com>
Date: Wed, 4 Mar 2026 11:14:08 -0800
Subject: [PATCH] feat(web): extract workspace editor toolbar primitives

---
 .../workspace/editor-toolbar-primitives.tsx   | 60 +++++++++++++++++++
 .../components/workspace/markdown-editor.tsx  | 60 +------------------
 2 files changed, 63 insertions(+), 57 deletions(-)
 create mode 100644 apps/web/app/components/workspace/editor-toolbar-primitives.tsx

diff --git a/apps/web/app/components/workspace/editor-toolbar-primitives.tsx b/apps/web/app/components/workspace/editor-toolbar-primitives.tsx
new file mode 100644
index 00000000000..c408597d1fd
--- /dev/null
+++ b/apps/web/app/components/workspace/editor-toolbar-primitives.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import type React from "react";
+
+export function ToolbarGroup({ children }: { children: React.ReactNode }) {
+  return <div className="editor-toolbar-group">{children}</div>;
+}
+
+export function ToolbarDivider() {
+  return <div className="editor-toolbar-divider" />;
+}
+
+export function ToolbarButton({
+  active,
+  onClick,
+  title,
+  children,
+  disabled,
+}: {
+  active: boolean;
+  onClick: () => void;
+  title: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      className={`editor-toolbar-btn ${active ? "editor-toolbar-btn-active" : ""}`}
+      onClick={onClick}
+      title={title}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function BubbleButton({
+  active,
+  onClick,
+  title,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      className={`bubble-menu-btn ${active ? "bubble-menu-btn-active" : ""}`}
+      onClick={onClick}
+      title={title}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/apps/web/app/components/workspace/markdown-editor.tsx b/apps/web/app/components/workspace/markdown-editor.tsx
index bc7f71929b0..edc0d91c5cd 100644
--- a/apps/web/app/components/workspace/markdown-editor.tsx
+++ b/apps/web/app/components/workspace/markdown-editor.tsx
@@ -17,6 +17,7 @@ import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 
 import { ReportBlockNode, preprocessReportBlocks, postprocessReportBlocks } from "./report-block-node";
 import { createSlashCommand, createWorkspaceMention, createFileMention, type TreeNode, type MentionSearchFn } from "./slash-command";
+import { ToolbarGroup, ToolbarDivider, ToolbarButton, BubbleButton } from "./editor-toolbar-primitives";
 import { isWorkspaceLink } from "@/lib/workspace-links";
 
 // --- Types ---
@@ -654,60 +655,5 @@ function EditorToolbar({
   );
 }
 
-// --- Toolbar primitives ---
-
-function ToolbarGroup({ children }: { children: React.ReactNode }) {
-  return <div className="editor-toolbar-group">{children}</div>;
-}
-
-function ToolbarDivider() {
-  return <div className="editor-toolbar-divider" />;
-}
-
-function ToolbarButton({
-  active,
-  onClick,
-  title,
-  children,
-}: {
-  active: boolean;
-  onClick: () => void;
-  title: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <button
-      type="button"
-      className={`editor-toolbar-btn ${active ? "editor-toolbar-btn-active" : ""}`}
-      onClick={onClick}
-      title={title}
-    >
-      {children}
-    </button>
-  );
-}
-
-// --- Bubble menu button ---
-
-function BubbleButton({
-  active,
-  onClick,
-  title,
-  children,
-}: {
-  active: boolean;
-  onClick: () => void;
-  title: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <button
-      type="button"
-      className={`bubble-menu-btn ${active ? "bubble-menu-btn-active" : ""}`}
-      onClick={onClick}
-      title={title}
-    >
-      {children}
-    </button>
-  );
-}
+// Toolbar primitives shared with rich-document-editor
+export { ToolbarGroup, ToolbarDivider, ToolbarButton, BubbleButton };