Basic example broken inside of the shadow dom (Chrome, Firefox, Safari)

[TehShrike]

Here's a repo with the reproduction.

Check out the reproduction in your browser now.

Here is the relevant code.

There's some more information about how the prosemirror modules were bundled in the readme.

This is the broken stuff I've noticed so far:

• In Chrome and Safari, the editor container box is really large.
• In Firefox, attempting to select text with Cmd+shift+left/right does not do anything.
• In Firefox and Chrome and Safari, the icons in the buttons in the menu bar are not visible. (probably because of this issue?)

[marijnh]

Attached patch should fix the icons.

I do not see any of the other issues in my browser—I can ctrl-shift-arrow select just fine on Firefox, and don't see any difference in box size on Chrome.

[TehShrike]

hm, the large editor box only replicates locally for me, not when I load the same code from github.io. I'll have to poke more at that to see if I can figure out more.

On the cmd+shift+arrow issue – I'm guessing you're on Windows? I'm on macOS 13.5 at the moment. On macOS, Cmd+left and Cmd+right are the equivalent of home and end on Windows, so maybe you'd be able to replicate it with shift+home/shift+end. Or maybe it's a mac-only bug :-x

[TehShrike]

Some more information about the large editor box issue: in Chrome, something is manually setting a min-height: 1447px on the menubar element:

in Safari, the min-height is being manually set on the element to 1446px.

Safari shows the style element flashing when I scroll, which implies that something is changing that attribute then.

[TehShrike]

If I remove this line, everything seems to work fine as far as the menubar size is concerned: https://github.com/ProseMirror/prosemirror-menu/blob/bee0a10a2082f28bb4c63c4ef17c275479fb05c9/src/menubar.ts#L85

I have no idea why the menu offsetHeight reads a large number briefly when the page is first being rendered. (Let alone why it only happens on localhost/127001 inside of a shadow dom 🙃)

[TehShrike]

Another clue on the Firefox cmd+arrow front – outside the shadow dom, pressing cmd+left inside of prosemirror moves the cursor to the beginning of the line. Inside the shadow dom, cmd+left inside of prosemirror triggers Firefox's stupid "navigate to the previous page in the browser history" shortcut.

[marijnh]

Right, I was indeed using Linux, not macOS.

That seems to be a Firefox bug, though—the handling for shift-cmd-left (and cmd-left) doesn't seem to realize the cursor is in a text field. When you do ctrl-left it'll go back in the browser history. ProseMirror leaves these kind of cursor motion keys to the browser, since the native behavior does a better job on things like bidi text, weird layouts, and conforming to platform-specific expectations than a custom implementation would. As such, I consider this a browser issue, outside of the library's scope.

[TehShrike]

All right, I'll try to open a ticket in the Firefox bug tracker for that.

What about the offsetHeight bug when browsing localhost + Chrome/Safari?

[marijnh]

What about the offsetHeight bug when browsing localhost + Chrome/Safari?

I haven't been able to reproduce that. In any case, it sounds more likely to be a CSS issue than a ProseMirror issue.

[TehShrike]

Occasionally giant menu bar: It's related to this menubar code – if anything causes the menu's offsetHeight to be unusually large for one tick, setting the minHeight prevents it from ever adjusting back down.

[TehShrike]

Firefox bug with keypresses in contenteditable in shadow dom: Here is the bugzilla issue I opened.

[marijnh]

if anything causes the menu's offsetHeight to be unusually large for one tick,

Do you know what's causing it to be large? Is that related to the asynchronous loading of the CSS code?

[maxweber]

I had the same problem, and it was due to the asynchronous loading of the CSS code.