✨(frontend) create page from dropdown search

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

Author: AntoLC

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,10 +5,12 @@ 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,
+  BoxButton,
   Card,
   Icon,
   QuickSearch,
@@ -22,6 +24,8 @@ import {
   DocsStyleSchema,
 } from '@/docs/doc-editor';
 import FoundPageIcon from '@/docs/doc-editor/assets/doc-found.svg';
+import AddPageIcon from '@/docs/doc-editor/assets/doc-plus.svg';
+import { useCreateChildDocTree, useDocStore } from '@/docs/doc-management';
 import { DocSearchSubPageContent, DocSearchTarget } from '@/docs/doc-search';
 
 const inputStyle = css`
@@ -62,6 +66,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('');
 
@@ -211,6 +218,33 @@ export const SearchPage = ({
                 />
               )}
             />
+            <Box
+              $css={css`
+                border-top: 1px solid var(--c--theme--colors--greyscale-200);
+              `}
+            >
+              <BoxButton
+                $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);
+                  }
+                `}
+                onClick={createChildDoc}
+                $hasTransition={false}
+              >
+                <AddPageIcon />
+                <Text
+                  $size="14px"
+                  $color="var(--c--theme--colors--greyscale-1000)"
+                >
+                  {t('Add a new page')}
+                </Text>
+              </BoxButton>
+            </Box>
           </Card>
         </QuickSearch>
       </Box>

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

@@ -1,3 +1,4 @@
 export * from './useCollaboration';
+export * from './useCreateChildDocTree';
 export * from './useTrans';
 export * from './useCopyDocLink';

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,
+    });
+  };
+};