mirror of https://github.com/fantasticit/think.git
tiptap: update document-reference bubble menu ui
This commit is contained in:
parent
5b96e73aa5
commit
de7954bb2a
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue