1
00:00:00,750 --> 00:00:05,910
We need to add in some code to decide whether or not a click event is inside of this editor or outside

2
00:00:05,910 --> 00:00:10,050
of it, and then depending upon whether or not it is inside or outside, we are either going to close

3
00:00:10,050 --> 00:00:11,810
or not close the editor.

4
00:00:12,300 --> 00:00:16,410
So let's first just figure out how we can figure out what an element a user has actually clicked on.

5
00:00:16,900 --> 00:00:21,430
But to do so, back inside my editor, I'm going to find the listener inside of our U.S. function.

6
00:00:21,690 --> 00:00:24,510
Remember, this thing will be called with some kind of event object.

7
00:00:24,960 --> 00:00:27,090
We need to apply a type invitation to it.

8
00:00:27,390 --> 00:00:31,650
We can either try to go look up some documentation or remember the little shortcut to this.

9
00:00:31,920 --> 00:00:36,960
We can take a look at add event listeners right here, mouse over it and it will tell us the type of

10
00:00:36,960 --> 00:00:40,230
event that is going to be provided to our event listener in this case.

11
00:00:40,230 --> 00:00:42,810
It's going to be an event of type mouse event.

12
00:00:43,530 --> 00:00:46,710
So I can put on an annotation right here of mouse event.

13
00:00:48,160 --> 00:00:54,550
OK, so then inside of our listener, I'm going to add in a council log for Event Dot Target, I'm going

14
00:00:54,550 --> 00:01:00,610
to save this, go back over to a quick refresh and then I'm going to click anywhere on the screen.

15
00:01:02,350 --> 00:01:07,990
So in this case, my target or the element that I just clicked on was the overall HTML document, if

16
00:01:07,990 --> 00:01:13,210
I do another click and click on say header right here, I'll get an H1 of header, which means I just

17
00:01:13,210 --> 00:01:14,110
clicked on the H1.

18
00:01:14,500 --> 00:01:20,320
And then finally, if I click inside of the text cell right now, I'll get a even target of text area,

19
00:01:20,320 --> 00:01:25,390
which means, of course, I just clicked on the text area so we can use that event target to figure

20
00:01:25,390 --> 00:01:27,700
out exactly what element a user just clicked on.

21
00:01:28,770 --> 00:01:36,030
So let's kind of step one step to remember if a user clicks inside of the markdown, Ed, we do not

22
00:01:36,030 --> 00:01:37,710
want to attempt to close the ED.

23
00:01:38,070 --> 00:01:43,380
So saying that in a little bit more general fashion, really, if a user clicks inside this device right

24
00:01:43,380 --> 00:01:45,720
here, I don't want to close the ED.

25
00:01:46,410 --> 00:01:51,560
So to figure out whether or not a user is clicking inside this div, we can add on a ref to it.

26
00:01:51,960 --> 00:01:58,530
We can then take that reference and determine whether or not event target is an element inside of that

27
00:01:58,530 --> 00:02:01,530
div using a built in function inside the browser.

28
00:02:02,190 --> 00:02:07,470
So again, our solution here is going to be comparing whether or not that element just or whether or

29
00:02:07,470 --> 00:02:11,520
not the element the user just clicked on is inside of that div and that's pretty much it.

30
00:02:11,520 --> 00:02:14,240
If it is inside, we're not going to flip the value of editing.

31
00:02:14,250 --> 00:02:17,910
Otherwise, if it is outside, we will update editing to be false.

32
00:02:19,270 --> 00:02:24,940
OK, so the first thing we have to do is import our use Red Hook from react at the top.

33
00:02:26,390 --> 00:02:29,690
And then going to create a new raft that I will call simply ref.

34
00:02:31,180 --> 00:02:34,840
I'm going to give it a type annotation of HTML.

35
00:02:35,890 --> 00:02:37,090
Div element.

36
00:02:38,020 --> 00:02:38,980
Or No.

37
00:02:39,890 --> 00:02:42,170
And then a default starting value of No.

38
00:02:45,080 --> 00:02:47,300
I'll then assign that ref to this d'Hiv right here.

39
00:02:50,770 --> 00:02:52,480
And then inside of our event, listener.

40
00:02:53,550 --> 00:02:55,170
I'm going to add on if statement.

41
00:02:56,770 --> 00:03:02,560
So inside, I'm going to first just do a little check and make sure that we actually have our ref pointing

42
00:03:02,560 --> 00:03:05,590
at that, d'Hiv, in other words, are going to make sure that refought current is defined.

43
00:03:06,110 --> 00:03:07,930
I'll just put in a simple refought current.

44
00:03:08,780 --> 00:03:13,460
I'm then going to make sure that event target is defined and that we actually clicked on an element

45
00:03:13,460 --> 00:03:14,420
that does exist.

46
00:03:16,330 --> 00:03:20,650
Well, then add in our comparison and make sure or kind of decide whether or not the thing that was

47
00:03:20,650 --> 00:03:26,710
just clicked on is or isn't inside of that div, so that comparison can be done with a ref.

48
00:03:26,890 --> 00:03:31,100
That current contains event dot target.

49
00:03:31,990 --> 00:03:34,060
We're going to immediately get an error message from that.

50
00:03:34,280 --> 00:03:37,450
That is because the two types here are not quite appropriate.

51
00:03:37,660 --> 00:03:43,750
So event at Target is of type, event target and contains expects to be called with something of type,

52
00:03:43,750 --> 00:03:45,370
either node or null.

53
00:03:46,810 --> 00:03:51,390
This is something that's just kind of an oddity in how the tight definitions have been set up inside

54
00:03:51,410 --> 00:03:51,970
your browser.

55
00:03:52,750 --> 00:03:57,340
So to fix this up is going to tell TypeScript, you know, what event or target is going to be a node

56
00:03:57,340 --> 00:03:59,200
element or essentially an HTML node.

57
00:03:59,440 --> 00:04:04,360
It's going to just put in as node like so so pretty much just tell typescript, hey, don't sweat it.

58
00:04:04,360 --> 00:04:06,210
All the stuff pretty much just makes sense.

59
00:04:10,030 --> 00:04:12,580
OK, then inside the statement, I'm going to add in a blog.

60
00:04:13,510 --> 00:04:15,280
That says element.

61
00:04:16,430 --> 00:04:18,230
Looked on is inside.

62
00:04:19,350 --> 00:04:26,370
Ed and I'll do a return right after that, and then otherwise I'll do a console log of element clicked

63
00:04:26,580 --> 00:04:28,590
is not inside Ed.

64
00:04:30,630 --> 00:04:33,780
And then going to say this, let's go back over into a quick test.

65
00:04:34,980 --> 00:04:37,170
So first, I'm going to toggle into edit mode.

66
00:04:38,480 --> 00:04:43,190
And then going to click inside the editor and it says very clearly, yep, we just clicked on something

67
00:04:43,190 --> 00:04:45,560
inside the editor, I can click all around inside of here.

68
00:04:45,800 --> 00:04:49,250
Everything says, yep, we are definitely clicking inside of the editor right now.

69
00:04:50,630 --> 00:04:56,510
And then eventually, if I click outside, I'm told Kallick is not inside the ED.

70
00:04:58,840 --> 00:04:59,720
And that's pretty much it.

71
00:05:00,340 --> 00:05:04,390
You'll notice that by putting in that return statement as well, pretty much everything works as expected.

72
00:05:04,640 --> 00:05:07,780
So now if I click inside, I can click around inside of here as much as I want.

73
00:05:07,900 --> 00:05:09,280
As soon as I click out the thing.

74
00:05:09,580 --> 00:05:12,250
This thing closes and we go back over to preview mode.

75
00:05:13,210 --> 00:05:13,800
That's pretty much it.

76
00:05:13,810 --> 00:05:14,830
That's all we really need.

77
00:05:15,530 --> 00:05:17,080
So I'm going to remove those console logs.

78
00:05:18,750 --> 00:05:20,400
And I think we're pretty much all set.

79
00:05:21,930 --> 00:05:25,640
So let's take a pause right here and move on with some more implementation in just a moment.