plane
plane copied to clipboard
[WEB-1244] fix: add better image insertion and replacement logic in the editor
Pull Request Description
This pull request introduces several enhancements and refactors to the image upload functionality within the editor. The changes aim to improve robustness, maintainability, and user experience.
Changes:
-
Robust Placeholder Logic:
- Implemented more robust logic for inserting and replacing placeholder preview images with the actual images using unique IDs for each placeholder. This ensures accurate tracking and replacement of each image upload in the editor with it's placeholder once the upload has completed successfully and have avoided relative positions now.
-
Improved Error Handling:
- Enhanced error handling logic to manage various invalid states during image uploads, including handling errors when cancelling ongoing uploads. This ensures the editor remains stable and provides clear feedback to the user in case of errors.
-
Async/Await Refactor:
- Replaced
.thenchains withasync/awaitsyntax across the image uploading plugin. This refactor simplifies the code, making it more readable and easier to maintain.
- Replaced
-
Code Refactoring:
- Refactored the codebase to improve organization and readability. This includes separating concerns into different modules, using factory functions for creating placeholders and cancel buttons, and applying the Command pattern for encapsulating actions.
-
Enhanced Image Type Validation:
- Added more validations to ensure that only supported image types (JPEG, JPG, PNG, WEBP, SVG) are allowed when dropping images onto the editor. This prevents unsupported file types from being uploaded (tiff etc)
-
Placeholder Text Removal:
- Removed placeholder text while the image is loading to provide a cleaner user experience. This ensures that the editor only displays relevant content during the upload process.
-
Type Fixes and Plugin Improvements:
- Fixed type definitions and improved the Deletion and Restoration plugins for images. This ensures that the plugins work correctly and efficiently with the updated image upload logic.
-
Loading State Exposure:
- Exposed a reference that can subscribe to the editor's internal "loading" states. This allows the application to stop certain events (e.g., discarding or submitting an issue) while an image is uploading. A toast message "Editor is still processing changes. Please wait before proceeding." is shown to inform the user.
Why These Changes Were Made:
- Robustness: To ensure that the image upload process is reliable and handles all edge cases gracefully to insert at the correct position irrespective of the cursor position.
- User Experience: To provide a smoother and more intuitive experience for users uploading images, especially while working with the editor in a modal/closable interface.
- Maintainability: To make the codebase easier to understand, extend, and maintain by following best practices and design patterns.
- Validation: To prevent unsupported file types from being uploaded, ensuring compatibility and security.
How These Changes Were Tested:
- Manual Testing: Performed extensive manual testing to verify that the image upload process works as expected, including handling errors and cancelling uploads.
Please review the changes and provide feedback. Thank you!