@ant-design/agentic-ui 2.7.1 → 2.9.0

package/dist/Plugins/code/components/CodeContainer.js

@@ -1,63 +1,48 @@
-// src/Plugins/code/components/CodeContainer.tsx
-import classNames from "classnames";
+/**
+ * @fileoverview 代码编辑器容器组件
+ * 负责代码编辑器的布局、样式和状态管理
+ */ import classNames from "classnames";
 import React, { useRef } from "react";
-function CodeContainer({
-  element,
-  showBorder,
-  hide,
-  onEditorClick,
-  children,
-  theme
-}) {
-  const containerRef = useRef(null);
-  const safeElement = element || {
-    language: void 0,
-    frontmatter: false
-  };
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      contentEditable: false,
-      className: "ace-el drag-el",
-      "data-be": "code",
-      "data-testid": "code-container",
-      ref: containerRef,
-      tabIndex: -1,
-      onBlur: (e) => e.stopPropagation(),
-      onClick: (e) => e.stopPropagation(),
-      "data-lang": safeElement.language
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
+export function CodeContainer(param) {
+    var element = param.element, showBorder = param.showBorder, hide = param.hide, onEditorClick = param.onEditorClick, children = param.children, theme = param.theme;
+    var containerRef = useRef(null);
+    // 处理未定义的 element
+    var safeElement = element || {
+        language: undefined,
+        frontmatter: false
+    };
+    return /*#__PURE__*/ React.createElement("div", {
+        contentEditable: false,
+        className: "ace-el drag-el",
+        "data-be": "code",
+        "data-testid": "code-container",
+        ref: containerRef,
+        tabIndex: -1,
+        onBlur: function(e) {
+            return e.stopPropagation();
+        },
+        onClick: function(e) {
+            return e.stopPropagation();
+        },
+        "data-lang": safeElement.language
+    }, /*#__PURE__*/ React.createElement("div", {
         "data-testid": "code-editor-container",
-        onClick: (e) => {
-          e.stopPropagation();
-          onEditorClick();
+        onClick: function(e) {
+            e.stopPropagation();
+            onEditorClick();
         },
         style: {
-          padding: hide ? 1 : 1,
-          marginBottom: hide ? 0 : void 0,
-          boxShadow: "var(--shadow-control-base)",
-          borderRadius: "var(--radius-card-base)",
-          backgroundColor: showBorder ? "rgba(59, 130, 246, 0.1)" : hide ? "transparent" : theme === "chaos" ? "var(--color-gray-text-default)" : "rgb(252, 252, 252)",
-          color: theme === "chaos" ? "#FFFFFF" : "var(--color-gray-text-default)",
-          height: hide ? 0 : "auto",
-          opacity: hide ? 0 : 1
+            padding: hide ? 1 : 1,
+            marginBottom: hide ? 0 : undefined,
+            boxShadow: 'var(--shadow-control-base)',
+            borderRadius: 'var(--radius-card-base)',
+            backgroundColor: showBorder ? 'rgba(59, 130, 246, 0.1)' : hide ? 'transparent' : theme === 'chaos' ? 'var(--color-gray-text-default)' : 'rgb(252, 252, 252)',
+            color: theme === 'chaos' ? '#FFFFFF' : 'var(--color-gray-text-default)',
+            height: hide ? 0 : 'auto',
+            opacity: hide ? 0 : 1
         },
-        className: classNames(
-          "ace-container",
-          "code-editor-container",
-          "drag-el",
-          {
+        className: classNames('ace-container', 'code-editor-container', 'drag-el', {
             frontmatter: safeElement.frontmatter
-          }
-        )
-      },
-      children
-    )
-  );
+        })
+    }, children));
 }
-export {
-  CodeContainer
-};

package/dist/Plugins/code/components/CodeRenderer.js

@@ -1,163 +1,210 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+/**
+ * @fileoverview 代码渲染器组件
+ * 封装代码编辑器的所有渲染逻辑
+ */ 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 a;
-};
-
-// src/Plugins/code/components/CodeRenderer.tsx
+    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 _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 { ConfigProvider, theme as antdTheme } from "antd";
 import React, { useMemo, useState } from "react";
 import { MarkdownEditor } from "../../../MarkdownEditor";
 import { useEditorStore } from "../../../MarkdownEditor/editor/store";
-import {
-  useCodeEditorState,
-  useRenderConditions,
-  useToolbarConfig
-} from "../hooks";
-import {
-  AceEditor,
-  AceEditorContainer,
-  CodeContainer,
-  CodeToolbar,
-  HtmlPreview,
-  ThinkBlock
-} from "./index";
-function CodeRenderer(props) {
-  var _a;
-  const { editorProps, readonly } = useEditorStore();
-  const {
-    state,
-    update,
-    path,
-    handleCloseClick,
-    handleHtmlPreviewClose,
-    handleShowBorderChange,
-    handleHideChange
-  } = useCodeEditorState(props.element);
-  const [theme, setTheme] = useState("github");
-  const [isExpanded, setIsExpanded] = useState(true);
-  const [isSelected, setIsSelected] = React.useState(false);
-  const [viewMode, setViewMode] = useState("code");
-  const { dom, setLanguage, focusEditor } = AceEditor({
-    element: props.element,
-    theme,
-    onUpdate: update,
-    onShowBorderChange: handleShowBorderChange,
-    onHideChange: handleHideChange,
-    path,
-    isSelected,
-    onSelectionChange: setIsSelected
-  });
-  const {
-    shouldHideConfigHtml,
-    shouldRenderAsThinkBlock,
-    shouldRenderAsCodeEditor
-  } = useRenderConditions(props.element, readonly);
-  const handleViewModeToggle = () => {
-    setViewMode((prev) => prev === "preview" ? "code" : "preview");
-  };
-  const { toolbarProps } = useToolbarConfig({
-    element: props.element,
-    readonly,
-    onCloseClick: handleCloseClick,
-    setLanguage,
-    onSelectionChange: setIsSelected,
-    onViewModeToggle: handleViewModeToggle,
-    viewMode
-  });
-  return useMemo(() => {
-    var _a2, _b, _c;
-    if (shouldHideConfigHtml) {
-      return null;
-    }
-    if (shouldRenderAsThinkBlock) {
-      return /* @__PURE__ */ React.createElement(ThinkBlock, { element: props.element });
-    }
-    if (shouldRenderAsCodeEditor) {
-      return /* @__PURE__ */ React.createElement(
-        ConfigProvider,
-        {
-          theme: {
-            algorithm: theme === "chaos" ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm
-          }
-        },
-        /* @__PURE__ */ React.createElement("div", __spreadValues({}, props.attributes), /* @__PURE__ */ React.createElement(
-          CodeContainer,
-          {
-            theme,
-            element: props.element,
-            showBorder: state.showBorder,
-            hide: state.hide,
-            onEditorClick: focusEditor
-          },
-          !props.element.frontmatter && !((_a2 = editorProps.codeProps) == null ? void 0 : _a2.hideToolBar) && /* @__PURE__ */ React.createElement(
-            CodeToolbar,
-            __spreadValues({
-              theme,
-              setTheme,
-              isExpanded,
-              onExpandToggle: () => setIsExpanded(!isExpanded)
-            }, toolbarProps)
-          ),
-          /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: "code-editor-content",
-              style: {
-                borderBottomLeftRadius: "inherit",
-                borderBottomRightRadius: "inherit",
-                display: isExpanded ? "block" : "none"
-              }
-            },
-            viewMode === "preview" && props.element.language === "html" && /* @__PURE__ */ React.createElement(HtmlPreview, { htmlStr: (_b = props.element) == null ? void 0 : _b.value }),
-            viewMode === "preview" && props.element.language && props.element.language === "markdown" && /* @__PURE__ */ React.createElement(MarkdownEditor, { initValue: (_c = props.element) == null ? void 0 : _c.value }),
-            /* @__PURE__ */ React.createElement(
-              "div",
-              {
+import { useCodeEditorState, useRenderConditions, useToolbarConfig } from "../hooks";
+import { AceEditor, AceEditorContainer, CodeContainer, CodeToolbar, HtmlPreview, ThinkBlock } from "./index";
+// 简单的 CSV -> Markdown table 转换器
+/**
+ * 代码渲染器组件
+ *
+ * 功能特性：
+ * - 基于 Ace Editor 的代码编辑
+ * - 支持 100+ 种编程语言语法高亮
+ * - 支持代码复制、全屏编辑
+ * - 支持 HTML 代码实时预览
+ * - 支持拖拽排序
+ * - 响应式布局适配
+ * - 支持代码框选中状态管理
+ */ export function CodeRenderer(props) {
+    var _editorProps_codeProps;
+    var _useEditorStore = useEditorStore(), editorProps = _useEditorStore.editorProps, readonly = _useEditorStore.readonly;
+    // 使用状态管理Hook
+    var _useCodeEditorState = useCodeEditorState(props.element), state = _useCodeEditorState.state, update = _useCodeEditorState.update, path = _useCodeEditorState.path, handleCloseClick = _useCodeEditorState.handleCloseClick, handleHtmlPreviewClose = _useCodeEditorState.handleHtmlPreviewClose, handleShowBorderChange = _useCodeEditorState.handleShowBorderChange, handleHideChange = _useCodeEditorState.handleHideChange;
+    var _useState = _sliced_to_array(useState('github'), 2), theme = _useState[0], setTheme = _useState[1];
+    var _useState1 = _sliced_to_array(useState(true), 2), isExpanded = _useState1[0], setIsExpanded = _useState1[1];
+    // 选中状态管理
+    var _React_useState = _sliced_to_array(React.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
+    // 视图模式状态管理（用于HTML和Markdown）
+    var _useState2 = _sliced_to_array(useState('code'), 2), viewMode = _useState2[0], setViewMode = _useState2[1];
+    // 使用Ace编辑器Hook
+    var _AceEditor = AceEditor({
+        element: props.element,
+        theme: theme,
+        onUpdate: update,
+        onShowBorderChange: handleShowBorderChange,
+        onHideChange: handleHideChange,
+        path: path,
+        isSelected: isSelected,
+        onSelectionChange: setIsSelected
+    }), dom = _AceEditor.dom, setLanguage = _AceEditor.setLanguage, focusEditor = _AceEditor.focusEditor;
+    // 使用渲染条件Hook
+    var _useRenderConditions = useRenderConditions(props.element, readonly), shouldHideConfigHtml = _useRenderConditions.shouldHideConfigHtml, shouldRenderAsThinkBlock = _useRenderConditions.shouldRenderAsThinkBlock, shouldRenderAsCodeEditor = _useRenderConditions.shouldRenderAsCodeEditor;
+    // 视图模式切换处理函数
+    var handleViewModeToggle = function() {
+        setViewMode(function(prev) {
+            return prev === 'preview' ? 'code' : 'preview';
+        });
+    };
+    // 使用工具栏配置Hook
+    var toolbarProps = useToolbarConfig({
+        element: props.element,
+        readonly: readonly,
+        onCloseClick: handleCloseClick,
+        setLanguage: setLanguage,
+        onSelectionChange: setIsSelected,
+        onViewModeToggle: handleViewModeToggle,
+        viewMode: viewMode
+    }).toolbarProps;
+    // 渲染组件
+    return useMemo(function() {
+        // 隐藏配置型 HTML 代码块
+        if (shouldHideConfigHtml) {
+            return null;
+        }
+        // 只读模式下的思考块特殊渲染
+        if (shouldRenderAsThinkBlock) {
+            return /*#__PURE__*/ React.createElement(ThinkBlock, {
+                element: props.element
+            });
+        }
+        // 主要的代码编辑器渲染
+        if (shouldRenderAsCodeEditor) {
+            var _editorProps_codeProps, _props_element, _props_element1;
+            return /*#__PURE__*/ React.createElement(ConfigProvider, {
+                theme: {
+                    algorithm: theme === 'chaos' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm
+                }
+            }, /*#__PURE__*/ React.createElement("div", props.attributes, /*#__PURE__*/ React.createElement(CodeContainer, {
+                theme: theme,
+                element: props.element,
+                showBorder: state.showBorder,
+                hide: state.hide,
+                onEditorClick: focusEditor
+            }, !props.element.frontmatter && !((_editorProps_codeProps = editorProps.codeProps) === null || _editorProps_codeProps === void 0 ? void 0 : _editorProps_codeProps.hideToolBar) && /*#__PURE__*/ React.createElement(CodeToolbar, _object_spread({
+                theme: theme,
+                setTheme: setTheme,
+                isExpanded: isExpanded,
+                onExpandToggle: function() {
+                    return setIsExpanded(!isExpanded);
+                }
+            }, toolbarProps)), /*#__PURE__*/ React.createElement("div", {
+                className: "code-editor-content",
                 style: {
-                  height: "100%",
-                  width: "100%",
-                  borderRadius: "inherit",
-                  padding: "12px 0",
-                  display: viewMode === "code" ? "block" : "none"
+                    borderBottomLeftRadius: 'inherit',
+                    borderBottomRightRadius: 'inherit',
+                    display: isExpanded ? 'block' : 'none'
                 }
-              },
-              /* @__PURE__ */ React.createElement(AceEditorContainer, { dom, element: props.element }, props.children)
-            )
-          )
-        ))
-      );
-    }
-    return null;
-  }, [
-    shouldHideConfigHtml,
-    shouldRenderAsThinkBlock,
-    shouldRenderAsCodeEditor,
-    props.element,
-    props.attributes,
-    props.children,
-    state.showBorder,
-    state.hide,
-    state.htmlStr,
-    isSelected,
-    (_a = editorProps.codeProps) == null ? void 0 : _a.hideToolBar,
-    toolbarProps,
-    handleHtmlPreviewClose,
-    viewMode,
-    handleViewModeToggle
-  ]);
+            }, viewMode === 'preview' && props.element.language === 'html' && /*#__PURE__*/ React.createElement(HtmlPreview, {
+                htmlStr: (_props_element = props.element) === null || _props_element === void 0 ? void 0 : _props_element.value
+            }), viewMode === 'preview' && props.element.language && props.element.language === 'markdown' && /*#__PURE__*/ React.createElement(MarkdownEditor, {
+                initValue: (_props_element1 = props.element) === null || _props_element1 === void 0 ? void 0 : _props_element1.value
+            }), /*#__PURE__*/ React.createElement("div", {
+                style: {
+                    height: '100%',
+                    width: '100%',
+                    borderRadius: 'inherit',
+                    padding: '12px 0',
+                    display: viewMode === 'code' ? 'block' : 'none'
+                }
+            }, /*#__PURE__*/ React.createElement(AceEditorContainer, {
+                dom: dom,
+                element: props.element
+            }, props.children))))));
+        }
+        return null;
+    }, [
+        shouldHideConfigHtml,
+        shouldRenderAsThinkBlock,
+        shouldRenderAsCodeEditor,
+        props.element,
+        props.attributes,
+        props.children,
+        state.showBorder,
+        state.hide,
+        state.htmlStr,
+        isSelected,
+        (_editorProps_codeProps = editorProps.codeProps) === null || _editorProps_codeProps === void 0 ? void 0 : _editorProps_codeProps.hideToolBar,
+        toolbarProps,
+        handleHtmlPreviewClose,
+        viewMode,
+        handleViewModeToggle
+    ]);
 }
-export {
-  CodeRenderer
-};