@ant-design/agentic-ui 2.0.0

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

@@ -0,0 +1,77 @@
+/**
+ * @fileoverview Ace编辑器核心组件
+ *
+ * 负责Ace编辑器的初始化、配置和事件处理，包括：
+ * - 编辑器生命周期管理
+ * - 语法高亮配置
+ * - 主题动态切换
+ * - 键盘事件处理
+ * - 内容变化监听
+ * - 与 Slate 编辑器的集成
+ *
+ * @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';
+import { Path } from 'slate';
+import { CodeNode } from '../../../MarkdownEditor/el';
+/**
+ * AceEditor 组件属性接口
+ *
+ * @interface AceEditorProps
+ * @property {CodeNode} element - 代码块节点数据
+ * @property {Function} onUpdate - 更新代码块内容的回调
+ * @property {Function} onShowBorderChange - 边框显示状态变化回调
+ * @property {Function} onHideChange - 隐藏状态变化回调
+ * @property {Path} path - 代码块在文档中的路径
+ * @property {boolean} [isSelected] - 是否被选中
+ * @property {Function} [onSelectionChange] - 选中状态变化回调
+ */
+interface AceEditorProps {
+    element: CodeNode;
+    onUpdate: (data: Partial<CodeNode>) => void;
+    onShowBorderChange: (show: boolean) => void;
+    onHideChange: (hide: boolean) => void;
+    path: Path;
+    isSelected?: boolean;
+    onSelectionChange?: (selected: boolean) => void;
+    theme: string;
+}
+/**
+ * AceEditor 组件
+ *
+ * 封装 Ace Editor 的核心功能，提供代码编辑、语法高亮、主题切换等能力。
+ *
+ * @component
+ * @param {AceEditorProps} props - 组件属性
+ * @returns {Object} 返回包含 DOM 引用、编辑器引用、语言设置等方法的对象
+ *
+ * @example
+ * ```tsx
+ * const { dom, setLanguage, focusEditor } = AceEditor({
+ *   element: codeNode,
+ *   onUpdate: (data) => console.log('更新:', data),
+ *   onShowBorderChange: (show) => setBorder(show),
+ *   onHideChange: (hide) => setHide(hide),
+ *   path: [0, 1],
+ * });
+ * ```
+ *
+ * @remarks
+ * - 支持 100+ 种编程语言
+ * - 支持多种主题切换
+ * - 自动处理键盘事件和快捷键
+ * - 与 Slate 编辑器深度集成
+ */
+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;
+    focusEditor: () => void | undefined;
+    isSelected: boolean;
+    onSelectionChange: ((selected: boolean) => void) | undefined;
+};
+export {};

package/dist/plugins/code/components/AceEditor.js

@@ -0,0 +1,257 @@
+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]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/plugins/code/components/AceEditor.tsx
+import ace from "ace-builds";
+import "ace-builds/src-noconflict/theme-chaos";
+import "ace-builds/src-noconflict/theme-github";
+import isHotkey from "is-hotkey";
+import { useCallback, useEffect, useRef } from "react";
+import { Editor, Path, Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+import partialParse from "../../../MarkdownEditor/editor/parser/json-parse";
+import { useEditorStore } from "../../../MarkdownEditor/editor/store";
+import { aceLangs, modeMap } from "../../../MarkdownEditor/editor/utils/ace";
+import { EditorUtils } from "../../../MarkdownEditor/editor/utils/editorUtils";
+function AceEditor(_a) {
+  var _b = _a, {
+    element,
+    onUpdate,
+    onShowBorderChange,
+    onHideChange,
+    path,
+    isSelected = false,
+    onSelectionChange
+  } = _b, props = __objRest(_b, [
+    "element",
+    "onUpdate",
+    "onShowBorderChange",
+    "onHideChange",
+    "path",
+    "isSelected",
+    "onSelectionChange"
+  ]);
+  var _a2;
+  const { store, editorProps, readonly } = useEditorStore();
+  const codeRef = useRef(element.value || "");
+  const pathRef = useRef(path);
+  const posRef = useRef({ row: 0, column: 0 });
+  const pasted = useRef(false);
+  const debounceTimer = useRef(0);
+  const editorRef = useRef();
+  const dom = useRef(null);
+  useEffect(() => {
+    pathRef.current = path;
+  }, [path]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (isHotkey("backspace", e)) {
+        if (!codeRef.current) {
+          const currentPath = ReactEditor.findPath(store.editor, element);
+          Transforms.delete(store.editor, { at: currentPath });
+          Transforms.insertNodes(
+            store.editor,
+            { type: "paragraph", children: [{ text: "" }] },
+            { at: currentPath }
+          );
+          Transforms.select(
+            store.editor,
+            Editor.start(store.editor, currentPath)
+          );
+          ReactEditor.focus(store.editor);
+        }
+      }
+      if (isHotkey("mod+enter", e) && pathRef.current) {
+        EditorUtils.focus(store.editor);
+        Transforms.insertNodes(
+          store.editor,
+          { type: "paragraph", children: [{ text: "" }] },
+          { at: Path.next(pathRef.current), select: true }
+        );
+        e.stopPropagation();
+        return;
+      }
+      const newEvent = new KeyboardEvent(e.type, e);
+      window.dispatchEvent(newEvent);
+    },
+    [element, store.editor]
+  );
+  const setupEditorEvents = useCallback(
+    (codeEditor) => {
+      codeEditor.commands.addCommand({
+        name: "disableFind",
+        bindKey: { win: "Ctrl-F", mac: "Command-F" },
+        exec: () => {
+        }
+      });
+      const textarea = dom.current.querySelector("textarea");
+      codeEditor.on("focus", () => {
+        onShowBorderChange(false);
+        onHideChange(false);
+      });
+      codeEditor.on("blur", () => {
+        codeEditor.selection.clearSelection();
+      });
+      codeEditor.selection.on("changeCursor", () => {
+        setTimeout(() => {
+          const pos = codeEditor.getCursorPosition();
+          posRef.current = { row: pos.row, column: pos.column };
+        });
+      });
+      codeEditor.on("paste", (e) => {
+        if (pasted.current) {
+          e.text = "";
+        } else {
+          pasted.current = true;
+          setTimeout(() => {
+            pasted.current = false;
+          }, 60);
+        }
+      });
+      codeEditor.on("focus", () => {
+        onSelectionChange == null ? void 0 : onSelectionChange(true);
+      });
+      codeEditor.on("blur", () => {
+        setTimeout(() => {
+          onSelectionChange == null ? void 0 : onSelectionChange(false);
+        }, 160);
+      });
+      textarea == null ? void 0 : textarea.addEventListener("keydown", handleKeyDown);
+      codeEditor.on("change", () => {
+        if (readonly)
+          return;
+        clearTimeout(debounceTimer.current);
+        debounceTimer.current = window.setTimeout(() => {
+          onUpdate({ value: codeEditor.getValue() });
+          codeRef.current = codeEditor.getValue();
+        }, 100);
+      });
+    },
+    [onUpdate, onShowBorderChange, onHideChange, readonly, handleKeyDown]
+  );
+  useEffect(() => {
+    var _a3;
+    if (false)
+      return;
+    if (!dom.current)
+      return;
+    let value = element.value || "";
+    if (element.language === "json") {
+      try {
+        value = JSON.stringify(partialParse(value), null, 2);
+      } catch (e) {
+      }
+    }
+    const codeEditor = ace.edit(dom.current, __spreadValues({
+      useWorker: false,
+      value,
+      fontSize: 12,
+      animatedScroll: true,
+      maxLines: Infinity,
+      wrap: true,
+      tabSize: 4,
+      readOnly: readonly,
+      showPrintMargin: false,
+      showLineNumbers: true,
+      showGutter: true
+    }, editorProps.codeProps || {}));
+    editorRef.current = codeEditor;
+    const theme = ((_a3 = editorProps.codeProps) == null ? void 0 : _a3.theme) || props.theme || "github";
+    codeEditor.setTheme(`ace/theme/${theme}`);
+    setTimeout(() => {
+      let lang = element.language;
+      if (modeMap.has(lang)) {
+        lang = modeMap.get(lang);
+      }
+      if (aceLangs.has(lang)) {
+        codeEditor.session.setMode(`ace/mode/${lang}`);
+      }
+    }, 16);
+    if (readonly)
+      return;
+    setupEditorEvents(codeEditor);
+    return () => {
+      codeEditor.destroy();
+    };
+  }, []);
+  useEffect(() => {
+    var _a3, _b2;
+    let value = element.value || "";
+    if (element.language === "json") {
+      try {
+        value = JSON.stringify(partialParse(value), null, 2);
+      } catch (e) {
+      }
+    }
+    if (value !== codeRef.current) {
+      if (element)
+        (_a3 = editorRef.current) == null ? void 0 : _a3.setValue(value || "plain text");
+      (_b2 = editorRef.current) == null ? void 0 : _b2.clearSelection();
+    }
+  }, [element.value]);
+  useEffect(() => {
+    var _a3;
+    if (!editorRef.current)
+      return;
+    const theme = ((_a3 = editorProps.codeProps) == null ? void 0 : _a3.theme) || props.theme || "github";
+    editorRef.current.setTheme(`ace/theme/${theme}`);
+  }, [(_a2 = editorProps.codeProps) == null ? void 0 : _a2.theme, props.theme]);
+  const setLanguage = useCallback(
+    (changeLang) => {
+      var _a3, _b2, _c;
+      let lang = changeLang.toLowerCase();
+      if (((_a3 = element.language) == null ? void 0 : _a3.toLowerCase()) === lang)
+        return;
+      onUpdate({ language: lang });
+      if (modeMap.has(lang)) {
+        lang = modeMap.get(lang);
+      }
+      if (aceLangs.has(lang)) {
+        (_b2 = editorRef.current) == null ? void 0 : _b2.session.setMode(`ace/mode/${lang}`);
+      } else {
+        (_c = editorRef.current) == null ? void 0 : _c.session.setMode(`ace/mode/text`);
+      }
+    },
+    [element, onUpdate]
+  );
+  return {
+    dom,
+    editorRef,
+    setLanguage,
+    focusEditor: () => {
+      var _a3;
+      return (_a3 = editorRef.current) == null ? void 0 : _a3.focus();
+    },
+    isSelected,
+    onSelectionChange
+  };
+}
+export {
+  AceEditor
+};

package/dist/plugins/code/components/AceEditorContainer.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @fileoverview Ace编辑器容器组件
+ * 负责Ace编辑器DOM的渲染和内容副本的显示
+ */
+import React, { RefObject } from 'react';
+import { CodeNode } from '../../../MarkdownEditor/el';
+interface AceEditorContainerProps {
+    dom: RefObject<HTMLDivElement>;
+    element: CodeNode;
+    children: React.ReactNode;
+}
+export declare function AceEditorContainer({ dom, element, children, }: AceEditorContainerProps): React.JSX.Element;
+export {};

package/dist/plugins/code/components/AceEditorContainer.js

@@ -0,0 +1,33 @@
+// src/plugins/code/components/AceEditorContainer.tsx
+import React from "react";
+function AceEditorContainer({
+  dom,
+  element,
+  children
+}) {
+  var _a;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "ace-editor-container",
+      ref: dom,
+      style: { height: 200, lineHeight: 1.6 }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "code-content-copy",
+      style: {
+        height: "0.5px",
+        overflow: "hidden",
+        opacity: 0,
+        pointerEvents: "none"
+      }
+    },
+    (_a = element == null ? void 0 : element.value) == null ? void 0 : _a.replaceAll("\n", " "),
+    children
+  ));
+}
+export {
+  AceEditorContainer
+};

package/dist/plugins/code/components/CodeContainer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @fileoverview 代码编辑器容器组件
+ * 负责代码编辑器的布局、样式和状态管理
+ */
+import React, { ReactNode } from 'react';
+import { CodeNode } from '../../../MarkdownEditor/el';
+interface CodeContainerProps {
+    element?: CodeNode;
+    showBorder: boolean;
+    hide: boolean;
+    onEditorClick: () => void;
+    children: ReactNode;
+    readonly?: boolean;
+    theme: string;
+}
+export declare function CodeContainer({ element, showBorder, hide, onEditorClick, children, theme, }: CodeContainerProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,63 @@
+// src/plugins/code/components/CodeContainer.tsx
+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",
+      {
+        "data-testid": "code-editor-container",
+        onClick: (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
+        },
+        className: classNames(
+          "ace-container",
+          "code-editor-container",
+          "drag-el",
+          {
+            frontmatter: safeElement.frontmatter
+          }
+        )
+      },
+      children
+    )
+  );
+}
+export {
+  CodeContainer
+};

package/dist/plugins/code/components/CodeRenderer.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @fileoverview 代码渲染器组件
+ * 封装代码编辑器的所有渲染逻辑
+ */
+import React from 'react';
+import { CodeNode, ElementProps } from '../../../MarkdownEditor/el';
+/**
+ * 代码渲染器组件
+ *
+ * 功能特性：
+ * - 基于 Ace Editor 的代码编辑
+ * - 支持 100+ 种编程语言语法高亮
+ * - 支持代码复制、全屏编辑
+ * - 支持 HTML 代码实时预览
+ * - 支持拖拽排序
+ * - 响应式布局适配
+ * - 支持代码框选中状态管理
+ */
+export declare function CodeRenderer(props: ElementProps<CodeNode>): React.JSX.Element | null;

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

@@ -0,0 +1,163 @@
+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]);
+    }
+  return a;
+};
+
+// src/plugins/code/components/CodeRenderer.tsx
+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",
+              {
+                style: {
+                  height: "100%",
+                  width: "100%",
+                  borderRadius: "inherit",
+                  padding: "12px 0",
+                  display: viewMode === "code" ? "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
+  ]);
+}
+export {
+  CodeRenderer
+};