✨(frontend) create editor shortcuts hook

We created the editor shortcuts hook to handle
the shortcuts for the editor.
We implemented the following shortcuts:
- "@" to open the interlinking inline content

Author: AntoLC

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

@@ -500,4 +500,20 @@ test.describe('Doc Editor', () => {
 
     await verifyDocName(page, docChild1);
   });
+
+  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();
+  });
 });

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

@@ -19,9 +19,7 @@ import { Box, TextErrors } from '@/components';
 import { Doc } from '@/docs/doc-management';
 import { useAuth } from '@/features/auth';
 
-import { useUploadFile } from '../hook';
-import { useHeadings } from '../hook/useHeadings';
-import useSaveDoc from '../hook/useSaveDoc';
+import { useHeadings, useSaveDoc, useShortcuts, useUploadFile } from '../hook';
 import { useEditorStore } from '../stores';
 import { cssEditor } from '../styles';
 import { randomColor } from '../utils';
@@ -129,6 +127,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
     [collabName, lang, provider, uploadFile],
   );
   useHeadings(editor);
+  useShortcuts(editor);
 
   useEffect(() => {
     setEditor(editor);

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

@@ -13,6 +13,10 @@ export const InterlinkingSearchInlineContent = createReactInlineContentSpec(
   {
     type: 'interlinkingSearchInline',
     propSchema: {
+      trigger: {
+        default: '/',
+        values: ['/', '@'],
+      },
       disabled: {
         default: false,
         values: [true, false],
@@ -26,7 +30,13 @@ export const InterlinkingSearchInlineContent = createReactInlineContentSpec(
         return null;
       }
 
-      return <SearchPage {...props} contentRef={props.contentRef} />;
+      return (
+        <SearchPage
+          {...props}
+          trigger={props.inlineContent.props.trigger}
+          contentRef={props.contentRef}
+        />
+      );
     },
   },
 );
@@ -45,6 +55,7 @@ export const getInterlinkinghMenuItems = (
           type: 'interlinkingSearchInline',
           props: {
             disabled: false,
+            trigger: '/',
           },
         },
       ]);

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

@@ -39,6 +39,7 @@ const inputStyle = css`
 `;
 
 type SearchPageProps = {
+  trigger: string;
   updateInlineContent: (
     update: PartialCustomInlineContentFromConfig<
       {
@@ -47,6 +48,9 @@ type SearchPageProps = {
           disabled: {
             default: boolean;
           };
+          trigger: {
+            default: string;
+          };
         };
         content: 'styled';
       },
@@ -58,6 +62,7 @@ type SearchPageProps = {
 
 export const SearchPage = ({
   contentRef,
+  trigger,
   updateInlineContent,
 }: SearchPageProps) => {
   const { colorsTokens } = useCunninghamTheme();
@@ -99,7 +104,7 @@ export const SearchPage = ({
         tabIndex={-1} // Ensure the span is focusable
       >
         {' '}
-        /
+        {trigger}
         <Box
           as="input"
           $padding={{ left: '3px' }}
@@ -118,6 +123,7 @@ export const SearchPage = ({
                 type: 'interlinkingSearchInline',
                 props: {
                   disabled: true,
+                  trigger,
                 },
               });
 
@@ -174,6 +180,7 @@ export const SearchPage = ({
                   type: 'interlinkingSearchInline',
                   props: {
                     disabled: true,
+                    trigger,
                   },
                 });
 

src/frontend/apps/impress/src/features/docs/doc-editor/hook/__tests__/useSaveDoc.test.tsx

@@ -5,7 +5,7 @@ import * as Y from 'yjs';
 
 import { AppWrapper } from '@/tests/utils';
 
-import useSaveDoc from '../useSaveDoc';
+import { useSaveDoc } from '../useSaveDoc';
 
 jest.mock('next/router', () => ({
   useRouter: jest.fn(),

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

@@ -1,2 +1,4 @@
+export * from './useHeadings';
 export * from './useSaveDoc';
+export * from './useShortcuts';
 export * from './useUploadFile';

src/frontend/apps/impress/src/features/docs/doc-editor/hook/useSaveDoc.tsx

@@ -10,7 +10,7 @@ import { toBase64 } from '../utils';
 
 const SAVE_INTERVAL = 60000;
 
-const useSaveDoc = (docId: string, yDoc: Y.Doc, canSave: boolean) => {
+export const useSaveDoc = (docId: string, yDoc: Y.Doc, canSave: boolean) => {
   const { mutate: updateDoc } = useUpdateDoc({
     listInvalideQueries: [KEY_LIST_DOC_VERSIONS],
     onSuccess: () => {
@@ -92,5 +92,3 @@ const useSaveDoc = (docId: string, yDoc: Y.Doc, canSave: boolean) => {
     };
   }, [router.events, saveDoc]);
 };
-
-export default useSaveDoc;

src/frontend/apps/impress/src/features/docs/doc-editor/hook/useShortcuts.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+import { DocsBlockNoteEditor } from '../types';
+
+export const useShortcuts = (editor: DocsBlockNoteEditor) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === '@' && editor?.isFocused()) {
+        const selection = window.getSelection();
+        const previousChar =
+          selection?.anchorNode?.textContent?.charAt(
+            selection.anchorOffset - 1,
+          ) || '';
+
+        if (![' ', ''].includes(previousChar)) {
+          return;
+        }
+
+        event.preventDefault();
+        editor.insertInlineContent([
+          {
+            type: 'interlinkingSearchInline',
+            props: {
+              disabled: false,
+              trigger: '@',
+            },
+          },
+        ]);
+      }
+    };
+
+    // Attach the event listener to the document instead of the window
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [editor]);
+};