search

NotePlan / plugins

The main NotePlan repository, which contains the source code for all NotePlan plugins. If a release entry has been created, it will be available for installation from within NotePlan application.
MIT License
165 stars 57 forks source link

Add HTML rendering of markdown notes #208

Open dwertheimer opened 2 years ago

dwertheimer commented 2 years ago

A plugin should be able to create a React page inside a webview that can allow data in/out

Feels like Phase0 could be a webview that renders ReadOnly HTML (in a document or a split), ideally with an API that you can feed markdown to and it will render the HTML. This would have utility for reports and the like.

Then, making that WebView read/write is the goal. Pasting conversation from Discord:

dwertheimer — Yesterday at 1:57 PM @Eduard I was thinking about your React/HTML in a webview pane idea and was thinking this would be a great solution to one of NP's biggest missing features -- tables. Would be awesome if you could have a MD doc underneath and a webview with the MD TABLE rendered in HTML (and editable in React/HTML with data passing back to the underlying NP Markdown doc). Typora does a pretty nice job of this (obviously would work differently in NP, but you get the idea). table

Eduard — Today at 9:00 AM Tables are possible with Swift, just a bit harder. But yes, a web view could solve that problem definitely faster. We have to think about the plugin structure first, however. How does a plugin provide the UI exactly. Maybe we could run a reactJS app inside a WebView simply. Still we need to give that react js app the existing API to work with Somehow dwertheimer — Today at 9:03 AM This is @codedungeon’s world ^^ NotePlan probably has to run a little web server Eduard — Today at 9:21 AM Not sure about that if its a ReactJS app, which is running no backend, only frontend, but I have no experience yet codedungeon — Today at 9:30 AM Q: What is the data source? Q: Do you want to have read/write access to data?

dwertheimer commented 2 years ago

My instinct is that (a) a local webserver is going to be necessary to allow for interactions, and (b) that the webserver could provide the bridge from the React App to the Noteplan APIs. Before I get too far out over my skis, I will now turn this over to @mikeerickson for comment

mikeerickson commented 2 years ago

Just for clarity, is the objective of this webView to be able to display HTML (and supported JS) so that we can have more dynamic notes?

I assume you want to have an embedded webview within a given note (to display things like tables). Or are you looking to have a new window (pane) that will be comprised of ALL HTML (no other NotePlan note features)?

dwertheimer commented 2 years ago

This is a good question. I was thinking of it as an entire window/pane webview, but the embed is a cool idea. I don’t know which is an easier starting point.

mikeerickson commented 2 years ago

@EduardMe Can you embed a webView container in a NotePlan, or will it only be available as a self-contained note (full webView).

One thing that needs to be considered with an embed is how you will handle events.

With a standalone note which is really a full webView, then it will have access to the window.event as we can in a normal browser window.

jgclark commented 2 years ago

This discussion so far seems to be about implementation questions, before we're clear on the requirement. Is the requirement about displaying some sort of HTML-based container in the NotePlan interface? Or is it more generally about displaying some sort of panels in the NotePlan interface? Are they to be user-updatable, or simply through plugins? Can one panel be updatable by multiple plugins? And that's before we get onto more fine-grain details about number, position etc. etc.

mikeerickson commented 2 years ago

I have no idea what the requirements are, that is what I asked?

mikeerickson commented 2 years ago

@dwertheimer pinged me on Discord asking for my input, requested that I come to this discussion and so I asked the question of what the goal was with this subject.

weyert commented 2 years ago

I am curious how the caret / cursor management would work between the web view and the note editor itself. To me, this doesn't sound like a straight forward thing. Maybe I am misunderstanding the idea

jgclark commented 2 years ago

@weyert I don't think we've specified this (or anything about this in detail). My instinct is that the panel with HTML elements is ready-only, at least at the start.

EduardMe commented 2 years ago

To clarify a few things, the idea was prompted by the split view implementation. I was always wondering where to put the WebView in the window. We discussed this in the past and came up with a few panels inside the current note editor, but using a split view, we can simply put a full WebView in it (side-by-side with the editor or even enable closing the editor), which loads a locally stored plugin that is providing HTML/CSS to show a UI.

This local plugin could be a ReactJS app. So it would allow for users to click on things, enter data, etc. (so not read-only). Disclaimer: I haven't tried that yet, so I'm not 100% sure it can load a ReactJS app or simple HTML/CSS. But as far as I know, a real webserver would also just "serve" the files and the rest happens in Javascript in the browser. So I hope the same applies to a WebView.

I would try to expose the WebView with the same API we are using right now. The cursor can be inside the WebView, in this case the editor would lose cursor focus until you switch back by clicking into the text.

Here's the Apple reference (WKWebKit): https://developer.apple.com/documentation/webkit/wkwebview/1414973-loadfileurl

jgclark commented 2 years ago

Part of this will come with #273.

jgclark commented 1 year ago

Marking this as high priority, as it enables new features. It's also been a topic that we've been returning to for over a year.

dwertheimer commented 1 year ago

@jgclark just to be clear, since we do have some rudimentary HTML now in a window, this task is focused on doing it in a split view? Maybe retitle it’s as such.

On Wed, Nov 30, 2022 at 9:13 AM Jonathan Clark @.***> wrote:

Marking this as high priority, as it enables new features. It's also been a topic that we've been returning to for over a year.

— Reply to this email directly, view it on GitHub https://github.com/NotePlan/plugins/issues/208#issuecomment-1332487408, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACEI6VBURIFIZFWJUPY7G5LWK6DM3ANCNFSM5MDADYWA . You are receiving this because you were mentioned.Message ID: @.***>

jgclark commented 1 year ago

Re-titled to focus on the single largest missing part of this (in my opinion, and I think our collective opinion from many dev meetings). Namely being able to pass markdown (and some extensions to it) to an API and NP app will provide an HTML view of it. Like NP already does for web publish feature, but now internally in the app.

Ideally too there can be a way of specifying additional extensions to the markdown. For example, the Mermaid system for diagrams, or Tables for ... tables.