Update blocknote (#6349)

Updating blocknote providing bugfixes & new block types --------- Co-authored-by: Marie Stoppa <[email protected]>
twentyhq · Jul 22, 2024 · 4545ba2 · 4545ba2
1 parent d212aed
commit 4545ba2
Show file tree

Hide file tree

Showing 8 changed files with 438 additions and 356 deletions.
diff --git a/package.json b/package.json
@@ -6,8 +6,9 @@
     "@aws-sdk/client-lambda": "^3.614.0",
     "@aws-sdk/client-s3": "^3.363.0",
     "@aws-sdk/credential-providers": "^3.363.0",
-    "@blocknote/core": "^0.12.1",
-    "@blocknote/react": "^0.12.2",
+    "@blocknote/core": "^0.15.3",
+    "@blocknote/mantine": "^0.15.3",
+    "@blocknote/react": "^0.15.3",
     "@chakra-ui/accordion": "^2.3.0",
     "@chakra-ui/system": "^2.6.0",
     "@codesandbox/sandpack-react": "^2.13.5",

diff --git a/packages/twenty-front/src/modules/activities/blocks/FileBlock.tsx b/packages/twenty-front/src/modules/activities/blocks/FileBlock.tsx
@@ -1,7 +1,7 @@
-import { ChangeEvent, useRef } from 'react';
 import { createReactBlockSpec } from '@blocknote/react';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
+import { ChangeEvent, useRef } from 'react';
 
 import { Button } from '@/ui/input/button/components/Button';
 import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
@@ -65,6 +65,10 @@ export const FileBlock = createReactBlockSpec(
         }
         const fileUrl = await editor.uploadFile?.(file);
 
+        if (!isNonEmptyString(fileUrl)) {
+          return '';
+        }
+
         editor.updateBlock(block.id, {
           props: {
             ...block.props,

diff --git a/packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx b/packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx
@@ -5,11 +5,15 @@ import {
   IconH1,
   IconH2,
   IconH3,
+  IconHeadphones,
   IconList,
+  IconListCheck,
   IconListNumbers,
+  IconMoodSmile,
   IconPhoto,
   IconPilcrow,
   IconTable,
+  IconVideo,
 } from 'twenty-ui';
 
 import { SuggestionItem } from '@/ui/input/editor/components/CustomSlashMenu';
@@ -22,9 +26,13 @@ const Icons: Record<string, IconComponent> = {
   'Heading 3': IconH3,
   'Numbered List': IconListNumbers,
   'Bullet List': IconList,
+  'Check List': IconListCheck,
   Paragraph: IconPilcrow,
   Table: IconTable,
   Image: IconPhoto,
+  Video: IconVideo,
+  Audio: IconHeadphones,
+  Emoji: IconMoodSmile,
 };
 
 export const getSlashMenu = (editor: typeof blockSchema.BlockNoteEditor) => {

diff --git a/packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx b/packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx
@@ -1,7 +1,7 @@
-import { ClipboardEvent, useCallback, useMemo } from 'react';
 import { useApolloClient } from '@apollo/client';
 import { useCreateBlockNote } from '@blocknote/react';
 import { isArray, isNonEmptyString } from '@sniptt/guards';
+import { ClipboardEvent, useCallback, useMemo } from 'react';
 import { useRecoilCallback, useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { useDebouncedCallback } from 'use-debounce';
@@ -30,7 +30,8 @@ import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 import { getFileType } from '../files/utils/getFileType';
 
-import '@blocknote/react/style.css';
+import '@blocknote/core/fonts/inter.css';
+import '@blocknote/mantine/style.css';
 
 type ActivityBodyEditorProps = {
   activityId: string;

diff --git a/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx b/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx
@@ -1,5 +1,5 @@
-import { useRef } from 'react';
 import styled from '@emotion/styled';
+import { useRef } from 'react';
 
 import { ActivityBodyEditor } from '@/activities/components/ActivityBodyEditor';
 import { ActivityBodyEffect } from '@/activities/components/ActivityBodyEffect';
@@ -11,8 +11,6 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { ActivityTitle } from './ActivityTitle';
 
-import '@blocknote/core/style.css';
-
 const StyledContainer = styled.div`
   box-sizing: border-box;
   display: flex;

diff --git a/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx b/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx
@@ -1,8 +1,9 @@
-import { ClipboardEvent } from 'react';
 import { filterSuggestionItems } from '@blocknote/core';
-import { BlockNoteView, SuggestionMenuController } from '@blocknote/react';
+import { BlockNoteView } from '@blocknote/mantine';
+import { SuggestionMenuController } from '@blocknote/react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { ClipboardEvent } from 'react';
 
 import { blockSchema } from '@/activities/blocks/schema';
 import { getSlashMenu } from '@/activities/blocks/slashMenu';
@@ -40,6 +41,10 @@ const StyledEditor = styled.div`
     width: 20px;
     height: 20px;
   }
+  & .bn-block-content[data-content-type='checkListItem'] > div > div {
+    display: flex;
+    align-items: center;
+  }
 `;
 
 export const BlockEditor = ({

diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
@@ -108,6 +108,7 @@ export {
   IconLink,
   IconLinkOff,
   IconList,
+  IconListCheck,
   IconListNumbers,
   IconLock,
   IconLockOpen,
@@ -163,4 +164,5 @@ export {
   IconWand,
   IconWorld,
   IconX,
+  IconMoodSmile,
 } from '@tabler/icons-react';