🚚(docs-package) move Divider in docs package

Move the Divider custom block to the common package.
It will be needed in multiple places, Docs app and
the y-provider server.

Author: AntoLC

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

@@ -11,6 +11,7 @@ import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
+import { createDividerBlock } from 'package-docs';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Y from 'yjs';
@@ -33,7 +34,7 @@ import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
-import { CalloutBlock, DividerBlock } from './custom-blocks';
+import { CalloutBlock } from './custom-blocks';
 import {
   InterlinkingLinkInlineContent,
   InterlinkingSearchInlineContent,
@@ -49,7 +50,9 @@ const baseBlockNoteSchema = withPageBreak(
     blockSpecs: {
       ...defaultBlockSpecs,
       callout: CalloutBlock,
-      divider: DividerBlock,
+      divider: createDividerBlock({
+        color: 'var(--c--theme--colors--greyscale-300)',
+      }),
     },
     inlineContentSpecs: {
       ...defaultInlineContentSpecs,

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

@@ -6,19 +6,19 @@ import {
   useBlockNoteEditor,
   useDictionary,
 } from '@blocknote/react';
+import { getDividerReactSlashMenuItems } from 'package-docs';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Icon } from '@/components';
+
 import {
   DocsBlockSchema,
   DocsInlineContentSchema,
   DocsStyleSchema,
 } from '../types';
 
-import {
-  getCalloutReactSlashMenuItems,
-  getDividerReactSlashMenuItems,
-} from './custom-blocks';
+import { getCalloutReactSlashMenuItems } from './custom-blocks';
 import { useGetInterlinkingMenuItems } from './custom-inline-content';
 import XLMultiColumn from './xl-multi-column';
 
@@ -55,7 +55,12 @@ export const BlockNoteSuggestionMenu = () => {
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
             getMultiColumnSlashMenuItems?.(editor) || [],
             getPageBreakReactSlashMenuItems(editor),
-            getDividerReactSlashMenuItems(editor, t, basicBlocksName),
+            getDividerReactSlashMenuItems(
+              editor,
+              t,
+              basicBlocksName,
+              <Icon iconName="remove" $size="18px" />,
+            ),
           ),
           query,
         ),

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

@@ -1,2 +1 @@
 export * from './CalloutBlock';
-export * from './DividerBlock';

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts

@@ -0,0 +1,52 @@
+import { BlockNoteEditor, insertOrUpdateBlock } from '@blocknote/core';
+import { createReactBlockSpec } from '@blocknote/react';
+import { TFunction } from 'i18next';
+
+interface DividerBlockProps {
+  color?: string;
+}
+
+export const createDividerBlock = ({ color }: DividerBlockProps) => {
+  return createReactBlockSpec(
+    {
+      type: 'divider',
+      propSchema: {},
+      content: 'none',
+    },
+    {
+      render: () => {
+        return (
+          <hr
+            style={{
+              width: '100%',
+              background: color,
+              margin: '1rem 0',
+              border: `1px solid ${color}`,
+            }}
+          />
+        );
+      },
+    },
+  );
+};
+
+export const getDividerReactSlashMenuItems = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editor: BlockNoteEditor<any, any, any>,
+  t: TFunction<'translation', undefined>,
+  group: string,
+  icon: React.ReactNode,
+) => [
+  {
+    title: t('Divider'),
+    onItemClick: () => {
+      insertOrUpdateBlock(editor, {
+        type: 'divider',
+      });
+    },
+    aliases: ['divider', 'hr', 'horizontal rule', 'line', 'separator'],
+    group,
+    icon,
+    subtext: t('Add a horizontal line'),
+  },
+];

src/frontend/packages/common/src/custom-blocks/DividerBlock.tsx

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