mirror of https://github.com/fantasticit/think.git
tiptap: fix menu
This commit is contained in:
parent
2d5c756c0b
commit
43ed50b137
|
@ -47,7 +47,7 @@ export const Status = Node.create({
|
||||||
parseHTML: getDatasetAttribute('borderColor'),
|
parseHTML: getDatasetAttribute('borderColor'),
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
default: '请设置状态内容',
|
default: '',
|
||||||
parseHTML: getDatasetAttribute('text'),
|
parseHTML: getDatasetAttribute('text'),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -52,7 +52,7 @@ export const ExcalidrawBubbleMenu = ({ editor }) => {
|
||||||
<BubbleMenu
|
<BubbleMenu
|
||||||
className={'bubble-menu'}
|
className={'bubble-menu'}
|
||||||
editor={editor}
|
editor={editor}
|
||||||
pluginKey="flow-bubble-menu"
|
pluginKey="excalidraw-bubble-menu"
|
||||||
shouldShow={shouldShow}
|
shouldShow={shouldShow}
|
||||||
tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
|
tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
|
||||||
>
|
>
|
||||||
|
|
|
@ -8,7 +8,7 @@ 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]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip content="撤销">
|
<Tooltip content="重做">
|
||||||
<Button onClick={redo} icon={<IconRedo />} type="tertiary" theme="borderless" />
|
<Button onClick={redo} icon={<IconRedo />} type="tertiary" theme="borderless" />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
);
|
);
|
||||||
|
|
|
@ -14,6 +14,7 @@ import { Image } from 'tiptap/core/extensions/image';
|
||||||
import { Katex } from 'tiptap/core/extensions/katex';
|
import { Katex } from 'tiptap/core/extensions/katex';
|
||||||
import { Link } from 'tiptap/core/extensions/link';
|
import { Link } from 'tiptap/core/extensions/link';
|
||||||
import { Mind } from 'tiptap/core/extensions/mind';
|
import { Mind } from 'tiptap/core/extensions/mind';
|
||||||
|
import { Status } from 'tiptap/core/extensions/status';
|
||||||
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';
|
||||||
|
@ -45,19 +46,19 @@ const OTHER_BUBBLE_MENU_TYPES = [
|
||||||
DocumentChildren.name,
|
DocumentChildren.name,
|
||||||
Katex.name,
|
Katex.name,
|
||||||
HorizontalRule.name,
|
HorizontalRule.name,
|
||||||
|
Status.name,
|
||||||
];
|
];
|
||||||
|
|
||||||
export const Text = ({ editor }) => {
|
export const Text = ({ editor }) => {
|
||||||
const shouldShow = useCallback(
|
const shouldShow = useCallback(() => {
|
||||||
() => !editor.state.selection.empty && OTHER_BUBBLE_MENU_TYPES.every((type) => !editor.isActive(type)),
|
return !editor.state.selection.empty && OTHER_BUBBLE_MENU_TYPES.every((type) => !editor.isActive(type));
|
||||||
[editor]
|
}, [editor]);
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BubbleMenu
|
<BubbleMenu
|
||||||
className={'bubble-menu'}
|
className={'bubble-menu'}
|
||||||
editor={editor}
|
editor={editor}
|
||||||
pluginKey="code-block-bubble-menu"
|
pluginKey="text-bubble-menu"
|
||||||
shouldShow={shouldShow}
|
shouldShow={shouldShow}
|
||||||
tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
|
tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
|
||||||
>
|
>
|
||||||
|
|
|
@ -4,17 +4,19 @@ import { Tooltip } from 'components/tooltip';
|
||||||
import React, { useCallback } from 'react';
|
import React, { useCallback } from 'react';
|
||||||
import { Editor } from 'tiptap/core';
|
import { Editor } from 'tiptap/core';
|
||||||
import { Title } from 'tiptap/core/extensions/title';
|
import { Title } from 'tiptap/core/extensions/title';
|
||||||
|
import { Underline as UnderlineExtension } from 'tiptap/core/extensions/underline';
|
||||||
import { useActive } from 'tiptap/core/hooks/use-active';
|
import { useActive } from 'tiptap/core/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);
|
||||||
|
const isUnderlineActive = useActive(editor, UnderlineExtension.name);
|
||||||
|
|
||||||
const toggleUnderline = useCallback(() => editor.chain().focus().toggleUnderline().run(), [editor]);
|
const toggleUnderline = useCallback(() => editor.chain().focus().toggleUnderline().run(), [editor]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip content="下划线">
|
<Tooltip content="下划线">
|
||||||
<Button
|
<Button
|
||||||
theme={editor.isActive('underline') ? 'light' : 'borderless'}
|
theme={isUnderlineActive ? 'light' : 'borderless'}
|
||||||
type="tertiary"
|
type="tertiary"
|
||||||
icon={<IconUnderline />}
|
icon={<IconUnderline />}
|
||||||
onClick={toggleUnderline}
|
onClick={toggleUnderline}
|
||||||
|
|
|
@ -58,13 +58,15 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (defaultShowPicker && user && user.id === createUser) {
|
if (defaultShowPicker && user && user.id === createUser) {
|
||||||
toggleVisible(true);
|
toggleVisible(true);
|
||||||
setTimeout(() => ref.current?.focus(), 100);
|
setTimeout(() => ref.current?.focus(), 200);
|
||||||
}
|
}
|
||||||
}, [defaultShowPicker, toggleVisible, createUser, user]);
|
}, [defaultShowPicker, toggleVisible, createUser, user]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (visible) {
|
if (visible) {
|
||||||
ref.current?.focus();
|
setTimeout(() => {
|
||||||
|
ref.current?.focus();
|
||||||
|
}, 200);
|
||||||
} else {
|
} else {
|
||||||
updateAttributes({ text: currentText });
|
updateAttributes({ text: currentText });
|
||||||
}
|
}
|
||||||
|
|
|
@ -165,7 +165,11 @@ export const EditorInstance = forwardRef((props: IProps, ref) => {
|
||||||
{(!online || status === 'disconnected') && (
|
{(!online || status === 'disconnected') && (
|
||||||
<Banner
|
<Banner
|
||||||
type="warning"
|
type="warning"
|
||||||
description="我们已与您断开连接,您可以继续编辑文档。一旦重新连接,我们会自动重新提交数据。"
|
description={
|
||||||
|
editable
|
||||||
|
? '我们已与您断开连接,您可以继续编辑文档。一旦重新连接,我们会自动重新提交数据。'
|
||||||
|
: '我们已与您断开连接,您可以继续阅读文档。一旦重新连接,我们会自动重新刷新数据。'
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
@ -38,6 +38,7 @@ import { Subscript } from 'tiptap/core/menus/subscript';
|
||||||
import { Superscript } from 'tiptap/core/menus/superscript';
|
import { Superscript } from 'tiptap/core/menus/superscript';
|
||||||
import { Table } from 'tiptap/core/menus/table';
|
import { Table } from 'tiptap/core/menus/table';
|
||||||
import { TaskList } from 'tiptap/core/menus/task-list';
|
import { TaskList } from 'tiptap/core/menus/task-list';
|
||||||
|
import { Text } from 'tiptap/core/menus/text';
|
||||||
import { TextColor } from 'tiptap/core/menus/text-color';
|
import { TextColor } from 'tiptap/core/menus/text-color';
|
||||||
import { Underline } from 'tiptap/core/menus/underline';
|
import { Underline } from 'tiptap/core/menus/underline';
|
||||||
import { Undo } from 'tiptap/core/menus/undo';
|
import { Undo } from 'tiptap/core/menus/undo';
|
||||||
|
@ -111,6 +112,8 @@ const _MenuBar: React.FC<{ editor: Editor }> = ({ editor }) => {
|
||||||
<Mind editor={editor} />
|
<Mind editor={editor} />
|
||||||
<Excalidraw editor={editor} />
|
<Excalidraw editor={editor} />
|
||||||
<Columns editor={editor} />
|
<Columns editor={editor} />
|
||||||
|
|
||||||
|
<Text editor={editor} />
|
||||||
</Space>
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue