Feature Request: Combine Markdown and Preview Into a Single Pane

DJW

October 25, 2021 16:43

This suggestion would obviously be a BIG change, but it might be worth at least considering…

 

One problem I seem to have is that the Markdown pane and the preview pane are nearly always out of sync on longer documents. No matter what I do, whatever I’m typing on the left is almost never visible on the right, and when I scroll on the right it never seems to quite match up with the position on the left — sometimes by a little, often by a lot. (I use custom style sheets, often include raw HTML, and sometimes embedded CSS, so I realize that I'm perhaps not a typical use case, and trying to figure out how to sync those panes up would be challenging.)

 

I’d like to propose a slightly more radical approach that I think might solve this problem, and would make for a pretty cool interface that I haven’t seen done before in a Markdown editor:

 

Instead of two panes — Markdown and preview — have only a single pane. The actual block you’re currently working on would be shown in plaintext/Markdown, but all the blocks above it and below it would be rendered in preview HTML. No more trying to keep two panes in sync, because now there’s only one pane.

 

When you click into a block, it transforms from HTML to Markdown, and when the block loses focus (because you’ve clicked somewhere else or pressed escape or whatever) the block is re-rendered in HTML.

 

Undoubtedly this presents problems of its own (in that the block and everything below it would need to reflow with every focus/unfocus, and trying to figure out what’s an atomic “block” when it comes to things like tables and raw HTML elements embedded into the document), but it might be an overall easier solution than trying to keep panes in sync. And, like I said, I’ve seen lots of 2-pane Markdown editors, but I have yet to see a 1-pane editor. (Possibly for good reason :-)

 

Anyway — I just thought I would throw the idea out there. nvUltra is really, really great — it’s always my go-to writing tool for anything larger than a quick Note in macOS/iOS that needs to sync across platforms. You’ve done an amazing job with performance and rendering and custom stylesheets (of which I’ve set up several for various kinds of projects). The syncing/scrolling issue is really my only complaint, but it seems sort of intractable, and combining plaintext Markdown along with rendered Markdown into a single pane might be a solution.

0

• 

  Fletcher Penney

  October 25, 2021 17:30

  (Speaking for myself, not Brett. As always.... )

  As for blended preview/editor, I believe there is at least one app that does something like this (not sure if it was macOS, iOS, Windows, or webapp), but it is not something I am interested in.  I believe that a key feature of Markdown is that it is designed to be human read as part of the workflow.  I think there are benefits to writing and editing Markdown in plain text (with syntax highlighting as desired), but with the HTML view as a separate "pre-printing" step.  Obviously everyone has their own preferred workflow and that is fine.  And you can use the theme to fade the markup syntax into the background as much as you like...  

  I write this not to say that your suggestion is "invalid", it's just not something I am interested in, and *extremely* unlikely to be something I implement in the editor.  I don't want to give you false hope that a feature may be under consideration when there is basically no chance of it happening.

  As for the preview and synchronization -- there are two parts to this.

  1. Synchronization while typing.  This is easier, since it is obvious exactly what part of the document is being edited while you type.  I have not experienced trouble with this (outside of a few bug fixes in the past).  Of course there may be some edge cases, and the alignment isn't necessarily perfect down to the pixel (especially with varying line lengths), but when I am editing documents with the preview on, I have not noticed any issues with being unable to see what I am working on. If you have examples where this is not the case, then please send them to me to work on improvements.

  2. Synchronization while scrolling. This is a trickier problem. The other applications that I have tested (which is certainly not all of them) used a "dumb" 1:1 scrolling ratio (e.g. if the editor is scrolled 50% to the bottom, then scroll the preview 50% to the bottom.) Obviously this may give reasonable results in very simple documents, but anything remote complicated will be off. Instead, I create a map between the editor and the preview based on the structure of the document to try and keep it as accurate as possible, while not affecting scrolling performance. It generally works quite well in "normal" Markdown documents, but including raw HTML can lead to edge cases that do not work properly. But even then, the backup is to revert to the dumb 1:1 ratio, so you shouldn't be any worse off than you would be in other applications. As always, examples that don't perform well in this are welcome, but if your example includes raw HTML then there is not much I can do about that at this point. (Short of a new algorithm, which I am always open to considering if a better approach comes along.)

   

   

  Again -- please send examples of files that don't work well for you!

  0
• 

  Williper Larnloge

  August 22, 2022 01:15

  Perhaps a compromise would be to allow for Preview to replace the Editor window vs. splitting the window? I love how iA Writer allows for me to quickly toggle viewing my text in Preview mode vs. Edit mode with a keyboard shortcut. The advantage of iA's implementation is that I can keep my window narrower vs. needing a wide enough window to accommodate the occasional preview.

  2

Please sign in to leave a comment.