feat(editor): support editing of emails with very long body text

src/store/editor/editor-transformations.ts

@@ -162,6 +162,10 @@
 export const getMP = (editor: MailsEditorV2): SoapEmailMessagePartObj[] => {
 	const { prefs } = getUserSettings();
 
+	// The stored text could be out of sync with the current text of the composer.
+	// TODO: This logic should be encapsulated in the editor or the store
+	const text = editor.textProvider?.getCurrentText() ?? editor.text;
+
 	const style = {
 		font: prefs?.zimbraPrefHtmlEditorDefaultFontFamily as string,
 		fontSize: prefs?.zimbraPrefHtmlEditorDefaultFontSize as string,
@@ -172,8 +176,8 @@
 	const savedInlineAttachment = filterSavedInlineAttachment(editor.savedAttachments);
 
 	const contentWithCidUrl = {
-		plainText: editor.text.plainText,
-		richText: replaceServiceUrlWithCidUrl(editor.text.richText)
+		plainText: text?.plainText,
+		richText: replaceServiceUrlWithCidUrl(text?.richText)
 	};
 
 	if (editor.isRichText) {
@@ -241,7 +245,9 @@
 		{
 			ct: 'text/plain',
 			body: true,
-			content: { _content: editor.text.plainText ?? '' }
+			content: {
+				_content: text?.plainText ?? ''
+			}
 		}
 	];
 };

src/store/editor/hooks/editor.ts

@@ -48,40 +48,75 @@ export const useEditorSubject = (
 	);
 };
 
+export const useEditorTextProvider = (
+	id: MailsEditorV2['id']
+): {
+	textProvider: MailsEditorV2['textProvider'];
+	setTextProvider: (textProvider: MailsEditorV2['textProvider']) => void;
+} => {
+	const value = useEditorsStore((state) => state.editors[id].textProvider);
+	const setter = useEditorsStore((state) => state.setTextProvider);
+
+	const setTextProvider = useCallback(
+		(val: MailsEditorV2['textProvider']): void => {
+			setter(id, val);
+		},
+		[id, setter]
+	);
+
+	return useMemo(
+		() => ({
+			textProvider: value,
+			setTextProvider
+		}),
+		[setTextProvider, value]
+	);
+};
+
+type EditorSetTextOptions = {
+	syncTextProvider?: boolean;
+};
+
 /**
  * Returns reactive references to the text values and to their setter
  * @param id
  */
 export const useEditorText = (
 	id: MailsEditorV2['id']
 ): {
-	text: MailsEditorV2['text'];
-	setText: (text: MailsEditorV2['text']) => void;
-	resetText: () => void;
+	getText: () => MailsEditorV2['text'];
+	setText: (text: MailsEditorV2['text'], options?: EditorSetTextOptions) => void;
 } => {
-	const { debouncedSaveDraft } = useSaveDraftFromEditor();
-	const value = useEditorsStore((state) => state.editors[id].text);
+	const { immediateSaveDraft } = useSaveDraftFromEditor();
 	const setter = useEditorsStore((state) => state.setText);
+	const { textProvider } = useEditorTextProvider(id);
+
+	const getText = useCallback(
+		(): MailsEditorV2['text'] =>
+			textProvider?.getCurrentText() ?? useEditorsStore.getState().editors[id].text,
+		[id, textProvider]
+	);
+
 	const setText = useCallback(
-		(val: MailsEditorV2['text']): void => {
+		(
+			val: MailsEditorV2['text'],
+			options: EditorSetTextOptions = { syncTextProvider: true }
+		): void => {
+			if (textProvider && options.syncTextProvider) {
+				textProvider.setCurrentText(val);
+			}
 			setter(id, val);
-			debouncedSaveDraft(id);
+			immediateSaveDraft(id);
 		},
-		[id, debouncedSaveDraft, setter]
+		[id, immediateSaveDraft, setter, textProvider]
 	);
 
-	const resetText = useCallback((): void => {
-		setter(id, { plainText: '', richText: '' });
-		debouncedSaveDraft(id);
-	}, [id, debouncedSaveDraft, setter]);
-
 	return useMemo(
 		() => ({
-			text: value,
-			setText,
-			resetText
+			getText,
+			setText
 		}),
-		[resetText, setText, value]
+		[getText, setText]
 	);
 };
 

src/store/editor/hooks/tests/use-editor-text-provider.test.ts

@@ -0,0 +1,52 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { act } from '@testing-library/react';
+
+import { setupHook } from '../../../../carbonio-ui-commons/test/test-setup';
+import { setupEditorStore } from '../../../../tests/generators/editor-store';
+import { generateNewMessageEditor } from '../../editor-generators';
+import { useEditorsStore } from '../../store';
+import { useEditorTextProvider } from '../editor';
+
+describe('useEditorTextProvider', () => {
+	it('should return an object with the current textProvider and its setter', () => {
+		const textProvider = {
+			setCurrentText: jest.fn(),
+			getCurrentText: jest.fn()
+		};
+		const editor = generateNewMessageEditor();
+		editor.textProvider = textProvider;
+		setupEditorStore({ editors: [editor] });
+
+		const {
+			result: { current: hookResult }
+		} = setupHook(useEditorTextProvider, { initialProps: [editor.id] });
+
+		expect(hookResult).toEqual({
+			setTextProvider: expect.any(Function),
+			textProvider: editor.textProvider
+		});
+	});
+
+	it('should set the textProvider when the setter is called', () => {
+		const textProvider = {
+			setCurrentText: jest.fn(),
+			getCurrentText: jest.fn()
+		};
+		const editor = generateNewMessageEditor();
+		setupEditorStore({ editors: [editor] });
+
+		const { result } = setupHook(useEditorTextProvider, { initialProps: [editor.id] });
+
+		act(() => {
+			result.current.setTextProvider(textProvider);
+		});
+
+		expect(useEditorsStore.getState().editors[editor.id].textProvider).toBe(textProvider);
+		expect(result.current.textProvider).toBe(textProvider);
+	});
+});

src/store/editor/hooks/tests/use-editor-text.test.ts

@@ -0,0 +1,124 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { faker } from '@faker-js/faker';
+import { act } from '@testing-library/react';
+
+import { createSoapAPIInterceptor } from '../../../../carbonio-ui-commons/test/mocks/network/msw/create-api-interceptor';
+import { setupHook } from '../../../../carbonio-ui-commons/test/test-setup';
+import { setupEditorStore } from '../../../../tests/generators/editor-store';
+import { generateEditorV2Case } from '../../../../tests/generators/editors';
+import { generateNewMessageEditor } from '../../editor-generators';
+import { useEditorText } from '../editor';
+import { addEditor, getEditor } from '../editors';
+
+describe('useEditorText', () => {
+	test('get the editor text', async () => {
+		const initialPlainText = 'initial plain text';
+		const initialRichText = 'initial <b>rich</b> text';
+		setupEditorStore({ editors: [] });
+		const editor = await generateEditorV2Case(1);
+		editor.text = {
+			plainText: initialPlainText,
+			richText: initialRichText
+		};
+		addEditor({ id: editor.id, editor });
+
+		const { result: hookResult } = setupHook(useEditorText, { initialProps: [editor.id] });
+		const { getText } = hookResult.current;
+		expect(getText().plainText).toEqual(initialPlainText);
+		expect(getText().richText).toEqual(initialRichText);
+	});
+
+	test('set the editor text', async () => {
+		const initialPlainText = 'initial plain text';
+		const initialRichText = 'initial <b>rich</b> text';
+		const newPlainText = 'new plain text';
+		const newRichText = 'new <b>rich</b> text';
+
+		createSoapAPIInterceptor('SaveDraft');
+
+		setupEditorStore({ editors: [] });
+		const editor = await generateEditorV2Case(1);
+		editor.text = {
+			plainText: initialPlainText,
+			richText: initialRichText
+		};
+		addEditor({ id: editor.id, editor });
+
+		const { result: hookResult } = setupHook(useEditorText, { initialProps: [editor.id] });
+		const { setText } = hookResult.current;
+
+		await act(async () => {
+			setText({ plainText: newPlainText, richText: newRichText });
+		});
+
+		const editorFromStore = getEditor({ id: editor.id });
+		expect(editorFromStore?.text.plainText).toEqual(newPlainText);
+		expect(editorFromStore?.text.richText).toEqual(newRichText);
+	});
+
+	describe('Text provider', () => {
+		it('should return the text from the test provider when the provider is set', () => {
+			const providerTextValue = {
+				richText: faker.lorem.paragraph(),
+				plainText: faker.lorem.paragraph()
+			};
+			const textProvider = {
+				setCurrentText: jest.fn(),
+				getCurrentText: jest.fn().mockReturnValue(providerTextValue)
+			};
+			const editor = generateNewMessageEditor();
+			editor.textProvider = textProvider;
+			setupEditorStore({ editors: [editor] });
+
+			const { result: hookResult } = setupHook(useEditorText, { initialProps: [editor.id] });
+			const { getText } = hookResult.current;
+
+			expect(getText()).toEqual(providerTextValue);
+			expect(textProvider.getCurrentText).toHaveBeenCalled();
+		});
+
+		it('should return the text from the store when the provider is not set', () => {
+			const text = {
+				richText: faker.lorem.paragraph(),
+				plainText: faker.lorem.paragraph()
+			};
+			const editor = generateNewMessageEditor();
+			editor.text = text;
+			editor.textProvider = undefined;
+			setupEditorStore({ editors: [editor] });
+
+			const { result: hookResult } = setupHook(useEditorText, { initialProps: [editor.id] });
+			const { getText } = hookResult.current;
+
+			expect(getText()).toEqual(text);
+		});
+
+		it('should invoke the provider function when the setText is invoked and the provider is set', async () => {
+			createSoapAPIInterceptor('SaveDraft');
+
+			const text = {
+				richText: faker.lorem.paragraph(),
+				plainText: faker.lorem.paragraph()
+			};
+			const editor = generateNewMessageEditor();
+			editor.textProvider = {
+				setCurrentText: jest.fn(),
+				getCurrentText: jest.fn()
+			};
+			setupEditorStore({ editors: [editor] });
+
+			const { result: hookResult } = setupHook(useEditorText, { initialProps: [editor.id] });
+			const { setText } = hookResult.current;
+
+			await act(async () => {
+				setText(text);
+			});
+
+			expect(editor.textProvider.setCurrentText).toHaveBeenCalledWith(text);
+		});
+	});
+});

src/store/editor/store.ts

@@ -12,6 +12,7 @@ import { getUnsavedAttachmentIndex } from './store-utils';
 import {
 	AttachmentUploadProcessStatus,
 	EditorsStateTypeV2,
+	EditorTextProvider,
 	MailsEditorV2,
 	SavedAttachment,
 	UnsavedAttachment
@@ -362,5 +363,14 @@ export const useEditorsStore = create<EditorsStateTypeV2>()((set) => ({
 				}
 			})
 		);
+	},
+	setTextProvider: (id: MailsEditorV2['id'], provider: EditorTextProvider): void => {
+		set(
+			produce((state: EditorsStateTypeV2) => {
+				if (state?.editors?.[id]) {
+					state.editors[id].textProvider = provider;
+				}
+			})
+		);
 	}
 }));

src/store/editor/tests/hooks.test.ts

@@ -14,7 +14,6 @@ import {
 	getEditor,
 	deleteEditor,
 	useEditorSubject,
-	useEditorText,
 	useEditorAutoSendTime
 	// useEditorIsUrgent,
 	// useEditorRequestReadReceipt,
@@ -84,49 +83,6 @@ describe('all editor hooks', () => {
 		});
 	});
 
-	describe('useEditorText', () => {
-		test('get the editor text', async () => {
-			const initialPlainText = 'initial plain text';
-			const initialRichText = 'initial <b>rich</b> text';
-			setupEditorStore({ editors: [] });
-			const editor = await generateEditorV2Case(1);
-			editor.text = {
-				plainText: initialPlainText,
-				richText: initialRichText
-			};
-			addEditor({ id: editor.id, editor });
-
-			const { result: hookResult } = setupHook(useEditorText, { initialProps: [editor.id] });
-			const { text } = hookResult.current;
-			expect(text.plainText).toEqual(initialPlainText);
-			expect(text.richText).toEqual(initialRichText);
-		});
-
-		test('set the editor text', async () => {
-			const initialPlainText = 'initial plain text';
-			const initialRichText = 'initial <b>rich</b> text';
-			const newPlainText = 'new plain text';
-			const newRichText = 'new <b>rich</b> text';
-
-			setupEditorStore({ editors: [] });
-			const editor = await generateEditorV2Case(1);
-			editor.text = {
-				plainText: initialPlainText,
-				richText: initialRichText
-			};
-			addEditor({ id: editor.id, editor });
-
-			const { result: hookResult } = setupHook(useEditorText, { initialProps: [editor.id] });
-			const { setText } = hookResult.current;
-			act(() => {
-				setText({ plainText: newPlainText, richText: newRichText });
-			});
-			const editorFromStore = getEditor({ id: editor.id });
-			expect(editorFromStore?.text.plainText).toEqual(newPlainText);
-			expect(editorFromStore?.text.richText).toEqual(newRichText);
-		});
-	});
-
 	describe('useEditorAutoSendTime', () => {
 		test('get the editor scheduled send time', async () => {
 			const initialAutoSendTime = 123456789;