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 className={cls(styles.editorWrap, editorWrapClassNames)} style={{ fontSize }}>
<div id="js-reader-container">
{document && <Seo title={document.title} />}
{user &&
(docAuthLoading ? (
<DataRender
loading={docAuthLoading}
loadingContent={
<div
style={{
minHeight: 240,
@ -147,29 +147,36 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
>
<Spin />
</div>
) : (
<CollaborationEditor
editable={false}
user={user}
id={documentId}
type="document"
renderInEditorPortal={renderAuthor}
onAwarenessUpdate={triggerJoinUser}
/>
))}
{user &&
(docAuthLoading ? null : (
<div className={styles.commentWrap}>
<CommentEditor documentId={documentId} />
</div>
))}
{!isMobile && authority && authority.editable && container && (
<BackTop style={editBtnStyle} onClick={gotoEdit} target={() => container} visibilityHeight={200}>
<IconEdit />
</BackTop>
)}
<ImageViewer containerSelector="#js-reader-container" />
{container && <BackTop style={{ bottom: 65, right: isMobile ? 16 : 100 }} target={() => container} />}
}
error={docAuthError}
normalContent={() => (
<>
<Seo title={document.title} />
<CollaborationEditor
editable={false}
user={user}
id={documentId}
type="document"
renderInEditorPortal={renderAuthor}
onAwarenessUpdate={triggerJoinUser}
renderOnMount={
<div className={styles.commentWrap}>
<CommentEditor documentId={documentId} />
</div>
}
/>
{!isMobile && authority && authority.editable && container && (
<BackTop style={editBtnStyle} onClick={gotoEdit} target={() => container} visibilityHeight={200}>
<IconEdit />
</BackTop>
)}
<ImageViewer containerSelector="#js-reader-container" />
{container && (
<BackTop style={{ bottom: 65, right: isMobile ? 16 : 100 }} target={() => container} />
)}
</>
)}
/>
</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 (
<div
id="js-share-document-editor-container"
className={cls(styles.editorWrap, editorWrapClassNames)}
style={{ fontSize }}
>
{data && <Seo title={data.title} />}
{mounted && <CollaborationEditor
menubar={false}
editable={false}
user={null}
id={documentId}
type="document"
renderInEditorPortal={renderAuthor}
/>}
<ImageViewer containerSelector="#js-share-document-editor-container" />
<BackTop
style={{ bottom: 65, right: isMobile ? 16 : 100 }}
target={() => document.querySelector('#js-share-document-editor-container').parentNode}
/>
</div>
id="js-share-document-editor-container"
className={cls(styles.editorWrap, editorWrapClassNames)}
style={{ fontSize }}
>
{data && <Seo title={data.title} />}
{mounted && <CollaborationEditor
menubar={false}
editable={false}
user={null}
id={documentId}
type="document"
renderInEditorPortal={renderAuthor}
/>}
<ImageViewer containerSelector="#js-share-document-editor-container" />
<BackTop
style={{ bottom: 65, right: isMobile ? 16 : 100 }}
target={() => document.querySelector('#js-share-document-editor-container').parentNode}
/>
</div>
)
}, [error, data, mounted, editorWrapClassNames, fontSize])
@ -161,7 +161,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
</Nav>
</Header>
<Content className={styles.contentWrap}>
{content}
{content}
</Content>
</Layout>
);

82
packages/client/src/tiptap/editor/collaboration/collaboration/index.tsx
View File

@ -26,6 +26,7 @@ export const CollaborationEditor = forwardRef((props: ICollaborationEditorProps,
onTitleUpdate,
user,
menubar,
renderOnMount,
renderInEditorPortal,
onAwarenessUpdate,
} = props;
@ -94,45 +95,48 @@ export const CollaborationEditor = forwardRef((props: ICollaborationEditorProps,
}, [hocuspocusProvider]);
return (
<div className={styles.wrap}>
<DataRender
loading={loading}
loadingContent={
<div style={{ margin: 'auto' }}>
<Spin />
</div>
}
error={error}
errorContent={(error) => (
<div
style={{
margin: '10%',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
}}
>
<SecureDocumentIllustration />
<Text style={{ marginTop: 12 }} type="danger">
{(error && error.message) || '未知错误'}
</Text>
</div>
)}
normalContent={() => (
<EditorInstance
ref={$editor}
editable={editable}
menubar={menubar}
hocuspocusProvider={hocuspocusProvider}
onTitleUpdate={onTitleUpdate}
user={user}
status={status}
renderInEditorPortal={renderInEditorPortal}
/>
)}
/>
</div>
<>
<div className={styles.wrap}>
<DataRender
loading={loading}
loadingContent={
<div style={{ margin: 'auto' }}>
<Spin />
</div>
}
error={error}
errorContent={(error) => (
<div
style={{
margin: '10%',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
}}
>
<SecureDocumentIllustration />
<Text style={{ marginTop: 12 }} type="danger">
{(error && error.message) || '未知错误'}
</Text>
</div>
)}
normalContent={() => (
<EditorInstance
ref={$editor}
editable={editable}
menubar={menubar}
hocuspocusProvider={hocuspocusProvider}
onTitleUpdate={onTitleUpdate}
user={user}
status={status}
renderInEditorPortal={renderInEditorPortal}
/>
)}
/>
</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 编辑器渲染父节点
*/
renderInEditorPortal?: (element: HTMLElement) => React.ReactNode;
/**
* 子节点，在编辑器渲染后才会加载
*/
renderOnMount?: React.ReactNode;
}
export type ProviderStatus = 'connecting' | 'connected' | 'disconnected' | 'loadCacheSuccess';