✨(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

CHANGELOG.md

@@ -8,6 +8,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+## Added
+
+- ✨(frontend) Interlinking doc #904
+
 ## Fixed
 
 - 🐛(helm) charts generate invalid YAML for collaboration API / WS #890

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

@@ -706,4 +706,53 @@ test.describe('Doc Editor', () => {
       'pink',
     );
   });
+
+  test('it checks interlink feature', async ({ page, browserName }) => {
+    const [randomDoc] = await createDoc(page, 'doc-interlink', browserName, 1);
+
+    await verifyDocName(page, randomDoc);
+
+    const [docChild1] = await createDoc(
+      page,
+      'doc-interlink-child-1',
+      browserName,
+      1,
+      true,
+    );
+
+    await verifyDocName(page, docChild1);
+
+    const [docChild2] = await createDoc(
+      page,
+      'doc-interlink-child-2',
+      browserName,
+      1,
+      true,
+    );
+
+    await verifyDocName(page, docChild2);
+
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Link to a page').first().click();
+
+    await page
+      .locator(
+        "span[data-inline-content-type='interlinkingSearchInline'] input",
+      )
+      .fill('interlink-child-1');
+
+    await page
+      .locator('.quick-search-container')
+      .getByText('interlink-child-1')
+      .click();
+
+    const interlink = page.getByRole('link', {
+      name: 'child-1',
+    });
+
+    await expect(interlink).toBeVisible();
+    await interlink.click();
+
+    await verifyDocName(page, docChild1);
+  });
 });

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

@@ -25,6 +25,7 @@ export type DropdownMenuProps = {
   arrowCss?: BoxProps['$css'];
   buttonCss?: BoxProps['$css'];
   disabled?: boolean;
+  opened?: boolean;
   topMessage?: string;
   selectedValues?: string[];
   afterOpenChange?: (isOpen: boolean) => void;
@@ -38,12 +39,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

@@ -4,6 +4,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 { codeBlock } from '@blocknote/code-block';
 import {
   BlockNoteSchema,
   defaultBlockSpecs,
+  defaultInlineContentSpecs,
   withPageBreak,
 } from '@blocknote/core';
 import '@blocknote/core/fonts/inter.css';
@@ -28,6 +29,10 @@ import { randomColor } from '../utils';
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
 import { CalloutBlock, DividerBlock } from './custom-blocks';
+import {
+  InterlinkingLinkInlineContent,
+  InterlinkingSearchInlineContent,
+} from './custom-inline-content';
 
 export const blockNoteSchema = withPageBreak(
   BlockNoteSchema.create({
@@ -36,6 +41,11 @@ export const blockNoteSchema = withPageBreak(
       callout: CalloutBlock,
       divider: DividerBlock,
     },
+    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,60 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { createReactInlineContentSpec } from '@blocknote/react';
+import { css } from 'styled-components';
+
+import { StyledLink, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import SelectedPageIcon from '@/docs/doc-editor/assets/doc-selected.svg';
+
+export const InterlinkingLinkInlineContent = createReactInlineContentSpec(
+  {
+    type: 'interlinkingLinkInline',
+    propSchema: {
+      url: {
+        default: '',
+      },
+      title: {
+        default: '',
+      },
+    },
+    content: 'none',
+  },
+  {
+    render: (props) => {
+      return <LinkSelected {...props.inlineContent.props} />;
+    },
+  },
+);
+
+interface LinkSelectedProps {
+  url: string;
+  title: string;
+}
+const LinkSelected = ({ url, title }: LinkSelectedProps) => {
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <StyledLink
+      href={url}
+      $css={css`
+        display: inline;
+        padding: 0.1rem 0.4rem;
+        border-radius: 4px;
+        & svg {
+          position: relative;
+          top: 2px;
+          margin-right: 0.2rem;
+        }
+        &:hover {
+          background-color: ${colorsTokens['greyscale-100']};
+        }
+        transition: background-color 0.2s ease-in-out;
+      `}
+    >
+      <SelectedPageIcon width={11.5} />
+      <Text $weight="500" spellCheck="false" $size="16px" $display="inline">
+        {title}
+      </Text>
+    </StyledLink>
+  );
+};