@agentscope-ai/design 1.0.27-beta.1769680455227 → 1.0.27-beta.1769741632982

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,6 +2,7 @@ import { CodeBlock, CollapsePanel, message } from "../../../..";
2
2
  import { SparkCode01Line, SparkCopyLine } from '@agentscope-ai/icons';
3
3
  import { Flex } from 'antd';
4
4
  import React from 'react';
5
+ import { EditorView } from '@codemirror/view';
5
6
  import { jsx as _jsx } from "react/jsx-runtime";
6
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
7
8
  var App = function App() {
@@ -40,8 +41,10 @@ var App = function App() {
40
41
  }
41
42
  }),
42
43
  children: /*#__PURE__*/_jsx(CodeBlock, {
43
- language: 'javascript',
44
- value: value
44
+ language: "json",
45
+ value: " {\n \"name\": \"John Press ENTER to open in the browser...\",\n \"age\": 30,\n \"city\": \"New York\"\n }",
46
+ readOnly: true,
47
+ extensions: [EditorView.lineWrapping]
45
48
  })
46
49
  })
47
50
  });
@@ -1 +1,7 @@
1
+ /**
2
+ * CodeBlock 组件样式
3
+ * 所有 CodeMirror 相关样式都限定在组件根类名下,
4
+ * 通过选择器层级提高优先级,避免使用 !important,
5
+ * 方便外部业务覆盖样式
6
+ */
1
7
  export declare const useStyle: () => () => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,14 @@
1
1
  var _templateObject;
2
2
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
3
  import createGlobalStyle from "../../../libs/createStyle";
4
- export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-code-block {\n width: 100%;\n}\n\n.cm-theme {\n border: none !important;\n border-radius: 0 !important;\n}\n\n.cm-gutters {\n border-right: none !important;\n background-color: var(--", "-color-bg-base) !important;\n}\n\n.cm-editor {\n background-color: var(--", "-color-bg-base) !important;\n}\n\n.cm-gutterElement:not(:first-child) {\n color: var(--", "-color-text-tertiary);\n height: 24px !important;\n line-height: 24px !important;\n display: flex;\n align-items: center;\n justify-content: center;\n \n span:not([title*=\"Unfold line\"]) {\n height: 30px !important;\n }\n}\n\n.cm-line {\n height: 24px !important;\n line-height: 24px !important;\n}\n\n.cm-lineNumbers .cm-gutterElement {\n padding: 0px 4px 0px 12px !important;\n}\n\n.cm-activeLine,\n.cm-activeLineGutter {\n background-color: var(--", "-color-fill-secondary) !important;\n}\n\n.cm-button {\n background-image: none !important;\n background: var(--", "-color-bg-base) !important;\n border: 1px solid var(--", "-color-border-secondary) !important;\n border-radius: 4px !important;\n \n &:hover {\n color: var(--", "-color-text-secondary);\n cursor: pointer;\n }\n}\n\n.cm-search {\n background: var(--", "-color-fill-secondary) !important;\n}\n\n.cm-panel.cm-search label {\n display: inline-flex;\n align-items: center;\n}\n\n.cm-panel.cm-search [name=close] {\n right: 8px !important;\n background: none !important;\n font-size: 16px !important;\n color: var(--", "-color-text-tertiary) !important;\n}\n\n.cm-textfield {\n border-radius: 4px;\n}\n\n.cm-panel.cm-search input[type=checkbox] {\n border: 1px solid var(--", "-color-border-secondary) !important;\n}\n\n.cm-focused {\n outline: none !important;\n}\n"])), function (p) {
4
+
5
+ /**
6
+ * CodeBlock 组件样式
7
+ * 所有 CodeMirror 相关样式都限定在组件根类名下,
8
+ * 通过选择器层级提高优先级,避免使用 !important,
9
+ * 方便外部业务覆盖样式
10
+ */
11
+ export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-code-block {\n width: 100%;\n\n /* CodeMirror \u4E3B\u9898\u6837\u5F0F */\n .cm-theme {\n border: none;\n border-radius: 0;\n }\n\n /* \u884C\u53F7\u69FD\u6837\u5F0F */\n .cm-gutters {\n border-right: none;\n background-color: var(--", "-color-bg-base);\n }\n\n /* \u7F16\u8F91\u5668\u80CC\u666F */\n .cm-editor {\n background-color: var(--", "-color-bg-base);\n }\n\n /* \u884C\u53F7\u5143\u7D20\u6837\u5F0F */\n .cm-gutterElement:not(:first-child) {\n color: var(--", "-color-text-tertiary);\n min-height: 24px;\n line-height: 24px;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding-top: 0;\n }\n\n /* \u4EE3\u7801\u884C\u6837\u5F0F - \u4E0D\u8BBE\u7F6E\u56FA\u5B9A\u9AD8\u5EA6\uFF0C\u8BA9 CodeMirror \u81EA\u52A8\u8BA1\u7B97\u4EE5\u652F\u6301\u6362\u884C */\n .cm-line {\n min-height: 24px;\n line-height: 24px;\n }\n\n /* \u884C\u53F7\u5185\u8FB9\u8DDD */\n .cm-lineNumbers .cm-gutterElement {\n padding: 0px 4px 0px 12px;\n }\n\n /* \u5F53\u524D\u884C\u9AD8\u4EAE */\n .cm-activeLine,\n .cm-activeLineGutter {\n background-color: var(--", "-color-fill-secondary);\n }\n\n /* \u6309\u94AE\u6837\u5F0F */\n .cm-button {\n background-image: none;\n background: var(--", "-color-bg-base);\n border: 1px solid var(--", "-color-border-secondary);\n border-radius: 4px;\n \n &:hover {\n color: var(--", "-color-text-secondary);\n cursor: pointer;\n }\n }\n\n /* \u641C\u7D22\u9762\u677F\u6837\u5F0F */\n .cm-search {\n background: var(--", "-color-fill-secondary);\n }\n\n .cm-panel.cm-search label {\n display: inline-flex;\n align-items: center;\n }\n\n .cm-panel.cm-search [name=close] {\n right: 8px;\n background: none;\n font-size: 16px;\n color: var(--", "-color-text-tertiary);\n }\n\n /* \u6587\u672C\u8F93\u5165\u6846\u6837\u5F0F */\n .cm-textfield {\n border-radius: 4px;\n }\n\n .cm-panel.cm-search input[type=checkbox] {\n border: 1px solid var(--", "-color-border-secondary);\n }\n\n /* \u805A\u7126\u6837\u5F0F */\n .cm-focused {\n outline: none;\n }\n}\n"])), function (p) {
5
12
  return p.sparkPrefix;
6
13
  }, function (p) {
7
14
  return p.antPrefix;