Question: possible / desirable to move the editor toolbar to the bottom of the editing area?

#1

It just hit me that I am always writing at the bottom of the existing text which moves down as I type more, so pretty quickly I am writing at the bottom of the text field.

Having a sticky editor toolbar keeps the toolbar from going off screen. But the editortoolbar is at the top of the text field, sticky or not. So I have to move my cursor all the way up and all the way down for every time I use the EditorToolbar.

Would we be able to do edits faster if the toolbar were at the bottom, much closer to where we are actually typing?

So there are two questions:

  1. Is it possible to have the editortoolbar below the text area? I thought it would just be a matter of reordering the tags for $:/tags/EditTemplate, but I see that it is a matter of changing something in the incomprehensible $:/core/ui/EditTemplate/body.

  2. Would it be worth it to do so, or would it cause other unforeseen-to-me problems? One example, that is irrelevant to my case, is that some editor toolbar buttons have dropdowns which would render below the visible area of the screen.

I am always shooting for more friction-free writing, and this is one area where a very counterintuitive move might reduce some friction. I thought it was worth exploring.

#2

G’day,

Editor toolbar below the text area would be equally bad to me if I were new to TiddlyWiki, but changing it now would be worse for me because of the adjustment.

A toolbar that stays fixed to the top of the browser window when scrolling instead of going out of view, that would be very cool.

3 Likes
#3

I think it would be useful. But also, I would like scrollbars on both the edit area AND the preview – just like we have on Discourse. I know there’s some way of doing this, but it would be great if it was available by default. The rendered text takes up a different amount of space so on larger texts if you can see one you can’t see the other.

#4

I would love to have this!!

2 Likes
#5

Having chewed on it a little bit, you are right. Ditto !

#6

I believe you need to specify a fixed size for the editor for that.

image
image1092Ă—549 87.3 KB

I have minimal experience with the tiddler editing interface so I am not sure how well that works in practice.

#7

This has been around forever.

/*STICKY EDITORTOOLBAR*/

.tc-editor-toolbar {
  position:sticky;
  position: -webkit-sticky;
  position: sticky;
  top: 30px; /* distance to stick from top, e.g if you use top bar */
  left:0;
  width:100%;
  font-size:.90em;
  padding:0;
  border:5px solid transparent;
  background: white;
  z-index: 100;
}
3 Likes
#8

Around, but where was that hiding?

Update 2 minutes later after trying that at tiddlywiki.com:

My reaction: where have you been all my life …

Thanks !

#9

You are welcome, Charlie!

The least I can do to repay you for your videos that helped me learn macros!

1 Like
#10

To be honest. The only thing I use the toolbar for is open/close the preview. The rest of the wikitext I do write on my own or I use keyboard shortcuts.

#11

So far there are several answers on the desirability question. But no answers on the how-to question. I am tinkering with $:/core/ui/EditTemplate/body/editor, rearranging things, but to no avail.

#12

Been using wikis since 2006. I still cannot stand wikitext/markup of any kind, or any markup of any kind. If I have a button, I will go to it every time.

All part and parcel of my cognitive challenges.

Keyboard shortcuts are also a challenge. Hard to learn, hard to remember, and the choices often don’t make sense to me.

Buttons, although usually easier, are often tough to if the choice of image is hard for me to process.

So yeah, I’m quite envious of folk who do just great with all those things.

#13

A quick and dirty way is to cut all the contents between <$edit>… and </$edit> and put them between <div>...</div> tags after the last </$edit>. The tool buttons will be really small, which means the CSS needs to be hunted down and killed adjusted.

1 Like
#14

It’s $:/core/ui/EditTemplate/body you need to tinker with

#15

I think, it would be worth a request to make these elements more flexible by default. … IMO if it would be tagged, you only would need to move the tab below the body area …

I think it would be worth a “feature request” at Github with a link to your post here. … There is an upcoming change in the way Edit- and Viewtemplates are created. … So it may be possible to get this feature in 1 go … may be :wink:

#16

I think that the following @saqimtiaz’s experiment is more interesting, there are some editors with this behaviour.

https://saqimtiaz.github.io/sq-tw/floating-menu.html

#17

Is there a trick to that? I saw no floating editor in that link.

Edit: oh I see, the toolbar appears when selecting text. But I cheat and use wrap buttons to stamp pre-set custom text into tiddlers without having to select from a dropdown. So I need something where the buttons are visible at all times.

CSS float elements as a tiddler dashboard - help wanted
#18

If you put the contents outside of the <$edit> tags, then the buttons can’t be used to edit the text area.

#19

I have a github account but I would have to take a course just to learn how to use it. What little I learned years ago has been forgotten. I find the ui of Github very unintuitive.

1 Like
#20

You’re so picky – you want the buttons to work!

Try this. Start with a fresh $:/core/ui/EditTemplate/body/editor. Just above the first <$set> paste

<div class="bottom" style="position: absolute; height: 4em; border: none; bottom: 0; right: 0; left: 0; " >

and then insert a </div> just below the matching </$set> .

Then put this at the very bottom of tiddler:

<div style="height: 3em;" > </div>

This actually works pretty well until you hit “preview”. Oh well, one evil at a time.