mirror of https://github.com/fantasticit/think.git
client: improve render editor
This commit is contained in:
parent
12476d8c06
commit
85db72e0fe
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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';
|
||||||
|
|
Loading…
Reference in New Issue