Refactored and improved seeds (#8695)

- Added a new Seeder service to help with custom object seeds
- Added RichTextFieldInput to edit a rich text field directly on the
table, but deactivated it for now.

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

@@ -19,14 +19,17 @@ interface BlockEditorProps {
   onBlur?: () => void;
   onPaste?: (event: ClipboardEvent) => void;
   onChange?: () => void;
+  readonly?: boolean;
 }
 
 const StyledEditor = styled.div`
   width: 100%;
+
   & .editor {
     background: ${({ theme }) => theme.background.primary};
     font-size: 13px;
     color: ${({ theme }) => theme.font.color.primary};
+    min-height: 400px;
   }
   & .editor [class^='_inlineContent']:before {
     color: ${({ theme }) => theme.font.color.tertiary};
@@ -124,6 +127,7 @@ export const BlockEditor = ({
   onBlur,
   onChange,
   onPaste,
+  readonly,
 }: BlockEditorProps) => {
   const theme = useTheme();
   const blockNoteTheme = theme.name === 'light' ? 'light' : 'dark';
@@ -155,6 +159,7 @@ export const BlockEditor = ({
         theme={blockNoteTheme}
         slashMenu={false}
         sideMenu={false}
+        editable={!readonly}
       >
         <CustomSideMenu editor={editor} />
         <SuggestionMenuController

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

@@ -0,0 +1,66 @@
+import { BLOCK_SCHEMA } from '@/activities/blocks/constants/Schema';
+import { isSlashMenuOpenComponentState } from '@/ui/input/editor/states/isSlashMenuOpenComponentState';
+import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
+import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useRecoilCallback } from 'recoil';
+
+export type BlockEditorDropdownFocusEffectProps = {
+  editor: typeof BLOCK_SCHEMA.BlockNoteEditor;
+};
+
+export const BlockEditorDropdownFocusEffect = ({
+  editor,
+}: BlockEditorDropdownFocusEffectProps) => {
+  const isSlashMenuOpenState = useRecoilComponentCallbackStateV2(
+    isSlashMenuOpenComponentState,
+  );
+
+  const { setActiveDropdownFocusIdAndMemorizePrevious } =
+    useSetActiveDropdownFocusIdAndMemorizePrevious();
+
+  const { goBackToPreviousDropdownFocusId } =
+    useGoBackToPreviousDropdownFocusId();
+
+  const updateCallBack = useRecoilCallback(
+    ({ snapshot, set }) =>
+      (event: any) => {
+        // TODO: This triggers before the onClick event of the slash menu item, so the click outside of the editor dropdown is triggered and everything closes.
+        // This is due to useRecoilCallback being executed before the onClick event of the slash menu item.
+        const eventWantsToOpen = event.show === true;
+
+        const isAlreadyOpen = snapshot
+          .getLoadable(isSlashMenuOpenState)
+          .getValue();
+
+        const shouldOpen = eventWantsToOpen && !isAlreadyOpen;
+
+        if (shouldOpen) {
+          setActiveDropdownFocusIdAndMemorizePrevious('custom-slash-menu');
+          set(isSlashMenuOpenState, true);
+          return;
+        }
+
+        const eventWantsToClose = event.show === false;
+
+        const isAlreadyClosed = !isAlreadyOpen;
+
+        const shouldClose = eventWantsToClose && !isAlreadyClosed;
+
+        if (shouldClose) {
+          goBackToPreviousDropdownFocusId();
+          set(isSlashMenuOpenState, false);
+          return;
+        }
+      },
+    [
+      isSlashMenuOpenState,
+      setActiveDropdownFocusIdAndMemorizePrevious,
+      goBackToPreviousDropdownFocusId,
+    ],
+  );
+
+  editor.suggestionMenus.on('update /', updateCallBack);
+
+  return <></>;
+};

packages/twenty-front/src/modules/ui/input/editor/contexts/BlockEditorCompoponeInstanceContext.ts

@@ -0,0 +1,4 @@
+import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
+
+export const BlockEditorComponentInstanceContext =
+  createComponentInstanceContext();

packages/twenty-front/src/modules/ui/input/editor/states/isSlashMenuOpenComponentState.ts

@@ -0,0 +1,8 @@
+import { BlockEditorComponentInstanceContext } from '@/ui/input/editor/contexts/BlockEditorCompoponeInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export const isSlashMenuOpenComponentState = createComponentStateV2<boolean>({
+  key: 'isSlashMenuOpenComponentState',
+  defaultValue: false,
+  componentInstanceContext: BlockEditorComponentInstanceContext,
+});