fix: Drag drop handle's behavior fixed on mouse leave #3401
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
This fix adds support for hiding the drag handle when the cursor leaves the editor container. It improves the user experience by providing a cleaner interface and removing unnecessary visual elements especially while scrolling. - Add `hideDragHandle` prop to `EditorContainer` component in `editor-container.tsx`. - Implement `onMouseLeave` event handler in `EditorContainer` to invoke `hideDragHandle` function. - Update `DragAndDrop` extension in `drag-drop.tsx` to accept a `setHideDragHandle` function as an optional parameter. - Pass the `setHideDragHandle` function from `RichTextEditor` component to `DragAndDrop` extension in `RichTextEditorExtensions` function in `index.tsx`. - Set `hideDragHandleOnMouseLeave` state in `RichTextEditor` component to store the `hideDragHandlerFromDragDrop` function. - Create `setHideDragHandleFunction` callback function in `RichTextEditor` to update the `hideDragHandleOnMouseLeave` state. - Pass `hideDragHandleOnMouseLeave` as `hideDragHandle` prop to `EditorContainer` component in `RichTextEditor`.
Palanikannan1437
changed the title
sriramveeraghanta
approved these changes
Jan 18, 2024
sriramveeraghanta
pushed a commit
that referenced
this pull request
Jan 22, 2024
This fix adds support for hiding the drag handle when the cursor leaves the editor container. It improves the user experience by providing a cleaner interface and removing unnecessary visual elements especially while scrolling. - Add `hideDragHandle` prop to `EditorContainer` component in `editor-container.tsx`. - Implement `onMouseLeave` event handler in `EditorContainer` to invoke `hideDragHandle` function. - Update `DragAndDrop` extension in `drag-drop.tsx` to accept a `setHideDragHandle` function as an optional parameter. - Pass the `setHideDragHandle` function from `RichTextEditor` component to `DragAndDrop` extension in `RichTextEditorExtensions` function in `index.tsx`. - Set `hideDragHandleOnMouseLeave` state in `RichTextEditor` component to store the `hideDragHandlerFromDragDrop` function. - Create `setHideDragHandleFunction` callback function in `RichTextEditor` to update the `hideDragHandleOnMouseLeave` state. - Pass `hideDragHandleOnMouseLeave` as `hideDragHandle` prop to `EditorContainer` component in `RichTextEditor`.
sriramveeraghanta
pushed a commit
that referenced
this pull request
Jan 22, 2024
This fix adds support for hiding the drag handle when the cursor leaves the editor container. It improves the user experience by providing a cleaner interface and removing unnecessary visual elements especially while scrolling. - Add `hideDragHandle` prop to `EditorContainer` component in `editor-container.tsx`. - Implement `onMouseLeave` event handler in `EditorContainer` to invoke `hideDragHandle` function. - Update `DragAndDrop` extension in `drag-drop.tsx` to accept a `setHideDragHandle` function as an optional parameter. - Pass the `setHideDragHandle` function from `RichTextEditor` component to `DragAndDrop` extension in `RichTextEditorExtensions` function in `index.tsx`. - Set `hideDragHandleOnMouseLeave` state in `RichTextEditor` component to store the `hideDragHandlerFromDragDrop` function. - Create `setHideDragHandleFunction` callback function in `RichTextEditor` to update the `hideDragHandleOnMouseLeave` state. - Pass `hideDragHandleOnMouseLeave` as `hideDragHandle` prop to `EditorContainer` component in `RichTextEditor`.
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.
The What? 馃
This fix adds support for hiding the drag handle when the cursor leaves the editor container by figuring out a way to communicate between the Drag-Drop Plugin's native methods and our web app.
The Why? 馃え
It improves the user experience by providing a cleaner interface and removing unnecessary visual elements especially while scrolling when the drag handle is visible at the wrong places even when your cursor is out of the container.
The How? 馃
hideDragHandleprop toEditorContainercomponent ineditor-container.tsx.onMouseLeaveevent handler inEditorContainerto invokehideDragHandlefunction that the Drag-Drop plugin exposes.DragAndDropextension indrag-drop.tsxto accept asetHideDragHandlefunction as an optional parameter.setHideDragHandlefunction fromRichTextEditorcomponent toDragAndDropextension inRichTextEditorExtensionsfunction inindex.tsx.hideDragHandleOnMouseLeavestate inRichTextEditorcomponent to store thehideDragHandlerFromDragDropfunction.setHideDragHandleFunctioncallback function inRichTextEditorto update thehideDragHandleOnMouseLeavestate.hideDragHandleOnMouseLeaveashideDragHandleprop toEditorContainercomponent inRichTextEditor.The Result 馃槍
Before
before.mov
After
after.mov