style: 🎨 Format code with Biome

app/components/editor/bubble-menu.vue

@@ -69,30 +69,31 @@ watch(active, (value) => {
 
 <template>
     <BubbleMenu :editor="editor">
-        <ToggleGroup type="multiple"
+        <ToggleGroup
+            type="multiple"
             v-model="active"
-             class="bg-popover rounded-md"
+            class="bg-popover rounded-md"
         >
             <ToggleGroupItem value="bold">
-                <BoldIcon />
+                <BoldIcon/>
             </ToggleGroupItem>
             <ToggleGroupItem value="italic">
-                <ItalicIcon />
+                <ItalicIcon/>
             </ToggleGroupItem>
             <ToggleGroupItem value="underline">
-                <UnderlineIcon />
+                <UnderlineIcon/>
             </ToggleGroupItem>
             <ToggleGroupItem value="code">
-                <CurlyBracesIcon />
+                <CurlyBracesIcon/>
             </ToggleGroupItem>
             <ToggleGroupItem value="strike">
-                <StrikethroughIcon />
+                <StrikethroughIcon/>
             </ToggleGroupItem>
             <ToggleGroupItem value="subscript">
-                <SubscriptIcon />
+                <SubscriptIcon/>
             </ToggleGroupItem>
             <ToggleGroupItem value="superscript">
-                <SuperscriptIcon />
+                <SuperscriptIcon/>
             </ToggleGroupItem>
         </ToggleGroup>
     </BubbleMenu>

app/components/editor/content.vue

@@ -1,8 +1,6 @@
 <template>
-    <BubbleMenu :editor="editor" />
-    <EditorContent :editor="editor"
-        v-bind="$attrs"
-        :class="$style.content" />
+    <BubbleMenu :editor="editor"/>
+    <EditorContent :editor="editor" v-bind="$attrs" :class="$style.content"/>
 </template>
 
 <script lang="ts" setup>
@@ -122,7 +120,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-lh align-middle inline hover:scale-110 transition-transform duration-75 ease-in-out;
 }
 </style>

app/components/editor/emojis-list.vue

@@ -1,10 +1,23 @@
 <template>
-    <Command class="rounded border shadow-md min-w-[200px] h-fit not-prose" :selected-value="emojis[selectedIndex]?.id">
+    <Command
+        class="rounded border shadow-md min-w-[200px] h-fit not-prose"
+        :selected-value="emojis[selectedIndex]?.id"
+    >
         <CommandList>
             <CommandEmpty>No results found.</CommandEmpty>
             <CommandGroup class="emojis-group" heading="Emojis">
-                <CommandItem :value="emoji.id" v-for="emoji, index in emojis" :key="emoji.id" @click="selectItem(index)" class="scroll-m-10">
-                    <img class="h-[1lh] align-middle inline hover:scale-110 transition-transform duration-75 ease-in-out" :src="emoji.url" :title="emoji.shortcode" />
+                <CommandItem
+                    :value="emoji.id"
+                    v-for="emoji, index in emojis"
+                    :key="emoji.id"
+                    @click="selectItem(index)"
+                    class="scroll-m-10"
+                >
+                    <img
+                        class="h-[1lh] align-middle inline hover:scale-110 transition-transform duration-75 ease-in-out"
+                        :src="emoji.url"
+                        :title="emoji.shortcode"
+                    >
                     <span>{{ emoji.shortcode }}</span>
                 </CommandItem>
             </CommandGroup>

app/components/editor/mentions-list.vue

@@ -1,11 +1,26 @@
 <template>
-    <Command class="rounded border shadow-md min-w-[200px] h-fit not-prose" :selected-value="items[selectedIndex]?.key">
+    <Command
+        class="rounded border shadow-md min-w-[200px] h-fit not-prose"
+        :selected-value="items[selectedIndex]?.key"
+    >
         <CommandList>
             <CommandEmpty>No results found.</CommandEmpty>
             <CommandGroup class="mentions-group" heading="Users">
-                <CommandItem :value="user.key" v-for="user, index in items" :key="user.key" @click="selectItem(index)" class="scroll-m-10">
-                    <Avatar class="size-4" :src="user.value.avatar" :name="user.value.display_name" />
-                    <span v-render-emojis="user.value.emojis">{{ user.value.display_name }}</span>
+                <CommandItem
+                    :value="user.key"
+                    v-for="user, index in items"
+                    :key="user.key"
+                    @click="selectItem(index)"
+                    class="scroll-m-10"
+                >
+                    <Avatar
+                        class="size-4"
+                        :src="user.value.avatar"
+                        :name="user.value.display_name"
+                    />
+                    <span v-render-emojis="user.value.emojis"
+                        >{{ user.value.display_name }}</span
+                    >
                 </CommandItem>
             </CommandGroup>
         </CommandList>