Refactored and improved seeds

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

@@ -156,7 +156,7 @@ export const FieldInput = ({
           onShiftTab={onShiftTab}
         />
       ) : isFieldRichText(fieldDefinition) ? (
-        <RichTextFieldInput />
+        <RichTextFieldInput onClickOutside={onClickOutside} />
       ) : isFieldArray(fieldDefinition) ? (
         <ArrayFieldInput onCancel={onCancel} />
       ) : (

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

@@ -1,7 +1,6 @@
 import { useContext } from 'react';
 
 import { isFieldActor } from '@/object-record/record-field/types/guards/isFieldActor';
-import { isFieldRichText } from '@/object-record/record-field/types/guards/isFieldRichText';
 import { FieldContext } from '../contexts/FieldContext';
 import { isFieldMetadataReadOnly } from '../utils/isFieldMetadataReadOnly';
 
@@ -10,9 +9,5 @@ export const useIsFieldReadOnly = () => {
 
   const { metadata } = fieldDefinition;
 
-  return (
-    isFieldActor(fieldDefinition) ||
-    isFieldRichText(fieldDefinition) ||
-    isFieldMetadataReadOnly(metadata)
-  );
+  return isFieldActor(fieldDefinition) || isFieldMetadataReadOnly(metadata);
 };

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

@@ -28,6 +28,8 @@ import { EntityForSelect } from '@/object-record/relation-picker/types/EntityFor
 
 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 { FieldContext } from '../contexts/FieldContext';
 import { isFieldBoolean } from '../types/guards/isFieldBoolean';
 import { isFieldBooleanValue } from '../types/guards/isFieldBooleanValue';
@@ -111,6 +113,10 @@ export const usePersistField = () => {
           isFieldRawJson(fieldDefinition) &&
           isFieldRawJsonValue(valueToPersist);
 
+        const fieldIsRichText =
+          isFieldRichText(fieldDefinition) &&
+          isFieldRichTextValue(valueToPersist);
+
         const fieldIsArray =
           isFieldArray(fieldDefinition) && isFieldArrayValue(valueToPersist);
 
@@ -131,7 +137,8 @@ export const usePersistField = () => {
           fieldIsMultiSelect ||
           fieldIsAddress ||
           fieldIsRawJson ||
-          fieldIsArray;
+          fieldIsArray ||
+          fieldIsRichText;
 
         if (isValuePersistable) {
           const fieldName = fieldDefinition.metadata.fieldName;

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

@@ -1,11 +1,12 @@
-import { useTextFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useTextFieldDisplay';
+import { useRichTextFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useRichTextFieldDisplay';
 import { getFirstNonEmptyLineOfRichText } from '@/ui/input/editor/utils/getFirstNonEmptyLineOfRichText';
-import { PartialBlock } from '@blocknote/core';
 
 export const RichTextFieldDisplay = () => {
-  const { fieldValue } = useTextFieldDisplay();
-  const parsedField =
-    fieldValue === '' ? null : (JSON.parse(fieldValue) as PartialBlock[]);
+  const { fieldValue } = useRichTextFieldDisplay();
 
-  return <>{getFirstNonEmptyLineOfRichText(parsedField)}</>;
+  return (
+    <div>
+      <span>{getFirstNonEmptyLineOfRichText(fieldValue)}</span>
+    </div>
+  );
 };

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

@@ -0,0 +1,70 @@
+import { useContext } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
+import { FieldRichTextValue } 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 { isFieldRichText } from '@/object-record/record-field/types/guards/isFieldRichText';
+import { isFieldRichTextValue } from '@/object-record/record-field/types/guards/isFieldRichTextValue';
+import { PartialBlock } from '@blocknote/core';
+import { isNonEmptyString } from '@sniptt/guards';
+import { FieldContext } from '../../contexts/FieldContext';
+import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
+
+export const useRichTextField = () => {
+  const { recordId, fieldDefinition, hotkeyScope, maxWidth } =
+    useContext(FieldContext);
+
+  assertFieldMetadata(
+    FieldMetadataType.RichText,
+    isFieldRichText,
+    fieldDefinition,
+  );
+
+  const fieldName = fieldDefinition.metadata.fieldName;
+
+  const [fieldValue, setFieldValue] = useRecoilState<FieldRichTextValue>(
+    recordStoreFamilySelector({
+      recordId,
+      fieldName: fieldName,
+    }),
+  );
+  const fieldRichTextValue = isFieldRichTextValue(fieldValue) ? fieldValue : '';
+
+  const { setDraftValue, getDraftValueSelector } =
+    useRecordFieldInput<FieldRichTextValue>(`${recordId}-${fieldName}`);
+
+  const draftValue = useRecoilValue(getDraftValueSelector());
+
+  const draftValueParsed: PartialBlock[] = isNonEmptyString(draftValue)
+    ? JSON.parse(draftValue)
+    : draftValue;
+
+  const persistField = usePersistField();
+
+  const persistRichTextField = (nextValue: PartialBlock[]) => {
+    if (!nextValue) persistField(null);
+
+    const parsedValueToPersist = JSON.stringify(nextValue);
+
+    try {
+      persistField(parsedValueToPersist);
+    } catch (error) {
+      console.error('Failed to persist rich text field', error);
+    }
+  };
+
+  return {
+    draftValue: draftValueParsed,
+    setDraftValue,
+    maxWidth,
+    fieldDefinition,
+    fieldValue: fieldRichTextValue,
+    setFieldValue,
+    hotkeyScope,
+    persistRichTextField,
+  };
+};

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

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

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

@@ -1,5 +1,101 @@
-import { RichTextFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RichTextFieldDisplay';
+import { BLOCK_SCHEMA } from '@/activities/blocks/constants/Schema';
+import { useRichTextField } from '@/object-record/record-field/meta-types/hooks/useRichTextField';
+import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
+import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
+import { BlockEditor } from '@/ui/input/editor/components/BlockEditor';
+import { getFirstNonEmptyLineOfRichText } from '@/ui/input/editor/utils/getFirstNonEmptyLineOfRichText';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { PartialBlock } from '@blocknote/core';
+import { useCreateBlockNote } from '@blocknote/react';
+import styled from '@emotion/styled';
 
-export const RichTextFieldInput = () => {
-  return <RichTextFieldDisplay />;
+import {
+  autoUpdate,
+  flip,
+  FloatingPortal,
+  offset,
+  size,
+  useFloating,
+} from '@floating-ui/react';
+import { useRef } from 'react';
+
+const StyledRichTextDropdownMenu = styled(DropdownMenu)`
+  overflow: scroll;
+`;
+
+export type RichTextFieldInputProps = {
+  onClickOutside?: FieldInputEvent;
+};
+
+export const RichTextFieldInput = ({
+  onClickOutside,
+}: RichTextFieldInputProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { draftValue, hotkeyScope, persistRichTextField } = useRichTextField();
+
+  const firstLine = getFirstNonEmptyLineOfRichText(draftValue);
+
+  const editor = useCreateBlockNote({
+    initialContent: draftValue,
+    domAttributes: { editor: { class: 'editor' } },
+    schema: BLOCK_SCHEMA,
+  });
+
+  const { refs, floatingStyles } = useFloating({
+    placement: 'bottom',
+    middleware: [
+      flip(),
+      size({
+        padding: 32,
+        apply: ({ availableHeight, elements }) => {
+          elements.floating.style.maxHeight =
+            availableHeight >= elements.floating.scrollHeight
+              ? ''
+              : `${availableHeight}px`;
+
+          elements.floating.style.height = 'auto';
+        },
+        boundary: document.querySelector('#root') ?? undefined,
+      }),
+      offset({
+        crossAxis: -6,
+        mainAxis: 8,
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+    strategy: 'absolute',
+  });
+
+  const handleClickOutside = () => {
+    onClickOutside?.(() => persistRichTextField(editor.document));
+  };
+
+  useRegisterInputEvents<PartialBlock[]>({
+    inputRef: containerRef,
+    copyRef: refs.floating,
+    inputValue: draftValue,
+    onClickOutside: handleClickOutside,
+    hotkeyScope,
+  });
+
+  return (
+    <div ref={containerRef}>
+      <div
+        ref={refs.setReference}
+        style={{ width: '100%', height: '100%', padding: 6 }}
+      >
+        {firstLine}
+      </div>
+      <FloatingPortal>
+        <StyledRichTextDropdownMenu
+          width={500}
+          data-select-disable
+          ref={refs.setFloating}
+          style={floatingStyles}
+        >
+          <BlockEditor editor={editor} />
+        </StyledRichTextDropdownMenu>
+      </FloatingPortal>
+    </div>
+  );
 };

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

@@ -18,8 +18,8 @@ export const useRegisterInputEvents = <T>({
   inputRef: React.RefObject<any>;
   copyRef?: React.RefObject<any>;
   inputValue: T;
-  onEscape: (inputValue: T) => void;
-  onEnter: (inputValue: T) => void;
+  onEscape?: (inputValue: T) => void;
+  onEnter?: (inputValue: T) => void;
   onTab?: (inputValue: T) => void;
   onShiftTab?: (inputValue: T) => void;
   onClickOutside?: (event: MouseEvent | TouchEvent, inputValue: T) => void;