imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Load RTE component only when needed (#9804)

Browse source 
Use react lazy to load rte component
This commit is contained in:
Florian Duros 2022-12-20 15:59:18 +01:00 • committed by GitHub
parent 26a01aba00
commit d6e447b934
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 92 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
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>
);
}