Welcome to Codidact Meta!
Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.
Comments on Show post preview beside the editing field rather than below
Post
Show post preview beside the editing field rather than below
Discourse forum software has a neat feature whereby the post preview appears beside the input field. The post submission form pops up as an overlay to the main view of the current thread, showing two text areas side by side - the input field and an interactive (because their Markdown offers access to <details> tags), but non-editable Each is a scrolling window where dragging one scrollbar attempts to sync up the other. It's not perfect, but it's much more pleasant for post editing.
Almost everyone on desktop uses a widescreen monitor these days with aspect ratios at or near 16:9 (citation needed) and smartphones can generally be turned to use a landscape view with a similar aspect ratio (citation needed). The standard Codidact page layout has fairly generous margins and a quite wide right-hand sidebar. On my screen, with a maximized window and the default text size, the text field is scarcely 51% of the width of the screen, and could be narrower without issue (my default text size in gVim fits 90 columns across the same space of this form at the default size, which appears to be fixed to 73 columns regardless of font size overrides).
When I'm editing a post, I don't care about the sidebar. I want to verify how my Markdown will render as easily as possible, i.e. ideally without repeatedly scrolling up and down a page (and possibly re-focusing a text field, since my scroll wheel doesn't work very well) and without switching an editor between Markdown and WYSIWYG views (Some Other editor is known for corrupting post content when one tries that).
What I propose is: on the post editing form, have the sidebar cut off at the point where the "body" form starts, and sit in its own scrolling window in the top-right. Then, have the rest of the page dedicated to the Body form / Title and Tags fields / submission buttons on the left, and preview on the right (and then of course the usual footer underneath all of that). Have the main text input field automatically expand in height as more text is added, rather than adding a scroll bar; in fact, don't add any scroll bars anywhere except for the sidebar content. (That way, the form and preview move in sync automatically when one scrolls the entire page.)
3 comment threads