mirror of https://github.com/fantasticit/think.git
feat: add comment kit
This commit is contained in:
parent
a1e1508bbe
commit
1ef72c936a
|
@ -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 = () => {
|
||||||
|
|
|
@ -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),
|
||||||
|
|
|
@ -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>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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),
|
||||||
|
|
|
@ -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: [] },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
];
|
||||||
|
|
Loading…
Reference in New Issue