From b1d033edc9da255cf807ebd408fb03e0cf4ed8cc Mon Sep 17 00:00:00 2001 From: Olivier Laurendeau Date: Mon, 15 Sep 2025 15:54:17 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20handle=20properly=20em?= =?UTF-8?q?ojis=20in=20interlinking?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Emoji in interlinking were not replacing the default icon when present. --- .../__tests__/app-impress/doc-editor.spec.ts | 56 ++++++++----- .../docs/doc-editor/assets/doc-found.svg | 8 +- .../InterlinkingLinkInlineContent.tsx | 22 +++++- .../Interlinking/SearchPage.tsx | 78 ++++++++++++------- 4 files changed, 106 insertions(+), 58 deletions(-) diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts index 46722adc..ccc35814 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts +++ b/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 expect( - page.locator( - "span[data-inline-content-type='interlinkingSearchInline'] input", - ), - ).toBeVisible(); + await page.keyboard.press('@'); + await input.fill(docChild1); + await searchContainer.getByText(docChild1).click(); + + 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 ({ diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/assets/doc-found.svg b/src/frontend/apps/impress/src/features/docs/doc-editor/assets/doc-found.svg index 246b090e..81f8629b 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/assets/doc-found.svg +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/assets/doc-found.svg @@ -1,10 +1,4 @@ - + { const { colorsTokens } = useCunninghamTheme(); + + const { emoji, titleWithoutEmoji } = getEmojiAndTitle(title); const router = useRouter(); const handleClick = (e: React.MouseEvent) => { @@ -78,9 +80,21 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => { transition: background-color 0.2s ease-in-out; `} > - - - {title} + {emoji ? ( + {emoji} + ) : ( + + )} + + {titleWithoutEmoji} ); diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx index 757579e5..3af7f511 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.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) => ( - - - { + const { emoji, titleWithoutEmoji } = getEmojiAndTitle( + doc.title || untitledDocument, + ); + + return ( + - {doc.title} - - - } - right={ - - } - /> - )} + + {emoji ? ( + {emoji} + ) : ( + + )} + + + + {titleWithoutEmoji} + + + } + right={ + + } + /> + ); + }} />