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