client: improve render editor

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

@@ -51,8 +51,7 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
   }, [document, documentId]);
 
   const actions = useMemo(
-    () =>
+    () => (
-      docAuthLoading ? null : (
       <Space>
         {document && authority.readable && (
           <DocumentCollaboration key="collaboration" wikiId={document.wikiId} documentId={documentId} />
@@ -63,7 +62,7 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
         <DocumentStyle />
       </Space>
     ),
-    [docAuthLoading, documentId, document, authority]
+    [documentId, document, authority]
   );
 
   useEffect(() => {
@@ -120,37 +119,19 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
         {isMobile && <div className={styles.mobileToolbar}>{actions}</div>}
       </header>
       <main className={styles.contentWrap}>
-        <DataRender
+        {docAuthError && (
-          loading={docAuthLoading}
-          loadingContent={
-            <div style={{ margin: '10vh auto' }}>
-              <Spin tip="正在为您读取文档中...">
-                {/* FIXME: semi-design 的问题，不加 div，文字会换行! */}
-                <div></div>
-              </Spin>
-            </div>
-          }
-          error={docAuthError}
-          errorContent={
           <div style={{ margin: '10vh', textAlign: 'center' }}>
             <SecureDocumentIllustration />
           </div>
-          }
+        )}
-          normalContent={() => {
+        {document && <Seo title={document.title} />}
-            return (
-              <>
-                <Seo title={document.title} />
         <Editor
           user={user}
-                  documentId={document.id}
+          documentId={documentId}
           authority={authority}
           className={editorWrapClassNames}
           style={{ fontSize }}
         />
-              </>
-            );
-          }}
-        />
       </main>
     </div>
   );

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

@@ -76,8 +76,7 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
   }, [document]);
 
   const actions = useMemo(
-    () =>
+    () => (
-      docAuthLoading ? null : (
       <Space>
         {document && authority.readable && (
           <DocumentCollaboration key="collaboration" wikiId={document.wikiId} documentId={documentId} />
@@ -97,13 +96,11 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
         <DocumentStyle />
       </Space>
     ),
-    [docAuthLoading, document, documentId, authority, gotoEdit]
+    [document, documentId, authority, gotoEdit]
   );
 
   const editBtnStyle = useMemo(() => getEditBtnStyle(isMobile ? 16 : 100), [isMobile]);
 
-  if (!documentId) return null;
-
   return (
     <div className={styles.wrap}>
       <Header className={styles.headerWrap}>
@@ -134,35 +131,21 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
       <Layout className={styles.contentWrap}>
         <div ref={setContainer}>
           <div className={cls(styles.editorWrap, editorWrapClassNames)} style={{ fontSize }}>
-            <DataRender
-              loading={docAuthLoading}
-              error={docAuthError}
-              loadingContent={
-                <div style={{ margin: '10vh auto' }}>
-                  <Spin tip="正在为您读取文档中...">
-                    {/* FIXME: semi-design 的问题，不加 div，文字会换行! */}
-                    <div></div>
-                  </Spin>
-                </div>
-              }
-              normalContent={() => {
-                return (
             <div id="js-reader-container">
-                    <Seo title={document.title} />
+              {document && <Seo title={document.title} />}
               {user && (
                 <CollaborationEditor
                   editable={false}
                   user={user}
                   id={documentId}
                   type="document"
-                        initialContent={document.content}
                   renderInEditorPortal={renderAuthor}
                   onAwarenessUpdate={triggerJoinUser}
                 />
               )}
               {user && (
                 <div className={styles.commentWrap}>
-                        <CommentEditor documentId={document.id} />
+                  <CommentEditor documentId={documentId} />
                 </div>
               )}
               {!isMobile && authority && authority.editable && container && (
@@ -171,13 +154,8 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
                 </BackTop>
               )}
               <ImageViewer containerSelector="#js-reader-container" />
-                    {container && (
+              {container && <BackTop style={{ bottom: 65, right: isMobile ? 16 : 100 }} target={() => container} />}
-                      <BackTop style={{ bottom: 65, right: isMobile ? 16 : 100 }} target={() => container} />
-                    )}
             </div>
-                );
-              }}
-            />
           </div>
         </div>
       </Layout>

packages/client/src/components/template/editor/index.tsx

@@ -1,7 +1,6 @@
 import { IconChevronLeft } from '@douyinfe/semi-icons';
-import { Button, Nav, Popconfirm, Space, Spin, Switch, Tooltip, Typography } from '@douyinfe/semi-ui';
+import { Button, Nav, Popconfirm, Space, Switch, Tooltip, Typography } from '@douyinfe/semi-ui';
 import cls from 'classnames';
-import { DataRender } from 'components/data-render';
 import { DocumentStyle } from 'components/document/style';
 import { Seo } from 'components/seo';
 import { Theme } from 'components/theme';
@@ -51,19 +50,9 @@ export const TemplateEditor: React.FC<IProps> = ({ templateId }) => {
     setTitle(data.title);
   }, [data]);
 
-  return (
-    <DataRender
-      loading={loading}
-      loadingContent={
-        <div style={{ margin: 24 }}>
-          <Spin></Spin>
-        </div>
-      }
-      error={error}
-      normalContent={() => {
   return (
     <>
-            <Seo title={data.title} />
+      {data && <Seo title={data.title} />}
       <div className={styles.wrap}>
         <header>
           <Nav
@@ -97,7 +86,7 @@ export const TemplateEditor: React.FC<IProps> = ({ templateId }) => {
         <main className={styles.contentWrap}>
           <div className={styles.editorWrap}>
             <div className={cls(styles.contentWrap, editorWrapClassNames)} style={{ fontSize }}>
-                    {mounted && (
+              {mounted && data && (
                 <CollaborationEditor
                   menubar
                   editable
@@ -113,7 +102,4 @@ export const TemplateEditor: React.FC<IProps> = ({ templateId }) => {
       </div>
     </>
   );
-      }}
-    />
-  );
 };

packages/client/src/components/template/editor/jhuhhkh.tsx

@@ -1,89 +0,0 @@
-import { IconChevronLeft } from '@douyinfe/semi-icons';
-import { Button, Nav, Popconfirm, Space, Switch, Tooltip, Typography } from '@douyinfe/semi-ui';
-import { ILoginUser, ITemplate } from '@think/domains';
-import cls from 'classnames';
-import { DocumentStyle } from 'components/document/style';
-import { Theme } from 'components/theme';
-import { User } from 'components/user';
-import { useDocumentStyle } from 'hooks/use-document-style';
-import { useWindowSize } from 'hooks/use-window-size';
-import Router from 'next/router';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { CollaborationEditor } from 'tiptap/editor';
-
-import styles from './index.module.scss';
-
-const { Text } = Typography;
-
-interface IProps {
-  user: ILoginUser;
-  data: ITemplate;
-  updateTemplate: (arg) => Promise<ITemplate>;
-  deleteTemplate: () => Promise<void>;
-}
-
-export const Editor: React.FC<IProps> = ({ user, data, updateTemplate, deleteTemplate }) => {
-  const { width: windowWidth } = useWindowSize();
-  const [title, setTitle] = useState(data.title);
-  const [isPublic, setPublic] = useState(false);
-  const { width, fontSize } = useDocumentStyle();
-  const editorWrapClassNames = useMemo(() => {
-    return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth;
-  }, [width]);
-
-  const goback = useCallback(() => {
-    Router.back();
-  }, []);
-
-  const handleDelte = useCallback(() => {
-    deleteTemplate().then(() => {
-      goback();
-    });
-  }, [deleteTemplate, goback]);
-
-  useEffect(() => {
-    if (!data) return;
-    setPublic(data.isPublic);
-  }, [data]);
-
-  return (
-    <div className={styles.wrap}>
-      <header>
-        <Nav
-          style={{ overflow: 'auto' }}
-          mode="horizontal"
-          header={
-            <>
-              <Tooltip content="返回" position="bottom">
-                <Button onClick={goback} icon={<IconChevronLeft />} style={{ marginRight: 16 }} />
-              </Tooltip>
-              <Text strong ellipsis={{ showTooltip: true }} style={{ width: ~~(windowWidth / 4) }}>
-                {title}
-              </Text>
-            </>
-          }
-          footer={
-            <Space>
-              <DocumentStyle />
-              <Tooltip position="bottom" content={isPublic ? '公开模板' : '个人模板'}>
-                <Switch onChange={(v) => updateTemplate({ isPublic: v })}></Switch>
-              </Tooltip>
-              <Popconfirm title="删除模板" content="模板删除后不可恢复，谨慎操作！" onConfirm={handleDelte}>
-                <Button type="danger">删除</Button>
-              </Popconfirm>
-              <Theme />
-              <User />
-            </Space>
-          }
-        ></Nav>
-      </header>
-      <main className={styles.contentWrap}>
-        <div className={styles.editorWrap}>
-          <div className={cls(styles.contentWrap, editorWrapClassNames)} style={{ fontSize }}>
-            <CollaborationEditor menubar editable user={user} id={data.id} type="template" onTitleUpdate={setTitle} />
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-};