removed @blocknote/core from dependencies (#6580)

Fixes #6564  & #6561 

@FelixMalfait 

Removed @blocknote/core from dependencies



https://github.com/user-attachments/assets/ef6acfff-2945-4062-a35c-21dd108a4345

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

.yarnrc.yml

@@ -2,4 +2,4 @@ enableInlineHunks: true
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.4.0.cjs

package.json

@@ -6,7 +6,6 @@
     "@aws-sdk/client-lambda": "^3.614.0",
     "@aws-sdk/client-s3": "^3.363.0",
     "@aws-sdk/credential-providers": "^3.363.0",
-    "@blocknote/core": "^0.15.3",
     "@blocknote/mantine": "^0.15.3",
     "@blocknote/react": "^0.15.3",
     "@chakra-ui/accordion": "^2.3.0",
@@ -259,6 +258,7 @@
     "@types/graphql-upload": "^8.0.12",
     "@types/jest": "^29.5.11",
     "@types/js-cookie": "^3.0.3",
+    "@types/js-levenshtein": "^1.1.3",
     "@types/lodash.camelcase": "^4.3.7",
     "@types/lodash.compact": "^3.0.9",
     "@types/lodash.debounce": "^4.0.7",

packages/twenty-front/src/hooks/useIsMatchingLocation.ts

@@ -9,7 +9,7 @@ export const useIsMatchingLocation = () => {
   return useCallback(
     (path: string, basePath?: AppBasePath) => {
       const constructedPath = basePath
-        ? new URL(basePath + path, document.location.origin).pathname ?? ''
+        ? (new URL(basePath + path, document.location.origin).pathname ?? '')
         : path;
 
       return !!matchPath(constructedPath, location.pathname);

packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersChip.tsx

@@ -45,7 +45,7 @@ export const MessageThreadSubscribersChip = ({
       ? `+${numberOfMessageThreadSubscribers - MAX_NUMBER_OF_AVATARS}`
       : null;
 
-  const label = isPrivateThread ? privateLabel : moreAvatarsLabel ?? '';
+  const label = isPrivateThread ? privateLabel : (moreAvatarsLabel ?? '');
 
   return (
     <Chip

packages/twenty-front/src/modules/apollo/services/apollo.factory.ts

@@ -6,7 +6,6 @@ import {
   ServerError,
   ServerParseError,
 } from '@apollo/client';
-import { GraphQLErrors } from '@apollo/client/errors';
 import { setContext } from '@apollo/client/link/context';
 import { onError } from '@apollo/client/link/error';
 import { RetryLink } from '@apollo/client/link/retry';
@@ -17,13 +16,14 @@ import { AuthTokenPair } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 import { logDebug } from '~/utils/logDebug';
 
+import { GraphQLFormattedError } from 'graphql';
 import { ApolloManager } from '../types/apolloManager.interface';
 import { loggerLink } from '../utils';
 
 const logger = loggerLink(() => 'Twenty');
 
 export interface Options<TCacheShape> extends ApolloClientOptions<TCacheShape> {
-  onError?: (err: GraphQLErrors | undefined) => void;
+  onError?: (err: GraphQLFormattedError | undefined) => void;
   onNetworkError?: (err: Error | ServerParseError | ServerError) => void;
   onTokenPairChange?: (tokenPair: AuthTokenPair) => void;
   onUnauthenticatedError?: () => void;
@@ -80,9 +80,9 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
       const errorLink = onError(
         ({ graphQLErrors, networkError, forward, operation }) => {
           if (isDefined(graphQLErrors)) {
-            onErrorCb?.(graphQLErrors);
-
             for (const graphQLError of graphQLErrors) {
+              onErrorCb?.(graphQLError);
+
               if (graphQLError.message === 'Unauthorized') {
                 return fromPromise(
                   renewToken(uri, this.tokenPair)

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx

@@ -143,17 +143,16 @@ export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
                             : viewA.position - viewB.position,
                         )
                         .map((view) => (
-                          <div>
+                          <NavigationDrawerSubItem
-                            <NavigationDrawerSubItem
+                            label={view.name}
-                              label={view.name}
+                            to={`/objects/${objectMetadataItem.namePlural}?view=${view.id}`}
-                              to={`/objects/${objectMetadataItem.namePlural}?view=${view.id}`}
+                            active={
-                              active={
+                              currentPathWithSearch ===
-                                currentPathWithSearch ===
+                              `/objects/${objectMetadataItem.namePlural}?view=${view.id}`
-                                `/objects/${objectMetadataItem.namePlural}?view=${view.id}`
+                            }
-                              }
+                            Icon={getIcon(view.icon)}
-                              Icon={getIcon(view.icon)}
+                            key={view.id}
-                            />
+                          />
-                          </div>
                         ))}
                     </motion.div>
                   )}

packages/twenty-front/src/modules/object-metadata/utils/generateDefaultRecordChipData.ts

@@ -4,7 +4,7 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 export const generateDefaultRecordChipData = (record: ObjectRecord) => {
   const name = isFieldFullNameValue(record.name)
     ? record.name.firstName + ' ' + record.name.lastName
-    : record.name ?? '';
+    : (record.name ?? '');
 
   return {
     name,

packages/twenty-front/src/modules/object-record/cache/utils/getRecordsFromRecordConnection.ts

@@ -7,7 +7,7 @@ export const getRecordsFromRecordConnection = <T extends ObjectRecord>({
 }: {
   recordConnection: RecordGqlConnection;
 }): T[] => {
-  return recordConnection.edges.map((edge) =>
+  return recordConnection?.edges?.map((edge) =>
     getRecordFromRecordNode<T>({ recordNode: edge.node }),
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx

@@ -42,8 +42,8 @@ export const MultiSelectFieldInput = ({
   const [searchFilter, setSearchFilter] = useState('');
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const selectedOptions = fieldDefinition.metadata.options.filter(
+  const selectedOptions = fieldDefinition.metadata.options.filter((option) =>
-    (option) => fieldValues?.includes(option.value),
+    fieldValues?.includes(option.value),
   );
 
   const optionsInDropDown = fieldDefinition.metadata.options;

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoader.tsx

@@ -43,6 +43,7 @@ export const RecordIndexBoardDataLoader = ({
           boardFieldSelectValue={option.value}
           recordBoardId={recordBoardId}
           columnId={columnIds[index]}
+          key={index}
         />
       ))}
       {recordIndexKanbanFieldMetadataItem?.isNullable && (

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx

@@ -69,7 +69,7 @@ export const RecordDetailRelationSection = ({
   const relationRecords: ObjectRecord[] =
     fieldValue && isToOneObject
       ? [fieldValue as ObjectRecord]
-      : (fieldValue as ObjectRecord[]) ?? [];
+      : ((fieldValue as ObjectRecord[]) ?? []);
 
   const relationRecordIds = relationRecords.map(({ id }) => id);
 

packages/twenty-front/src/modules/spreadsheet-import/utils/findUnmatchedRequiredFields.ts

@@ -6,11 +6,10 @@ export const findUnmatchedRequiredFields = <T extends string>(
   columns: Columns<T>,
 ) =>
   fields
-    .filter(
+    .filter((field) =>
-      (field) =>
+      field.fieldValidationDefinitions?.some(
-        field.fieldValidationDefinitions?.some(
+        (validation) => validation.rule === 'required',
-          (validation) => validation.rule === 'required',
+      ),
-        ),
     )
     .filter(
       (field) =>

packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx

@@ -1,12 +1,13 @@
+import styled from '@emotion/styled';
 import { useEffect, useRef, useState } from 'react';
 import ReactPhoneNumberInput from 'react-phone-number-input';
-import styled from '@emotion/styled';
 import { TEXT_INPUT_STYLE } from 'twenty-ui';
 
 import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton';
 
+import { E164Number } from 'libphonenumber-js';
 import 'react-phone-number-input/style.css';
 
 const StyledContainer = styled.div`
@@ -89,9 +90,9 @@ export const PhoneInput = ({
   const wrapperRef = useRef<HTMLDivElement>(null);
   const copyRef = useRef<HTMLDivElement>(null);
 
-  const handleChange = (newValue: string) => {
+  const handleChange = (newValue: E164Number) => {
     setInternalValue(newValue);
-    onChange?.(newValue);
+    onChange?.(newValue as string);
   };
 
   useEffect(() => {

packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx

@@ -19,7 +19,12 @@ export type FloatingButtonProps = {
   to?: string;
 };
 
-const StyledButton = styled.button<
+const shouldForwardProp = (prop: string) =>
+  !['applyBlur', 'applyShadow', 'focus', 'position', 'size', 'to'].includes(
+    prop,
+  );
+
+const StyledButton = styled('button', { shouldForwardProp })<
   Pick<
     FloatingButtonProps,
     | 'size'

packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import React from 'react';
 import { IconComponent } from 'twenty-ui';
 
 export type FloatingIconButtonSize = 'small' | 'medium';
@@ -22,8 +22,17 @@ export type FloatingIconButtonProps = {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   isActive?: boolean;
 };
+const shouldForwardProp = (prop: string) =>
+  ![
+    'applyBlur',
+    'applyShadow',
+    'isActive',
+    'focus',
+    'position',
+    'size',
+  ].includes(prop);
 
-const StyledButton = styled.button<
+const StyledButton = styled('button', { shouldForwardProp })<
   Pick<
     FloatingIconButtonProps,
     'size' | 'position' | 'applyShadow' | 'applyBlur' | 'focus' | 'isActive'

packages/twenty-front/src/modules/ui/input/components/Toggle.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
 
 import { isDefined } from '~/utils/isDefined';
 
@@ -16,7 +16,7 @@ type ContainerProps = {
 const StyledContainer = styled.div<ContainerProps>`
   align-items: center;
   background-color: ${({ theme, isOn, color }) =>
-    isOn ? color ?? theme.color.blue : theme.background.quaternary};
+    isOn ? (color ?? theme.color.blue) : theme.background.quaternary};
   border-radius: 10px;
   cursor: pointer;
   display: flex;

packages/twenty-front/src/modules/ui/utilities/debug/components/TimingProfiler.tsx

@@ -1,5 +1,4 @@
-import { Profiler } from 'react';
+import { Profiler, ProfilerOnRenderCallback } from 'react';
-import { Interaction } from 'scheduler/tracing';
 
 import { logDebug } from '~/utils/logDebug';
 
@@ -9,14 +8,13 @@ type TimingProfilerProps = {
 };
 
 export const TimingProfiler = ({ id, children }: TimingProfilerProps) => {
-  const handleRender = (
+  const handleRender: ProfilerOnRenderCallback = (
     id: string,
     phase: 'mount' | 'update' | 'nested-update',
     actualDuration: number,
     baseDuration: number,
     startTime: number,
     commitTime: number,
-    interactions: Set<Interaction>,
   ) => {
     logDebug(
       'TimingProfiler',
@@ -28,7 +26,6 @@ export const TimingProfiler = ({ id, children }: TimingProfilerProps) => {
           baseDuration,
           startTime,
           commitTime,
-          interactions,
         },
         null,
         2,

packages/twenty-front/src/testing/graphqlMocks.ts

@@ -114,6 +114,16 @@ export const graphqlMocks = {
     graphql.query('CombinedFindManyRecords', () => {
       return HttpResponse.json({
         data: {
+          favorites: {
+            edges: [],
+            totalCount: 0,
+            pageInfo: {
+              hasNextPage: false,
+              hasPreviousPage: false,
+              startCursor: null,
+              endCursor: null,
+            },
+          },
           views: {
             edges: mockedViewsData.map((view) => ({
               node: {
@@ -150,16 +160,6 @@ export const graphqlMocks = {
             totalCount: mockedViewsData.length,
           },
         },
-        favorites: {
-          edges: [],
-          totalCount: 0,
-          pageInfo: {
-            hasNextPage: false,
-            hasPreviousPage: false,
-            startCursor: null,
-            endCursor: null,
-          },
-        },
       });
     }),
     graphql.query('FindManyCompanies', ({ variables }) => {