@ant-design/agentic-ui 2.30.21 → 2.30.22

package/dist/MarkdownRenderer/renderers/SchemaRenderer.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import partialParse from "../../MarkdownEditor/editor/parser/json-parse";
 import { SchemaRenderer } from "../../Schema";
+import { debugInfo } from "../../Utils/debugUtils";
 var extractTextContent = function extractTextContent1(children) {
     var _children_props;
     if (typeof children === 'string') return children;
@@ -34,15 +35,38 @@ var extractTextContent = function extractTextContent1(children) {
  * - ```apassify   → 同 apaasify（兼容旧版）
  * - ```agentar-card → SchemaRenderer
  */ export var SchemaBlockRenderer = function SchemaBlockRenderer(props) {
-    var children = props.children, language = props.language, apaasifyRender = props.apaasifyRender;
+    var children = props.children, language = props.language, apaasifyRender = props.apaasifyRender, editorCodeProps = props.editorCodeProps;
     var code = extractTextContent(children);
     var schemaValue = useMemo(function() {
         return parseSchemaValue(code);
     }, [
         code
     ]);
+    var applyCodeRender = function applyCodeRender(defaultDom, valueForElement) {
+        var customRender = editorCodeProps === null || editorCodeProps === void 0 ? void 0 : editorCodeProps.render;
+        if (!customRender) return defaultDom;
+        var slateLike = {
+            attributes: {},
+            children: null,
+            element: {
+                type: language === 'agentar-card' ? 'card' : 'schema',
+                value: valueForElement,
+                language: language
+            }
+        };
+        try {
+            var rendered = customRender(slateLike, defaultDom, editorCodeProps);
+            if (rendered === undefined) return defaultDom;
+            return rendered;
+        } catch (error) {
+            debugInfo('SchemaBlockRenderer - codeProps.render 异常，回退默认', {
+                error: (error === null || error === void 0 ? void 0 : error.message) || String(error)
+            });
+            return defaultDom;
+        }
+    };
     if (!schemaValue) {
-        return /*#__PURE__*/ React.createElement("pre", {
+        var fallbackDom = /*#__PURE__*/ React.createElement("pre", {
             "data-testid": "schema-fallback",
             style: {
                 background: 'rgb(242, 241, 241)',
@@ -59,11 +83,12 @@ var extractTextContent = function extractTextContent1(children) {
                 wordWrap: 'break-word'
             }
         }, /*#__PURE__*/ React.createElement("code", null, code));
+        return applyCodeRender(fallbackDom, code);
     }
     if (apaasifyRender) {
         var rendered = apaasifyRender(schemaValue);
         if (rendered !== undefined) {
-            return /*#__PURE__*/ React.createElement("div", {
+            var apaasifyDom = /*#__PURE__*/ React.createElement("div", {
                 "data-testid": "schema-container",
                 contentEditable: false,
                 style: {
@@ -82,10 +107,11 @@ var extractTextContent = function extractTextContent1(children) {
                     overflow: 'hidden'
                 }
             }, JSON.stringify(schemaValue, null, 2)));
+            return applyCodeRender(apaasifyDom, schemaValue);
         }
     }
     if (language === 'agentar-card') {
-        return /*#__PURE__*/ React.createElement("div", {
+        var cardDom = /*#__PURE__*/ React.createElement("div", {
             "data-testid": "agentar-card-container",
             style: {
                 padding: '0.5em'
@@ -98,8 +124,9 @@ var extractTextContent = function extractTextContent1(children) {
             debug: false,
             fallbackContent: null
         }));
+        return applyCodeRender(cardDom, schemaValue);
     }
-    return /*#__PURE__*/ React.createElement("div", {
+    var schemaDom = /*#__PURE__*/ React.createElement("div", {
         "data-testid": "schema-renderer",
         style: {
             padding: '0.5em'
@@ -111,5 +138,6 @@ var extractTextContent = function extractTextContent1(children) {
         debug: false,
         fallbackContent: null
     }));
+    return applyCodeRender(schemaDom, schemaValue);
 };
 SchemaBlockRenderer.displayName = 'SchemaBlockRenderer';

package/dist/MarkdownRenderer/streaming/useStreamingMarkdownReact.js

@@ -18,12 +18,13 @@ import { shouldResetRevisionProgress } from "./revisionPolicy";
     ]);
     var prefixCls = (options === null || options === void 0 ? void 0 : options.prefixCls) || 'ant-agentic-md-editor';
     var components = useMemo(function() {
-        return buildEditorAlignedComponents(prefixCls, (options === null || options === void 0 ? void 0 : options.components) || {}, options === null || options === void 0 ? void 0 : options.streaming, options === null || options === void 0 ? void 0 : options.linkConfig, options === null || options === void 0 ? void 0 : options.streamingParagraphAnimation, options === null || options === void 0 ? void 0 : options.eleRender);
+        return buildEditorAlignedComponents(prefixCls, (options === null || options === void 0 ? void 0 : options.components) || {}, options === null || options === void 0 ? void 0 : options.streaming, options === null || options === void 0 ? void 0 : options.linkConfig, options === null || options === void 0 ? void 0 : options.fncProps, options === null || options === void 0 ? void 0 : options.streamingParagraphAnimation, options === null || options === void 0 ? void 0 : options.eleRender);
     }, [
         prefixCls,
         options === null || options === void 0 ? void 0 : options.components,
         options === null || options === void 0 ? void 0 : options.streaming,
         options === null || options === void 0 ? void 0 : options.linkConfig,
+        options === null || options === void 0 ? void 0 : options.fncProps,
         options === null || options === void 0 ? void 0 : options.streamingParagraphAnimation,
         options === null || options === void 0 ? void 0 : options.eleRender
     ]);

package/dist/MarkdownRenderer/types.d.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 import type { MarkdownRemarkPlugin, MarkdownToHtmlConfig } from '../MarkdownEditor/editor/utils/markdownToHtml';
 import type { MarkdownEditorPlugin } from '../MarkdownEditor/plugin';
+import type { MarkdownEditorProps } from '../MarkdownEditor/types';
 import type { AttachmentFile } from '../MarkdownInputField/AttachmentButton/types';
 import type { FileMapViewProps } from '../MarkdownInputField/FileMapView';
 /**
@@ -103,15 +104,10 @@ export interface MarkdownRendererProps {
     style?: React.CSSProperties;
     /** 类名前缀 */
     prefixCls?: string;
-    /** 代码块配置（传递给 CodeRenderer） */
-    codeProps?: Record<string, any>;
-    /** 脚注配置 */
-    fncProps?: {
-        render?: (props: Record<string, any> & {
-            children: React.ReactNode;
-        }, defaultDom: React.ReactNode) => React.ReactNode;
-        onFootnoteDefinitionChange?: (data: any[]) => void;
-    };
+    /** 代码块配置，与 MarkdownEditor `codeProps` 对齐（含 `render` 覆盖） */
+    codeProps?: MarkdownEditorProps['codeProps'];
+    /** 脚注配置，与 MarkdownEditor `fncProps` 对齐 */
+    fncProps?: MarkdownEditorProps['fncProps'];
     /** 链接配置 */
     linkConfig?: {
         /** 是否在新标签页打开链接，默认 true */

package/dist/MarkdownRenderer/useMarkdownToReact.js

@@ -14,7 +14,7 @@ export var useMarkdownToReact = useStreamingMarkdownReact;
         var mdast = processor.parse(preprocessed);
         var hast = processor.runSync(mdast);
         var userComps = components || {};
-        var allComponents = buildEditorAlignedComponents('ant-agentic-md-editor', userComps, false, undefined, false);
+        var allComponents = buildEditorAlignedComponents('ant-agentic-md-editor', userComps, false, undefined, undefined, false);
         return toJsxRuntime(hast, {
             Fragment: Fragment,
             jsx: jsx,

package/dist/Plugins/mermaid/MermaidRendererImpl.js

@@ -1,25 +1,205 @@
-import { ConfigProvider } from "antd";
+function _array_like_to_array(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 _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    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 _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(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(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { BorderOutlined, ExpandOutlined, FullscreenExitOutlined, FullscreenOutlined, ZoomInOutlined, ZoomOutOutlined } from "@ant-design/icons";
+import { ConfigProvider, theme } from "antd";
 import classNames from "clsx";
-import React, { useContext, useMemo, useRef } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { ActionIconBox } from "../../Components/ActionIconBox";
 import { useIntersectionOnce } from "../../Hooks/useIntersectionOnce";
 import { useStyle } from "./style";
 import { useMermaidRender } from "./useMermaidRender";
+import { createMermaidThemeConfig } from "./utils";
 var PRE_STYLE = {
     margin: 0,
     whiteSpace: 'pre-wrap',
     wordBreak: 'break-word'
 };
+var MIN_ZOOM_SCALE = 0.2;
+var MAX_ZOOM_SCALE = 12;
+var ZOOM_STEP_RATIO = 1.2;
+var FIT_PADDING = 24;
+var clamp = function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+};
+var getSvgNaturalSize = function getSvgNaturalSize(svgElement) {
+    var _svgElement_viewBox;
+    var viewBox = (_svgElement_viewBox = svgElement.viewBox) === null || _svgElement_viewBox === void 0 ? void 0 : _svgElement_viewBox.baseVal;
+    if (viewBox && viewBox.width > 0 && viewBox.height > 0) {
+        return {
+            width: viewBox.width,
+            height: viewBox.height
+        };
+    }
+    var widthAttr = Number.parseFloat(svgElement.getAttribute('width') || '');
+    var heightAttr = Number.parseFloat(svgElement.getAttribute('height') || '');
+    if (Number.isFinite(widthAttr) && Number.isFinite(heightAttr) && widthAttr > 0 && heightAttr > 0) {
+        return {
+            width: widthAttr,
+            height: heightAttr
+        };
+    }
+    try {
+        var bbox = svgElement.getBBox();
+        if (bbox.width > 0 && bbox.height > 0) {
+            return {
+                width: bbox.width,
+                height: bbox.height
+            };
+        }
+    } catch (e) {
+    // Ignore getBBox errors in hidden/unsupported SVG contexts.
+    }
+    var rect = svgElement.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+        return {
+            width: rect.width,
+            height: rect.height
+        };
+    }
+    return null;
+};
 export var MermaidRendererImpl = function MermaidRendererImpl(props) {
     var context = useContext(ConfigProvider.ConfigContext);
+    var token = theme.useToken().token;
     var baseCls = (context === null || context === void 0 ? void 0 : context.getPrefixCls('agentic-plugin-mermaid')) || 'plugin-mermaid';
     var _useStyle = useStyle(baseCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
     var containerRef = useRef(null);
     var divRef = useRef(null);
+    var panSessionRef = useRef(null);
     var id = useMemo(function() {
         return 'm' + (Date.now() + Math.ceil(Math.random() * 1000));
     }, []);
+    var _useState = _sliced_to_array(useState(1), 2), scale = _useState[0], setScale = _useState[1];
+    var _useState1 = _sliced_to_array(useState(0), 2), panX = _useState1[0], setPanX = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(0), 2), panY = _useState2[0], setPanY = _useState2[1];
+    var _useState3 = _sliced_to_array(useState(true), 2), showGrid = _useState3[0], setShowGrid = _useState3[1];
+    var _useState4 = _sliced_to_array(useState(false), 2), isPanning = _useState4[0], setIsPanning = _useState4[1];
+    var _useState5 = _sliced_to_array(useState(false), 2), isFullscreen = _useState5[0], setIsFullscreen = _useState5[1];
+    var mermaidTheme = useMemo(function() {
+        return createMermaidThemeConfig({
+            colorBgContainer: token.colorBgContainer,
+            colorBgElevated: token.colorBgElevated,
+            colorText: token.colorText,
+            colorTextSecondary: token.colorTextSecondary,
+            colorBorder: token.colorBorder,
+            colorPrimary: token.colorPrimary,
+            fontFamily: token.fontFamily
+        });
+    }, [
+        token.colorBgContainer,
+        token.colorBgElevated,
+        token.colorText,
+        token.colorTextSecondary,
+        token.colorBorder,
+        token.colorPrimary,
+        token.fontFamily
+    ]);
     var isVisible = useIntersectionOnce(containerRef);
-    var _useMermaidRender = useMermaidRender(props.element.value || '', divRef, id, isVisible), error = _useMermaidRender.error, renderedCode = _useMermaidRender.renderedCode;
+    var _useMermaidRender = useMermaidRender(props.element.value || '', divRef, id, isVisible, {
+        colorBgContainer: token.colorBgContainer,
+        colorBgElevated: token.colorBgElevated,
+        colorText: token.colorText,
+        colorTextSecondary: token.colorTextSecondary,
+        colorBorder: token.colorBorder,
+        colorPrimary: token.colorPrimary,
+        fontFamily: token.fontFamily
+    }), error = _useMermaidRender.error, renderedCode = _useMermaidRender.renderedCode;
     var isError = useMemo(function() {
         return !!error && !!error.trim();
     }, [
@@ -44,18 +224,312 @@ export var MermaidRendererImpl = function MermaidRendererImpl(props) {
     }, [
         isRendered
     ]);
+    var transformedContainerStyle = useMemo(function() {
+        return _object_spread_props(_object_spread({}, containerStyle), {
+            '--mermaid-pan-x': "".concat(panX, "px"),
+            '--mermaid-pan-y': "".concat(panY, "px"),
+            '--mermaid-scale': scale
+        });
+    }, [
+        containerStyle,
+        panX,
+        panY,
+        scale
+    ]);
+    var viewportStyle = useMemo(function() {
+        return {
+            backgroundImage: showGrid ? mermaidTheme.darkMode ? 'radial-gradient(circle, rgba(255, 255, 255, 0.14) 1.2px, transparent 1.2px)' : 'radial-gradient(circle, rgba(0, 0, 0, 0.08) 1.2px, transparent 1.2px)' : 'none'
+        };
+    }, [
+        mermaidTheme.darkMode,
+        showGrid
+    ]);
+    var getDiagramAndViewportSize = useCallback(function() {
+        var viewportElement = divRef.current;
+        if (!viewportElement) {
+            return null;
+        }
+        var svgElement = viewportElement.querySelector('[data-mermaid-svg="true"]');
+        if (!svgElement) {
+            return null;
+        }
+        var svgSize = getSvgNaturalSize(svgElement);
+        if (!svgSize) {
+            return null;
+        }
+        var viewportWidth = viewportElement.clientWidth;
+        var viewportHeight = viewportElement.clientHeight;
+        if (viewportWidth <= 0 || viewportHeight <= 0) {
+            return null;
+        }
+        return {
+            viewportWidth: viewportWidth,
+            viewportHeight: viewportHeight,
+            diagramWidth: svgSize.width,
+            diagramHeight: svgSize.height
+        };
+    }, []);
+    var handleFitToScreen = useCallback(function() {
+        var size = getDiagramAndViewportSize();
+        if (!size) {
+            return;
+        }
+        var usableWidth = Math.max(size.viewportWidth - FIT_PADDING * 2, 1);
+        var usableHeight = Math.max(size.viewportHeight - FIT_PADDING * 2, 1);
+        var fittedScale = clamp(Math.min(usableWidth / size.diagramWidth, usableHeight / size.diagramHeight), MIN_ZOOM_SCALE, MAX_ZOOM_SCALE);
+        var centeredPanX = (size.viewportWidth - size.diagramWidth * fittedScale) / 2;
+        var centeredPanY = (size.viewportHeight - size.diagramHeight * fittedScale) / 2;
+        setScale(fittedScale);
+        setPanX(centeredPanX);
+        setPanY(centeredPanY);
+    }, [
+        getDiagramAndViewportSize
+    ]);
+    var applyScaleAtPoint = useCallback(function(nextScale, clientX, clientY) {
+        var viewportElement = divRef.current;
+        if (!viewportElement) {
+            return;
+        }
+        var clampedScale = clamp(nextScale, MIN_ZOOM_SCALE, MAX_ZOOM_SCALE);
+        if (clampedScale === scale) {
+            return;
+        }
+        var viewportRect = viewportElement.getBoundingClientRect();
+        var targetClientX = clientX !== null && clientX !== void 0 ? clientX : viewportRect.left + viewportRect.width / 2;
+        var targetClientY = clientY !== null && clientY !== void 0 ? clientY : viewportRect.top + viewportRect.height / 2;
+        var relativeX = targetClientX - viewportRect.left;
+        var relativeY = targetClientY - viewportRect.top;
+        var nextPanX = relativeX - (relativeX - panX) / scale * clampedScale;
+        var nextPanY = relativeY - (relativeY - panY) / scale * clampedScale;
+        setScale(clampedScale);
+        setPanX(nextPanX);
+        setPanY(nextPanY);
+    }, [
+        panX,
+        panY,
+        scale
+    ]);
+    var handleZoomIn = useCallback(function() {
+        applyScaleAtPoint(scale * ZOOM_STEP_RATIO);
+    }, [
+        applyScaleAtPoint,
+        scale
+    ]);
+    var handleZoomOut = useCallback(function() {
+        applyScaleAtPoint(scale / ZOOM_STEP_RATIO);
+    }, [
+        applyScaleAtPoint,
+        scale
+    ]);
+    var handleToggleFullscreen = useCallback(function() {
+        var _containerRef_current_requestFullscreen, _containerRef_current;
+        if (!containerRef.current) {
+            return;
+        }
+        if (document.fullscreenElement === containerRef.current) {
+            var _document_exitFullscreen, _document;
+            (_document_exitFullscreen = (_document = document).exitFullscreen) === null || _document_exitFullscreen === void 0 ? void 0 : _document_exitFullscreen.call(_document);
+            return;
+        }
+        (_containerRef_current_requestFullscreen = (_containerRef_current = containerRef.current).requestFullscreen) === null || _containerRef_current_requestFullscreen === void 0 ? void 0 : _containerRef_current_requestFullscreen.call(_containerRef_current);
+    }, []);
+    var handleWheel = useCallback(function(event) {
+        var _target_closest;
+        if (!isRendered) {
+            return;
+        }
+        var target = event.target;
+        if (target === null || target === void 0 ? void 0 : (_target_closest = target.closest) === null || _target_closest === void 0 ? void 0 : _target_closest.call(target, '[data-mermaid-toolbar]')) {
+            return;
+        }
+        event.preventDefault();
+        var scaleMultiplier = event.deltaY < 0 ? ZOOM_STEP_RATIO : 1 / ZOOM_STEP_RATIO;
+        applyScaleAtPoint(scale * scaleMultiplier, event.clientX, event.clientY);
+    }, [
+        applyScaleAtPoint,
+        isRendered,
+        scale
+    ]);
+    var handlePointerDown = useCallback(function(event) {
+        var _target_closest, _event_currentTarget_setPointerCapture, _event_currentTarget;
+        if (!isRendered || event.button !== 0) {
+            return;
+        }
+        var target = event.target;
+        if (target === null || target === void 0 ? void 0 : (_target_closest = target.closest) === null || _target_closest === void 0 ? void 0 : _target_closest.call(target, '[data-mermaid-toolbar]')) {
+            return;
+        }
+        panSessionRef.current = {
+            startClientX: event.clientX,
+            startClientY: event.clientY,
+            startPanX: panX,
+            startPanY: panY
+        };
+        setIsPanning(true);
+        (_event_currentTarget_setPointerCapture = (_event_currentTarget = event.currentTarget).setPointerCapture) === null || _event_currentTarget_setPointerCapture === void 0 ? void 0 : _event_currentTarget_setPointerCapture.call(_event_currentTarget, event.pointerId);
+    }, [
+        isRendered,
+        panX,
+        panY
+    ]);
+    var handlePointerMove = useCallback(function(event) {
+        var panSession = panSessionRef.current;
+        if (!panSession) {
+            return;
+        }
+        setPanX(panSession.startPanX + event.clientX - panSession.startClientX);
+        setPanY(panSession.startPanY + event.clientY - panSession.startClientY);
+    }, []);
+    var finishPointerSession = useCallback(function(event) {
+        var _event_currentTarget_releasePointerCapture, _event_currentTarget;
+        if (!panSessionRef.current) {
+            return;
+        }
+        panSessionRef.current = null;
+        setIsPanning(false);
+        (_event_currentTarget_releasePointerCapture = (_event_currentTarget = event.currentTarget).releasePointerCapture) === null || _event_currentTarget_releasePointerCapture === void 0 ? void 0 : _event_currentTarget_releasePointerCapture.call(_event_currentTarget, event.pointerId);
+    }, []);
+    useEffect(function() {
+        var syncFullscreenState = function syncFullscreenState() {
+            setIsFullscreen(document.fullscreenElement === containerRef.current);
+        };
+        syncFullscreenState();
+        document.addEventListener('fullscreenchange', syncFullscreenState);
+        return function() {
+            document.removeEventListener('fullscreenchange', syncFullscreenState);
+        };
+    }, []);
+    useEffect(function() {
+        if (!isRendered) {
+            return;
+        }
+        var frame = window.requestAnimationFrame(function() {
+            handleFitToScreen();
+        });
+        return function() {
+            window.cancelAnimationFrame(frame);
+        };
+    }, [
+        isRendered,
+        renderedCode,
+        handleFitToScreen
+    ]);
+    useEffect(function() {
+        if (!isRendered || !divRef.current) {
+            return;
+        }
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        var resizeObserver = new ResizeObserver(function() {
+            handleFitToScreen();
+        });
+        resizeObserver.observe(divRef.current);
+        return function() {
+            resizeObserver.disconnect();
+        };
+    }, [
+        handleFitToScreen,
+        isRendered
+    ]);
+    useEffect(function() {
+        if (!isRendered) {
+            return;
+        }
+        handleFitToScreen();
+    }, [
+        handleFitToScreen,
+        isFullscreen,
+        isRendered
+    ]);
     var code = props.element.value || '';
     return wrapSSR(/*#__PURE__*/ React.createElement("div", {
         ref: containerRef,
-        className: classNames(baseCls, hashId),
-        contentEditable: false
+        className: classNames(baseCls, hashId, _define_property({}, "".concat(baseCls, "-fullscreen"), isFullscreen)),
+        contentEditable: false,
+        "data-mermaid-theme": mermaidTheme.darkMode ? 'dark' : 'light'
+    }, /*#__PURE__*/ React.createElement("div", {
+        contentEditable: false,
+        className: classNames("".concat(baseCls, "-viewport"), hashId),
+        onWheel: handleWheel,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: finishPointerSession,
+        onPointerCancel: finishPointerSession,
+        "data-mermaid-grid": showGrid,
+        "data-mermaid-panning": isPanning,
+        "data-mermaid-viewport": "true",
+        style: viewportStyle
     }, /*#__PURE__*/ React.createElement("div", {
         contentEditable: false,
         ref: divRef,
         className: classNames(hashId),
-        style: containerStyle,
+        style: transformedContainerStyle,
         "data-mermaid-container": "true"
-    }), error && /*#__PURE__*/ React.createElement("div", {
+    }), isRendered && /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(baseCls, "-toolbar-float"), hashId),
+        role: "toolbar",
+        "aria-label": "Mermaid diagram controls",
+        "data-mermaid-toolbar": true,
+        onPointerDown: function onPointerDown(e) {
+            e.stopPropagation();
+        }
+    }, /*#__PURE__*/ React.createElement("span", {
+        "data-mermaid-action": "fit"
+    }, /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: "适配画布",
+        borderLess: true,
+        noPadding: true,
+        onClick: handleFitToScreen,
+        iconStyle: {
+            color: token.colorTextSecondary
+        }
+    }, /*#__PURE__*/ React.createElement(ExpandOutlined, null))), /*#__PURE__*/ React.createElement("span", {
+        "data-mermaid-action": "zoom-out"
+    }, /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: "缩小",
+        borderLess: true,
+        noPadding: true,
+        onClick: handleZoomOut,
+        iconStyle: {
+            color: token.colorTextSecondary
+        }
+    }, /*#__PURE__*/ React.createElement(ZoomOutOutlined, null))), /*#__PURE__*/ React.createElement("span", {
+        "data-mermaid-action": "zoom-in"
+    }, /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: "放大",
+        borderLess: true,
+        noPadding: true,
+        onClick: handleZoomIn,
+        iconStyle: {
+            color: token.colorTextSecondary
+        }
+    }, /*#__PURE__*/ React.createElement(ZoomInOutlined, null))), /*#__PURE__*/ React.createElement("span", {
+        "data-mermaid-action": "grid"
+    }, /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: showGrid ? '隐藏背景网格' : '显示背景网格',
+        borderLess: true,
+        noPadding: true,
+        active: showGrid,
+        onClick: function onClick() {
+            setShowGrid(function(prev) {
+                return !prev;
+            });
+        },
+        iconStyle: {
+            color: token.colorTextSecondary
+        }
+    }, /*#__PURE__*/ React.createElement(BorderOutlined, null))), /*#__PURE__*/ React.createElement("span", {
+        "data-mermaid-action": "fullscreen"
+    }, /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: isFullscreen ? '退出全屏' : '全屏',
+        borderLess: true,
+        noPadding: true,
+        onClick: handleToggleFullscreen,
+        iconStyle: {
+            color: token.colorTextSecondary
+        }
+    }, isFullscreen ? /*#__PURE__*/ React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/ React.createElement(FullscreenOutlined, null))))), error && /*#__PURE__*/ React.createElement("div", {
         className: classNames("".concat(baseCls, "-error"), hashId)
     }, /*#__PURE__*/ React.createElement("pre", {
         style: PRE_STYLE