🐛(frontend) emoji-picker fix lack of overlay

The EmojiPicker component now displays an overlay
when opened, it fixes an issue when multiple pickers
are present on the same page and we click on one of them,
the others were not closing.

Author: olaurendeau

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

@@ -9,16 +9,18 @@ interface EmojiPickerProps {
   emojiData: EmojiMartData;
   onClickOutside: () => void;
   onEmojiSelect: ({ native }: { native: string }) => void;
+  withOverlay?: boolean;
 }
 
 export const EmojiPicker = ({
   emojiData,
   onClickOutside,
   onEmojiSelect,
+  withOverlay = false,
 }: EmojiPickerProps) => {
   const { i18n } = useTranslation();
 
-  return (
+  const pickerContent = (
     <Box $position="absolute" $zIndex={1000} $margin="2rem 0 0 0">
       <Picker
         data={emojiData}
@@ -30,4 +32,27 @@ export const EmojiPicker = ({
       />
     </Box>
   );
+
+  if (withOverlay) {
+    return (
+      <>
+        {/* Overlay transparent pour fermer en cliquant à l'extérieur */}
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            zIndex: 999,
+            backgroundColor: 'transparent',
+          }}
+          onClick={onClickOutside}
+        />
+        {pickerContent}
+      </>
+    );
+  }
+
+  return pickerContent;
 };

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx

@@ -90,6 +90,7 @@ export const CalloutBlock = createReactBlockSpec(
               emojiData={emojidata}
               onClickOutside={onClickOutside}
               onEmojiSelect={onEmojiSelect}
+              withOverlay={true}
             />
           )}
           <Box as="p" className="inline-content" ref={contentRef} />

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

@@ -76,7 +76,7 @@ export const DocIcon = ({
 
   return (
     <>
-      <Box ref={iconRef} onClick={toggleEmojiPicker} $position="relative">
+      <Box ref={iconRef} onClick={toggleEmojiPicker} color="tertiary-text">
         {!emoji ? (
           defaultIcon
         ) : (
@@ -107,6 +107,7 @@ export const DocIcon = ({
               emojiData={emojidata}
               onEmojiSelect={handleEmojiSelect}
               onClickOutside={handleClickOutside}
+              withOverlay={true}
             />
           </div>,
           document.body,