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,17 +168,20 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
     >
       <div className={classes.bubbleMenu}>
         {isGenerativeAiEnabled && (
-          <Button
+          <>
-            variant="default"
+            <Button
-            className={clsx(classes.buttonRoot)}
+              variant="default"
-            radius="0"
+              className={clsx(classes.buttonRoot)}
-            leftSection={<IconSparkles size={16} />}
+              radius="0"
-            onClick={() => {
+              leftSection={<IconSparkles size={16} />}
-              setShowAiMenu(true);
+              onClick={() => {
-            }}
+                setShowAiMenu(true);
-          >
+              }}
-            {t("Ask AI")}
+            >
-          </Button>
+              {t("Ask AI")}
+            </Button>
+            <div className={classes.divider} />
+          </>
         )}
         <NodeSelector
           editor={props.editor}
@@ -243,16 +246,18 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           }}
         />
 
-        <ActionIcon
+        <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
-          variant="default"
+          <ActionIcon
-          size="lg"
+            variant="default"
-          radius="6px"
+            size="lg"
-          aria-label={t(commentItem.name)}
+            radius="6px"
-          style={{ border: "none" }}
+            aria-label={t(commentItem.name)}
-          onClick={commentItem.command}
+            style={{ border: "none" }}
-        >
+            onClick={commentItem.command}
-          <IconMessage size={16} stroke={2} />
+          >
-        </ActionIcon>
+            <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,16 +133,18 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   return (
     <Popover opened={isOpen} withArrow>
       <Popover.Target>
-        <Button
+        <Tooltip label={t("Turn into")} withArrow withinPortal={false} disabled={isOpen}>
-          className={classes.buttonRoot}
+          <Button
-          variant="default"
+            className={classes.buttonRoot}
-          style={{ border: "none", height: "34px" }}
+            variant="default"
-          radius="0"
+            style={{ border: "none", height: "34px" }}
-          rightSection={<IconChevronDown size={16} />}
+            radius="0"
-          onClick={() => setIsOpen(!isOpen)}
+            rightSection={<IconChevronDown size={16} />}
-        >
+            onClick={() => setIsOpen(!isOpen)}
-          {t(activeItem?.name)}
+          >
-        </Button>
+            {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,16 +84,18 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
   return (
     <Popover opened={isOpen} withArrow>
       <Popover.Target>
-        <Button
+        <Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
-          variant="default"
+          <Button
-          style={{ border: "none", height: "34px" }}
+            variant="default"
-          px="5"
+            style={{ border: "none", height: "34px" }}
-          radius="0"
+            px="5"
-          rightSection={<IconChevronDown size={16} />}
+            radius="0"
-          onClick={() => setIsOpen(!isOpen)}
+            rightSection={<IconChevronDown size={16} />}
-        >
+            onClick={() => setIsOpen(!isOpen)}
-          <activeItem.icon style={{ width: rem(16) }} stroke={2} />
+          >
-        </Button>
+            <activeItem.icon style={{ width: rem(16) }} stroke={2} />
+          </Button>
+        </Tooltip>
       </Popover.Target>
 
       <Popover.Dropdown>