tiptap: fix menu

This commit is contained in:
fantasticit 2022-08-23 10:48:22 +08:00
parent 2d5c756c0b
commit 43ed50b137
8 changed files with 24 additions and 12 deletions

View File

@ -47,7 +47,7 @@ export const Status = Node.create({
parseHTML: getDatasetAttribute('borderColor'),
},
text: {
default: '请设置状态内容',
default: '',
parseHTML: getDatasetAttribute('text'),
},
};

View File

@ -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)' }}
>

View File

@ -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>
);

View File

@ -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)' }}
>

View File

@ -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}

View File

@ -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 });
}

View File

@ -165,7 +165,11 @@ export const EditorInstance = forwardRef((props: IProps, ref) => {
{(!online || status === 'disconnected') && (
<Banner
type="warning"
description="我们已与您断开连接,您可以继续编辑文档。一旦重新连接,我们会自动重新提交数据。"
description={
editable
? '我们已与您断开连接,您可以继续编辑文档。一旦重新连接,我们会自动重新提交数据。'
: '我们已与您断开连接,您可以继续阅读文档。一旦重新连接,我们会自动重新刷新数据。'
}
/>
)}

View File

@ -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>
);