mirror of https://github.com/fantasticit/think.git
feat: add banner menu
This commit is contained in:
parent
6fbcb4f127
commit
c5adad8b37
|
@ -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} />
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue