From 5024109572e27920eea30baf23b314803598a884 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sun, 1 May 2022 14:30:35 +0800
Subject: [PATCH] tiptap: fix update mind

---
 .../client/src/tiptap/wrappers/mind/index.tsx | 28 ++++++++++++++++++-
 .../tiptap/wrappers/mind/mind-elixir/index.ts | 11 ++++++++
 .../mind/mind-elixir/plugin/toolBar.tsx       |  6 +++-
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/tiptap/wrappers/mind/index.tsx b/packages/client/src/tiptap/wrappers/mind/index.tsx
index b07b98df..6557dd32 100644
--- a/packages/client/src/tiptap/wrappers/mind/index.tsx
+++ b/packages/client/src/tiptap/wrappers/mind/index.tsx
@@ -1,6 +1,7 @@
 import { NodeViewWrapper } from '@tiptap/react';
 import cls from 'classnames';
 import clone from 'clone';
+import deepEqual from 'deep-equal';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Spin, Typography } from '@douyinfe/semi-ui';
 import { Resizeable } from 'components/resizeable';
@@ -80,6 +81,17 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
 
     let mind = null;
 
+    let isEnter = false;
+    const onMouseEnter = () => {
+      isEnter = true;
+    };
+    const onMouseLeave = () => {
+      isEnter = false;
+    };
+
+    $container.current.addEventListener('onmouseenter', onMouseEnter);
+    $container.current.addEventListener('onMouseLeave', onMouseLeave);
+
     try {
       mind = new window.MindElixir({
         el: `#${containerId.current}`,
@@ -93,7 +105,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
         draggable: false, // TODO: 需要修复
         locale: 'zh_CN',
       });
-      mind.shouldPreventDefault = () => editor.isActive('mind');
+      mind.shouldPreventDefault = () => isEnter && editor.isActive('mind');
       mind.init();
       mind.bus.addListener('operation', onChange);
       $mind.current = mind;
@@ -103,12 +115,26 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
     }
 
     return () => {
+      if ($container.current) {
+        $container.current.removeEventListener('onmouseenter', onMouseEnter);
+        $container.current.removeEventListener('onMouseLeave', onMouseLeave);
+      }
+
       if (mind) {
         mind.destroy();
       }
     };
   }, [loading, editor, updateAttributes]);
 
+  useEffect(() => {
+    const mind = $mind.current;
+    if (!mind) return;
+    const newData = clone(data);
+    if (!deepEqual(newData, mind.getAllData())) {
+      mind.update(newData);
+    }
+  }, [data]);
+
   return (
     <NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}>
       <Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
diff --git a/packages/client/src/tiptap/wrappers/mind/mind-elixir/index.ts b/packages/client/src/tiptap/wrappers/mind/mind-elixir/index.ts
index 34ab804f..5b7eaa7a 100644
--- a/packages/client/src/tiptap/wrappers/mind/mind-elixir/index.ts
+++ b/packages/client/src/tiptap/wrappers/mind/mind-elixir/index.ts
@@ -403,6 +403,17 @@ MindElixir.prototype = {
     if (!this.overflowHidden) initMouseEvent(this);
   },
 
+  update(data) {
+    const { linkData, nodeData } = data || MindElixir.new('新文档');
+    if (linkData) {
+      this.linkData = linkData;
+    }
+    if (nodeData) {
+      this.nodeData = nodeData;
+    }
+    this.refresh();
+  },
+
   destroy: function () {
     this.bus.destroy();
     this.mindElixirBox.removeChild(this.container);
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 6e282ceb..114e15a9 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,5 @@
 import ReactDOM from 'react-dom';
-import { Button, Space } from '@douyinfe/semi-ui';
+import { Button, Space, Toast } from '@douyinfe/semi-ui';
 import {
   IconMindLeft,
   IconMindRight,
@@ -19,6 +19,10 @@ function Operation({ mind }) {
         theme="borderless"
         size="small"
         onClick={() => {
+          if (!mind.container.requestFullscreen) {
+            Toast.error('当前浏览器不支持全屏');
+            return;
+          }
           mind.container.requestFullscreen();
         }}
         icon={<IconMindFull style={{ fontSize: '0.85em' }} />}