🐛(frontend) add default toolbar buttons

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

@@ -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
 

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

@@ -9,6 +9,35 @@ 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();
+    await expect(page.locator('button[data-test="bold"]')).toBeVisible();
+    await expect(page.locator('button[data-test="italic"]')).toBeVisible();
+    await expect(page.locator('button[data-test="underline"]')).toBeVisible();
+    await expect(page.locator('button[data-test="strike"]')).toBeVisible();
+    await expect(
+      page.locator('button[data-test="alignTextLeft"]'),
+    ).toBeVisible();
+    await expect(
+      page.locator('button[data-test="alignTextCenter"]'),
+    ).toBeVisible();
+    await expect(
+      page.locator('button[data-test="alignTextRight"]'),
+    ).toBeVisible();
+    await expect(page.locator('button[data-test="colors"]')).toBeVisible();
+    await expect(page.locator('button[data-test="unnestBlock"]')).toBeVisible();
+    await expect(page.locator('button[data-test="createLink"]')).toBeVisible();
+  });
+
   test('checks the Doc is connected to the provider server', async ({
     page,
     browserName,

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>
       )}
     />