@ctzhian/tiptap 1.0.0 → 1.1.0

package/dist/contants/slash-commands.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { AttachmentLineIcon, CodeBoxLineIcon, CodeLineIcon, DoubleQuotesLIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, ImageLineIcon, LinkIcon, ListCheck2Icon, ListOrdered2Icon, ListUnorderedIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, TextWrapIcon } from "../component/Icons";
+import { AttachmentLineIcon, CodeBoxLineIcon, CodeLineIcon, DoubleQuotesLIcon, FunctionsIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, ImageLineIcon, Information2LineIcon, LinkIcon, ListCheck2Icon, ListOrdered2Icon, ListUnorderedIcon, MenuFold2FillIcon, MovieLineIcon, Music2LineIcon, SeparatorIcon, SquareRootIcon, Table2Icon, TextWrapIcon } from "../component/Icons";
 export var slashCommands = [{
-  title: '标题 1',
+  title: '一级标题',
   icon: /*#__PURE__*/React.createElement(H1Icon, {
     sx: {
       fontSize: '1rem'
@@ -15,7 +15,7 @@ export var slashCommands = [{
     }).run();
   }
 }, {
-  title: '标题 2',
+  title: '二级标题',
   icon: /*#__PURE__*/React.createElement(H2Icon, {
     sx: {
       fontSize: '1rem'
@@ -29,7 +29,7 @@ export var slashCommands = [{
     }).run();
   }
 }, {
-  title: '标题 3',
+  title: '三级标题',
   icon: /*#__PURE__*/React.createElement(H3Icon, {
     sx: {
       fontSize: '1rem'
@@ -43,7 +43,7 @@ export var slashCommands = [{
     }).run();
   }
 }, {
-  title: '标题 4',
+  title: '四级标题',
   icon: /*#__PURE__*/React.createElement(H4Icon, {
     sx: {
       fontSize: '1rem'
@@ -57,7 +57,7 @@ export var slashCommands = [{
     }).run();
   }
 }, {
-  title: '标题 5',
+  title: '五级标题',
   icon: /*#__PURE__*/React.createElement(H5Icon, {
     sx: {
       fontSize: '1rem'
@@ -71,7 +71,7 @@ export var slashCommands = [{
     }).run();
   }
 }, {
-  title: '标题 6',
+  title: '六级标题',
   icon: /*#__PURE__*/React.createElement(H6Icon, {
     sx: {
       fontSize: '1rem'
@@ -145,7 +145,7 @@ export var slashCommands = [{
     editor.chain().focus().deleteRange(range).setHorizontalRule().run();
   }
 }, {
-  title: '引用',
+  title: '引用块',
   icon: /*#__PURE__*/React.createElement(DoubleQuotesLIcon, {
     sx: {
       fontSize: '1rem'
@@ -157,8 +157,8 @@ export var slashCommands = [{
     editor.chain().focus().deleteRange(range).toggleBlockquote().run();
   }
 }, {
-  title: '链接',
-  icon: /*#__PURE__*/React.createElement(LinkIcon, {
+  title: '行内代码',
+  icon: /*#__PURE__*/React.createElement(CodeLineIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -166,13 +166,11 @@ export var slashCommands = [{
   command: function command(_ref13) {
     var editor = _ref13.editor,
       range = _ref13.range;
-    editor.chain().focus().deleteRange(range).setInlineLink({
-      href: ''
-    }).run();
+    editor.chain().focus().deleteRange(range).setMark('code').run();
   }
 }, {
-  title: '折叠块',
-  icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
+  title: '代码块',
+  icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -180,11 +178,11 @@ export var slashCommands = [{
   command: function command(_ref14) {
     var editor = _ref14.editor,
       range = _ref14.range;
-    editor.chain().focus().deleteRange(range).setDetails().run();
+    editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
   }
 }, {
-  title: '行内代码',
-  icon: /*#__PURE__*/React.createElement(CodeLineIcon, {
+  title: '链接',
+  icon: /*#__PURE__*/React.createElement(LinkIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -192,11 +190,13 @@ export var slashCommands = [{
   command: function command(_ref15) {
     var editor = _ref15.editor,
       range = _ref15.range;
-    editor.chain().focus().deleteRange(range).setMark('code').run();
+    editor.chain().focus().deleteRange(range).setInlineLink({
+      href: ''
+    }).run();
   }
 }, {
-  title: '代码块',
-  icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
+  title: '折叠块',
+  icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -204,11 +204,11 @@ export var slashCommands = [{
   command: function command(_ref16) {
     var editor = _ref16.editor,
       range = _ref16.range;
-    editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+    editor.chain().focus().deleteRange(range).setDetails().run();
   }
 }, {
-  title: '行内数学公式',
-  icon: /*#__PURE__*/React.createElement(SquareRootIcon, {
+  title: '表格',
+  icon: /*#__PURE__*/React.createElement(Table2Icon, {
     sx: {
       fontSize: '1rem'
     }
@@ -216,6 +216,62 @@ export var slashCommands = [{
   command: function command(_ref17) {
     var editor = _ref17.editor,
       range = _ref17.range;
+    editor.chain().focus().deleteRange(range).insertTable({
+      rows: 3,
+      cols: 4,
+      withHeaderRow: true
+    }).run();
+  }
+}, {
+  title: '警告提示',
+  icon: /*#__PURE__*/React.createElement(Information2LineIcon, {
+    sx: {
+      fontSize: '1rem'
+    }
+  }),
+  command: function command(_ref18) {
+    var editor = _ref18.editor,
+      range = _ref18.range,
+      attrs = _ref18.attrs;
+    editor.chain().focus().deleteRange(range).toggleAlert({
+      type: (attrs === null || attrs === void 0 ? void 0 : attrs.type) || 'icon',
+      variant: (attrs === null || attrs === void 0 ? void 0 : attrs.variant) || 'info'
+    }).run();
+  }
+}, {
+  title: '折叠块',
+  icon: /*#__PURE__*/React.createElement(MenuFold2FillIcon, {
+    sx: {
+      fontSize: '1rem'
+    }
+  }),
+  command: function command(_ref19) {
+    var editor = _ref19.editor,
+      range = _ref19.range;
+    editor.chain().focus().deleteRange(range).setDetails().run();
+  }
+}, {
+  title: '代码块',
+  icon: /*#__PURE__*/React.createElement(CodeBoxLineIcon, {
+    sx: {
+      fontSize: '1rem'
+    }
+  }),
+  command: function command(_ref20) {
+    var editor = _ref20.editor,
+      range = _ref20.range;
+    editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+  }
+}, {
+  title: '行内数学公式',
+  icon: /*#__PURE__*/React.createElement(SquareRootIcon, {
+    sx: {
+      fontSize: '1rem'
+    }
+  }),
+  command: function command(_ref21) {
+    var editor = _ref21.editor,
+      range = _ref21.range;
     editor.chain().focus().deleteRange(range).setInlineMath({
       latex: ''
     }).run();
@@ -227,9 +283,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref18) {
-    var editor = _ref18.editor,
-      range = _ref18.range;
+  command: function command(_ref22) {
+    var editor = _ref22.editor,
+      range = _ref22.range;
     editor.chain().focus().deleteRange(range).setBlockMath({
       latex: ''
     }).run();
@@ -241,9 +297,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref19) {
-    var editor = _ref19.editor,
-      range = _ref19.range;
+  command: function command(_ref23) {
+    var editor = _ref23.editor,
+      range = _ref23.range;
     editor.chain().focus().deleteRange(range).insertTable({
       rows: 3,
       cols: 4,
@@ -257,9 +313,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref20) {
-    var editor = _ref20.editor,
-      range = _ref20.range;
+  command: function command(_ref24) {
+    var editor = _ref24.editor,
+      range = _ref24.range;
     editor.chain().focus().deleteRange(range).setImage({
       src: '',
       width: 760
@@ -272,9 +328,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref21) {
-    var editor = _ref21.editor,
-      range = _ref21.range;
+  command: function command(_ref25) {
+    var editor = _ref25.editor,
+      range = _ref25.range;
     editor.chain().focus().deleteRange(range).setVideo({
       src: '',
       width: 760
@@ -287,9 +343,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref22) {
-    var editor = _ref22.editor,
-      range = _ref22.range;
+  command: function command(_ref26) {
+    var editor = _ref26.editor,
+      range = _ref26.range;
     editor.chain().focus().deleteRange(range).setAudio({
       src: ''
     }).run();
@@ -301,9 +357,9 @@ export var slashCommands = [{
       fontSize: '1rem'
     }
   }),
-  command: function command(_ref23) {
-    var editor = _ref23.editor,
-      range = _ref23.range;
+  command: function command(_ref27) {
+    var editor = _ref27.editor,
+      range = _ref27.range;
     editor.chain().focus().deleteRange(range).setInlineAttachment({
       url: '',
       title: '',

package/dist/extension/component/Alert/index.d.ts

@@ -1,11 +1,9 @@
+import { NodeViewProps } from '@tiptap/react';
 import React from 'react';
-interface AlertViewWrapperProps {
-    node: any;
-    updateAttributes: any;
-    selected: boolean;
-    editor: any;
-    onUpload?: (file: File) => Promise<string>;
-    onError?: (error: string) => void;
+export interface AlertAttributes {
+    id?: string;
+    variant?: 'info' | 'warning' | 'error' | 'success';
+    type?: 'text' | 'icon';
 }
-declare const AlertViewWrapper: React.FC<AlertViewWrapperProps>;
-export default AlertViewWrapper;
+declare const AlertView: React.FC<NodeViewProps>;
+export default AlertView;

package/dist/extension/component/Alert/index.js

@@ -1,125 +1,202 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { Box, Typography, useTheme } from '@mui/material';
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { FloatingPopover } from "../../../component";
+import { CheckboxCircleFillIcon, CloseCircleFillIcon, ErrorWarningFillIcon, Information2FillIcon, ScrollToBottomLineIcon, TextIcon } from "../../../component/Icons";
+import { ToolbarItem } from "../../../component/Toolbar";
+import { Box, Divider, Stack } from '@mui/material';
 import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
-import React from 'react';
-import { CheckboxCircleFillIcon, CloseCircleFillIcon, ErrorWarningFillIcon, Information2FillIcon } from "../../../component/Icons";
-var AlertViewWrapper = function AlertViewWrapper(_ref) {
-  var node = _ref.node,
+import React, { useMemo, useRef, useState } from 'react';
+var VARIANT_DATA = {
+  info: {
+    icon: /*#__PURE__*/React.createElement(Information2FillIcon, {
+      sx: {
+        fontSize: '1.25rem'
+      }
+    }),
+    color: 'var(--mui-palette-primary-main)'
+  },
+  warning: {
+    icon: /*#__PURE__*/React.createElement(ErrorWarningFillIcon, {
+      sx: {
+        fontSize: '1.25rem'
+      }
+    }),
+    color: 'var(--mui-palette-warning-main)'
+  },
+  error: {
+    icon: /*#__PURE__*/React.createElement(CloseCircleFillIcon, {
+      sx: {
+        fontSize: '1.25rem'
+      }
+    }),
+    color: 'var(--mui-palette-error-main)'
+  },
+  success: {
+    icon: /*#__PURE__*/React.createElement(CheckboxCircleFillIcon, {
+      sx: {
+        fontSize: '1.25rem'
+      }
+    }),
+    color: 'var(--mui-palette-success-main)'
+  }
+};
+var AlertView = function AlertView(_ref) {
+  var editor = _ref.editor,
+    node = _ref.node,
     updateAttributes = _ref.updateAttributes,
-    selected = _ref.selected,
-    editor = _ref.editor,
-    onUpload = _ref.onUpload,
-    onError = _ref.onError;
-  var theme = useTheme();
-  var _ref2 = node.attrs,
-    _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? 'info' : _ref2$type,
-    _ref2$title = _ref2.title,
-    title = _ref2$title === void 0 ? '' : _ref2$title;
-
-  // 根据类型获取颜色和图标
-  var getAlertConfig = function getAlertConfig(alertType) {
-    switch (alertType) {
-      case 'success':
-        return {
-          color: theme.palette.success.main,
-          backgroundColor: "".concat(theme.palette.success.main, "10"),
-          // 10% 透明度
-          icon: CheckboxCircleFillIcon
-        };
-      case 'warning':
-        return {
-          color: theme.palette.warning.main,
-          backgroundColor: "".concat(theme.palette.warning.main, "10"),
-          icon: ErrorWarningFillIcon
-        };
-      case 'error':
-        return {
-          color: theme.palette.error.main,
-          backgroundColor: "".concat(theme.palette.error.main, "10"),
-          icon: CloseCircleFillIcon
-        };
-      case 'info':
-      default:
-        return {
-          color: theme.palette.text.secondary,
-          backgroundColor: "".concat(theme.palette.text.secondary, "10"),
-          icon: Information2FillIcon
-        };
-    }
+    selected = _ref.selected;
+  var attrs = node.attrs;
+  var containerRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var showIcon = attrs.type !== 'text';
+  var variantData = useMemo(function () {
+    return VARIANT_DATA[attrs.variant || 'info'];
+  }, [attrs.variant]);
+  var handleShowOperationPopover = function handleShowOperationPopover(event) {
+    return setAnchorEl(event.currentTarget);
+  };
+  var handleCloseOperationPopover = function handleCloseOperationPopover() {
+    return setAnchorEl(null);
   };
-  var config = getAlertConfig(type);
-  var IconComponent = config.icon;
   return /*#__PURE__*/React.createElement(NodeViewWrapper, {
-    as: "div",
+    ref: containerRef,
+    className: "alert-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
+    "data-drag-handle": true,
+    as: 'div',
     style: {
-      margin: '16px 0',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: _objectSpread({
+      border: '1px solid',
+      borderColor: variantData.color,
+      color: variantData.color,
+      borderRadius: '10px',
+      padding: '12px 16px',
+      lineHeight: 1.625,
       display: 'flex',
       alignItems: 'flex-start',
-      padding: '12px 16px',
-      borderRadius: '8px',
-      border: "1px solid ".concat(config.color),
-      backgroundColor: config.backgroundColor,
-      position: 'relative'
-    }, selected && {
-      outline: "2px solid ".concat(theme.palette.primary.main),
-      outlineOffset: '2px'
-    })
-  }, /*#__PURE__*/React.createElement(Box, {
+      gap: '16px',
+      background: "color-mix(in srgb, ".concat(variantData.color, " 10%, transparent)")
+    },
+    onClick: handleShowOperationPopover
+  }, showIcon && /*#__PURE__*/React.createElement(Box, {
     sx: {
-      display: 'flex',
-      alignItems: 'center',
-      marginRight: '12px',
-      marginTop: '2px',
-      flexShrink: 0
-    }
-  }, /*#__PURE__*/React.createElement(IconComponent, {
-    style: {
-      fontSize: '20px',
-      color: config.color
+      pt: '2px',
+      lineHeight: 1
     }
-  })), /*#__PURE__*/React.createElement(Box, {
+  }, variantData.icon), /*#__PURE__*/React.createElement(Box, {
     sx: {
-      flex: 1,
-      minWidth: 0
+      flex: 1
     }
-  }, title && /*#__PURE__*/React.createElement(Typography, {
-    variant: "subtitle2",
+  }, /*#__PURE__*/React.createElement(NodeViewContent, {
+    as: 'div'
+  })), editor.isEditable && /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(anchorEl),
+    anchorEl: anchorEl,
+    onClose: handleCloseOperationPopover,
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    alignItems: 'center',
     sx: {
-      color: config.color,
-      fontWeight: 600,
-      marginBottom: '4px',
-      fontSize: '14px',
-      lineHeight: '20px'
+      p: 0.5
     }
-  }, title), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      color: theme.palette.text.primary,
-      fontSize: '14px',
-      lineHeight: '20px',
-      '& p': {
-        margin: 0,
-        '&:not(:last-child)': {
-          marginBottom: '8px'
-        }
-      },
-      '& ul, & ol': {
-        margin: 0,
-        paddingLeft: '20px'
-      },
-      '& li': {
-        marginBottom: '4px'
+  }, /*#__PURE__*/React.createElement(ToolbarItem, {
+    icon: /*#__PURE__*/React.createElement(Information2FillIcon, {
+      sx: {
+        fontSize: '1rem',
+        color: 'primary.main'
+      }
+    }),
+    tip: "\u4FE1\u606F",
+    onClick: function onClick() {
+      return updateAttributes({
+        variant: 'info'
+      });
+    },
+    className: attrs.variant === 'info' ? 'tool-active' : ''
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    icon: /*#__PURE__*/React.createElement(ErrorWarningFillIcon, {
+      sx: {
+        fontSize: '1rem',
+        color: 'warning.main'
       }
+    }),
+    tip: "\u8B66\u544A",
+    onClick: function onClick() {
+      return updateAttributes({
+        variant: 'warning'
+      });
+    },
+    className: attrs.variant === 'warning' ? 'tool-active' : ''
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    icon: /*#__PURE__*/React.createElement(CloseCircleFillIcon, {
+      sx: {
+        fontSize: '1rem',
+        color: 'error.main'
+      }
+    }),
+    tip: "\u9519\u8BEF",
+    onClick: function onClick() {
+      return updateAttributes({
+        variant: 'error'
+      });
+    },
+    className: attrs.variant === 'error' ? 'tool-active' : ''
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    icon: /*#__PURE__*/React.createElement(CheckboxCircleFillIcon, {
+      sx: {
+        fontSize: '1rem',
+        color: 'success.main'
+      }
+    }),
+    tip: "\u6210\u529F",
+    onClick: function onClick() {
+      return updateAttributes({
+        variant: 'success'
+      });
+    },
+    className: attrs.variant === 'success' ? 'tool-active' : ''
+  }), /*#__PURE__*/React.createElement(Divider, {
+    orientation: "vertical",
+    flexItem: true,
+    sx: {
+      height: '1rem',
+      mx: 0.5,
+      alignSelf: 'center',
+      borderColor: 'divider'
     }
-  }, /*#__PURE__*/React.createElement(NodeViewContent, null)))));
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    icon: /*#__PURE__*/React.createElement(TextIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    tip: "\u7EAF\u6587\u5B57",
+    onClick: function onClick() {
+      return updateAttributes({
+        type: 'text'
+      });
+    },
+    className: attrs.type === 'text' ? 'tool-active' : ''
+  }), /*#__PURE__*/React.createElement(ToolbarItem, {
+    icon: /*#__PURE__*/React.createElement(ScrollToBottomLineIcon, {
+      sx: {
+        transform: 'rotate(90deg)',
+        fontSize: '1rem'
+      }
+    }),
+    tip: "\u56FE\u6807\u6587\u5B57",
+    onClick: function onClick() {
+      return updateAttributes({
+        type: 'icon'
+      });
+    },
+    className: attrs.type === 'icon' ? 'tool-active' : ''
+  }))));
 };
-export default AlertViewWrapper;
+export default AlertView;