✨(frontend) add an EmojiPicker in the document tree

As discussed here suitenumerique#1358 (comment)

Author: olaurendeau

src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx

@@ -19,7 +19,7 @@ export const EmojiPicker = ({
   const { i18n } = useTranslation();
 
   return (
-    <Box $position="absolute" $zIndex={1000} $margin="2rem 0 0 0">
+    <Box>
       <Picker
         data={emojiData}
         locale={i18n.resolvedLanguage}

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx

@@ -1,20 +1,13 @@
-import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
 import { Tooltip } from '@openfun/cunningham-react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import {
-  Doc,
-  KEY_DOC,
-  KEY_LIST_DOC,
-  useDocStore,
-  useTrans,
-  useUpdateDoc,
-} from '@/docs/doc-management';
-import { useBroadcastStore, useResponsiveStore } from '@/stores';
+import { Doc, useDocStore, useTrans } from '@/docs/doc-management';
+import { useDocTitleUpdate } from '@/features/docs/doc-management/hooks/useDocTitleUpdate';
+import { useResponsiveStore } from '@/stores';
 
 interface DocTitleProps {
   doc: Doc;
@@ -50,47 +43,17 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
   const [titleDisplay, setTitleDisplay] = useState(doc.title);
-  const treeContext = useTreeContext<Doc>();
 
   const { untitledDocument } = useTrans();
 
-  const { broadcast } = useBroadcastStore();
-
-  const { mutate: updateDoc } = useUpdateDoc({
-    listInvalideQueries: [KEY_DOC, KEY_LIST_DOC],
-    onSuccess(updatedDoc) {
-      // Broadcast to every user connected to the document
-      broadcast(`${KEY_DOC}-${updatedDoc.id}`);
-
-      if (!treeContext) {
-        return;
-      }
-
-      if (treeContext.root?.id === updatedDoc.id) {
-        treeContext?.setRoot(updatedDoc);
-      } else {
-        treeContext?.treeData.updateNode(updatedDoc.id, updatedDoc);
-      }
-    },
-  });
+  const { updateDocTitle } = useDocTitleUpdate();
 
   const handleTitleSubmit = useCallback(
     (inputText: string) => {
-      let sanitizedTitle = inputText.trim();
-      sanitizedTitle = sanitizedTitle.replace(/(\r\n|\n|\r)/gm, '');
-
-      // When blank we set to untitled
-      if (!sanitizedTitle) {
-        setTitleDisplay('');
-      }
-
-      // If mutation we update
-      if (sanitizedTitle !== doc.title) {
-        setTitleDisplay(sanitizedTitle);
-        updateDoc({ id: doc.id, title: sanitizedTitle });
-      }
+      const sanitizedTitle = updateDocTitle(doc, inputText.trim());
+      setTitleDisplay(sanitizedTitle);
     },
-    [doc.id, doc.title, updateDoc],
+    [doc, updateDocTitle],
   );
 
   const handleKeyDown = (e: React.KeyboardEvent) => {

src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx

@@ -1,8 +1,20 @@
-import { Text, TextType } from '@/components';
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Icon, TextType } from '@/components';
+
+import { EmojiPicker } from '../../doc-editor/components/EmojiPicker';
+import emojidata from '../../doc-editor/components/custom-blocks/initEmojiCallout';
+import { useDocTitleUpdate } from '../hooks/useDocTitleUpdate';
 
 type DocIconProps = TextType & {
   emoji?: string | null;
+  emojiPicker?: boolean;
   defaultIcon: React.ReactNode;
+  docId?: string;
+  title?: string;
+  onEmojiUpdate?: (emoji: string) => void;
 };
 
 export const DocIcon = ({
@@ -11,22 +23,95 @@ export const DocIcon = ({
   $size = 'sm',
   $variation = '1000',
   $weight = '400',
+  emojiPicker = false,
+  docId,
+  title,
+  onEmojiUpdate,
   ...textProps
 }: DocIconProps) => {
-  if (!emoji) {
-    return <>{defaultIcon}</>;
-  }
+
+  const { t } = useTranslation();
+  const { updateDocEmoji } = useDocTitleUpdate();
+
+  const iconRef = React.useRef<HTMLDivElement>(null);
+
+  const [openEmojiPicker, setOpenEmojiPicker] = React.useState<boolean>(false);
+  const [pickerPosition, setPickerPosition] = React.useState<{
+    top: number;
+    left: number;
+  }>({ top: 0, left: 0 });
+
+  const toggleEmojiPicker = (e: React.MouseEvent) => {
+    if (emojiPicker) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      if (!openEmojiPicker && iconRef.current) {
+        const rect = iconRef.current.getBoundingClientRect();
+        setPickerPosition({
+          top: rect.bottom + window.scrollY + 8,
+          left: rect.left + window.scrollX,
+        });
+      }
+
+      setOpenEmojiPicker(!openEmojiPicker);
+    }
+  };
+
+  const handleEmojiSelect = ({ native }: { native: string }) => {
+    setOpenEmojiPicker(false);
+
+    // Update document emoji if docId is provided
+    if (docId && title !== undefined) {
+      updateDocEmoji(docId, title ?? '', native);
+    }
+
+    // Call the optional callback
+    onEmojiUpdate?.(native);
+  };
+
+  const handleClickOutside = () => {
+    setOpenEmojiPicker(false);
+  };
 
   return (
-    <Text
-      {...textProps}
-      $size={$size}
-      $variation={$variation}
-      $weight={$weight}
-      aria-hidden="true"
-      data-testid="doc-emoji-icon"
-    >
-      {emoji}
-    </Text>
+    <>
+      <Box ref={iconRef} onClick={toggleEmojiPicker} $position="relative">
+        {!emoji ? (
+          defaultIcon
+        ) : (
+          <Icon
+            {...textProps}
+            iconName={emoji}
+            $size={$size}
+            $variation={$variation}
+            $weight={$weight}
+            aria-hidden="true"
+            aria-label={t('Document emoji icon')}
+            data-testid="doc-emoji-icon"
+          >
+            {emoji}
+          </Icon>
+        )}
+      </Box>
+      {openEmojiPicker &&
+        createPortal(
+          <div
+            style={{
+              position: 'absolute',
+              top: pickerPosition.top,
+              left: pickerPosition.left,
+              zIndex: 1000,
+            }}
+          >
+            <EmojiPicker
+              emojiData={emojidata}
+              onEmojiSelect={handleEmojiSelect}
+              onClickOutside={handleClickOutside}
+            />
+          </div>,
+          document.body,
+        )}
+    </>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx

@@ -75,6 +75,7 @@ export const SimpleDocItem = ({
               />
             }
             $size="25px"
+            docId={doc.id}
           />
         )}
       </Box>