@lobehub/ui 1.166.0 → 1.166.1

package/es/Mermaid/Controls.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Controls: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export default Controls;

package/es/Mermaid/Controls.js

@@ -0,0 +1,49 @@
+import { AlignVerticalSpaceAroundIcon, MinusIcon, PlusIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useControls } from 'react-zoom-pan-pinch';
+import ActionIcon from "../ActionIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Controls = /*#__PURE__*/memo(function () {
+  var _useControls = useControls(),
+    zoomIn = _useControls.zoomIn,
+    zoomOut = _useControls.zoomOut,
+    resetTransform = _useControls.resetTransform;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    gap: 4,
+    horizontal: true,
+    style: {
+      bottom: 8,
+      position: 'absolute',
+      right: 8,
+      zIndex: 1
+    },
+    children: [/*#__PURE__*/_jsx(ActionIcon, {
+      active: true,
+      glass: true,
+      icon: PlusIcon,
+      onClick: function onClick() {
+        return zoomIn();
+      },
+      size: 'small'
+    }), /*#__PURE__*/_jsx(ActionIcon, {
+      active: true,
+      glass: true,
+      icon: MinusIcon,
+      onClick: function onClick() {
+        return zoomOut();
+      },
+      size: 'small'
+    }), /*#__PURE__*/_jsx(ActionIcon, {
+      active: true,
+      glass: true,
+      icon: AlignVerticalSpaceAroundIcon,
+      onClick: function onClick() {
+        return resetTransform();
+      },
+      size: 'small'
+    })]
+  });
+});
+export default Controls;

package/es/Mermaid/FullFeatured.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["showLanguage", "content", "children", "className", "copyable", "actionsRender", "style", "enablePanZoom", "fileName"];
+var _excluded = ["showLanguage", "content", "children", "className", "copyable", "actionsRender", "style", "fileName"];
 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; }
@@ -13,56 +13,14 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
-import { AlignVerticalSpaceAroundIcon, ChevronDown, ChevronRight, MinusIcon, PlusIcon } from 'lucide-react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { TransformComponent, TransformWrapper, useControls } from 'react-zoom-pan-pinch';
 import ActionIcon from "../ActionIcon";
 import CopyButton from "../CopyButton";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Controls = function Controls() {
-  var _useControls = useControls(),
-    zoomIn = _useControls.zoomIn,
-    zoomOut = _useControls.zoomOut,
-    resetTransform = _useControls.resetTransform;
-  return /*#__PURE__*/_jsxs(Flexbox, {
-    gap: 4,
-    horizontal: true,
-    style: {
-      bottom: 8,
-      position: 'absolute',
-      right: 8,
-      zIndex: 1
-    },
-    children: [/*#__PURE__*/_jsx(ActionIcon, {
-      active: true,
-      glass: true,
-      icon: PlusIcon,
-      onClick: function onClick() {
-        return zoomIn();
-      },
-      size: 'small'
-    }), /*#__PURE__*/_jsx(ActionIcon, {
-      active: true,
-      glass: true,
-      icon: MinusIcon,
-      onClick: function onClick() {
-        return zoomOut();
-      },
-      size: 'small'
-    }), /*#__PURE__*/_jsx(ActionIcon, {
-      active: true,
-      glass: true,
-      icon: AlignVerticalSpaceAroundIcon,
-      onClick: function onClick() {
-        return resetTransform();
-      },
-      size: 'small'
-    })]
-  });
-};
 export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
   var showLanguage = _ref.showLanguage,
     content = _ref.content,
@@ -71,8 +29,6 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
     copyable = _ref.copyable,
     actionsRender = _ref.actionsRender,
     style = _ref.style,
-    _ref$enablePanZoom = _ref.enablePanZoom,
-    enablePanZoom = _ref$enablePanZoom === void 0 ? true : _ref$enablePanZoom,
     _ref$fileName = _ref.fileName,
     fileName = _ref$fileName === void 0 ? 'Mermaid' : _ref$fileName,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -138,13 +94,7 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
         height: 0,
         overflow: 'hidden'
       },
-      children: enablePanZoom ? /*#__PURE__*/_jsxs(TransformWrapper, {
-        initialScale: 1,
-        children: [expand && /*#__PURE__*/_jsx(Controls, {}), /*#__PURE__*/_jsx(TransformComponent, {
-          wrapperClass: styles.zoomPanContainer,
-          children: children
-        })]
-      }) : children
+      children: children
     })]
   }));
 });

package/es/Mermaid/index.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["children", "copyButtonSize", "fullFeatured", "copyable", "showLanguage", "style", "type", "className", "bodyRender", "actionsRender"];
+var _excluded = ["children", "copyButtonSize", "fullFeatured", "copyable", "showLanguage", "style", "type", "enablePanZoom", "className", "bodyRender", "actionsRender"];
 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; }
@@ -28,6 +28,7 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
     style = _ref.style,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'block' : _ref$type,
+    enablePanZoom = _ref.enablePanZoom,
     className = _ref.className,
     bodyRender = _ref.bodyRender,
     actionsRender = _ref.actionsRender,
@@ -36,7 +37,9 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx,
     styles = _useStyles.styles;
   var tirmedChildren = children.trim();
-  var MermaidRender = useMermaid(tirmedChildren);
+  var MermaidRender = useMermaid(tirmedChildren, {
+    enablePanZoom: fullFeatured ? true : enablePanZoom
+  });
   var originalActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
     content: children,
     placement: "left",
@@ -58,6 +61,7 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
     className: className,
     content: tirmedChildren,
     copyable: copyable,
+    enablePanZoom: enablePanZoom,
     showLanguage: showLanguage,
     style: style,
     type: type
@@ -76,9 +80,9 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
       gap: 4,
       horizontal: true,
       children: actions
-    }), showLanguage && /*#__PURE__*/_jsx(Tag, {
+    }), !enablePanZoom && showLanguage && /*#__PURE__*/_jsx(Tag, {
       className: styles.lang,
-      children: "mermaid"
+      children: "Mermaid"
     }), /*#__PURE__*/_jsx("div", {
       className: styles.scroller,
       children: body

package/es/Mermaid/style.d.ts

@@ -5,5 +5,4 @@ export declare const useStyles: (props?: "block" | "ghost" | "pure" | undefined)
     lang: string;
     scroller: import("antd-style").SerializedStyles;
     select: import("antd-style").SerializedStyles;
-    zoomPanContainer: import("antd-style").SerializedStyles;
 }>;

package/es/Mermaid/style.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, type) {
@@ -17,7 +17,6 @@ export var useStyles = createStyles(function (_ref, type) {
     header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        position: relative;\n        padding-block: 4px;\n        padding-inline: 8px;\n        background: ", ";\n      "])), token.colorFillQuaternary),
     lang: cx(langHoverCls, stylish.blur, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          inset-block-end: 8px;\n          inset-inline-end: 0;\n\n          font-family: ", ";\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.fontFamilyCode, token.colorTextSecondary)),
     scroller: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        overflow: auto;\n        width: 100%;\n        height: 100%;\n      "]))),
-    select: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        user-select: none;\n\n        position: absolute;\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n\n        min-width: 100px;\n\n        font-size: 14px;\n        color: ", ";\n        text-align: center;\n        .", "-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription, prefixCls, token.colorTextDescription),
-    zoomPanContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        width: 100%;\n        min-height: 240px;\n      "])))
+    select: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        user-select: none;\n\n        position: absolute;\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n\n        min-width: 100px;\n\n        font-size: 14px;\n        color: ", ";\n        text-align: center;\n        .", "-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription, prefixCls, token.colorTextDescription)
   };
 });

package/es/Mermaid/useMermaid.d.ts

@@ -1 +1,3 @@
-export declare const useMermaid: (content: string) => () => import("react/jsx-runtime").JSX.Element;
+export declare const useMermaid: (content: string, { enablePanZoom }?: {
+    enablePanZoom?: boolean | undefined;
+}) => () => import("react/jsx-runtime").JSX.Element;

package/es/Mermaid/useMermaid.js

@@ -11,8 +11,14 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useTheme } from 'antd-style';
 import mermaid from 'mermaid';
 import { useCallback, useEffect, useState } from 'react';
+import { Center } from 'react-layout-kit';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+import Controls from "./Controls";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var useMermaid = function useMermaid(content) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    enablePanZoom = _ref.enablePanZoom;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     mermaidContent = _useState2[0],
@@ -28,8 +34,8 @@ export var useMermaid = function useMermaid(content) {
       startOnLoad: true,
       theme: theme.isDarkMode ? 'dark' : 'neutral',
       themeVariables: {
-        errorBkgColor: theme.colorErrorBg,
-        errorTextColor: theme.colorErrorText,
+        errorBkgColor: theme.colorTextDescription,
+        errorTextColor: theme.colorTextDescription,
         fontFamily: theme.fontFamily,
         fontSize: 14,
         lineColor: theme.colorTextSecondary,
@@ -55,7 +61,7 @@ export var useMermaid = function useMermaid(content) {
     mermaid.contentLoaded();
   }, [mermaidContent, theme.isDarkMode]);
   var checkSyntax = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(textStr) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(textStr) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -81,23 +87,33 @@ export var useMermaid = function useMermaid(content) {
       }, _callee, null, [[0, 7]]);
     }));
     return function checkSyntax(_x) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
   useEffect(function () {
     checkSyntax(content);
   }, [content]);
   return useCallback(function () {
-    return /*#__PURE__*/_jsx("pre", {
+    if (enablePanZoom) {
+      return /*#__PURE__*/_jsxs(TransformWrapper, {
+        children: [/*#__PURE__*/_jsx(Controls, {}), /*#__PURE__*/_jsx(TransformComponent, {
+          contentClass: 'mermaid',
+          contentStyle: {
+            padding: 16
+          },
+          wrapperStyle: {
+            minHeight: 240,
+            width: '100%'
+          },
+          children: mermaidContent
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx(Center, {
+      as: 'pre',
       className: 'mermaid',
-      style: {
-        alignItems: 'center',
-        display: 'flex',
-        fontSize: 14,
-        justifyContent: 'center',
-        overflow: 'auto'
-      },
+      padding: 16,
       children: mermaidContent
     });
-  }, [mermaidContent, theme.isDarkMode]);
+  }, [mermaidContent, theme.isDarkMode, enablePanZoom]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.166.0",
+  "version": "1.166.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",