magic-csb/workflow_whatever
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: editor

Browse Source
This commit is contained in:
EleanorMao 2024-04-09 23:27:48 +08:00
parent 141f253400
commit 8bd972c992
7 changed files with 48 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
config/webpack.config.js
View File

@ -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: {
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'
},
entry: paths.appIndexJs,
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(

4
package.json
View File

@ -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": [

1
src/BotAddin.tsx Normal file
View File

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

49
src/Editor.tsx
View File

@ -6,36 +6,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}
/>
)
};

1
src/EmailSender.tsx Normal file
View File

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

1
src/Script.tsx Normal file
View File

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

16
yarn.lock
View File

@ -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"