Fix bug interacting with and hovering over table columns in read-only mode #49
+27
−17
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… mode There was a mistake in the original approach, since setting `"display: none"` on `&.resize-cursor` would actually be hiding the entire ProseMirror document, as opposed to some cursor element. This didn't appear very obviously in Chrome (though there were times where you could get it to flash slightly when hovering over a column divider), but in Firefox it was much more drastic, where the content would disappear/reappear, causing the page scroll position to rapidly/unexpectedly change any time a user's cursor crossed over a column border. Also, it was still possible to drag and resize a column, despite it being in read-only mode and not showing a resize cursor, since the editor and the table were still responding to pointer events (and the underlying prosemirror-tables `columnResizing` plugin doesn't know/care about `editable` state). This now turns off pointer events to the entire table if the `"resize-cursor"` class appears, which more thoroughly prevents any column resizing from happening. Fortunately, the table cells themselves are still selectable via the `tableEditing` plugin, so users can highlight vertically/horizontally across table cells even in read-only mode, since `"resize-cursor"` only appears when hovering specifically over the border.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a mistake in the original approach, since setting
"display: none"on&.resize-cursorwould actually be hiding the entire ProseMirror document, as opposed to some cursor element. This didn't appear very obviously in Chrome (though there were times where you could get it to flash slightly when hovering over a column divider), but in Firefox it was much more drastic, where the content would disappear/reappear, causing the page scroll position to rapidly/unexpectedly change any time a user's cursor crossed over a column border.Also, it was still possible to drag and resize a column, despite it being in read-only mode and not showing a resize cursor, since the editor and the table were still responding to pointer events (and the underlying prosemirror-tables
columnResizingplugin doesn't know/care abouteditablestate). This now turns off pointer events to the entire table if the"resize-cursor"class appears, which more thoroughly prevents any column resizing from happening. Fortunately, the table cells themselves are still selectable via thetableEditingplugin, so users can highlight vertically/horizontally across table cells even in read-only mode, since"resize-cursor"only appears when hovering specifically over the border.