gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tiptap: update document-reference bubble menu ui

This commit is contained in:
fantasticit 2022-04-25 21:13:34 +08:00
parent 5b96e73aa5
commit de7954bb2a
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/client/src/tiptap/menus/document-reference/bubble.tsx
View File

@ -1,14 +1,17 @@
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { Space, Button, List, Popover } from '@douyinfe/semi-ui'; import { Space, Button, List, Popover, Typography } from '@douyinfe/semi-ui';
import { IconEdit, IconDelete } from '@douyinfe/semi-icons'; import { IconEdit, IconDelete } from '@douyinfe/semi-icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { DataRender } from 'components/data-render'; import { DataRender } from 'components/data-render';
import { IconDocument } from 'components/icons';
import { useWikiTocs } from 'data/wiki'; import { useWikiTocs } from 'data/wiki';
import { BubbleMenu } from '../../views/bubble-menu'; import { BubbleMenu } from '../../views/bubble-menu';
import { DocumentReference } from '../../extensions/document-reference'; import { DocumentReference } from '../../extensions/document-reference';
import { Divider } from '../../divider'; import { Divider } from '../../divider';
const { Text } = Typography;
export const DocumentReferenceBubbleMenu = ({ editor }) => { export const DocumentReferenceBubbleMenu = ({ editor }) => {
const { pathname, query } = useRouter(); const { pathname, query } = useRouter();
const wikiIdFromUrl = query?.wikiId; const wikiIdFromUrl = query?.wikiId;
@ -41,20 +44,31 @@ export const DocumentReferenceBubbleMenu = ({ editor }) => {
> >
<Space> <Space>
<Popover <Popover
spacing={10} spacing={15}
content={ content={
<DataRender <DataRender
loading={loading} loading={loading}
error={error} error={error}
normalContent={() => ( normalContent={() => (
<List <List
size="small"
style={{ maxHeight: 320, overflow: 'auto' }} style={{ maxHeight: 320, overflow: 'auto' }}
dataSource={tocs} dataSource={tocs}
renderItem={(item) => ( renderItem={(item) => (
<List.Item <List.Item
onClick={() => selectDoc(item)} onClick={() => selectDoc(item)}
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
main={<span style={{ color: 'var(--semi-color-text-0)', fontWeight: 500 }}>{item.title}</span>} main={
<div style={{ display: 'flex', alignItems: 'center' }}>
<IconDocument />
<Text
ellipsis={{ showTooltip: { opts: { content: item.title, position: 'right' } } }}
style={{ width: 150, paddingLeft: 6 }}
>
{item.title}
</Text>
</div>
}
/> />
)} )}
/> />
@ -62,6 +76,9 @@ export const DocumentReferenceBubbleMenu = ({ editor }) => {
/> />
} }
trigger="click" trigger="click"
position="bottomLeft"
showArrow
style={{ padding: 0 }}
> >
<Button size="small" type="tertiary" theme="borderless" icon={<IconEdit />} /> <Button size="small" type="tertiary" theme="borderless" icon={<IconEdit />} />
</Popover> </Popover>