From c5adad8b37a76661dba99615e7da6fc948cb8199 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sun, 3 Apr 2022 20:21:36 +0800
Subject: [PATCH] feat: add banner menu

---
 packages/client/src/tiptap/menubar.tsx        |   2 +
 .../client/src/tiptap/menus/banner/bubble.tsx | 106 ++++++++++++++++++
 .../client/src/tiptap/menus/banner/index.tsx  |  15 +++
 3 files changed, 123 insertions(+)
 create mode 100644 packages/client/src/tiptap/menus/banner/bubble.tsx
 create mode 100644 packages/client/src/tiptap/menus/banner/index.tsx

diff --git a/packages/client/src/tiptap/menubar.tsx b/packages/client/src/tiptap/menubar.tsx
index b257235b..505b848b 100644
--- a/packages/client/src/tiptap/menubar.tsx
+++ b/packages/client/src/tiptap/menubar.tsx
@@ -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} />
diff --git a/packages/client/src/tiptap/menus/banner/bubble.tsx b/packages/client/src/tiptap/menus/banner/bubble.tsx
new file mode 100644
index 00000000..2cf3084d
--- /dev/null
+++ b/packages/client/src/tiptap/menus/banner/bubble.tsx
@@ -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>
+  );
+};
diff --git a/packages/client/src/tiptap/menus/banner/index.tsx b/packages/client/src/tiptap/menus/banner/index.tsx
new file mode 100644
index 00000000..57e077a0
--- /dev/null
+++ b/packages/client/src/tiptap/menus/banner/index.tsx
@@ -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} />
+    </>
+  );
+};