Style overlapping annotations #702
Merged
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
added 2 commits
September 22, 2020 21:36
The annotation-extension would allow to style individual annotations via a CSS class. This led to issues with overlapping annotations. For example, if an annotation with a red background and another with a green background were overlapping, the editor would show (more or less) randomly one of the two colors. Now, the annotation-extension allows users to style decorations based on all overlapping annotations within a given decoration. The default implementation visualizes overlapping annotations by showing a darker shade the more annotations are overlapping. The approach was confirmed by Marijn: https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162
🦋 Changeset is good to goLatest commit: 883f163 We got this. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
package: remirror 🟣
|
🚀 Deployed on https://5f6a5aac82914e0088457f49--remirror.netlify.app |
ifiokjr
reviewed
Sep 22, 2020
Co-authored-by: Ifiok Jr. <ifiokotung@gmail.com>
ifiokjr
reviewed
Sep 22, 2020
| */ | ||
| function defaultGetStyle<A extends Annotation>(annotations: Array<AnnotationWithoutText<A>>) { | ||
| // Consider up to 5 overlapping annotations | ||
| const backgroundShade = Math.min(annotations.length, 5) / 5; |
There was a problem hiding this comment.
Your comments are great and give a really good understanding of what’s happening.
Maybe store the number 5 as a constant MAX_OVERLAPPING_ANNOTATIONS or something better named in the outer scope.
ifiokjr
reviewed
Sep 22, 2020
| * | ||
| * Approach was confirmed by Marijn: https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162 | ||
| */ | ||
| export function toSegments<A extends Annotation>( |
There was a problem hiding this comment.
The whole function not just this one line 😄
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.
Description
The annotation-extension would allow to style individual annotations via a CSS class. This led to issues with overlapping annotations. For example, if an annotation with a red background and another with a green background were overlapping, the editor would show (more or less) randomly one of the two colors.
Now, the annotation-extension allows users to style decorations based on all overlapping annotations within a given decoration. The default implementation visualizes overlapping annotations by showing a darker shade the more annotations are overlapping.
The approach was confirmed by Marijn: https://discuss.prosemirror.net/t/how-to-style-overlapping-inline-decorations/3162
Checklist
pnpm fixcompleted successfully.pnpm test.Screenshots