tiptap: add title

packages/client/src/tiptap/core/wrappers/flow/index.module.scss

@@ -20,10 +20,28 @@
     }
   }
 
+  .title {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 2;
+
+    .icon {
+      display: flex;
+      width: 18px;
+      height: 18px;
+      color: #fff;
+      background-color: #f80;
+      border-radius: 2px;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
   .toolbarWrap {
     position: absolute;
-    right: 20px;
+    right: 10px;
-    bottom: 20px;
+    bottom: 10px;
     z-index: 2;
     display: flex;
     padding: 2px 4px;

packages/client/src/tiptap/core/wrappers/flow/index.tsx

@@ -1,7 +1,7 @@
 import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui';
 import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
-import { IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
+import { IconFlow, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
 import { Resizeable } from 'components/resizeable';
 import { useToggle } from 'hooks/use-toggle';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -13,7 +13,6 @@ import styles from './index.module.scss';
 
 const { Text } = Typography;
 const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
-const ICON_STYLE = { fontSize: '0.85em' };
 
 export const FlowWrapper = ({ editor, node, updateAttributes }) => {
   const isEditable = editor.isEditable;
@@ -22,7 +21,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
   const { data, width, height } = node.attrs;
   const $graph = useRef(null);
   const $container = useRef<HTMLElement>();
-  const [bgColor, setBgColor] = useState('var(--semi-color-fill-0)');
+  const [bgColor, setBgColor] = useState('var(--semi-color-bg-3)');
   const [loading, toggleLoading] = useToggle(true);
   const [error, setError] = useState(null);
 
@@ -103,31 +102,20 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
           {!loading && !error && <div style={{ maxHeight: '100%' }} ref={setMxgraph}></div>}
         </div>
 
+        <div className={styles.title}>
+          <Space>
+            <span className={styles.icon}>
+              <IconFlow />
+            </span>
+            流程图
+          </Space>
+        </div>
+
         <div className={styles.toolbarWrap}>
           <Space spacing={2}>
-            <Button
+            <Button type="tertiary" theme="borderless" size="small" onClick={center} icon={<IconMindCenter />} />
-              type="tertiary"
+            <Button type="tertiary" theme="borderless" size="small" onClick={zoomOut} icon={<IconZoomOut />} />
-              theme="borderless"
+            <Button type="tertiary" theme="borderless" size="small" onClick={zoomIn} icon={<IconZoomIn />} />
-              size="small"
-              onClick={center}
-              icon={<IconMindCenter style={ICON_STYLE} />}
-            />
-
-            <Button
-              type="tertiary"
-              theme="borderless"
-              size="small"
-              onClick={zoomOut}
-              icon={<IconZoomOut style={ICON_STYLE} />}
-            />
-
-            <Button
-              type="tertiary"
-              theme="borderless"
-              size="small"
-              onClick={zoomIn}
-              icon={<IconZoomIn style={ICON_STYLE} />}
-            />
           </Space>
         </div>
       </Resizeable>

packages/client/src/tiptap/core/wrappers/mind/index.module.scss

@@ -13,10 +13,28 @@
     }
   }
 
+  .title {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 2;
+
+    .icon {
+      display: flex;
+      width: 18px;
+      height: 18px;
+      color: #fff;
+      background-color: #f80;
+      border-radius: 2px;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
   .mindHandlerWrap {
     position: absolute;
-    right: 20px;
+    right: 10px;
-    bottom: 20px;
+    bottom: 10px;
     z-index: 2;
     padding: 2px 4px;
     background-color: var(--semi-color-bg-2);

packages/client/src/tiptap/core/wrappers/mind/index.tsx

@@ -1,7 +1,7 @@
-import { Button, Spin, Typography } from '@douyinfe/semi-ui';
+import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui';
 import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
-import { IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
+import { IconMind, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
 import { Resizeable } from 'components/resizeable';
 import { Tooltip } from 'components/tooltip';
 import deepEqual from 'deep-equal';
@@ -110,33 +110,30 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
             <div style={{ height: '100%', maxHeight: '100%', overflow: 'hidden' }} ref={setMind}></div>
           )}
 
+          <div className={styles.title}>
+            <Space>
+              <span className={styles.icon}>
+                <IconMind />
+              </span>
+              思维导图
+            </Space>
+          </div>
+
           <div className={styles.mindHandlerWrap}>
             <Tooltip content="居中">
-              <Button
+              <Button size="small" theme="borderless" type="tertiary" icon={<IconMindCenter />} onClick={setCenter} />
-                size="small"
-                theme="borderless"
-                type="tertiary"
-                icon={<IconMindCenter style={{ fontSize: '0.85em' }} />}
-                onClick={setCenter}
-              />
             </Tooltip>
             <Tooltip content="缩小">
               <Button
                 size="small"
                 theme="borderless"
                 type="tertiary"
-                icon={<IconZoomOut style={{ fontSize: '0.85em' }} />}
+                icon={<IconZoomOut />}
                 onClick={setZoom('minus')}
               />
             </Tooltip>
             <Tooltip content="放大">
-              <Button
+              <Button size="small" theme="borderless" type="tertiary" icon={<IconZoomIn />} onClick={setZoom('plus')} />
-                size="small"
-                theme="borderless"
-                type="tertiary"
-                icon={<IconZoomIn style={{ fontSize: '0.85em' }} />}
-                onClick={setZoom('plus')}
-              />
             </Tooltip>
           </div>
         </div>