feat: editor

src/BotAddin.tsx

@@ -0,0 +1 @@
+import React from 'react'

src/Editor.tsx

@@ -3,39 +3,28 @@
  * @Date         : 2024-04-09 16:24:25
  * @LastEditTime : 2024-04-09 16:24:25
  *
- * 
+ *
  */
 
-import React, { useRef, useEffect } from 'react';
-import * as monaco from 'monaco-editor';
-
-// @ts-ignore
-// eslint-disable-next-line no-restricted-globals
-self.MonacoEnvironment = {
-  getWorkerUrl: function (_moduleId: any, label: string) {
-    if (label === 'json') {
-      return './json.worker.bundle.js';
-    }
-    if (label === 'typescript' || label === 'javascript') {
-      return './ts.worker.bundle.js';
-    }
-    return './editor.worker.bundle.js';
-  }
-};
+import React, { useState } from 'react';
+import MonacoEditor from 'react-monaco-editor';
 
 export const Editor: React.FC = () => {
-  const divEl = useRef<HTMLDivElement>(null);
-  let editor: monaco.editor.IStandaloneCodeEditor;
-  useEffect(() => {
-    if (divEl.current) {
-      editor = monaco.editor.create(divEl.current, {
-        value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
-        language: 'javascript'
-      });
-    }
-    return () => {
-      editor.dispose();
-    };
-  }, []);
-  return <div className="Editor" ref={divEl}></div>;
+	const [code, setCode] = useState(['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'))
+
+
+	return (
+		<MonacoEditor
+			width="100%"
+			height="300"
+			language="javascript"
+			theme="vs-dark"
+			value={code}
+			options={{
+				selectOnLineNumbers: true,
+				automaticLayout: true,
+			}}
+			onChange={setCode}
+		/>
+	)
 };

src/EmailSender.tsx

@@ -0,0 +1 @@
+import React from 'react'

src/Script.tsx

@@ -0,0 +1 @@
+import React from 'react'