Editor live preview

[vogloblinsky]

Is your feature request related to a problem? Please describe.
I'm alwasy frustated while writing a blog post with the preview. I would like to see it live.

Describe the solution you'd like
Having on desktop one column with text editor on the left, and live preview on the right

Describe alternatives you've considered
A browser extension, but a little bit tricky.

[Zhao-Andy]

Thanks for the idea. It would require a big overhaul if we did agree to go with something like a live preview.

One idea I had was adding a hotkey/keyboard shortcut to preview. Might be a good compromise?

[vogloblinsky]

Yes it could. I prefer the live preview, but i understand your position with the setup/workflow you have right now.

[jessleenyc]

I created a separate issue for @Zhao-Andy's toggle suggestion: #3129

As for a live preview, we just discussed as a team and think it makes sense if someone wants to try creating an alternate editor that is a superset of our current ones. This could eventually be an editor that people chose as their default, that would include a live preview.

Some notes on performance: since the preview is rendered server side, we'd probably have the preview update every few seconds, instead of on every keystroke. We can also take a look at how VS Code handles this for inspiration.

[protiumx]

Hi guys! What about integrating an editor as a library? Take a look at https://ui.toast.com/tui-editor/. It has already all we need for a markdown editor + live preview with synchronized scrolling. The lib is heavy (~1.2mb), but as it is open source, a custom light weight version could be developed.

Meanwhile, I was thinking in droping a PR for adding keyboard shortcuts (ctrl +b, ctrl + i, etc).
I write articles first in https://typora.io/, it has a nice and clean live preview and many useful shortcuts, but the editor itself is not open source.

Looking forward to reading your comments on this.

[vogloblinsky]

+1 for tui-editor suggested by @ioprotium
I just prototyping a Chrome extension for extending the current editor. It works fine, but need to add synchronized scrolling. Tui-editor seems to have all i need, editor + live preview sync.

[saurabhdaware]

How about having basic rendering written in JS like:
we can render #, ## and other basic markdown tags in frontend and when liquid tag or any of the other character is entered we can make a request to server

[nickytonline]

You could definitely do this client-side like VS Code does or use some other markdown to HTML package to render the markdown.

The real problem is rendering liquid tags. That’s the main reason the preview is currently server-side.

[wolfiton]

+1 for tui editor and live preview editing by default it should work with an SSR(server side rendering) setup.

[cmgorton]

Hello! Thanks for your contributions here. 


We have a new process moving forward to address feature requests and especially those that have been in our repo for 1+ years without much traction. 

TLDR: we have new internal RFC process for feature requests. Any features that are more substantial and require more thought and detail will need to be discussed in forem.dev.

You can read more about our Internal RFC Process and forem.dev Discussions in this post.