🐛(frontend) fix callout block arrow navigation

Fixed the behavior of arrow navigation around and between callout
blocks.
When navigating backwards (arrow up or left) from a callout
that is either document's first block or comes right after a callout,
the cursor doesn't go into a text selection, which it should. Similar
behavior if when going forward. This bug is trigged by any of the four
arrow keys.
Added a command to set the cursor position as it is expected.

Author: ZouicheOmar

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

@@ -670,9 +670,7 @@ test.describe('Doc Editor', () => {
     ).toBeHidden();
   });
 
-  test('it checks if callout custom block', async ({ page, browserName }) => {
-    await createDoc(page, 'doc-toolbar', browserName, 1);
-
+  test('it checks if callout custom block', async ({ page }) => {
     const editor = page.locator('.ProseMirror');
     await editor.click();
     await page.locator('.bn-block-outer').last().fill('/');
@@ -706,4 +704,115 @@ test.describe('Doc Editor', () => {
       'pink',
     );
   });
+
+  test('it checks callout block navigation', async ({ page }) => {
+    const editor = page.locator('.ProseMirror');
+    await editor.click();
+
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Add a callout block').click();
+
+    const ta = 'first callout';
+    const calloutA = page.locator('div[data-content-type="callout"]').first();
+    const inlineA = calloutA.locator('.inline-content');
+    await inlineA.fill(ta);
+
+    await editor.press('Escape');
+
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Add a callout block').click();
+
+    const tb = 'second callout';
+    const calloutB = page.locator('div[data-content-type="callout"]').nth(1);
+    const inlineB = calloutB.locator('.inline-content');
+    await inlineB.fill(tb);
+
+    await editor.press('Escape');
+
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Add a callout block').click();
+
+    const tc = 'third callout';
+    const calloutC = page.locator('div[data-content-type="callout"]').nth(2);
+    const inlineC = calloutC.locator('.inline-content');
+    await inlineC.fill(tc);
+
+    await editor.press('Escape');
+
+    // focuses the first callout
+    await inlineA.click();
+
+    // arrow up and down navigation
+    await editor.press('ArrowDown');
+
+    let sel = await inlineB.evaluate((element) =>
+      document
+        .getSelection()
+        ?.focusNode?.parentElement?.parentElement?.isSameNode(element),
+    );
+    expect(sel).toBeTruthy();
+
+    await editor.press('ArrowDown');
+    sel = await inlineC.evaluate((element) =>
+      document
+        .getSelection()
+        ?.focusNode?.parentElement?.parentElement?.isSameNode(element),
+    );
+    expect(sel).toBeTruthy();
+
+    await editor.press('ArrowUp');
+    sel = await inlineB.evaluate((element) =>
+      document
+        .getSelection()
+        ?.focusNode?.parentElement?.parentElement?.isSameNode(element),
+    );
+    expect(sel).toBeTruthy();
+
+    await editor.press('ArrowUp');
+    sel = await inlineA.evaluate((element) =>
+      document
+        .getSelection()
+        ?.focusNode?.parentElement?.parentElement?.isSameNode(element),
+    );
+    expect(sel).toBeTruthy();
+
+    await editor.press('ArrowUp');
+    await editor.press('ArrowUp');
+    await editor.press('ArrowUp');
+    sel = await inlineA.evaluate((element) =>
+      document
+        .getSelection()
+        ?.focusNode?.parentElement?.parentElement?.isSameNode(element),
+    );
+    expect(sel).toBeTruthy();
+
+    await editor.press('Escape');
+
+    await inlineA.click();
+    await editor.press('ArrowRight');
+    sel = await inlineB.evaluate((element) =>
+      document
+        .getSelection()
+        ?.focusNode?.parentElement?.parentElement?.isSameNode(element),
+    );
+    expect(sel).toBeTruthy();
+
+    for (let i = 0; i <= tb.length; i++) {
+      await editor.press('ArrowRight');
+    }
+    sel = await inlineC.evaluate((element) =>
+      document
+        .getSelection()
+        ?.focusNode?.parentElement?.parentElement?.isSameNode(element),
+    );
+    expect(sel).toBeTruthy();
+
+    await editor.press('ArrowLeft');
+    sel = await inlineB.evaluate((element) =>
+      document
+        .getSelection()
+        ?.focusNode?.parentElement?.parentElement?.isSameNode(element),
+    );
+    expect(sel).toBeTruthy();
+  });
 });

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

@@ -18,7 +18,12 @@ import { Box, TextErrors } from '@/components';
 import { Doc, useIsCollaborativeEditable } from '@/docs/doc-management';
 import { useAuth } from '@/features/auth';
 
-import { useHeadings, useUploadFile, useUploadStatus } from '../hook/';
+import {
+  useCalloutBlock,
+  useHeadings,
+  useUploadFile,
+  useUploadStatus,
+} from '../hook/';
 import useSaveDoc from '../hook/useSaveDoc';
 import { useEditorStore } from '../stores';
 import { cssEditor } from '../styles';
@@ -131,6 +136,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
 
   useHeadings(editor);
   useUploadStatus(editor);
+  useCalloutBlock(editor);
 
   useEffect(() => {
     setEditor(editor);

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

@@ -87,12 +87,15 @@ export const CalloutBlock = createReactBlockSpec(
               onEmojiSelect={onEmojiSelect}
             />
           )}
-          <Box as="p" className="inline-content" ref={contentRef}
+          <Box
+            as="p"
+            className="inline-content"
+            ref={contentRef}
             $css={css`
               & > div {
                 padding-top: 2px;
               }
-              `}
+            `}
           />
         </Box>
       );
@@ -105,19 +108,19 @@ export const getCalloutReactSlashMenuItems = (
   t: TFunction<'translation', undefined>,
   group: string,
 ) => [
-    {
-      title: t('Callout'),
-      onItemClick: () => {
-        insertOrUpdateBlock(editor, {
-          type: 'callout',
-        });
-      },
-      aliases: ['callout', 'encadré', 'hervorhebung', 'benadrukken'],
-      group,
-      icon: <Icon iconName="lightbulb" $size="18px" />,
-      subtext: t('Add a callout block'),
+  {
+    title: t('Callout'),
+    onItemClick: () => {
+      insertOrUpdateBlock(editor, {
+        type: 'callout',
+      });
     },
-  ];
+    aliases: ['callout', 'encadré', 'hervorhebung', 'benadrukken'],
+    group,
+    icon: <Icon iconName="lightbulb" $size="18px" />,
+    subtext: t('Add a callout block'),
+  },
+];
 
 export const getCalloutFormattingToolbarItems = (
   t: TFunction<'translation', undefined>,

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

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