@oceanbase/ui 1.0.0-alpha.8 → 1.0.0

package/lib/Highlight/JsonView.js

@@ -1,84 +1,54 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Highlight/JsonView.tsx
-var JsonView_exports = {};
-__export(JsonView_exports, {
-  default: () => JsonView_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(JsonView_exports);
-var import_design = require("@oceanbase/design");
-var import_classnames = __toESM(require("classnames"));
-var import_react = require("react");
-var import_react_json_view = __toESM(require("react-json-view"));
-var import__ = require(".");
-var import_useKeyDownCopyEvent = require("./useKeyDownCopyEvent");
-var import_jsx_runtime = require("react/jsx-runtime");
-var JsonView_default = ({
+exports.default = void 0;
+var _design = require("@oceanbase/design");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactJsonView = _interopRequireDefault(require("react-json-view"));
+var _ = require(".");
+var _useKeyDownCopyEvent = require("./useKeyDownCopyEvent");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = ({
   json,
   theme,
   style,
   className,
   height,
-  onCopyChange = () => {
-  },
+  onCopyChange = () => {},
   copyable = true
 }) => {
-  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls("highlight");
-  const isDarkTheme = theme === import__.THEME_DARK;
-  const codeRef = (0, import_react.useRef)();
-  (0, import_useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      style,
-      ref: codeRef,
-      tabIndex: -1,
-      className: (0, import_classnames.default)(
-        prefixCls,
-        `${prefixCls}-json-view`,
-        {
-          [`${prefixCls}-light`]: !isDarkTheme
-        },
-        className
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_json_view.default,
-        {
-          enableClipboard: copyable && onCopyChange,
-          src: json,
-          theme: isDarkTheme ? "ocean" : void 0,
-          displayDataTypes: false,
-          style: { height },
-          name: false
-        }
-      )
-    }
-  );
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('highlight');
+  const isDarkTheme = theme === _.THEME_DARK;
+  const codeRef = (0, _react.useRef)();
+  (0, _useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: style,
+    ref: codeRef
+    // 让div支持focus能力
+    ,
+    tabIndex: -1,
+    className: (0, _classnames.default)(prefixCls, `${prefixCls}-json-view`, {
+      [`${prefixCls}-light`]: !isDarkTheme
+    }, className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactJsonView.default, {
+      enableClipboard: copyable && onCopyChange,
+      src: json,
+      theme: isDarkTheme ? 'ocean' : undefined,
+      displayDataTypes: false,
+      style: {
+        height
+      },
+      name: false
+    })
+  });
 };
+exports.default = _default;

package/lib/Highlight/index.js

@@ -1,108 +1,90 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Highlight/index.tsx
-var Highlight_exports = {};
-__export(Highlight_exports, {
-  THEME_DARK: () => THEME_DARK,
-  THEME_LIGHT: () => THEME_LIGHT,
-  default: () => Highlight_default,
-  languageMap: () => languageMap,
-  renderHightlight: () => renderHightlight
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Highlight_exports);
-var import_core = __toESM(require("highlight.js/lib/core"));
-var import_react = __toESM(require("react"));
-var import_javascript = __toESM(require("./languages/javascript"));
-var import_icons = require("@oceanbase/icons");
-var import_design = require("@oceanbase/design");
-var import_design2 = require("@oceanbase/design");
-var import_classnames = __toESM(require("classnames"));
-var import_react_copy_to_clipboard = __toESM(require("react-copy-to-clipboard"));
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_style = __toESM(require("./style"));
-var import_DiffView = __toESM(require("./DiffView"));
-var import_HighlightCell = __toESM(require("./HighlightCell"));
-var import_JsonView = __toESM(require("./JsonView"));
-var import_bash = __toESM(require("./languages/bash"));
-var import_cpp = __toESM(require("./languages/cpp"));
-var import_css = __toESM(require("./languages/css"));
-var import_dockerfile = __toESM(require("./languages/dockerfile"));
-var import_go = __toESM(require("./languages/go"));
-var import_groovy = __toESM(require("./languages/groovy"));
-var import_http = __toESM(require("./languages/http"));
-var import_java = __toESM(require("./languages/java"));
-var import_json = __toESM(require("./languages/json"));
-var import_markdown = __toESM(require("./languages/markdown"));
-var import_nginx = __toESM(require("./languages/nginx"));
-var import_python = __toESM(require("./languages/python"));
-var import_ruby = __toESM(require("./languages/ruby"));
-var import_solidity = __toESM(require("./languages/solidity"));
-var import_sql = __toESM(require("./languages/sql"));
-var import_typescript = __toESM(require("./languages/typescript"));
-var import_xml = __toESM(require("./languages/xml"));
-var import_yaml = __toESM(require("./languages/yaml"));
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var import_useKeyDownCopyEvent = require("./useKeyDownCopyEvent");
-var import_jsx_runtime = require("react/jsx-runtime");
-var languageMap = {
-  javascript: import_javascript.default,
-  typescript: import_typescript.default,
-  css: import_css.default,
-  groovy: import_groovy.default,
-  java: import_java.default,
-  python: import_python.default,
-  bash: import_bash.default,
-  json: import_json.default,
-  cpp: import_cpp.default,
-  http: import_http.default,
-  markdown: import_markdown.default,
-  nginx: import_nginx.default,
-  ruby: import_ruby.default,
-  sql: import_sql.default,
-  xml: import_xml.default,
-  dockerfile: import_dockerfile.default,
-  go: import_go.default,
-  yaml: import_yaml.default,
-  solidity: import_solidity.default,
-  tsx: import_typescript.default,
-  jsx: import_javascript.default
+exports.renderHightlight = exports.languageMap = exports.default = exports.THEME_LIGHT = exports.THEME_DARK = void 0;
+var _core = _interopRequireDefault(require("highlight.js/lib/core"));
+var _react = _interopRequireWildcard(require("react"));
+var _javascript = _interopRequireDefault(require("./languages/javascript"));
+var _icons = require("@oceanbase/icons");
+var _design = require("@oceanbase/design");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactCopyToClipboard = _interopRequireDefault(require("react-copy-to-clipboard"));
+var _LocaleWrapper = _interopRequireDefault(require("../locale/LocaleWrapper"));
+var _style = _interopRequireDefault(require("./style"));
+var _DiffView = _interopRequireDefault(require("./DiffView"));
+var _HighlightCell = _interopRequireDefault(require("./HighlightCell"));
+var _JsonView = _interopRequireDefault(require("./JsonView"));
+var _bash = _interopRequireDefault(require("./languages/bash"));
+var _cpp = _interopRequireDefault(require("./languages/cpp"));
+var _css = _interopRequireDefault(require("./languages/css"));
+var _dockerfile = _interopRequireDefault(require("./languages/dockerfile"));
+var _go = _interopRequireDefault(require("./languages/go"));
+var _groovy = _interopRequireDefault(require("./languages/groovy"));
+var _http = _interopRequireDefault(require("./languages/http"));
+var _java = _interopRequireDefault(require("./languages/java"));
+var _json = _interopRequireDefault(require("./languages/json"));
+var _markdown = _interopRequireDefault(require("./languages/markdown"));
+var _nginx = _interopRequireDefault(require("./languages/nginx"));
+var _python = _interopRequireDefault(require("./languages/python"));
+var _ruby = _interopRequireDefault(require("./languages/ruby"));
+var _solidity = _interopRequireDefault(require("./languages/solidity"));
+var _sql = _interopRequireDefault(require("./languages/sql"));
+var _typescript = _interopRequireDefault(require("./languages/typescript"));
+var _xml = _interopRequireDefault(require("./languages/xml"));
+var _yaml = _interopRequireDefault(require("./languages/yaml"));
+var _zhCN = _interopRequireDefault(require("./locale/zh-CN"));
+var _useKeyDownCopyEvent = require("./useKeyDownCopyEvent");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 高亮能力基于highlight.js 的语法解析能力 https://highlightjs.org/
+ * 听说过的还算有名的语言放在langugaes中了，需要新增语言时在languages文件夹中添加并import使用，加入到 languageMap中
+ * 如果没有在 https://github.com/highlightjs/highlight.js/tree/master/src/languages 中查找是否支持，然后添加
+ * 优先支持主流语言，没有 import 在代码中使用的不会打包
+ */
+// tsx 本质上也是采用typescript进行解析，hljs做了支持
+// 目前支持的语言列表
+const languageMap = exports.languageMap = {
+  javascript: _javascript.default,
+  typescript: _typescript.default,
+  css: _css.default,
+  groovy: _groovy.default,
+  java: _java.default,
+  python: _python.default,
+  bash: _bash.default,
+  json: _json.default,
+  cpp: _cpp.default,
+  http: _http.default,
+  markdown: _markdown.default,
+  nginx: _nginx.default,
+  ruby: _ruby.default,
+  sql: _sql.default,
+  xml: _xml.default,
+  dockerfile: _dockerfile.default,
+  go: _go.default,
+  yaml: _yaml.default,
+  solidity: _solidity.default,
+  tsx: _typescript.default,
+  jsx: _javascript.default
 };
-var THEME_DARK = "dark";
-var THEME_LIGHT = "light";
-var tuple = (...args) => args;
-var ThemeTypes = tuple(THEME_DARK, THEME_LIGHT);
-var supportedLanguages = Object.keys(languageMap);
-var renderHightlight = (language, content) => {
-  const result = language ? import_core.default.highlight(language, content || "") : import_core.default.highlightAuto(content);
+const THEME_DARK = exports.THEME_DARK = 'dark';
+const THEME_LIGHT = exports.THEME_LIGHT = 'light';
+
+// 主题类型
+const tuple = (...args) => args;
+const ThemeTypes = tuple(THEME_DARK, THEME_LIGHT);
+// 支持的语言
+const supportedLanguages = Object.keys(languageMap);
+const renderHightlight = (language, content) => {
+  const result = language ? _core.default.highlight(language, content || '') : _core.default.highlightAuto(content);
   return result;
 };
-var Highlight = (props) => {
+exports.renderHightlight = renderHightlight;
+const Highlight = props => {
   const {
     children,
     style: customStyle,
@@ -112,161 +94,171 @@ var Highlight = (props) => {
     lineNumber = false,
     copyable = true,
     theme = THEME_LIGHT,
-    onCopyChange = () => {
-    },
+    onCopyChange = () => {},
     language,
     locale
   } = props;
-  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls("highlight");
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('highlight');
+  const {
+    wrapSSR
+  } = (0, _style.default)(prefixCls);
   const themeClass = theme === THEME_DARK ? `${prefixCls}-dark` : `${prefixCls}-light`;
-  const codeRef = import_react.default.createRef();
-  const [codeBlock, setCodeBlock] = import_react.default.useState();
-  const { token } = import_design.theme.useToken();
-  (0, import_react.useEffect)(() => {
+  const codeRef = /*#__PURE__*/_react.default.createRef();
+
+  // 代码块展示的结构
+  const [codeBlock, setCodeBlock] = _react.default.useState();
+  const {
+    token
+  } = _design.theme.useToken();
+
+  // 按需加载语言
+  (0, _react.useEffect)(() => {
     if (language && languageMap[language]) {
-      import_core.default.registerLanguage(language, languageMap[language]);
+      _core.default.registerLanguage(language, languageMap[language]);
     } else {
-      Object.keys(languageMap).forEach((lan) => {
-        import_core.default.registerLanguage(lan, languageMap[lan]);
+      Object.keys(languageMap).forEach(lan => {
+        _core.default.registerLanguage(lan, languageMap[lan]);
       });
     }
   }, [language]);
   const highlightCode = () => {
+    // 数据为空即跳过渲染
     if (!children) {
       return;
     }
-    const { value } = renderHightlight(language, children);
+
+    // 构造table展示codeblock
+    const {
+      value
+    } = renderHightlight(language, children);
     const sourceData = value.split(/\r?\n/);
+    // 构造整个list所需要的内容（行号和内容）
     const rowList = sourceData.map((rowValue, index) => ({
       value: rowValue,
       index: index + 1
     }));
-    setCodeBlock(
-      rowList.map((src, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_HighlightCell.default,
-          {
-            lineNumber,
-            width: "100%",
-            data: src,
-            theme,
-            prefixCls
-          }
-        ) }, index);
-      })
-    );
+    setCodeBlock(rowList.map((src, index) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightCell.default, {
+          lineNumber: lineNumber,
+          width: "100%",
+          data: src,
+          theme: theme,
+          prefixCls: prefixCls
+        })
+      }, index);
+    }));
   };
-  (0, import_react.useEffect)(() => {
+
+  // 触发重新渲染
+  (0, _react.useEffect)(() => {
     highlightCode();
   }, [children, innerHTML, theme, language, lineNumber]);
-  (0, import_useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
+
+  // 支持复制能力
+  (0, _useKeyDownCopyEvent.useKeyDownCopyEvent)(codeRef);
   const customProps = {
     ref: codeRef,
     className: `${className}`,
     style: customStyle,
-    tabIndex: "-1"
+    tabIndex: '-1'
   };
   if (innerHTML) {
-    customProps.dangerouslySetInnerHTML = { __html: children };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...customProps });
+    customProps.dangerouslySetInnerHTML = {
+      __html: children
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ...customProps
+    });
   }
   const CopyButton = () => {
-    const [copyId, setCopyId] = (0, import_react.useState)();
-    (0, import_react.useEffect)(() => {
+    const [copyId, setCopyId] = (0, _react.useState)();
+    (0, _react.useEffect)(() => {
       return () => {
         window.clearTimeout(copyId);
       };
     });
-    const [copied, setCopied] = (0, import_react.useState)(false);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_copy_to_clipboard.default,
-      {
-        text: children && children.length ? children : "",
-        onCopy: (value) => {
+    const [copied, setCopied] = (0, _react.useState)(false);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactCopyToClipboard.default, {
+        text: children && children.length ? children : '',
+        onCopy: value => {
           onCopyChange(value);
           setCopied(true);
-          import_design2.message.success(locale.copied);
+          _design.message.success(locale.copied);
           const tempCopyId = window.setTimeout(() => {
             setCopied(false);
-          }, 2e3);
+          }, 2000);
           setCopyId(tempCopyId);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "button",
-          {
-            disabled: copied,
-            className: (0, import_classnames.default)(`${prefixCls}-copy`),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+          type: "button",
+          disabled: copied,
+          className: (0, _classnames.default)(`${prefixCls}-copy`),
+          "aria-label": locale?.copyCode,
+          "aria-pressed": copied,
+          style: {
+            background: `${theme === THEME_DARK ? `#2b303b` : token.colorBgLayout}`
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CopyOutlined, {
+            className: (0, _classnames.default)(`${prefixCls}-copy-icon`, {
+              scoll: copied
+            }),
+            style: {
+              color: `${theme === THEME_DARK ? token.colorBgLayout : `#2b303b`}`
+            },
+            "aria-hidden": true
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {
+            className: (0, _classnames.default)(`${prefixCls}-copy-icon`),
             style: {
-              background: `${theme === THEME_DARK ? `#2b303b` : token.colorBgLayout}`
+              color: 'rgb(63,177,99)'
             },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_icons.CopyOutlined,
-                {
-                  className: (0, import_classnames.default)(`${prefixCls}-copy-icon`, { scoll: copied }),
-                  style: { color: `${theme === THEME_DARK ? token.colorBgLayout : `#2b303b`}` }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_icons.CheckOutlined,
-                {
-                  className: (0, import_classnames.default)(`${prefixCls}-copy-icon`),
-                  style: { color: "rgb(63,177,99)" }
-                }
-              )
-            ]
-          }
-        )
-      }
-    ) });
+            "aria-hidden": true
+          })]
+        })
+      })
+    });
   };
-  return wrapSSR(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "pre",
-      {
-        ...customProps,
-        style: {
-          ...customStyle,
-          position: "relative"
-        },
-        className: (0, import_classnames.default)(`${prefixCls}`, className, themeClass),
-        children: [
-          copyable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "table",
-            {
-              style: {
-                height
-              },
-              className: (0, import_classnames.default)(
-                `${theme === THEME_DARK ? `${prefixCls}-dark` : `${prefixCls}-light`}`
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: codeBlock })
-            }
-          )
-        ]
-      }
-    )
-  );
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("pre", {
+    ...customProps,
+    role: "region",
+    "aria-label": locale?.copyCodeRegion,
+    style: {
+      ...customStyle,
+      position: 'relative'
+    },
+    className: (0, _classnames.default)(`${prefixCls}`, className, themeClass),
+    children: [copyable && /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+      style: {
+        height
+      },
+      className: (0, _classnames.default)(`${theme === THEME_DARK ? `${prefixCls}-dark` : `${prefixCls}-light`}`),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        children: codeBlock
+      })
+    })]
+  }));
 };
-var HighlightWrapper = (props) => {
-  const { language, children } = props;
-  if (language === "json" && children && typeof children === "object" && !import_react.default.isValidElement(children)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_JsonView.default, { ...props, json: children });
+const HighlightWrapper = props => {
+  const {
+    language,
+    children
+  } = props;
+  if (language === 'json' && children && typeof children === 'object' && ! /*#__PURE__*/_react.default.isValidElement(children)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsonView.default, {
+      ...props,
+      json: children
+    });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Highlight, { ...props });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Highlight, {
+    ...props
+  });
 };
-HighlightWrapper.Diff = import_DiffView.default;
-var Highlight_default = (0, import_LocaleWrapper.default)({
-  componentName: "Highlight",
-  defaultLocale: import_zh_CN.default
-})(HighlightWrapper);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  THEME_DARK,
-  THEME_LIGHT,
-  languageMap,
-  renderHightlight
-});
+HighlightWrapper.Diff = _DiffView.default;
+var _default = exports.default = (0, _LocaleWrapper.default)({
+  componentName: 'Highlight',
+  defaultLocale: _zhCN.default
+})(HighlightWrapper);