✨(frontend) create page from dropdown search

We are now able to create a new page from
the dropdown search.

Author: AntoLC

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

@@ -51,6 +51,28 @@ test.describe('Doc Create', () => {
       page.locator('.c__tree-view--row-content').getByText('Untitled document'),
     ).toBeVisible();
   });
+
+  test('it creates a sub doc from interlinking dropdown', async ({
+    page,
+    browserName,
+  }) => {
+    const [title] = await createDoc(page, 'my-new-slash-doc', browserName, 1);
+
+    await verifyDocName(page, title);
+
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Link to a page').first().click();
+    await page
+      .locator('.quick-search-container')
+      .getByText('Add a new page')
+      .click();
+
+    const input = page.getByRole('textbox', { name: 'doc title input' });
+    await expect(input).toHaveText('');
+    await expect(
+      page.locator('.c__tree-view--row-content').getByText('Untitled document'),
+    ).toBeVisible();
+  });
 });
 
 test.describe('Doc Create: Not logged', () => {

src/frontend/apps/impress/src/components/BoxButton.tsx

@@ -31,11 +31,11 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
         $background="none"
         $margin="none"
         $padding="none"
+        $hasTransition
         $css={css`
           cursor: ${props.disabled ? 'not-allowed' : 'pointer'};
           border: none;
           outline: none;
-          transition: all 0.2s ease-in-out;
           font-family: inherit;
 
           color: ${props.disabled

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

@@ -1,14 +1,11 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { createReactInlineContentSpec } from '@blocknote/react';
-import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
 import { TFunction } from 'i18next';
-import { useRouter } from 'next/navigation';
-import { useCallback } from 'react';
 
 import { DocsBlockNoteEditor } from '@/docs/doc-editor';
 import LinkPageIcon from '@/docs/doc-editor/assets/doc-link.svg';
 import AddPageIcon from '@/docs/doc-editor/assets/doc-plus.svg';
-import { Doc, useCreateChildDoc, useDocStore } from '@/docs/doc-management';
+import { useCreateChildDocTree, useDocStore } from '@/docs/doc-management';
 
 import { SearchPage } from './SearchPage';
 
@@ -29,12 +26,12 @@ export const InterlinkingSearchInlineContent = createReactInlineContentSpec(
         return null;
       }
 
-      return <SearchPage {...props} />;
+      return <SearchPage {...props} contentRef={props.contentRef} />;
     },
   },
 );
 
-export const getInterlinkingMenuItems = (
+export const getInterlinkinghMenuItems = (
   editor: DocsBlockNoteEditor,
   t: TFunction<'translation', undefined>,
   group: string,
@@ -68,37 +65,11 @@ export const getInterlinkingMenuItems = (
 ];
 
 export const useGetInterlinkingMenuItems = () => {
-  const treeContext = useTreeContext<Doc>();
-  const router = useRouter();
   const { currentDoc } = useDocStore();
+  const createChildDoc = useCreateChildDocTree(currentDoc?.id);
 
-  const { mutate: createChildDoc } = useCreateChildDoc({
-    onSuccess: (createdDoc) => {
-      const newDoc = {
-        ...createdDoc,
-        children: [],
-        childrenCount: 0,
-        parentId: currentDoc?.id ?? undefined,
-      };
-      treeContext?.treeData.addChild(currentDoc?.id || null, newDoc);
-
-      router.push(`/docs/${newDoc.id}`);
-      treeContext?.treeData.setSelectedNode(createdDoc);
-    },
-  });
-
-  return useCallback(
-    (editor: DocsBlockNoteEditor, t: TFunction<'translation', undefined>) =>
-      getInterlinkingMenuItems(
-        editor,
-        t,
-        t('Links'),
-        () =>
-          currentDoc?.id &&
-          createChildDoc({
-            parentId: currentDoc.id,
-          }),
-      ),
-    [createChildDoc, currentDoc?.id],
-  );
+  return (
+    editor: DocsBlockNoteEditor,
+    t: TFunction<'translation', undefined>,
+  ) => getInterlinkinghMenuItems(editor, t, t('Links'), createChildDoc);
 };

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

@@ -5,13 +5,15 @@ import {
 } from '@blocknote/core';
 import { useBlockNoteEditor } from '@blocknote/react';
 import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import {
   Box,
   Card,
   Icon,
   QuickSearch,
+  QuickSearchGroup,
   QuickSearchItemContent,
   Text,
 } from '@/components';
@@ -22,7 +24,12 @@ import {
   DocsStyleSchema,
 } from '@/docs/doc-editor';
 import FoundPageIcon from '@/docs/doc-editor/assets/doc-found.svg';
-import { useTrans } from '@/docs/doc-management';
+import AddPageIcon from '@/docs/doc-editor/assets/doc-plus.svg';
+import {
+  useCreateChildDocTree,
+  useDocStore,
+  useTrans,
+} from '@/docs/doc-management';
 import { DocSearchSubPageContent, DocSearchTarget } from '@/docs/doc-search';
 import { useResponsiveStore } from '@/stores';
 
@@ -64,6 +71,9 @@ export const SearchPage = ({
     DocsInlineContentSchema,
     DocsStyleSchema
   >();
+  const { t } = useTranslation();
+  const { currentDoc } = useDocStore();
+  const createChildDoc = useCreateChildDocTree(currentDoc?.id);
   const inputRef = useRef<HTMLInputElement>(null);
   const [search, setSearch] = useState('');
   const { isDesktop } = useResponsiveStore();
@@ -248,6 +258,52 @@ export const SearchPage = ({
                 />
               )}
             />
+            <QuickSearchGroup
+              group={{
+                groupName: '',
+                elements: [],
+                endActions: [
+                  {
+                    onSelect: createChildDoc,
+                    content: (
+                      <Box
+                        $css={css`
+                          border-top: 1px solid
+                            var(--c--theme--colors--greyscale-200);
+                        `}
+                        $width="100%"
+                      >
+                        <Box
+                          $direction="row"
+                          $gap="0.4rem"
+                          $align="center"
+                          $padding={{
+                            vertical: '0.5rem',
+                            horizontal: '0.3rem',
+                          }}
+                          $css={css`
+                            &:hover {
+                              background-color: var(
+                                --c--theme--colors--greyscale-100
+                              );
+                            }
+                          `}
+                        >
+                          <AddPageIcon />
+                          <Text
+                            $size="14px"
+                            $color="var(--c--theme--colors--greyscale-1000)"
+                            contentEditable={false}
+                          >
+                            {t('New sub-doc')}
+                          </Text>
+                        </Box>
+                      </Box>
+                    ),
+                  },
+                ],
+              }}
+            />
           </Card>
         </QuickSearch>
       </Box>

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

@@ -1,5 +1,6 @@
 export * from './useCollaboration';
 export * from './useCopyDocLink';
+export * from './useCreateChildDocTree';
 export * from './useDocUtils';
 export * from './useIsCollaborativeEditable';
 export * from './useTrans';

src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts

@@ -0,0 +1,35 @@
+import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
+import { useRouter } from 'next/navigation';
+
+import { useCreateChildDoc } from '../api';
+import { Doc } from '../types';
+
+export const useCreateChildDocTree = (parentId?: string) => {
+  const treeContext = useTreeContext<Doc>();
+  const router = useRouter();
+
+  const { mutate: createChildDoc } = useCreateChildDoc({
+    onSuccess: (createdDoc) => {
+      const newDoc = {
+        ...createdDoc,
+        children: [],
+        childrenCount: 0,
+        parentId: parentId ?? undefined,
+      };
+      treeContext?.treeData.addChild(parentId || null, newDoc);
+
+      router.push(`/docs/${newDoc.id}`);
+      treeContext?.treeData.setSelectedNode(createdDoc);
+    },
+  });
+
+  return () => {
+    if (!parentId) {
+      return null;
+    }
+
+    createChildDoc({
+      parentId,
+    });
+  };
+};