mirror of https://github.com/fantasticit/think.git
tiptap: refactor structure
This commit is contained in:
parent
77cf05fb20
commit
799697c98a
|
@ -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;
|
||||||
|
});
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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(() => {
|
|
@ -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;
|
|
||||||
});
|
|
|
@ -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>;
|
|
||||||
};
|
|
|
@ -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,
|
|
@ -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';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -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' {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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');
|
||||||
|
|
|
@ -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 };
|
|
@ -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 {
|
|
@ -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);
|
|
@ -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 }) => {
|
|
@ -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';
|
||||||
|
|
|
@ -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',
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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';
|
|
@ -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';
|
||||||
|
|
|
@ -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(() => {
|
|
@ -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 }) => {
|
|
@ -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';
|
||||||
|
|
|
@ -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);
|
|
@ -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';
|
|
@ -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';
|
|
@ -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';
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Editor } from 'tiptap/editor';
|
import { Editor } from 'tiptap/core';
|
||||||
|
|
||||||
import { triggerOpenCountSettingModal } from '../_event';
|
import { triggerOpenCountSettingModal } from '../_event';
|
||||||
|
|
|
@ -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 }) => {
|
|
@ -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';
|
||||||
|
|
|
@ -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;
|
|
@ -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';
|
||||||
|
|
|
@ -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(
|
|
@ -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';
|
|
@ -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';
|
|
@ -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';
|
||||||
|
|
|
@ -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];
|
||||||
|
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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 />
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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);
|
|
@ -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;
|
|
@ -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';
|
||||||
|
|
|
@ -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';
|
|
@ -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';
|
|
@ -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';
|
|
@ -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';
|
|
@ -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 />
|
||||||
|
|
|
@ -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';
|
|
@ -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';
|
|
@ -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';
|
|
@ -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);
|
|
@ -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';
|
|
@ -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]);
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
|
@ -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);
|
|
@ -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);
|
|
@ -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 }) => {
|
|
@ -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 }) => {
|
|
@ -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';
|
|
@ -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 }) => {
|
|
@ -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);
|
|
@ -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 };
|
||||||
|
|
|
@ -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';
|
|
@ -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);
|
|
@ -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]);
|
|
@ -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';
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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
Loading…
Reference in New Issue