Basic text formatting updates

src/components/TaskDetail.tsx

@@ -1,4 +1,4 @@
-import { type Component, createEffect, createSignal, For, createMemo, onCleanup } from "solid-js";
+import { type Component, createEffect, createSignal, For, createMemo, onCleanup, Show } from "solid-js";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
 import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate, shareTask, revokeShare, splitTask, loadTaskContent, currentTaskContext, cleanupTaskAttachments, getFavoriteTag, now } from "@/store";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -18,6 +18,8 @@ import { useTheme } from "./ThemeProvider";
 import { getThemeAdjustedColor } from "@/lib/colors";
 import { pb } from "@/lib/pocketbase";
 import { getRecurrenceProgress } from "@/lib/recurrence";
+import { TextBubbleMenu } from "@/components/TextBubbleMenu";
+import { TableBubbleMenu } from "@/components/TableBubbleMenu";
 
 const TaskEditor = lazy(() => import("./TaskEditor").then(m => ({ default: m.TaskEditor })));
 
@@ -493,10 +495,19 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                     </div>
 
                     <div class="h-px w-full bg-border mt-5" />
+                    
+                    <Show when={editorInstance()}>
+                        {(editor: any) => (
+                            <div class="flex flex-col pt-1 pb-1 relative z-30">
+                                <TextBubbleMenu editor={editor()} />
+                                <TableBubbleMenu editor={editor()} />
+                            </div>
+                        )}
+                    </Show>
                 </div>
 
                 {/* Content Area */}
-                <div class="flex-1 overflow-y-auto px-6 pb-20 flex flex-col">
+                <div class="flex-1 overflow-y-auto px-6 pb-20 pt-4 flex flex-col">
                     <Suspense fallback={<div class="h-32 animate-pulse bg-muted/20 rounded-lg" />}>
                         <TaskEditor
                             content={props.task.content}