From e934abf0b7670e6afda00c1a800b15bdd94b2245 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sun, 1 May 2022 20:28:33 +0800
Subject: [PATCH] tiptap: fix mind context menu dark style, add collapse button
 in toolbar

---
 .../src/tiptap/styles/mind/context-menu.scss  |   9 +-
 .../src/tiptap/styles/mind/toolbar.scss       |  26 ++-
 .../mind/mind-elixir/plugin/toolBar.tsx       | 166 ++++++++++--------
 3 files changed, 116 insertions(+), 85 deletions(-)

diff --git a/packages/client/src/tiptap/styles/mind/context-menu.scss b/packages/client/src/tiptap/styles/mind/context-menu.scss
index 30e2970f..be314e5c 100644
--- a/packages/client/src/tiptap/styles/mind/context-menu.scss
+++ b/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 #ecf0f1;
+  border-bottom: 1px solid var(--semi-color-border);
 }
 
 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 {
diff --git a/packages/client/src/tiptap/styles/mind/toolbar.scss b/packages/client/src/tiptap/styles/mind/toolbar.scss
index b41b94c3..61823fe4 100644
--- a/packages/client/src/tiptap/styles/mind/toolbar.scss
+++ b/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;
diff --git a/packages/client/src/tiptap/wrappers/mind/mind-elixir/plugin/toolBar.tsx b/packages/client/src/tiptap/wrappers/mind/mind-elixir/plugin/toolBar.tsx
index 114e15a9..c92382f7 100644
--- a/packages/client/src/tiptap/wrappers/mind/mind-elixir/plugin/toolBar.tsx
+++ b/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,94 +12,112 @@ 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 (
-    <Space spacing={2}>
-      <Button
-        type="tertiary"
-        theme="borderless"
-        size="small"
-        onClick={() => {
-          if (!mind.container.requestFullscreen) {
-            Toast.error('当前浏览器不支持全屏');
-            return;
-          }
-          mind.container.requestFullscreen();
-        }}
-        icon={<IconMindFull style={{ fontSize: '0.85em' }} />}
-      />
+    <>
+      <div className={cls('toolbar rb1', visible && 'is-visible')}>
+        <Space spacing={2}>
+          {/* <Button
+            type="tertiary"
+            theme="borderless"
+            size="small"
+            onClick={() => {
+              if (!mind.container.requestFullscreen) {
+                Toast.error('当前浏览器不支持全屏');
+                return;
+              }
+              mind.container.requestFullscreen();
+            }}
+            icon={<IconMindFull style={{ fontSize: '0.85em' }} />}
+          /> */}
 
-      <Button
-        type="tertiary"
-        theme="borderless"
-        size="small"
-        onClick={() => {
-          mind.toCenter();
-        }}
-        icon={<IconMindCenter style={{ fontSize: '0.85em' }} />}
-      />
+          <Button
+            type="tertiary"
+            theme="borderless"
+            size="small"
+            onClick={() => {
+              mind.toCenter();
+            }}
+            icon={<IconMindCenter style={{ fontSize: '0.85em' }} />}
+          />
 
-      <Button
-        type="tertiary"
-        theme="borderless"
-        size="small"
-        onClick={() => {
-          if (mind.scaleVal < 0.6) return;
-          mind.scale((mind.scaleVal -= 0.2));
-        }}
-        icon={<IconZoomOut style={{ fontSize: '0.85em' }} />}
-      />
+          <Button
+            type="tertiary"
+            theme="borderless"
+            size="small"
+            onClick={() => {
+              if (mind.scaleVal < 0.6) return;
+              mind.scale((mind.scaleVal -= 0.2));
+            }}
+            icon={<IconZoomOut style={{ fontSize: '0.85em' }} />}
+          />
 
-      <Button
-        type="tertiary"
-        theme="borderless"
-        size="small"
-        onClick={() => {
-          if (mind.scaleVal > 1.6) return;
-          mind.scale((mind.scaleVal += 0.2));
-        }}
-        icon={<IconZoomIn style={{ fontSize: '0.85em' }} />}
-      />
+          <Button
+            type="tertiary"
+            theme="borderless"
+            size="small"
+            onClick={() => {
+              if (mind.scaleVal > 1.6) return;
+              mind.scale((mind.scaleVal += 0.2));
+            }}
+            icon={<IconZoomIn style={{ fontSize: '0.85em' }} />}
+          />
 
-      <Divider />
+          <Divider />
 
-      <Button
-        type="tertiary"
-        theme="borderless"
-        size="small"
-        onClick={() => {
-          mind.initLeft();
-        }}
-        icon={<IconMindLeft style={{ fontSize: '0.85em' }} />}
-      />
+          <Button
+            type="tertiary"
+            theme="borderless"
+            size="small"
+            onClick={() => {
+              mind.initLeft();
+            }}
+            icon={<IconMindLeft style={{ fontSize: '0.85em' }} />}
+          />
 
-      <Button
-        type="tertiary"
-        theme="borderless"
-        size="small"
-        onClick={() => {
-          mind.initRight();
-        }}
-        icon={<IconMindRight style={{ fontSize: '0.85em' }} />}
-      />
+          <Button
+            type="tertiary"
+            theme="borderless"
+            size="small"
+            onClick={() => {
+              mind.initRight();
+            }}
+            icon={<IconMindRight style={{ fontSize: '0.85em' }} />}
+          />
 
-      <Button
-        type="tertiary"
-        theme="borderless"
-        size="small"
-        onClick={() => {
-          mind.initSide();
-        }}
-        icon={<IconMindSide style={{ fontSize: '0.85em' }} />}
-      />
-    </Space>
+          <Button
+            type="tertiary"
+            theme="borderless"
+            size="small"
+            onClick={() => {
+              mind.initSide();
+            }}
+            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);
 }