Sticky toolbar doesn't work with preview

[Ittay Dror]

Sorry if the question I have is not phrased with the proper terms. 

I'd like to have the 'tc-editor-toolbar' div have a sticky position. This works when it is under tc-reveal, but when I use preview, it gets transcluded under tc-tiddler-preview. 

What is the best way to have it stay under tc-reveal when preview mode is on? I understand transclusion happens in $:/core/ui/EditTemplate/body, should I override it? How? Maybe have some other code move it in place after the transclusion? Again, how? 

(For future reference, how can I see the code of shadow tiddlers? Finding them on github is tedious and in TiddlyWiki I see them as empty. Maybe there's a plugin that allows exploration of other plugins that are installed? )

[Ittay Dror]

So, some more exploration it looks like tc-editor-toolbar is added in EditTextWidget.prototype.render which adds the div before the edit text widget. So maybe a check should be made if in preview mode and if so add it to the parent's parent ? Is this something I can override or requires a fix in the core code?

[Mat]

I'd say that most people here are not very familiar with the css definition names so it is better if you express your question using names of the TW parts, if possible. 

However, I have myself hidden the editor toolbar to have it appear on hover. Here's the css for this. (It is not elegantly done, it's just for me.) Maybe it'll help you, maybe not:

title: whateveryouwant
tags: $:/tags/Stylesheet
type: text/css
text:
.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:6px 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;
}

<:-)

[Ton Gerner]

Hi Ittay,

On Sunday, February 2, 2020 at 10:27:39 AM UTC+1, Ittay Dror wrote:

Sorry if the question I have is not phrased with the proper terms. 

I'd like to have the 'tc-editor-toolbar' div have a sticky position. This works when it is under tc-reveal, but when I use preview, it gets transcluded under tc-tiddler-preview. 

What is the best way to have it stay under tc-reveal when preview mode is on? I understand transclusion happens in $:/core/ui/EditTemplate/body, should I override it? How? Maybe have some other code move it in place after the transclusion? Again, how? 

The problem with the sticky editor is well known. See e.g. [1]
As far as I know the problem stems from the fact that the editor is used in an iFrame. See e.g. [2]
Another problem is that (caused by the iFrame) bookmarklets don't work (they work with the editor toolbar switched off!)
I created a small toolbar (below the tags) for e.g. toggling the editor toolbar on/off, preview on/off, scrollable preview on/off.
See the tab Code tiddlers at 'My playground' at [3]

 

(For future reference, how can I see the code of shadow tiddlers? Finding them on github is tedious and in TiddlyWiki I see them as empty. Maybe there's a plugin that allows exploration of other plugins that are installed? )

See [3] under the tabs Guides > Exploration and under the tab Plugins > Exploration.

Cheers,

Ton

[1] https://groups.google.com/forum/#!msg/tiddlywiki/QcKMCNWeRpY/m5sPjM2TAwAJ
[2] https://groups.google.com/forum/#!msg/tiddlywiki/5TInPo-HidU/8-9Oi4q-EAAJ
[3] http://tongerner.tiddlyspot.com/

 

[Ittay Dror]

Hi Ton,

First, thanks for replying, since I remembered vaguely there's an exploration plugin somewhere and couldn't find it and visiting your site I found it, it is now installed, so thank you!. 

More inline

On Sunday, 2 February 2020 14:03:10 UTC+2, Ton Gerner wrote:

The problem with the sticky editor is well known. See e.g. [1]
As far as I know the problem stems from the fact that the editor is used in an iFrame. See e.g. [2]

Well, in chrome, if I move the tc-editor-toolbar div outside of the tc-tiddler-preview div, then it works as expected. I think this is just a case of it being part of the editor tiddler and then the preview tiddler transcludes the editor tiddler as a whole rather than (if possible) separating the edit pane from whatever else is in that tiddler. The relevant code that creates tc-editor-toolbar is in EditTextWidget in $:/core/modules/editor/factory.js (which I couldn't locate in your explorer preset filters) and the creation of the preview div is in $:/core/ui/EditTemplate/body (which I couldn't find in your explorer preset filters either), which transcludes $:/core/ui/EditTemplate/body/editor

I don't know what I can/should override and what I cannot. But if I can't override, is there a way to run after the widget rendered (or any other suitable hook) to fix the dom? 

 

Another problem is that (caused by the iFrame) bookmarklets don't work (they work with the editor toolbar switched off!)
I created a small toolbar (below the tags) for e.g. toggling the editor toolbar on/off, preview on/off, scrollable preview on/off.
See the tab Code tiddlers at 'My playground' at [3]

Installed it, 'scrollable preview' doesn't seem to change anything? Am I missing something? 

[Ton Gerner]

Hi Ittay,

Well, in chrome, if I move the tc-editor-toolbar div outside of the tc-tiddler-preview div, then it works as expected. I think this is just a case of it being part of the editor tiddler and then the preview tiddler transcludes the editor tiddler as a whole rather than (if possible) separating the edit pane from whatever else is in that tiddler. The relevant code that creates tc-editor-toolbar is in EditTextWidget in $:/core/modules/editor/factory.js (which I couldn't locate in your explorer preset filters)

As far as I can see, it is there (see attachment). Even if I overwrite the shadow tidller I do see it. Anyhow, for easier finding you just edit the filter manually.

 

and the creation of the preview div is in $:/core/ui/EditTemplate/body (which I couldn't find in your explorer preset filters either), which transcludes $:/core/ui/EditTemplate/body/editor

I don't know what I can/should override and what I cannot. But if I can't override, is there a way to run after the widget rendered (or any other suitable hook) to fix the dom? 

Sorry I am not a programmer and cannot help further. But a long time ago I made a PR; give it a thumbs up.

 

I created a small toolbar (below the tags) for e.g. toggling the editor toolbar on/off, preview on/off, scrollable preview on/off.
See the tab Code tiddlers at 'My playground' at [3]

Installed it, 'scrollable preview' doesn't seem to change anything? Am I missing something? 

 

My fault, I changed the name of the stylesheet but forgot to change the name in the checkbox widget. I uploaded a new - working - version'.

Cheers,

Ton