🩹(frontend) handle properly emojis in interlinking

Emoji in interlinking were not replacing
the default icon when present.

Author: olaurendeau

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

@@ -13,7 +13,11 @@ import {
 } from './utils-common';
 import { getEditor, openSuggestionMenu, writeInEditor } from './utils-editor';
 import { connectOtherUserToDoc, updateShareLink } from './utils-share';
-import { createRootSubPage, navigateToPageFromTree } from './utils-sub-pages';
+import {
+  createRootSubPage,
+  getTreeRow,
+  navigateToPageFromTree,
+} from './utils-sub-pages';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -728,7 +732,13 @@ test.describe('Doc Editor', () => {
 
     await verifyDocName(page, docChild2);
 
-    await page.locator('.bn-block-outer').last().fill('/');
+    const treeRow = await getTreeRow(page, docChild2);
+    await treeRow.locator('.--docs--doc-icon').click();
+    await page.getByRole('button', { name: '😀' }).first().click();
+
+    await navigateToPageFromTree({ page, title: docChild1 });
+
+    await openSuggestionMenu({ page });
     await page.getByText('Link a doc').first().click();
 
     const input = page.locator(
@@ -742,6 +752,16 @@ test.describe('Doc Editor', () => {
     await expect(searchContainer.getByText(docChild1)).toBeVisible();
     await expect(searchContainer.getByText(docChild2)).toBeVisible();
 
+    const searchContainerRow = searchContainer
+      .getByRole('option')
+      .filter({
+        hasText: docChild2,
+      })
+      .first();
+
+    await expect(searchContainerRow).toContainText('😀');
+    await expect(searchContainerRow.locator('svg').first()).toBeHidden();
+
     await input.pressSequentially('-child');
 
     await expect(searchContainer.getByText(docChild1)).toBeVisible();
@@ -756,32 +776,30 @@ test.describe('Doc Editor', () => {
     await expect(searchContainer).toBeHidden();
 
     // Wait for the interlink to be created and rendered
-    const editor = page.locator('.ProseMirror.bn-editor');
+    const editor = await getEditor({ page });
 
-    const interlink = editor.getByRole('button', {
+    const interlinkChild2 = editor.getByRole('button', {
       name: docChild2,
     });
 
-    await expect(interlink).toBeVisible({ timeout: 10000 });
-    await interlink.click();
+    await expect(interlinkChild2).toBeVisible({ timeout: 10000 });
+    await expect(interlinkChild2).toContainText('😀');
+    await expect(interlinkChild2.locator('svg').first()).toBeHidden();
+    await interlinkChild2.click();
 
     await verifyDocName(page, docChild2);
-  });
-
-  test('it checks interlink shortcut @', async ({ page, browserName }) => {
-    const [randomDoc] = await createDoc(page, 'doc-interlink', browserName, 1);
-
-    await verifyDocName(page, randomDoc);
 
-    const editor = page.locator('.bn-block-outer').last();
     await editor.click();
+
     await page.keyboard.press('@');
+    await input.fill(docChild1);
+    await searchContainer.getByText(docChild1).click();
 
-    await expect(
-      page.locator(
-        "span[data-inline-content-type='interlinkingSearchInline'] input",
-      ),
-    ).toBeVisible();
+    const interlinkChild1 = editor.getByRole('button', {
+      name: docChild1,
+    });
+    await expect(interlinkChild1).toBeVisible({ timeout: 10000 });
+    await expect(interlinkChild1.locator('svg').first()).toBeVisible();
   });
 
   test('it checks multiple big doc scroll to the top', async ({

src/frontend/apps/impress/src/features/docs/doc-editor/assets/doc-found.svg

@@ -7,7 +7,7 @@ import { css } from 'styled-components';
 import { BoxButton, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import SelectedPageIcon from '@/docs/doc-editor/assets/doc-selected.svg';
-import { useDoc } from '@/docs/doc-management';
+import { getEmojiAndTitle, useDoc } from '@/docs/doc-management';
 
 export const InterlinkingLinkInlineContent = createReactInlineContentSpec(
   {
@@ -52,6 +52,8 @@ interface LinkSelectedProps {
 }
 const LinkSelected = ({ url, title }: LinkSelectedProps) => {
   const { colorsTokens } = useCunninghamTheme();
+
+  const { emoji, titleWithoutEmoji } = getEmojiAndTitle(title);
   const router = useRouter();
 
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -78,9 +80,21 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
         transition: background-color 0.2s ease-in-out;
       `}
     >
-      <SelectedPageIcon width={11.5} color={colorsTokens['primary-400']} />
-      <Text $weight="500" spellCheck="false" $size="16px" $display="inline">
-        {title}
+      {emoji ? (
+        <Text $size="16px">{emoji}</Text>
+      ) : (
+        <SelectedPageIcon width={11.5} color={colorsTokens['primary-400']} />
+      )}
+      <Text
+        $weight="500"
+        spellCheck="false"
+        $size="16px"
+        $display="inline"
+        $css={css`
+          margin-left: 2px;
+        `}
+      >
+        {titleWithoutEmoji}
       </Text>
     </BoxButton>
   );

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx

@@ -25,6 +25,7 @@ import {
 import FoundPageIcon from '@/docs/doc-editor/assets/doc-found.svg';
 import AddPageIcon from '@/docs/doc-editor/assets/doc-plus.svg';
 import {
+  getEmojiAndTitle,
   useCreateChildDocTree,
   useDocStore,
   useTrans,
@@ -236,35 +237,56 @@ export const SearchPage = ({
 
                 editor.focus();
               }}
-              renderElement={(doc) => (
-                <QuickSearchItemContent
-                  left={
-                    <Box
-                      $direction="row"
-                      $gap="0.6rem"
-                      $align="center"
-                      $padding={{ vertical: '0.5rem', horizontal: '0.2rem' }}
-                      $width="100%"
-                    >
-                      <FoundPageIcon style={{ flexShrink: 0 }} />
-                      <Text
-                        $size="14px"
-                        $color="var(--c--theme--colors--greyscale-1000)"
-                        spellCheck="false"
+              renderElement={(doc) => {
+                const { emoji, titleWithoutEmoji } = getEmojiAndTitle(
+                  doc.title || untitledDocument,
+                );
+
+                return (
+                  <QuickSearchItemContent
+                    left={
+                      <Box
+                        $direction="row"
+                        $gap="0.2rem"
+                        $align="center"
+                        $padding={{ vertical: '0.5rem', horizontal: '0.2rem' }}
+                        $width="100%"
                       >
-                        {doc.title}
-                      </Text>
-                    </Box>
-                  }
-                  right={
-                    <Icon
-                      iconName="keyboard_return"
-                      $variation="600"
-                      spellCheck="false"
-                    />
-                  }
-                />
-              )}
+                        <Box
+                          $css={css`
+                            width: 24px;
+                            flex-shrink: 0;
+                          `}
+                        >
+                          {emoji ? (
+                            <Text $size="18px">{emoji}</Text>
+                          ) : (
+                            <FoundPageIcon
+                              width="100%"
+                              style={{ maxHeight: '24px' }}
+                            />
+                          )}
+                        </Box>
+
+                        <Text
+                          $size="14px"
+                          $color="var(--c--theme--colors--greyscale-1000)"
+                          spellCheck="false"
+                        >
+                          {titleWithoutEmoji}
+                        </Text>
+                      </Box>
+                    }
+                    right={
+                      <Icon
+                        iconName="keyboard_return"
+                        $variation="600"
+                        spellCheck="false"
+                      />
+                    }
+                  />
+                );
+              }}
             />
             <QuickSearchGroup
               group={{