Improve design of the rich text editor (#9533)

New design for rich text composer

test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx

@@ -28,6 +28,7 @@ import { createTestClient, flushPromises, getRoomContext, mkEvent, mkStubRoom }
 import { SendWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer";
 import * as useComposerFunctions
     from "../../../../../src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions";
+import { aboveLeftOf } from "../../../../../src/components/structures/ContextMenu";
 
 const mockClear = jest.fn();
 
@@ -78,7 +79,7 @@ describe('SendWysiwygComposer', () => {
         return render(
             <MatrixClientContext.Provider value={mockClient}>
                 <RoomContext.Provider value={defaultRoomContext}>
-                    <SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} isRichTextEnabled={isRichTextEnabled} />
+                    <SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} isRichTextEnabled={isRichTextEnabled} menuPosition={aboveLeftOf({ top: 0, bottom: 0, right: 0 })} />
                 </RoomContext.Provider>
             </MatrixClientContext.Provider>,
         );

test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx

@@ -21,10 +21,6 @@ import userEvent from "@testing-library/user-event";
 import { PlainTextComposer }
     from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer";
 
-// Work around missing ClipboardEvent type
-class MyClipboardEvent {}
-window.ClipboardEvent = MyClipboardEvent as any;
-
 describe('PlainTextComposer', () => {
     const customRender = (
         onChange = (_content: string) => void 0,
@@ -91,4 +87,46 @@ describe('PlainTextComposer', () => {
         // Then
         expect(screen.getByRole('textbox').innerHTML).toBeFalsy();
     });
+
+    it('Should have data-is-expanded when it has two lines', async () => {
+        let resizeHandler: ResizeObserverCallback = jest.fn();
+        let editor: Element | null = null;
+        jest.spyOn(global, 'ResizeObserver').mockImplementation((handler) => {
+            resizeHandler = handler;
+            return {
+                observe: (element) => {
+                    editor = element;
+                },
+                unobserve: jest.fn(),
+                disconnect: jest.fn(),
+            };
+        },
+        );
+        jest.spyOn(global, 'requestAnimationFrame').mockImplementation(cb => {
+            cb(0);
+            return 0;
+        });
+
+        //When
+        render(
+            <PlainTextComposer onChange={jest.fn()} onSend={jest.fn()} />,
+        );
+
+        // Then
+        expect(screen.getByTestId('WysiwygComposerEditor').attributes['data-is-expanded'].value).toBe('false');
+        expect(editor).toBe(screen.getByRole('textbox'));
+
+        // When
+        resizeHandler(
+            [{ contentBoxSize: [{ blockSize: 100 }] } as unknown as ResizeObserverEntry],
+            {} as ResizeObserver,
+        );
+        jest.runAllTimers();
+
+        // Then
+        expect(screen.getByTestId('WysiwygComposerEditor').attributes['data-is-expanded'].value).toBe('true');
+
+        (global.ResizeObserver as jest.Mock).mockRestore();
+        (global.requestAnimationFrame as jest.Mock).mockRestore();
+    });
 });

test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx

@@ -23,10 +23,6 @@ import { WysiwygComposer }
     from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
 import SettingsStore from "../../../../../../src/settings/SettingsStore";
 
-// Work around missing ClipboardEvent type
-class MyClipboardEvent {}
-window.ClipboardEvent = MyClipboardEvent as any;
-
 let inputEventProcessor: InputEventProcessor | null = null;
 
 // The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement