[Dashboards] Rich text editor frontend (#16437)

closes https://github.com/twentyhq/core-team-issues/issues/1894

packages/twenty-front/src/modules/ui/input/editor/constants/BlockEditorGlobalHotkeysConfig.ts

@@ -0,0 +1,4 @@
+export const BLOCK_EDITOR_GLOBAL_HOTKEYS_CONFIG = {
+  enableGlobalHotkeysConflictingWithKeyboard: false,
+  enableGlobalHotkeysWithModifiers: true,
+};

packages/twenty-front/src/modules/ui/input/editor/hooks/useAttachmentSync.ts

@@ -0,0 +1,89 @@
+import { type Attachment } from '@/activities/files/types/Attachment';
+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 { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
+import { useLazyFetchAllRecords } from '@/object-record/hooks/useLazyFetchAllRecords';
+import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+
+export const useAttachmentSync = (attachments: Attachment[]) => {
+  const { deleteManyRecords: deleteAttachments } = useDeleteManyRecords({
+    objectNameSingular: CoreObjectNameSingular.Attachment,
+  });
+
+  const { restoreManyRecords: restoreAttachments } = useRestoreManyRecords({
+    objectNameSingular: CoreObjectNameSingular.Attachment,
+  });
+
+  const { fetchAllRecords: findSoftDeletedAttachments } =
+    useLazyFetchAllRecords({
+      objectNameSingular: CoreObjectNameSingular.Attachment,
+      filter: {
+        deletedAt: {
+          is: 'NOT_NULL',
+        },
+      },
+    });
+
+  const { updateOneRecord: updateOneAttachment } = useUpdateOneRecord({
+    objectNameSingular: CoreObjectNameSingular.Attachment,
+  });
+
+  const syncAttachments = async (
+    newBody: string,
+    previousBody?: string | null,
+  ) => {
+    if (!newBody) return;
+
+    const previousBodyOrEmptyArray = previousBody?.trim() ? previousBody : '[]';
+
+    const attachmentIdsToDelete = getActivityAttachmentIdsToDelete(
+      newBody,
+      attachments,
+      previousBodyOrEmptyArray,
+    );
+
+    if (attachmentIdsToDelete.length > 0) {
+      await deleteAttachments({
+        recordIdsToDelete: attachmentIdsToDelete,
+      });
+    }
+
+    const attachmentPathsToRestore = getActivityAttachmentPathsToRestore(
+      newBody,
+      attachments,
+    );
+
+    if (attachmentPathsToRestore.length > 0) {
+      const softDeletedAttachments =
+        (await findSoftDeletedAttachments()) as Attachment[];
+
+      const attachmentIdsToRestore = filterAttachmentsToRestore(
+        attachmentPathsToRestore,
+        softDeletedAttachments ?? [],
+      );
+
+      await restoreAttachments({
+        idsToRestore: attachmentIdsToRestore,
+      });
+    }
+
+    const attachmentsToUpdate = getActivityAttachmentIdsAndNameToUpdate(
+      newBody,
+      attachments,
+    );
+
+    for (const attachmentToUpdate of attachmentsToUpdate) {
+      if (!attachmentToUpdate.id || !attachmentToUpdate.name) continue;
+      await updateOneAttachment({
+        idToUpdate: attachmentToUpdate.id,
+        updateOneRecordInput: { name: attachmentToUpdate.name },
+      });
+    }
+  };
+
+  return { syncAttachments };
+};

packages/twenty-front/src/modules/ui/input/editor/utils/__tests__/parseInitialBlocknote.test.ts

@@ -0,0 +1,47 @@
+import { parseInitialBlocknote } from '../parseInitialBlocknote';
+
+describe('parseInitialBlocknote', () => {
+  it('should parse valid JSON array string', () => {
+    const input = JSON.stringify([{ type: 'paragraph', content: 'test' }]);
+    const result = parseInitialBlocknote(input);
+    expect(result).toEqual([{ type: 'paragraph', content: 'test' }]);
+  });
+
+  it('should return undefined for empty string', () => {
+    expect(parseInitialBlocknote('')).toBeUndefined();
+  });
+
+  it('should return undefined for null', () => {
+    expect(parseInitialBlocknote(null)).toBeUndefined();
+  });
+
+  it('should return undefined for undefined', () => {
+    expect(parseInitialBlocknote(undefined)).toBeUndefined();
+  });
+
+  it('should return undefined for empty object string "{}"', () => {
+    expect(parseInitialBlocknote('{}')).toBeUndefined();
+  });
+
+  it('should return undefined for invalid JSON', () => {
+    const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+    expect(parseInitialBlocknote('invalid json')).toBeUndefined();
+    expect(consoleSpy).toHaveBeenCalled();
+    consoleSpy.mockRestore();
+  });
+
+  it('should return undefined for empty array', () => {
+    expect(parseInitialBlocknote('[]')).toBeUndefined();
+  });
+
+  it('should return undefined for non-array JSON', () => {
+    expect(parseInitialBlocknote('{"key": "value"}')).toBeUndefined();
+  });
+
+  it('should use custom log context when parsing fails', () => {
+    const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+    parseInitialBlocknote('invalid', 'Custom context');
+    expect(consoleSpy).toHaveBeenCalledWith('Custom context');
+    consoleSpy.mockRestore();
+  });
+});

packages/twenty-front/src/modules/ui/input/editor/utils/__tests__/prepareBodyWithSignedUrls.test.ts

@@ -0,0 +1,46 @@
+import { prepareBodyWithSignedUrls } from '../prepareBodyWithSignedUrls';
+
+describe('prepareBodyWithSignedUrls', () => {
+  it('should return empty string as-is', () => {
+    expect(prepareBodyWithSignedUrls('')).toBe('');
+  });
+
+  it('should parse and re-stringify blocks', () => {
+    const input = JSON.stringify([{ type: 'paragraph', content: 'text' }]);
+    const result = JSON.parse(prepareBodyWithSignedUrls(input));
+    expect(result).toEqual([{ type: 'paragraph', content: 'text' }]);
+  });
+
+  it('should pass through non-image blocks unchanged', () => {
+    const blocks = [
+      { type: 'paragraph', content: 'text' },
+      { type: 'heading', content: 'title' },
+      { type: 'bulletListItem', content: 'item' },
+    ];
+    const result = JSON.parse(
+      prepareBodyWithSignedUrls(JSON.stringify(blocks)),
+    );
+    expect(result).toEqual(blocks);
+  });
+
+  it('should skip image blocks without props', () => {
+    const input = JSON.stringify([{ type: 'image' }]);
+    const result = JSON.parse(prepareBodyWithSignedUrls(input));
+    expect(result).toEqual([{ type: 'image' }]);
+  });
+
+  it('should skip image blocks without url in props', () => {
+    const input = JSON.stringify([{ type: 'image', props: { alt: 'test' } }]);
+    const result = JSON.parse(prepareBodyWithSignedUrls(input));
+    expect(result).toEqual([{ type: 'image', props: { alt: 'test' } }]);
+  });
+
+  it('should process image blocks with valid URLs', () => {
+    const input = JSON.stringify([
+      { type: 'image', props: { url: 'https://example.com/image.png' } },
+    ]);
+    const result = JSON.parse(prepareBodyWithSignedUrls(input));
+    expect(result[0].type).toBe('image');
+    expect(result[0].props.url).toContain('example.com');
+  });
+});

packages/twenty-front/src/modules/ui/input/editor/utils/parseInitialBlocknote.ts

@@ -0,0 +1,29 @@
+import type { PartialBlock } from '@blocknote/core';
+import { isArray, isNonEmptyString } from '@sniptt/guards';
+
+export const parseInitialBlocknote = (
+  blocknote?: string | null,
+  logContext?: string,
+): PartialBlock[] | undefined => {
+  if (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(logContext ?? `Failed to parse blocknote body`);
+      // eslint-disable-next-line no-console
+      console.warn(blocknote);
+    }
+
+    if (!isArray(parsedBody) || parsedBody.length === 0) {
+      return undefined;
+    }
+
+    return parsedBody;
+  }
+
+  return undefined;
+};

packages/twenty-front/src/modules/ui/input/editor/utils/prepareBodyWithSignedUrls.ts

@@ -0,0 +1,30 @@
+import type { PartialBlock } from '@blocknote/core';
+
+// TODO: This function is extracted but its not doing what it is supposed to do. It is not signing the urls. It is just parsing the image urls.
+// tracking issue - https://github.com/twentyhq/twenty/issues/8351
+export const prepareBodyWithSignedUrls = (
+  newStringifiedBody: string,
+): string => {
+  if (!newStringifiedBody) return newStringifiedBody;
+
+  const body: PartialBlock[] = JSON.parse(newStringifiedBody);
+
+  const bodyWithSignedPayload = body.map((block) => {
+    if (block.type !== 'image' || !block.props?.url) {
+      return block;
+    }
+
+    const imageUrl = block.props.url;
+    const parsedImageUrl = new URL(imageUrl);
+
+    return {
+      ...block,
+      props: {
+        ...block.props,
+        url: parsedImageUrl.toString(),
+      },
+    };
+  });
+
+  return JSON.stringify(bodyWithSignedPayload);
+};

packages/twenty-front/src/modules/ui/utilities/focus/types/FocusComponentType.ts

@@ -12,6 +12,7 @@ export enum FocusComponentType {
   FORM_FIELD_INPUT = 'form-field-input',
   RECORD_BOARD_CARD = 'record-board-card',
   ACTIVITY_RICH_TEXT_EDITOR = 'activity-rich-text-editor',
+  STANDALONE_RICH_TEXT_WIDGET = 'standalone-rich-text-widget',
   KEYBOARD_SHORTCUT_MENU = 'keyboard-shortcut-menu',
   DIALOG = 'dialog',
 }