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