fix: fix render createUser

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

@@ -4,12 +4,14 @@ import { Layout } from '@douyinfe/semi-ui';
 import { IDocument } from '@think/domains';
 import { DEFAULT_EXTENSION, DocumentWithTitle } from 'components/tiptap';
 import { safeJSONParse } from 'helpers/json';
+import { CreateUser } from '../user';
 
 interface IProps {
   document: IDocument;
+  createUserContainerSelector: string;
 }
 
-export const DocumentContent: React.FC<IProps> = ({ document }) => {
+export const DocumentContent: React.FC<IProps> = ({ document, createUserContainerSelector }) => {
   const c = safeJSONParse(document.content);
   let json = c.default || c;
 
@@ -28,5 +30,10 @@ export const DocumentContent: React.FC<IProps> = ({ document }) => {
 
   if (!json) return null;
 
-  return <EditorContent editor={editor} />;
+  return (
+    <>
+      <EditorContent editor={editor} />
+      <CreateUser document={document} container={() => window.document.querySelector(createUserContainerSelector)} />
+    </>
+  );
 };

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

@@ -1,17 +1,6 @@
 import React, { useMemo, useEffect } from 'react';
 import cls from 'classnames';
-import {
-  Layout,
-  Nav,
-  Space,
-  Button,
-  Typography,
-  Skeleton,
-  Input,
-  Popover,
-  Modal,
-  BackTop,
-} from '@douyinfe/semi-ui';
+import { Layout, Nav, Space, Button, Typography, Skeleton, Input, Popover, Modal, BackTop } from '@douyinfe/semi-ui';
 import { IconArticle } from '@douyinfe/semi-icons';
 import { Seo } from 'components/seo';
 import { LogoImage, LogoText } from 'components/logo';
@@ -21,10 +10,10 @@ import { User } from 'components/user';
 import { Theme } from 'components/theme';
 import { useDocumentStyle } from 'hooks/useDocumentStyle';
 import { useWindowSize } from 'hooks/useWindowSize';
+import { useLazyMount } from 'hooks/useMount';
 import { usePublicDocument } from 'data/document';
 import { DocumentSkeleton } from 'components/tiptap';
-import { DocumentContent } from '../content';
-import { CreateUser } from '../user';
+import { DocumentContent } from './content';
 import styles from './index.module.scss';
 
 const { Header, Content } = Layout;
@@ -38,6 +27,7 @@ interface IProps {
 export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo = true }) => {
   if (!documentId) return null;
 
+  const mounted = useLazyMount();
   const { data, loading, error, query } = usePublicDocument(documentId);
   const { width: windowWidth } = useWindowSize();
   const { width, fontSize } = useDocumentStyle();
@@ -99,11 +89,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
             loading={loading}
             error={error}
             loadingContent={
-              <Skeleton
-                active
-                placeholder={<Skeleton.Title style={{ width: 80, marginBottom: 8 }} />}
-                loading={true}
-              />
+              <Skeleton active placeholder={<Skeleton.Title style={{ width: 80, marginBottom: 8 }} />} loading={true} />
             }
             normalContent={() => (
               <Text strong ellipsis={{ showTooltip: true }} style={{ width: ~~(windowWidth / 4) }}>
@@ -131,21 +117,12 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
                   style={{ fontSize }}
                   id="js-share-document-editor-container"
                 >
-                  <DocumentContent document={data} />
-                  <CreateUser
+                  <DocumentContent
                     document={data}
-                    container={() =>
-                      window.document.querySelector(
-                        '#js-share-document-editor-container .ProseMirror .title'
-                      )
-                    }
+                    createUserContainerSelector="#js-share-document-editor-container .ProseMirror .title"
                   />
                 </div>
-                <BackTop
-                  target={() =>
-                    document.querySelector('#js-share-document-editor-container').parentNode
-                  }
-                />
+                <BackTop target={() => document.querySelector('#js-share-document-editor-container').parentNode} />
               </>
             );
           }}

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

@@ -43,6 +43,8 @@ export const CreateUser: React.FC<{ document: IDocument; container: () => HTMLEl
 
   const el = container && container();
 
+  console.log(el);
+
   if (!el) return content;
   return createPortal(content, el);
 };