From f2c389e2b333741b4c11c4953f81be06f9801a9d Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 21 Oct 2024 09:35:43 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20add=20default=20toolba?=
 =?UTF-8?q?r=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We are overriding the default toolbar to add the
markdown and ai buttons. By doing that we were
missing some default buttons that are useful depend
on the block type. This commit adds the default
buttons to the toolbar.
---
 CHANGELOG.md                                  |  4 ++
 .../__tests__/app-impress/doc-editor.spec.ts  | 37 ++++++++++++++++++
 .../components/BlockNoteToolbar.tsx           | 39 ++-----------------
 3 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 998e91655..4eac5adc2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,10 @@ and this project adheres to
 
 - 📝Contributing.md #352
 
+## Fixed
+
+- 🐛(frontend) add default toolbar buttons #355
+
 
 ## [1.6.0] - 2024-10-17
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
index 4d8f77fab..0d7c2de62 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
@@ -9,6 +9,43 @@ test.beforeEach(async ({ page }) => {
 });
 
 test.describe('Doc Editor', () => {
+  test('it checks default toolbar buttons are displayed', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'doc-toolbar', browserName, 1);
+
+    const editor = page.locator('.ProseMirror');
+    await editor.click();
+    await editor.fill('test content');
+
+    await editor.getByText('test content').dblclick();
+
+    const toolbar = page.locator('.bn-formatting-toolbar');
+    await expect(toolbar.locator('button[data-test="bold"]')).toBeVisible();
+    await expect(toolbar.locator('button[data-test="italic"]')).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="underline"]'),
+    ).toBeVisible();
+    await expect(toolbar.locator('button[data-test="strike"]')).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="alignTextLeft"]'),
+    ).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="alignTextCenter"]'),
+    ).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="alignTextRight"]'),
+    ).toBeVisible();
+    await expect(toolbar.locator('button[data-test="colors"]')).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="unnestBlock"]'),
+    ).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="createLink"]'),
+    ).toBeVisible();
+  });
+
   test('checks the Doc is connected to the provider server', async ({
     page,
     browserName,
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx
index 3d6b77e10..0f1e20861 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolbar.tsx
@@ -1,14 +1,8 @@
 import '@blocknote/mantine/style.css';
 import {
-  BasicTextStyleButton,
-  BlockTypeSelect,
-  ColorStyleButton,
-  CreateLinkButton,
   FormattingToolbar,
   FormattingToolbarController,
-  NestBlockButton,
-  TextAlignButton,
-  UnnestBlockButton,
+  getFormattingToolbarItems,
 } from '@blocknote/react';
 import React from 'react';
 
@@ -18,42 +12,15 @@ import { MarkdownButton } from './MarkdownButton';
 export const BlockNoteToolbar = () => {
   return (
     <FormattingToolbarController
-      formattingToolbar={() => (
+      formattingToolbar={({ blockTypeSelectItems }) => (
         <FormattingToolbar>
-          <BlockTypeSelect key="blockTypeSelect" />
+          {getFormattingToolbarItems(blockTypeSelectItems)}
 
           {/* Extra button to do some AI powered actions */}
           <AIGroupButton key="AIButton" />
 
           {/* Extra button to convert from markdown to json */}
           <MarkdownButton key="customButton" />
-
-          <BasicTextStyleButton basicTextStyle="bold" key="boldStyleButton" />
-          <BasicTextStyleButton
-            basicTextStyle="italic"
-            key="italicStyleButton"
-          />
-          <BasicTextStyleButton
-            basicTextStyle="underline"
-            key="underlineStyleButton"
-          />
-          <BasicTextStyleButton
-            basicTextStyle="strike"
-            key="strikeStyleButton"
-          />
-          {/* Extra button to toggle code styles */}
-          <BasicTextStyleButton key="codeStyleButton" basicTextStyle="code" />
-
-          <TextAlignButton textAlignment="left" key="textAlignLeftButton" />
-          <TextAlignButton textAlignment="center" key="textAlignCenterButton" />
-          <TextAlignButton textAlignment="right" key="textAlignRightButton" />
-
-          <ColorStyleButton key="colorStyleButton" />
-
-          <NestBlockButton key="nestBlockButton" />
-          <UnnestBlockButton key="unnestBlockButton" />
-
-          <CreateLinkButton key="createLinkButton" />
         </FormattingToolbar>
       )}
     />