Huge editor update! | Devlog #3

I’ve actually done a lot on the website so far and I’ll try to explain everything as concise as possible

Features

The editor is a lot more editor-like now!

Resizable divider

Between the editor and preview, there’s now a resizable divider!

Save button

When you press save, it… saves… Why did I explain this

Unsaved changes warning

It just warns you if you had unsaved changes since last time

Linecount indicator

Actually pretty happy with the implementation of this

Issues I ran into

It’s kinda funny that if you search up an issue you’re having, someone already had the issue before you and you can just look at the solution they were given

Resizable divider resizing self

When any line of the preview exceeded the width of the preview, it would resize the preview till the point it fits properly, until eventually collapsing the textarea element entirely, I fixed this by applying min-width: 0 which prevents the parent div from resizing according to its children

Linecount not scrolling

When scrolling, the linecount didn’t follow, so I set the linecount to scroll with the textarea element using a JS property called “scrollTop”

Textarea cursor fighting divider cursor

When dragging the divider, it would flicker between 2 cursors since it would hover over the textarea element, so I had to go and fix it by making the entire window display that specific cursor so that they wouldn’t interact like this

Overall I’m happy with my progress and I’m actually finishing things up a lot faster than on my first project! Stay tuned for the next devlog! 🚀

First image is the editor (my CSS sucks 😭 )
Second image shows local storage