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'), parseHTML: getDatasetAttribute('borderColor'),
}, },
text: { text: {
default: '请设置状态内容', default: '',
parseHTML: getDatasetAttribute('text'), parseHTML: getDatasetAttribute('text'),
}, },
}; };

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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
? '我们已与您断开连接,您可以继续编辑文档。一旦重新连接,我们会自动重新提交数据。'
: '我们已与您断开连接,您可以继续阅读文档。一旦重新连接,我们会自动重新刷新数据。'
}
/> />
)} )}

View File

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