search

hubgit / react-prosemirror

A React component for ProseMirror
https://ow1qi.csb.app/
MIT License
248 stars 51 forks source link

Inline menu prop #14

Closed shrunyan closed 6 years ago

shrunyan commented 6 years ago

Based on suggestions from pull/13 I've refactored to allow the MenuBar to accept a floating Boolean prop which will tell it to handle determining menu position.

I was unable to abstract away the need for providing the view prop which is a reference to the underlying Prosemirror editor. Because of how the Editor component is handed to the render prop I can't determine away to get a reference to the view. Tried a larger refactor but was unable to achieve the desired result without losing the ability to control your menu through the render prop. Which is not an acceptable trade-off in my point of view, since that is arguably the most important feature of these components structure.

Handled a few of the floating menu placement edge cases. I'm sure this logic and styling could be improved.

It should be noted the setup is a little cumbersome with requiring both the view and floating prop be provided in order to deliver the inline menu experience.

If accepted closes https://github.com/hubgit/react-prosemirror/pull/13

Examples of menu placement.

Typical menu placement when there are now window collisions. localhost_3000_ 2

Menu determines it's to close to window right hand and switches direction. localhost_3000_

Menu determines it's to close to the top and switches direction. localhost_3000_ 1

shrunyan commented 6 years ago

Hi @hubgit, just checking in to see if you had any thoughts on this solution.

hubgit commented 6 years ago

Hi @shrunyan - this seems like a good approach, but I haven't had time to give it a proper try yet.

Do you need this to be merged so you can use it soon?

shrunyan commented 6 years ago

Yes I'll need to ship a solution in about 2 weeks. I can always fork and merge upstream if this lands.

hubgit commented 6 years ago

I had a go at this slightly differently in https://github.com/hubgit/react-prosemirror/tree/floater using a positioned Floater component to wrap the menu bar.

It seems to work quite well, but I'm not sure about the behaviour - should it always be displayed (which is what it currently does), or only when text is selected (which is what I was expecting)?

It might make sense to use react-popper for the positioning, as it handles this kind of thing quite nicely.

hubgit commented 6 years ago

I've merged #16 which adds a Floater component for displaying a floating menu bar when there's a selection in the editor. Give that a try (it needs a few changes to the props and onChange handler as well) and see if it works for you, and feel free to open an issue if you'd like to see different behaviour.