♻️(frontend) add versions in the panel editor

We add the features version to the panel editor.
We had to refactor the panel to be able to
have the version with the table of content in
the same panel.

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to
 ## Added
 
 - ✨(ci) add security scan #291
+- ✨(frontend) Activate versions feature #240
 
 ## Changed
 

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc } from './common';
+import { createDoc, goToGridDoc } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -33,6 +33,7 @@ test.describe('Doc Table Content', () => {
     await editor.getByText('Hello').dblclick();
     await page.getByRole('button', { name: 'Strike' }).click();
 
+    await page.locator('.bn-block-outer').first().click();
     await page.locator('.bn-block-outer').last().click();
 
     // Create space to fill the viewport
@@ -92,4 +93,45 @@ test.describe('Doc Table Content', () => {
     await expect(editor.getByText('Hello World')).not.toBeInViewport();
     await expect(superW).toHaveAttribute('aria-selected', 'true');
   });
+
+  test('it checks that table contents panel is opened automaticaly if more that 2 headings', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(
+      page,
+      'doc-table-content',
+      browserName,
+      1,
+    );
+
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await expect(page.getByLabel('Open the panel')).toBeHidden();
+
+    const editor = page.locator('.ProseMirror');
+
+    await editor.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Heading 1').click();
+    await page.keyboard.type('Hello World', { delay: 100 });
+
+    await page.keyboard.press('Enter');
+
+    await editor.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Heading 2').click();
+    await page.keyboard.type('Super World', { delay: 100 });
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByLabel('Close the panel')).toBeVisible();
+
+    const panel = page.getByLabel('Document panel');
+    await expect(panel.getByText('Hello World')).toBeVisible();
+    await expect(panel.getByText('Super World')).toBeVisible();
+
+    await page.getByLabel('Close the panel').click();
+
+    await expect(panel).toHaveAttribute('aria-hidden', 'true');
+  });
 });

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

@@ -0,0 +1,205 @@
+import { expect, test } from '@playwright/test';
+
+import { createDoc, goToGridDoc, mockedDocument } from './common';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('Doc Version', () => {
+  test('it displays the doc versions', async ({ page, browserName }) => {
+    const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
+
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Version history',
+      })
+      .click();
+
+    const panel = page.getByLabel('Document panel');
+
+    await expect(panel.getByText('Current version')).toBeVisible();
+    expect(await panel.locator('li').count()).toBe(1);
+
+    await page.locator('.ProseMirror.bn-editor').click();
+    await page.locator('.ProseMirror.bn-editor').last().fill('Hello World');
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByText('Hello World')).toBeVisible();
+
+    await page
+      .locator('.ProseMirror .bn-block')
+      .getByText('Hello World')
+      .fill('It will create a version');
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByText('Hello World')).toBeHidden();
+    await expect(page.getByText('It will create a version')).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Version history',
+      })
+      .click();
+
+    await expect(panel.getByText('Current version')).toBeVisible();
+    expect(await panel.locator('li').count()).toBe(2);
+
+    await panel.locator('li').nth(1).click();
+    await expect(
+      page.getByText('Read only, you cannot edit document versions.'),
+    ).toBeVisible();
+    await expect(page.getByText('Hello World')).toBeVisible();
+    await expect(page.getByText('It will create a version')).toBeHidden();
+
+    await panel.getByText('Current version').click();
+    await expect(page.getByText('Hello World')).toBeHidden();
+    await expect(page.getByText('It will create a version')).toBeVisible();
+  });
+
+  test('it does not display the doc versions if not allowed', async ({
+    page,
+  }) => {
+    await mockedDocument(page, {
+      abilities: {
+        versions_list: false,
+        partial_update: true,
+      },
+    });
+
+    await goToGridDoc(page);
+
+    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await expect(
+      page.getByRole('button', { name: 'Version history' }),
+    ).toBeHidden();
+
+    await page.getByRole('button', { name: 'Table of content' }).click();
+
+    await expect(
+      page.getByLabel('Document panel').getByText('Versions'),
+    ).toBeHidden();
+  });
+
+  test('it restores the doc version', async ({ page, browserName }) => {
+    const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
+
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+
+    await page.locator('.bn-block-outer').last().click();
+    await page.locator('.bn-block-outer').last().fill('Hello');
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByText('Hello')).toBeVisible();
+    await page.locator('.bn-block-outer').last().click();
+    await page.keyboard.press('Enter');
+    await page.locator('.bn-block-outer').last().fill('World');
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByText('World')).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Version history',
+      })
+      .click();
+
+    const panel = page.getByLabel('Document panel');
+    await panel.locator('li').nth(1).click();
+    await expect(page.getByText('World')).toBeHidden();
+
+    await panel.getByLabel('Open the version options').click();
+    await page.getByText('Restore the version').click();
+
+    await expect(page.getByText('Restore this version?')).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'Restore',
+      })
+      .click();
+
+    await expect(panel.locator('li')).toHaveCount(3);
+
+    await panel.getByText('Current version').click();
+    await expect(page.getByText('Hello')).toBeVisible();
+    await expect(page.getByText('World')).toBeHidden();
+  });
+
+  test('it restores the doc version from button title', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
+
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+
+    await page.locator('.bn-block-outer').last().click();
+    await page.locator('.bn-block-outer').last().fill('Hello');
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByText('Hello')).toBeVisible();
+    await page.locator('.bn-block-outer').last().click();
+    await page.keyboard.press('Enter');
+    await page.locator('.bn-block-outer').last().fill('World');
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByText('World')).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Version history',
+      })
+      .click();
+
+    const panel = page.getByLabel('Document panel');
+    await panel.locator('li').nth(1).click();
+    await expect(page.getByText('World')).toBeHidden();
+
+    await page
+      .getByRole('button', {
+        name: 'Restore this version',
+      })
+      .click();
+
+    await expect(page.getByText('Restore this version?')).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'Restore',
+      })
+      .click();
+
+    await expect(panel.locator('li')).toHaveCount(3);
+
+    await panel.getByText('Current version').click();
+    await expect(page.getByText('Hello')).toBeVisible();
+    await expect(page.getByText('World')).toBeHidden();
+  });
+});

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

@@ -1,106 +0,0 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { Box, Card, IconBG, Text } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-
-interface PanelProps {
-  title?: string;
-  setIsPanelOpen: (isOpen: boolean) => void;
-}
-
-export const Panel = ({
-  children,
-  title,
-  setIsPanelOpen,
-}: PropsWithChildren<PanelProps>) => {
-  const { t } = useTranslation();
-  const { colorsTokens } = useCunninghamTheme();
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    setIsOpen(true);
-  }, []);
-
-  const closedOverridingStyles = !isOpen && {
-    $width: '0',
-    $maxWidth: '0',
-    $minWidth: '0',
-  };
-
-  const transition = 'all 0.5s ease-in-out';
-
-  return (
-    <Card
-      $width="100%"
-      $maxWidth="20rem"
-      $position="sticky"
-      $maxHeight="99vh"
-      $height="100%"
-      $css={`
-        top: 0vh;
-        transition: ${transition};
-        ${
-          !isOpen &&
-          `
-            box-shadow: none;
-            border: none;
-          `
-        }
-      `}
-      aria-label={t('Document panel')}
-      {...closedOverridingStyles}
-    >
-      <Box
-        $overflow="inherit"
-        $position="sticky"
-        $css={`
-          top: 0;
-          opacity: ${isOpen ? '1' : '0'};
-          transition: ${transition};
-        `}
-        $maxHeight="100%"
-      >
-        <Box
-          $padding={{ all: 'small' }}
-          $direction="row"
-          $align="center"
-          $justify="center"
-          $css={`border-top: 2px solid ${colorsTokens()['primary-600']};`}
-        >
-          <IconBG
-            iconName="menu_open"
-            aria-label={isOpen ? t('Close the panel') : t('Open the panel')}
-            $background="transparent"
-            $size="h2"
-            $zIndex={1}
-            $css={`
-              cursor: pointer;
-              left: 0rem;
-              top: 0.1rem;
-              transition: ${transition};
-              transform: rotate(180deg);
-              opacity: ${isOpen ? '1' : '0'};
-              user-select: none;
-            `}
-            $position="absolute"
-            onClick={() => {
-              setIsOpen(false);
-              setTimeout(() => {
-                setIsPanelOpen(false);
-              }, 400);
-            }}
-            $radius="2px"
-          />
-          {title && (
-            <Text $weight="bold" $size="l" $theme="primary">
-              {title}
-            </Text>
-          )}
-        </Box>
-        {children}
-      </Box>
-    </Card>
-  );
-};

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

@@ -5,19 +5,14 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Card, Text, TextErrors } from '@/components';
-import { Panel } from '@/components/Panel';
 import { useCunninghamTheme } from '@/cunningham';
 import { DocHeader } from '@/features/docs/doc-header';
 import { Doc } from '@/features/docs/doc-management';
-import { TableContent } from '@/features/docs/doc-table-content';
-import {
-  VersionList,
-  Versions,
-  useDocVersion,
-  useDocVersionStore,
-} from '@/features/docs/doc-versioning/';
+import { useHeading } from '@/features/docs/doc-table-content';
+import { Versions, useDocVersion } from '@/features/docs/doc-versioning/';
 
 import { BlockNoteEditor } from './BlockNoteEditor';
+import { IconOpenPanelEditor, PanelEditor } from './PanelEditor';
 
 interface DocEditorProps {
   doc: Doc;
@@ -27,8 +22,8 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
   const {
     query: { versionId },
   } = useRouter();
-  const { isPanelVersionOpen, setIsPanelVersionOpen } = useDocVersionStore();
   const { t } = useTranslation();
+  const headings = useHeading(doc.id);
 
   const isVersion = versionId && typeof versionId === 'string';
 
@@ -56,21 +51,22 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
         $height="100%"
         $direction="row"
         $margin={{ all: 'small', top: 'none' }}
-        $gap="1rem"
+        $css="overflow-x: clip;"
       >
-        <Card $padding="big" $css="flex:1;" $overflow="auto">
+        <Card
+          $padding="big"
+          $css="flex:1;"
+          $overflow="auto"
+          $position="relative"
+        >
           {isVersion ? (
             <DocVersionEditor doc={doc} versionId={versionId} />
           ) : (
             <BlockNoteEditor doc={doc} />
           )}
+          <IconOpenPanelEditor headings={headings} />
         </Card>
-        {doc.abilities.versions_list && isPanelVersionOpen && (
-          <Panel title={t('VERSIONS')} setIsPanelOpen={setIsPanelVersionOpen}>
-            <VersionList doc={doc} />
-          </Panel>
-        )}
-        <TableContent doc={doc} />
+        <PanelEditor doc={doc} headings={headings} />
       </Box>
     </>
   );

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

@@ -0,0 +1,187 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, BoxButton, Card, IconBG, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { Doc } from '@/features/docs//doc-management';
+import { HeadingBlock, TableContent } from '@/features/docs/doc-table-content';
+import { VersionList } from '@/features/docs/doc-versioning';
+
+import { usePanelEditorStore } from '../stores/usePanelEditorStore';
+
+interface PanelProps {
+  doc: Doc;
+  headings: HeadingBlock[];
+}
+
+export const PanelEditor = ({
+  doc,
+  headings,
+}: PropsWithChildren<PanelProps>) => {
+  const { t } = useTranslation();
+  const { colorsTokens } = useCunninghamTheme();
+
+  const { isPanelTableContentOpen, setIsPanelTableContentOpen, isPanelOpen } =
+    usePanelEditorStore();
+
+  return (
+    <Card
+      $width="100%"
+      $maxWidth="20rem"
+      $position="sticky"
+      $maxHeight="99vh"
+      $height="100%"
+      $hasTransition="slow"
+      $css={`
+        top: 0vh;
+        transform: translateX(0%);
+        overflow: hidden;
+        flex: 1;
+        margin-left: 1rem;
+        ${
+          !isPanelOpen &&
+          `
+            transform: translateX(200%);
+            opacity: 0;
+            flex: 0;
+            margin-left: 0rem;
+            max-width: 0rem;
+          `
+        }
+      `}
+      aria-label={t('Document panel')}
+      aria-hidden={!isPanelOpen}
+    >
+      <Box
+        $overflow="inherit"
+        $position="sticky"
+        $hasTransition="slow"
+        $css={`
+          top: 0;
+          opacity: ${isPanelOpen ? '1' : '0'};
+        `}
+        $maxHeight="100%"
+      >
+        <Box
+          $direction="row"
+          $justify="space-between"
+          $align="center"
+          $position="relative"
+          $background={colorsTokens()['primary-400']}
+          $margin={{ bottom: 'tiny' }}
+        >
+          <Box
+            $background="white"
+            $position="absolute"
+            $height="100%"
+            $width={doc.abilities.versions_list ? '50%' : '100%'}
+            $hasTransition="slow"
+            $css={`
+                border-top: 2px solid ${colorsTokens()['primary-600']};
+                ${isPanelTableContentOpen ? 'transform: translateX(0);' : 'transform: translateX(100%);'}
+              `}
+          />
+          <BoxButton
+            $minWidth={doc.abilities.versions_list ? '50%' : '100%'}
+            onClick={() => setIsPanelTableContentOpen(true)}
+            $zIndex={1}
+          >
+            <Text
+              $width="100%"
+              $weight="bold"
+              $size="m"
+              $theme="primary"
+              $padding={{ vertical: 'small', horizontal: 'small' }}
+            >
+              {t('Table of content')}
+            </Text>
+          </BoxButton>
+          {doc.abilities.versions_list && (
+            <BoxButton
+              $minWidth="50%"
+              onClick={() => setIsPanelTableContentOpen(false)}
+              $zIndex={1}
+            >
+              <Text
+                $width="100%"
+                $weight="bold"
+                $size="m"
+                $theme="primary"
+                $padding={{ vertical: 'small', horizontal: 'small' }}
+              >
+                {t('Versions')}
+              </Text>
+            </BoxButton>
+          )}
+        </Box>
+        {isPanelTableContentOpen && (
+          <TableContent doc={doc} headings={headings} />
+        )}
+        {!isPanelTableContentOpen && doc.abilities.versions_list && (
+          <VersionList doc={doc} />
+        )}
+      </Box>
+    </Card>
+  );
+};
+
+interface IconOpenPanelEditorProps {
+  headings: HeadingBlock[];
+}
+
+export const IconOpenPanelEditor = ({ headings }: IconOpenPanelEditorProps) => {
+  const { t } = useTranslation();
+  const { setIsPanelOpen, isPanelOpen, setIsPanelTableContentOpen } =
+    usePanelEditorStore();
+  const [hasBeenOpen, setHasBeenOpen] = useState(isPanelOpen);
+
+  const setClosePanel = () => {
+    setHasBeenOpen(true);
+    setIsPanelOpen(!isPanelOpen);
+  };
+
+  // Open the panel if there are more than 1 heading
+  useEffect(() => {
+    if (headings?.length && headings.length > 1 && !hasBeenOpen) {
+      setIsPanelTableContentOpen(true);
+      setIsPanelOpen(true);
+      setHasBeenOpen(true);
+    }
+  }, [headings, setIsPanelTableContentOpen, setIsPanelOpen, hasBeenOpen]);
+
+  // If open from the doc header we set the state as well
+  useEffect(() => {
+    if (isPanelOpen && !hasBeenOpen) {
+      setHasBeenOpen(true);
+    }
+  }, [hasBeenOpen, isPanelOpen]);
+
+  // Close the panel unmount
+  useEffect(() => {
+    return () => {
+      setIsPanelOpen(false);
+    };
+  }, [setIsPanelOpen]);
+
+  return (
+    <IconBG
+      iconName="menu_open"
+      aria-label={isPanelOpen ? t('Close the panel') : t('Open the panel')}
+      $background="transparent"
+      $size="h2"
+      $zIndex={1}
+      $hasTransition="slow"
+      $css={`
+        cursor: pointer;
+        right: 0rem;
+        top: 0.1rem;
+        transform: rotate(${isPanelOpen ? '180deg' : '0deg'});
+        user-select: none;
+        ${hasBeenOpen ? 'display:flex;' : 'display: none;'}
+      `}
+      $position="absolute"
+      onClick={setClosePanel}
+      $radius="2px"
+    />
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts

@@ -1 +1,2 @@
 export * from './useDocStore';
+export * from './usePanelEditorStore';

src/frontend/apps/impress/src/features/docs/doc-editor/stores/usePanelEditorStore.tsx

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+
+export interface UsePanelEditorStore {
+  isPanelOpen: boolean;
+  setIsPanelOpen: (isOpen: boolean) => void;
+  isPanelTableContentOpen: boolean;
+  setIsPanelTableContentOpen: (isOpen: boolean) => void;
+}
+
+export const usePanelEditorStore = create<UsePanelEditorStore>((set) => ({
+  isPanelOpen: false,
+  isPanelTableContentOpen: true,
+  setIsPanelTableContentOpen: (isPanelTableContentOpen) => {
+    set(() => ({ isPanelTableContentOpen }));
+  },
+  setIsPanelOpen: (isPanelOpen) => {
+    set(() => ({ isPanelOpen }));
+  },
+}));

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -3,14 +3,13 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, DropButton, IconOptions, Text } from '@/components';
+import { usePanelEditorStore } from '@/features/docs/doc-editor/';
 import {
   Doc,
   ModalRemoveDoc,
   ModalShare,
   ModalUpdateDoc,
 } from '@/features/docs/doc-management';
-import { useDocTableContentStore } from '@/features/docs/doc-table-content';
-import { useDocVersionStore } from '@/features/docs/doc-versioning';
 
 import { ModalPDF } from './ModalExport';
 
@@ -25,8 +24,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
   const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
   const [isDropOpen, setIsDropOpen] = useState(false);
-  const { setIsPanelVersionOpen } = useDocVersionStore();
-  const { setIsPanelTableContentOpen } = useDocTableContentStore();
+  const { setIsPanelOpen, setIsPanelTableContentOpen } = usePanelEditorStore();
 
   return (
     <Box
@@ -81,10 +79,24 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
               <Text $theme="primary">{t('Delete document')}</Text>
             </Button>
           )}
+          {doc.abilities.versions_list && (
+            <Button
+              onClick={() => {
+                setIsPanelOpen(true);
+                setIsPanelTableContentOpen(false);
+                setIsDropOpen(false);
+              }}
+              color="primary-text"
+              icon={<span className="material-icons">history</span>}
+              size="small"
+            >
+              <Text $theme="primary">{t('Version history')}</Text>
+            </Button>
+          )}
           <Button
             onClick={() => {
+              setIsPanelOpen(true);
               setIsPanelTableContentOpen(true);
-              setIsPanelVersionOpen(false);
               setIsDropOpen(false);
             }}
             color="primary-text"

src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx

@@ -1,89 +1,25 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, BoxButton, Text } from '@/components';
-import { Panel } from '@/components/Panel';
 import { useDocStore } from '@/features/docs/doc-editor';
 import { Doc } from '@/features/docs/doc-management';
 
-import { useDocTableContentStore } from '../stores';
+import { HeadingBlock } from '../types';
 
 import { Heading } from './Heading';
 
-const recursiveTextContent = (content: HeadingBlock['content']): string => {
-  if (!content) {
-    return '';
-  }
-
-  return content.reduce((acc, content) => {
-    if (content.type === 'text') {
-      return acc + content.text;
-    } else if (content.type === 'link') {
-      return acc + recursiveTextContent(content.content);
-    }
-
-    return acc;
-  }, '');
-};
-
-type HeadingBlock = {
-  id: string;
-  type: string;
-  text: string;
-  content: HeadingBlock[];
-  contentText: string;
-  props: {
-    level: number;
-  };
-};
-
 interface TableContentProps {
   doc: Doc;
+  headings: HeadingBlock[];
 }
 
-export const TableContent = ({ doc }: TableContentProps) => {
+export const TableContent = ({ doc, headings }: TableContentProps) => {
   const { docsStore } = useDocStore();
   const { t } = useTranslation();
-
   const editor = docsStore?.[doc.id]?.editor;
-  const headingFiltering = useCallback(
-    () =>
-      editor?.document
-        .filter((block) => block.type === 'heading')
-        .map((block) => ({
-          ...block,
-          contentText: recursiveTextContent(
-            block.content as unknown as HeadingBlock['content'],
-          ),
-        })) as unknown as HeadingBlock[],
-    [editor?.document],
-  );
-
-  const [headings, setHeadings] = useState<HeadingBlock[]>();
-  const { setIsPanelTableContentOpen, isPanelTableContentOpen } =
-    useDocTableContentStore();
-  const [hasBeenClose, setHasBeenClose] = useState(false);
-  const setClosePanel = () => {
-    setHasBeenClose(true);
-    setIsPanelTableContentOpen(false);
-  };
-
   const [headingIdHighlight, setHeadingIdHighlight] = useState<string>();
 
-  // Open the panel if there are more than 1 heading
-  useEffect(() => {
-    if (headings?.length && headings.length > 1 && !hasBeenClose) {
-      setIsPanelTableContentOpen(true);
-    }
-  }, [setIsPanelTableContentOpen, headings, hasBeenClose]);
-
-  // Close the panel unmount
-  useEffect(() => {
-    return () => {
-      setIsPanelTableContentOpen(false);
-    };
-  }, [setIsPanelTableContentOpen]);
-
   // To highlight the first heading in the viewport
   useEffect(() => {
     const handleScroll = () => {
@@ -130,68 +66,57 @@ export const TableContent = ({ doc }: TableContentProps) => {
     return null;
   }
 
-  // Update the headings when the editor content changes
-  editor?.onEditorContentChange(() => {
-    setHeadings(headingFiltering());
-  });
-
-  if (!isPanelTableContentOpen) {
-    return null;
-  }
-
   return (
-    <Panel setIsPanelOpen={setClosePanel}>
-      <Box $padding="small" $maxHeight="95%">
-        <Box $overflow="auto">
-          {headings?.map((heading) => (
-            <Heading
-              editor={editor}
-              headingId={heading.id}
-              level={heading.props.level}
-              text={heading.contentText}
-              key={heading.id}
-              isHighlight={headingIdHighlight === heading.id}
-            />
-          ))}
-        </Box>
-        <Box
-          $height="1px"
-          $width="auto"
-          $background="#e5e5e5"
-          $margin={{ vertical: 'small' }}
-          $css="flex: none;"
-        />
-        <BoxButton
-          onClick={() => {
-            editor.focus();
-            document.querySelector(`.bn-editor`)?.scrollIntoView({
+    <Box $padding={{ all: 'small', right: 'none' }} $maxHeight="95%">
+      <Box $overflow="auto">
+        {headings?.map((heading) => (
+          <Heading
+            editor={editor}
+            headingId={heading.id}
+            level={heading.props.level}
+            text={heading.contentText}
+            key={heading.id}
+            isHighlight={headingIdHighlight === heading.id}
+          />
+        ))}
+      </Box>
+      <Box
+        $height="1px"
+        $width="auto"
+        $background="#e5e5e5"
+        $margin={{ vertical: 'small' }}
+        $css="flex: none;"
+      />
+      <BoxButton
+        onClick={() => {
+          editor.focus();
+          document.querySelector(`.bn-editor`)?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+          });
+        }}
+      >
+        <Text $theme="primary" $padding={{ vertical: 'xtiny' }}>
+          {t('Back to top')}
+        </Text>
+      </BoxButton>
+      <BoxButton
+        onClick={() => {
+          editor.focus();
+          document
+            .querySelector(
+              `.bn-editor > .bn-block-group > .bn-block-outer:last-child`,
+            )
+            ?.scrollIntoView({
               behavior: 'smooth',
               block: 'start',
             });
-          }}
-        >
-          <Text $theme="primary" $padding={{ vertical: 'xtiny' }}>
-            {t('Back to top')}
-          </Text>
-        </BoxButton>
-        <BoxButton
-          onClick={() => {
-            editor.focus();
-            document
-              .querySelector(
-                `.bn-editor > .bn-block-group > .bn-block-outer:last-child`,
-              )
-              ?.scrollIntoView({
-                behavior: 'smooth',
-                block: 'start',
-              });
-          }}
-        >
-          <Text $theme="primary" $padding={{ vertical: 'xtiny' }}>
-            {t('Go to bottom')}
-          </Text>
-        </BoxButton>
-      </Box>
-    </Panel>
+        }}
+      >
+        <Text $theme="primary" $padding={{ vertical: 'xtiny' }}>
+          {t('Go to bottom')}
+        </Text>
+      </BoxButton>
+    </Box>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-table-content/hooks/index.ts

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

src/frontend/apps/impress/src/features/docs/doc-table-content/hooks/useHeading.tsx

@@ -0,0 +1,46 @@
+import { useCallback, useState } from 'react';
+
+import { useDocStore } from '../../doc-editor';
+import { HeadingBlock } from '../types';
+
+const recursiveTextContent = (content: HeadingBlock['content']): string => {
+  if (!content) {
+    return '';
+  }
+
+  return content.reduce((acc, content) => {
+    if (content.type === 'text') {
+      return acc + content.text;
+    } else if (content.type === 'link') {
+      return acc + recursiveTextContent(content.content);
+    }
+
+    return acc;
+  }, '');
+};
+
+export const useHeading = (docId: string) => {
+  const { docsStore } = useDocStore();
+  const editor = docsStore?.[docId]?.editor;
+
+  const headingFiltering = useCallback(
+    () =>
+      editor?.document
+        .filter((block) => block.type === 'heading')
+        .map((block) => ({
+          ...block,
+          contentText: recursiveTextContent(
+            block.content as unknown as HeadingBlock['content'],
+          ),
+        })) as unknown as HeadingBlock[],
+    [editor?.document],
+  );
+
+  const [headings, setHeadings] = useState<HeadingBlock[]>(headingFiltering());
+
+  editor?.onEditorContentChange(() => {
+    setHeadings(headingFiltering());
+  });
+
+  return headings;
+};

src/frontend/apps/impress/src/features/docs/doc-table-content/index.ts

@@ -1,2 +1,3 @@
 export * from './components';
-export * from './stores';
+export * from './hooks';
+export * from './types';

src/frontend/apps/impress/src/features/docs/doc-table-content/stores/index.ts

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

src/frontend/apps/impress/src/features/docs/doc-table-content/stores/useDocTableContentStore.tsx

@@ -1,15 +0,0 @@
-import { create } from 'zustand';
-
-export interface UseDocTableContentStore {
-  isPanelTableContentOpen: boolean;
-  setIsPanelTableContentOpen: (isOpen: boolean) => void;
-}
-
-export const useDocTableContentStore = create<UseDocTableContentStore>(
-  (set) => ({
-    isPanelTableContentOpen: false,
-    setIsPanelTableContentOpen: (isPanelTableContentOpen) => {
-      set(() => ({ isPanelTableContentOpen }));
-    },
-  }),
-);

src/frontend/apps/impress/src/features/docs/doc-table-content/types.ts

@@ -0,0 +1,10 @@
+export type HeadingBlock = {
+  id: string;
+  type: string;
+  text: string;
+  content: HeadingBlock[];
+  contentText: string;
+  props: {
+    level: number;
+  };
+};

src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx

@@ -90,6 +90,8 @@ export const ModalVersion = ({
               id: docId,
               content: newDoc,
             });
+
+            onClose();
           }}
         >
           {t('Restore')}

src/frontend/apps/impress/src/features/docs/doc-versioning/index.ts

@@ -1,4 +1,3 @@
 export * from './api';
 export * from './components';
-export * from './stores';
 export * from './types';

src/frontend/apps/impress/src/features/docs/doc-versioning/stores/index.ts

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

src/frontend/apps/impress/src/features/docs/doc-versioning/stores/useDocVersionStore.tsx

@@ -1,13 +0,0 @@
-import { create } from 'zustand';
-
-export interface UseDocVersionStore {
-  isPanelVersionOpen: boolean;
-  setIsPanelVersionOpen: (isOpen: boolean) => void;
-}
-
-export const useDocVersionStore = create<UseDocVersionStore>((set) => ({
-  isPanelVersionOpen: false,
-  setIsPanelVersionOpen: (isPanelVersionOpen) => {
-    set(() => ({ isPanelVersionOpen }));
-  },
-}));