tiptap: fix mind context menu dark style, add collapse button in toolbar

packages/client/src/tiptap/styles/mind/context-menu.scss

@@ -13,9 +13,10 @@ cmenu .menu-list {
   padding: 0;
   margin: 0;
   font: 300 15px Roboto, sans-serif;
-  color: #333;
+  color: var(--semi-color-text-0);
   list-style: none;
   box-shadow: 0 12px 15px 0 rgb(0 0 0 / 20%);
+  background-color: var(--semi-color-nav-bg);
 }
 
 cmenu .menu-list * {
@@ -27,8 +28,7 @@ cmenu .menu-list li {
   padding: 6px 10px;
   overflow: hidden;
   white-space: nowrap;
-  background-color: #fff;
+  border-bottom: 1px solid var(--semi-color-border);
-  border-bottom: 1px solid #ecf0f1;
 }
 
 cmenu .menu-list li a {
@@ -38,17 +38,14 @@ cmenu .menu-list li a {
 
 cmenu .menu-list li.disabled {
   color: #5e5e5e;
-  background-color: #f7f7f7;
 }
 
 cmenu .menu-list li.disabled:hover {
   cursor: default;
-  background-color: #f7f7f7;
 }
 
 cmenu .menu-list li:hover {
   cursor: pointer;
-  background-color: #ecf0f1;
 }
 
 cmenu .menu-list li:first-child {

packages/client/src/tiptap/styles/mind/toolbar.scss

@@ -2,7 +2,7 @@
 .toolbar {
   position: absolute;
   display: flex;
-  padding: 4px 8px;
+  padding: 2px 4px;
   overflow-x: auto;
   color: #fff;
   background-color: var(--semi-color-nav-bg);
@@ -16,16 +16,30 @@
   opacity: 0.5;
 }
 
-.rb {
+.rb1 {
+  right: 70px;
+  bottom: 20px;
+  font-family: iconfont;
+
+  width: 0;
+  padding: 0;
+
+  &.is-visible {
+    width: auto;
+    padding: 2px 4px;
+  }
+}
+
+.rb1 span + span {
+  margin-left: 10px;
+}
+
+.rb2 {
   right: 20px;
   bottom: 20px;
   font-family: iconfont;
 }
 
-.rb span + span {
-  margin-left: 10px;
-}
-
 .lt {
   top: 20px;
   left: 20px;

packages/client/src/tiptap/wrappers/mind/mind-elixir/plugin/toolBar.tsx

@@ -1,5 +1,7 @@
 import ReactDOM from 'react-dom';
+import cls from 'classnames';
 import { Button, Space, Toast } from '@douyinfe/semi-ui';
+import { IconDoubleChevronRight, IconDoubleChevronLeft } from '@douyinfe/semi-icons';
 import {
   IconMindLeft,
   IconMindRight,
@@ -10,11 +12,18 @@ import {
   IconZoomIn,
 } from 'components/icons';
 import { Divider } from 'tiptap/divider';
+import { useToggle } from 'hooks/use-toggle';
+import { useMemo } from 'react';
 
 function Operation({ mind }) {
+  const [visible, toggleVisible] = useToggle(true);
+  const CollpaseIcon = useMemo(() => (visible ? IconDoubleChevronRight : IconDoubleChevronLeft), [visible]);
+
   return (
+    <>
+      <div className={cls('toolbar rb1', visible && 'is-visible')}>
         <Space spacing={2}>
-      <Button
+          {/* <Button
             type="tertiary"
             theme="borderless"
             size="small"
@@ -26,7 +35,7 @@ function Operation({ mind }) {
               mind.container.requestFullscreen();
             }}
             icon={<IconMindFull style={{ fontSize: '0.85em' }} />}
-      />
+          /> */}
 
           <Button
             type="tertiary"
@@ -92,12 +101,23 @@ function Operation({ mind }) {
             icon={<IconMindSide style={{ fontSize: '0.85em' }} />}
           />
         </Space>
+      </div>
+      <div className="toolbar rb2">
+        <Button
+          type="tertiary"
+          theme="borderless"
+          size="small"
+          onClick={toggleVisible}
+          icon={<CollpaseIcon style={{ fontSize: '0.85em' }} />}
+        />
+      </div>
+    </>
   );
 }
 
 export default function (mind) {
   const div = document.createElement('div');
-  div.className = 'toolbar rb';
+  // div.className = 'toolbar rb';
   ReactDOM.render(<Operation mind={mind} />, div);
   mind.container.append(div);
 }