Skip to content

Commit 6bde8fa

Browse files
author
Mohsen Azimi
committed
Setup editor
1 parent 82be52d commit 6bde8fa

File tree

8 files changed

+3303
-1
lines changed

8 files changed

+3303
-1
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
node_modules
22
dist
33
.DS_Store
4-
coverage/
4+
coverage/
5+
*.log

‎docs/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# The web tool
2+
3+
4+
To start thd development server
5+
```
6+
yarn
7+
yarn start
8+
```

‎docs/editor.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as React from 'react';
2+
import { render } from 'react-dom';
3+
import MonacoEditor from 'react-monaco-editor';
4+
5+
interface AppState {
6+
code: string;
7+
}
8+
9+
class App extends React.Component<{}, AppState> {
10+
state = { code: '// hello ' }
11+
editorDidMount = (editor: monaco.editor.ICodeEditor, m: typeof monaco) => {
12+
console.log('editorDidMount', editor);
13+
editor.focus();
14+
}
15+
onChange = (newValue: string, e: monaco.editor.IModelContentChangedEvent2) => {
16+
console.log('onChange', newValue, e);
17+
}
18+
render() {
19+
const code = this.state.code;
20+
const options = {
21+
selectOnLineNumbers: true
22+
};
23+
return (
24+
<MonacoEditor
25+
width="800"
26+
height="600"
27+
language="javascript"
28+
value={code}
29+
options={options}
30+
onChange={this.onChange}
31+
editorDidMount={this.editorDidMount}
32+
/>
33+
);
34+
}
35+
}
36+
37+
render(
38+
<App />,
39+
document.getElementById('root')
40+
);

‎docs/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
<script src="dist/editor.js"></script>
10+
</body>
11+
</html>

‎docs/package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "react-javascript-to-typescript-transform-web",
3+
"version": "1.0.0",
4+
"author": "Mohsen Azimi <me@azimi.me>",
5+
"scripts": {
6+
"build": "webpack",
7+
"start": "webpack-dev-server"
8+
},
9+
"dependencies": {
10+
"@types/copy-webpack-plugin": "^4.0.0",
11+
"@types/html-webpack-plugin": "^2.28.0",
12+
"@types/react": "^15.0.38",
13+
"@types/react-dom": "^15.5.1",
14+
"@types/react-monaco-editor": "^0.8.1",
15+
"@types/webpack": "^3.0.4",
16+
"copy-webpack-plugin": "^4.0.1",
17+
"html-webpack-plugin": "^2.29.0",
18+
"monaco-editor": "^0.9.0",
19+
"react": "^15.6.1",
20+
"react-dom": "^15.6.1",
21+
"react-monaco-editor": "^0.8.1",
22+
"ts-loader": "^2.3.0",
23+
"ts-node": "^3.2.0",
24+
"typescript": "^2.4.1",
25+
"webpack": "^3.3.0",
26+
"webpack-dev-server": "^2.5.1"
27+
}
28+
}

‎docs/tsconfig.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "commonjs",
5+
"moduleResolution": "node",
6+
"jsx": "react"
7+
}
8+
}

‎docs/webpack.config.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as webpack from 'webpack';
2+
import * as path from 'path';
3+
import * as HTMLWebpackPlugin from 'html-webpack-plugin';
4+
import * as CopyWebpackPlugin from 'copy-webpack-plugin';
5+
6+
const config: webpack.Configuration = {
7+
entry: './editor.tsx',
8+
output: {
9+
path: path.join(__dirname, 'dist'),
10+
filename: 'editor-[hash].js',
11+
},
12+
resolve: { extensions: [ '.js', '.ts', '.tsx'] },
13+
module: {
14+
rules: [
15+
{
16+
test: /\.tsx?$/,
17+
use: 'ts-loader',
18+
},
19+
],
20+
},
21+
plugins: [
22+
new HTMLWebpackPlugin({
23+
template: './index.html'
24+
}),
25+
new CopyWebpackPlugin([
26+
{
27+
from: 'node_modules/monaco-editor/min/vs',
28+
to: 'vs',
29+
}
30+
])
31+
]
32+
};
33+
34+
export default config;

0 commit comments

Comments
 (0)