We need to add in some code to decide whether or not a click event is inside of this editor or outside
of it, and then depending upon whether or not it is inside or outside, we are either going to close
or not close the editor.
So let's first just figure out how we can figure out what an element a user has actually clicked on.
But to do so, back inside my editor, I'm going to find the listener inside of our U.S. function.
Remember, this thing will be called with some kind of event object.
We need to apply a type invitation to it.
We can either try to go look up some documentation or remember the little shortcut to this.
We can take a look at add event listeners right here, mouse over it and it will tell us the type of
event that is going to be provided to our event listener in this case.
It's going to be an event of type mouse event.
So I can put on an annotation right here of mouse event.
OK, so then inside of our listener, I'm going to add in a council log for Event Dot Target, I'm going
to save this, go back over to a quick refresh and then I'm going to click anywhere on the screen.
So in this case, my target or the element that I just clicked on was the overall HTML document, if
I do another click and click on say header right here, I'll get an H1 of header, which means I just
clicked on the H1.
And then finally, if I click inside of the text cell right now, I'll get a even target of text area,
which means, of course, I just clicked on the text area so we can use that event target to figure
out exactly what element a user just clicked on.
So let's kind of step one step to remember if a user clicks inside of the markdown, Ed, we do not
want to attempt to close the ED.
So saying that in a little bit more general fashion, really, if a user clicks inside this device right
here, I don't want to close the ED.
So to figure out whether or not a user is clicking inside this div, we can add on a ref to it.
We can then take that reference and determine whether or not event target is an element inside of that
div using a built in function inside the browser.
So again, our solution here is going to be comparing whether or not that element just or whether or
not the element the user just clicked on is inside of that div and that's pretty much it.
If it is inside, we're not going to flip the value of editing.
Otherwise, if it is outside, we will update editing to be false.
OK, so the first thing we have to do is import our use Red Hook from react at the top.
And then going to create a new raft that I will call simply ref.
I'm going to give it a type annotation of HTML.
Div element.
Or No.
And then a default starting value of No.
I'll then assign that ref to this d'Hiv right here.
And then inside of our event, listener.
I'm going to add on if statement.
So inside, I'm going to first just do a little check and make sure that we actually have our ref pointing
at that, d'Hiv, in other words, are going to make sure that refought current is defined.
I'll just put in a simple refought current.
I'm then going to make sure that event target is defined and that we actually clicked on an element
that does exist.
Well, then add in our comparison and make sure or kind of decide whether or not the thing that was
just clicked on is or isn't inside of that div, so that comparison can be done with a ref.
That current contains event dot target.
We're going to immediately get an error message from that.
That is because the two types here are not quite appropriate.
So event at Target is of type, event target and contains expects to be called with something of type,
either node or null.
This is something that's just kind of an oddity in how the tight definitions have been set up inside
your browser.
So to fix this up is going to tell TypeScript, you know, what event or target is going to be a node
element or essentially an HTML node.
It's going to just put in as node like so so pretty much just tell typescript, hey, don't sweat it.
All the stuff pretty much just makes sense.
OK, then inside the statement, I'm going to add in a blog.
That says element.
Looked on is inside.
Ed and I'll do a return right after that, and then otherwise I'll do a console log of element clicked
is not inside Ed.
And then going to say this, let's go back over into a quick test.
So first, I'm going to toggle into edit mode.
And then going to click inside the editor and it says very clearly, yep, we just clicked on something
inside the editor, I can click all around inside of here.
Everything says, yep, we are definitely clicking inside of the editor right now.
And then eventually, if I click outside, I'm told Kallick is not inside the ED.
And that's pretty much it.
You'll notice that by putting in that return statement as well, pretty much everything works as expected.
So now if I click inside, I can click around inside of here as much as I want.
As soon as I click out the thing.
This thing closes and we go back over to preview mode.
That's pretty much it.
That's all we really need.
So I'm going to remove those console logs.
And I think we're pretty much all set.
So let's take a pause right here and move on with some more implementation in just a moment.