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

[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.

[Eric Shulman]

On Monday, June 19, 2017 at 6:31:00 PM UTC-7, Rich wrote:

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.]

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

[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.]

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

[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. 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 */

[@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; 

[Surya]

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