feat: LEAP-1973: Adjustable spans for Text tag #7309
Merged
Conversation
This file contains hidden or 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
✅ Deploy Preview for label-studio-storybook ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for heartex-docs canceled.
|
✅ Deploy Preview for label-studio-docs-new-theme canceled.
|
There was a problem hiding this comment.
Pull Request Overview
This PR introduces drag‑n‑drop editing for text tag regions by adjusting browser selection styles to mimic region styles during resizing.
- Added new drag‑n‑drop methods for initiating and applying selection styles in RichText view.
- Integrated resize handle attachment and detachment in the HighlightMixin for better visual cues during region manipulation.
- Updated imports and helper functions to support global offset calculations.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| web/libs/editor/src/tags/object/RichText/view.jsx | Added drag‑n‑drop editing methods and selection style adjustments. |
| web/libs/editor/src/mixins/HighlightMixin.js | Added functions to attach/detach resize handles and updated styles for active regions. |
Comments suppressed due to low confidence (1)
web/libs/editor/src/tags/object/RichText/view.jsx:137
- [nitpick] The function name '_hightlightRegion' appears to contain a typo. Consider renaming it to '_highlightRegion' for improved clarity.
_hightlightRegion = (_doc, region) => {
- no weird selection stays on the screen - no leftover spans after adjustment in multiline - correct offsets in all cases - better naming - no extra regions created by accident
- remove overflow to show handles in a first row - adjust line-height to remove the gap between lines
This will improve performance and DX as they will be always in one place.
Internals updated with no problems, so we had to solve two issues with visuals: - detect changes; for this we store offsets in spans and compare them during visuals update - update hightlight by recreating spans `_spans` are added to volatile props to trigger MST views updates.
`force` option was added to `updateHighlightedText()` to update text every time
|
/git merge
|
bmartel
approved these changes
Apr 8, 2025
|
Could you add a screenshot of what this looks like? |
Gondragos
approved these changes
Apr 9, 2025
Now it's easy to see extended/reduced parts of the region. The trick is to use lighter color for both region and selection, and overlapped area will look darker, the same as the original region color.
If it's outside just do nothing to the region, but stop the resizing and reset flags and styles. To achieve this we have to attach handler to the document and do some tweaks.
Add `canResizeSpans` getter to RichText model and use it
Co-authored-by: bmartel <[email protected]>
Gondragos
reviewed
Apr 9, 2025
|
/git merge
|
…l/label-studio into fb-leap-1973/adjustable-spans
|
/git merge
|
|
/fm sync |
We should not use anything from `apps` in `libs`
nass600
approved these changes
Apr 10, 2025
|
/git merge
|
|
@Gondragos thank you, I added link to your comments to follow-up ticket (LEAP-2000) |
|
/help
|
Added a video to PR description, thank you for call out! |
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.
Allow users to resize selected NER regions.
adjust-spans-03.mov
The main idea is to use browser selection with styles of the region so the region expansion will look
smooth and natural. At the beginning the selection will be set to wrap the region. So users will just change
the selection during drag-n-drop, no extra code required for the visual part.
Steps to achieve this:
There are some tricky parts here: selection should be created after we started dragging,
if we create it before, then the drag will drag-n-drop the selection instead of continuing it.
Steps and flags on init:
draggableRegionanddragBackwardsto understand the directiondraggableRegionbut don't haveinitializedDrag, set it; that means we are draggingcurrentSelection;we are editing the region now
And we should reset all of them on mouseup.