feat: add comment kit

This commit is contained in:
fantasticit 2022-04-02 17:56:21 +08:00
parent a1e1508bbe
commit 1ef72c936a
8 changed files with 53 additions and 12 deletions

View File

@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
import { useEditor, EditorContent } from '@tiptap/react'; import { useEditor, EditorContent } from '@tiptap/react';
import { Avatar, Button, Space, Typography, Banner, Pagination } from '@douyinfe/semi-ui'; import { Avatar, Button, Space, Typography, Banner, Pagination } from '@douyinfe/semi-ui';
import { useToggle } from 'hooks/use-toggle'; 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 { DataRender } from 'components/data-render';
import { useUser } from 'data/user'; import { useUser } from 'data/user';
import { useComments } from 'data/comment'; import { useComments } from 'data/comment';
@ -34,7 +34,7 @@ export const CommentEditor: React.FC<IProps> = ({ documentId }) => {
const editor = useEditor({ const editor = useEditor({
editable: true, editable: true,
extensions: [...DEFAULT_EXTENSION, Document, History], extensions: [...CommentKit, Document, History],
}); });
const openEditor = () => { const openEditor = () => {

View File

@ -7,7 +7,7 @@ import { useToggle } from 'hooks/use-toggle';
import { useNetwork } from 'hooks/use-network'; import { useNetwork } from 'hooks/use-network';
import { import {
MenuBar, MenuBar,
DEFAULT_EXTENSION, BaseKit,
DocumentWithTitle, DocumentWithTitle,
getCollaborationExtension, getCollaborationExtension,
getCollaborationCursorExtension, getCollaborationCursorExtension,
@ -54,7 +54,7 @@ export const Editor: React.FC<IProps> = ({ user, documentId, authority, classNam
const editor = useEditor({ const editor = useEditor({
editable: authority && authority.editable, editable: authority && authority.editable,
extensions: [ extensions: [
...DEFAULT_EXTENSION, ...BaseKit,
DocumentWithTitle, DocumentWithTitle,
getCollaborationExtension(provider), getCollaborationExtension(provider),
getCollaborationCursorExtension(provider, user), getCollaborationCursorExtension(provider, user),

View File

@ -13,6 +13,8 @@ import { DocumentStar } from 'components/document/star';
import { DocumentCollaboration } from 'components/document/collaboration'; import { DocumentCollaboration } from 'components/document/collaboration';
import { DocumentStyle } from 'components/document/style'; import { DocumentStyle } from 'components/document/style';
import { DocumentVersion } from 'components/document/version'; import { DocumentVersion } from 'components/document/version';
import { User } from 'components/user';
import { Divider } from 'components/divider';
import { useDocumentStyle } from 'hooks/use-document-style'; import { useDocumentStyle } from 'hooks/use-document-style';
import { EventEmitter } from 'helpers/event-emitter'; import { EventEmitter } from 'helpers/event-emitter';
import { Editor } from './editor'; import { Editor } from './editor';
@ -101,6 +103,8 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
<Button icon={<IconArticle />} theme="borderless" type="tertiary" /> <Button icon={<IconArticle />} theme="borderless" type="tertiary" />
</Popover> </Popover>
<Theme /> <Theme />
<Divider />
<User />
</Space> </Space>
} }
/> />

View File

@ -4,7 +4,7 @@ import { Layout } from '@douyinfe/semi-ui';
import { IDocument, ILoginUser } from '@think/domains'; import { IDocument, ILoginUser } from '@think/domains';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { import {
DEFAULT_EXTENSION, BaseKit,
DocumentWithTitle, DocumentWithTitle,
getCollaborationExtension, getCollaborationExtension,
getCollaborationCursorExtension, getCollaborationCursorExtension,
@ -45,7 +45,7 @@ export const Editor: React.FC<IProps> = ({ user, documentId, document }) => {
const editor = useEditor({ const editor = useEditor({
editable: false, editable: false,
extensions: [ extensions: [
...DEFAULT_EXTENSION, ...BaseKit,
DocumentWithTitle, DocumentWithTitle,
getCollaborationExtension(provider), getCollaborationExtension(provider),
getCollaborationCursorExtension(provider, user), getCollaborationCursorExtension(provider, user),

View File

@ -3,7 +3,7 @@ import { Button, Modal, Typography } from '@douyinfe/semi-ui';
import { IconChevronLeft } from '@douyinfe/semi-icons'; import { IconChevronLeft } from '@douyinfe/semi-icons';
import { useEditor, EditorContent } from '@tiptap/react'; import { useEditor, EditorContent } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import { DEFAULT_EXTENSION, DocumentWithTitle } from 'tiptap'; import { BaseKit, DocumentWithTitle } from 'tiptap';
import { safeJSONParse } from 'helpers/json'; import { safeJSONParse } from 'helpers/json';
import { DataRender } from 'components/data-render'; import { DataRender } from 'components/data-render';
import { LocaleTime } from 'components/locale-time'; import { LocaleTime } from 'components/locale-time';
@ -25,7 +25,7 @@ export const DocumentVersion: React.FC<IProps> = ({ documentId, onSelect }) => {
const editor = useEditor({ const editor = useEditor({
editable: false, editable: false,
extensions: [...DEFAULT_EXTENSION, DocumentWithTitle], extensions: [...BaseKit, DocumentWithTitle],
content: { type: 'doc', content: [] }, content: { type: 'doc', content: [] },
}); });

View File

@ -18,7 +18,7 @@ import {
import { IconChevronLeft, IconArticle } from '@douyinfe/semi-icons'; import { IconChevronLeft, IconArticle } from '@douyinfe/semi-icons';
import { ILoginUser, ITemplate } from '@think/domains'; import { ILoginUser, ITemplate } from '@think/domains';
import { Theme } from 'components/theme'; 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 { DataRender } from 'components/data-render';
import { User } from 'components/user'; import { User } from 'components/user';
import { DocumentStyle } from 'components/document/style'; import { DocumentStyle } from 'components/document/style';
@ -52,7 +52,7 @@ export const Editor: React.FC<IProps> = ({ user, data, loading, error, updateTem
}, [data, user.token]); }, [data, user.token]);
const editor = useEditor({ const editor = useEditor({
editable: true, editable: true,
extensions: [...DEFAULT_EXTENSION, DocumentWithTitle, getCollaborationExtension(provider)], extensions: [...BaseKit, DocumentWithTitle, getCollaborationExtension(provider)],
content: safeJSONParse(data && data.content), content: safeJSONParse(data && data.content),
}); });

View File

@ -3,7 +3,7 @@ import cls from 'classnames';
import { useEditor, EditorContent } from '@tiptap/react'; import { useEditor, EditorContent } from '@tiptap/react';
import { Layout, Spin, Typography } from '@douyinfe/semi-ui'; import { Layout, Spin, Typography } from '@douyinfe/semi-ui';
import { IUser, ITemplate } from '@think/domains'; import { IUser, ITemplate } from '@think/domains';
import { DEFAULT_EXTENSION, DocumentWithTitle } from 'tiptap'; import { BaseKit, DocumentWithTitle } from 'tiptap';
import { DataRender } from 'components/data-render'; import { DataRender } from 'components/data-render';
import { ImageViewer } from 'components/image-viewer'; import { ImageViewer } from 'components/image-viewer';
import { useDocumentStyle } from 'hooks/use-document-style'; import { useDocumentStyle } from 'hooks/use-document-style';
@ -35,7 +35,7 @@ export const Editor: React.FC<IProps> = ({ user, data, loading, error }) => {
const editor = useEditor({ const editor = useEditor({
editable: false, editable: false,
extensions: [...DEFAULT_EXTENSION, DocumentWithTitle], extensions: [...BaseKit, DocumentWithTitle],
content: json, content: json,
}); });

View File

@ -107,3 +107,40 @@ export const BaseKit = [
Underline, Underline,
Paste, 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,
];