Save Markdown and BlockNote in RICH_TEXT fields (#7613)

package.json

@@ -8,6 +8,7 @@
     "@aws-sdk/credential-providers": "^3.363.0",
     "@blocknote/mantine": "^0.22.0",
     "@blocknote/react": "^0.22.0",
+    "@blocknote/server-util": "0.17.1",
     "@codesandbox/sandpack-react": "^2.13.5",
     "@dagrejs/dagre": "^1.1.2",
     "@emotion/react": "^11.11.1",

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -447,6 +447,7 @@ export enum FieldMetadataType {
   Rating = 'RATING',
   RawJson = 'RAW_JSON',
   Relation = 'RELATION',
+  RichTextDeprecated = 'RICH_TEXT_DEPRECATED',
   RichText = 'RICH_TEXT',
   Select = 'SELECT',
   Text = 'TEXT',

packages/twenty-front/src/generated/graphql.tsx

@@ -380,6 +380,7 @@ export enum FieldMetadataType {
   RawJson = 'RAW_JSON',
   Relation = 'RELATION',
   RichText = 'RICH_TEXT',
+  RichTextDeprecated = 'RICH_TEXT_DEPRECATED',
   Select = 'SELECT',
   Text = 'TEXT',
   TsVector = 'TS_VECTOR',

packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx

@@ -72,7 +72,10 @@ export const ActivityRichTextEditor = ({
       upsertActivity({
         activity,
         input: {
-          body: newBody,
+          body: {
+            blocknote: newBody,
+            markdown: null,
+          },
         },
       });
     }
@@ -165,10 +168,10 @@ export const ActivityRichTextEditor = ({
   const initialBody = useMemo(() => {
     if (
       isDefined(activity) &&
-      isNonEmptyString(activity.body) &&
-      activity?.body !== '{}'
+      isNonEmptyString(activity.body.blocknote) &&
+      activity?.body.blocknote !== '{}'
     ) {
-      return JSON.parse(activity.body);
+      return JSON.parse(activity.body.blocknote);
     }
   }, [activity]);
 

packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityTargetObjectRecords.test.tsx

@@ -94,7 +94,10 @@ const task = {
   createdAt: '2023-04-26T10:12:42.33625+00:00',
   updatedAt: '2023-04-26T10:23:42.33625+00:00',
   title: 'Task title',
-  body: null,
+  body: {
+    blocknote: null,
+    markdown: null,
+  },
   assigneeId: null,
   status: null,
   dueAt: '2023-04-26T10:12:42.33625+00:00',

packages/twenty-front/src/modules/activities/notes/components/NoteCard.tsx

@@ -71,7 +71,7 @@ export const NoteCard = ({
   const openActivityRightDrawer = useOpenActivityRightDrawer({
     objectNameSingular: CoreObjectNameSingular.Note,
   });
-  const body = getActivityPreview(note.body);
+  const body = getActivityPreview(note.body.blocknote);
 
   const { FieldContextProvider: NoteTargetsContextProvider } = useFieldContext({
     objectNameSingular: CoreObjectNameSingular.Note,

packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx

@@ -82,7 +82,7 @@ export const TaskRow = ({ task }: { task: Task }) => {
     objectNameSingular: CoreObjectNameSingular.Task,
   });
 
-  const body = getActivitySummary(task.body);
+  const body = getActivitySummary(task.body.blocknote);
   const { completeTask } = useCompleteTask(task);
 
   const { FieldContextProvider: TaskTargetsContextProvider } = useFieldContext({

packages/twenty-front/src/modules/activities/tasks/hooks/__tests__/useCompleteTask.test.tsx

@@ -10,7 +10,10 @@ const task: Task = {
   id: '123',
   status: 'DONE',
   title: 'Test',
-  body: 'Test',
+  body: {
+    blocknote: 'Test',
+    markdown: 'Test',
+  },
   dueAt: '2024-03-15T07:33:14.212Z',
   createdAt: '2024-03-15T07:33:14.212Z',
   updatedAt: '2024-03-15T07:33:14.212Z',

packages/twenty-front/src/modules/activities/types/Activity.ts

@@ -3,5 +3,8 @@ export type Activity = {
   createdAt: string;
   updatedAt: string;
   title: string;
-  body: string | null;
+  body: {
+    blocknote: string | null;
+    markdown: string | null;
+  };
 };

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCommands.tsx

@@ -146,7 +146,11 @@ export const useCommandMenuCommands = () => {
     filter: deferredCommandMenuSearch
       ? makeOrFilterVariables([
           { title: { ilike: `%${deferredCommandMenuSearch}%` } },
-          { body: { ilike: `%${deferredCommandMenuSearch}%` } },
+          {
+            body: {
+              blocknote: { ilike: `%${deferredCommandMenuSearch}%` },
+            },
+          },
         ])
       : undefined,
     limit: 3,
@@ -158,7 +162,11 @@ export const useCommandMenuCommands = () => {
     filter: deferredCommandMenuSearch
       ? makeOrFilterVariables([
           { title: { ilike: `%${deferredCommandMenuSearch}%` } },
-          { body: { ilike: `%${deferredCommandMenuSearch}%` } },
+          {
+            body: {
+              blocknote: { ilike: `%${deferredCommandMenuSearch}%` },
+            },
+          },
         ])
       : undefined,
     limit: 3,

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

@@ -35,7 +35,7 @@ export const mapFieldMetadataToGraphQLQuery = ({
     FieldMetadataType.MultiSelect,
     FieldMetadataType.Position,
     FieldMetadataType.RawJson,
-    FieldMetadataType.RichText,
+    FieldMetadataType.RichTextDeprecated,
     FieldMetadataType.Array,
   ].includes(fieldType);
 
@@ -162,5 +162,13 @@ ${mapObjectMetadataToGraphQLQuery({
     }`;
   }
 
+  if (fieldType === FieldMetadataType.RichText) {
+    return `${field.name}
+{
+  blocknote
+  markdown
+}`;
+  }
+
   return '';
 };

packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlOperationFilter.ts

@@ -129,6 +129,15 @@ export type RawJsonFilter = {
   is?: IsFilter;
 };
 
+export type RichTextLeafFilter = {
+  ilike?: string;
+};
+
+export type RichTextFilter = {
+  blocknote?: RichTextLeafFilter;
+  markdown?: RichTextLeafFilter;
+};
+
 export type LeafFilter =
   | UUIDFilter
   | StringFilter
@@ -144,6 +153,7 @@ export type LeafFilter =
   | PhonesFilter
   | ArrayFilter
   | RawJsonFilter
+  | RichTextFilter
   | undefined;
 
 export type AndObjectRecordFilter = {

packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx

@@ -8,6 +8,7 @@ import { LinksFieldDisplay } from '@/object-record/record-field/meta-types/displ
 import { PhonesFieldDisplay } from '@/object-record/record-field/meta-types/display/components/PhonesFieldDisplay';
 import { RatingFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RatingFieldDisplay';
 import { RelationFromManyFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay';
+import { RichTextDeprecatedFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RichTextDeprecatedFieldDisplay';
 import { RichTextFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RichTextFieldDisplay';
 import { isFieldIdentifierDisplay } from '@/object-record/record-field/meta-types/display/utils/isFieldIdentifierDisplay';
 import { isFieldActor } from '@/object-record/record-field/types/guards/isFieldActor';
@@ -20,6 +21,7 @@ import { isFieldRating } from '@/object-record/record-field/types/guards/isField
 import { isFieldRelationFromManyObjects } from '@/object-record/record-field/types/guards/isFieldRelationFromManyObjects';
 import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject';
 import { isFieldRichText } from '@/object-record/record-field/types/guards/isFieldRichText';
+import { isFieldRichTextDeprecated } from '@/object-record/record-field/types/guards/isFieldRichTextDeprecated';
 import { FieldContext } from '../contexts/FieldContext';
 import { AddressFieldDisplay } from '../meta-types/display/components/AddressFieldDisplay';
 import { ChipFieldDisplay } from '../meta-types/display/components/ChipFieldDisplay';
@@ -88,6 +90,8 @@ export const FieldDisplay = () => {
     <BooleanFieldDisplay />
   ) : isFieldRating(fieldDefinition) ? (
     <RatingFieldDisplay />
+  ) : isFieldRichTextDeprecated(fieldDefinition) ? (
+    <RichTextDeprecatedFieldDisplay />
   ) : isFieldRichText(fieldDefinition) ? (
     <RichTextFieldDisplay />
   ) : isFieldActor(fieldDefinition) ? (

packages/twenty-front/src/modules/object-record/record-field/hooks/usePersistField.ts

@@ -28,8 +28,8 @@ import { RecordForSelect } from '@/object-record/relation-picker/types/RecordFor
 
 import { isFieldArray } from '@/object-record/record-field/types/guards/isFieldArray';
 import { isFieldArrayValue } from '@/object-record/record-field/types/guards/isFieldArrayValue';
-import { isFieldRichText } from '@/object-record/record-field/types/guards/isFieldRichText';
-import { isFieldRichTextValue } from '@/object-record/record-field/types/guards/isFieldRichTextValue';
+import { isFieldRichTextDeprecated } from '@/object-record/record-field/types/guards/isFieldRichTextDeprecated';
+import { isFieldRichTextDeprecatedValue } from '@/object-record/record-field/types/guards/isFieldRichTextDeprecatedValue';
 import { FieldContext } from '../contexts/FieldContext';
 import { isFieldBoolean } from '../types/guards/isFieldBoolean';
 import { isFieldBooleanValue } from '../types/guards/isFieldBooleanValue';
@@ -113,9 +113,9 @@ export const usePersistField = () => {
           isFieldRawJson(fieldDefinition) &&
           isFieldRawJsonValue(valueToPersist);
 
-        const fieldIsRichText =
-          isFieldRichText(fieldDefinition) &&
-          isFieldRichTextValue(valueToPersist);
+        const fieldIsRichTextDeprecated =
+          isFieldRichTextDeprecated(fieldDefinition) &&
+          isFieldRichTextDeprecatedValue(valueToPersist);
 
         const fieldIsArray =
           isFieldArray(fieldDefinition) && isFieldArrayValue(valueToPersist);
@@ -138,7 +138,7 @@ export const usePersistField = () => {
           fieldIsAddress ||
           fieldIsRawJson ||
           fieldIsArray ||
-          fieldIsRichText;
+          fieldIsRichTextDeprecated;
 
         if (isValuePersistable) {
           const fieldName = fieldDefinition.metadata.fieldName;

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RichTextDeprecatedFieldDisplay.tsx

@@ -0,0 +1,12 @@
+import { useRichTextDeprecatedFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useRichTextDeprecatedFieldDisplay';
+import { getFirstNonEmptyLineOfRichText } from '@/ui/input/editor/utils/getFirstNonEmptyLineOfRichText';
+
+export const RichTextDeprecatedFieldDisplay = () => {
+  const { fieldValue } = useRichTextDeprecatedFieldDisplay();
+
+  return (
+    <div>
+      <span>{getFirstNonEmptyLineOfRichText(fieldValue)}</span>
+    </div>
+  );
+};

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RichTextFieldDisplay.tsx

@@ -1,12 +1,16 @@
 import { useRichTextFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useRichTextFieldDisplay';
 import { getFirstNonEmptyLineOfRichText } from '@/ui/input/editor/utils/getFirstNonEmptyLineOfRichText';
+import { PartialBlock } from '@blocknote/core';
+import { parseJson } from '~/utils/parseJson';
 
 export const RichTextFieldDisplay = () => {
   const { fieldValue } = useRichTextFieldDisplay();
 
+  const blocks = parseJson<PartialBlock[]>(fieldValue?.blocknote);
+
   return (
     <div>
-      <span>{getFirstNonEmptyLineOfRichText(fieldValue)}</span>
+      <span>{getFirstNonEmptyLineOfRichText(blocks)}</span>
     </div>
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextDeprecatedField.ts

@@ -0,0 +1,75 @@
+import { useContext } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
+import { FieldRichTextDeprecatedValue } from '@/object-record/record-field/types/FieldMetadata';
+import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
+
+import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
+import { isFieldRichTextDeprecated } from '@/object-record/record-field/types/guards/isFieldRichTextDeprecated';
+import { isFieldRichTextDeprecatedValue } from '@/object-record/record-field/types/guards/isFieldRichTextDeprecatedValue';
+import { PartialBlock } from '@blocknote/core';
+import { isNonEmptyString } from '@sniptt/guards';
+import { FieldContext } from '../../contexts/FieldContext';
+import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
+
+export const useRichTextDeprecatedField = () => {
+  const { recordId, fieldDefinition, hotkeyScope, maxWidth } =
+    useContext(FieldContext);
+
+  assertFieldMetadata(
+    FieldMetadataType.RichTextDeprecated,
+    isFieldRichTextDeprecated,
+    fieldDefinition,
+  );
+
+  const fieldName = fieldDefinition.metadata.fieldName;
+
+  const [fieldValue, setFieldValue] =
+    useRecoilState<FieldRichTextDeprecatedValue>(
+      recordStoreFamilySelector({
+        recordId,
+        fieldName: fieldName,
+      }),
+    );
+  const fieldRichTextDeprecatedValue = isFieldRichTextDeprecatedValue(
+    fieldValue,
+  )
+    ? fieldValue
+    : '';
+
+  const { setDraftValue, getDraftValueSelector } =
+    useRecordFieldInput<FieldRichTextDeprecatedValue>(
+      `${recordId}-${fieldName}`,
+    );
+
+  const draftValue = useRecoilValue(getDraftValueSelector());
+
+  const draftValueParsed: PartialBlock[] = isNonEmptyString(draftValue)
+    ? JSON.parse(draftValue)
+    : draftValue;
+
+  const persistField = usePersistField();
+
+  const persistRichTextDeprecatedField = (nextValue: PartialBlock[]) => {
+    if (!nextValue) {
+      persistField(null);
+    } else {
+      const parsedValueToPersist = JSON.stringify(nextValue);
+
+      persistField(parsedValueToPersist);
+    }
+  };
+
+  return {
+    draftValue: draftValueParsed,
+    setDraftValue,
+    maxWidth,
+    fieldDefinition,
+    fieldValue: fieldRichTextDeprecatedValue,
+    setFieldValue,
+    hotkeyScope,
+    persistRichTextDeprecatedField,
+  };
+};

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRichTextDeprecatedFieldDisplay.ts

@@ -0,0 +1,35 @@
+import { useContext } from 'react';
+
+import { useRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
+
+import { FieldRichTextDeprecatedValue } from '@/object-record/record-field/types/FieldMetadata';
+import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata';
+import { isFieldRichTextDeprecated } from '@/object-record/record-field/types/guards/isFieldRichTextDeprecated';
+import { PartialBlock } from '@blocknote/core';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
+import { parseJson } from '~/utils/parseJson';
+import { FieldContext } from '../../contexts/FieldContext';
+
+export const useRichTextDeprecatedFieldDisplay = () => {
+  const { recordId, fieldDefinition, hotkeyScope } = useContext(FieldContext);
+
+  assertFieldMetadata(
+    FieldMetadataType.RichTextDeprecated,
+    isFieldRichTextDeprecated,
+    fieldDefinition,
+  );
+
+  const fieldName = fieldDefinition.metadata.fieldName;
+
+  const fieldValue = useRecordFieldValue<
+    FieldRichTextDeprecatedValue | undefined
+  >(recordId, fieldName);
+
+  const fieldValueParsed = parseJson<PartialBlock[]>(fieldValue);
+
+  return {
+    fieldDefinition,
+    fieldValue: fieldValueParsed,
+    hotkeyScope,
+  };
+};