Skip to content

Commit 68ecaa4

Browse files
nishikazanishikaza
committed
getting branch up to date with OUFR
2 parents 8da5615 + 7892393 commit 68ecaa4

10 files changed

+881
-574
lines changed

‎package-lock.json

+770-310
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@
3232
"react": "~16.8.0",
3333
"react-codemirror": "^1.0.0",
3434
"react-dom": "~16.8.0",
35-
"react-simple-code-editor": "^0.9.10"
35+
"react-monaco-editor": "^0.26.2",
36+
"react-simple-code-editor": "^0.9.10",
37+
"webpack-env": "^0.8.0"
3638
},
3739
"devDependencies": {
3840
"@types/jest": "^24.0.0",

‎prettier.config.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"printWidth": 140,
33
"tabWidth": 2,
4-
"singleQuote": true
4+
"singleQuote": true,
5+
"semi": true
56
}

‎src/components/App.tsx

+45-197
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,19 @@
1-
import React from "react";
2-
import {
3-
Dropdown,
4-
IDropdownOption,
5-
PrimaryButton,
6-
Stack,
7-
Label,
8-
mergeStyleSets
9-
} from "office-ui-fabric-react";
10-
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
11-
// import Editor from "react-simple-code-editor";
12-
// import Prism from "prismjs";
13-
// require("prismjs/components/prism-typescript");
14-
// import "./prism-modified.css";
15-
initializeIcons();
16-
17-
import * as typescript from "typescript";
18-
//const Editor = React.lazy(() => import('./Editor'));
19-
//import {Editor} from ("./Editor");
20-
declare const ts: typeof typescript;
21-
22-
const options: IDropdownOption[] = [
23-
{ key: "12", text: "12" },
24-
{ key: "14", text: "14" },
25-
{ key: "16", text: "16" },
26-
{ key: "18", text: "18" },
27-
{ key: "20", text: "20" },
28-
{ key: "22", text: "22" },
29-
{ key: "24", text: "24" }
30-
];
31-
32-
const initialCode = `const text: string = "hello world";
33-
ReactDOM.render(<div>{text}</div>, document.getElementById('output'));`;
1+
import React from 'react';
2+
import { PrimaryButton, Stack, Label, mergeStyleSets } from 'office-ui-fabric-react';
3+
// import { ITranspileOutput } from '../transpiler/transpile.types';
344

355
const classNames = mergeStyleSets({
366
code: {
37-
fontFamily: "monospace",
7+
fontFamily: 'monospace',
388
fontSize: 13,
39-
lineHeight: "1.5"
9+
lineHeight: '1.5'
4010
},
4111
renderSection: {
42-
backgroundColor: "red"
12+
backgroundColor: 'red'
4313
},
4414
error: {
45-
backgroundColor: "#FEF0F0",
46-
color: "#FF5E79"
15+
backgroundColor: '#FEF0F0',
16+
color: '#FF5E79'
4717
},
4818
editor: {
4919
width: 800,
@@ -55,183 +25,61 @@ interface IAppState {
5525
code: string;
5626
JScode: string;
5727
error?: string;
58-
options: IDropdownOption[];
5928
fontSize?: string;
6029
editorHidden?: boolean;
61-
editor: any;
30+
editor?: JSX.Element;
6231
currentTime: number;
6332
}
6433

6534
export class App extends React.Component {
6635
public state: IAppState = {
67-
code: "",
68-
JScode: "",
69-
options: options,
36+
code: '',
37+
JScode: '',
7038
editor: undefined,
7139
currentTime: 0,
7240
editorHidden: true
7341
};
7442

75-
private timer: any;
76-
77-
private changeFontSize = (
78-
event: React.FormEvent,
79-
option: IDropdownOption | undefined,
80-
index: number | undefined
81-
): void => {
82-
if (typeof index != "undefined") {
83-
this.setState({ fontSize: parseInt(options[index].key as string) });
84-
}
85-
};
86-
87-
private buttonClicked = (): void => {
88-
if (this.state.editorHidden) {
89-
import("./Editor").then((editor) => {
90-
let TSeditor = (
91-
<div>
92-
<div>
93-
<Label>Typescript + React editor</Label>
94-
</div>
95-
{/* <div className={classNames.editor} id="editor" hidden = {this.state.editorHidden}/> */}
96-
<React.Suspense fallback={<div>Loading...</div>}>
97-
<editor.Editor
98-
width = {800}
99-
height = {500}
100-
code = ''
101-
language = "typescript"
102-
/>
103-
</React.Suspense>
104-
</div>
105-
)
106-
this.setState({editorHidden: false, editor: TSeditor});
107-
});
108-
} else {
109-
this.setState({editor: null, editorHidden: true})
110-
}
111-
}
112-
113-
decrementTimeRemaining = () => {
114-
if (this.state.currentTime < 1) {
115-
this.setState({
116-
currentTime: this.state.currentTime + 1
117-
});
118-
} else {
119-
if (this.state.editor != undefined) {
120-
let editorText = this.state.editor.getValue1();
121-
if (this.state.editor !== undefined) {
122-
if (editorText != this.state.code) {
123-
this.updateCodeTS(editorText);
124-
}
125-
}
126-
clearInterval(this.timer!);
127-
this.resetTimer();
128-
}
129-
}
130-
};
131-
132-
private resetTimer = () => {
133-
this.setState({
134-
currentTime: 0
135-
});
136-
this.timer = setInterval(() => {
137-
this.decrementTimeRemaining();
138-
}, 1000);
139-
};
140-
141-
public componentDidMount() {
142-
this.resetTimer();
143-
//this.createEditor();
144-
this.updateCodeTS(initialCode);
145-
}
146-
147-
public componentDidUpdate(prevProps: {}, prevState: IAppState) {
148-
if (prevState.code != this.state.code) {
149-
this._eval();
150-
}
151-
}
152-
153-
private updateCodeTS = (code: string) => {
154-
try {
155-
const compilerOptions = { module: ts.ModuleKind.None };
156-
const transpiled = ts.transpileModule(code, {
157-
compilerOptions: compilerOptions,
158-
moduleName: "myMod"
159-
});
160-
this.setState({
161-
code: code,
162-
JScode: transpiled,
163-
error: undefined
164-
});
165-
console.log(transpiled.outputText);
166-
} catch (ex) {
167-
this.setState({
168-
code: code,
169-
error: ex.message
170-
});
171-
}
172-
};
173-
174-
private _eval = () => {
175-
try {
176-
eval(this.state.JScode);
177-
this.setState({ error: undefined });
178-
} catch (ex) {
179-
this.setState({ error: ex.message });
180-
}
181-
};
182-
183-
render() {
184-
let dropdown = (
185-
<Stack horizontal padding={10} gap={10}>
186-
<Stack.Item>
187-
<Label>Select code font size:</Label>
188-
</Stack.Item>
189-
<Stack.Item>
190-
<Dropdown
191-
options={this.state.options}
192-
defaultSelectedKey="18"
193-
onChange={this.changeFontSize}
194-
styles={{ dropdown: { width: 100 } }}
195-
/>
196-
</Stack.Item>
197-
</Stack>
198-
);
199-
200-
let TSeditor = (
201-
<div>
202-
<div>
203-
<Label>Typescript + React editor</Label>
204-
</div>
205-
{/* <div className={classNames.editor} id="editor" hidden = {this.state.editorHidden}/> */}
206-
<React.Suspense fallback={<div>Loading...</div>}>
207-
{/* <Editor
208-
width = {800}
209-
height = {500}
210-
code = ''
211-
language = "typescript"
212-
/> */}
213-
</React.Suspense>
214-
</div>
215-
);
216-
217-
let editor = (
218-
<Stack style={{ backgroundColor: "lightgray" }} gap={4}>
219-
<Stack.Item>{dropdown}</Stack.Item>
220-
<Stack.Item>{TSeditor}</Stack.Item>
221-
<Stack.Item>
222-
{this.state.error !== undefined && (
223-
<Label className={classNames.error}>`{this.state.error}`</Label>
224-
)}
225-
</Stack.Item>
43+
public render() {
44+
const editor = (
45+
<Stack style={{ backgroundColor: 'lightgray' }} gap={4}>
46+
{!this.state.editorHidden && this.state.editor}
47+
{this.state.error !== undefined && <Label className={classNames.error}>`{this.state.error}`</Label>}
22648
</Stack>
22749
);
22850

22951
return (
23052
<div>
231-
{<PrimaryButton onClick={this.buttonClicked} />}
232-
{/* {!this.state.editorHidden && editor} */}
233-
{this.state.editor}
53+
<PrimaryButton onClick={this.buttonClicked} />
54+
{!this.state.editorHidden && editor}
23455
</div>
23556
);
23657
}
58+
59+
private onChange = (newVal: string) => {
60+
console.log('on change test', newVal);
61+
};
62+
63+
private buttonClicked = (): void => {
64+
if (this.state.editorHidden) {
65+
// require.ensure([], require => {
66+
// const Editor = require('../components/Editor').Editor;
67+
// this.setState({
68+
// editor: (
69+
// <div>
70+
// <div>
71+
// <Label>Typescript + React editor</Label>
72+
// </div>
73+
// <React.Suspense fallback={<div>Loading...</div>}>
74+
// <Editor width={800} height={500} code="dfgxsfgfsgfgssfgs" language="typescript" onChange={this.onChange} />
75+
// </React.Suspense>
76+
// </div>
77+
// ),
78+
// editorHidden: false
79+
// });
80+
// });
81+
} else {
82+
this.setState({ editor: null, editorHidden: true });
83+
}
84+
};
23785
}

‎src/components/Editor.tsx

+27-51
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,44 @@
1-
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
2-
import React from "react";
3-
import { IEditorProps } from "./Editor.types";
4-
5-
interface IEditorState {
6-
editor: any,
7-
codeValue: string
8-
}
1+
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
2+
import React from 'react';
3+
import { IEditorProps } from './Editor.types';
94

105
export class Editor extends React.Component<IEditorProps> {
6+
private editor: monaco.editor.IStandaloneCodeEditor | undefined;
7+
private editorRef = React.createRef<HTMLDivElement>();
118

12-
public state: IEditorState = {
13-
editor: undefined,
14-
codeValue: ""
9+
public componentDidMount() {
10+
this._createEditor();
1511
}
16-
constructor(props: any) {
17-
super(props);
1812

13+
public componentWillUnmount() {
14+
this._closeEditor();
1915
}
2016

21-
componentDidMount() {
22-
this.createEditor();
23-
this.setState({codeVal: this.props.code})
24-
}
17+
public render() {
18+
const { width, height } = this.props;
2519

26-
componentWillUnmount() {
27-
this.closeEditor();
28-
}
20+
const style = {
21+
width: width,
22+
height: height
23+
};
2924

30-
componentDidUpdate(): string {
31-
if (this.props.code != this.state.codeValue) {
32-
this.state.codeValue = this.props.code;
33-
if (this.state.editor) {
34-
this.state.editor.setValue(this.state.codeValue);
35-
}
36-
}
37-
console.log("upd");
38-
return this.state.codeValue;
25+
return <div style={style} ref={this.editorRef} />;
3926
}
4027

28+
private _createEditor() {
29+
this.editor = monaco.editor.create(this.editorRef.current!, {
30+
value: this.props.code,
31+
language: this.props.language
32+
});
4133

42-
createEditor() {
43-
this.setState({editor: monaco.editor.create(
44-
document.getElementById("editor") as HTMLElement,
45-
{
46-
value: this.props.code,
47-
language: this.props.language
48-
}
49-
)})
50-
console.log(this.state.editor)
34+
this.editor.onDidChangeModelContent(event => {
35+
this.props.onChange(this.editor!.getValue());
36+
});
5137
}
5238

53-
closeEditor() {
54-
if (this.state.editor) {
55-
this.setState({editor: null});
56-
this.state.editor.dispose();
39+
private _closeEditor() {
40+
if (this.editor) {
41+
this.editor.dispose();
5742
}
5843
}
59-
60-
render() {
61-
const { width, height } = this.props;
62-
const style = {
63-
width: width,
64-
height: height
65-
};
66-
return <div style={style} id="editor" />;
67-
}
6844
}

0 commit comments

Comments
 (0)