1
00:00:00,860 --> 00:00:05,240
Let's make sure that we can set a value inside the editor and also eventually get some text out of it

2
00:00:05,240 --> 00:00:05,750
as well.

3
00:00:06,080 --> 00:00:10,370
So naturally, as soon as the user starts writing code inside there, we need to detect that and we

4
00:00:10,370 --> 00:00:14,060
need to get that value out and eventually try to bundle it and whatever else.

5
00:00:15,000 --> 00:00:19,950
OK, so the first we want to focus on is how we can somehow get a value into the ed. How do we kind

6
00:00:19,950 --> 00:00:21,060
of show some code inside there?

7
00:00:21,060 --> 00:00:27,780
If we have some code already when we create the ED itself, what we can add in a value prop this thing,

8
00:00:28,410 --> 00:00:31,860
we can send it to a string and then provide whatever code we want to show in there.

9
00:00:31,860 --> 00:00:35,130
By default, maybe const eight equals one or whatever else.

10
00:00:36,070 --> 00:00:36,910
It's going to save that.

11
00:00:37,960 --> 00:00:42,730
Look back over and there we go, there's our default code now, there's a little gotcha here, something

12
00:00:42,730 --> 00:00:47,360
that's just a little bit tricky if we were making a text area or a text input.

13
00:00:47,860 --> 00:00:53,140
Remember, the value prop is essentially saying this is exactly what the value of that text input should

14
00:00:53,140 --> 00:00:54,570
be at all times.

15
00:00:55,120 --> 00:00:58,100
And so you might think that is how this Monaco editor works as well.

16
00:00:58,150 --> 00:01:04,709
But it's not a much better or more descriptive name for this prop would be initial value.

17
00:01:04,750 --> 00:01:05,910
That's what this really is.

18
00:01:06,160 --> 00:01:09,730
They don't call it initial value, but it really is an initial value.

19
00:01:10,130 --> 00:01:15,880
The value prop is only used to initial initialize the value inside the editor after it is initialized,

20
00:01:15,880 --> 00:01:19,660
after it gets set up and is initially displayed inside the editor, that is it.

21
00:01:19,840 --> 00:01:21,690
Value does not get used anymore.

22
00:01:21,730 --> 00:01:24,100
You can almost imagine it falls off the face of the earth.

23
00:01:24,790 --> 00:01:30,910
So again, a much better name for this prop would have been initial value to just keep that in mind.

24
00:01:32,660 --> 00:01:38,390
And naturally, we probably don't want to always hard code the initial value or the editor instead we

25
00:01:38,390 --> 00:01:41,840
might want to receive this initial value as a prop to our component.

26
00:01:42,530 --> 00:01:47,090
Let's define an interface to describe all the props that our component is going to receive.

27
00:01:47,540 --> 00:01:52,430
We're going to say that it's going to receive some kind of initial value prop will then take that and

28
00:01:52,430 --> 00:01:54,260
provide it to this value prop.

29
00:01:55,570 --> 00:02:00,580
So at the very top, I'm going to add an interface code editor props.

30
00:02:01,750 --> 00:02:07,750
I'm going to say that if you want to show our code editor component, you must provide an initial value

31
00:02:07,750 --> 00:02:08,800
and that must be a string.

32
00:02:10,740 --> 00:02:16,680
And then going to annotate the type of art component right here, so I'm going to put on a Colen react

33
00:02:16,690 --> 00:02:22,080
dot functional component or F.C. and then inside of some angle brackets, I'll put in code.

34
00:02:23,030 --> 00:02:29,600
Ed, props, so just a little bit of typescript here, this is telling our typescript compiler that

35
00:02:29,600 --> 00:02:36,170
we are going to provide or assigned to code editor a react component that is going to receive any props

36
00:02:36,170 --> 00:02:37,640
that matches this interface.

37
00:02:38,600 --> 00:02:46,220
So we cannot receive that initial value prop and then we're going to pass it directly through to value.

38
00:02:50,190 --> 00:02:50,780
And that's it.

39
00:02:52,090 --> 00:02:56,470
Before we try to test this out instead of a browser, I'm going to go back over to my indexed TSX file

40
00:02:57,160 --> 00:02:58,510
back inside of our app component.

41
00:02:58,540 --> 00:02:59,770
Here's the code editor.

42
00:02:59,920 --> 00:03:03,400
We're now getting an air from it because we need to provide an initial value property.

43
00:03:03,940 --> 00:03:05,590
The back over here we can now put in.

44
00:03:07,170 --> 00:03:10,650
An initial value of whatever you want to put in.

45
00:03:12,610 --> 00:03:13,690
We'll save that as well.

46
00:03:14,590 --> 00:03:18,670
Now, if we refresh, yep, there is our initialised code editor.

47
00:03:19,700 --> 00:03:25,490
OK, Alex, good, what we are now able to put in some initial value to the editor now, the next obvious

48
00:03:25,490 --> 00:03:29,990
thing we need to do is make sure that we detect any time a user changes the value inside the editor.

49
00:03:30,440 --> 00:03:34,970
And whenever they do, we're probably going to want to maybe call some callback that is provided to

50
00:03:34,970 --> 00:03:39,530
our component to tell the app that the user just changed some code or something similar to that.

51
00:03:39,990 --> 00:03:41,500
We'll take care of that step in just a moment.