♻️(frontent) improve summary feature

- Change Summary to Table of content - No dash before the title - Change font-size depend the type of heading - If more than 2 headings the panel is open by default - improve sticky - highligth the title where you are in the page
2024-09-17 11:58:03 +02:00
parent 748ebc8f26
commit ed39c01608
7 changed files with 239 additions and 74 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to
 - ♻️ Allow null titles on documents for easier creation #234
 - 🛂(backend) stop to list public doc to everyone #234
 - 🚚(frontend) change visibility in share modal #235
+- ⚡️(frontend) Improve summary #244

 ## Fixed

--- a/src/frontend/apps/e2e/tests/app-impress/doc-summary.spec.ts
+++ b/src/frontend/apps/e2e/tests/app-impress/doc-summary.spec.ts
@@ -15,7 +15,7 @@ test.describe('Doc Summary', () => {
    await page.getByLabel('Open the document options').click();
    await page
      .getByRole('button', {
-        name: 'Summary',
+        name: 'Table of content',
      })
      .click();

@@ -29,7 +29,7 @@ test.describe('Doc Summary', () => {
    await page.locator('.bn-block-outer').last().click();

    // Create space to fill the viewport
-    for (let i = 0; i < 6; i++) {
+    for (let i = 0; i < 5; i++) {
      await page.keyboard.press('Enter');
    }

@@ -40,7 +40,7 @@ test.describe('Doc Summary', () => {
    await page.locator('.bn-block-outer').last().click();

    // Create space to fill the viewport
-    for (let i = 0; i < 4; i++) {
+    for (let i = 0; i < 5; i++) {
      await page.keyboard.press('Enter');
    }

@@ -48,17 +48,41 @@ test.describe('Doc Summary', () => {
    await page.getByText('Heading 3').click();
    await page.keyboard.type('Another World');

-    await expect(panel.getByText('Hello World')).toBeVisible();
-    await expect(panel.getByText('Super World')).toBeVisible();
+    const hello = panel.getByText('Hello World');
+    const superW = panel.getByText('Super World');
+    const another = panel.getByText('Another World');

-    await panel.getByText('Another World').click();
+    await expect(hello).toBeVisible();
+    await expect(hello).toHaveCSS('font-size', '19.2px');
+    await expect(hello).toHaveAttribute('aria-selected', 'true');
+
+    await expect(superW).toBeVisible();
+    await expect(superW).toHaveCSS('font-size', '16px');
+    await expect(superW).toHaveAttribute('aria-selected', 'false');
+
+    await expect(another).toBeVisible();
+    await expect(another).toHaveCSS('font-size', '12.8px');
+    await expect(another).toHaveAttribute('aria-selected', 'false');
+
+    await hello.click();
+
+    await expect(editor.getByText('Hello World')).toBeInViewport();
+    await expect(hello).toHaveAttribute('aria-selected', 'true');
+    await expect(superW).toHaveAttribute('aria-selected', 'false');
+
+    await another.click();

    await expect(editor.getByText('Hello World')).not.toBeInViewport();
+    await expect(hello).toHaveAttribute('aria-selected', 'false');
+    await expect(superW).toHaveAttribute('aria-selected', 'true');

    await panel.getByText('Back to top').click();
    await expect(editor.getByText('Hello World')).toBeInViewport();
+    await expect(hello).toHaveAttribute('aria-selected', 'true');
+    await expect(superW).toHaveAttribute('aria-selected', 'false');

    await panel.getByText('Go to bottom').click();
    await expect(editor.getByText('Hello World')).not.toBeInViewport();
+    await expect(superW).toHaveAttribute('aria-selected', 'true');
  });
 });
--- a/src/frontend/apps/impress/src/components/Panel.tsx
+++ b/src/frontend/apps/impress/src/components/Panel.tsx
@@ -5,7 +5,7 @@ import { Box, Card, IconBG, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';

 interface PanelProps {
-  title: string;
+  title?: string;
  setIsPanelOpen: (isOpen: boolean) => void;
 }

@@ -53,11 +53,14 @@ export const Panel = ({
      {...closedOverridingStyles}
    >
      <Box
-        $overflow="hidden"
+        $overflow="inherit"
+        $position="sticky"
        $css={`
+          top: 0;
          opacity: ${isOpen ? '1' : '0'};
          transition: ${transition};
        `}
+        $maxHeight="100%"
      >
        <Box
          $padding={{ all: 'small' }}
@@ -90,9 +93,11 @@ export const Panel = ({
            }}
            $radius="2px"
          />
-          <Text $weight="bold" $size="l" $theme="primary">
-            {title}
-          </Text>
+          {title && (
+            <Text $weight="bold" $size="l" $theme="primary">
+              {title}
+            </Text>
+          )}
        </Box>
        {children}
      </Box>
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
@@ -9,7 +9,7 @@ import { Panel } from '@/components/Panel';
 import { useCunninghamTheme } from '@/cunningham';
 import { DocHeader } from '@/features/docs/doc-header';
 import { Doc } from '@/features/docs/doc-management';
-import { Summary, useDocSummaryStore } from '@/features/docs/doc-summary';
+import { Summary } from '@/features/docs/doc-summary';
 import {
  VersionList,
  Versions,
@@ -28,8 +28,6 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
    query: { versionId },
  } = useRouter();
  const { isPanelVersionOpen, setIsPanelVersionOpen } = useDocVersionStore();
-  const { isPanelSummaryOpen, setIsPanelSummaryOpen } = useDocSummaryStore();
-
  const { t } = useTranslation();

  const isVersion = versionId && typeof versionId === 'string';
@@ -72,11 +70,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
            <VersionList doc={doc} />
          </Panel>
        )}
-        {isPanelSummaryOpen && (
-          <Panel title={t('SUMMARY')} setIsPanelOpen={setIsPanelSummaryOpen}>
-            <Summary doc={doc} />
-          </Panel>
-        )}
+        <Summary doc={doc} />
      </Box>
    </>
  );
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -91,7 +91,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
            icon={<span className="material-icons">summarize</span>}
            size="small"
          >
-            <Text $theme="primary">{t('Summary')}</Text>
+            <Text $theme="primary">{t('Table of content')}</Text>
          </Button>
          <Button
            onClick={() => {
--- a/src/frontend/apps/impress/src/features/docs/doc-summary/components/Heading.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-summary/components/Heading.tsx
@@ -0,0 +1,66 @@
+import { BlockNoteEditor } from '@blocknote/core';
+import { useState } from 'react';
+
+import { BoxButton, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+const sizeMap: { [key: number]: string } = {
+  1: '1.2rem',
+  2: '1rem',
+  3: '0.8rem',
+};
+
+export type HeadingsHighlight = {
+  headingId: string;
+  isVisible: boolean;
+}[];
+
+interface HeadingProps {
+  editor: BlockNoteEditor;
+  level: number;
+  text: string;
+  headingId: string;
+  isHighlight: boolean;
+}
+
+export const Heading = ({
+  headingId,
+  editor,
+  isHighlight,
+  level,
+  text,
+}: HeadingProps) => {
+  const [isHover, setIsHover] = useState(isHighlight);
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <BoxButton
+      key={headingId}
+      onMouseOver={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}
+      onClick={() => {
+        editor.focus();
+        editor.setTextCursorPosition(headingId, 'end');
+        document.querySelector(`[data-id="${headingId}"]`)?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+        });
+      }}
+    >
+      <Text
+        $theme="primary"
+        $padding={{ vertical: 'xtiny', left: 'tiny' }}
+        $size={sizeMap[level]}
+        $hasTransition
+        $css={
+          isHover || isHighlight
+            ? `box-shadow: -2px 0px 0px ${colorsTokens()[isHighlight ? 'primary-500' : 'primary-400']};`
+            : ''
+        }
+        aria-selected={isHighlight}
+      >
+        {text}
+      </Text>
+    </BoxButton>
+  );
+};
--- a/src/frontend/apps/impress/src/features/docs/doc-summary/components/Summary.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-summary/components/Summary.tsx
@@ -2,11 +2,24 @@ import React, { useCallback, 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 { useDocStore } from '../../doc-editor';
-import { Doc } from '../../doc-management';
 import { useDocSummaryStore } from '../stores';

+import { Heading } from './Heading';
+
+type HeadingBlock = {
+  id: string;
+  type: string;
+  text: string;
+  content: HeadingBlock[];
+  props: {
+    level: number;
+  };
+};
+
 interface SummaryProps {
  doc: Doc;
 }
@@ -17,88 +30,150 @@ export const Summary = ({ doc }: SummaryProps) => {

  const editor = docsStore?.[doc.id]?.editor;
  const headingFiltering = useCallback(
-    () => editor?.document.filter((block) => block.type === 'heading'),
+    () =>
+      editor?.document.filter(
+        (block) => block.type === 'heading',
+      ) as unknown as HeadingBlock[],
    [editor?.document],
  );

-  const [headings, setHeadings] = useState(headingFiltering());
-  const { setIsPanelSummaryOpen } = useDocSummaryStore();
+  const [headings, setHeadings] = useState<HeadingBlock[]>();
+  const { setIsPanelSummaryOpen, isPanelSummaryOpen } = useDocSummaryStore();
+  const [hasBeenClose, setHasBeenClose] = useState(false);
+  const setClosePanel = () => {
+    setHasBeenClose(true);
+    setIsPanelSummaryOpen(false);
+  };

+  const [headingIdHighlight, setHeadingIdHighlight] = useState<string>();
+
+  // Open the panel if there are more than 1 heading
+  useEffect(() => {
+    if (headings?.length && headings.length > 1 && !hasBeenClose) {
+      setIsPanelSummaryOpen(true);
+    }
+  }, [setIsPanelSummaryOpen, headings, hasBeenClose]);
+
+  // Close the panel unmount
  useEffect(() => {
    return () => {
      setIsPanelSummaryOpen(false);
    };
  }, [setIsPanelSummaryOpen]);

+  // To highlight the first heading in the viewport
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!headings) {
+        return;
+      }
+
+      for (const heading of headings) {
+        const elHeading = document.body.querySelector(
+          `.bn-block-outer[data-id="${heading.id}"]`,
+        );
+
+        if (!elHeading) {
+          return;
+        }
+
+        const rect = elHeading.getBoundingClientRect();
+        const isVisible =
+          rect.top + rect.height >= 1 &&
+          rect.bottom <=
+            (window.innerHeight || document.documentElement.clientHeight);
+
+        if (isVisible) {
+          setHeadingIdHighlight(heading.id);
+          break;
+        }
+      }
+    };
+
+    window.addEventListener('scroll', () => {
+      setTimeout(() => {
+        handleScroll();
+      }, 300);
+    });
+
+    handleScroll();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [headings, setHeadingIdHighlight]);
+
  if (!editor) {
    return null;
  }

-  editor.onEditorContentChange(() => {
+  // Update the headings when the editor content changes
+  editor?.onEditorContentChange(() => {
    setHeadings(headingFiltering());
  });

+  if (!isPanelSummaryOpen) {
+    return null;
+  }
+
  return (
-    <Box $overflow="auto" $padding="small">
-      {headings?.map((heading) => (
+    <Panel setIsPanelOpen={setClosePanel}>
+      <Box $padding="small" $maxHeight="95%">
+        <Box $overflow="auto">
+          {headings?.map((heading) => {
+            const content = heading.content?.[0];
+            const text = content?.type === 'text' ? content.text : '';
+
+            return (
+              <Heading
+                editor={editor}
+                headingId={heading.id}
+                level={heading.props.level}
+                text={text}
+                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
-          key={heading.id}
          onClick={() => {
            editor.focus();
-            editor?.setTextCursorPosition(heading.id, 'end');
            document
-              .querySelector(`[data-id="${heading.id}"]`)
+              .querySelector(
+                `.bn-editor > .bn-block-group > .bn-block-outer:last-child`,
+              )
              ?.scrollIntoView({
                behavior: 'smooth',
                block: 'start',
              });
          }}
-          style={{ textAlign: 'left' }}
        >
          <Text $theme="primary" $padding={{ vertical: 'xtiny' }}>
-            {heading.content?.[0]?.type === 'text' && heading.content?.[0]?.text
-              ? `- ${heading.content[0].text}`
-              : ''}
+            {t('Go to bottom')}
          </Text>
        </BoxButton>
-      ))}
-      <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('Go to bottom')}
-        </Text>
-      </BoxButton>
-    </Box>
+      </Box>
+    </Panel>
  );
 };