feat: improve mind menu

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

@@ -47,7 +47,7 @@
 
   .jsmindWrap {
     position: absolute;
-    bottom: 0;
+    top: 10px;
     left: 50%;
     z-index: 200;
     max-width: 100%;
@@ -96,7 +96,7 @@
     }
   }
 
-  &:hover {
+  &.isActive {
     .jsmindWrap {
       opacity: 1;
     }

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

@@ -5,6 +5,7 @@ import { Button } from '@douyinfe/semi-ui';
 import { IconMinus, IconPlus } from '@douyinfe/semi-icons';
 import { Resizeable } from 'components/resizeable';
 import deepEqual from 'deep-equal';
+import { Mind } from '../../extensions/mind';
 // @ts-ignore
 import jsMind from './jsmind.jsx';
 import styles from './index.module.scss';
@@ -12,6 +13,7 @@ import styles from './index.module.scss';
 export const MindWrapper = ({ editor, node, updateAttributes }) => {
   const $container = useRef();
   const $mind = useRef<any>();
+  const isMindActive = editor.isActive(Mind.name);
   const isEditable = editor.isEditable;
   const { data, width, height = 100 } = node.attrs;
 
@@ -126,7 +128,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
   );
 
   return (
-    <NodeViewWrapper className={cls(styles.wrap)}>
+    <NodeViewWrapper className={cls(styles.wrap, isMindActive && styles.isActive)}>
       {isEditable ? (
         <Resizeable width={width} height={height} onChange={onResize}>
           {content}
@@ -134,7 +136,6 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
       ) : (
         <div style={{ display: 'inline-block', width, height }}>{content}</div>
       )}
-      {/* <NodeViewContent as="div"></NodeViewContent> */}
     </NodeViewWrapper>
   );
 };