From 43ed50b1375d35646850ba0aa4ea9b5dfed64999 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Tue, 23 Aug 2022 10:48:22 +0800
Subject: [PATCH] tiptap: fix menu

---
 packages/client/src/tiptap/core/extensions/status.ts  |  2 +-
 .../src/tiptap/core/menus/excalidraw/bubble.tsx       |  2 +-
 packages/client/src/tiptap/core/menus/redo/index.tsx  |  2 +-
 packages/client/src/tiptap/core/menus/text/index.tsx  | 11 ++++++-----
 .../client/src/tiptap/core/menus/underline/index.tsx  |  4 +++-
 .../client/src/tiptap/core/wrappers/status/index.tsx  |  6 ++++--
 .../editor/collaboration/collaboration/editor.tsx     |  6 +++++-
 .../editor/collaboration/collaboration/menubar.tsx    |  3 +++
 8 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/tiptap/core/extensions/status.ts b/packages/client/src/tiptap/core/extensions/status.ts
index df043664..2edca440 100644
--- a/packages/client/src/tiptap/core/extensions/status.ts
+++ b/packages/client/src/tiptap/core/extensions/status.ts
@@ -47,7 +47,7 @@ export const Status = Node.create({
         parseHTML: getDatasetAttribute('borderColor'),
       },
       text: {
-        default: '请设置状态内容',
+        default: '',
         parseHTML: getDatasetAttribute('text'),
       },
     };
diff --git a/packages/client/src/tiptap/core/menus/excalidraw/bubble.tsx b/packages/client/src/tiptap/core/menus/excalidraw/bubble.tsx
index d8ac58a4..62459b19 100644
--- a/packages/client/src/tiptap/core/menus/excalidraw/bubble.tsx
+++ b/packages/client/src/tiptap/core/menus/excalidraw/bubble.tsx
@@ -52,7 +52,7 @@ export const ExcalidrawBubbleMenu = ({ editor }) => {
     <BubbleMenu
       className={'bubble-menu'}
       editor={editor}
-      pluginKey="flow-bubble-menu"
+      pluginKey="excalidraw-bubble-menu"
       shouldShow={shouldShow}
       tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
     >
diff --git a/packages/client/src/tiptap/core/menus/redo/index.tsx b/packages/client/src/tiptap/core/menus/redo/index.tsx
index f69f432a..35d73ff1 100644
--- a/packages/client/src/tiptap/core/menus/redo/index.tsx
+++ b/packages/client/src/tiptap/core/menus/redo/index.tsx
@@ -8,7 +8,7 @@ export const Redo: React.FC<{ editor: Editor }> = ({ editor }) => {
   const redo = useCallback(() => editor.chain().focus().redo().run(), [editor]);
 
   return (
-    <Tooltip content="撤销">
+    <Tooltip content="重做">
       <Button onClick={redo} icon={<IconRedo />} type="tertiary" theme="borderless" />
     </Tooltip>
   );
diff --git a/packages/client/src/tiptap/core/menus/text/index.tsx b/packages/client/src/tiptap/core/menus/text/index.tsx
index 62e4e63f..b904f13c 100644
--- a/packages/client/src/tiptap/core/menus/text/index.tsx
+++ b/packages/client/src/tiptap/core/menus/text/index.tsx
@@ -14,6 +14,7 @@ import { Image } from 'tiptap/core/extensions/image';
 import { Katex } from 'tiptap/core/extensions/katex';
 import { Link } from 'tiptap/core/extensions/link';
 import { Mind } from 'tiptap/core/extensions/mind';
+import { Status } from 'tiptap/core/extensions/status';
 import { Table } from 'tiptap/core/extensions/table';
 import { TableOfContents } from 'tiptap/core/extensions/table-of-contents';
 import { Title } from 'tiptap/core/extensions/title';
@@ -45,19 +46,19 @@ const OTHER_BUBBLE_MENU_TYPES = [
   DocumentChildren.name,
   Katex.name,
   HorizontalRule.name,
+  Status.name,
 ];
 
 export const Text = ({ editor }) => {
-  const shouldShow = useCallback(
-    () => !editor.state.selection.empty && OTHER_BUBBLE_MENU_TYPES.every((type) => !editor.isActive(type)),
-    [editor]
-  );
+  const shouldShow = useCallback(() => {
+    return !editor.state.selection.empty && OTHER_BUBBLE_MENU_TYPES.every((type) => !editor.isActive(type));
+  }, [editor]);
 
   return (
     <BubbleMenu
       className={'bubble-menu'}
       editor={editor}
-      pluginKey="code-block-bubble-menu"
+      pluginKey="text-bubble-menu"
       shouldShow={shouldShow}
       tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
     >
diff --git a/packages/client/src/tiptap/core/menus/underline/index.tsx b/packages/client/src/tiptap/core/menus/underline/index.tsx
index 58c1aebb..5887ebb8 100644
--- a/packages/client/src/tiptap/core/menus/underline/index.tsx
+++ b/packages/client/src/tiptap/core/menus/underline/index.tsx
@@ -4,17 +4,19 @@ import { Tooltip } from 'components/tooltip';
 import React, { useCallback } from 'react';
 import { Editor } from 'tiptap/core';
 import { Title } from 'tiptap/core/extensions/title';
+import { Underline as UnderlineExtension } from 'tiptap/core/extensions/underline';
 import { useActive } from 'tiptap/core/hooks/use-active';
 
 export const Underline: React.FC<{ editor: Editor }> = ({ editor }) => {
   const isTitleActive = useActive(editor, Title.name);
+  const isUnderlineActive = useActive(editor, UnderlineExtension.name);
 
   const toggleUnderline = useCallback(() => editor.chain().focus().toggleUnderline().run(), [editor]);
 
   return (
     <Tooltip content="下划线">
       <Button
-        theme={editor.isActive('underline') ? 'light' : 'borderless'}
+        theme={isUnderlineActive ? 'light' : 'borderless'}
         type="tertiary"
         icon={<IconUnderline />}
         onClick={toggleUnderline}
diff --git a/packages/client/src/tiptap/core/wrappers/status/index.tsx b/packages/client/src/tiptap/core/wrappers/status/index.tsx
index 98857773..4f8b5f44 100644
--- a/packages/client/src/tiptap/core/wrappers/status/index.tsx
+++ b/packages/client/src/tiptap/core/wrappers/status/index.tsx
@@ -58,13 +58,15 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
   useEffect(() => {
     if (defaultShowPicker && user && user.id === createUser) {
       toggleVisible(true);
-      setTimeout(() => ref.current?.focus(), 100);
+      setTimeout(() => ref.current?.focus(), 200);
     }
   }, [defaultShowPicker, toggleVisible, createUser, user]);
 
   useEffect(() => {
     if (visible) {
-      ref.current?.focus();
+      setTimeout(() => {
+        ref.current?.focus();
+      }, 200);
     } else {
       updateAttributes({ text: currentText });
     }
diff --git a/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx b/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx
index 5b956ca1..1188ec35 100644
--- a/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx
+++ b/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx
@@ -165,7 +165,11 @@ export const EditorInstance = forwardRef((props: IProps, ref) => {
       {(!online || status === 'disconnected') && (
         <Banner
           type="warning"
-          description="我们已与您断开连接，您可以继续编辑文档。一旦重新连接，我们会自动重新提交数据。"
+          description={
+            editable
+              ? '我们已与您断开连接，您可以继续编辑文档。一旦重新连接，我们会自动重新提交数据。'
+              : '我们已与您断开连接，您可以继续阅读文档。一旦重新连接，我们会自动重新刷新数据。'
+          }
         />
       )}
 
diff --git a/packages/client/src/tiptap/editor/collaboration/collaboration/menubar.tsx b/packages/client/src/tiptap/editor/collaboration/collaboration/menubar.tsx
index 3fb808f3..a72310d4 100644
--- a/packages/client/src/tiptap/editor/collaboration/collaboration/menubar.tsx
+++ b/packages/client/src/tiptap/editor/collaboration/collaboration/menubar.tsx
@@ -38,6 +38,7 @@ import { Subscript } from 'tiptap/core/menus/subscript';
 import { Superscript } from 'tiptap/core/menus/superscript';
 import { Table } from 'tiptap/core/menus/table';
 import { TaskList } from 'tiptap/core/menus/task-list';
+import { Text } from 'tiptap/core/menus/text';
 import { TextColor } from 'tiptap/core/menus/text-color';
 import { Underline } from 'tiptap/core/menus/underline';
 import { Undo } from 'tiptap/core/menus/undo';
@@ -111,6 +112,8 @@ const _MenuBar: React.FC<{ editor: Editor }> = ({ editor }) => {
         <Mind editor={editor} />
         <Excalidraw editor={editor} />
         <Columns editor={editor} />
+
+        <Text editor={editor} />
       </Space>
     </div>
   );