client: add image-viewer

This commit is contained in:
fantasticit 2022-05-30 17:51:14 +08:00
parent 990152b11c
commit cad806272d
2 changed files with 4 additions and 0 deletions

View File

@ -3,6 +3,7 @@ import { HocuspocusProvider } from '@hocuspocus/provider';
import cls from 'classnames'; import cls from 'classnames';
import { Banner } from 'components/banner'; import { Banner } from 'components/banner';
import { CommentEditor } from 'components/document/comments'; import { CommentEditor } from 'components/document/comments';
import { ImageViewer } from 'components/image-viewer';
import { LogoName } from 'components/logo'; import { LogoName } from 'components/logo';
import { getRandomColor } from 'helpers/color'; import { getRandomColor } from 'helpers/color';
import { isAndroid, isIOS } from 'helpers/env'; import { isAndroid, isIOS } from 'helpers/env';
@ -197,6 +198,7 @@ export const EditorInstance = forwardRef((props: IProps, ref) => {
<Tocs editor={editor} getContainer={getTocsContainer} /> <Tocs editor={editor} getContainer={getTocsContainer} />
</div> </div>
{protals} {protals}
<ImageViewer container={$mainContainer.current} />
</main> </main>
<BackTop <BackTop
target={() => $mainContainer.current} target={() => $mainContainer.current}

View File

@ -1,4 +1,5 @@
import { BackTop } from '@douyinfe/semi-ui'; import { BackTop } from '@douyinfe/semi-ui';
import { ImageViewer } from 'components/image-viewer';
import { isMobile } from 'helpers/env'; import { isMobile } from 'helpers/env';
import { safeJSONParse } from 'helpers/json'; import { safeJSONParse } from 'helpers/json';
import React, { useCallback, useMemo, useRef } from 'react'; import React, { useCallback, useMemo, useRef } from 'react';
@ -38,6 +39,7 @@ export const ReaderEditor: React.FC<IProps> = ({ content }) => {
<div className={styles.tocsWrap}> <div className={styles.tocsWrap}>
<Tocs editor={editor} getContainer={getTocsContainer} /> <Tocs editor={editor} getContainer={getTocsContainer} />
</div> </div>
<ImageViewer container={$mainContainer.current} />
</main> </main>
<BackTop <BackTop
target={() => $mainContainer.current} target={() => $mainContainer.current}