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

@@ -14,6 +14,7 @@ and this project adheres to
 - ✨(backend) allow masking documents from the list view #1171
 - ✨(frontend) subdocs can manage link reach #1190
 - ✨(frontend) add duplicate action to doc tree #1175
+- ✨(frontend) Interlinking doc #904
 - ✨(frontend) add multi columns support for editor #1219
 
 ### Changed

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

@@ -706,4 +706,59 @@ 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 { name: docChild1 } = await createRootSubPage(
+      page,
+      browserName,
+      'doc-interlink-child-1',
+    );
+
+    await verifyDocName(page, docChild1);
+
+    const { name: docChild2 } = await createRootSubPage(
+      page,
+      browserName,
+      'doc-interlink-child-2',
+    );
+
+    await verifyDocName(page, docChild2);
+
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Link a doc').first().click();
+
+    const input = page.locator(
+      "span[data-inline-content-type='interlinkingSearchInline'] input",
+    );
+    const searchContainer = page.locator('.quick-search-container');
+
+    await input.fill('doc-interlink');
+
+    await expect(searchContainer.getByText(randomDoc)).toBeVisible();
+    await expect(searchContainer.getByText(docChild1)).toBeVisible();
+    await expect(searchContainer.getByText(docChild2)).toBeVisible();
+
+    await input.pressSequentially('-child');
+
+    await expect(searchContainer.getByText(docChild1)).toBeVisible();
+    await expect(searchContainer.getByText(docChild2)).toBeVisible();
+    await expect(searchContainer.getByText(randomDoc)).toBeHidden();
+
+    // use keydown to select the second result
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+
+    const interlink = page.getByRole('link', {
+      name: 'child-2',
+    });
+
+    await expect(interlink).toBeVisible();
+    await interlink.click();
+
+    await verifyDocName(page, docChild2);
+  });
 });

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

@@ -179,7 +179,7 @@ test.describe('Doc grid dnd mobile', () => {
     await expect(docsGrid.getByRole('row').first()).toBeVisible();
     await expect(docsGrid.locator('.--docs--grid-droppable')).toHaveCount(0);
 
-    await createDoc(page, 'Draggable doc mobile', browserName, 1, false, true);
+    await createDoc(page, 'Draggable doc mobile', browserName, 1, true);
 
     await createRootSubPage(
       page,

src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts

@@ -78,17 +78,11 @@ export const createDoc = async (
   docName: string,
   browserName: string,
   length: number = 1,
-  isChild: boolean = false,
   isMobile: boolean = false,
 ) => {
   const randomDocs = randomName(docName, browserName, length);
 
   for (let i = 0; i < randomDocs.length; i++) {
-    if (!isChild && !isMobile) {
-      const header = page.locator('header').first();
-      await header.locator('h2').getByText('Docs').click();
-    }
-
     if (isMobile) {
       await page
         .getByRole('button', { name: 'Open the header menu' })

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

@@ -16,6 +16,7 @@ export interface BoxProps {
   $background?: CSSProperties['background'];
   $color?: CSSProperties['color'];
   $css?: string | RuleSet<object>;
+  $cursor?: CSSProperties['cursor'];
   $direction?: CSSProperties['flexDirection'];
   $display?: CSSProperties['display'];
   $effect?: 'show' | 'hide';
@@ -44,13 +45,13 @@ 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};`}
+  ${({ $cursor }) => $cursor && `cursor: ${$cursor};`}
+  ${({ $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/components/quick-search/QuickSearch.tsx

@@ -1,5 +1,11 @@
 import { Command } from 'cmdk';
-import { ReactNode, useRef } from 'react';
+import {
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import { hasChildrens } from '@/utils/children';
 
@@ -30,7 +36,6 @@ export type QuickSearchProps = {
   loading?: boolean;
   label?: string;
   placeholder?: string;
-  children?: ReactNode;
 };
 
 export const QuickSearch = ({
@@ -42,14 +47,47 @@ export const QuickSearch = ({
   label,
   placeholder,
   children,
-}: QuickSearchProps) => {
+}: PropsWithChildren<QuickSearchProps>) => {
   const ref = useRef<HTMLDivElement | null>(null);
+  const [selectedValue, setSelectedValue] = useState<string>('');
+
+  // Auto-select first item when children change
+  useEffect(() => {
+    if (!children) {
+      setSelectedValue('');
+      return;
+    }
+
+    // Small delay for DOM to update
+    const timeoutId = setTimeout(() => {
+      const firstItem = ref.current?.querySelector('[cmdk-item]');
+      if (firstItem) {
+        const value =
+          firstItem.getAttribute('data-value') ||
+          firstItem.getAttribute('value') ||
+          firstItem.textContent?.trim() ||
+          '';
+        if (value) {
+          setSelectedValue(value);
+        }
+      }
+    }, 50);
+
+    return () => clearTimeout(timeoutId);
+  }, [children]);
 
   return (
     <>
       <QuickSearchStyle />
       <div className="quick-search-container">
-        <Command label={label} shouldFilter={false} ref={ref}>
+        <Command
+          label={label}
+          shouldFilter={false}
+          ref={ref}
+          value={selectedValue}
+          onValueChange={setSelectedValue}
+          tabIndex={0}
+        >
           {showInput && (
             <QuickSearchInput
               loading={loading}

src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx

@@ -1,7 +1,7 @@
 import { Command } from 'cmdk';
 import { ReactNode } from 'react';
 
-import { Box } from '../Box';
+import { Box, Text } from '@/components';
 
 import { QuickSearchData } from './QuickSearch';
 import { QuickSearchItem } from './QuickSearchItem';
@@ -23,6 +23,7 @@ export const QuickSearchGroup = <T,>({
         key={group.groupName}
         heading={group.groupName}
         forceMount={false}
+        contentEditable={false}
       >
         {group.startActions?.map((action, index) => {
           return (
@@ -58,7 +59,13 @@ export const QuickSearchGroup = <T,>({
           );
         })}
         {group.emptyString && group.elements.length === 0 && (
-          <span className="ml-b clr-greyscale-500">{group.emptyString}</span>
+          <Text
+            $variation="500"
+            $margin={{ left: '2xs', bottom: '3xs' }}
+            $size="sm"
+          >
+            {group.emptyString}
+          </Text>
         )}
       </Command.Group>
     </Box>