Utopian-io Markdown Preview-update Controls Suggestion

Words
479
Reading
3 min
Listen
Play
9y

Components

My suggestion is regarding the markdown preview on the Utopian-io post creation page. While adding fair amounts of code snippets and images, I noticed the markdown text area began lagging more and more. After a certain point, I could write several words before they would show up in both the text area and the preview. Correct me if I am wrong, but I believe this is because the preview re-parses and updates the entire preview after any addition to the text area. If this is the case, alterations to the preview update are possible, and this has not been previously discussed, then allow me to propose a minimally invasive fix that doesn't rely on optimizations and should be good for machines of any computing power.

Proposal

My proposal is to add a button next to the "add image", "insert code", etc buttons which can disable and enable the markdown preview. With just this button though, it should also be able to force an update of the preview so the writer does not need to add something to the text area in order to update it.

Another option is to also add a manual preview-update button which could be more convenient since one would not need to enable and disable the preview constantly for checking and writing.

Coupled with either or both buttons should be a keyboard shortcut to streamline the process as much as possible. Just like with the currently available buttons, hovering over should quickly reveal the shortcut. With a keyboard shortcut, only an on/off button would be necessary because the shortcut could be used "as needed" while the button is for overarching control.

Mockups / Examples

Here are some examples of how the buttons could be implemented:

mock1.jpg


mock2.jpg

If going for both buttons, it could look like this with a tiny "M" to depict "manual" as in manual update:

mock3.jpg

Then for either or both buttons, the following little pop-up would show the keyboard shortcut.

mock4.jpg

In my opinion, the optimal choice is to have one button to turn the dynamic preview on/off as in the first two pictures, and hover a shortcut above that button for forcing an update at any time, the shortcut being anything convenient and available.

Benefits

The benefits as far as I have observed would be making the post creation process smoother and giving more control to the writer. By having a way to disable dynamic markdown preview, larger posts should not lag as much if that is due to the preview. A keyboard shortcut could also add the benefit of being able to review a change in the preview on command which could be nice in some situations. I hope this suggestion assumes correctly that the lag is caused by the preview and that it is useful. Thanks for reading.



Posted on Utopian.io - Rewarding Open Source Contributors