feat(components): add MonacoEditor

.npmrc

@@ -1,6 +1,5 @@
 @tenx-ui:registry=http://dev-npm.tenxcloud.net/
 @yunti:registry=http://dev-npm.tenxcloud.net/
-always-auth=true
 strict-peer-dependencies=false
 public-hoist-pattern[]=*@umijs/lint*
 public-hoist-pattern[]=*changelog*

package.json

@@ -77,6 +77,7 @@
     ]
   },
   "dependencies": {
+    "@alilc/lowcode-plugin-base-monaco-editor": "^1.1.2",
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
     "@lobehub/ui": "^1",
@@ -108,6 +109,7 @@
     "jest": "^27",
     "jsdom": "^22",
     "lint-staged": "^15",
+    "monaco-editor": "^0.45.0",
     "prettier": "^3",
     "react": "^18",
     "react-dom": "^18",

src/MonacoEditor/demos/DiffEditor.tsx

@@ -0,0 +1,19 @@
+import { MonacoDiffEditor } from '@yuntijs/ui';
+
+import { original, value } from './data/diff';
+
+export default () => {
+  return (
+    <MonacoDiffEditor
+      height="300px"
+      language="javascript"
+      onChange={input => {
+        // eslint-disable-next-line no-console
+        console.log(input);
+      }}
+      original={original}
+      value={value}
+      width="740px"
+    />
+  );
+};

src/MonacoEditor/demos/MultiModel.tsx

@@ -0,0 +1,54 @@
+import { MonacoEditor } from '@yuntijs/ui';
+import { Segmented, Space } from 'antd';
+import { useState } from 'react';
+
+export default () => {
+  const [files, setFiles] = useState<
+    Record<string, { name: string; language: string; value: string }>
+  >({
+    'a.json': {
+      name: 'a.json',
+      language: 'json',
+      value: '{ "a": 1 }',
+    },
+    'b.js': {
+      name: 'b.js',
+      language: 'javascript',
+      value: 'var a = 1',
+    },
+    'c.sql': {
+      name: 'c.sql',
+      language: 'sql',
+      value: 'SELECT * from table where id = 1',
+    },
+  });
+  const [fileName, setFileName] = useState('a.json');
+  const file = files[fileName];
+
+  return (
+    <Space direction="vertical" size="large">
+      <Segmented
+        onChange={value => setFileName(value as string)}
+        options={Object.keys(files)}
+        value={fileName}
+      />
+      <MonacoEditor
+        defaultValue={file.value}
+        height={40}
+        language={file.language}
+        onChange={next => {
+          setFiles(v => ({
+            ...v,
+            [file.name]: {
+              ...v[file.name],
+              value: next,
+            },
+          }));
+        }}
+        path={file.name}
+        saveViewState={true}
+        width={600}
+      />
+    </Space>
+  );
+};

src/MonacoEditor/demos/SpecifyVersion copy.tsx

@@ -0,0 +1,42 @@
+/**
+ * iframe: true
+ * compact: true
+ */
+import { MonacoEditor } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <div style={{ padding: 24 }}>
+      <MonacoEditor
+        defaultValue={`import { MonacoEditor } from '@yuntijs/ui';
+
+  export default () => {
+    return (
+      <MonacoEditor
+        defaultValue={\`const value = function hello() {
+    alert('Hello world! Monaco version is 0.33.0');
+  }\`}
+        language="javascript"
+        onChange={(next) => {
+          // eslint-disable-next-line no-console
+          console.log(next);
+        }}
+        version="0.33.0"
+      />
+    )
+  };`}
+        editorDidMount={(monaco, editor) => {
+          // eslint-disable-next-line no-console
+          console.log(monaco, editor);
+        }}
+        height={240}
+        language="javascript"
+        onChange={next => {
+          // eslint-disable-next-line no-console
+          console.log(next);
+        }}
+        version="0.19.3"
+      />
+    </div>
+  );
+};

src/MonacoEditor/demos/SpecifyVersion.tsx

@@ -0,0 +1,34 @@
+/**
+ * iframe: true
+ * compact: true
+ */
+import { MonacoEditor } from '@yuntijs/ui';
+
+import { jsValue } from './data';
+
+export default () => {
+  return (
+    <div
+      style={{
+        padding: 24,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#fff',
+        height: '100vh',
+      }}
+    >
+      <MonacoEditor
+        defaultValue={jsValue}
+        height={200}
+        language="javascript"
+        onChange={next => {
+          // eslint-disable-next-line no-console
+          console.log(next);
+        }}
+        version="0.19.3"
+        width={740}
+      />
+    </div>
+  );
+};