client: improve render editor

This commit is contained in:
fantasticit 2022-05-26 00:57:05 +08:00
parent 12476d8c06
commit 85db72e0fe
4 changed files with 101 additions and 85 deletions

View File

@ -133,9 +133,9 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
<div ref={setContainer}> <div ref={setContainer}>
<div className={cls(styles.editorWrap, editorWrapClassNames)} style={{ fontSize }}> <div className={cls(styles.editorWrap, editorWrapClassNames)} style={{ fontSize }}>
<div id="js-reader-container"> <div id="js-reader-container">
{document && <Seo title={document.title} />} <DataRender
{user && loading={docAuthLoading}
(docAuthLoading ? ( loadingContent={
<div <div
style={{ style={{
minHeight: 240, minHeight: 240,
@ -147,7 +147,11 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
> >
<Spin /> <Spin />
</div> </div>
) : ( }
error={docAuthError}
normalContent={() => (
<>
<Seo title={document.title} />
<CollaborationEditor <CollaborationEditor
editable={false} editable={false}
user={user} user={user}
@ -155,21 +159,24 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
type="document" type="document"
renderInEditorPortal={renderAuthor} renderInEditorPortal={renderAuthor}
onAwarenessUpdate={triggerJoinUser} onAwarenessUpdate={triggerJoinUser}
/> renderOnMount={
))}
{user &&
(docAuthLoading ? null : (
<div className={styles.commentWrap}> <div className={styles.commentWrap}>
<CommentEditor documentId={documentId} /> <CommentEditor documentId={documentId} />
</div> </div>
))} }
/>
{!isMobile && authority && authority.editable && container && ( {!isMobile && authority && authority.editable && container && (
<BackTop style={editBtnStyle} onClick={gotoEdit} target={() => container} visibilityHeight={200}> <BackTop style={editBtnStyle} onClick={gotoEdit} target={() => container} visibilityHeight={200}>
<IconEdit /> <IconEdit />
</BackTop> </BackTop>
)} )}
<ImageViewer containerSelector="#js-reader-container" /> <ImageViewer containerSelector="#js-reader-container" />
{container && <BackTop style={{ bottom: 65, right: isMobile ? 16 : 100 }} target={() => container} />} {container && (
<BackTop style={{ bottom: 65, right: isMobile ? 16 : 100 }} target={() => container} />
)}
</>
)}
/>
</div> </div>
</div> </div>
</div> </div>

View File

@ -26,6 +26,7 @@ export const CollaborationEditor = forwardRef((props: ICollaborationEditorProps,
onTitleUpdate, onTitleUpdate,
user, user,
menubar, menubar,
renderOnMount,
renderInEditorPortal, renderInEditorPortal,
onAwarenessUpdate, onAwarenessUpdate,
} = props; } = props;
@ -94,6 +95,7 @@ export const CollaborationEditor = forwardRef((props: ICollaborationEditorProps,
}, [hocuspocusProvider]); }, [hocuspocusProvider]);
return ( return (
<>
<div className={styles.wrap}> <div className={styles.wrap}>
<DataRender <DataRender
loading={loading} loading={loading}
@ -133,6 +135,8 @@ export const CollaborationEditor = forwardRef((props: ICollaborationEditorProps,
)} )}
/> />
</div> </div>
{loading || !!error ? null : renderOnMount}
</>
); );
}); });

View File

@ -43,6 +43,11 @@ export interface ICollaborationEditorProps {
* @element * @element
*/ */
renderInEditorPortal?: (element: HTMLElement) => React.ReactNode; renderInEditorPortal?: (element: HTMLElement) => React.ReactNode;
/**
*
*/
renderOnMount?: React.ReactNode;
} }
export type ProviderStatus = 'connecting' | 'connected' | 'disconnected' | 'loadCacheSuccess'; export type ProviderStatus = 'connecting' | 'connected' | 'disconnected' | 'loadCacheSuccess';