Query: Is there an existing solution to Preview Alignment?

A common issue I have in using TW editing is Preview Alignment.

I’m wondering if there is any simple way to change the CSS for the editor preview so that it aligns with the tiddler text you are editing.

Here is a simple screenshot of the issue …

Any thoughts / solutions would be most welcomed by me!

Happy today
TT

At the moment the renderer has no information about the source text and the resulting Html output. So that is no simple way to sync it.

That would indeed be useful.

As a a rule there are different fonts in use in the two windows so they will not match. Of course they could be changed to match, however wikitext as simple as a heading or list widgets will quickly throw it all out again. You could look for one of the wysiwig solutions and use one pane.

The best general solution I have considered, but not built, is to use codemirror to add line numbers to the editor and build a special preview that places line numbers in a left hand column in the preview, with the naturally un-numbered lines (eg the result of a list widget) just blank. We could use the line number in codemirror to automatically scroll the preview window to its matching line.

I have scrollbars in each window which helps.

If you put the following in a tiddler and tag it

$:/tags/Stylesheet

.tc-edit-texteditor, .tc-tiddler-preview-preview { max-height:80vh; overflow-y:auto; }

Ste

6 Likes

Thanks Steve

That is definitely helpful when working on longer texts.

FWIW, I also added @pmario’s simple CSS to convert the clunky default browser scrollbars into something thinner. See $:/plugins/wikilabs/thin-scrollbars/styles

TT

3 Likes

I use this solution! One issue is the autosize does not work anymore!
and when you are typing in the last line and press enter, you have to manually scroll down!

I think this needs developer attentions! I believe the edit area needs some improvement!

2 Likes

Hi all
I believe Editor in Tiddlywiki needs some love and should be more customizable!
I have started a discussion on Tiddlywiki (Editor Needs Some Love: Let Have More Customizable Main Editor · Discussion #6379 · Jermolene/TiddlyWiki5 · GitHub) please vote and give your idea opinion!

2 Likes

Hi @Mohammad, @Ste_W,
You could reveal this part of the stylsheet only if preview-mode is switched on.
Greetings Jan

2 Likes