Oni: Feature - Preview: Markdown preview

[bryphe]

A feature that would be really helpful for me (in other words, a feature that makes me jump to VSCode...) is live markdown preview.

A few things need to be considered for this:
1) What is the entry point?
2) How do we implement it?

In terms of implementation, it should be relatively straightforward to expose the UI to a plugin as a 'layer'. We could potentially render this 'layer' over a buffer. This way, we could open a separate buffer of filetype=preview, and just render an electron window of the rendered markdown. This allows us to use the window navigation present in VIM.

Another option would be to just manage the window outside of VIM. The challenge with this is that the window navigation needs to be coordinated with Neovim.

[Bretley]

Are there tools out there that have general case document rendering? Doing it live for markdown might be a bit harder, but having pdf viewers available (I use LaTex for everything), as well as other types of text that gets converted into some graphic filetype would be extremely useful

[bryphe]

Actually, markdown rendering is really easy because there are some great javascript libraries that handle this!

I built a prototype for this in a previous project: https://github.com/extr0py/vim-electrify-markdown-preview

This library in particular is great : https://github.com/chjj/marked and allows options for github flavored markdown. (I also included another library called Mermaid, which allows diagram rendering from text).

The main use case for this feature for me is so that I can see my changes live as I change README.MD/ROADMAP.MD, otherwise I need to round-trip through a pull request to see my changes (or open VSCode), but of those options feel sloppy to me :)

I think LaTex might be a bit harder from a cross-platform perspective, just because I believe the build tools are more of a pain to install in Windows. It would be awesome to have that as another plugin too though - I know a common case for Emacs is to draft and show text in LaTex immediately.

[Bretley]

Not exactly what you're looking for, but if we can integrate a pdf viewer that supports auto-reloading, this seems pretty sweet

[Bretley]

Well, as per your suggestion, I'm diving in headfirst. Is there an easy way to get an idea for the structure of the project besides combing source? I just want a hierarchy of what's attached to what and how things are subdivided with windows etc.

I think if we've got individual windows (buffers technically, i suppose) we could split one of those or something else, otherwise this will be a real pain

[bryphe]

Awesome! Glad you're diving in :)

In terms of this - my hope was we could reuse the existing javascript / typescript plugin infrastructure for this. So basically it would work as follows:

• Create a copy of oni\vim\core\oni-plugin-tslint
• Rename it to something like oni-plugin-tslint -> oni-plugin-markdown
• Update the package.json - set the debug flag to true temporarily - this will pop open the debug window and let you put breakpoints and debug
• Create a browser window to do to the rendering - you can use electron APIs for this

There's a lot of "plumbing" for this, though, to set everything up - so something that is more changing source code might be more interesting. Some of the difficulty: easy ones might be worth looking at:
https://github.com/extr0py/oni/labels/difficulty%3A%20easy

This issue might be a good one to try: https://github.com/extr0py/oni/issues/195

[Bretley]

Alright, having taken on a bit more of the codebase I'm feeling motivated.

What exactly is the boilerplate like for this? I've gone and made a new plugin and changed package.json and a basic index.js

What do I do to get something to show up? I'm without the console unfortunately, but I can't get a new BrowserWindow or anything, which leads me to think that I'm missing some middleman extras

[TalAmuyal]

I would like to give this a try.

@Bretley, did you continue working on it?
If you are interested we can co-develop this feature.

@bryphe
By What is the entry point? do you mean What is the trigger for opening the preview section?

I would like to have (and thus propose to implement):

• Live rendering to HTML + CSS (using an external project).
• Markdown-flavor selection.
• Configurations.
  
  
  
  • Font.
  
  
  • Text-size.
  
  
  • Default Markdown-flavor
  
  
• Automatic coordination between preview-pane and source-buffer.
• Read-only & no Vimability (simpler without, and can be added later on).

• Auto-opening/closing the preview-pane (pseudo-code):

  function markdownPreviewTrigger() {
      if (fileTypeIsMarkdown && userConfig.allowMarkdownPreview) {
          openMarkdownPreview()
      }
  }
  
  OnFileOpen.register(markdownPreviewTrigger)
  

• Toggling key-binding option for opening/closing the preview-pane.

References to consult with before implementing:

• https://github.com/extr0py/vim-electrify-markdown-preview
• https://github.com/chjj/marked
• https://github.com/onivim/oni/pull/124
• https://github.com/onivim/oni/pull/637
• https://github.com/onivim/oni/issues/362
• https://github.com/onivim/oni/pull/622

@bryphe, what do you think?

[bryphe]

I would like to give this a try.

Awesome! 😄 Keep me posted and let me know if you need help getting started. I'm excited about this feature because it will be one of the first that really "breaks free of terminal limitations".

Your list looks great. I like the idea of auto-opening the preview pane, this would be very convenient. I agree with having it be read-only + no vimability for now - I think that will be easy to implement once some of the other new features have been implemented (like the file explorer and embedded browser).

Here's a few other items to help get you started:

• I was messing around with a prototype of this in bryphe/proto/markdown-preview. I don't think it is in great shape, but this part of the code might give you ideas: https://github.com/onivim/oni/tree/bryphe/proto/markdown-preview/vim/core/oni-markdown-preview/src
• Also, the events that we get from Oni - like Oni.editors.allEditors.onBufferEnter would be helpful for implementing your markdown preview trigger. It's essentially like your OnFileOpen block. The LanguageManager has an example - it also hooks that event to try and send a textDocument/didOpen notification to the language server.
• For key bindings, https://github.com/onivim/oni/blob/master/browser/src/Input/KeyBindings.ts and https://github.com/onivim/oni/blob/master/browser/src/Services/Commands.ts are good places to look.

I'm also starting to look at implementing the file explorer UI, so that might help us in terms of creating the markdown preview pane. I'll keep you in the loop on that.

Appreciate your help, thanks @TalAmuyal !

[bryphe]

Oh ya, another thing I just remembered...

You can sort of see a placeholder for creating additional panes / editor experiences by running this in the developer console:

Oni.windows.split(0, null)

[TalAmuyal]

Made a project on my fork, so the progress can be tracked as individual sub-tasks.

[bryphe]

Oh, that's really cool - nice way to organize the tasks & work. I need to explore that project functionality some more..

[hkupty]

Just a tip: https://statuscode.ch/2017/11/from-markdown-to-rce-in-atom/

[TalAmuyal]

Thanks for the tip!
An interesting read - embedded dompurify into the previewer.