Menu always visible

[Juergen-aus-Zuendorf]

If you have a longer text, you can move the editor area down using the scroll bars. In this case, however, the menu buttons, e.g. for changing the font attributes, disappear. So you have to scroll up all the time for the menu keys to trigger an action with them at the bottom of the text.

[solarkraft]

I have worked on this in my fork: https://github.com/fablab-luenen/dokuwiki-visual-editor.

If you want I can cherry-pick and make a PR, but it looks like the current maintainers are not super responsive and my current focus is on getting ahead.

[splitbrain]

PR would be welcome

[Juergen-aus-Zuendorf]

Yes, please make a PR

I've installed your fork, but after starting it the first time, I have the problem described here: No redirection after error; editor semi-bricked #148

[solarkraft]

Did you use the address provided in the Readme? As described in the linked issues just cloning the repository doesn’t work, it had to be installed from a release version (which includes the compiled javascript bundle).

[solarkraft]

Turns out it‘s already in my styling PR: https://github.com/cosmocode/dokuwiki-plugin-prosemirror/pull/147

@Juergen-aus-Zuendorf are you sure the error is exactly that described in the issue? Because in testing I‘ve also discovered another one, in which the visual editor wouldn‘t open (but without an error message): https://github.com/fablab-luenen/dokuwiki-visual-editor/issues/13

Also, do you have a header? Because the toolbar should already be sticky through a conditional position: fixed set through some javascript, but you may not see it if it‘s obscured by a fixed header.

You can see whether the stickiness implementation of the current code works by observing a slight jump to the top while scrolling down (this is when the menubar transitions to having position: fixed and thus is taken out of the page layout - the jump is removed by my change).

[Juergen-aus-Zuendorf]

I had indeed clicked on the link in the ReadMe file and installed the editor from there. The hint further down I had then admittedly overread.

Have now installed everything according to the instructions and it works. Thanks a lot!

[mschlenstedt]

Since this issue is quite old: Are your changes already included via Pull Request or is it still open?

[mschlenstedt]

I made some little changes to style.less which makes the menubar sticky on top of page. The problem with the current code is, that the parent element has "overflow: hidden;" set. That is why "position: sticky;" does not work. So adding "overflow: visible;" to the parent element fixes the problem.

I added "position: -webkit-sticky;" for compatible reasons to ".navbar":

https://github.com/mschlenstedt/dokuwiki-plugin-prosemirror/blob/1010e128e1d0f63a084f2fad402bff0ea12cf599/style.less#L89

And I added "overflow: visible;" to "#dokuwiki__content":

https://github.com/mschlenstedt/dokuwiki-plugin-prosemirror/blob/1010e128e1d0f63a084f2fad402bff0ea12cf599/style.less#L97

That's it. I made a Pull Request #179 for the changes. Until then, you can add the code also to your userstyle.css:

.prosemirror_wrapper {

    .menubar {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0 !important;
    }
}

#dokuwiki__content {
        overflow: visible !important;
}

[solarkraft]

My code has been merged, but theme specific CSS has been rejected before: https://github.com/cosmocode/dokuwiki-plugin-prosemirror/pull/147#discussion_r747327695

It may make sense to contribute the relevant changes to the theme itself.

[mschlenstedt]

Ok, so your changes work with the Original DokuWiki theme? This was not the case in my installation, that is why I thought the changes were not merged.

[annda]

I have two hopefully template agnostic solutions: #188 and #189

Please test and let us know which one you prefer and why.

[splitbrain]

@annda I think the IntersectionObserver is the preferable way. Using onscroll will execute many many times when scrolling, rerunning the same code again and again. The observer simply triggers an event on intersections and only then your code runs. You might even be able to see the difference in a CPU graph while scrolling...

[annda]

Implemented in #189