tiptap: refactor structure

This commit is contained in:
fantasticit 2022-06-03 16:29:41 +08:00
parent 77cf05fb20
commit 799697c98a
106 changed files with 254 additions and 242 deletions

View File

@ -1,13 +1,20 @@
export const Divider = () => { import React from 'react';
export const _Divider = ({ vertical = false }) => {
return ( return (
<div <div
style={{ style={{
display: 'inline-block', display: 'inline-block',
width: 1, width: 1,
height: 24, height: 18,
margin: '0 6px', margin: '0 6px',
backgroundColor: 'var(--semi-color-border)', backgroundColor: 'var(--semi-color-border)',
transform: `rotate(${vertical ? 90 : 0}deg)`,
}} }}
></div> ></div>
); );
}; };
export const Divider = React.memo(_Divider, (prevProps, nextProps) => {
return prevProps.vertical === nextProps.vertical;
});

View File

@ -4,7 +4,8 @@ import { useComments } from 'data/comment';
import { useUser } from 'data/user'; import { useUser } from 'data/user';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import React, { useCallback, useRef, useState } from 'react'; import React, { useCallback, useRef, useState } from 'react';
import { CommentKit, CommentMenuBar, EditorContent, useEditor } from 'tiptap/editor'; import { EditorContent, useEditor } from 'tiptap/core';
import { CommentKit, CommentMenuBar } from 'tiptap/editor';
import { Comments } from './comments'; import { Comments } from './comments';
import styles from './index.module.scss'; import styles from './index.module.scss';

View File

@ -4,13 +4,14 @@ import { useCallback, useRef } from 'react';
type ISize = { width: number; height: number }; type ISize = { width: number; height: number };
export const Size: React.FC<{ width: number; maxWidth?: number; height: number; onOk: (arg: ISize) => void }> = ({ interface IProps {
width, width: number;
maxWidth, maxWidth?: number;
height, height: number;
onOk, onOk: (arg: ISize) => void;
children, }
}) => {
export const SizeSetter: React.FC<IProps> = ({ width, maxWidth, height, onOk, children }) => {
const $form = useRef<FormApi>(); const $form = useRef<FormApi>();
const handleOk = useCallback(() => { const handleOk = useCallback(() => {

View File

@ -1,20 +0,0 @@
import React from 'react';
export const _Divider = ({ vertical = false }) => {
return (
<div
style={{
display: 'inline-block',
width: 1,
height: 18,
margin: '0 6px',
backgroundColor: 'var(--semi-color-border)',
transform: `rotate(${vertical ? 90 : 0}deg)`,
}}
></div>
);
};
export const Divider = React.memo(_Divider, (prevProps, nextProps) => {
return prevProps.vertical === nextProps.vertical;
});

View File

@ -1,13 +0,0 @@
import { Skeleton } from '@douyinfe/semi-ui';
import React from 'react';
export const DocumentSkeleton = () => {
const placeholder = (
<>
<Skeleton.Title style={{ width: 240, height: '2.4em', marginBottom: 12, marginTop: 12 }} />
<Skeleton.Paragraph style={{ width: '100%', height: 27 }} rows={7} />
</>
);
return <Skeleton placeholder={placeholder} loading={true} active></Skeleton>;
};

View File

@ -1,5 +1,3 @@
// 基础扩展
// 自定义节点扩展
import { Attachment } from 'tiptap/core/extensions/attachment'; import { Attachment } from 'tiptap/core/extensions/attachment';
import { BackgroundColor } from 'tiptap/core/extensions/background-color'; import { BackgroundColor } from 'tiptap/core/extensions/background-color';
import { Blockquote } from 'tiptap/core/extensions/blockquote'; import { Blockquote } from 'tiptap/core/extensions/blockquote';
@ -64,18 +62,7 @@ export const DocumentWithTitle = Document.extend({
export const AllExtensions = [ export const AllExtensions = [
Paragraph, Paragraph,
Placeholder.configure({ Placeholder,
placeholder: ({ node, editor }) => {
if (!editor.isEditable) return;
if (node.type.name === 'title') {
return '请输入标题';
}
return '输入 / 唤起更多';
},
showOnlyCurrent: false,
showOnlyWhenEditable: true,
}),
BackgroundColor, BackgroundColor,
Blockquote, Blockquote,
Bold, Bold,

View File

@ -7,7 +7,7 @@ import {
setMeta, setMeta,
yCursorPluginKey, yCursorPluginKey,
ySyncPluginKey, ySyncPluginKey,
} from 'tiptap/core/y-prosemirror/y-prosemirror'; } from 'tiptap/core/thritypart/y-prosemirror/y-prosemirror';
import * as Y from 'yjs'; import * as Y from 'yjs';
/** /**

View File

@ -1,5 +1,11 @@
import { Extension } from '@tiptap/core'; import { Extension } from '@tiptap/core';
import { redo, undo, ySyncPlugin, yUndoPlugin, yUndoPluginKey } from 'tiptap/core/y-prosemirror/y-prosemirror'; import {
redo,
undo,
ySyncPlugin,
yUndoPlugin,
yUndoPluginKey,
} from 'tiptap/core/thritypart/y-prosemirror/y-prosemirror';
import { UndoManager } from 'yjs'; import { UndoManager } from 'yjs';
declare module '@tiptap/core' { declare module '@tiptap/core' {

View File

@ -1,5 +1,5 @@
import { Transaction } from 'prosemirror-state'; import { Transaction } from 'prosemirror-state';
import { ySyncPluginKey } from 'tiptap/core/y-prosemirror/y-prosemirror'; import { ySyncPluginKey } from 'tiptap/core/thritypart/y-prosemirror/y-prosemirror';
export function isChangeOrigin(transaction: Transaction): boolean { export function isChangeOrigin(transaction: Transaction): boolean {
return !!transaction.getMeta(ySyncPluginKey); return !!transaction.getMeta(ySyncPluginKey);

View File

@ -4,8 +4,8 @@ import Suggestion from '@tiptap/suggestion';
import { Plugin, PluginKey } from 'prosemirror-state'; import { Plugin, PluginKey } from 'prosemirror-state';
import tippy from 'tippy.js'; import tippy from 'tippy.js';
import { EXTENSION_PRIORITY_HIGHEST } from 'tiptap/core/constants'; import { EXTENSION_PRIORITY_HIGHEST } from 'tiptap/core/constants';
import { QUICK_INSERT_ITEMS } from 'tiptap/core/menus/quick-insert';
import { MenuList } from 'tiptap/core/wrappers/menu-list'; import { MenuList } from 'tiptap/core/wrappers/menu-list';
import { QUICK_INSERT_ITEMS } from 'tiptap/editor/menus/quick-insert';
export const QuickInsertPluginKey = new PluginKey('quickInsert'); export const QuickInsertPluginKey = new PluginKey('quickInsert');

View File

@ -0,0 +1,44 @@
import { EditorOptions } from '@tiptap/core';
import { Editor as BuiltInEditor } from '@tiptap/react';
import { EditorContent, NodeViewContent, NodeViewWrapper } from '@tiptap/react';
import { EventEmitter } from 'helpers/event-emitter';
import { DependencyList, useEffect, useState } from 'react';
function useForceUpdate() {
const [, setValue] = useState(0);
return () => setValue((value) => value + 1);
}
export class Editor extends BuiltInEditor {
public eventEmitter: EventEmitter = new EventEmitter();
}
export const useEditor = (options: Partial<EditorOptions> = {}, deps: DependencyList = []) => {
const [editor, setEditor] = useState<Editor | null>(null);
const forceUpdate = useForceUpdate();
useEffect(() => {
const instance = new Editor(options);
setEditor(instance);
if (!options.editable) {
instance.on('transaction', () => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
forceUpdate();
});
});
});
}
return () => {
instance.destroy();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, deps);
return editor;
};
export { EditorContent, NodeViewContent, NodeViewWrapper };

View File

@ -1,5 +1,5 @@
import { EventEmitter } from 'helpers/event-emitter'; import { EventEmitter } from 'helpers/event-emitter';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
const getEventEmitter = (editor: Editor): EventEmitter => { const getEventEmitter = (editor: Editor): EventEmitter => {
try { try {

View File

@ -1,9 +1,9 @@
import { IconAlignCenter, IconAlignJustify, IconAlignLeft, IconAlignRight } from '@douyinfe/semi-icons'; import { IconAlignCenter, IconAlignJustify, IconAlignLeft, IconAlignRight } from '@douyinfe/semi-icons';
import { Button, Dropdown, Tooltip } from '@douyinfe/semi-ui'; import { Button, Dropdown, Tooltip } from '@douyinfe/semi-ui';
import React, { useCallback, useMemo } from 'react'; import React, { useCallback, useMemo } from 'react';
import { Editor } from 'tiptap/core';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const Align: React.FC<{ editor: Editor }> = ({ editor }) => { export const Align: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -1,10 +1,10 @@
import { IconCopy, IconDelete } from '@douyinfe/semi-icons'; import { IconCopy, IconDelete } from '@douyinfe/semi-icons';
import { Button, Space } from '@douyinfe/semi-ui'; import { Button, Space } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { Divider } from 'tiptap/components/divider'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Attachment } from 'tiptap/core/extensions/attachment'; import { Attachment } from 'tiptap/core/extensions/attachment';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { copyNode, deleteNode } from 'tiptap/prose-utils'; import { copyNode, deleteNode } from 'tiptap/prose-utils';
export const AttachmentBubbleMenu = ({ editor }) => { export const AttachmentBubbleMenu = ({ editor }) => {

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { AttachmentBubbleMenu } from './bubble'; import { AttachmentBubbleMenu } from './bubble';

View File

@ -1,12 +1,12 @@
import { IconMark } from '@douyinfe/semi-icons'; import { IconMark } from '@douyinfe/semi-icons';
import { Button } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { ColorPicker } from 'components/color-picker';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { ColorPicker } from 'tiptap/components/color-picker'; import { Editor } from 'tiptap/core';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active'; import { useAttributes } from 'tiptap/core/hooks/use-attributes';
import { useAttributes } from 'tiptap/editor/hooks/use-attributes';
const FlexStyle: React.CSSProperties = { const FlexStyle: React.CSSProperties = {
display: 'inline-flex', display: 'inline-flex',

View File

@ -2,10 +2,10 @@ import { Button } from '@douyinfe/semi-ui';
import { IconQuote } from 'components/icons'; import { IconQuote } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { Blockquote as BlockquoteExtension } from 'tiptap/core/extensions/blockquote'; import { Blockquote as BlockquoteExtension } from 'tiptap/core/extensions/blockquote';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const Blockquote: React.FC<{ editor: Editor }> = ({ editor }) => { export const Blockquote: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -2,10 +2,10 @@ import { IconBold } from '@douyinfe/semi-icons';
import { Button } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { Bold as BoldExtension } from 'tiptap/core/extensions/bold'; import { Bold as BoldExtension } from 'tiptap/core/extensions/bold';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const Bold: React.FC<{ editor: Editor }> = ({ editor }) => { export const Bold: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -2,10 +2,10 @@ import { Button } from '@douyinfe/semi-ui';
import { IconList } from 'components/icons'; import { IconList } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { BulletList as BulletListExtension } from 'tiptap/core/extensions/bullet-list'; import { BulletList as BulletListExtension } from 'tiptap/core/extensions/bullet-list';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const BulletList: React.FC<{ editor: Editor }> = ({ editor }) => { export const BulletList: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -1,12 +1,12 @@
import { IconCopy, IconDelete } from '@douyinfe/semi-icons'; import { IconCopy, IconDelete } from '@douyinfe/semi-icons';
import { Button, Popover, Space, Typography } from '@douyinfe/semi-ui'; import { Button, Popover, Space, Typography } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import { IconDrawBoard } from 'components/icons'; import { IconDrawBoard } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { Divider } from 'tiptap/components/divider'; import { Editor } from 'tiptap/core';
import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Callout } from 'tiptap/core/extensions/callout'; import { Callout } from 'tiptap/core/extensions/callout';
import { Editor } from 'tiptap/editor';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { copyNode, deleteNode } from 'tiptap/prose-utils'; import { copyNode, deleteNode } from 'tiptap/prose-utils';
import styles from './bubble.module.scss'; import styles from './bubble.module.scss';

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { CalloutBubbleMenu } from './bubble'; import { CalloutBubbleMenu } from './bubble';

View File

@ -2,7 +2,7 @@ import { Button } from '@douyinfe/semi-ui';
import { IconClear } from 'components/icons'; import { IconClear } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
export const CleadrNodeAndMarks: React.FC<{ editor: Editor }> = ({ editor }) => { export const CleadrNodeAndMarks: React.FC<{ editor: Editor }> = ({ editor }) => {
const clear = useCallback(() => { const clear = useCallback(() => {

View File

@ -1,10 +1,10 @@
import { IconCopy, IconDelete } from '@douyinfe/semi-icons'; import { IconCopy, IconDelete } from '@douyinfe/semi-icons';
import { Button, Space } from '@douyinfe/semi-ui'; import { Button, Space } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Divider } from 'tiptap/components/divider'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { CodeBlock } from 'tiptap/core/extensions/code-block'; import { CodeBlock } from 'tiptap/core/extensions/code-block';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { copyNode, deleteNode } from 'tiptap/prose-utils'; import { copyNode, deleteNode } from 'tiptap/prose-utils';
export const CodeBlockBubbleMenu = ({ editor }) => { export const CodeBlockBubbleMenu = ({ editor }) => {

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { CodeBlockBubbleMenu } from './bubble'; import { CodeBlockBubbleMenu } from './bubble';

View File

@ -2,10 +2,10 @@ import { IconCode } from '@douyinfe/semi-icons';
import { Button } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { Code as InlineCode } from 'tiptap/core/extensions/code'; import { Code as InlineCode } from 'tiptap/core/extensions/code';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const Code: React.FC<{ editor: Editor }> = ({ editor }) => { export const Code: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -1,11 +1,11 @@
import { IconCopy, IconDelete, IconEdit } from '@douyinfe/semi-icons'; import { IconCopy, IconDelete, IconEdit } from '@douyinfe/semi-icons';
import { Button, Space } from '@douyinfe/semi-ui'; import { Button, Space } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { Divider } from 'tiptap/components/divider'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Countdown } from 'tiptap/core/extensions/countdown'; import { Countdown } from 'tiptap/core/extensions/countdown';
import { useAttributes } from 'tiptap/editor/hooks/use-attributes'; import { useAttributes } from 'tiptap/core/hooks/use-attributes';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { copyNode, deleteNode } from 'tiptap/prose-utils'; import { copyNode, deleteNode } from 'tiptap/prose-utils';
import { triggerOpenCountSettingModal } from '../_event'; import { triggerOpenCountSettingModal } from '../_event';

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { CountdownBubbleMenu } from './bubble'; import { CountdownBubbleMenu } from './bubble';
import { CountdownSettingModal } from './modal'; import { CountdownSettingModal } from './modal';

View File

@ -2,7 +2,7 @@ import { Form, Modal } from '@douyinfe/semi-ui';
import { FormApi } from '@douyinfe/semi-ui/lib/es/form'; import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { cancelSubject, OPEN_COUNT_SETTING_MODAL, subject } from '../_event'; import { cancelSubject, OPEN_COUNT_SETTING_MODAL, subject } from '../_event';

View File

@ -1,4 +1,4 @@
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { triggerOpenCountSettingModal } from '../_event'; import { triggerOpenCountSettingModal } from '../_event';

View File

@ -1,10 +1,10 @@
import { IconCopy, IconDelete } from '@douyinfe/semi-icons'; import { IconCopy, IconDelete } from '@douyinfe/semi-icons';
import { Button, Space } from '@douyinfe/semi-ui'; import { Button, Space } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Divider } from 'tiptap/components/divider'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { DocumentChildren } from 'tiptap/core/extensions/document-children'; import { DocumentChildren } from 'tiptap/core/extensions/document-children';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { copyNode, deleteNode } from 'tiptap/prose-utils'; import { copyNode, deleteNode } from 'tiptap/prose-utils';
export const DocumentChildrenBubbleMenu = ({ editor }) => { export const DocumentChildrenBubbleMenu = ({ editor }) => {

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { DocumentChildrenBubbleMenu } from './bubble'; import { DocumentChildrenBubbleMenu } from './bubble';

View File

@ -1,14 +1,14 @@
import { IconCopy, IconDelete, IconEdit } from '@douyinfe/semi-icons'; import { IconCopy, IconDelete, IconEdit } from '@douyinfe/semi-icons';
import { Button, List, Popover, Space, Typography } from '@douyinfe/semi-ui'; import { Button, List, Popover, Space, Typography } from '@douyinfe/semi-ui';
import { DataRender } from 'components/data-render'; import { DataRender } from 'components/data-render';
import { Divider } from 'components/divider';
import { IconDocument } from 'components/icons'; import { IconDocument } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { useWikiTocs } from 'data/wiki'; import { useWikiTocs } from 'data/wiki';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { Divider } from 'tiptap/components/divider'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { DocumentReference } from 'tiptap/core/extensions/document-reference'; import { DocumentReference } from 'tiptap/core/extensions/document-reference';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { copyNode, deleteNode } from 'tiptap/prose-utils'; import { copyNode, deleteNode } from 'tiptap/prose-utils';
const { Text } = Typography; const { Text } = Typography;

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { DocumentReferenceBubbleMenu } from './bubble'; import { DocumentReferenceBubbleMenu } from './bubble';

View File

@ -3,7 +3,7 @@ import { EmojiPicker } from 'components/emoji-picker';
import { IconEmoji } from 'components/icons'; import { IconEmoji } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
export const Emoji: React.FC<{ editor: Editor }> = ({ editor }) => { export const Emoji: React.FC<{ editor: Editor }> = ({ editor }) => {
const setEmoji = useCallback( const setEmoji = useCallback(

View File

@ -1,11 +1,11 @@
import { IconCopy, IconDelete, IconEdit } from '@douyinfe/semi-icons'; import { IconCopy, IconDelete, IconEdit } from '@douyinfe/semi-icons';
import { Button, Space } from '@douyinfe/semi-ui'; import { Button, Space } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { Divider } from 'tiptap/components/divider'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Flow } from 'tiptap/core/extensions/flow'; import { Flow } from 'tiptap/core/extensions/flow';
import { useAttributes } from 'tiptap/editor/hooks/use-attributes'; import { useAttributes } from 'tiptap/core/hooks/use-attributes';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { copyNode, deleteNode } from 'tiptap/prose-utils'; import { copyNode, deleteNode } from 'tiptap/prose-utils';
import { triggerOpenFlowSettingModal } from '../_event'; import { triggerOpenFlowSettingModal } from '../_event';

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { FlowBubbleMenu } from './bubble'; import { FlowBubbleMenu } from './bubble';
import { FlowSettingModal } from './modal'; import { FlowSettingModal } from './modal';

View File

@ -2,7 +2,7 @@ import { Modal, Spin, Typography } from '@douyinfe/semi-ui';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { createEditor, load } from 'thirtypart/diagram'; import { createEditor, load } from 'thirtypart/diagram';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { cancelSubject, OPEN_FLOW_SETTING_MODAL, subject } from '../_event'; import { cancelSubject, OPEN_FLOW_SETTING_MODAL, subject } from '../_event';

View File

@ -1,9 +1,9 @@
import { Select } from '@douyinfe/semi-ui'; import { Select } from '@douyinfe/semi-ui';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active'; import { useAttributes } from 'tiptap/core/hooks/use-attributes';
import { useAttributes } from 'tiptap/editor/hooks/use-attributes';
export const FONT_SIZES = [12, 13, 14, 15, 16, 19, 22, 24, 29, 32, 40, 48]; export const FONT_SIZES = [12, 13, 14, 15, 16, 19, 22, 24, 29, 32, 40, 48];

View File

@ -1,8 +1,8 @@
import { Select } from '@douyinfe/semi-ui'; import { Select } from '@douyinfe/semi-ui';
import React, { useCallback, useMemo } from 'react'; import React, { useCallback, useMemo } from 'react';
import { Editor } from 'tiptap/core';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const Heading: React.FC<{ editor: Editor }> = ({ editor }) => { export const Heading: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -2,9 +2,9 @@ import { Button } from '@douyinfe/semi-ui';
import { IconHorizontalRule } from 'components/icons'; import { IconHorizontalRule } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const HorizontalRule: React.FC<{ editor: Editor }> = ({ editor }) => { export const HorizontalRule: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -2,9 +2,9 @@ import { IconIndentLeft, IconIndentRight } from '@douyinfe/semi-icons';
import { Button } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const Ident: React.FC<{ editor: Editor }> = ({ editor }) => { export const Ident: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -1,14 +1,14 @@
import { IconCopy, IconDelete, IconEdit, IconExternalOpen, IconLineHeight } from '@douyinfe/semi-icons'; import { IconCopy, IconDelete, IconEdit, IconExternalOpen, IconLineHeight } from '@douyinfe/semi-icons';
import { Button, Form, Modal, Space, Typography } from '@douyinfe/semi-ui'; import { Button, Form, Modal, Space, Typography } from '@douyinfe/semi-ui';
import { FormApi } from '@douyinfe/semi-ui/lib/es/form'; import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
import { Divider } from 'components/divider';
import { SizeSetter } from 'components/size-setter';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { useCallback, useRef } from 'react'; import { useCallback, useRef } from 'react';
import { Divider } from 'tiptap/components/divider'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Size } from 'tiptap/components/size';
import { Iframe } from 'tiptap/core/extensions/iframe'; import { Iframe } from 'tiptap/core/extensions/iframe';
import { useAttributes } from 'tiptap/editor/hooks/use-attributes'; import { useAttributes } from 'tiptap/core/hooks/use-attributes';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { copyNode, deleteNode } from 'tiptap/prose-utils'; import { copyNode, deleteNode } from 'tiptap/prose-utils';
const { Text } = Typography; const { Text } = Typography;
@ -110,11 +110,11 @@ export const IframeBubbleMenu = ({ editor }) => {
<Button size="small" type="tertiary" theme="borderless" icon={<IconEdit />} onClick={openEditLinkModal} /> <Button size="small" type="tertiary" theme="borderless" icon={<IconEdit />} onClick={openEditLinkModal} />
</Tooltip> </Tooltip>
<Size width={width} height={height} onOk={setSize}> <SizeSetter width={width} height={height} onOk={setSize}>
<Tooltip content="设置宽高"> <Tooltip content="设置宽高">
<Button icon={<IconLineHeight />} type="tertiary" theme="borderless" size="small" /> <Button icon={<IconLineHeight />} type="tertiary" theme="borderless" size="small" />
</Tooltip> </Tooltip>
</Size> </SizeSetter>
<Divider /> <Divider />

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { IframeBubbleMenu } from './bubble'; import { IframeBubbleMenu } from './bubble';

View File

@ -7,13 +7,13 @@ import {
IconLineHeight, IconLineHeight,
} from '@douyinfe/semi-icons'; } from '@douyinfe/semi-icons';
import { Button, Space } from '@douyinfe/semi-ui'; import { Button, Space } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import { SizeSetter } from 'components/size-setter';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { Divider } from 'tiptap/components/divider'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Size } from 'tiptap/components/size';
import { Image } from 'tiptap/core/extensions/image'; import { Image } from 'tiptap/core/extensions/image';
import { useAttributes } from 'tiptap/editor/hooks/use-attributes'; import { useAttributes } from 'tiptap/core/hooks/use-attributes';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { copyNode, deleteNode, getEditorContainerDOMSize } from 'tiptap/prose-utils'; import { copyNode, deleteNode, getEditorContainerDOMSize } from 'tiptap/prose-utils';
export const ImageBubbleMenu = ({ editor }) => { export const ImageBubbleMenu = ({ editor }) => {
@ -107,11 +107,11 @@ export const ImageBubbleMenu = ({ editor }) => {
<Button onClick={alignRight} icon={<IconAlignRight />} type="tertiary" theme="borderless" size="small" /> <Button onClick={alignRight} icon={<IconAlignRight />} type="tertiary" theme="borderless" size="small" />
</Tooltip> </Tooltip>
<Size width={width} maxWidth={maxWidth} height={height} onOk={updateSize}> <SizeSetter width={width} maxWidth={maxWidth} height={height} onOk={updateSize}>
<Tooltip content="设置宽高"> <Tooltip content="设置宽高">
<Button icon={<IconLineHeight />} type="tertiary" theme="borderless" size="small" /> <Button icon={<IconLineHeight />} type="tertiary" theme="borderless" size="small" />
</Tooltip> </Tooltip>
</Size> </SizeSetter>
<Divider /> <Divider />

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { ImageBubbleMenu } from './bubble'; import { ImageBubbleMenu } from './bubble';

View File

@ -21,9 +21,9 @@ import { useUser } from 'data/user';
import { createKeysLocalStorageLRUCache } from 'helpers/lru-cache'; import { createKeysLocalStorageLRUCache } from 'helpers/lru-cache';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import React, { useCallback, useEffect, useMemo, useState } from 'react'; import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Editor } from 'tiptap/core';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
import { createCountdown } from '../countdown/service'; import { createCountdown } from '../countdown/service';

View File

@ -2,10 +2,10 @@ import { IconItalic } from '@douyinfe/semi-icons';
import { Button } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { Italic as ItalicExtension } from 'tiptap/core/extensions/italic'; import { Italic as ItalicExtension } from 'tiptap/core/extensions/italic';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const Italic: React.FC<{ editor: Editor }> = ({ editor }) => { export const Italic: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -1,14 +1,14 @@
import { IconCopy, IconDelete, IconEdit, IconHelpCircle } from '@douyinfe/semi-icons'; import { IconCopy, IconDelete, IconEdit, IconHelpCircle } from '@douyinfe/semi-icons';
import { Button, Popover, Space, TextArea, Typography } from '@douyinfe/semi-ui'; import { Button, Popover, Space, TextArea, Typography } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { useUser } from 'data/user'; import { useUser } from 'data/user';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useRef } from 'react'; import { useCallback, useEffect, useRef } from 'react';
import { Divider } from 'tiptap/components/divider'; import { Editor } from 'tiptap/core';
import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Katex } from 'tiptap/core/extensions/katex'; import { Katex } from 'tiptap/core/extensions/katex';
import { Editor } from 'tiptap/editor'; import { useAttributes } from 'tiptap/core/hooks/use-attributes';
import { useAttributes } from 'tiptap/editor/hooks/use-attributes';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { copyNode, deleteNode } from 'tiptap/prose-utils'; import { copyNode, deleteNode } from 'tiptap/prose-utils';
const { Text } = Typography; const { Text } = Typography;

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { KatexBubbleMenu } from './bubble'; import { KatexBubbleMenu } from './bubble';

View File

@ -1,11 +1,11 @@
import { IconEdit, IconExternalOpen, IconUnlink } from '@douyinfe/semi-icons'; import { IconEdit, IconExternalOpen, IconUnlink } from '@douyinfe/semi-icons';
import { Button, Space } from '@douyinfe/semi-ui'; import { Button, Space } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { Divider } from 'tiptap/components/divider'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Link } from 'tiptap/core/extensions/link'; import { Link } from 'tiptap/core/extensions/link';
import { useAttributes } from 'tiptap/editor/hooks/use-attributes'; import { useAttributes } from 'tiptap/core/hooks/use-attributes';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { findMarkPosition, isMarkActive } from 'tiptap/prose-utils'; import { findMarkPosition, isMarkActive } from 'tiptap/prose-utils';
import { triggerOpenLinkSettingModal } from '../_event'; import { triggerOpenLinkSettingModal } from '../_event';

View File

@ -2,10 +2,10 @@ import { Button } from '@douyinfe/semi-ui';
import { IconLink } from 'components/icons'; import { IconLink } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { Link as LinkExtension } from 'tiptap/core/extensions/link'; import { Link as LinkExtension } from 'tiptap/core/extensions/link';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
import { LinkBubbleMenu } from './bubble'; import { LinkBubbleMenu } from './bubble';
import { LinkSettingModal } from './modal'; import { LinkSettingModal } from './modal';

View File

@ -2,7 +2,7 @@ import { Form, Modal } from '@douyinfe/semi-ui';
import { FormApi } from '@douyinfe/semi-ui/lib/es/form'; import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { isValidURL } from 'tiptap/prose-utils'; import { isValidURL } from 'tiptap/prose-utils';
import { cancelSubject, OPEN_LINK_SETTING_MODAL, subject } from '../_event'; import { cancelSubject, OPEN_LINK_SETTING_MODAL, subject } from '../_event';

View File

@ -1,4 +1,4 @@
import { Editor } from 'tiptap/editor/react'; import { Editor } from 'tiptap/core';
import { isMarkActive } from 'tiptap/prose-utils'; import { isMarkActive } from 'tiptap/prose-utils';
import { triggerOpenLinkSettingModal } from '../_event'; import { triggerOpenLinkSettingModal } from '../_event';

View File

@ -1,12 +1,12 @@
import { IconCopy, IconDelete, IconEdit, IconLineHeight } from '@douyinfe/semi-icons'; import { IconCopy, IconDelete, IconEdit, IconLineHeight } from '@douyinfe/semi-icons';
import { Button, Space } from '@douyinfe/semi-ui'; import { Button, Space } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import { SizeSetter } from 'components/size-setter';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { Divider } from 'tiptap/components/divider'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Size } from 'tiptap/components/size';
import { Mind } from 'tiptap/core/extensions/mind'; import { Mind } from 'tiptap/core/extensions/mind';
import { useAttributes } from 'tiptap/editor/hooks/use-attributes'; import { useAttributes } from 'tiptap/core/hooks/use-attributes';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { copyNode, deleteNode, getEditorContainerDOMSize } from 'tiptap/prose-utils'; import { copyNode, deleteNode, getEditorContainerDOMSize } from 'tiptap/prose-utils';
import { triggerOpenMindSettingModal } from '../_event'; import { triggerOpenMindSettingModal } from '../_event';
@ -55,11 +55,11 @@ export const MindBubbleMenu = ({ editor }) => {
<Button size="small" type="tertiary" theme="borderless" icon={<IconEdit />} onClick={openEditLinkModal} /> <Button size="small" type="tertiary" theme="borderless" icon={<IconEdit />} onClick={openEditLinkModal} />
</Tooltip> </Tooltip>
<Size width={width} maxWidth={maxWidth} height={height} onOk={setSize}> <SizeSetter width={width} maxWidth={maxWidth} height={height} onOk={setSize}>
<Tooltip content="设置宽高"> <Tooltip content="设置宽高">
<Button icon={<IconLineHeight />} type="tertiary" theme="borderless" size="small" /> <Button icon={<IconLineHeight />} type="tertiary" theme="borderless" size="small" />
</Tooltip> </Tooltip>
</Size> </SizeSetter>
<Divider /> <Divider />

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { MindBubbleMenu } from './bubble'; import { MindBubbleMenu } from './bubble';
import { MindSettingModal } from './modal'; import { MindSettingModal } from './modal';

View File

@ -2,7 +2,7 @@ import { Modal, Spin, Typography } from '@douyinfe/semi-ui';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { load, renderMind } from 'thirtypart/kityminder'; import { load, renderMind } from 'thirtypart/kityminder';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { cancelSubject, OPEN_MIND_SETTING_MODAL, subject } from '../_event'; import { cancelSubject, OPEN_MIND_SETTING_MODAL, subject } from '../_event';
import styles from './style.module.scss'; import styles from './style.module.scss';

View File

@ -1,11 +1,11 @@
import { IconBold, IconFont, IconHelpCircle, IconMark } from '@douyinfe/semi-icons'; import { IconBold, IconFont, IconHelpCircle, IconMark } from '@douyinfe/semi-icons';
import { Button, Descriptions, Popover, Space, Tooltip, Typography } from '@douyinfe/semi-ui'; import { Button, Descriptions, Popover, Space, Tooltip, Typography } from '@douyinfe/semi-ui';
import cls from 'classnames'; import cls from 'classnames';
import { ColorPicker } from 'components/color-picker';
import { IconDrawBoard, IconMindCenter, IconStructure } from 'components/icons'; import { IconDrawBoard, IconMindCenter, IconStructure } from 'components/icons';
import { IconZoomIn, IconZoomOut } from 'components/icons'; import { IconZoomIn, IconZoomOut } from 'components/icons';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { ColorPicker } from 'tiptap/components/color-picker';
import { clamp } from 'tiptap/prose-utils'; import { clamp } from 'tiptap/prose-utils';
import { MAX_ZOOM, MIN_ZOOM, TEMPLATES, THEMES, ZOOM_STEP } from '../constant'; import { MAX_ZOOM, MIN_ZOOM, TEMPLATES, THEMES, ZOOM_STEP } from '../constant';

View File

@ -2,10 +2,10 @@ import { Button } from '@douyinfe/semi-ui';
import { IconOrderedList } from 'components/icons'; import { IconOrderedList } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { OrderedList as OrderedListExtension } from 'tiptap/core/extensions/ordered-list'; import { OrderedList as OrderedListExtension } from 'tiptap/core/extensions/ordered-list';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const OrderedList: React.FC<{ editor: Editor }> = ({ editor }) => { export const OrderedList: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -21,7 +21,7 @@ import {
IconTableOfContents, IconTableOfContents,
IconTask, IconTask,
} from 'components/icons'; } from 'components/icons';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { createCountdown } from './countdown/service'; import { createCountdown } from './countdown/service';
import { createOrToggleLink } from './link/service'; import { createOrToggleLink } from './link/service';

View File

@ -2,7 +2,7 @@ import { IconRedo } from '@douyinfe/semi-icons';
import { Button } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
export const Redo: React.FC<{ editor: Editor }> = ({ editor }) => { export const Redo: React.FC<{ editor: Editor }> = ({ editor }) => {
const redo = useCallback(() => editor.chain().focus().redo().run(), [editor]); const redo = useCallback(() => editor.chain().focus().redo().run(), [editor]);

View File

@ -4,8 +4,8 @@ import { Tooltip } from 'components/tooltip';
import { IsOnMobile } from 'hooks/use-on-mobile'; import { IsOnMobile } from 'hooks/use-on-mobile';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { Editor } from 'tiptap/core';
import { SearchNReplace } from 'tiptap/core/extensions/search'; import { SearchNReplace } from 'tiptap/core/extensions/search';
import { Editor } from 'tiptap/editor';
const { Text } = Typography; const { Text } = Typography;

View File

@ -2,10 +2,10 @@ import { IconStrikeThrough } from '@douyinfe/semi-icons';
import { Button } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { Strike as StrikeExtension } from 'tiptap/core/extensions/strike'; import { Strike as StrikeExtension } from 'tiptap/core/extensions/strike';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const Strike: React.FC<{ editor: Editor }> = ({ editor }) => { export const Strike: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -4,7 +4,7 @@ import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Subscript as SubscriptExtension } from 'tiptap/core/extensions/subscript'; import { Subscript as SubscriptExtension } from 'tiptap/core/extensions/subscript';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { useActive } from 'tiptap/editor/hooks/use-active'; import { useActive } from 'tiptap/core/hooks/use-active';
export const Subscript: React.FC<{ editor: any }> = ({ editor }) => { export const Subscript: React.FC<{ editor: any }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -4,7 +4,7 @@ import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Superscript as SuperscriptExtension } from 'tiptap/core/extensions/superscript'; import { Superscript as SuperscriptExtension } from 'tiptap/core/extensions/superscript';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { useActive } from 'tiptap/editor/hooks/use-active'; import { useActive } from 'tiptap/core/hooks/use-active';
export const Superscript: React.FC<{ editor: any }> = ({ editor }) => { export const Superscript: React.FC<{ editor: any }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -1,5 +1,6 @@
import { IconCopy } from '@douyinfe/semi-icons'; import { IconCopy } from '@douyinfe/semi-icons';
import { Button, Space } from '@douyinfe/semi-ui'; import { Button, Space } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import { import {
IconAddColumnAfter, IconAddColumnAfter,
IconAddColumnBefore, IconAddColumnBefore,
@ -16,9 +17,8 @@ import {
} from 'components/icons'; } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Divider } from 'tiptap/components/divider'; import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Table } from 'tiptap/core/extensions/table'; import { Table } from 'tiptap/core/extensions/table';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { copyNode, deleteNode } from 'tiptap/prose-utils'; import { copyNode, deleteNode } from 'tiptap/prose-utils';
export const TableBubbleMenu = ({ editor }) => { export const TableBubbleMenu = ({ editor }) => {

View File

@ -2,8 +2,8 @@ import { Button, Space } from '@douyinfe/semi-ui';
import { IconAddColumnAfter, IconAddColumnBefore, IconDeleteColumn } from 'components/icons'; import { IconAddColumnAfter, IconAddColumnBefore, IconDeleteColumn } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Table } from 'tiptap/core/extensions/table'; import { Table } from 'tiptap/core/extensions/table';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { isTableSelected } from 'tiptap/prose-utils'; import { isTableSelected } from 'tiptap/prose-utils';
export const TableColBubbleMenu = ({ editor }) => { export const TableColBubbleMenu = ({ editor }) => {

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
import { TableBubbleMenu } from './bubble'; import { TableBubbleMenu } from './bubble';
import { TableColBubbleMenu } from './col-bubble'; import { TableColBubbleMenu } from './col-bubble';

View File

@ -2,8 +2,8 @@ import { Button, Space } from '@douyinfe/semi-ui';
import { IconAddRowAfter, IconAddRowBefore, IconDeleteRow } from 'components/icons'; import { IconAddRowAfter, IconAddRowBefore, IconDeleteRow } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Table } from 'tiptap/core/extensions/table'; import { Table } from 'tiptap/core/extensions/table';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { isTableSelected } from 'tiptap/prose-utils'; import { isTableSelected } from 'tiptap/prose-utils';
export const TableRowBubbleMenu = ({ editor }) => { export const TableRowBubbleMenu = ({ editor }) => {

View File

@ -2,10 +2,10 @@ import { Button } from '@douyinfe/semi-ui';
import { IconTask } from 'components/icons'; import { IconTask } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { TaskList as TaskListExtension } from 'tiptap/core/extensions/task-list'; import { TaskList as TaskListExtension } from 'tiptap/core/extensions/task-list';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const TaskList: React.FC<{ editor: Editor }> = ({ editor }) => { export const TaskList: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -1,13 +1,13 @@
import { IconFont } from '@douyinfe/semi-icons'; import { IconFont } from '@douyinfe/semi-icons';
import { Button } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { ColorPicker } from 'components/color-picker';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { ColorPicker } from 'tiptap/components/color-picker'; import { Editor } from 'tiptap/core';
import { TextStyle } from 'tiptap/core/extensions/text-style'; import { TextStyle } from 'tiptap/core/extensions/text-style';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active'; import { useAttributes } from 'tiptap/core/hooks/use-attributes';
import { useAttributes } from 'tiptap/editor/hooks/use-attributes';
type Color = { color: string }; type Color = { color: string };

View File

@ -1,5 +1,6 @@
import { Space } from '@douyinfe/semi-ui'; import { Space } from '@douyinfe/semi-ui';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { BubbleMenu } from 'tiptap/core/bubble-menu';
import { Attachment } from 'tiptap/core/extensions/attachment'; import { Attachment } from 'tiptap/core/extensions/attachment';
import { Callout } from 'tiptap/core/extensions/callout'; import { Callout } from 'tiptap/core/extensions/callout';
import { CodeBlock } from 'tiptap/core/extensions/code-block'; import { CodeBlock } from 'tiptap/core/extensions/code-block';
@ -16,7 +17,6 @@ import { Mind } from 'tiptap/core/extensions/mind';
import { Table } from 'tiptap/core/extensions/table'; import { Table } from 'tiptap/core/extensions/table';
import { TableOfContents } from 'tiptap/core/extensions/table-of-contents'; import { TableOfContents } from 'tiptap/core/extensions/table-of-contents';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { BubbleMenu } from 'tiptap/editor/views/bubble-menu';
import { BackgroundColor } from '../background-color'; import { BackgroundColor } from '../background-color';
import { Bold } from '../bold'; import { Bold } from '../bold';

View File

@ -2,9 +2,9 @@ import { IconUnderline } from '@douyinfe/semi-icons';
import { Button } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/core';
import { Title } from 'tiptap/core/extensions/title'; import { Title } from 'tiptap/core/extensions/title';
import { Editor } from 'tiptap/editor'; import { useActive } from 'tiptap/core/hooks/use-active';
import { useActive } from 'tiptap/editor/hooks/use-active';
export const Underline: React.FC<{ editor: Editor }> = ({ editor }) => { export const Underline: React.FC<{ editor: Editor }> = ({ editor }) => {
const isTitleActive = useActive(editor, Title.name); const isTitleActive = useActive(editor, Title.name);

View File

@ -2,7 +2,7 @@ import { IconUndo } from '@douyinfe/semi-icons';
import { Button } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { Editor } from 'tiptap/editor'; import { Editor } from 'tiptap/core';
export const Undo: React.FC<{ editor: Editor }> = ({ editor }) => { export const Undo: React.FC<{ editor: Editor }> = ({ editor }) => {
const undo = useCallback(() => editor.chain().focus().undo().run(), [editor]); const undo = useCallback(() => editor.chain().focus().undo().run(), [editor]);

View File

@ -9,7 +9,7 @@ import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { load, renderMind } from 'thirtypart/kityminder'; import { load, renderMind } from 'thirtypart/kityminder';
import { Mind } from 'tiptap/core/extensions/mind'; import { Mind } from 'tiptap/core/extensions/mind';
import { MAX_ZOOM, MIN_ZOOM, ZOOM_STEP } from 'tiptap/editor/menus/mind/constant'; import { MAX_ZOOM, MIN_ZOOM, ZOOM_STEP } from 'tiptap/core/menus/mind/constant';
import { clamp, getEditorContainerDOMSize } from 'tiptap/prose-utils'; import { clamp, getEditorContainerDOMSize } from 'tiptap/prose-utils';
import styles from './index.module.scss'; import styles from './index.module.scss';

View File

@ -12,11 +12,11 @@ import { useNetwork } from 'hooks/use-network';
import { IsOnMobile } from 'hooks/use-on-mobile'; import { IsOnMobile } from 'hooks/use-on-mobile';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'; import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { EditorContent, useEditor } from 'tiptap/core';
import { Collaboration } from 'tiptap/core/extensions/collaboration'; import { Collaboration } from 'tiptap/core/extensions/collaboration';
import { CollaborationCursor } from 'tiptap/core/extensions/collaboration-cursor'; import { CollaborationCursor } from 'tiptap/core/extensions/collaboration-cursor';
import { Tocs } from 'tiptap/editor/tocs'; import { Tocs } from 'tiptap/editor/tocs';
import { EditorContent, useEditor } from '../../react';
import { CollaborationKit } from '../kit'; import { CollaborationKit } from '../kit';
import styles from './index.module.scss'; import styles from './index.module.scss';
import { MenuBar } from './menubar'; import { MenuBar } from './menubar';

View File

@ -5,9 +5,9 @@ import { throttle } from 'helpers/throttle';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { SecureDocumentIllustration } from 'illustrations/secure-document'; import { SecureDocumentIllustration } from 'illustrations/secure-document';
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'; import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { IndexeddbPersistence } from 'tiptap/core/y-indexeddb'; import { Editor } from 'tiptap/core';
import { IndexeddbPersistence } from 'tiptap/core/thritypart/y-indexeddb';
import { Editor } from '../../react';
import { EditorInstance } from './editor'; import { EditorInstance } from './editor';
import styles from './index.module.scss'; import styles from './index.module.scss';
import { ICollaborationEditorProps, ProviderStatus } from './type'; import { ICollaborationEditorProps, ProviderStatus } from './type';

View File

@ -1,44 +1,44 @@
import { Space } from '@douyinfe/semi-ui'; import { Space } from '@douyinfe/semi-ui';
import { Divider } from 'components/divider';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { Divider } from 'tiptap/components/divider'; import { Editor } from 'tiptap/core';
import { Editor } from 'tiptap/editor'; import { Align } from 'tiptap/core/menus/align';
import { Align } from 'tiptap/editor/menus/align'; import { Attachment } from 'tiptap/core/menus/attachment';
import { Attachment } from 'tiptap/editor/menus/attachment'; import { BackgroundColor } from 'tiptap/core/menus/background-color';
import { BackgroundColor } from 'tiptap/editor/menus/background-color'; import { Blockquote } from 'tiptap/core/menus/blockquote';
import { Blockquote } from 'tiptap/editor/menus/blockquote'; import { Bold } from 'tiptap/core/menus/bold';
import { Bold } from 'tiptap/editor/menus/bold'; import { BulletList } from 'tiptap/core/menus/bullet-list';
import { BulletList } from 'tiptap/editor/menus/bullet-list'; import { Callout } from 'tiptap/core/menus/callout';
import { Callout } from 'tiptap/editor/menus/callout'; import { CleadrNodeAndMarks } from 'tiptap/core/menus/clear-node-and-marks';
import { CleadrNodeAndMarks } from 'tiptap/editor/menus/clear-node-and-marks'; import { Code } from 'tiptap/core/menus/code';
import { Code } from 'tiptap/editor/menus/code'; import { CodeBlock } from 'tiptap/core/menus/code-block';
import { CodeBlock } from 'tiptap/editor/menus/code-block'; import { Countdonw } from 'tiptap/core/menus/countdown';
import { Countdonw } from 'tiptap/editor/menus/countdown'; import { DocumentChildren } from 'tiptap/core/menus/document-children';
import { DocumentChildren } from 'tiptap/editor/menus/document-children'; import { DocumentReference } from 'tiptap/core/menus/document-reference';
import { DocumentReference } from 'tiptap/editor/menus/document-reference'; import { Emoji } from 'tiptap/core/menus/emoji';
import { Emoji } from 'tiptap/editor/menus/emoji'; import { Flow } from 'tiptap/core/menus/flow';
import { Flow } from 'tiptap/editor/menus/flow'; import { FontSize } from 'tiptap/core/menus/fontsize';
import { FontSize } from 'tiptap/editor/menus/fontsize'; import { Heading } from 'tiptap/core/menus/heading';
import { Heading } from 'tiptap/editor/menus/heading'; import { HorizontalRule } from 'tiptap/core/menus/horizontal-rule';
import { HorizontalRule } from 'tiptap/editor/menus/horizontal-rule'; import { Ident } from 'tiptap/core/menus/ident';
import { Ident } from 'tiptap/editor/menus/ident'; import { Iframe } from 'tiptap/core/menus/iframe';
import { Iframe } from 'tiptap/editor/menus/iframe'; import { Image } from 'tiptap/core/menus/image';
import { Image } from 'tiptap/editor/menus/image'; import { Insert } from 'tiptap/core/menus/insert';
import { Insert } from 'tiptap/editor/menus/insert'; import { Italic } from 'tiptap/core/menus/italic';
import { Italic } from 'tiptap/editor/menus/italic'; import { Katex } from 'tiptap/core/menus/katex';
import { Katex } from 'tiptap/editor/menus/katex'; import { Link } from 'tiptap/core/menus/link';
import { Link } from 'tiptap/editor/menus/link'; import { Mind } from 'tiptap/core/menus/mind';
import { Mind } from 'tiptap/editor/menus/mind'; import { OrderedList } from 'tiptap/core/menus/ordered-list';
import { OrderedList } from 'tiptap/editor/menus/ordered-list'; import { Redo } from 'tiptap/core/menus/redo';
import { Redo } from 'tiptap/editor/menus/redo'; import { Search } from 'tiptap/core/menus/search';
import { Search } from 'tiptap/editor/menus/search'; import { Strike } from 'tiptap/core/menus/strike';
import { Strike } from 'tiptap/editor/menus/strike'; import { Subscript } from 'tiptap/core/menus/subscript';
import { Subscript } from 'tiptap/editor/menus/subscript'; import { Superscript } from 'tiptap/core/menus/superscript';
import { Superscript } from 'tiptap/editor/menus/superscript'; import { Table } from 'tiptap/core/menus/table';
import { Table } from 'tiptap/editor/menus/table'; import { TaskList } from 'tiptap/core/menus/task-list';
import { TaskList } from 'tiptap/editor/menus/task-list'; import { TextColor } from 'tiptap/core/menus/text-color';
import { TextColor } from 'tiptap/editor/menus/text-color'; import { Underline } from 'tiptap/core/menus/underline';
import { Underline } from 'tiptap/editor/menus/underline'; import { Undo } from 'tiptap/core/menus/undo';
import { Undo } from 'tiptap/editor/menus/undo';
const _MenuBar: React.FC<{ editor: Editor }> = ({ editor }) => { const _MenuBar: React.FC<{ editor: Editor }> = ({ editor }) => {
const isEditable = useMemo(() => editor && editor.isEditable, [editor]); const isEditable = useMemo(() => editor && editor.isEditable, [editor]);

Some files were not shown because too many files have changed in this diff Show More