✨(frontend) create page from slash menu

We are now able to create a new page from
the slash menu.

Author: AntoLC

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

@@ -29,6 +29,24 @@ test.describe('Doc Create', () => {
     await expect(page.getByTestId('grid-loader')).toBeHidden();
     await expect(docsGrid.getByText(docTitle)).toBeVisible();
   });
+
+  test('it creates a sub doc from slash menu editor', 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('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 page'),
+    ).toBeVisible();
+  });
 });
 
 test.describe('Doc Create: Not logged', () => {

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

@@ -9,32 +9,51 @@ import {
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { DocsBlockSchema } from '../types';
+import {
+  DocsBlockSchema,
+  DocsInlineContentSchema,
+  DocsStyleSchema,
+} from '../types';
 
 import {
   getCalloutReactSlashMenuItems,
   getDividerReactSlashMenuItems,
 } from './custom-blocks';
+import { useGetInterlinkingMenuItems } from './custom-inline-content';
 
 export const BlockNoteSuggestionMenu = () => {
-  const editor = useBlockNoteEditor<DocsBlockSchema>();
+  const editor = useBlockNoteEditor<
+    DocsBlockSchema,
+    DocsInlineContentSchema,
+    DocsStyleSchema
+  >();
   const { t } = useTranslation();
   const basicBlocksName = useDictionary().slash_menu.page_break.group;
+  const getInterlinkingMenuItems = useGetInterlinkingMenuItems();
 
   const getSlashMenuItems = useMemo(() => {
+    // We insert it after the "Code Block" item to have the interlinking block displayed after the basic blocks
+    const defaultMenu = getDefaultReactSlashMenuItems(editor);
+    const index = defaultMenu.findIndex((item) => item.title === 'Code Block');
+    const newSlashMenuItems = [
+      ...defaultMenu.slice(0, index + 1),
+      ...getInterlinkingMenuItems(t),
+      ...defaultMenu.slice(index + 1),
+    ];
+
     return async (query: string) =>
       Promise.resolve(
         filterSuggestionItems(
           combineByGroup(
-            getDefaultReactSlashMenuItems(editor),
+            newSlashMenuItems,
             getPageBreakReactSlashMenuItems(editor),
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
           ),
           query,
         ),
       );
-  }, [basicBlocksName, editor, t]);
+  }, [basicBlocksName, editor, getInterlinkingMenuItems, t]);
 
   return (
     <SuggestionMenuController

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

@@ -0,0 +1,57 @@
+import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
+import { TFunction } from 'i18next';
+import { useRouter } from 'next/navigation';
+import { useCallback } from 'react';
+
+import AddPageIcon from '@/docs/doc-editor/assets/doc-plus.svg';
+import { Doc, useCreateChildDoc, useDocStore } from '@/docs/doc-management';
+
+export const getInterlinkingMenuItems = (
+  t: TFunction<'translation', undefined>,
+  group: string,
+  createPage: () => void,
+) => [
+  {
+    title: t('New page'),
+    onItemClick: createPage,
+    aliases: ['new page'],
+    group,
+    icon: <AddPageIcon />,
+    subtext: t('Add a new page'),
+  },
+];
+
+export const useGetInterlinkingMenuItems = () => {
+  const treeContext = useTreeContext<Doc>();
+  const router = useRouter();
+  const { currentDoc } = useDocStore();
+
+  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(
+    (t: TFunction<'translation', undefined>) =>
+      getInterlinkingMenuItems(
+        t,
+        t('Links'),
+        () =>
+          currentDoc?.id &&
+          createChildDoc({
+            parentId: currentDoc.id,
+          }),
+      ),
+    [createChildDoc, currentDoc?.id],
+  );
+};

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

@@ -0,0 +1 @@
+export * from './InterlinkingSearchInlineContent';

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

@@ -0,0 +1 @@
+export * from './Interlinking';