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>
   );

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

@@ -11,7 +11,7 @@ import { CalloutType } from "@docmost/editor-ext";
 
 export default function CalloutView(props: NodeViewProps) {
   const { node } = props;
-  const { type } = node.attrs;
+  const { type, icon } = node.attrs;
 
   return (
     <NodeViewWrapper>
@@ -19,7 +19,7 @@ export default function CalloutView(props: NodeViewProps) {
         variant="light"
         title=""
         color={getCalloutColor(type)}
-        icon={getCalloutIcon(type)}
+        icon={getCalloutIcon(type, icon)}
         p="xs"
         classNames={{
           message: classes.message,
@@ -32,7 +32,11 @@ export default function CalloutView(props: NodeViewProps) {
   );
 }
 
-function getCalloutIcon(type: CalloutType) {
+function getCalloutIcon(type: CalloutType, customIcon?: string) {
+  if (customIcon && customIcon.trim() !== "") {
+    return <span style={{ fontSize: '18px' }}>{customIcon}</span>;
+  }
+
   switch (type) {
     case "info":
       return <IconInfoCircleFilled />;