@yuntijs/ui 1.1.0-beta.12 → 1.1.0-beta.14

package/es/ChatItem/style.js

@@ -16,7 +16,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     editing = _ref2.editing,
     time = _ref2.time,
     isLatest = _ref2.isLatest;
-  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding-block: 4px;\n      padding-inline: 8px;\n\n      background-color: ", ";\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFill : token.colorBgElevated : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadius, token.motionEaseOut);
+  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding-block: 4px;\n      padding-inline: 8px;\n\n      background-color: ", ";\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFill : '#F6F6F6' : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadius, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-block-start: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-block-end: -16px;\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;

package/es/MonacoEditor/MonacoEditor2.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { EditorProps } from '@monaco-editor/react';
+import type { Variant } from 'antd/es/config-provider';
+export interface EditorProps2 extends EditorProps {
+    onBlur?: (input: string, event: any) => void;
+    placeholder?: string;
+    variant?: Variant;
+    enableOutline?: boolean;
+    version?: string;
+}
+export declare const MonacoEditor2: React.FC<EditorProps2>;

package/es/MonacoEditor/MonacoEditor2.js

@@ -0,0 +1,103 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["language", "theme", "placeholder", "variant", "onBlur", "enableOutline", "className", "version", "options", "onMount"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import Editor, { loader } from '@monaco-editor/react';
+import { Spin } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { useCdnFn } from "../ConfigProvider";
+import { useStyles } from "./base/style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MonacoEditor2 = function MonacoEditor2(_ref) {
+  var _options$minimap;
+  var language = _ref.language,
+    theme = _ref.theme,
+    placeholder = _ref.placeholder,
+    variant = _ref.variant,
+    onBlur = _ref.onBlur,
+    enableOutline = _ref.enableOutline,
+    className = _ref.className,
+    _ref$version = _ref.version,
+    version = _ref$version === void 0 ? '0.52.2' : _ref$version,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {} : _ref$options,
+    onMount = _ref.onMount,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocus = _useState2[0],
+    setIsFocus = _useState2[1];
+  var editorRef = useRef(null);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isMounted = _useState4[0],
+    setIsMounted = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    configed = _useState6[0],
+    setConfiged = _useState6[1];
+  var _useStyles = useStyles({
+      minimapEnabled: options === null || options === void 0 || (_options$minimap = options.minimap) === null || _options$minimap === void 0 ? void 0 : _options$minimap.enabled,
+      variant: variant
+    }),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var classnames = cx(styles.base, className, {
+    've-focused': isFocus,
+    've-outline': enableOutline
+  });
+  var genCdnUrl = useCdnFn();
+  useEffect(function () {
+    loader.config({
+      paths: {
+        vs: genCdnUrl({
+          path: 'min/vs',
+          pkg: 'monaco-editor',
+          version: version
+        })
+      }
+    });
+    setConfiged(true);
+  }, [genCdnUrl, version]);
+  var handleEditorDidMount = function handleEditorDidMount(editor, monaco) {
+    editorRef.current = editor;
+    editor.onDidFocusEditorText(function () {
+      setIsFocus(true);
+    });
+    editor.onDidBlurEditorText(function (event) {
+      var _editorRef$current;
+      setIsFocus(false);
+      var value = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || (_editorRef$current = _editorRef$current.getModel()) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getValue();
+      onBlur === null || onBlur === void 0 || onBlur(value !== null && value !== void 0 ? value : '', event);
+    });
+    monaco.editor.setTheme('default-theme'); // Fix: sometimes not load the default theme
+    onMount === null || onMount === void 0 || onMount(editor, monaco);
+    setIsMounted(true);
+  };
+  return /*#__PURE__*/_jsx(Spin, {
+    spinning: !configed,
+    children: configed ? /*#__PURE__*/_jsx(Editor, _objectSpread({
+      className: classnames,
+      language: language || 'text',
+      onMount: handleEditorDidMount,
+      options: _objectSpread({
+        domReadOnly: true,
+        quickSuggestions: false,
+        minimap: {
+          enabled: false
+        },
+        lineNumbersMinChars: 1,
+        // would change line num width
+        wordWrap: 'on',
+        // auto line wrap
+        unicodeHighlight: {
+          ambiguousCharacters: false
+        },
+        placeholder: placeholder
+      }, options),
+      theme: isMounted ? theme : 'default-theme' // sometimes not load the default theme
+    }, props)) : null
+  });
+};

package/es/index.d.ts

@@ -7,6 +7,7 @@ export * from './Logo';
 export * from './LogViewer';
 export * from './Mentions';
 export * from './MonacoEditor';
+export * from './MonacoEditor/MonacoEditor2';
 export * from './Page';
 export * from './ProCard';
 export * from './SelectCard';

package/es/index.js

@@ -7,6 +7,7 @@ export * from "./Logo";
 export * from "./LogViewer";
 export * from "./Mentions";
 export * from "./MonacoEditor";
+export * from "./MonacoEditor/MonacoEditor2";
 export * from "./Page";
 export * from "./ProCard";
 export * from "./SelectCard";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.1.0-beta.12",
+  "version": "1.1.0-beta.14",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",
@@ -89,7 +89,8 @@
     "@lobehub/tts": "^1.25.1",
     "@lobehub/ui": "^1.164.2",
     "@melloware/react-logviewer": "^5.2.0",
-    "@monaco-editor/loader": "^1.4.0",
+    "@monaco-editor/loader": "^1.5.0",
+    "@monaco-editor/react": "^4.7.0",
     "@shikijs/transformers": "^3.2.1",
     "leva": "^0",
     "lexical": "^0.23.1",