✨(frontend) interlinking custom inline content

We want to be able to interlink documents in the editor.
We created a custom inline content that allows
users to interlink documents.

Author: AntoLC

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

@@ -44,13 +44,12 @@ export interface BoxProps {
 export type BoxType = ComponentPropsWithRef<typeof Box>;
 
 export const Box = styled('div')<BoxProps>`
-  display: flex;
-  flex-direction: column;
   ${({ $align }) => $align && `align-items: ${$align};`}
   ${({ $background }) => $background && `background: ${$background};`}
   ${({ $color }) => $color && `color: ${$color};`}
-  ${({ $direction }) => $direction && `flex-direction: ${$direction};`}
-  ${({ $display }) => $display && `display: ${$display};`}
+  ${({ $direction }) => `flex-direction: ${$direction || 'column'};`}
+  ${({ $display, as }) =>
+    `display: ${$display || as?.match('span|input') ? 'inline-flex' : 'flex'};`}
   ${({ $flex }) => $flex && `flex: ${$flex};`}
   ${({ $gap }) => $gap && `gap: ${$gap};`}
   ${({ $height }) => $height && `height: ${$height};`}

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

@@ -23,6 +23,7 @@ export type DropdownMenuProps = {
   arrowCss?: BoxProps['$css'];
   buttonCss?: BoxProps['$css'];
   disabled?: boolean;
+  opened?: boolean;
   topMessage?: string;
   selectedValues?: string[];
   afterOpenChange?: (isOpen: boolean) => void;
@@ -36,12 +37,13 @@ export const DropdownMenu = ({
   arrowCss,
   buttonCss,
   label,
+  opened,
   topMessage,
   afterOpenChange,
   selectedValues,
 }: PropsWithChildren<DropdownMenuProps>) => {
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(opened ?? false);
   const blockButtonRef = useRef<HTMLDivElement>(null);
 
   const onOpenChange = (isOpen: boolean) => {

src/frontend/apps/impress/src/components/index.ts

@@ -3,6 +3,7 @@ export * from './BoxButton';
 export * from './Card';
 export * from './DropButton';
 export * from './DropdownMenu';
+export * from './quick-search';
 export * from './Icon';
 export * from './InfiniteScroll';
 export * from './Link';

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

@@ -2,6 +2,7 @@ import {
   BlockNoteSchema,
   Dictionary,
   defaultBlockSpecs,
+  defaultInlineContentSpecs,
   locales,
   withPageBreak,
 } from '@blocknote/core';
@@ -28,6 +29,10 @@ import { randomColor } from '../utils';
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
 import { DividerBlock, QuoteBlock } from './custom-blocks';
+import {
+  InterlinkingLinkInlineContent,
+  InterlinkingSearchInlineContent,
+} from './custom-inline-content';
 
 export const blockNoteSchema = withPageBreak(
   BlockNoteSchema.create({
@@ -36,6 +41,11 @@ export const blockNoteSchema = withPageBreak(
       divider: DividerBlock,
       quote: QuoteBlock,
     },
+    inlineContentSpecs: {
+      ...defaultInlineContentSpecs,
+      interlinkingSearchInline: InterlinkingSearchInlineContent,
+      interlinkingLinkInline: InterlinkingLinkInlineContent,
+    },
   }),
 );
 

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

@@ -37,7 +37,7 @@ export const BlockNoteSuggestionMenu = () => {
     const index = defaultMenu.findIndex((item) => item.title === 'Code Block');
     const newSlashMenuItems = [
       ...defaultMenu.slice(0, index + 1),
-      ...getInterlinkingMenuItems(t),
+      ...getInterlinkingMenuItems(editor, t),
       ...defaultMenu.slice(index + 1),
     ];
 

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

@@ -0,0 +1,51 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { createReactInlineContentSpec } from '@blocknote/react';
+import { css } from 'styled-components';
+
+import { StyledLink, Text } from '@/components';
+import SelectedPageIcon from '@/docs/doc-editor/assets/doc-selected.svg';
+
+export const InterlinkingLinkInlineContent = createReactInlineContentSpec(
+  {
+    type: 'interlinkingLinkInline',
+    propSchema: {
+      idPage: {
+        default: '',
+      },
+      titlePage: {
+        default: '',
+      },
+    },
+    content: 'none',
+  },
+  {
+    render: (props) => {
+      return <LinkSelected {...props.inlineContent.props} />;
+    },
+  },
+);
+
+interface LinkSelectedProps {
+  idPage: string;
+  titlePage: string;
+}
+const LinkSelected = ({ idPage, titlePage }: LinkSelectedProps) => {
+  return (
+    <StyledLink
+      href={`/docs/${idPage}`}
+      $css={css`
+        display: inline;
+        & svg {
+          position: relative;
+          top: 2px;
+          margin-right: 0.2rem;
+        }
+      `}
+    >
+      <SelectedPageIcon width={11.5} />
+      <Text $weight="500" spellCheck="false" $size="16px" $display="inline">
+        {titlePage}
+      </Text>
+    </StyledLink>
+  );
+};

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

@@ -1,16 +1,62 @@
+/* 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 { SearchPage } from './SearchPage';
+
+export const InterlinkingSearchInlineContent = createReactInlineContentSpec(
+  {
+    type: 'interlinkingSearchInline',
+    propSchema: {
+      disabled: {
+        default: false,
+        values: [true, false],
+      },
+    },
+    content: 'styled',
+  },
+  {
+    render: (props) => {
+      if (props.inlineContent.props.disabled) {
+        return null;
+      }
+
+      return <SearchPage {...props} />;
+    },
+  },
+);
+
 export const getInterlinkingMenuItems = (
+  editor: DocsBlockNoteEditor,
   t: TFunction<'translation', undefined>,
   group: string,
   createPage: () => void,
 ) => [
+  {
+    title: t('Link to a page'),
+    onItemClick: () => {
+      editor.insertInlineContent([
+        {
+          type: 'interlinkingSearchInline',
+          props: {
+            disabled: false,
+          },
+        },
+      ]);
+    },
+    aliases: ['interlinking', 'link', 'anchor', 'a'],
+    group,
+    icon: <LinkPageIcon />,
+    subtext: t('Link to a page'),
+  },
   {
     title: t('New page'),
     onItemClick: createPage,
@@ -42,8 +88,9 @@ export const useGetInterlinkingMenuItems = () => {
   });
 
   return useCallback(
-    (t: TFunction<'translation', undefined>) =>
+    (editor: DocsBlockNoteEditor, t: TFunction<'translation', undefined>) =>
       getInterlinkingMenuItems(
+        editor,
         t,
         t('Links'),
         () =>