fantasticit
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

client: improve render editor

pull/60/head
fantasticit 2022-05-26 00:57:05 +08:00
parent 12476d8c06
commit 85db72e0fe
4 changed files with 101 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/client/src/components/document/reader/index.tsx
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,29 +147,36 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
> >
<Spin /> <Spin />
</div> </div>
) : ( }
<CollaborationEditor error={docAuthError}
editable={false} normalContent={() => (
user={user} <>
id={documentId} <Seo title={document.title} />
type="document" <CollaborationEditor
renderInEditorPortal={renderAuthor} editable={false}
onAwarenessUpdate={triggerJoinUser} user={user}
/> id={documentId}
))} type="document"
{user && renderInEditorPortal={renderAuthor}
(docAuthLoading ? null : ( onAwarenessUpdate={triggerJoinUser}
<div className={styles.commentWrap}> renderOnMount={
<CommentEditor documentId={documentId} /> <div className={styles.commentWrap}>
</div> <CommentEditor documentId={documentId} />
))} </div>
{!isMobile && authority && authority.editable && container && ( }
<BackTop style={editBtnStyle} onClick={gotoEdit} target={() => container} visibilityHeight={200}> />
<IconEdit /> {!isMobile && authority && authority.editable && container && (
</BackTop> <BackTop style={editBtnStyle} onClick={gotoEdit} target={() => container} visibilityHeight={200}>
)} <IconEdit />
<ImageViewer containerSelector="#js-reader-container" /> </BackTop>
{container && <BackTop style={{ bottom: 65, right: isMobile ? 16 : 100 }} target={() => container} />} )}
<ImageViewer containerSelector="#js-reader-container" />
{container && (
<BackTop style={{ bottom: 65, right: isMobile ? 16 : 100 }} target={() => container} />
)}
</>
)}
/>
</div> </div>
</div> </div>
</div> </div>

40
packages/client/src/components/document/reader/public/index.tsx
View File

@ -100,25 +100,25 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
return ( return (
<div <div
id="js-share-document-editor-container" id="js-share-document-editor-container"
className={cls(styles.editorWrap, editorWrapClassNames)} className={cls(styles.editorWrap, editorWrapClassNames)}
style={{ fontSize }} style={{ fontSize }}
> >
{data && <Seo title={data.title} />} {data && <Seo title={data.title} />}
{mounted && <CollaborationEditor {mounted && <CollaborationEditor
menubar={false} menubar={false}
editable={false} editable={false}
user={null} user={null}
id={documentId} id={documentId}
type="document" type="document"
renderInEditorPortal={renderAuthor} renderInEditorPortal={renderAuthor}
/>} />}
<ImageViewer containerSelector="#js-share-document-editor-container" /> <ImageViewer containerSelector="#js-share-document-editor-container" />
<BackTop <BackTop
style={{ bottom: 65, right: isMobile ? 16 : 100 }} style={{ bottom: 65, right: isMobile ? 16 : 100 }}
target={() => document.querySelector('#js-share-document-editor-container').parentNode} target={() => document.querySelector('#js-share-document-editor-container').parentNode}
/> />
</div> </div>
) )
}, [error, data, mounted, editorWrapClassNames, fontSize]) }, [error, data, mounted, editorWrapClassNames, fontSize])
@ -161,7 +161,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
</Nav> </Nav>
</Header> </Header>
<Content className={styles.contentWrap}> <Content className={styles.contentWrap}>
{content} {content}
</Content> </Content>
</Layout> </Layout>
); );

82
packages/client/src/tiptap/editor/collaboration/collaboration/index.tsx
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,45 +95,48 @@ export const CollaborationEditor = forwardRef((props: ICollaborationEditorProps,
}, [hocuspocusProvider]); }, [hocuspocusProvider]);
return ( return (
<div className={styles.wrap}> <>
<DataRender <div className={styles.wrap}>
loading={loading} <DataRender
loadingContent={ loading={loading}
<div style={{ margin: 'auto' }}> loadingContent={
<Spin /> <div style={{ margin: 'auto' }}>
</div> <Spin />
} </div>
error={error} }
errorContent={(error) => ( error={error}
<div errorContent={(error) => (
style={{ <div
margin: '10%', style={{
display: 'flex', margin: '10%',
justifyContent: 'center', display: 'flex',
flexDirection: 'column', justifyContent: 'center',
alignItems: 'center', flexDirection: 'column',
}} alignItems: 'center',
> }}
<SecureDocumentIllustration /> >
<Text style={{ marginTop: 12 }} type="danger"> <SecureDocumentIllustration />
{(error && error.message) || '未知错误'} <Text style={{ marginTop: 12 }} type="danger">
</Text> {(error && error.message) || '未知错误'}
</div> </Text>
)} </div>
normalContent={() => ( )}
<EditorInstance normalContent={() => (
ref={$editor} <EditorInstance
editable={editable} ref={$editor}
menubar={menubar} editable={editable}
hocuspocusProvider={hocuspocusProvider} menubar={menubar}
onTitleUpdate={onTitleUpdate} hocuspocusProvider={hocuspocusProvider}
user={user} onTitleUpdate={onTitleUpdate}
status={status} user={user}
renderInEditorPortal={renderInEditorPortal} status={status}
/> renderInEditorPortal={renderInEditorPortal}
)} />
/> )}
</div> />
</div>
{loading || !!error ? null : renderOnMount}
</>
); );
}); });

5
packages/client/src/tiptap/editor/collaboration/collaboration/type.ts
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';