From a0b01193d51a89c76463eba7b22f581465651fe0 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Fri, 11 Jul 2025 06:02:28 +0200
Subject: [PATCH] feat: :sparkles: Add bubble menu to composer

---
 components/editor/bubble-menu.vue             | 97 +++++++++++++++++++
 components/editor/content.vue                 |  5 +-
 components/ui/toggle-group/ToggleGroup.vue    | 45 +++++++++
 .../ui/toggle-group/ToggleGroupItem.vue       | 46 +++++++++
 components/ui/toggle-group/index.ts           |  2 +
 5 files changed, 194 insertions(+), 1 deletion(-)
 create mode 100644 components/editor/bubble-menu.vue
 create mode 100644 components/ui/toggle-group/ToggleGroup.vue
 create mode 100644 components/ui/toggle-group/ToggleGroupItem.vue
 create mode 100644 components/ui/toggle-group/index.ts

diff --git a/components/editor/bubble-menu.vue b/components/editor/bubble-menu.vue
new file mode 100644
index 0000000..68687bd
--- /dev/null
+++ b/components/editor/bubble-menu.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { BubbleMenu, type Editor } from "@tiptap/vue-3";
+import {
+    BoldIcon,
+    CurlyBracesIcon,
+    ItalicIcon,
+    StrikethroughIcon,
+    SubscriptIcon,
+    SuperscriptIcon,
+    UnderlineIcon,
+} from "lucide-vue-next";
+import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
+
+const { editor } = defineProps<{
+    editor: Editor;
+}>();
+
+const active = ref<string[]>(
+    [
+        editor.isActive("bold") ? "bold" : null,
+        editor.isActive("italic") ? "italic" : null,
+        editor.isActive("underline") ? "underline" : null,
+        editor.isActive("code") ? "code" : null,
+        editor.isActive("strike") ? "strike" : null,
+        editor.isActive("subscript") ? "subscript" : null,
+        editor.isActive("superscript") ? "superscript" : null,
+    ].filter((s) => s !== null),
+);
+
+watch(active, (value) => {
+    if (value.includes("bold")) {
+        editor.chain().focus().toggleBold().run();
+    } else {
+        editor.chain().unsetBold().run();
+    }
+    if (value.includes("italic")) {
+        editor.chain().focus().toggleItalic().run();
+    } else {
+        editor.chain().unsetItalic().run();
+    }
+    if (value.includes("underline")) {
+        editor.chain().focus().toggleUnderline().run();
+    } else {
+        editor.chain().unsetUnderline().run();
+    }
+    if (value.includes("code")) {
+        editor.chain().focus().toggleCode().run();
+    } else {
+        editor.chain().unsetCode().run();
+    }
+    if (value.includes("strike")) {
+        editor.chain().focus().toggleStrike().run();
+    } else {
+        editor.chain().unsetStrike().run();
+    }
+    if (value.includes("subscript")) {
+        editor.chain().focus().toggleSubscript().run();
+    } else {
+        editor.chain().unsetSubscript().run();
+    }
+    if (value.includes("superscript")) {
+        editor.chain().focus().toggleSuperscript().run();
+    } else {
+        editor.chain().unsetSuperscript().run();
+    }
+});
+</script>
+
+<template>
+    <BubbleMenu :editor="editor" class="bg-popover rounded-md">
+        <ToggleGroup type="multiple"
+            v-model="active"
+        >
+            <ToggleGroupItem value="bold">
+                <BoldIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="italic">
+                <ItalicIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="underline">
+                <UnderlineIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="code">
+                <CurlyBracesIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="strike">
+                <StrikethroughIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="subscript">
+                <SubscriptIcon />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="superscript">
+                <SuperscriptIcon />
+            </ToggleGroupItem>
+        </ToggleGroup>
+    </BubbleMenu>
+</template>
diff --git a/components/editor/content.vue b/components/editor/content.vue
index 9136c28..a57ff52 100644
--- a/components/editor/content.vue
+++ b/components/editor/content.vue
@@ -1,5 +1,7 @@
 <template>
+    <BubbleMenu :editor="editor" />
     <EditorContent :editor="editor"
+        v-bind="$attrs"
         :class="[$style.content, 'prose prose-sm dark:prose-invert break-words prose-a:no-underline prose-a:hover:underline prose-p:first-of-type:mt-0']" />
 </template>
 
@@ -14,6 +16,7 @@ import Superscript from "@tiptap/extension-superscript";
 import Underline from "@tiptap/extension-underline";
 import StarterKit from "@tiptap/starter-kit";
 import { Editor, EditorContent } from "@tiptap/vue-3";
+import BubbleMenu from "./bubble-menu.vue";
 import suggestion from "./suggestion.ts";
 
 const content = defineModel<string>("content");
@@ -113,7 +116,7 @@ onUnmounted(() => {
     @apply font-bold rounded-sm text-primary-foreground bg-primary px-1 py-0.5;
 }
 
-.tiptap .emoji > img {
+.tiptap .emoji>img {
     @apply h-[1lh] align-middle inline hover:scale-110 transition-transform duration-75 ease-in-out;
 }
 </style>
diff --git a/components/ui/toggle-group/ToggleGroup.vue b/components/ui/toggle-group/ToggleGroup.vue
new file mode 100644
index 0000000..3ed409c
--- /dev/null
+++ b/components/ui/toggle-group/ToggleGroup.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { reactiveOmit } from "@vueuse/core";
+import type { VariantProps } from "class-variance-authority";
+import {
+    ToggleGroupRoot,
+    type ToggleGroupRootEmits,
+    type ToggleGroupRootProps,
+    useForwardPropsEmits,
+} from "reka-ui";
+import { type HTMLAttributes, provide } from "vue";
+import { cn } from "@/lib/utils";
+import type { toggleVariants } from "../toggle/index.ts";
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
+
+const props = defineProps<
+    ToggleGroupRootProps & {
+        class?: HTMLAttributes["class"];
+        variant?: ToggleGroupVariants["variant"];
+        size?: ToggleGroupVariants["size"];
+    }
+>();
+const emits = defineEmits<ToggleGroupRootEmits>();
+
+provide("toggleGroup", {
+    variant: props.variant,
+    size: props.size,
+});
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-slot="slotProps"
+    data-slot="toggle-group"
+    :data-size="size"
+    :data-variant="variant"
+    v-bind="forwarded"
+    :class="cn('group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupRoot>
+</template>
diff --git a/components/ui/toggle-group/ToggleGroupItem.vue b/components/ui/toggle-group/ToggleGroupItem.vue
new file mode 100644
index 0000000..988bf26
--- /dev/null
+++ b/components/ui/toggle-group/ToggleGroupItem.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { reactiveOmit } from "@vueuse/core";
+import type { VariantProps } from "class-variance-authority";
+import {
+    ToggleGroupItem,
+    type ToggleGroupItemProps,
+    useForwardProps,
+} from "reka-ui";
+import { type HTMLAttributes, inject } from "vue";
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "../toggle/index.ts";
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
+
+const props = defineProps<
+    ToggleGroupItemProps & {
+        class?: HTMLAttributes["class"];
+        variant?: ToggleGroupVariants["variant"];
+        size?: ToggleGroupVariants["size"];
+    }
+>();
+
+const context = inject<ToggleGroupVariants>("toggleGroup");
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant");
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-slot="slotProps"
+    data-slot="toggle-group-item"
+    :data-variant="context?.variant || variant"
+    :data-size="context?.size || size"
+    v-bind="forwardedProps"
+    :class="cn(
+      toggleVariants({
+        variant: context?.variant || variant,
+        size: context?.size || size,
+      }),
+      'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupItem>
+</template>
diff --git a/components/ui/toggle-group/index.ts b/components/ui/toggle-group/index.ts
new file mode 100644
index 0000000..c72df1e
--- /dev/null
+++ b/components/ui/toggle-group/index.ts
@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./ToggleGroup.vue";
+export { default as ToggleGroupItem } from "./ToggleGroupItem.vue";