[tw] anchor top when editing tiddler

[Rich]

I often times find myself writing long sets of notes, say to a book, and
the editing toolbar gets far away. Is there a way for the editing toolbar
to float, so that as I scroll down the tool bar stays within view. I know
the easier answer is to break up the text into smaller tiddlers, but That
is not how I work when taking book notes. I might break it up after I take
the notes, but until I get everything in, I don't always know what goes
where. Thus the long notes just to get the thing in TW5 are a necessary
part of my workflow. Any help on this would be greatly appreciated.
Thanks,
Rich

[Ton Gerner]

Hi Rich,

See
https://github.com/Jermolene/TiddlyWiki5/issues/2748#issuecomment-301750938
and note that a sticky editor toolbar does *not* work correctly in preview
mode.

Cheers,

Ton

Post by Rich
I often times find myself writing long sets of notes, say to a book, and
the editing toolbar gets far away. Is there a way for the editing toolbar
to float, so that as I scroll down the tool bar stays within view. I know
the easier answer is to break up the text into smaller tiddlers, but That
is not how I work when taking book notes. I might break it up after I take
the notes, but until I get everything in, I don't always know what goes
where. Thus the long notes just to get the thing in TW5 are a necessary
part of my workflow. Any help on this would be greatly appreciated.
Thanks,
Rich

[Rich]

THanks Ton,

Unfortunately, I rely on the preview mode extensively when writing, so I
don't think this will work for me, and I don't have the coding skills to
try and work around it.

Post by Ton Gerner
Hi Rich,
See
https://github.com/Jermolene/TiddlyWiki5/issues/2748#issuecomment-301750938
and note that a sticky editor toolbar does *not* work correctly in preview
mode.
Cheers,
Ton

Post by Rich
I often times find myself writing long sets of notes, say to a book, and
the editing toolbar gets far away. Is there a way for the editing toolbar
to float, so that as I scroll down the tool bar stays within view. I know
the easier answer is to break up the text into smaller tiddlers, but That
is not how I work when taking book notes. I might break it up after I take
the notes, but until I get everything in, I don't always know what goes
where. Thus the long notes just to get the thing in TW5 are a necessary
part of my workflow. Any help on this would be greatly appreciated.
Thanks,
Rich

[Eric Shulman]

Post by Rich
I often times find myself writing long sets of notes, say to a book, and
the editing toolbar gets far away. Is there a way for the editing toolbar
to float, so that as I scroll down the tool bar stays within view. I know
the easier answer is to break up the text into smaller tiddlers, but That
is not how I work when taking book notes. I might break it up after I take
the notes, but until I get everything in, I don't always know what goes
where. Thus the long notes just to get the thing in TW5 are a necessary
part of my workflow.

Perhaps instead of making the toolbar float, you could limit the length of
the edit/preview panels and make them scrollable, so that the toolbar that
sits above them won't scroll out of view even when you scroll the content.
It's not quite the same as what you were after, but it still may be a
workflow improvement nonetheless.

Try this:

1) create a tiddler, e.g., "MyStyles", tagged with $:/tags/Stylesheet
2) enter the following CSS into that tiddler:

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

Let me know how it goes...

enjoy,
-e
Eric Shulman
TiddlyTools.com: "Small Tools for Big Ideas!" (tm)
InsideTiddlyWiki: The Missing Manuals

[Danielo Rodríguez]

Eric, even limiting the size of the edit area, if he is using the preview the body of the tiddler will be longer than the screen

[Danielo Rodríguez]

Oh, you have included the preview container too. Then it's fine I thing

['Mark S.' via TiddlyWiki]

That's great -- maybe even the way it should be by default.

I don't suppose there's any way to make the toolbar sit at the BOTTOM of
the editor? All the "action" in editing occurs there if you work from top
to bottom. It appeared to me that the only way to change it was in
factory.js, but maybe there is some CSS magic that would do?

Thanks!
Mark

Post by Eric Shulman

Post by Rich
I often times find myself writing long sets of notes, say to a book, and
the editing toolbar gets far away. Is there a way for the editing toolbar
to float, so that as I scroll down the tool bar stays within view. I know
the easier answer is to break up the text into smaller tiddlers, but That
is not how I work when taking book notes. I might break it up after I take
the notes, but until I get everything in, I don't always know what goes
where. Thus the long notes just to get the thing in TW5 are a necessary
part of my workflow.

Perhaps instead of making the toolbar float, you could limit the length of
the edit/preview panels and make them scrollable, so that the toolbar that
sits above them won't scroll out of view even when you scroll the content.
It's not quite the same as what you were after, but it still may be a
workflow improvement nonetheless.
1) create a tiddler, e.g., "MyStyles", tagged with $:/tags/Stylesheet
.tc-edit-texteditor, .tc-tiddler-preview-preview { max-height:80vh;
overflow-y:auto; }
Let me know how it goes...
enjoy,
-e
Eric Shulman
TiddlyTools.com: "Small Tools for Big Ideas!" (tm)
InsideTiddlyWiki: The Missing Manuals

[Thomas Elmiger]

Hi Mark

I have tried to fix the toolbar to the bottom via CSS. But there are
dropdown elements that get lost this way.

So now I fixed it to the top and let it pop down on hover. Seems to work on
my desktop.

I put this in a tiddler tagged $:/tags/Stylesheet

.tc-editor-toolbar {
position: fixed;
z-index: 99;
background-color: rgba(200,200,200,0.3);
padding: 10px 7px 14px 7px;
margin: 0;
bottom: calc(100vh - 24px);
}

.tc-editor-toolbar:hover, .tc-editor-toolbar:focus {
top: 0;
bottom: auto;
}


All the best,
Thomas

['Mark S.' via TiddlyWiki]

Hi Thomas,

That's an interesting approach. I had to lower the toolbar 20 pixels to get
out from under my bookmarks bar. Is it supposed to "popup" as you hover
over? In my case the active toolbar pops down a few pixels. It would be
more ideal if the popping didn't appear to move at all (i.e. it 'pops' in
the same place as the original fixed toolbar).

If you are editing more than one tiddler, it may apply changes to the wrong
tiddler. It appears to want to act on the draft tiddler at the bottom of
the story river.

Thanks,
Mark

Post by Thomas Elmiger
Hi Mark
I have tried to fix the toolbar to the bottom via CSS. But there are
dropdown elements that get lost this way.
So now I fixed it to the top and let it pop down on hover. Seems to work
on my desktop.
I put this in a tiddler tagged $:/tags/Stylesheet
.tc-editor-toolbar {
position: fixed;
z-index: 99;
background-color: rgba(200,200,200,0.3);
padding: 10px 7px 14px 7px;
margin: 0;
bottom: calc(100vh - 24px);
}
.tc-editor-toolbar:hover, .tc-editor-toolbar:focus {
top: 0;
bottom: auto;
}
All the best,
Thomas

[Mat]

Good idea to hide the toolbar.

I made this to have it show-on-hover (or, if touch screen, show-on-tap!).
In order to have an area on which to hover, I attempted to increase the
margin above the editor field... but I fail to do so. Instead I increased
the margin below the tags field but this is of course only OK if there is
no other custom field appearing between the tags and the editor.

Other than that there is some styling applied that I think works well or
even better than in the native layout.

<:-)

tag: $:/tags/Stylesheet

.tc-edit-tags {
margin-bottom:12px
}
.tc-editor-toolbar {
position:absolute;
left:0;
width:100%;
font-size:0;
line-height:0;
padding:0;
border:5px solid transparent;
margin-top:-11px; /* pull it up */
Xoutline:1px solid blue; /* remove the X to peek where it all resides */
}
.tc-editor-toolbar:hover {
font-size:1em;
border-color:white;
background:white;
}
.tc-editor-toolbar button {
display:none;
padding:0px;
}
.tc-editor-toolbar:hover button {
display:inline-block;
}

[Mat]

Doh! I forgot the OP question by Rich:

The following adds position sticky;

<:-)

.tc-edit-tags {
margin-bottom:12px
}
.tc-editor-toolbar {
position:sticky;
position: -webkit-sticky;
position: sticky;
top: 0px; /* distance to stick from top, e.g if you use top bar */
left:0;
width:100%;
font-size:0;
line-height:0;
padding:0;
border:5px solid transparent;
margin-top:-11px; /* pull it up */
outline:1px solid blue; /* remove the X to peek where it all resides */
}
.tc-editor-toolbar:hover {
font-size:1em;
border-color:white;
background:white;
}
.tc-editor-toolbar button {
display:none;
padding:0px;
}
.tc-editor-toolbar:hover button {
display:inline-block;
}

[@TiddlyTweeter]

Things that come up for me in this thread are questions like ...

1 - WHAT is an Editor for?
2 - HOW should it be best displayed?
3 - Do different types of TW (with functionally different aims) need
DIFFERENT Editor Manifestations?

For instance, at the moment, the default editor enters the stream and when
you have edited and saved the Tiddler created it is added to the stream. It
seems to me that that behaviour is optimal for only some cases, not all.

IMO, a FLOATED Editor that, on save also EXITS the Tiddler could be good.
This approach would serve apps well where the purpose was to add content,
but not display it as a fragment. Rather, its part of a larger project in
which the underlying plan places it appropriately.

The work done in TiddlyMap I think is very instructive on this kind of
thing. I believe it uses adapted Modals for Editing.

BTB, I suspect some of the layout issues would work differently if the
orientation towards what "Editing" is for were played with.

Just thoughts.

Best wishes
Josiah

[Rich]

Hi all, thanks a lot for addressing this. I am having trouble installing
it. I made a tiddler called ToolbarFloat and tagged it $:/tags/Stylesheet ,
but don't see any changes. What else do I need to do or do differently?
Thanks!

Post by @TiddlyTweeter
Things that come up for me in this thread are questions like ...
1 - WHAT is an Editor for?
2 - HOW should it be best displayed?
3 - Do different types of TW (with functionally different aims) need
DIFFERENT Editor Manifestations?
For instance, at the moment, the default editor enters the stream and when
you have edited and saved the Tiddler created it is added to the stream. It
seems to me that that behaviour is optimal for only some cases, not all.
IMO, a FLOATED Editor that, on save also EXITS the Tiddler could be good.
This approach would serve apps well where the purpose was to add content,
but not display it as a fragment. Rather, its part of a larger project in
which the underlying plan places it appropriately.
The work done in TiddlyMap I think is very instructive on this kind of
thing. I believe it uses adapted Modals for Editing.
BTB, I suspect some of the layout issues would work differently if the
orientation towards what "Editing" is for were played with.
Just thoughts.
Best wishes
Josiah

[Rich]

Thanks Mat, I ended up using a subset of this and it works like a charm. I
wasn't happy with the tool bar jostling the edit box so I took that part
out as best as I could. THanks, this totally does the trick! Here is the
subset of Mat's css I used:


.tc-editor-toolbar {
position:sticky;
position: -webkit-sticky;
position: sticky;
top: 0px; /* distance to stick from top, e.g if you use top bar */
left:0;
width:100%;
font-size:.74em;
padding:0;
border:5px solid transparent;
}

The following adds position sticky. I added a blue outline so you can see
it. Just remove it to... remove it.
<:-)
.tc-edit-tags {
margin-bottom:12px
}
.tc-editor-toolbar {
position:sticky;
position: -webkit-sticky;
position: sticky;
top: 0px; /* distance to stick from top, e.g if you use top bar */
left:0;
width:100%;
font-size:0;
line-height:0;
padding:0;
border:5px solid transparent;
margin-top:-11px; /* pull it up */
outline:1px solid blue; /* remove the X to peek where it all resides */
}
.tc-editor-toolbar:hover {
font-size:1em;
border-color:white;
background:white;
}
.tc-editor-toolbar button {
display:none;
padding:0px;
}
.tc-editor-toolbar:hover button {
display:inline-block;
}

['Surya' via TiddlyWiki]

Hello,

@Eric Shulman:
You wrote:

1) create a tiddler, e.g., "MyStyles", tagged with $:/tags/Stylesheet
2) enter the following CSS into that tiddler:

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

I like that a lot :-)

But one question I still have.
With this solution both, editor & preview, are scrolling separately.
Without that solution they scroll together, so that I can immediately see,
what I will get with my editing on the left. But the editor bar isn't
visible in a long note.
Is it possible to combine both?
So, with this .tc-edit-texteditor, .tc-tiddler-preview-preview { max-height:
80vh; overflow-y:auto; }

But that the editor and the preview scroll together?

Thanks in advance for helping :-)
Bettina