feat: add banner menu

This commit is contained in:
fantasticit 2022-04-03 20:21:36 +08:00
parent 6fbcb4f127
commit c5adad8b37
3 changed files with 123 additions and 0 deletions

View File

@ -32,6 +32,7 @@ import { Blockquote } from './menus/blockquote';
import { HorizontalRule } from './menus/horizontal-rule';
import { Search } from './menus/search';
import { Banner } from './menus/banner';
import { Countdonw } from './menus/countdown';
import { Image } from './menus/image';
import { Iframe } from './menus/iframe';
@ -86,6 +87,7 @@ export const MenuBar: React.FC<{ editor: any }> = ({ editor }) => {
<HorizontalRule editor={editor} />
<Search editor={editor} />
<Banner editor={editor} />
<Countdonw editor={editor} />
<Image editor={editor} />
<Iframe editor={editor} />

View File

@ -0,0 +1,106 @@
import { Editor } from '@tiptap/core';
import { Space, Button } from '@douyinfe/semi-ui';
import { IconDelete, IconTickCircle, IconAlertTriangle, IconClear, IconInfoCircle } from '@douyinfe/semi-icons';
import { Tooltip } from 'components/tooltip';
import { BubbleMenu } from '../../views/bubble-menu';
import { Divider } from '../../divider';
import { Banner } from '../../extensions/banner';
import { deleteNode } from '../../services/delete-node';
export const BannerBubbleMenu: React.FC<{ editor: Editor }> = ({ editor }) => {
return (
<BubbleMenu
className={'bubble-menu'}
editor={editor}
pluginKey="banner-bubble-menu"
shouldShow={() => editor.isActive(Banner.name)}
matchRenderContainer={(node) => node && node.id === 'js-bannber-container'}
>
<Space>
<Tooltip content="信息">
<Button
size="small"
type="tertiary"
theme="borderless"
icon={<IconInfoCircle style={{ color: 'var(--semi-color-info)' }} />}
onClick={() => {
editor
.chain()
.updateAttributes(Banner.name, {
type: 'info',
})
.focus()
.run();
}}
/>
</Tooltip>
<Tooltip content="警告">
<Button
onClick={() => {
editor
.chain()
.updateAttributes(Banner.name, {
type: 'warning',
})
.focus()
.run();
}}
icon={<IconAlertTriangle style={{ color: 'var(--semi-color-warning)' }} />}
type="tertiary"
theme="borderless"
size="small"
/>
</Tooltip>
<Tooltip content="危险">
<Button
onClick={() => {
editor
.chain()
.updateAttributes(Banner.name, {
type: 'danger',
})
.focus()
.run();
}}
icon={<IconClear style={{ color: 'var(--semi-color-danger)' }} />}
type="tertiary"
theme="borderless"
size="small"
/>
</Tooltip>
<Tooltip content="成功">
<Button
onClick={() => {
editor
.chain()
.updateAttributes(Banner.name, {
type: 'success',
})
.focus()
.run();
}}
icon={<IconTickCircle style={{ color: 'var(--semi-color-success)' }} />}
type="tertiary"
theme="borderless"
size="small"
/>
</Tooltip>
<Divider />
<Tooltip content="删除" hideOnClick>
<Button
size="small"
type="tertiary"
theme="borderless"
icon={<IconDelete />}
onClick={() => deleteNode('banner', editor)}
/>
</Tooltip>
</Space>
</BubbleMenu>
);
};

View File

@ -0,0 +1,15 @@
import React from 'react';
import { Editor } from '@tiptap/core';
import { BannerBubbleMenu } from './bubble';
export const Banner: React.FC<{ editor: Editor }> = ({ editor }) => {
if (!editor) {
return null;
}
return (
<>
<BannerBubbleMenu editor={editor} />
</>
);
};