tiptap: update document-reference bubble menu ui

pull/29/head
fantasticit 2022-04-25 21:13:34 +08:00
parent 5b96e73aa5
commit de7954bb2a
1 changed files with 20 additions and 3 deletions

View File

@ -1,14 +1,17 @@
import { useCallback } from 'react';
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 { Tooltip } from 'components/tooltip';
import { DataRender } from 'components/data-render';
import { IconDocument } from 'components/icons';
import { useWikiTocs } from 'data/wiki';
import { BubbleMenu } from '../../views/bubble-menu';
import { DocumentReference } from '../../extensions/document-reference';
import { Divider } from '../../divider';
const { Text } = Typography;
export const DocumentReferenceBubbleMenu = ({ editor }) => {
const { pathname, query } = useRouter();
const wikiIdFromUrl = query?.wikiId;
@ -41,20 +44,31 @@ export const DocumentReferenceBubbleMenu = ({ editor }) => {
>
<Space>
<Popover
spacing={10}
spacing={15}
content={
<DataRender
loading={loading}
error={error}
normalContent={() => (
<List
size="small"
style={{ maxHeight: 320, overflow: 'auto' }}
dataSource={tocs}
renderItem={(item) => (
<List.Item
onClick={() => selectDoc(item)}
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"
position="bottomLeft"
showArrow
style={{ padding: 0 }}
>
<Button size="small" type="tertiary" theme="borderless" icon={<IconEdit />} />
</Popover>