From 9dd80bf5d467e858f75e84d25260c7d2b308350b Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Wed, 4 May 2022 19:37:33 +0800
Subject: [PATCH] fix: add image-viewer, update float button right position

---
 .../src/components/document/reader/index.tsx  | 20 ++++++++++++-------
 .../document/reader/public/index.tsx          |  7 ++++++-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/document/reader/index.tsx b/packages/client/src/components/document/reader/index.tsx
index c31b3146..0c36357f 100644
--- a/packages/client/src/components/document/reader/index.tsx
+++ b/packages/client/src/components/document/reader/index.tsx
@@ -4,6 +4,7 @@ import { createPortal } from 'react-dom';
 import cls from 'classnames';
 import { Layout, Nav, Space, Button, Typography, Skeleton, Tooltip, Popover, BackTop, Spin } from '@douyinfe/semi-ui';
 import { IconEdit, IconArticle } from '@douyinfe/semi-icons';
+import { ImageViewer } from 'components/image-viewer';
 import { Seo } from 'components/seo';
 import { DataRender } from 'components/data-render';
 import { DocumentShare } from 'components/document/share';
@@ -23,7 +24,7 @@ import styles from './index.module.scss';
 
 const { Header } = Layout;
 const { Text } = Typography;
-const EditBtnStyle = {
+const getEditBtnStyle = (right = 16) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -32,10 +33,10 @@ const EditBtnStyle = {
   borderRadius: '100%',
   backgroundColor: '#0077fa',
   color: '#fff',
-  right: 16,
+  right,
   bottom: 70,
   transform: 'translateY(-50px)',
-};
+});
 
 interface IProps {
   documentId: string;
@@ -97,6 +98,8 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
     [document, documentId, authority, isMobile, gotoEdit]
   );
 
+  const editBtnStyle = useMemo(() => getEditBtnStyle(isMobile ? 16 : 100), [isMobile]);
+
   if (!documentId) return null;
 
   return (
@@ -142,7 +145,7 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
               }
               normalContent={() => {
                 return (
-                  <>
+                  <div id="js-reader-container">
                     <Seo title={document.title} />
                     {user && (
                       <CollaborationEditor
@@ -160,12 +163,15 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
                       </div>
                     )}
                     {!isMobile && authority && authority.editable && container && (
-                      <BackTop style={EditBtnStyle} onClick={gotoEdit} target={() => container} visibilityHeight={200}>
+                      <BackTop style={editBtnStyle} onClick={gotoEdit} target={() => container} visibilityHeight={200}>
                         <IconEdit />
                       </BackTop>
                     )}
-                    {container && <BackTop style={{ bottom: 65, right: 16 }} target={() => container} />}
-                  </>
+                    <ImageViewer containerSelector="#js-reader-container" />
+                    {container && (
+                      <BackTop style={{ bottom: 65, right: isMobile ? 16 : 100 }} target={() => container} />
+                    )}
+                  </div>
                 );
               }}
             />
diff --git a/packages/client/src/components/document/reader/public/index.tsx b/packages/client/src/components/document/reader/public/index.tsx
index a9559447..726bc549 100644
--- a/packages/client/src/components/document/reader/public/index.tsx
+++ b/packages/client/src/components/document/reader/public/index.tsx
@@ -29,6 +29,7 @@ import { DocumentSkeleton } from 'tiptap/components/skeleton';
 import { CollaborationEditor } from 'tiptap/editor';
 import { Author } from '../author';
 import styles from './index.module.scss';
+import { useWindowSize } from 'hooks/use-window-size';
 
 const { Header, Content } = Layout;
 const { Text } = Typography;
@@ -42,6 +43,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
   const $form = useRef<FormApi>();
   const { data, loading, error, query } = usePublicDocument(documentId);
   const { width, fontSize } = useDocumentStyle();
+  const { isMobile } = useWindowSize();
   const editorWrapClassNames = useMemo(() => {
     return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth;
   }, [width]);
@@ -158,7 +160,10 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
                   renderInEditorPortal={renderAuthor}
                 />
                 <ImageViewer containerSelector="#js-share-document-editor-container" />
-                <BackTop target={() => document.querySelector('#js-share-document-editor-container').parentNode} />
+                <BackTop
+                  style={{ bottom: 65, right: isMobile ? 16 : 100 }}
+                  target={() => document.querySelector('#js-share-document-editor-container').parentNode}
+                />
               </div>
             );
           }}