✨(frontend) create page from slash menu

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

Author: AntoLC

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 {
   getDividerReactSlashMenuItems,
   getQuoteReactSlashMenuItems,
 } 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),
             getQuoteReactSlashMenuItems(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';