client: update editor

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

@@ -21,19 +21,19 @@ export const Author: React.FC<IProps> = ({ document }) => {
       }}
     >
       <Space>
-        <Avatar size="small" src={document.createUser && document.createUser.avatar}>
+        <Avatar size="small" src={document && document.createUser && document.createUser.avatar}>
           <IconUser />
         </Avatar>
         <div>
           <p style={{ margin: 0 }}>
             创建者：
-            {document.createUser && document.createUser.name}
+            {document && document.createUser && document.createUser.name}
           </p>
           <p style={{ margin: '8px 0 0' }}>
             最近更新日期：
-            <LocaleTime date={document.updatedAt} />
+            <LocaleTime date={document && document.updatedAt} />
             {' ⦁ '}阅读量：
-            {document.views}
+            {document && document.views}
           </p>
         </div>
       </Space>

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

@@ -25,7 +25,6 @@ import { IsOnMobile } from 'hooks/use-on-mobile';
 import Link from 'next/link';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { DocumentSkeleton } from 'tiptap/components/skeleton';
 import { CollaborationEditor } from 'tiptap/editor';
 
 import { Author } from '../author';
@@ -72,6 +71,57 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
 
   if (!documentId) return null;
 
+  const content = useMemo(() => {
+    if (error) {
+      // @ts-ignore
+      if (error.statusCode === 400) {
+        return (
+          <div>
+            <Seo title={'输入密码后查看'} />
+            <Form
+              style={{ width: 320, maxWidth: 'calc(100vw - 160px)', margin: '10vh auto' }}
+              initValues={{ password: '' }}
+              getFormApi={(formApi) => ($form.current = formApi)}
+              labelPosition="left"
+              onSubmit={handleOk}
+              layout="horizontal"
+            >
+              <Form.Input autofocus label="密码" field="password" placeholder="请输入密码" />
+              <Button type="primary" theme="solid" htmlType="submit">
+                提交
+              </Button>
+            </Form>
+          </div>
+        );
+      }
+      // @ts-ignore
+      return <Text>{error.message || error || '未知错误'}</Text>;
+    }
+
+    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>
+    )
+  }, [error, data, mounted])
+
   return (
     <Layout className={styles.wrap}>
       <Header className={styles.headerWrap}>
@@ -111,62 +161,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
         </Nav>
       </Header>
       <Content className={styles.contentWrap}>
-        <DataRender
+         {content}
-          loading={loading}
-          error={error}
-          errorContent={(error) => {
-            if (error.statusCode === 400) {
-              return (
-                <div>
-                  <Seo title={'输入密码后查看'} />
-                  <Form
-                    style={{ width: 320, maxWidth: 'calc(100vw - 160px)', margin: '10vh auto' }}
-                    initValues={{ password: '' }}
-                    getFormApi={(formApi) => ($form.current = formApi)}
-                    labelPosition="left"
-                    onSubmit={handleOk}
-                    layout="horizontal"
-                  >
-                    <Form.Input autofocus label="密码" field="password" placeholder="请输入密码" />
-                    <Button type="primary" theme="solid" htmlType="submit">
-                      提交
-                    </Button>
-                  </Form>
-                </div>
-              );
-            }
-            return <Text>{error.message || error || '未知错误'}</Text>;
-          }}
-          loadingContent={
-            <div className={cls(styles.editorWrap, editorWrapClassNames)} style={{ fontSize }}>
-              <DocumentSkeleton />
-            </div>
-          }
-          normalContent={() => {
-            return (
-              <div
-                id="js-share-document-editor-container"
-                className={cls(styles.editorWrap, editorWrapClassNames)}
-                style={{ fontSize }}
-              >
-                <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>
-            );
-          }}
-        />
       </Content>
     </Layout>
   );

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

@@ -28,12 +28,6 @@ export interface ICollaborationEditorProps {
    */
   user: ILoginUser | null;
 
-  /**
-   * 初始内容
-   * websocket 连接比较耗时，可以先用初始内容展现
-   */
-  initialContent?: string;
-
   /**
    * 文档标题变动
    */