✨(frontend) preserve @ character when esc is pressed after typing it

improves user experience by keeping @ symbol after cancelling mention trigger

Signed-off-by: Cyril <c.gromoff@gmail.com>

Author: Ovgodd

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to
 - 🐛(backend) fix s3 version_id validation
 - 🐛(frontend) retry check media status after page reload #1555
 - 🐛(frontend) fix Interlinking memory leak #1560
+- 🐛(frontend) preserve @ character when esc is pressed after typing it #1512
 - 🐛(frontend) button new doc UI fix #1557
 - 🐛(frontend) interlinking UI fix #1557
 

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

@@ -808,6 +808,29 @@ test.describe('Doc Editor', () => {
     await expect(interlinkChild1.locator('svg').first()).toBeVisible();
   });
 
+  test('it keeps @ when pressing Escape', async ({ page, browserName }) => {
+    const [randomDoc] = await createDoc(
+      page,
+      'doc-interlink-esc',
+      browserName,
+      1,
+    );
+
+    await verifyDocName(page, randomDoc);
+
+    const editor = await getEditor({ page });
+    await page.keyboard.press('@');
+
+    const searchInput = page.locator(
+      "span[data-inline-content-type='interlinkingSearchInline'] input",
+    );
+    await expect(searchInput).toBeVisible();
+
+    await page.keyboard.press('Escape');
+
+    await expect(editor.getByText('@')).toBeVisible();
+  });
+
   test('it checks multiple big doc scroll to the top', async ({
     page,
     browserName,

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

@@ -3,6 +3,7 @@ import {
   StyleSchema,
 } from '@blocknote/core';
 import { useBlockNoteEditor } from '@blocknote/react';
+import type { KeyboardEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
@@ -99,6 +100,55 @@ export const SearchPage = ({
     }, 100);
   }, [inputRef]);
 
+  const closeSearch = (insertContent: string) => {
+    updateInlineContent({
+      type: 'interlinkingSearchInline',
+      props: {
+        disabled: true,
+        trigger,
+      },
+    });
+
+    contentRef(null);
+    editor.focus();
+    editor.insertInlineContent([insertContent]);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      // Keep the trigger character ('@' or '/') in the editor when closing with Escape
+      closeSearch(trigger);
+    } else if (e.key === 'Backspace' && search.length === 0) {
+      e.preventDefault();
+      closeSearch('');
+    } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      // Allow arrow keys to be handled by the command menu for navigation
+      const commandList = e.currentTarget
+        .closest('.inline-content')
+        ?.nextElementSibling?.querySelector('[cmdk-list]');
+
+      // Create a synthetic keyboard event for the command menu
+      const syntheticEvent = new KeyboardEvent('keydown', {
+        key: e.key,
+        bubbles: true,
+        cancelable: true,
+      });
+      commandList?.dispatchEvent(syntheticEvent);
+      e.preventDefault();
+    } else if (e.key === 'Enter') {
+      // Handle Enter key to select the currently highlighted item
+      const selectedItem = e.currentTarget
+        .closest('.inline-content')
+        ?.nextElementSibling?.querySelector(
+          '[cmdk-item][data-selected="true"]',
+        ) as HTMLElement;
+
+      selectedItem?.click();
+      e.preventDefault();
+    }
+  };
+
   return (
     <Box as="span" $position="relative">
       <Box
@@ -124,50 +174,7 @@ export const SearchPage = ({
             const value = (e.target as HTMLInputElement).value;
             setSearch(value);
           }}
-          onKeyDown={(e) => {
-            if (
-              (e.key === 'Backspace' && search.length === 0) ||
-              e.key === 'Escape'
-            ) {
-              e.preventDefault();
-
-              updateInlineContent({
-                type: 'interlinkingSearchInline',
-                props: {
-                  disabled: true,
-                  trigger,
-                },
-              });
-
-              contentRef(null);
-              editor.focus();
-              editor.insertInlineContent(['']);
-            } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-              // Allow arrow keys to be handled by the command menu for navigation
-              const commandList = e.currentTarget
-                .closest('.inline-content')
-                ?.nextElementSibling?.querySelector('[cmdk-list]');
-
-              // Create a synthetic keyboard event for the command menu
-              const syntheticEvent = new KeyboardEvent('keydown', {
-                key: e.key,
-                bubbles: true,
-                cancelable: true,
-              });
-              commandList?.dispatchEvent(syntheticEvent);
-              e.preventDefault();
-            } else if (e.key === 'Enter') {
-              // Handle Enter key to select the currently highlighted item
-              const selectedItem = e.currentTarget
-                .closest('.inline-content')
-                ?.nextElementSibling?.querySelector(
-                  '[cmdk-item][data-selected="true"]',
-                ) as HTMLElement;
-
-              selectedItem?.click();
-              e.preventDefault();
-            }
-          }}
+          onKeyDown={handleKeyDown}
         />
       </Box>
       <Box
@@ -224,6 +231,8 @@ export const SearchPage = ({
                   },
                 });
 
+                contentRef(null);
+
                 editor.insertInlineContent([
                   {
                     type: 'interlinkingLinkInline',