From 85044fd6658a9ed99e47f0a5972a674cc478a10a Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Tue, 3 Sep 2024 15:46:07 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20summary=20feature?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add the summary feature to the doc. We will be able to access part of the doc quickly from the summary. --- CHANGELOG.md | 1 + .../__tests__/app-impress/doc-summary.spec.ts | 64 +++++++++++++ .../apps/impress/src/components/BoxButton.tsx | 1 + .../docs/doc-editor/components/DocEditor.tsx | 7 ++ .../docs/doc-header/components/DocToolBox.tsx | 15 +++ .../docs/doc-summary/components/Summary.tsx | 96 +++++++++++++++++++ .../docs/doc-summary/components/index.ts | 1 + .../src/features/docs/doc-summary/index.ts | 2 + .../features/docs/doc-summary/stores/index.ts | 1 + .../doc-summary/stores/useDocSummaryStore.tsx | 13 +++ 10 files changed, 201 insertions(+) create mode 100644 src/frontend/apps/e2e/__tests__/app-impress/doc-summary.spec.ts create mode 100644 src/frontend/apps/impress/src/features/docs/doc-summary/components/Summary.tsx create mode 100644 src/frontend/apps/impress/src/features/docs/doc-summary/components/index.ts create mode 100644 src/frontend/apps/impress/src/features/docs/doc-summary/index.ts create mode 100644 src/frontend/apps/impress/src/features/docs/doc-summary/stores/index.ts create mode 100644 src/frontend/apps/impress/src/features/docs/doc-summary/stores/useDocSummaryStore.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 08587812..d943ec3b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to - ✨Add image attachments with access control - ✨(frontend) Upload image to a document #211 - ✨(frontend) Versions #217 +- ✨(frontend) Summary #223 ## Changed diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-summary.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-summary.spec.ts new file mode 100644 index 00000000..18770e99 --- /dev/null +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-summary.spec.ts @@ -0,0 +1,64 @@ +import { expect, test } from '@playwright/test'; + +import { createDoc } from './common'; + +test.beforeEach(async ({ page }) => { + await page.goto('/'); +}); + +test.describe('Doc Summary', () => { + test('it checks the doc summary', async ({ page, browserName }) => { + const [randomDoc] = await createDoc(page, 'doc-summary', browserName, 1); + + await expect(page.locator('h2').getByText(randomDoc)).toBeVisible(); + + await page.getByLabel('Open the document options').click(); + await page + .getByRole('button', { + name: 'Summary', + }) + .click(); + + const panel = page.getByLabel('Document panel'); + 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'); + + await page.locator('.bn-block-outer').last().click(); + + // Create space to fill the viewport + for (let i = 0; i < 6; i++) { + 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'); + + await page.locator('.bn-block-outer').last().click(); + + // Create space to fill the viewport + for (let i = 0; i < 4; i++) { + await page.keyboard.press('Enter'); + } + + await editor.locator('.bn-block-outer').last().fill('/'); + 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(); + + await panel.getByText('Another World').click(); + + await expect(editor.getByText('Hello World')).not.toBeInViewport(); + + await panel.getByText('Back to top').click(); + await expect(editor.getByText('Hello World')).toBeInViewport(); + + await panel.getByText('Go to bottom').click(); + await expect(editor.getByText('Hello World')).not.toBeInViewport(); + }); +}); diff --git a/src/frontend/apps/impress/src/components/BoxButton.tsx b/src/frontend/apps/impress/src/components/BoxButton.tsx index 893af9d9..c64143f8 100644 --- a/src/frontend/apps/impress/src/components/BoxButton.tsx +++ b/src/frontend/apps/impress/src/components/BoxButton.tsx @@ -29,6 +29,7 @@ const BoxButton = forwardRef( border: none; outline: none; transition: all 0.2s ease-in-out; + font-family: inherit; ${$css || ''} `} {...props} diff --git 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 index 6ddcf657..883702c8 100644 --- 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,6 +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 { VersionList, Versions, @@ -27,6 +28,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => { query: { versionId }, } = useRouter(); const { isPanelVersionOpen, setIsPanelVersionOpen } = useDocVersionStore(); + const { isPanelSummaryOpen, setIsPanelSummaryOpen } = useDocSummaryStore(); const { t } = useTranslation(); @@ -70,6 +72,11 @@ export const DocEditor = ({ doc }: DocEditorProps) => { )} + {isPanelSummaryOpen && ( + + + + )} ); diff --git 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 index cb33b548..9b9ab47f 100644 --- 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 @@ -9,6 +9,7 @@ import { ModalShare, ModalUpdateDoc, } from '@/features/docs/doc-management'; +import { useDocSummaryStore } from '@/features/docs/doc-summary'; import { useDocVersionStore } from '@/features/docs/doc-versioning'; import { ModalPDF } from './ModalExport'; @@ -25,6 +26,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { const [isModalPDFOpen, setIsModalPDFOpen] = useState(false); const [isDropOpen, setIsDropOpen] = useState(false); const { setIsPanelVersionOpen } = useDocVersionStore(); + const { setIsPanelSummaryOpen } = useDocSummaryStore(); return ( { )} +