Change layout while editing and previewing a tiddler

#1

My use case is typically the following:

I like reading my TW with ~60 character tiddler width.
Therefore, my TW-story river is ~40em, with the sidebar at 45em to the right.

But, when editing my tiddlers I like to have preview on.
This makes an unusable ~20em split for the edit and preview panes.
My workaround is to close the sidebar, which maximizes the editor/preview split.
But – I like to use and see the sidebar while editing.

Is there a way to change the story-width, and sidebar-right settings when I’m editing and preview is open?

#2

This is already existed in kookma Utility plugin!
From setting check: Center storyriver when sidebar closed

Now close your sidebar. On edit tiddler occupy the whole width on view you see a centered tiddler with readable (small) width

#3

You could modify the preview-button actions, so it does set preview mode and also set the other states needed to change the layout.

Or you can create a global keyboard shortcut to change the state tiddlers.

#4

Another alternative, if the preview you are after is the output, or rendered version, is to generate a preview above the editor, rather than using the side by side preview.

  • In fact this could be done for any of the previews.
  • Be carful when writing macros or widgets “TiddlyWiki Scripting” when you have a preview open, you can cause errors.
#5

Mohammad, thanks for the quick thoughts.

I tried the “center storyriver when sidebar closed”, but I don’t think that’s what I’m looking for.

My goal is to have a default setup with:

  • Fixed 40em wide story river when reading
  • Sidebar at 45em to the right, and takes up remaining space

Editing setup with

  • Fixed 40em “edit tiddler” on left
  • Fixed 40em “preview” in middle
  • Remaining “sidebar” starting at 85em to the right

I briefly tried the following as well:

  • Open edit and tiddler preview
  • Use ctrl+shift+right shortcut to toggle sidebar visibility when I want it

The problem I’m seeing with the toggle sidebar approach is that it loses my current paragraph location in the edit tiddler. (i.e., I’m writing section Bar with sidebar hidden, but when I show sidebar the text re-wrapping brings me to section Alpha in tiddler. Then I have to scroll back to my previous edit location)

These are minor-minor usability gripes on my side. TW has been by far my favorite knowledge management tool I’ve come across, I’m just looking to continue making it better for my use cases.

#6

pmario, I think this should accomplish what I’m after.

I’ll start poking around, trying to find how to modify the preview-button actions.

In the meantime, if you have any pointers or examples of this, I’d be happy to listen.

Thanks.

#7

The following tiddlers are involved.

  • $:/core/ui/EditToolbar/preview
  • $:/stat/sidebar
  • ActionSetFieldWidget
  • RevealWidget

IMO that should get you going.

#8

Just for fun I did try to let ChatGPT write the code for me. … It almost got it right using the existing code as an example, and telling it that $:/state/sidebar is the state tiddler used to show and hide the sidebar.

That’s the working code after interchanging yes and no … have fun!

\whitespace trim
<$reveal state=<<edit-preview-state>> type="match" text="yes" tag="span">
  {{$:/core/images/preview-open}}
  <$action-setfield $tiddler=<<edit-preview-state>> $value="no"/>
  <$action-setfield $tiddler="$:/state/sidebar" $value="yes"/>
</$reveal>
<$reveal state=<<edit-preview-state>> type="nomatch" text="yes" tag="span">
  {{$:/core/images/preview-closed}}
  <$action-setfield $tiddler=<<edit-preview-state>> $value="yes"/>
  <$action-setfield $tiddler="$:/state/sidebar" $value="no"/>
</$reveal>
#9

The ChatGPT idea is brilliant. I actually did the same to learn how to “write a global tiddlywiki macro accessible in other tiddlers”. It suggested the $:/tags/ViewTemplate tag that I didn’t realize I needed.

Anyway, I haven’t had much time to play with this yet, but with your pointers I kludged together an example of how I’d like the behavior to work.

I created a tiddler for my two macros.
(Note, hard coded proof of concept at the moment)

\define readActions()
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth" $field="text" $value="40em"/>
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" $field="text" $value="40em"/>
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" $field="text" $value="45em"/>
\end

\define editActions()
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth" $field="text" $value="80em"/>
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" $field="text" $value="80em"/>
<$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" $field="text" $value="85em"/>
\end

Then in the $:/core/ui/EditTemplate

I call readActions when we close/discard a tiddler – to get back to my “reading view”.

In the $:/core/ui/EditorToolbar/preview

  • When open preview is clicked, I call editActions() → to get me full size edit and full size preview
  • When close preview is clicked, I call readActions() → to get back to just single full size edit

Basic idea does what I want, but needs cleanup.

1 Like
#10

Correction to my previous post (which I can’t seem to edit anymore?)

incorrect way to specify a global macro is below

$:/tags/ViewTemplate

should be:

$:/tags/Macro

Another question on my current, approach: editing the

$:/core/ui/EditTemplate
$:/core/ui/EditorToolbar/preview

Gives me warnings about changing system/shadow tiddlers.
Is there a better approach to get the functionality I’m looking for?
I’m not sure I have the best approach.

Also, there is a remaining bug in the current approach:

  • If the “tiddler preview state=yes” when the user clicks the “edit tiddler” button, it doesn’t automatically go to my editActions wider width.
  • What tiddler/function name is it when the “edit tiddler” button is pressed?