@ant-design/agentic-ui 2.19.0 → 2.20.0

package/dist/Schema/SchemaEditor/index.d.ts

@@ -22,11 +22,28 @@ export interface SchemaEditorProps {
         ALLOWED_TAGS?: string[];
         ALLOWED_ATTR?: string[];
     };
+    /** 自定义操作按钮，插入到 HTML 编辑器头部按钮区域 */
+    htmlActions?: React.ReactNode[];
 }
-/**
- * Schema编辑器组件
- *
- * 提供schema的实时编辑和预览功能，底层使用AceEditor编辑schema中的HTML内容
- */
-export declare function SchemaEditor({ initialSchema, initialValues, height, readonly, onChange, className, showPreview, previewConfig, }: SchemaEditorProps): React.JSX.Element;
+export interface SchemaEditorRef {
+    /** 设置 Schema 数据 */
+    setSchema: (schema: LowCodeSchema) => void;
+    /** 设置 HTML 模板内容 */
+    setHtmlContent: (html: string) => void;
+    /** 设置 Schema JSON 字符串 */
+    setSchemaString: (jsonString: string) => void;
+    /** 获取当前 Schema 数据 */
+    getSchema: () => LowCodeSchema;
+    /** 获取当前 HTML 模板内容 */
+    getHtmlContent: () => string;
+    /** 获取当前 Schema JSON 字符串 */
+    getSchemaString: () => string;
+    /** 运行预览 */
+    run: () => void;
+    /** 复制 HTML 内容 */
+    copyHtml: () => void;
+    /** 复制 JSON 内容 */
+    copyJson: () => void;
+}
+export declare const SchemaEditor: React.ForwardRefExoticComponent<SchemaEditorProps & React.RefAttributes<SchemaEditorRef>>;
 export default SchemaEditor;

package/dist/Schema/SchemaEditor/index.js

@@ -100,7 +100,7 @@ import { CircleDashed, Copy, Play } from "@sofa-design/icons";
 import { Button, ConfigProvider, message } from "antd";
 import classNames from "classnames";
 import copy from "copy-to-clipboard";
-import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { I18nContext } from "../../I18n";
 import { SchemaRenderer } from "../SchemaRenderer";
 import { mdDataSchemaValidator } from "../validator";
@@ -110,8 +110,8 @@ import { useStyle } from "./style";
  * Schema编辑器组件
  *
  * 提供schema的实时编辑和预览功能，底层使用AceEditor编辑schema中的HTML内容
- */ export function SchemaEditor(param) {
-    var initialSchema = param.initialSchema, _param_initialValues = param.initialValues, initialValues = _param_initialValues === void 0 ? {} : _param_initialValues, _param_height = param.height, height = _param_height === void 0 ? 600 : _param_height, _param_readonly = param.readonly, readonly = _param_readonly === void 0 ? false : _param_readonly, onChange = param.onChange, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, _param_showPreview = param.showPreview, showPreview = _param_showPreview === void 0 ? true : _param_showPreview, previewConfig = param.previewConfig;
+ */ var SchemaEditorComponent = /*#__PURE__*/ forwardRef(function(param, ref) {
+    var initialSchema = param.initialSchema, _param_initialValues = param.initialValues, initialValues = _param_initialValues === void 0 ? {} : _param_initialValues, _param_height = param.height, height = _param_height === void 0 ? 600 : _param_height, _param_readonly = param.readonly, readonly = _param_readonly === void 0 ? false : _param_readonly, onChange = param.onChange, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, _param_showPreview = param.showPreview, showPreview = _param_showPreview === void 0 ? true : _param_showPreview, previewConfig = param.previewConfig, htmlActions = param.htmlActions;
     // 使用 ConfigProvider 获取前缀类名
     var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
     var prefixCls = getPrefixCls('schema-editor');
@@ -134,6 +134,26 @@ import { useStyle } from "./style";
     var _useState4 = _sliced_to_array(useState(''), 2), validationError = _useState4[0], setValidationError = _useState4[1];
     var _useState5 = _sliced_to_array(useState({}), 2), renderedSchema = _useState5[0], setRenderedSchema = _useState5[1];
     var _useState6 = _sliced_to_array(useState(false), 2), isSchemaRendered = _useState6[0], setIsSchemaRendered = _useState6[1];
+    // 使用 ref 存储最新值，确保 ref 方法能立即获取到最新状态
+    var schemaRef = React.useRef(schema);
+    var htmlContentRef = React.useRef(htmlContent);
+    var schemaStringRef = React.useRef(schemaString);
+    // 同步更新 ref 值
+    React.useEffect(function() {
+        schemaRef.current = schema;
+    }, [
+        schema
+    ]);
+    React.useEffect(function() {
+        htmlContentRef.current = htmlContent;
+    }, [
+        htmlContent
+    ]);
+    React.useEffect(function() {
+        schemaStringRef.current = schemaString;
+    }, [
+        schemaString
+    ]);
     // 将schema转换为JSON字符串
     var schemaToJson = useCallback(function(schemaData) {
         try {
@@ -159,8 +179,14 @@ import { useStyle } from "./style";
     // 初始化schema字符串
     useEffect(function() {
         var _schema_component;
-        setSchemaString(schemaToJson(schema));
-        setHtmlContent(((_schema_component = schema.component) === null || _schema_component === void 0 ? void 0 : _schema_component.schema) || '');
+        var jsonString = schemaToJson(schema);
+        var html = ((_schema_component = schema.component) === null || _schema_component === void 0 ? void 0 : _schema_component.schema) || '';
+        setSchemaString(jsonString);
+        setHtmlContent(html);
+        // 同步更新 ref 值
+        schemaRef.current = schema;
+        schemaStringRef.current = jsonString;
+        htmlContentRef.current = html;
     }, [
         schema,
         schemaToJson
@@ -195,24 +221,27 @@ import { useStyle } from "./style";
     // 处理HTML内容变更
     var handleHtmlChange = useCallback(function(newHtml) {
         setHtmlContent(newHtml);
-        var newSchema = _object_spread_props(_object_spread({}, schema), {
-            component: _object_spread_props(_object_spread({}, schema.component), {
+        htmlContentRef.current = newHtml;
+        var newSchema = _object_spread_props(_object_spread({}, schemaRef.current), {
+            component: _object_spread_props(_object_spread({}, schemaRef.current.component), {
                 schema: newHtml
             })
         });
         handleSchemaChange(newSchema);
     }, [
-        schema,
         handleSchemaChange
     ]);
     // 处理JSON编辑器变更
     var handleJsonChange = useCallback(function(newJsonString) {
         setSchemaString(newJsonString);
+        schemaStringRef.current = newJsonString;
         var newSchema = jsonToSchema(newJsonString);
         if (newSchema) {
             var _newSchema_component;
+            var html = ((_newSchema_component = newSchema.component) === null || _newSchema_component === void 0 ? void 0 : _newSchema_component.schema) || '';
             handleSchemaChange(newSchema);
-            setHtmlContent(((_newSchema_component = newSchema.component) === null || _newSchema_component === void 0 ? void 0 : _newSchema_component.schema) || '');
+            setHtmlContent(html);
+            htmlContentRef.current = html;
         }
     }, [
         jsonToSchema,
@@ -220,18 +249,14 @@ import { useStyle } from "./style";
     ]);
     // 处理运行按钮点击
     var handleRunClick = useCallback(function() {
-        setRenderedSchema(_object_spread({}, schema));
+        var currentSchema = schemaRef.current;
+        setRenderedSchema(_object_spread({}, currentSchema));
         // 更新values状态，使用schema中的initialValues
-        if (schema.initialValues) {
-            setValues(schema.initialValues);
+        if (currentSchema.initialValues) {
+            setValues(currentSchema.initialValues);
         }
         setIsSchemaRendered(true);
-    }, [
-        schema,
-        setRenderedSchema,
-        setValues,
-        setIsSchemaRendered
-    ]);
+    }, []);
     // 复制函数
     var handleCopyContent = useCallback(function(content, type) {
         if (!content || !content.trim()) {
@@ -266,6 +291,59 @@ import { useStyle } from "./style";
         schemaString,
         handleCopyContent
     ]);
+    // 暴露 ref 方法
+    useImperativeHandle(ref, function() {
+        return {
+            setSchema: function(newSchema) {
+                var _newSchema_component, _newSchema_component1;
+                handleSchemaChange(newSchema);
+                var newJsonString = schemaToJson(newSchema);
+                setSchemaString(newJsonString);
+                setHtmlContent(((_newSchema_component = newSchema.component) === null || _newSchema_component === void 0 ? void 0 : _newSchema_component.schema) || '');
+                // 立即更新 ref 值，确保 get 方法能立即获取到最新值
+                schemaRef.current = newSchema;
+                schemaStringRef.current = newJsonString;
+                htmlContentRef.current = ((_newSchema_component1 = newSchema.component) === null || _newSchema_component1 === void 0 ? void 0 : _newSchema_component1.schema) || '';
+            },
+            setHtmlContent: function(newHtml) {
+                handleHtmlChange(newHtml);
+                // 立即更新 ref 值
+                htmlContentRef.current = newHtml;
+            },
+            setSchemaString: function(newJsonString) {
+                handleJsonChange(newJsonString);
+                // 立即更新 ref 值
+                schemaStringRef.current = newJsonString;
+                var newSchema = jsonToSchema(newJsonString);
+                if (newSchema) {
+                    var _newSchema_component;
+                    schemaRef.current = newSchema;
+                    htmlContentRef.current = ((_newSchema_component = newSchema.component) === null || _newSchema_component === void 0 ? void 0 : _newSchema_component.schema) || '';
+                }
+            },
+            getSchema: function() {
+                return schemaRef.current;
+            },
+            getHtmlContent: function() {
+                return htmlContentRef.current;
+            },
+            getSchemaString: function() {
+                return schemaStringRef.current;
+            },
+            run: handleRunClick,
+            copyHtml: handleCopyHtml,
+            copyJson: handleCopyJson
+        };
+    }, [
+        handleSchemaChange,
+        handleHtmlChange,
+        handleJsonChange,
+        handleRunClick,
+        handleCopyHtml,
+        handleCopyJson,
+        schemaToJson,
+        jsonToSchema
+    ]);
     // 渲染预览区域
     var renderPreview = useMemo(function() {
         if (!showPreview) return null;
@@ -331,7 +409,7 @@ import { useStyle } from "./style";
                 }
             }),
             onClick: handleCopyHtml
-        }))), /*#__PURE__*/ React.createElement("div", {
+        }), htmlActions)), /*#__PURE__*/ React.createElement("div", {
             className: classNames("".concat(prefixCls, "-html-content"), hashId)
         }, /*#__PURE__*/ React.createElement(AceEditorWrapper, {
             value: htmlContent,
@@ -347,6 +425,7 @@ import { useStyle } from "./style";
         locale,
         handleRunClick,
         handleCopyHtml,
+        htmlActions,
         prefixCls
     ]);
     // 渲染JSON编辑器
@@ -397,5 +476,7 @@ import { useStyle } from "./style";
     }, renderPreview), /*#__PURE__*/ React.createElement("div", {
         className: classNames("".concat(prefixCls, "-right"), hashId)
     }, renderHtmlEditor, renderJsonEditor))));
-}
+});
+SchemaEditorComponent.displayName = 'SchemaEditor';
+export var SchemaEditor = SchemaEditorComponent;
 export default SchemaEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.19.0",
+  "version": "2.20.0",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",