enhance editor bubble menu

apps/client/public/locales/en-US/translation.json

@@ -355,6 +355,8 @@
   "Insert current date": "Insert current date",
   "Draw and sketch excalidraw diagrams": "Draw and sketch excalidraw diagrams",
   "Multiple": "Multiple",
+  "Turn into": "Turn into",
+  "Text align": "Text align",
   "Heading {{level}}": "Heading {{level}}",
   "Toggle title": "Toggle title",
   "Write anything. Enter \"/\" for commands": "Write anything. Enter \"/\" for commands",

apps/client/src/features/editor/components/bubble-menu/bubble-menu.module.css

@@ -8,6 +8,10 @@
   border-radius: 6px;
   border: 1px solid
     light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-8));
+  background-color: light-dark(
+    var(--mantine-color-white),
+    var(--mantine-color-dark-6)
+  );
 
   > * {
     flex-shrink: 0;
@@ -36,3 +40,14 @@
   border-right: 1px solid
     light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)) !important;
 }
+
+.divider {
+  width: 1px;
+  height: 16px;
+  align-self: center;
+  margin: 0 4px;
+  background-color: light-dark(
+    var(--mantine-color-gray-3),
+    var(--mantine-color-dark-3)
+  );
+}

apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx

@@ -168,6 +168,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
     >
       <div className={classes.bubbleMenu}>
         {isGenerativeAiEnabled && (
+          <>
             <Button
               variant="default"
               className={clsx(classes.buttonRoot)}
@@ -179,6 +180,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             >
               {t("Ask AI")}
             </Button>
+            <div className={classes.divider} />
+          </>
         )}
         <NodeSelector
           editor={props.editor}
@@ -243,6 +246,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           }}
         />
 
+        <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
           <ActionIcon
             variant="default"
             size="lg"
@@ -253,6 +257,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           >
             <IconMessage size={16} stroke={2} />
           </ActionIcon>
+        </Tooltip>
       </div>
     </BubbleMenu>
   );

apps/client/src/features/editor/components/bubble-menu/node-selector.tsx

@@ -12,7 +12,7 @@ import {
   IconListNumbers,
   IconTypography,
 } from "@tabler/icons-react";
-import { Popover, Button, ScrollArea } from "@mantine/core";
+import { Popover, Button, ScrollArea, Tooltip } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
@@ -133,6 +133,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   return (
     <Popover opened={isOpen} withArrow>
       <Popover.Target>
+        <Tooltip label={t("Turn into")} withArrow withinPortal={false} disabled={isOpen}>
           <Button
             className={classes.buttonRoot}
             variant="default"
@@ -143,6 +144,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
           >
             {t(activeItem?.name)}
           </Button>
+        </Tooltip>
       </Popover.Target>
 
       <Popover.Dropdown>

apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx

@@ -7,7 +7,7 @@ import {
   IconCheck,
   IconChevronDown,
 } from "@tabler/icons-react";
-import { Popover, Button, ScrollArea, rem } from "@mantine/core";
+import { Popover, Button, ScrollArea, Tooltip, rem } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
@@ -84,6 +84,7 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
   return (
     <Popover opened={isOpen} withArrow>
       <Popover.Target>
+        <Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
           <Button
             variant="default"
             style={{ border: "none", height: "34px" }}
@@ -94,6 +95,7 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
           >
             <activeItem.icon style={{ width: rem(16) }} stroke={2} />
           </Button>
+        </Tooltip>
       </Popover.Target>
 
       <Popover.Dropdown>