1
00:00:01,070 --> 00:00:05,630
There is one last very small thing I want to add to this text sell right now, when we are showing it

2
00:00:05,630 --> 00:00:10,730
in the sort of preview mode, this thing expands to just fill up the entire screen or essentially as

3
00:00:10,730 --> 00:00:12,170
much space as it possibly can.

4
00:00:12,560 --> 00:00:17,330
If we think back to our mark mockups over here, we had said that we wanted this kind of nice outline

5
00:00:17,330 --> 00:00:20,060
around it and maybe a little bit of margin on there as well.

6
00:00:20,480 --> 00:00:23,870
So let's just add on one or two class names to get just a little bit better styling.

7
00:00:24,290 --> 00:00:25,370
Back inside my editor.

8
00:00:25,470 --> 00:00:27,950
I'm at the very bottom of our text editor component.

9
00:00:28,290 --> 00:00:33,020
Here's where we are displaying the preview version of the editor to the existing div.

10
00:00:33,020 --> 00:00:34,970
I'm going to add on a class name of card.

11
00:00:35,510 --> 00:00:37,310
I'll then add in a new div inside of it.

12
00:00:40,240 --> 00:00:46,540
With a class name of Card Dasht content, so these are some class names that are wired up inside of

13
00:00:46,540 --> 00:00:49,480
Buruma, which you will recall we are using inside of our project.

14
00:00:50,020 --> 00:00:54,700
So these will just give us a nice looking kind of card thing where we get that nice outline.

15
00:00:54,880 --> 00:00:56,860
We've also got a lot of margin around it as well.

16
00:00:57,190 --> 00:01:01,470
I can still click anywhere inside of here and see the appropriate result.

17
00:01:01,480 --> 00:01:03,690
I see this turn into our actual markdown editor.

18
00:01:04,330 --> 00:01:06,430
OK, so definitely a lot better styling, I would say.

19
00:01:06,850 --> 00:01:08,030
Well, this looks pretty good.

20
00:01:08,050 --> 00:01:11,550
So now let's take a pause on this component and move on in just a moment.