[feature request] preview

[vovkkk]

# Full Rendered HTML Preview
Reference: http://mouapp.com/images/Mou_Screenshot_1.png
As I imagine, the Preview supposed to be:
!done 1) in the same window;
!done 2) able show/hide;
!done 3) resizable;
4) if preview is visible it should do auto update of text, no matter if text saved or not;
5) synched scrolling (see Meld for reference, [edit]: see Epiphany how it search text on webpage);
!done 6) open links in default browser;
7) ???

# Partial Rendered Inline Preview
Wolf (w-vollprecht) wrote on 2012-10-01:
I'm just compiling a list of actions @ rightclick:
Inside formula: Render Formula
Inside footnote: Show text of footnote
Inside image link: Show a thumbnail of image
Inside link: Show wether hyperlink is on- or offline, also offer a »click here to open«. Maybe one can get the thumbnail from google?
It would be even much more awesome if this happened on mouse-hover.

[Wolf Vollprecht (w-vollprecht)]

Hi vovkkk,

thanks for the feauture suggestion and also thanks for hacking something together!

I actually had something similar in mind, I will try to explain it:

My idea is, not to launch a new window and show a complete *translated* version of the document, but e.g you have a equation in your text, you rightclick the equation and then you get the context menu. You can easily hook the context menu (opening it is an event, and there is a cursor placed). Then it's possible to insert menu items into the context menu. A menu item can also be an image. So my idea is to insert an image (e.g. latex equation or thumbnail of an image) into the context menu. Alternatively I could think of another "slideout" panel, that shows equation or image thumbnail.

In my opinion, that would probably an more elegant and faster, less interrupting way to do such a preview.

One could also think about a preview-as-you-type for equations (would be not good if you have errors in the equation and so on...).

I'm currently not at home, so i have no time to make a mockup for you and such things.

Also for URL's, you could right click them and then it says: "URL Okay", "URL Bad" or something in the context menu ...

Mouapp looks interesting. I found some other interesting apps: http://markedapp.com/ looks like a cool previewer.

I am also very new to GTK development and ubuntu development and also learned by coding uberwriter :) Would be cool if you join the fun!

All the best,

Wolf

[vovkkk (vovkkk)]

> In my opinion, that would probably an more elegant and faster, less interrupting way to do such a preview.

Indeed, any double-panel interface looks bloated; and "partial" preview in context menu is a distinctive replacement.
However, full rendering has advantages:
two whitespaces on end of line makes line break — whitespaces are invisible (kinda), so it's easy to miss one;
many pictures with similar names;
tables has column alignments, such as
---- ----
   a b
---- ----
is not the same as
---- ----
a b
---- ----

These are just few examples when full rendering could be extremely useful, because you could see the whole picture, right away, without annoying surprises after export.

I don't know, perhaps we could have both approaches, kind of symbiosis. Or plugins.

Anyway, here's my todo list, things I'm going to learn and use for implementation of this feature:
* How to create new frame with content in existing window
* Synched scrolling
* Open links from webview in default browser
* Modify html file while edit document (append, remove)

No idea how many time I need to achieve these, no promises.

Oh, and I'm waiting your mock-up, Wolf, maybe it convince me that full rendering was not worth to implement ;)

Cheerio

[Wolf Vollprecht (w-vollprecht)]

Hi vovkkk,

I'm really sorry that it took me so long (holidays and stuff)

So I put up a uberwriter_inline_preview branch which demonstrates what I was thinking of (but right now it only displays a »static« equation).

Would be cool if you check it out and tell me what you think.

I was also quite impressed with what you have come up.

But I think, that maybe side to side preview - and - markdown is not good, because it wouldn't be a »live« preview. So maybe it would be cooler to press the preview button, and then all of the markdown gets replaced with the html view - releasing preview button takes you back to markdown view?

Also it would be good if the html scrolls to where the cursor was in the text ... :)

Cheers,

Wolf

[vovkkk (vovkkk)]

Hi Wolf,

I would like to see inline preview, but it seems there is no module named UberwriterInlinePreview in revision
http://bazaar.launchpad.net/~w-vollprecht/uberwriter/uberwriter_inline_preview/revision/84

> it wouldn't be a »live« preview

Could you please explain? I'm sure it is possible, not sure how though, but going to investigate.
My guess offhand: perhaps saving html in variable instead of file — modifying a variable should be easier than a file; and webview can take str instead of file. And then, in the same way as the app shows that file is unsaved, it could check changes and update preview… Probably (or even for sure) it won't be instant, but still it makes pressing a button unnecessary.

> So maybe it would be cooler to press the preview button, and then all of the markdown gets replaced with the html view - releasing preview button takes you back to markdown view?

Certainly, widget can be hidden explicitly, so we can just make an option: hide text buffer or not when preview pane appeared; because I see use cases for side by side preview and want to make it flexible.
As far as I understand, you worry about margins in text buffer and background image; yeah, I should fix these.

> Also it would be good if the html scrolls to where the cursor was in the text ... :)

Sure, that's another thing that going to be investigated.

Thanks for kind words, but I know my skills are still weak :-p

[Wolf Vollprecht (w-vollprecht)]

Hi vovkkk,

well, sorry, I forgot to `bzr add . ` ;) The files are now there, so you can see the inline preview I was talking about :)

I was just thinking that a "live" updating preview would be also a bit distracting from writing because you would always look to the side and then again on the text you're writing ...

Maybe you'd like to test out ReText (http://www.webupd8.org/2012/03/retext-30-released-text-editor-for.html) and see if you really think that live preview is good ... :)

[vovkkk (vovkkk)]

Well, I think it's better for quick check such as: type some thing (formula or url), press Menu key, see if it's okay or not, continue to type.
Full preview is more for examining an entire document with minimum efforts (such as export).
Both of looks useful.

So I'm going to make single panel preview (for now) and try to accomplish auto-scroll-thingy.
And then shall try to work with inline preview.
Do you, Wolf, have any road-map or something for inline preview?

[Wolf Vollprecht (w-vollprecht)]

Hi vovkkk, no I don't really have any roadmap other than I would like to get it done :)

I'm just compiling a list of actions @ rightclick:

Inside formula: Render Formula
Inside footnote: Show text of footnote
Inside image link: Show a thumbnail of image
Inside link: Show wether hyperlink is on- or offline, also offer a »click here to open«. Maybe one can get the thumbnail from google?

It would be even much more awesome if this happened on mouse-hover, but I don't know how to do that ...

Would be cool if both preview-types were there :)

[vovkkk (vovkkk)]

I started play with inline thingy (leave auto-scroll for future).
Right now it can show actual formulae and http status code.
So it would be nice, if you look at it and let me know if I'm doing wrong something.

[Wolf Vollprecht (w-vollprecht)]

Hi vovkkk, sorry for being so unresponsive -- lot of work to do beside uberwriter ;)

So I looked at your code and everything looks very good. I made some smaller changes to the InlinePreview and to one regex (it's not done yet) and pushed it to my Inline-Preview branch.

The bigger change I made is moving to python 3 -- I hope that's fine with you, too? Everything so far looks good. I also already upgraded my ubuntu to 12.10, which adds some very cool features (e.g. the bar with the char count on the bottom now fades out beautifully).

I don't really plan on doing much work for 12.04 anymore, because it was really annoying to juggle different CSS Files (which were quite hacky for 12.04 and now are much cleaner).

I hope that decision is also okay for you?

Wolf

PS: If you mail me your email, we could also talk via that ;)

[vovkkk (vovkkk)]

Ah, yes, I’m slow down too. I need a job, and start thinking about another project.
Of course, I will try to catch up and all.

Python3 is okay, since everybody buzzing around about it.

12.04 is not okay, since it’s LTS.
I remember when I’m used 10.04 (because there were serious issues with my video-card in newer versions of Ubuntu) and it’s really suck when you find some new interesting app, but it’s not work in 10.04.
So I definitely will try to make UW available for 12.04 if possible.

I would like to keep discussions public (it’s make easy to contribute for newcomers, people can see what was discussed and make a new point; or maybe I’m too naif), but feel free to email me directly https://launchpad.net/~vovkkk/+contactuser

[Wolf Vollprecht (w-vollprecht)]

Hey vovkkk, I completely understand your concerns regarding 12.04, and I don't want to »remove« the 12.04 version, it will just stay as is. Except if you want to do the tedious work of backporting everything (believe me, the css for 12.04 was a dirty mess, it's much cleaner now etc. pp.)

Btw. I am right now on the preview feature. I think it's coming along very nice ;)

Will post an update as soon something is ready :)

[Wolf Vollprecht (w-vollprecht)]

Hi vovkkk, I just updated my inline_preview_branch, and now it does not only feature the inline preview (which is working quite good already) but also your »real« preview.

I would love to get some feedback from you ;)

Cheers,

Wolf

[vovkkk (vovkkk)]

Oh, it do scrolling — nice! and thumbs for local pics! Cheerio!

However, there are few issues:
1) Pressing preview button document becomes unsaved, although user didn’t changed it.
2) Try to open new file when UW in preview mode — it should switch to TextEditor with new file.
3) If formula have error/typo (eg missed curly brace) inline preview does freeze entire app.

2 and 3 have been resolved in my branch, if I remember right.
1 happens, I assume, because of auto-scroll feature (?).

[Wolf Vollprecht (w-vollprecht)]

Hi vovkkk,

I assumed, you'd work on inline preview on your inline preview branch, but now I see you made some cool changes on your preview-branch.

I'll merge them tonight, error handling for Latex formulas is something I had on my list too, so it's even cooler it's already been done ;)

Opening files in Preview Mode is also a good point, I'll change that too. I will also fix Bug 1 (that bug is because right now, I am ineserting a <span id="scroll_mark"> into the textview. But I will try another method: Scrolling to the nearest heading.

Because inserting the scroll mark e.g. in a fenced code block makes it appear there. So there would be quite some corner cases, where the behaviour would not be desired, and I also feel that it might be equally convenient to scroll to the nearest heading. (Pandoc already adds an ID to them, in the form of ## My Heading would get id="my-heading". I'll see how that is working...

Have a great day,

Wolf