From 85db72e0fe093bd3ddfa43a766264802c13e4baa Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Thu, 26 May 2022 00:57:05 +0800
Subject: [PATCH] client: improve render editor

---
 .../src/components/document/reader/index.tsx  | 59 +++++++------
 .../document/reader/public/index.tsx          | 40 ++++-----
 .../collaboration/collaboration/index.tsx     | 82 ++++++++++---------
 .../collaboration/collaboration/type.ts       |  5 ++
 4 files changed, 101 insertions(+), 85 deletions(-)

diff --git a/packages/client/src/components/document/reader/index.tsx b/packages/client/src/components/document/reader/index.tsx
index 12ffc66c..c34ba1dd 100644
--- a/packages/client/src/components/document/reader/index.tsx
+++ b/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} />}
-              {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>
diff --git a/packages/client/src/components/document/reader/public/index.tsx b/packages/client/src/components/document/reader/public/index.tsx
index 45570400..177eb0fc 100644
--- a/packages/client/src/components/document/reader/public/index.tsx
+++ b/packages/client/src/components/document/reader/public/index.tsx
@@ -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>
   );
diff --git a/packages/client/src/tiptap/editor/collaboration/collaboration/index.tsx b/packages/client/src/tiptap/editor/collaboration/collaboration/index.tsx
index e85c7573..7d05c92c 100644
--- a/packages/client/src/tiptap/editor/collaboration/collaboration/index.tsx
+++ b/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,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}
+    </>
   );
 });
 
diff --git a/packages/client/src/tiptap/editor/collaboration/collaboration/type.ts b/packages/client/src/tiptap/editor/collaboration/collaboration/type.ts
index 39a0e62e..d86a7085 100644
--- a/packages/client/src/tiptap/editor/collaboration/collaboration/type.ts
+++ b/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';