File tree Expand file tree Collapse file tree 2 files changed +7
-20
lines changed Expand file tree Collapse file tree 2 files changed +7
-20
lines changed Original file line number Diff line number Diff line change @@ -16,12 +16,14 @@ body {
16
16
}
17
17
18
18
.App-editor {
19
- height : 220 px ;
19
+ height : 260 px ;
20
20
overflow : auto;
21
+ margin-top : 50px !important ;
21
22
}
22
23
23
24
.App-tools {
24
25
margin-top : 5px ;
26
+ margin-bottom : 50px !important ;
25
27
}
26
28
27
29
.App-tools ,
Original file line number Diff line number Diff line change @@ -8,23 +8,8 @@ import TextareaCodeEditor from '../';
8
8
import MDStr from '../README.md' ;
9
9
import './App.css' ;
10
10
11
- const codeStr = `import React from "react";
12
- import CodeEditor from '@uiw/react-textarea-code-editor';
13
- import ReactDOM from "react-dom";
14
-
15
- function App() {
16
- return (
17
- <CodeEditor
18
- value="console.log('Hello World')"
19
- language="js"
20
- />
21
- );
22
- }
23
-
24
- ReactDOM.render(<App />, document.getElementById("root"));` ;
25
-
26
11
const App : React . FC = ( ) => {
27
- const [ value , setValue ] = useState ( codeStr ) ;
12
+ const [ value , setValue ] = useState ( '' ) ;
28
13
const [ language , setLanguage ] = useState ( 'jsx' ) ;
29
14
useEffect ( ( ) => {
30
15
if ( language ) {
@@ -43,10 +28,10 @@ const App: React.FC = () => {
43
28
< h1 className = "App-title" > React Textarea Code Editor</ h1 >
44
29
< div className = "App-editor" >
45
30
< TextareaCodeEditor
46
- language = { language }
47
- value = { value }
48
- style = { { backgroundColor : '#fafafa' , outline : 0 } }
49
31
autoFocus
32
+ value = { value }
33
+ language = { language }
34
+ style = { { backgroundColor : '#fafafa' , outline : 0 , fontSize : 14 } }
50
35
onChange = { ( evn ) => setValue ( evn . target . value ) }
51
36
/>
52
37
</ div >
You can’t perform that action at this time.
0 commit comments