mirror of https://github.com/fantasticit/think.git
fix: fix render createUser
This commit is contained in:
parent
72c3b2f8ac
commit
1edcdd5513
|
@ -4,12 +4,14 @@ import { Layout } from '@douyinfe/semi-ui';
|
||||||
import { IDocument } from '@think/domains';
|
import { IDocument } from '@think/domains';
|
||||||
import { DEFAULT_EXTENSION, DocumentWithTitle } from 'components/tiptap';
|
import { DEFAULT_EXTENSION, DocumentWithTitle } from 'components/tiptap';
|
||||||
import { safeJSONParse } from 'helpers/json';
|
import { safeJSONParse } from 'helpers/json';
|
||||||
|
import { CreateUser } from '../user';
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
document: IDocument;
|
document: IDocument;
|
||||||
|
createUserContainerSelector: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DocumentContent: React.FC<IProps> = ({ document }) => {
|
export const DocumentContent: React.FC<IProps> = ({ document, createUserContainerSelector }) => {
|
||||||
const c = safeJSONParse(document.content);
|
const c = safeJSONParse(document.content);
|
||||||
let json = c.default || c;
|
let json = c.default || c;
|
||||||
|
|
||||||
|
@ -28,5 +30,10 @@ export const DocumentContent: React.FC<IProps> = ({ document }) => {
|
||||||
|
|
||||||
if (!json) return null;
|
if (!json) return null;
|
||||||
|
|
||||||
return <EditorContent editor={editor} />;
|
return (
|
||||||
|
<>
|
||||||
|
<EditorContent editor={editor} />
|
||||||
|
<CreateUser document={document} container={() => window.document.querySelector(createUserContainerSelector)} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
|
@ -1,17 +1,6 @@
|
||||||
import React, { useMemo, useEffect } from 'react';
|
import React, { useMemo, useEffect } from 'react';
|
||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import {
|
import { Layout, Nav, Space, Button, Typography, Skeleton, Input, Popover, Modal, BackTop } from '@douyinfe/semi-ui';
|
||||||
Layout,
|
|
||||||
Nav,
|
|
||||||
Space,
|
|
||||||
Button,
|
|
||||||
Typography,
|
|
||||||
Skeleton,
|
|
||||||
Input,
|
|
||||||
Popover,
|
|
||||||
Modal,
|
|
||||||
BackTop,
|
|
||||||
} from '@douyinfe/semi-ui';
|
|
||||||
import { IconArticle } from '@douyinfe/semi-icons';
|
import { IconArticle } from '@douyinfe/semi-icons';
|
||||||
import { Seo } from 'components/seo';
|
import { Seo } from 'components/seo';
|
||||||
import { LogoImage, LogoText } from 'components/logo';
|
import { LogoImage, LogoText } from 'components/logo';
|
||||||
|
@ -21,10 +10,10 @@ import { User } from 'components/user';
|
||||||
import { Theme } from 'components/theme';
|
import { Theme } from 'components/theme';
|
||||||
import { useDocumentStyle } from 'hooks/useDocumentStyle';
|
import { useDocumentStyle } from 'hooks/useDocumentStyle';
|
||||||
import { useWindowSize } from 'hooks/useWindowSize';
|
import { useWindowSize } from 'hooks/useWindowSize';
|
||||||
|
import { useLazyMount } from 'hooks/useMount';
|
||||||
import { usePublicDocument } from 'data/document';
|
import { usePublicDocument } from 'data/document';
|
||||||
import { DocumentSkeleton } from 'components/tiptap';
|
import { DocumentSkeleton } from 'components/tiptap';
|
||||||
import { DocumentContent } from '../content';
|
import { DocumentContent } from './content';
|
||||||
import { CreateUser } from '../user';
|
|
||||||
import styles from './index.module.scss';
|
import styles from './index.module.scss';
|
||||||
|
|
||||||
const { Header, Content } = Layout;
|
const { Header, Content } = Layout;
|
||||||
|
@ -38,6 +27,7 @@ interface IProps {
|
||||||
export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo = true }) => {
|
export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo = true }) => {
|
||||||
if (!documentId) return null;
|
if (!documentId) return null;
|
||||||
|
|
||||||
|
const mounted = useLazyMount();
|
||||||
const { data, loading, error, query } = usePublicDocument(documentId);
|
const { data, loading, error, query } = usePublicDocument(documentId);
|
||||||
const { width: windowWidth } = useWindowSize();
|
const { width: windowWidth } = useWindowSize();
|
||||||
const { width, fontSize } = useDocumentStyle();
|
const { width, fontSize } = useDocumentStyle();
|
||||||
|
@ -99,11 +89,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
|
||||||
loading={loading}
|
loading={loading}
|
||||||
error={error}
|
error={error}
|
||||||
loadingContent={
|
loadingContent={
|
||||||
<Skeleton
|
<Skeleton active placeholder={<Skeleton.Title style={{ width: 80, marginBottom: 8 }} />} loading={true} />
|
||||||
active
|
|
||||||
placeholder={<Skeleton.Title style={{ width: 80, marginBottom: 8 }} />}
|
|
||||||
loading={true}
|
|
||||||
/>
|
|
||||||
}
|
}
|
||||||
normalContent={() => (
|
normalContent={() => (
|
||||||
<Text strong ellipsis={{ showTooltip: true }} style={{ width: ~~(windowWidth / 4) }}>
|
<Text strong ellipsis={{ showTooltip: true }} style={{ width: ~~(windowWidth / 4) }}>
|
||||||
|
@ -131,21 +117,12 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
|
||||||
style={{ fontSize }}
|
style={{ fontSize }}
|
||||||
id="js-share-document-editor-container"
|
id="js-share-document-editor-container"
|
||||||
>
|
>
|
||||||
<DocumentContent document={data} />
|
<DocumentContent
|
||||||
<CreateUser
|
|
||||||
document={data}
|
document={data}
|
||||||
container={() =>
|
createUserContainerSelector="#js-share-document-editor-container .ProseMirror .title"
|
||||||
window.document.querySelector(
|
|
||||||
'#js-share-document-editor-container .ProseMirror .title'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<BackTop
|
<BackTop target={() => document.querySelector('#js-share-document-editor-container').parentNode} />
|
||||||
target={() =>
|
|
||||||
document.querySelector('#js-share-document-editor-container').parentNode
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -43,6 +43,8 @@ export const CreateUser: React.FC<{ document: IDocument; container: () => HTMLEl
|
||||||
|
|
||||||
const el = container && container();
|
const el = container && container();
|
||||||
|
|
||||||
|
console.log(el);
|
||||||
|
|
||||||
if (!el) return content;
|
if (!el) return content;
|
||||||
return createPortal(content, el);
|
return createPortal(content, el);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue