✨(frontend) add an EmojiPicker in the document tree

This allows users to easily add emojis easily to
their documents from the tree, enhancing the
overall user experience.

Author: olaurendeau

src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts

@@ -9,7 +9,11 @@ import {
   verifyDocName,
 } from './utils-common';
 import { addNewMember } from './utils-share';
-import { clickOnAddRootSubPage, createRootSubPage } from './utils-sub-pages';
+import {
+  clickOnAddRootSubPage,
+  createRootSubPage,
+  getTreeRow,
+} from './utils-sub-pages';
 
 test.describe('Doc Tree', () => {
   test.beforeEach(async ({ page }) => {
@@ -298,6 +302,36 @@ test.describe('Doc Tree', () => {
     // Now test keyboard navigation on sub-document
     await expect(docTree.getByText(docChild)).toBeVisible();
   });
+
+  test('it updates the child icon from the tree', async ({
+    page,
+    browserName,
+  }) => {
+    const [docParent] = await createDoc(
+      page,
+      'doc-child-emoji',
+      browserName,
+      1,
+    );
+    await verifyDocName(page, docParent);
+
+    const { name: docChild } = await createRootSubPage(
+      page,
+      browserName,
+      'doc-child-emoji-child',
+    );
+
+    // Update the emoji from the tree
+    const row = await getTreeRow(page, docChild);
+    await row.locator('.--docs--doc-icon').click();
+    await page.getByRole('button', { name: '😀' }).first().click();
+
+    // Verify the emoji is updated in the tree and in the document title
+    await expect(row.getByText('😀')).toBeVisible();
+    await expect(
+      page.getByRole('textbox', { name: 'Document title' }),
+    ).toContainText('😀');
+  });
 });
 
 test.describe('Doc Tree: Inheritance', () => {

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-editor/components/custom-blocks/index.ts

@@ -1,4 +1,5 @@
 export * from './AccessibleImageBlock';
 export * from './CalloutBlock';
+export { default as emojidata } from './initEmojiCallout';
 export * from './PdfBlock';
 export * from './UploadLoaderBlock';

src/frontend/apps/impress/src/features/docs/doc-editor/components/index.ts

@@ -1,2 +1,3 @@
 export * from './DocEditor';
+export * from './EmojiPicker';
 export * from './custom-blocks/';

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

@@ -1,4 +1,3 @@
-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';
@@ -8,14 +7,12 @@ import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import {
   Doc,
-  KEY_DOC,
-  KEY_LIST_DOC,
   useDocStore,
+  useDocTitleUpdate,
   useIsCollaborativeEditable,
   useTrans,
-  useUpdateDoc,
 } from '@/docs/doc-management';
-import { useBroadcastStore, useResponsiveStore } from '@/stores';
+import { useResponsiveStore } from '@/stores';
 
 interface DocTitleProps {
   doc: Doc;
@@ -54,47 +51,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,18 @@
-import { Text, TextType } from '@/components';
+import { MouseEvent, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { BoxButton, Icon, TextType } from '@/components';
+import { EmojiPicker, emojidata } from '@/docs/doc-editor/';
+
+import { useDocTitleUpdate } from '../hooks/useDocTitleUpdate';
 
 type DocIconProps = TextType & {
   emoji?: string | null;
   defaultIcon: React.ReactNode;
+  docId?: string;
+  title?: string;
+  onEmojiUpdate?: (emoji: string) => void;
+  withEmojiPicker?: boolean;
 };
 
 export const DocIcon = ({
@@ -11,22 +21,101 @@ export const DocIcon = ({
   $size = 'sm',
   $variation = '1000',
   $weight = '400',
+  docId,
+  title,
+  onEmojiUpdate,
+  withEmojiPicker = false,
   ...textProps
 }: DocIconProps) => {
-  if (!emoji) {
-    return <>{defaultIcon}</>;
+  const { updateDocEmoji } = useDocTitleUpdate();
+
+  const iconRef = useRef<HTMLDivElement>(null);
+
+  const [openEmojiPicker, setOpenEmojiPicker] = useState<boolean>(false);
+  const [pickerPosition, setPickerPosition] = useState<{
+    top: number;
+    left: number;
+  }>({ top: 0, left: 0 });
+
+  if (!withEmojiPicker && !emoji) {
+    return defaultIcon;
   }
 
+  const toggleEmojiPicker = (e: MouseEvent) => {
+    if (withEmojiPicker) {
+      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>
+    <>
+      <BoxButton
+        ref={iconRef}
+        onClick={toggleEmojiPicker}
+        $position="relative"
+        className="--docs--doc-icon"
+      >
+        {!emoji ? (
+          defaultIcon
+        ) : (
+          <Icon
+            {...textProps}
+            iconName={emoji}
+            $size={$size}
+            $variation={$variation}
+            $weight={$weight}
+            aria-hidden="true"
+            data-testid="doc-emoji-icon"
+          >
+            {emoji}
+          </Icon>
+        )}
+      </BoxButton>
+      {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/index.ts

@@ -1,3 +1,4 @@
+export * from './DocIcon';
 export * from './DocPage403';
 export * from './ModalRemoveDoc';
 export * from './SimpleDocItem';