client: improve render editor

packages/client/src/components/document/reader/index.tsx

@@ -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} />}
+              <DataRender
-              {user &&
+                loading={docAuthLoading}
-                (docAuthLoading ? (
+                loadingContent={
                   <div
                     style={{
                       minHeight: 240,
@@ -147,7 +147,11 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
                   >
                     <Spin />
                   </div>
-                ) : (
+                }
+                error={docAuthError}
+                normalContent={() => (
+                  <>
+                    <Seo title={document.title} />
                     <CollaborationEditor
                       editable={false}
                       user={user}
@@ -155,21 +159,24 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
                       type="document"
                       renderInEditorPortal={renderAuthor}
                       onAwarenessUpdate={triggerJoinUser}
-                  />
+                      renderOnMount={
-                ))}
-              {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} />}
+                    {container && (
+                      <BackTop style={{ bottom: 65, right: isMobile ? 16 : 100 }} target={() => container} />
+                    )}
+                  </>
+                )}
+              />
             </div>
           </div>
         </div>

packages/client/src/tiptap/editor/collaboration/collaboration/index.tsx

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

packages/client/src/tiptap/editor/collaboration/collaboration/type.ts

@@ -43,6 +43,11 @@ export interface ICollaborationEditorProps {
    * @element 编辑器渲染父节点
    */
   renderInEditorPortal?: (element: HTMLElement) => React.ReactNode;
+
+  /**
+   * 子节点，在编辑器渲染后才会加载
+   */
+  renderOnMount?: React.ReactNode;
 }
 
 export type ProviderStatus = 'connecting' | 'connected' | 'disconnected' | 'loadCacheSuccess';