[Backport staging] Load RTE component only when needed (#9807)

Use react lazy to load rte component

(cherry picked from commit d6e447b934)

Co-authored-by: Florian Duros <florianduros@element.io>
This commit is contained in:
ElementRobot 2022-12-21 10:04:11 +00:00 committed by GitHub
parent bf57a12ba4
commit 0f34702b35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 92 additions and 28 deletions

View file

@ -0,0 +1,36 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { ComponentProps, lazy, Suspense } from "react";
const SendComposer = lazy(() => import("./SendWysiwygComposer"));
const EditComposer = lazy(() => import("./EditWysiwygComposer"));
export function DynamicImportSendWysiwygComposer(props: ComponentProps<typeof SendComposer>) {
return (
<Suspense fallback={<div />}>
<SendComposer {...props} />
</Suspense>
);
}
export function DynamicImportEditWysiwygComposer(props: ComponentProps<typeof EditComposer>) {
return (
<Suspense fallback={<div />}>
<EditComposer {...props} />
</Suspense>
);
}

View file

@ -43,32 +43,35 @@ interface EditWysiwygComposerProps {
className?: string;
}
export function EditWysiwygComposer({ editorStateTransfer, className, ...props }: EditWysiwygComposerProps) {
// Default needed for React.lazy
export default function EditWysiwygComposer({ editorStateTransfer, className, ...props }: EditWysiwygComposerProps) {
const initialContent = useInitialContent(editorStateTransfer);
const isReady = !editorStateTransfer || initialContent !== undefined;
const { editMessage, endEditing, onChange, isSaveDisabled } = useEditing(editorStateTransfer, initialContent);
if (!isReady) {
return null;
}
return (
isReady && (
<WysiwygComposer
className={classNames("mx_EditWysiwygComposer", className)}
initialContent={initialContent}
onChange={onChange}
onSend={editMessage}
{...props}
>
{(ref) => (
<>
<Content disabled={props.disabled} ref={ref} />
<EditionButtons
onCancelClick={endEditing}
onSaveClick={editMessage}
isSaveDisabled={isSaveDisabled}
/>
</>
)}
</WysiwygComposer>
)
<WysiwygComposer
className={classNames("mx_EditWysiwygComposer", className)}
initialContent={initialContent}
onChange={onChange}
onSend={editMessage}
{...props}
>
{(ref) => (
<>
<Content disabled={props.disabled} ref={ref} />
<EditionButtons
onCancelClick={endEditing}
onSaveClick={editMessage}
isSaveDisabled={isSaveDisabled}
/>
</>
)}
</WysiwygComposer>
);
}

View file

@ -49,7 +49,8 @@ interface SendWysiwygComposerProps {
menuPosition: AboveLeftOf;
}
export function SendWysiwygComposer({
// Default needed for React.lazy
export default function SendWysiwygComposer({
isRichTextEnabled,
e2eStatus,
menuPosition,

View file

@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
export { SendWysiwygComposer } from "./SendWysiwygComposer";
export { EditWysiwygComposer } from "./EditWysiwygComposer";
export {
DynamicImportSendWysiwygComposer as SendWysiwygComposer,
DynamicImportEditWysiwygComposer as EditWysiwygComposer,
} from "./DynamicImportWysiwygComposer";
export { sendMessage } from "./utils/message";

View file

@ -64,13 +64,35 @@ describe("EditWysiwygComposer", () => {
);
};
it("Should not render the component when not ready", async () => {
// When
const { rerender } = customRender(false);
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"), {
timeout: 2000,
});
rerender(
<MatrixClientContext.Provider value={mockClient}>
<RoomContext.Provider value={{ ...defaultRoomContext, room: undefined }}>
<EditWysiwygComposer disabled={false} editorStateTransfer={editorStateTransfer} />
</RoomContext.Provider>
</MatrixClientContext.Provider>,
);
// Then
await waitFor(() => expect(screen.queryByRole("textbox")).toBeNull());
});
describe("Initialize with content", () => {
it("Should initialize useWysiwyg with html content", async () => {
// When
customRender(false, editorStateTransfer);
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
// Then
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"), {
timeout: 2000,
});
await waitFor(() =>
expect(screen.getByRole("textbox")).toContainHTML(mockEvent.getContent()["formatted_body"]),
);

View file

@ -24,7 +24,7 @@ import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
import { Action } from "../../../../../src/dispatcher/actions";
import { IRoomState } from "../../../../../src/components/structures/RoomView";
import { createTestClient, flushPromises, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
import { SendWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer";
import { SendWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer/";
import { aboveLeftOf } from "../../../../../src/components/structures/ContextMenu";
import { ComposerInsertPayload, ComposerType } from "../../../../../src/dispatcher/payloads/ComposerInsertPayload";
import { setSelection } from "../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection";
@ -101,12 +101,12 @@ describe("SendWysiwygComposer", () => {
);
};
it("Should render WysiwygComposer when isRichTextEnabled is at true", () => {
it("Should render WysiwygComposer when isRichTextEnabled is at true", async () => {
// When
customRender(jest.fn(), jest.fn(), false, true);
// Then
expect(screen.getByTestId("WysiwygComposer")).toBeTruthy();
await waitFor(() => expect(screen.getByTestId("WysiwygComposer")).toBeTruthy());
});
it("Should render PlainTextComposer when isRichTextEnabled is at false", () => {