[Dashboards] Rich text editor frontend (#16437)

closes twentyhq/core-team-issues#1894

Author: ehconitin

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

@@ -18,33 +18,27 @@ import { ActivityRichTextEditorChangeOnActivityIdEffect } from '@/activities/com
 import { type Attachment } from '@/activities/files/types/Attachment';
 import { type Note } from '@/activities/types/Note';
 import { type Task } from '@/activities/types/Task';
-import { filterAttachmentsToRestore } from '@/activities/utils/filterAttachmentsToRestore';
-import { getActivityAttachmentIdsAndNameToUpdate } from '@/activities/utils/getActivityAttachmentIdsAndNameToUpdate';
-import { getActivityAttachmentIdsToDelete } from '@/activities/utils/getActivityAttachmentIdsToDelete';
-import { getActivityAttachmentPathsToRestore } from '@/activities/utils/getActivityAttachmentPathsToRestore';
 import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
 import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
 import { useLabelIdentifierFieldMetadataItem } from '@/object-metadata/hooks/useLabelIdentifierFieldMetadataItem';
-import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { useLazyFetchAllRecords } from '@/object-record/hooks/useLazyFetchAllRecords';
-import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords';
-import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { useIsRecordFieldReadOnly } from '@/object-record/read-only/hooks/useIsRecordFieldReadOnly';
 import { isTitleCellInEditModeComponentState } from '@/object-record/record-title-cell/states/isTitleCellInEditModeComponentState';
 import { RecordTitleCellContainerType } from '@/object-record/record-title-cell/types/RecordTitleCellContainerType';
 import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import { BlockEditor } from '@/ui/input/editor/components/BlockEditor';
+import { BLOCK_EDITOR_GLOBAL_HOTKEYS_CONFIG } from '@/ui/input/editor/constants/BlockEditorGlobalHotkeysConfig';
+import { useAttachmentSync } from '@/ui/input/editor/hooks/useAttachmentSync';
+import { parseInitialBlocknote } from '@/ui/input/editor/utils/parseInitialBlocknote';
+import { prepareBodyWithSignedUrls } from '@/ui/input/editor/utils/prepareBodyWithSignedUrls';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
-import type { PartialBlock } from '@blocknote/core';
 import '@blocknote/core/fonts/inter.css';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
 import '@blocknote/react/style.css';
-import { isArray, isNonEmptyString } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared/utils';
 
 type ActivityRichTextEditorProps = {
@@ -72,14 +66,6 @@ export const ActivityRichTextEditor = ({
     (field) => field.name === 'bodyV2',
   );
 
-  const { deleteManyRecords: deleteAttachments } = useDeleteManyRecords({
-    objectNameSingular: CoreObjectNameSingular.Attachment,
-  });
-
-  const { restoreManyRecords: restoreAttachments } = useRestoreManyRecords({
-    objectNameSingular: CoreObjectNameSingular.Attachment,
-  });
-
   const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
   const { removeFocusItemFromFocusStackById } =
     useRemoveFocusItemFromFocusStackById();
@@ -102,18 +88,8 @@ export const ActivityRichTextEditor = ({
     },
   });
 
-  const { fetchAllRecords: findSoftDeletedAttachments } =
-    useLazyFetchAllRecords({
-      objectNameSingular: CoreObjectNameSingular.Attachment,
-      filter: {
-        deletedAt: {
-          is: 'NOT_NULL',
-        },
-      },
-    });
-  const { updateOneRecord: updateOneAttachment } = useUpdateOneRecord({
-    objectNameSingular: CoreObjectNameSingular.Attachment,
-  });
+  const { syncAttachments } = useAttachmentSync(attachments);
+
   const { upsertActivity } = useUpsertActivity({
     activityObjectNameSingular: activityObjectNameSingular,
   });
@@ -155,37 +131,13 @@ export const ActivityRichTextEditor = ({
     });
   };
 
-  const prepareBody = (newStringifiedBody: string) => {
-    if (!newStringifiedBody) return newStringifiedBody;
-
-    const body = JSON.parse(newStringifiedBody);
-
-    const bodyWithSignedPayload = body.map((block: any) => {
-      if (block.type !== 'image' || !block.props.url) {
-        return block;
-      }
-
-      const imageProps = block.props;
-      const imageUrl = new URL(imageProps.url);
-
-      return {
-        ...block,
-        props: {
-          ...imageProps,
-          url: `${imageUrl.toString()}`,
-        },
-      };
-    });
-    return JSON.stringify(bodyWithSignedPayload);
-  };
-
   const handlePersistBody = useCallback(
     (activityBody: string) => {
       if (!canCreateActivity) {
         setCanCreateActivity(true);
       }
 
-      persistBodyDebounced(prepareBody(activityBody));
+      persistBodyDebounced(prepareBodyWithSignedUrls(activityBody));
     },
     [persistBodyDebounced, setCanCreateActivity, canCreateActivity],
   );
@@ -225,60 +177,17 @@ export const ActivityRichTextEditor = ({
 
         handlePersistBody(newStringifiedBody);
 
-        const attachmentIdsToDelete = getActivityAttachmentIdsToDelete(
+        await syncAttachments(
           newStringifiedBody,
-          attachments,
           oldActivity?.bodyV2.blocknote,
         );
-
-        if (attachmentIdsToDelete.length > 0) {
-          await deleteAttachments({
-            recordIdsToDelete: attachmentIdsToDelete,
-          });
-        }
-
-        const attachmentPathsToRestore = getActivityAttachmentPathsToRestore(
-          newStringifiedBody,
-          attachments,
-        );
-
-        if (attachmentPathsToRestore.length > 0) {
-          const softDeletedAttachments =
-            (await findSoftDeletedAttachments()) as Attachment[];
-
-          const attachmentIdsToRestore = filterAttachmentsToRestore(
-            attachmentPathsToRestore,
-            softDeletedAttachments,
-          );
-
-          await restoreAttachments({
-            idsToRestore: attachmentIdsToRestore,
-          });
-        }
-        const attachmentsToUpdate = getActivityAttachmentIdsAndNameToUpdate(
-          newStringifiedBody,
-          attachments,
-        );
-        if (attachmentsToUpdate.length > 0) {
-          for (const attachmentToUpdate of attachmentsToUpdate) {
-            if (!attachmentToUpdate.id) continue;
-            await updateOneAttachment({
-              idToUpdate: attachmentToUpdate.id,
-              updateOneRecordInput: { name: attachmentToUpdate.name },
-            });
-          }
-        }
       },
     [
-      attachments,
       activityId,
       cache,
       objectMetadataItemActivity,
       handlePersistBody,
-      deleteAttachments,
-      restoreAttachments,
-      findSoftDeletedAttachments,
-      updateOneAttachment,
+      syncAttachments,
     ],
   );
 
@@ -291,35 +200,14 @@ export const ActivityRichTextEditor = ({
   };
 
   const initialBody = useMemo(() => {
-    const blocknote = activity?.bodyV2?.blocknote;
-
-    if (
-      isDefined(activity) &&
-      isNonEmptyString(blocknote) &&
-      blocknote !== '{}'
-    ) {
-      let parsedBody: PartialBlock[] | undefined = undefined;
-
-      // TODO: Remove this once we have removed the old rich text
-      try {
-        parsedBody = JSON.parse(blocknote);
-      } catch {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `Failed to parse body for activity ${activityId}, for rich text version 'v2'`,
-        );
-        // eslint-disable-next-line no-console
-        console.warn(blocknote);
-      }
-
-      if (isArray(parsedBody) && parsedBody.length === 0) {
-        return undefined;
-      }
-
-      return parsedBody;
+    if (!isDefined(activity)) {
+      return undefined;
     }
 
-    return undefined;
+    return parseInitialBlocknote(
+      activity?.bodyV2?.blocknote,
+      `Failed to parse body for activity ${activityId}, for rich text version 'v2'`,
+    );
   }, [activity, activityId]);
 
   const handleEditorBuiltInUploadFile = async (file: File) => {
@@ -431,10 +319,7 @@ export const ActivityRichTextEditor = ({
             type: FocusComponentType.ACTIVITY_RICH_TEXT_EDITOR,
           },
           focusId: activityId,
-          globalHotkeysConfig: {
-            enableGlobalHotkeysConflictingWithKeyboard: false,
-            enableGlobalHotkeysWithModifiers: true,
-          },
+          globalHotkeysConfig: BLOCK_EDITOR_GLOBAL_HOTKEYS_CONFIG,
         });
       },
     [recordTitleCellId, activityId, editor, pushFocusItemToFocusStack],

packages/twenty-front/src/modules/command-menu/components/hooks/usePageLayoutHeaderInfo.ts

@@ -157,7 +157,6 @@ export const usePageLayoutHeaderInfo = ({
         widgetInEditMode: undefined,
       };
     }
-
     default:
       return null;
   }

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutIframeSettings.tsx

@@ -22,11 +22,7 @@ export const CommandMenuPageLayoutIframeSettings = () => {
 
   const { updatePageLayoutWidget } = useUpdatePageLayoutWidget(pageLayoutId);
 
-  if (!isDefined(widgetInEditMode)) {
-    throw new Error('Widget ID must be present while editing the widget');
-  }
-
-  const widgetConfiguration = widgetInEditMode.configuration;
+  const widgetConfiguration = widgetInEditMode?.configuration;
 
   const configUrl =
     widgetConfiguration && 'url' in widgetConfiguration
@@ -38,6 +34,10 @@ export const CommandMenuPageLayoutIframeSettings = () => {
   );
   const [urlError, setUrlError] = useState('');
 
+  if (!isDefined(widgetInEditMode)) {
+    return null;
+  }
+
   const validateUrl = (urlString: string): boolean => {
     const trimmedUrl = urlString.trim();
 

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutWidgetTypeSelect.tsx

@@ -1,23 +1,31 @@
 import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { useCompanyDefaultChartConfig } from '@/page-layout/hooks/useCompanyDefaultChartConfig';
 import { useCreatePageLayoutGraphWidget } from '@/page-layout/hooks/useCreatePageLayoutGraphWidget';
 import { useCreatePageLayoutIframeWidget } from '@/page-layout/hooks/useCreatePageLayoutIframeWidget';
+import { useCreatePageLayoutStandaloneRichTextWidget } from '@/page-layout/hooks/useCreatePageLayoutStandaloneRichTextWidget';
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChartPie, IconFrame } from 'twenty-ui/display';
+import {
+  IconAlignBoxLeftTop,
+  IconChartPie,
+  IconFrame,
+} from 'twenty-ui/display';
 import { GraphType } from '~/generated-metadata/graphql';
 
 export const CommandMenuPageLayoutWidgetTypeSelect = () => {
   const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
 
+  const { closeCommandMenu } = useCommandMenu();
+
   const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu();
 
   const { buildBarChartFieldSelection } = useCompanyDefaultChartConfig();
@@ -28,6 +36,9 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
   const { createPageLayoutIframeWidget } =
     useCreatePageLayoutIframeWidget(pageLayoutId);
 
+  const { createPageLayoutStandaloneRichTextWidget } =
+    useCreatePageLayoutStandaloneRichTextWidget(pageLayoutId);
+
   const [pageLayoutEditingWidgetId, setPageLayoutEditingWidgetId] =
     useRecoilComponentState(
       pageLayoutEditingWidgetIdComponentState,
@@ -64,8 +75,23 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
     });
   };
 
+  const handleNavigateToRichTextSettings = () => {
+    if (!isDefined(pageLayoutEditingWidgetId)) {
+      const newWidget = createPageLayoutStandaloneRichTextWidget({
+        blocknote: '',
+        markdown: null,
+      });
+      setPageLayoutEditingWidgetId(newWidget.id);
+    }
+
+    closeCommandMenu();
+  };
+
   return (
-    <CommandMenuList commandGroups={[]} selectableItemIds={['chart', 'iframe']}>
+    <CommandMenuList
+      commandGroups={[]}
+      selectableItemIds={['chart', 'iframe', 'rich-text']}
+    >
       <CommandGroup heading={t`Widget type`}>
         <SelectableListItem
           itemId="chart"
@@ -89,6 +115,18 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
             onClick={handleNavigateToIframeSettings}
           />
         </SelectableListItem>
+
+        <SelectableListItem
+          itemId="rich-text"
+          onEnter={handleNavigateToRichTextSettings}
+        >
+          <CommandMenuItem
+            Icon={IconAlignBoxLeftTop}
+            label={t`Rich Text`}
+            id="rich-text"
+            onClick={handleNavigateToRichTextSettings}
+          />
+        </SelectableListItem>
       </CommandGroup>
     </CommandMenuList>
   );

packages/twenty-front/src/modules/page-layout/constants/WidgetSizes.ts

@@ -6,4 +6,8 @@ export const WIDGET_SIZES: Partial<Record<WidgetType, WidgetSizeConfig>> = {
     default: { w: 6, h: 6 },
     minimum: { w: 4, h: 5 },
   },
+  [WidgetType.STANDALONE_RICH_TEXT]: {
+    default: { w: 4, h: 4 },
+    minimum: { w: 1, h: 1 },
+  },
 };