Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WEB-1244] fix: add better image insertion and replacement logic in the editor #4508

Merged
merged 10 commits into from
May 29, 2024

Conversation

Palanikannan1437
Copy link
Collaborator

@Palanikannan1437 Palanikannan1437 commented May 17, 2024

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:

  1. 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.
  2. 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.
  3. Async/Await Refactor:

    • Replaced .then chains with async/await syntax across the image uploading plugin. This refactor simplifies the code, making it more readable and easier to maintain.
  4. 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.
  5. 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)
  6. 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.
  7. 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.
  8. 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!

@Palanikannan1437 Palanikannan1437 marked this pull request as ready for review May 18, 2024 12:51
@Palanikannan1437 Palanikannan1437 changed the title fix: add better image insertion and replacement logic in the editor [WEB-1244] fix: add better image insertion and replacement logic in the editor May 18, 2024
@Palanikannan1437 Palanikannan1437 added this to the v0.21-dev milestone May 29, 2024
@SatishGandham SatishGandham merged commit ade6ede into preview May 29, 2024
12 of 13 checks passed
@sriramveeraghanta sriramveeraghanta deleted the fix/images-error-handling-and-insertion branch May 31, 2024 12:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants