@ctzhian/tiptap 1.6.2 → 1.6.3

package/dist/component/Toolbar/EditorHeading.js

@@ -1,7 +1,7 @@
-var _excluded = ["className"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 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); }
@@ -9,10 +9,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 { getShortcutKeyText } from "../../util";
-import { Box, MenuItem, Select, Stack, Tooltip } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import React, { useEffect, useState } from "react";
-import { ArrowDownSLineIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, HeadingIcon } from "../Icons";
-import ToolItem from "./Item";
+import { ArrowDownSLineIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, TextIcon } from "../Icons";
+import Menu from "../Menu";
+import { default as ToolbarItem } from "./Item";
 var EditorHeading = function EditorHeading(_ref) {
   var editor = _ref.editor;
   var _useState = useState("paragraph"),
@@ -21,12 +22,12 @@ var EditorHeading = function EditorHeading(_ref) {
     setSelectedValue = _useState2[1];
   var HeadingOptions = [{
     id: 'paragraph',
-    icon: /*#__PURE__*/React.createElement(HeadingIcon, {
+    icon: /*#__PURE__*/React.createElement(TextIcon, {
       sx: {
         fontSize: '1rem'
       }
     }),
-    label: 'Paragraph',
+    label: '正文',
     shortcutKey: ['ctrl', 'alt', '0']
   }, {
     id: '1',
@@ -35,7 +36,7 @@ var EditorHeading = function EditorHeading(_ref) {
         fontSize: '1rem'
       }
     }),
-    label: 'Heading 1',
+    label: '标题1',
     shortcutKey: ['ctrl', 'alt', '1']
   }, {
     id: '2',
@@ -44,7 +45,7 @@ var EditorHeading = function EditorHeading(_ref) {
         fontSize: '1rem'
       }
     }),
-    label: 'Heading 2',
+    label: '标题2',
     shortcutKey: ['ctrl', 'alt', '2']
   }, {
     id: '3',
@@ -53,7 +54,7 @@ var EditorHeading = function EditorHeading(_ref) {
         fontSize: '1rem'
       }
     }),
-    label: 'Heading 3',
+    label: '标题3',
     shortcutKey: ['ctrl', 'alt', '3']
   }, {
     id: '4',
@@ -62,7 +63,7 @@ var EditorHeading = function EditorHeading(_ref) {
         fontSize: '1rem'
       }
     }),
-    label: 'Heading 4',
+    label: '标题4',
     shortcutKey: ['ctrl', 'alt', '4']
   }, {
     id: '5',
@@ -71,7 +72,7 @@ var EditorHeading = function EditorHeading(_ref) {
         fontSize: '1rem'
       }
     }),
-    label: 'Heading 5',
+    label: '标题5',
     shortcutKey: ['ctrl', 'alt', '5']
   }, {
     id: '6',
@@ -80,15 +81,14 @@ var EditorHeading = function EditorHeading(_ref) {
         fontSize: '1rem'
       }
     }),
-    label: 'Heading 6',
+    label: '标题6',
     shortcutKey: ['ctrl', 'alt', '6']
   }];
   var updateSelection = function updateSelection() {
     var level = editor.getAttributes("heading").level || "paragraph";
     setSelectedValue(level);
   };
-  var handleChange = function handleChange(e) {
-    var value = e.target.value;
+  var handleChange = function handleChange(value) {
     setSelectedValue(value);
     if (value !== 'paragraph') {
       var level = parseInt(value);
@@ -107,79 +107,67 @@ var EditorHeading = function EditorHeading(_ref) {
       editor.off('transaction', updateSelection);
     };
   }, [editor]);
-  return /*#__PURE__*/React.createElement(Select, {
-    value: selectedValue,
-    className: ['1', '2', '3', '4', '5', '6'].includes(String(selectedValue)) ? "tool-active" : "",
-    onChange: handleChange,
-    sx: {
-      bgcolor: 'transparent',
-      '&:hover .MuiOutlinedInput-notchedOutline': {
-        borderWidth: '0px !important',
-        borderColor: 'transparent !important'
-      },
-      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-        borderWidth: '0px !important',
-        borderColor: 'transparent !important'
-      }
-    },
-    renderValue: function renderValue(value) {
-      var _HeadingOptions$find;
-      return /*#__PURE__*/React.createElement(ToolItem, {
-        tip: '标题',
-        icon: /*#__PURE__*/React.createElement(Stack, {
-          direction: 'row',
-          alignItems: 'center',
-          sx: {
-            mr: 0.5,
-            width: '1.5rem'
-          }
-        }, ((_HeadingOptions$find = HeadingOptions.find(function (it) {
-          return it.id === String(value);
-        })) === null || _HeadingOptions$find === void 0 ? void 0 : _HeadingOptions$find.icon) || /*#__PURE__*/React.createElement(HeadingIcon, {
-          sx: {
-            fontSize: '1rem'
-          }
-        }))
-      });
-    },
-    IconComponent: function IconComponent(_ref2) {
-      var className = _ref2.className,
-        rest = _objectWithoutProperties(_ref2, _excluded);
-      return /*#__PURE__*/React.createElement(ArrowDownSLineIcon, _extends({
+  return /*#__PURE__*/React.createElement(Menu, {
+    context: /*#__PURE__*/React.createElement(ToolbarItem, {
+      tip: '标题',
+      text: /*#__PURE__*/React.createElement(Box, {
+        sx: {
+          position: 'relative',
+          pr: 1
+        }
+      }, /*#__PURE__*/React.createElement(Box, {
+        sx: {
+          width: '38px',
+          textAlign: 'left'
+        }
+      }, HeadingOptions.filter(function (it) {
+        return it.id === String(selectedValue);
+      })[0].label), /*#__PURE__*/React.createElement(ArrowDownSLineIcon, {
         sx: {
           position: 'absolute',
-          right: 2,
+          right: -6,
+          top: '50%',
+          transform: 'translateY(-50%)',
           flexSelf: 'center',
           fontSize: '1rem',
           flexShrink: 0,
           mr: 0,
           color: 'text.disabled',
-          transform: className !== null && className !== void 0 && className.includes('MuiSelect-iconOpen') ? 'rotate(-180deg)' : 'none',
-          transition: 'transform 0.3s',
           cursor: 'pointer',
           pointerEvents: 'none'
         }
-      }, rest));
-    }
-  }, HeadingOptions.map(function (it) {
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      key: it.id,
-      value: it.id
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      arrow: true,
-      title: getShortcutKeyText(it.shortcutKey),
-      placement: "right"
-    }, /*#__PURE__*/React.createElement(Stack, {
-      direction: 'row',
-      alignItems: 'center',
-      justifyContent: "center",
-      gap: 1
-    }, it.icon, /*#__PURE__*/React.createElement(Box, {
+      }))
+    }),
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    arrowIcon: /*#__PURE__*/React.createElement(ArrowDownSLineIcon, {
       sx: {
-        ml: 1,
-        fontSize: '0.875rem'
+        fontSize: '1rem',
+        transform: 'rotate(-90deg)'
       }
-    }, it.label))));
-  }));
+    }),
+    list: _toConsumableArray(HeadingOptions.map(function (it) {
+      return {
+        label: it.label,
+        key: it.id,
+        icon: it.icon,
+        extra: /*#__PURE__*/React.createElement(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: 'text.disabled'
+          }
+        }, getShortcutKeyText(it.shortcutKey, ' ')),
+        onClick: function onClick() {
+          return handleChange(it.id);
+        }
+      };
+    }))
+  });
 };
 export default EditorHeading;

package/dist/component/Toolbar/EditorInsert/index.d.ts

@@ -1,5 +1,5 @@
-import { Editor } from "@tiptap/react";
-import React from "react";
+import { Editor } from '@tiptap/react';
+import React from 'react';
 interface EditorInsertProps {
     editor: Editor;
 }