@ant-design/agentic-ui 2.11.1 → 2.12.0

package/dist/Plugins/chart/ChartRender.js

@@ -229,7 +229,7 @@ import { Loading } from "../../Components/Loading";
 import { useIntersectionOnce } from "../../Hooks/useIntersectionOnce";
 import { I18nContext } from "../../I18n";
 import { loadChartRuntime } from "./loadChartRuntime";
-import { isNotEmpty, toNumber } from "./utils";
+import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./utils";
 /**
  * @fileoverview 图表渲染组件文件
  *
@@ -624,6 +624,8 @@ import { isNotEmpty, toNumber } from "./utils";
  * - 提供图表属性工具栏
  * - 使用 React.lazy 和 Suspense 实现代码分割
  */ export var ChartRender = function(props) {
+    var // 对于 rest 对象，使用浅比较
+    _config_rest, _config_rest1, _config_rest2;
     var _useState = _sliced_to_array(useState(function() {
         return props.chartType;
     }), 2), chartType = _useState[0], setChartType = _useState[1];
@@ -635,6 +637,23 @@ import { isNotEmpty, toNumber } from "./utils";
     var _useState2 = _sliced_to_array(useState(0), 2), renderKey = _useState2[0], setRenderKey = _useState2[1];
     var containerRef = React.useRef(null);
     var isIntersecting = useIntersectionOnce(containerRef);
+    // 用于缓存上一次的数据和配置，避免不必要的重新计算
+    var prevDataRef = React.useRef({
+        dataHash: '',
+        config: null
+    });
+    // 计算数据哈希值，用于依赖项比较
+    var dataHash = React.useMemo(function() {
+        return getDataHash(chartData || []);
+    }, [
+        chartData
+    ]);
+    // 防抖更新 renderKey，避免流式数据频繁更新导致的性能问题
+    var debouncedUpdateRenderKeyRef = React.useRef(debounce(function() {
+        setRenderKey(function(k) {
+            return k + 1;
+        });
+    }, 300));
     var renderDescriptionsFallback = React.useMemo(function() {
         var _config_columns;
         var columnCount = (config === null || config === void 0 ? void 0 : (_config_columns = config.columns) === null || _config_columns === void 0 ? void 0 : _config_columns.length) || 0;
@@ -706,8 +725,15 @@ import { isNotEmpty, toNumber } from "./utils";
             } : {});
         });
     }, [
-        JSON.stringify(chartData),
-        JSON.stringify(config),
+        // 使用更高效的依赖项比较
+        dataHash,
+        config === null || config === void 0 ? void 0 : config.x,
+        config === null || config === void 0 ? void 0 : config.y,
+        config === null || config === void 0 ? void 0 : config.height,
+        config === null || config === void 0 ? void 0 : config.index,
+        config === null || config === void 0 ? void 0 : (_config_rest = config.rest) === null || _config_rest === void 0 ? void 0 : _config_rest.stacked,
+        config === null || config === void 0 ? void 0 : (_config_rest1 = config.rest) === null || _config_rest1 === void 0 ? void 0 : _config_rest1.showLegend,
+        config === null || config === void 0 ? void 0 : (_config_rest2 = config.rest) === null || _config_rest2 === void 0 ? void 0 : _config_rest2.showGrid,
         title,
         groupBy,
         colorLegend,
@@ -730,8 +756,12 @@ import { isNotEmpty, toNumber } from "./utils";
             } : {});
         });
     }, [
-        JSON.stringify(chartData),
-        JSON.stringify(config),
+        // 使用更高效的依赖项比较
+        dataHash,
+        config === null || config === void 0 ? void 0 : config.x,
+        config === null || config === void 0 ? void 0 : config.y,
+        config === null || config === void 0 ? void 0 : config.height,
+        config === null || config === void 0 ? void 0 : config.index,
         title,
         groupBy,
         filterBy
@@ -741,6 +771,39 @@ import { isNotEmpty, toNumber } from "./utils";
     }, [
         props.chartType
     ]);
+    // 监听数据变化，使用防抖更新渲染键
+    React.useEffect(function() {
+        var configChanged = !isConfigEqual(prevDataRef.current.config, config);
+        var groupByChanged = prevDataRef.current.groupBy !== groupBy;
+        var colorLegendChanged = prevDataRef.current.colorLegend !== colorLegend;
+        var filterByChanged = prevDataRef.current.filterBy !== filterBy;
+        var hasChanged = prevDataRef.current.dataHash !== dataHash || configChanged || groupByChanged || colorLegendChanged || filterByChanged;
+        if (hasChanged) {
+            // 更新缓存
+            prevDataRef.current = {
+                dataHash: dataHash,
+                config: config,
+                groupBy: groupBy,
+                colorLegend: colorLegend,
+                filterBy: filterBy
+            };
+            // 对于流式数据，使用防抖更新，避免频繁渲染
+            if (prevDataRef.current.dataHash !== dataHash) {
+                debouncedUpdateRenderKeyRef.current();
+            } else {
+                // 配置变化时立即更新
+                setRenderKey(function(k) {
+                    return k + 1;
+                });
+            }
+        }
+    }, [
+        dataHash,
+        config,
+        groupBy,
+        colorLegend,
+        filterBy
+    ]);
     /**
    * 图表配置
    */ var getChartPopover = function() {
@@ -884,12 +947,7 @@ import { isNotEmpty, toNumber } from "./utils";
                     })
                 })))))
             }, /*#__PURE__*/ React.createElement(ActionIconBox, {
-                title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale3 = i18n.locale) === null || _i18n_locale3 === void 0 ? void 0 : _i18n_locale3.configChart) || '配置图表',
-                onClick: function() {
-                    return setRenderKey(function(k) {
-                        return k + 1;
-                    });
-                }
+                title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale3 = i18n.locale) === null || _i18n_locale3 === void 0 ? void 0 : _i18n_locale3.configChart) || '配置图表'
             }, /*#__PURE__*/ React.createElement(SettingOutlined, {
                 style: {
                     color: 'rgba(0, 25, 61, 0.3255)'
@@ -992,8 +1050,12 @@ import { isNotEmpty, toNumber } from "./utils";
         return null;
     }, [
         chartType,
-        JSON.stringify(chartData),
-        JSON.stringify(config),
+        // 使用更高效的依赖项
+        dataHash,
+        config === null || config === void 0 ? void 0 : config.x,
+        config === null || config === void 0 ? void 0 : config.y,
+        config === null || config === void 0 ? void 0 : config.height,
+        config === null || config === void 0 ? void 0 : config.index,
         renderKey,
         toolBar,
         convertDonutData,

package/dist/Plugins/chart/LineChart/index.js

@@ -142,7 +142,7 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Line } from "react-chartjs-2";
 import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
 import { defaultColorList } from "../const";
-import { extractAndSortXValues, findDataPointByXValue } from "../utils";
+import { extractAndSortXValues, findDataPointByXValue, getDataHash } from "../utils";
 import { useStyle } from "./style";
 var lineChartComponentsRegistered = false;
 var LineChart = function(_param) {
@@ -179,6 +179,12 @@ var LineChart = function(_param) {
         return undefined;
     }, []);
     var safeData = Array.isArray(data) ? data : [];
+    // 使用数据哈希来优化依赖项比较
+    var dataHash = useMemo(function() {
+        return getDataHash(safeData);
+    }, [
+        safeData
+    ]);
     // 响应式尺寸计算
     var _useState = _sliced_to_array(useState(typeof window !== 'undefined' ? window.innerWidth : 768), 2), windowWidth = _useState[0], setWindowWidth = _useState[1];
     var isMobile = windowWidth <= 768;
@@ -217,7 +223,7 @@ var LineChart = function(_param) {
         }))).filter(Boolean);
         return uniqueCategories;
     }, [
-        safeData
+        dataHash
     ]);
     // 从数据中提取 filterLabel，过滤掉 undefined 值
     var validFilterLabels = useMemo(function() {
@@ -227,7 +233,7 @@ var LineChart = function(_param) {
             return filterLabel !== undefined;
         });
     }, [
-        safeData
+        dataHash
     ]);
     var filterLabels = useMemo(function() {
         return validFilterLabels.length > 0 ? _to_consumable_array(new Set(validFilterLabels)) : undefined;
@@ -259,7 +265,7 @@ var LineChart = function(_param) {
             return item.x !== null && item.x !== undefined;
         });
     }, [
-        safeData,
+        dataHash,
         selectedFilter,
         filterLabels,
         selectedFilterLabel

package/dist/Plugins/chart/index.js

@@ -130,6 +130,7 @@ import { ErrorBoundary } from "../../MarkdownEditor/editor/elements/ErrorBoundar
 import { useEditorStore } from "../../MarkdownEditor/editor/store";
 import { DragHandle } from "../../MarkdownEditor/editor/tools/DragHandle";
 import { ChartRender } from "./ChartRender";
+import { getDataHash } from "./utils";
 /**
  * @fileoverview 图表插件主入口文件
  *
@@ -269,10 +270,17 @@ export { ChartFilter, ChartToolBar, downloadChart } from "./components";
  * - 集成编辑器状态管理
  * - 提供响应式布局
  */ export var ChartElement = function(props) {
-    var _node_otherProps, _node_otherProps1, _node_otherProps2;
+    var _node_otherProps, _node_otherProps1, _node_otherProps2, _node_otherProps3, _node_otherProps4, _node_otherProps_columns, _node_otherProps5;
     var _useEditorStore = useEditorStore(), store = _useEditorStore.store, readonly = _useEditorStore.readonly, markdownContainerRef = _useEditorStore.markdownContainerRef, rootContainer = _useEditorStore.rootContainer;
     var editor = useSlate();
     var node = props.element, attributes = props.attributes, children = props.children;
+    // 使用更高效的依赖项比较，避免 JSON.stringify 的性能开销
+    var dataSourceHash = useMemo(function() {
+        var _node_otherProps;
+        return getDataHash(((_node_otherProps = node.otherProps) === null || _node_otherProps === void 0 ? void 0 : _node_otherProps.dataSource) || []);
+    }, [
+        (_node_otherProps = node.otherProps) === null || _node_otherProps === void 0 ? void 0 : _node_otherProps.dataSource
+    ]);
     var chartData = useMemo(function() {
         var _node_otherProps_dataSource, _node_otherProps;
         return ((_node_otherProps = node.otherProps) === null || _node_otherProps === void 0 ? void 0 : (_node_otherProps_dataSource = _node_otherProps.dataSource) === null || _node_otherProps_dataSource === void 0 ? void 0 : _node_otherProps_dataSource.map(function(item) {
@@ -281,12 +289,13 @@ export { ChartFilter, ChartToolBar, downloadChart } from "./components";
             });
         })) || [];
     }, [
-        (_node_otherProps = node.otherProps) === null || _node_otherProps === void 0 ? void 0 : _node_otherProps.dataSource
+        dataSourceHash,
+        (_node_otherProps1 = node.otherProps) === null || _node_otherProps1 === void 0 ? void 0 : _node_otherProps1.dataSource
     ]);
-    var columns = ((_node_otherProps1 = node.otherProps) === null || _node_otherProps1 === void 0 ? void 0 : _node_otherProps1.columns) || [];
+    var columns = ((_node_otherProps2 = node.otherProps) === null || _node_otherProps2 === void 0 ? void 0 : _node_otherProps2.columns) || [];
     var _React_useState = _sliced_to_array(React.useState(2), 2), columnLength = _React_useState[0], setColumnLength = _React_useState[1];
     var config = [
-        ((_node_otherProps2 = node.otherProps) === null || _node_otherProps2 === void 0 ? void 0 : _node_otherProps2.config) || node.otherProps
+        ((_node_otherProps3 = node.otherProps) === null || _node_otherProps3 === void 0 ? void 0 : _node_otherProps3.config) || node.otherProps
     ].flat(1);
     var htmlRef = React.useRef(null);
     var _React_useState1 = _sliced_to_array(React.useState(256), 2), minWidth = _React_useState1[0], setMinWidth = _React_useState1[1];
@@ -463,7 +472,10 @@ export { ChartFilter, ChartToolBar, downloadChart } from "./components";
         }))))));
     }, [
         attributes,
-        JSON.stringify(node.otherProps),
+        // 使用更高效的依赖项比较
+        dataSourceHash,
+        (_node_otherProps4 = node.otherProps) === null || _node_otherProps4 === void 0 ? void 0 : _node_otherProps4.config,
+        (_node_otherProps5 = node.otherProps) === null || _node_otherProps5 === void 0 ? void 0 : (_node_otherProps_columns = _node_otherProps5.columns) === null || _node_otherProps_columns === void 0 ? void 0 : _node_otherProps_columns.length,
         editor,
         columnLength,
         readonly,

package/dist/Plugins/chart/utils.d.ts

@@ -246,3 +246,43 @@ export declare const toNumber: (val: any, fallback: number) => number;
  * @since 1.0.0
  */
 export declare const isNotEmpty: (val: any) => boolean;
+/**
+ * 生成数据数组的快速哈希值
+ *
+ * 用于优化 useMemo 的依赖项比较，避免使用 JSON.stringify 的性能开销。
+ * 通过比较数组长度和最后一个元素的引用来快速判断数据是否变化。
+ * 适用于流式数据场景，当数据频繁追加时性能更好。
+ *
+ * @param {any[]} data - 数据数组
+ * @returns {string} 哈希值字符串
+ *
+ * @example
+ * ```typescript
+ * const hash1 = getDataHash([{ x: 1, y: 2 }]);
+ * const hash2 = getDataHash([{ x: 1, y: 2 }, { x: 3, y: 4 }]);
+ * // hash1 !== hash2
+ * ```
+ *
+ * @since 1.0.0
+ */
+export declare const getDataHash: (data: any[]) => string;
+/**
+ * 深度比较两个配置对象的关键字段
+ *
+ * 用于优化 useMemo 的依赖项比较，只比较配置的关键字段，
+ * 避免对整个配置对象进行深度比较的性能开销。
+ *
+ * @param {any} config1 - 第一个配置对象
+ * @param {any} config2 - 第二个配置对象
+ * @returns {boolean} 是否相等
+ *
+ * @example
+ * ```typescript
+ * const config1 = { x: 'date', y: 'value', height: 400 };
+ * const config2 = { x: 'date', y: 'value', height: 400 };
+ * isConfigEqual(config1, config2); // true
+ * ```
+ *
+ * @since 1.0.0
+ */
+export declare const isConfigEqual: (config1: any, config2: any) => boolean;

package/dist/Plugins/chart/utils.js

@@ -320,3 +320,119 @@ var intl = new Intl.NumberFormat('en-US', {
  */ export var isNotEmpty = function(val) {
     return val !== null && val !== undefined;
 };
+/**
+ * 生成数据数组的快速哈希值
+ *
+ * 用于优化 useMemo 的依赖项比较，避免使用 JSON.stringify 的性能开销。
+ * 通过比较数组长度和最后一个元素的引用来快速判断数据是否变化。
+ * 适用于流式数据场景，当数据频繁追加时性能更好。
+ *
+ * @param {any[]} data - 数据数组
+ * @returns {string} 哈希值字符串
+ *
+ * @example
+ * ```typescript
+ * const hash1 = getDataHash([{ x: 1, y: 2 }]);
+ * const hash2 = getDataHash([{ x: 1, y: 2 }, { x: 3, y: 4 }]);
+ * // hash1 !== hash2
+ * ```
+ *
+ * @since 1.0.0
+ */ export var getDataHash = function(data) {
+    if (!Array.isArray(data) || data.length === 0) {
+        return "0-".concat((data === null || data === void 0 ? void 0 : data.length) || 0);
+    }
+    // 使用长度和最后一个元素的引用作为快速哈希
+    // 对于流式数据，通常只有新增，所以比较最后一个元素即可
+    var lastItem = data[data.length - 1];
+    var firstItem = data[0];
+    // 使用简单的哈希：长度 + 首尾元素的简单标识
+    var firstKey = firstItem ? Object.keys(firstItem).join(',') : '';
+    var lastKey = lastItem ? Object.keys(lastItem).join(',') : '';
+    return "".concat(data.length, "-").concat(firstKey, "-").concat(lastKey);
+};
+/**
+ * 深度比较两个配置对象的关键字段
+ *
+ * 用于优化 useMemo 的依赖项比较，只比较配置的关键字段，
+ * 避免对整个配置对象进行深度比较的性能开销。
+ *
+ * @param {any} config1 - 第一个配置对象
+ * @param {any} config2 - 第二个配置对象
+ * @returns {boolean} 是否相等
+ *
+ * @example
+ * ```typescript
+ * const config1 = { x: 'date', y: 'value', height: 400 };
+ * const config2 = { x: 'date', y: 'value', height: 400 };
+ * isConfigEqual(config1, config2); // true
+ * ```
+ *
+ * @since 1.0.0
+ */ export var isConfigEqual = function(config1, config2) {
+    if (config1 === config2) return true;
+    if (!config1 || !config2) return false;
+    var keys1 = Object.keys(config1);
+    var keys2 = Object.keys(config2);
+    if (keys1.length !== keys2.length) return false;
+    // 只比较关键字段
+    var keyFields = [
+        'x',
+        'y',
+        'height',
+        'index',
+        'rest'
+    ];
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = keyFields[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var key = _step.value;
+            if (config1[key] !== config2[key]) {
+                // 对于 rest 对象，进行浅比较
+                if (key === 'rest' && config1[key] && config2[key]) {
+                    var rest1 = config1[key];
+                    var rest2 = config2[key];
+                    var restKeys1 = Object.keys(rest1);
+                    var restKeys2 = Object.keys(rest2);
+                    if (restKeys1.length !== restKeys2.length) return false;
+                    var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;
+                    try {
+                        for(var _iterator1 = restKeys1[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true){
+                            var restKey = _step1.value;
+                            if (rest1[restKey] !== rest2[restKey]) return false;
+                        }
+                    } catch (err) {
+                        _didIteratorError1 = true;
+                        _iteratorError1 = err;
+                    } finally{
+                        try {
+                            if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+                                _iterator1.return();
+                            }
+                        } finally{
+                            if (_didIteratorError1) {
+                                throw _iteratorError1;
+                            }
+                        }
+                    }
+                } else {
+                    return false;
+                }
+            }
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return true;
+};

package/dist/Plugins/code/CodeUI/Katex/Katex.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CodeNode } from '../../../../MarkdownEditor/el';
-import './katex.min.css';
 export declare const Katex: (props: {
     el?: CodeNode;
 }) => React.JSX.Element;

package/dist/Plugins/code/CodeUI/Katex/Katex.js

@@ -6,6 +6,35 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -44,16 +73,112 @@ function _unsupported_iterable_to_array(o, minLen) {
     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);
 }
+function _ts_generator(thisArg, body) {
+    var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    };
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(_)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
 import classNames from "classnames";
-import katex from "katex";
-import React, { useEffect, useRef } from "react";
+import React, { startTransition, useEffect, useRef, useState } from "react";
 import { useGetSetState } from "react-use";
-import "./katex.min.css";
+import { loadKatex } from "../../../katex/loadKatex";
 export var Katex = function(props) {
     var _useGetSetState = _sliced_to_array(useGetSetState({
         code: '',
         error: ''
     }), 2), state = _useGetSetState[0], setState = _useGetSetState[1];
+    var _useState = _sliced_to_array(useState(false), 2), katexLoaded = _useState[0], setKatexLoaded = _useState[1];
+    var katexRef = useRef(null);
     var divRef = useRef(null);
     var timer = useRef(0);
     // 处理未定义的 el
@@ -62,7 +187,56 @@ export var Katex = function(props) {
         type: 'code',
         language: 'katex'
     };
+    // 异步加载 Katex 库和 CSS
+    useEffect(function() {
+        if (process.env.NODE_ENV === 'test') {
+            setKatexLoaded(true);
+            return;
+        }
+        startTransition(function() {
+            // 异步加载在 startTransition 外部执行
+            _async_to_generator(function() {
+                var katexModule, error;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            _state.trys.push([
+                                0,
+                                2,
+                                ,
+                                3
+                            ]);
+                            return [
+                                4,
+                                loadKatex()
+                            ];
+                        case 1:
+                            katexModule = _state.sent();
+                            katexRef.current = katexModule.default;
+                            setKatexLoaded(true);
+                            return [
+                                3,
+                                3
+                            ];
+                        case 2:
+                            error = _state.sent();
+                            console.error('Failed to load Katex:', error);
+                            setKatexLoaded(true);
+                            return [
+                                3,
+                                3
+                            ];
+                        case 3:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        });
+    }, []);
     useEffect(function() {
+        if (!katexLoaded || !katexRef.current) return;
         var code = safeEl.value || '';
         clearTimeout(timer.current);
         timer.current = window.setTimeout(function() {
@@ -71,8 +245,8 @@ export var Katex = function(props) {
             });
             if (state().code) {
                 try {
-                    if (divRef.current) {
-                        katex.render(state().code, divRef.current, {
+                    if (divRef.current && katexRef.current) {
+                        katexRef.current.render(state().code, divRef.current, {
                             strict: false,
                             output: 'htmlAndMathml',
                             throwOnError: false,
@@ -93,7 +267,9 @@ export var Katex = function(props) {
             return window.clearTimeout(timer.current);
         };
     }, [
-        safeEl
+        safeEl,
+        katexLoaded,
+        state
     ]);
     return /*#__PURE__*/ React.createElement("div", {
         style: {

package/dist/Plugins/code/components/AceEditor.d.ts

@@ -12,10 +12,8 @@
  * @see {@link https://ace.c9.io/} Ace Editor 官方文档
  */
 /// <reference types="react" />
-/// <reference types="ace-builds/types/ace-theme" />
-import ace from 'ace-builds';
-import 'ace-builds/src-noconflict/theme-chaos';
-import 'ace-builds/src-noconflict/theme-github';
+/// <reference types="ace-builds/types/ace-modules" />
+/// <reference types="ace-builds" />
 import { Path } from 'slate';
 import { CodeNode } from '../../../MarkdownEditor/el';
 /**
@@ -68,8 +66,8 @@ interface AceEditorProps {
  */
 export declare function AceEditor({ element, onUpdate, onShowBorderChange, onHideChange, path, isSelected, onSelectionChange, ...props }: AceEditorProps): {
     dom: import("react").RefObject<HTMLDivElement>;
-    editorRef: import("react").MutableRefObject<ace.Editor | undefined>;
-    setLanguage: (changeLang: string) => void;
+    editorRef: import("react").MutableRefObject<import("ace-builds").Editor | undefined>;
+    setLanguage: (changeLang: string) => Promise<void>;
     focusEditor: () => void | undefined;
     isSelected: boolean;
     onSelectionChange: ((selected: boolean) => void) | undefined;