tiptap: update document-reference bubble menu ui

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

@@ -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>