fantasticit
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add comment kit

pull/25/head
fantasticit 2022-04-02 17:56:21 +08:00
parent a1e1508bbe
commit 1ef72c936a
8 changed files with 53 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/components/document/comments/index.tsx
View File

@ -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 = () => {

4
packages/client/src/components/document/editor/editor.tsx
View File

@ -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),

4
packages/client/src/components/document/editor/index.tsx
View File

@ -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>
}
/>

4
packages/client/src/components/document/reader/editor.tsx
View File

@ -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),

4
packages/client/src/components/document/version/index.tsx
View File

@ -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: [] },
});

4
packages/client/src/components/template/editor/editor.tsx
View File

@ -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),
});

4
packages/client/src/components/template/reader/editor.tsx
View File

@ -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,
});

37
packages/client/src/tiptap/basekit.tsx
View File

@ -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,
];