feat: editor

config/webpack.config.js

@@ -25,7 +25,8 @@ const ForkTsCheckerWebpackPlugin =
     ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
     : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-
+const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')
+const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');
 const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
@@ -200,14 +201,7 @@ module.exports = function (webpackEnv) {
       : isEnvDevelopment && 'cheap-module-source-map',
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
-    entry: {
+    entry: paths.appIndexJs,
-      app: paths.appIndexJs,
-      'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
-      'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
-      'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
-      'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
-      'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
-    },
     output: {
       // The build folder.
       path: paths.appBuild,
@@ -497,6 +491,7 @@ module.exports = function (webpackEnv) {
             // using the extension .module.css
             {
               test: cssModuleRegex,
+							include: MONACO_DIR,
               use: getStyleLoaders({
                 importLoaders: 1,
                 sourceMap: isEnvProduction
@@ -570,6 +565,9 @@ module.exports = function (webpackEnv) {
       ].filter(Boolean),
     },
     plugins: [
+			new MonacoEditorPlugin({
+				languages: ['json', 'typescript', 'javascript']
+			}),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
         Object.assign(

package.json

@@ -55,6 +55,7 @@
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",
+    "react-monaco-editor": "^0.55.0",
     "react-refresh": "^0.11.0",
     "react-router-dom": "^6.22.3",
     "resolve": "^1.20.0",
@@ -98,7 +99,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@types/lodash": "^4.17.0"
+    "@types/lodash": "^4.17.0",
+    "monaco-editor-webpack-plugin": "^7.1.0"
   },
   "jest": {
     "roots": [

src/BotAddin.tsx

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

src/Editor.tsx

@@ -6,36 +6,25 @@
  *
  */
 
-import React, { useRef, useEffect } from 'react';
+import React, { useState } from 'react';
-import * as monaco from 'monaco-editor';
+import MonacoEditor from 'react-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';
-  }
-};
 
 export const Editor: React.FC = () => {
-  const divEl = useRef<HTMLDivElement>(null);
+	const [code, setCode] = useState(['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'))
-  let editor: monaco.editor.IStandaloneCodeEditor;
+
-  useEffect(() => {
+
-    if (divEl.current) {
+	return (
-      editor = monaco.editor.create(divEl.current, {
+		<MonacoEditor
-        value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
+			width="100%"
-        language: 'javascript'
+			height="300"
-      });
+			language="javascript"
-    }
+			theme="vs-dark"
-    return () => {
+			value={code}
-      editor.dispose();
+			options={{
-    };
+				selectOnLineNumbers: true,
-  }, []);
+				automaticLayout: true,
-  return <div className="Editor" ref={divEl}></div>;
+			}}
+			onChange={setCode}
+		/>
+	)
 };

src/EmailSender.tsx

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

src/Script.tsx

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

yarn.lock

@@ -6759,7 +6759,7 @@ loader-runner@^4.2.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
-loader-utils@^2.0.0, loader-utils@^2.0.4:
+loader-utils@^2.0.0, loader-utils@^2.0.2, loader-utils@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
   integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
@@ -7034,6 +7034,13 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+monaco-editor-webpack-plugin@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.npmmirror.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.1.0.tgz#16f265c2b5dbb5fe08681b6b3b7d00d3c5b2ee97"
+  integrity sha512-ZjnGINHN963JQkFqjjcBtn1XBtUATDZBMgNQhDQwd78w2ukRhFXAPNgWuacaQiDZsUr4h1rWv5Mv6eriKuOSzA==
+  dependencies:
+    loader-utils "^2.0.2"
+
 monaco-editor@^0.47.0:
   version "0.47.0"
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.47.0.tgz#39865d67e0c9fb8c6b49e760bf9caf6a6650d28e"
@@ -8280,6 +8287,13 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-monaco-editor@^0.55.0:
+  version "0.55.0"
+  resolved "https://registry.npmmirror.com/react-monaco-editor/-/react-monaco-editor-0.55.0.tgz#8933e8acc28e177b8b2aaf23593716b8cebf27a8"
+  integrity sha512-GdEP0Q3Rn1dczfKEEyY08Nes5plWwIYU4sWRBQO0+jsQWQsKMHKCC6+hPRwR7G/4aA3V/iU9jSmWPzVJYMVFSQ==
+  dependencies:
+    prop-types "^15.8.1"
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"