feat: emoji callout icon (#1323)

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

@@ -9,18 +9,21 @@ import {
   EditorMenuProps,
   ShouldShowProps,
 } from "@/features/editor/components/table/types/types.ts";
-import { ActionIcon, Tooltip } from "@mantine/core";
+import { ActionIcon, Tooltip, Divider } from "@mantine/core";
 import {
   IconAlertTriangleFilled,
   IconCircleCheckFilled,
   IconCircleXFilled,
   IconInfoCircleFilled,
+  IconMoodSmile,
 } from "@tabler/icons-react";
 import { CalloutType } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";
+import EmojiPicker from "@/components/ui/emoji-picker.tsx";
 
 export function CalloutMenu({ editor }: EditorMenuProps) {
   const { t } = useTranslation();
+  
   const shouldShow = useCallback(
     ({ state }: ShouldShowProps) => {
       if (!state) {
@@ -56,6 +59,36 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
     [editor],
   );
 
+  const setCalloutIcon = useCallback(
+    (emoji: any) => {
+      const emojiChar = emoji?.native || emoji?.emoji || emoji;
+      editor
+        .chain()
+        .focus(undefined, { scrollIntoView: false })
+        .updateCalloutIcon(emojiChar)
+        .run();
+    },
+    [editor],
+  );
+
+  const removeCalloutIcon = useCallback(() => {
+    editor
+      .chain()
+      .focus(undefined, { scrollIntoView: false })
+      .updateCalloutIcon("")
+      .run();
+  }, [editor]);
+
+  const getCurrentIcon = () => {
+    const { selection } = editor.state;
+    const predicate = (node: PMNode) => node.type.name === "callout";
+    const parent = findParentNode(predicate)(selection);
+    const icon = parent?.node.attrs.icon;
+    return icon || null;
+  };
+
+  const currentIcon = getCurrentIcon();
+
   return (
     <BaseBubbleMenu
       editor={editor}
@@ -130,6 +163,20 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
             <IconCircleXFilled size={18} />
           </ActionIcon>
         </Tooltip>
+
+        <Tooltip position="top" label={t("Custom emoji")}>
+          <EmojiPicker
+            onEmojiSelect={setCalloutIcon}
+            removeEmojiAction={removeCalloutIcon}
+            readOnly={false}
+            icon={currentIcon || <IconMoodSmile size={18} />}
+            actionIconProps={{
+              size: "lg",
+              variant: "default",
+              c: undefined
+            }}
+          />
+        </Tooltip>
       </ActionIcon.Group>
     </BaseBubbleMenu>
   );