From 1ef72c936a48b34d0d5717f730caafd2c7340b52 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sat, 2 Apr 2022 17:56:21 +0800
Subject: [PATCH] feat: add comment kit

---
 .../components/document/comments/index.tsx    |  4 +-
 .../src/components/document/editor/editor.tsx |  4 +-
 .../src/components/document/editor/index.tsx  |  4 ++
 .../src/components/document/reader/editor.tsx |  4 +-
 .../src/components/document/version/index.tsx |  4 +-
 .../src/components/template/editor/editor.tsx |  4 +-
 .../src/components/template/reader/editor.tsx |  4 +-
 packages/client/src/tiptap/basekit.tsx        | 37 +++++++++++++++++++
 8 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/document/comments/index.tsx b/packages/client/src/components/document/comments/index.tsx
index 6a7c2833..03a138cc 100644
--- a/packages/client/src/components/document/comments/index.tsx
+++ b/packages/client/src/components/document/comments/index.tsx
@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
 import { Avatar, Button, Space, Typography, Banner, Pagination } from '@douyinfe/semi-ui';
 import { useToggle } from 'hooks/use-toggle';
-import { DEFAULT_EXTENSION, Document, History, CommentMenuBar } from 'tiptap';
+import { CommentKit, Document, History, CommentMenuBar } from 'tiptap';
 import { DataRender } from 'components/data-render';
 import { useUser } from 'data/user';
 import { useComments } from 'data/comment';
@@ -34,7 +34,7 @@ export const CommentEditor: React.FC<IProps> = ({ documentId }) => {
 
   const editor = useEditor({
     editable: true,
-    extensions: [...DEFAULT_EXTENSION, Document, History],
+    extensions: [...CommentKit, Document, History],
   });
 
   const openEditor = () => {
diff --git a/packages/client/src/components/document/editor/editor.tsx b/packages/client/src/components/document/editor/editor.tsx
index c6e86462..904cb6ed 100644
--- a/packages/client/src/components/document/editor/editor.tsx
+++ b/packages/client/src/components/document/editor/editor.tsx
@@ -7,7 +7,7 @@ import { useToggle } from 'hooks/use-toggle';
 import { useNetwork } from 'hooks/use-network';
 import {
   MenuBar,
-  DEFAULT_EXTENSION,
+  BaseKit,
   DocumentWithTitle,
   getCollaborationExtension,
   getCollaborationCursorExtension,
@@ -54,7 +54,7 @@ export const Editor: React.FC<IProps> = ({ user, documentId, authority, classNam
   const editor = useEditor({
     editable: authority && authority.editable,
     extensions: [
-      ...DEFAULT_EXTENSION,
+      ...BaseKit,
       DocumentWithTitle,
       getCollaborationExtension(provider),
       getCollaborationCursorExtension(provider, user),
diff --git a/packages/client/src/components/document/editor/index.tsx b/packages/client/src/components/document/editor/index.tsx
index 83032317..16d2c675 100644
--- a/packages/client/src/components/document/editor/index.tsx
+++ b/packages/client/src/components/document/editor/index.tsx
@@ -13,6 +13,8 @@ import { DocumentStar } from 'components/document/star';
 import { DocumentCollaboration } from 'components/document/collaboration';
 import { DocumentStyle } from 'components/document/style';
 import { DocumentVersion } from 'components/document/version';
+import { User } from 'components/user';
+import { Divider } from 'components/divider';
 import { useDocumentStyle } from 'hooks/use-document-style';
 import { EventEmitter } from 'helpers/event-emitter';
 import { Editor } from './editor';
@@ -101,6 +103,8 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
                 <Button icon={<IconArticle />} theme="borderless" type="tertiary" />
               </Popover>
               <Theme />
+              <Divider />
+              <User />
             </Space>
           }
         />
diff --git a/packages/client/src/components/document/reader/editor.tsx b/packages/client/src/components/document/reader/editor.tsx
index 44fe91e8..e244e74b 100644
--- a/packages/client/src/components/document/reader/editor.tsx
+++ b/packages/client/src/components/document/reader/editor.tsx
@@ -4,7 +4,7 @@ import { Layout } from '@douyinfe/semi-ui';
 import { IDocument, ILoginUser } from '@think/domains';
 import { useToggle } from 'hooks/use-toggle';
 import {
-  DEFAULT_EXTENSION,
+  BaseKit,
   DocumentWithTitle,
   getCollaborationExtension,
   getCollaborationCursorExtension,
@@ -45,7 +45,7 @@ export const Editor: React.FC<IProps> = ({ user, documentId, document }) => {
   const editor = useEditor({
     editable: false,
     extensions: [
-      ...DEFAULT_EXTENSION,
+      ...BaseKit,
       DocumentWithTitle,
       getCollaborationExtension(provider),
       getCollaborationCursorExtension(provider, user),
diff --git a/packages/client/src/components/document/version/index.tsx b/packages/client/src/components/document/version/index.tsx
index dcb5b29f..de178207 100644
--- a/packages/client/src/components/document/version/index.tsx
+++ b/packages/client/src/components/document/version/index.tsx
@@ -3,7 +3,7 @@ import { Button, Modal, Typography } from '@douyinfe/semi-ui';
 import { IconChevronLeft } from '@douyinfe/semi-icons';
 import { useEditor, EditorContent } from '@tiptap/react';
 import cls from 'classnames';
-import { DEFAULT_EXTENSION, DocumentWithTitle } from 'tiptap';
+import { BaseKit, DocumentWithTitle } from 'tiptap';
 import { safeJSONParse } from 'helpers/json';
 import { DataRender } from 'components/data-render';
 import { LocaleTime } from 'components/locale-time';
@@ -25,7 +25,7 @@ export const DocumentVersion: React.FC<IProps> = ({ documentId, onSelect }) => {
 
   const editor = useEditor({
     editable: false,
-    extensions: [...DEFAULT_EXTENSION, DocumentWithTitle],
+    extensions: [...BaseKit, DocumentWithTitle],
     content: { type: 'doc', content: [] },
   });
 
diff --git a/packages/client/src/components/template/editor/editor.tsx b/packages/client/src/components/template/editor/editor.tsx
index 9609fe2b..bc7b9aee 100644
--- a/packages/client/src/components/template/editor/editor.tsx
+++ b/packages/client/src/components/template/editor/editor.tsx
@@ -18,7 +18,7 @@ import {
 import { IconChevronLeft, IconArticle } from '@douyinfe/semi-icons';
 import { ILoginUser, ITemplate } from '@think/domains';
 import { Theme } from 'components/theme';
-import { DEFAULT_EXTENSION, DocumentWithTitle, getCollaborationExtension, getProvider, MenuBar } from 'tiptap';
+import { BaseKit, DocumentWithTitle, getCollaborationExtension, getProvider, MenuBar } from 'tiptap';
 import { DataRender } from 'components/data-render';
 import { User } from 'components/user';
 import { DocumentStyle } from 'components/document/style';
@@ -52,7 +52,7 @@ export const Editor: React.FC<IProps> = ({ user, data, loading, error, updateTem
   }, [data, user.token]);
   const editor = useEditor({
     editable: true,
-    extensions: [...DEFAULT_EXTENSION, DocumentWithTitle, getCollaborationExtension(provider)],
+    extensions: [...BaseKit, DocumentWithTitle, getCollaborationExtension(provider)],
     content: safeJSONParse(data && data.content),
   });
 
diff --git a/packages/client/src/components/template/reader/editor.tsx b/packages/client/src/components/template/reader/editor.tsx
index c2ee6608..2667e72f 100644
--- a/packages/client/src/components/template/reader/editor.tsx
+++ b/packages/client/src/components/template/reader/editor.tsx
@@ -3,7 +3,7 @@ import cls from 'classnames';
 import { useEditor, EditorContent } from '@tiptap/react';
 import { Layout, Spin, Typography } from '@douyinfe/semi-ui';
 import { IUser, ITemplate } from '@think/domains';
-import { DEFAULT_EXTENSION, DocumentWithTitle } from 'tiptap';
+import { BaseKit, DocumentWithTitle } from 'tiptap';
 import { DataRender } from 'components/data-render';
 import { ImageViewer } from 'components/image-viewer';
 import { useDocumentStyle } from 'hooks/use-document-style';
@@ -35,7 +35,7 @@ export const Editor: React.FC<IProps> = ({ user, data, loading, error }) => {
 
   const editor = useEditor({
     editable: false,
-    extensions: [...DEFAULT_EXTENSION, DocumentWithTitle],
+    extensions: [...BaseKit, DocumentWithTitle],
     content: json,
   });
 
diff --git a/packages/client/src/tiptap/basekit.tsx b/packages/client/src/tiptap/basekit.tsx
index 4e029587..0c8531b7 100644
--- a/packages/client/src/tiptap/basekit.tsx
+++ b/packages/client/src/tiptap/basekit.tsx
@@ -107,3 +107,40 @@ export const BaseKit = [
   Underline,
   Paste,
 ];
+
+export const CommentKit = [
+  BackgroundColor,
+  Blockquote,
+  Bold,
+  BulletList,
+  Code,
+  CodeBlock,
+  Color,
+  ColorHighlighter,
+  Dropcursor,
+  Focus,
+  FontSize,
+  Gapcursor,
+  HardBreak,
+  Heading,
+  HorizontalRule,
+  ...HTMLMarks,
+  Indent,
+  Italic,
+  Katex,
+  Link,
+  ListItem,
+  OrderedList,
+  Paragraph,
+  Placeholder,
+  Strike,
+  Subscript,
+  Superscript,
+  Text,
+  TextAlign,
+  TextStyle,
+  TaskItem,
+  TaskList,
+  TrailingNode,
+  Underline,
+];