Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-78096

TinyMCE - Improve image adding

XMLWordPrintable

    • MOODLE_402_STABLE
    • MOODLE_404_STABLE
    • MDL-78096-main-alt
    • Hide

      To ensure seamless testing, I am providing a sample image and PDF file to be used during the testing process.

      Image: sample.png

      PDF: sample.pdf

      Testing 1: Repositories

      Here are the steps to follow for the TinyMCE Image works with repositories:

      1. Log in to your account as the admin user.
      2. Navigate to the Site Admin > Plugins > Repositories > Manage repositories.
      3. Set the "Enable and visible" value to the Upload a file and Wikimedia repository and let the rest disabled.
      4. Navigate to the Edit Profile page.
      5. In the description editor toolbar, click the image icon
      6. Verify that there is an icon and text "You can drag and drop files here to upload or click to select." and the browse repositories button
      7. Navigate back to the Site Admin > Plugins > Repositories > Manage repositories.
      8. Disable the Upload a file repository
      9. Navigate back to the Edit Profile page.
      10. In the description editor toolbar, click the image icon
      11. Verify that there is an icon and text "Paste an image link in the field below or click the Browse Repositories button." and the browse repositories button 
      12. Navigate back to the Site Admin > Plugins > Repositories > Manage repositories.
      13. Disable the Wikimedia repository
      14. Navigate back to the Edit Profile page.
      15. In the description editor toolbar, click the image icon
      16. Verify that there is an icon and text "Paste an image link in the field below." and there is no browse repositories button.

      Testing 2: Click anywhere inside the drag-and-dropzone

      Here are the steps to follow for uploading an image:

      1. Log in to your account as the admin user.
      2. Navigate to the Edit Profile section.
      3. Click on the "Image" icon in the toolbar located in the description field.
      4. Verify that a drag-and-drop zone with the following message appears - "Drag and drop an image to upload or click to select".
      5. Open the Web developer tools and navigate to Network. Select "Regular 3G" from the Throttling dropdown.
      6. Click anywhere in the drag-and-drop zone.
      7. Verify that you are prompted with the native OS file picker.
      8. Ensure that you only see files with the image type, such as *.jpg or *.png.
      9. Select an image.
      10. Verify that you see a preloader icon with uploading progress in percentage.
      11. After the progress hits 100%, verify that you see a loading icon.
      12. After the loading is done, verify that you will see the image details.
      13. Look for a trash icon on the top right of the image preview box and click it.
      14. Verify that you are returned to the initial view.

      Testing 3: Drag and drop from the OS file manager (Continue from Testing 1)

      Here are the steps to follow for uploading an image:

      1. Open your OS file manager, such as Files, Finder or Explorer.
      2. Click and drag a non-image file, such as a PDF, to the drag-and-drop zone.
      3. If the file is not an image, you will see a warning message stating that the file type cannot be accepted.
      4. Return to your OS file manager.
      5. Click and drag an image file to the drag-and-drop zone.
      6. You will see a preloader icon indicating the uploading progress in percentage.
      7. Once the upload reaches 100%, you will see a loading icon.
      8. Once the loading is complete, you will see the image details.
      9. Click on the trash icon to delete the uploaded file.
      10. Verify that you are returned to the initial view.

      Testing 4: Insert external image URL (Continue from Testing 2)

      Here are the steps to add an external URL to an image in TinyMCE editor:

      1. In the "Or add via URL" input, paste 'https://placehold.co/600x400.png'
      2. Wait for the loading icon to disappear
      3. Check if the image details appear
      4. Verify that there is a single pixel border around the image, using the standard grey and round corners.
      5. Click on the Save button
      6. Verify that the warning message "An image must have a description unless it is marked as decorative only." appears
      7. Tick the "This image is decorative only" checkbox
      8. Select the Custom size radio button
      9. Verify there is a help icon near the width and height fields.
      10. Click the help icon
      11. Verify there is a popup window contains text:

        This image is just a preview.
        Changes to its size will be
        visible after you save it. 

      12. Verify that the Width input shows 600, the Height input shows 400 and the Keep proportion checkbox is checked
      13. Change the width to 300
      14. Verify that the height automatically changes to 200
      15. Uncheck the Keep proportion checkbox
      16. Change the width to 600
      17. Verify that the height remains at 200
      18. Click the Save button
      19. Check if the image appears in the TinyMCE editor with the exact size we set
      20. Click on the image and then on the Image icon on the toolbar
      21. Make sure the image details appear with the Custom size radio button selected and the same width and height
      22. Click on the Save button.
      23. Verify the image appears in the editor.
      Show
      To ensure seamless testing, I am providing a sample image and PDF file to be used during the testing process. Image: sample.png PDF: sample.pdf Testing 1: Repositories Here are the steps to follow for the TinyMCE Image works with repositories: Log in to your account as the admin user. Navigate to the Site Admin > Plugins > Repositories > Manage repositories. Set the "Enable and visible" value to the Upload a file and Wikimedia repository and let the rest disabled. Navigate to the Edit Profile page. In the description editor toolbar, click the image icon Verify that there is an icon and text "You can drag and drop files here to upload or click to select." and the browse repositories button Navigate back to the Site Admin > Plugins > Repositories > Manage repositories. Disable the Upload a file repository Navigate back to the Edit Profile page. In the description editor toolbar, click the image icon Verify that there is an icon and text "Paste an image link in the field below or click the Browse Repositories button." and the browse repositories button  Navigate back to the Site Admin > Plugins > Repositories > Manage repositories. Disable the Wikimedia repository Navigate back to the Edit Profile page. In the description editor toolbar, click the image icon Verify that there is an icon and text "Paste an image link in the field below." and there is no browse repositories button. Testing 2: Click anywhere inside the drag-and-dropzone Here are the steps to follow for uploading an image: Log in to your account as the admin user. Navigate to the Edit Profile section. Click on the "Image" icon in the toolbar located in the description field. Verify that a drag-and-drop zone with the following message appears - "Drag and drop an image to upload or click to select". Open the Web developer tools and navigate to Network. Select "Regular 3G" from the Throttling dropdown. Click anywhere in the drag-and-drop zone. Verify that you are prompted with the native OS file picker. Ensure that you only see files with the image type, such as *.jpg or *.png. Select an image. Verify that you see a preloader icon with uploading progress in percentage. After the progress hits 100%, verify that you see a loading icon. After the loading is done, verify that you will see the image details. Look for a trash icon on the top right of the image preview box and click it. Verify that you are returned to the initial view. Testing 3: Drag and drop from the OS file manager (Continue from Testing 1) Here are the steps to follow for uploading an image: Open your OS file manager, such as Files, Finder or Explorer. Click and drag a non-image file, such as a PDF, to the drag-and-drop zone. If the file is not an image, you will see a warning message stating that the file type cannot be accepted. Return to your OS file manager. Click and drag an image file to the drag-and-drop zone. You will see a preloader icon indicating the uploading progress in percentage. Once the upload reaches 100%, you will see a loading icon. Once the loading is complete, you will see the image details. Click on the trash icon to delete the uploaded file. Verify that you are returned to the initial view. Testing 4: Insert external image URL (Continue from Testing 2) Here are the steps to add an external URL to an image in TinyMCE editor: In the "Or add via URL" input, paste ' https://placehold.co/600x400.png' Wait for the loading icon to disappear Check if the image details appear Verify that there is a single pixel border around the image, using the standard grey and round corners. Click on the Save button Verify that the warning message "An image must have a description unless it is marked as decorative only." appears Tick the "This image is decorative only" checkbox Select the Custom size radio button Verify there is a help icon near the width and height fields. Click the help icon Verify there is a popup window contains text: This image is just a preview. Changes to its size will be visible after you save it. Verify that the Width input shows 600, the Height input shows 400 and the Keep proportion checkbox is checked Change the width to 300 Verify that the height automatically changes to 200 Uncheck the Keep proportion checkbox Change the width to 600 Verify that the height remains at 200 Click the Save button Check if the image appears in the TinyMCE editor with the exact size we set Click on the image and then on the Image icon on the toolbar Make sure the image details appear with the Custom size radio button selected and the same width and height Click on the Save button. Verify the image appears in the editor.
    • 10
    • Team Hedgehog 2023 Sprint 3.2, Team Hedgehog 2023 Sprint 3.3, Team Hedgehog 2023 Review 3, Team Hedgehog 2023 Sprint 4.1, Team Hedgehog 2023 Sprint 4.2, Team Hedgehog 2023 Sprint 4.3, Team Hedgehog 2023 Review 4, Team Hedgehog 2024 Sprint 1.1, Team Hedgehog 2024 Sprint 1.2, Team Hedgehog 2024 Sprint 1.3, Team Hedgehog 2024 Sprint 1.4

      We want to improve the user experience of adding an image in TinyMCE. Some of this work will need to be done as part of the larger project to improve the filepicker. However, there are some initial steps that can be done to improve things now.

      The first step will be to do some UX and UI design. - Done

      Refactor the existing image component of the media plugin for Tiny (lib/editor/tiny/plugins/media) to support the new workflow.
      This plugin is logically separated between image adding and media adding. Changes to the media side of the plugin are out of scope for this work (but will likley be done at a future stage).

      Implement the workflow outlined in the Figma design: https://www.figma.com/file/2R4VCwHC2tI4uEs2DfSJNg/Insert-Image--MDL-78096?type=design&node-id=222%3A326&t=APrjDCqsliAjJviz-1

      Implementing this feature will start to separate common file adding methods from the existing repositories and file manager functionality

      Notes:

      • The Add button in screenshot 2 should be disabled until there is a valid URL in the associated field
      • The "click to select" link (screen shot 2), should open the native OS file picker screenshot 3
      • Picking a file from the native OS should upload it and and return a "Draft file" instance* shown in screenshot 4
      • Dragging and dropping an image in the drop area should upload it and and return a "Draft file" instance* shown in screenshot 4
      • Clicking the browse repositories button should open the existing repository modal and the work flow there remains the same. With the result of choosing a file from the repository being a "Draft file" instance shown in screenshot 4
      • TinyMCE already supports dragging and dropping upload of images, when they are dragged into the editor area
      • The small "trash can" icon in the top right (screen shot 4) should remove the image and go back to the first upload screen
      • To be clear this won't touch the existing file picker/file manager only the TinyMCE media plugin

      *We may need to consider a loading version of drag and drop screen to handle for slow image uploads.

      ==========================

      Additional notes during sprint review (Oct 30th, 2023)

      1. The file name and URL in the Image Details section should be displayed in text format.
      2. The preview of the image should be visible without requiring the user to scroll.
      3. The delete icon is currently inaccessible. suggestion, adding a circle shape as a background for the icon to make it more noticeable.
      4. If the browse repository is disabled, we need to provide a suitable design for this scenario.

      Significant changes

      1. The preview image will not resized when the width and height are changed. We decided that it doesn't resize it anymore. Please see it in the comment https://tracker.moodle.org/browse/MDL-78096?focusedId=1043978#comment-1043978

        1. 2023-10-24_11-18.png
          24 kB
          Meirza
        2. bug_1.png
          113 kB
          Huong Nguyen
        3. bug_2.png
          136 kB
          Huong Nguyen
        4. dec11.webm
          1.65 MB
          Safat Shahin
        5. fault_2024_02_01.webm
          2.50 MB
          Safat Shahin
        6. fault.png
          26 kB
          Safat Shahin
        7. hover_long_url.png
          89 kB
          Meirza
        8. image-2024-03-27-10-43-21-631.png
          31 kB
          Matt Porritt
        9. keepproportionnotchecked.gif
          417 kB
          Sara Arjona (@sarjona)
        10. MDL-78096_1.png
          73 kB
          Meirza
        11. MDL-78096_2.png
          69 kB
          Meirza
        12. MDL-78096_3.png
          97 kB
          Meirza
        13. MDL-78096_4.png
          253 kB
          Meirza
        14. MDL-78096_4a.png
          256 kB
          Meirza
        15. MDL-78096_5.png
          253 kB
          Meirza
        16. MDL-78096_5a.png
          266 kB
          Meirza
        17. MDL-78096_6.png
          262 kB
          Meirza
        18. MDL-78096_6a.png
          272 kB
          Meirza
        19. MDL-78096_7.png
          348 kB
          Meirza
        20. MDL-78096_7a.png
          615 kB
          Meirza
        21. MDL-78096_CharactersOnTextArea.png
          22 kB
          Raquel Ortega
        22. MDL-78096_delete_icon1.png
          192 kB
          Meirza
        23. MDL-78096_delete_icon2.png
          140 kB
          Meirza
        24. MDL-78096_filename.png
          61 kB
          Meirza
        25. MDL-78096_FilePicker_Border.png
          48 kB
          Raquel Ortega
        26. MDL-78096_FilePicker_SmallScreen.png
          44 kB
          Raquel Ortega
        27. MDL-78096_imageNotCenter.png
          26 kB
          Raquel Ortega
        28. MDL-78096_IR1.png
          26 kB
          Sara Arjona (@sarjona)
        29. MDL-78096_IR2.png
          164 kB
          Sara Arjona (@sarjona)
        30. MDL-78096_IR3.png
          49 kB
          Sara Arjona (@sarjona)
        31. MDL-78096_IR4.png
          28 kB
          Sara Arjona (@sarjona)
        32. MDL-78096_norepos.png
          17 kB
          Sara Arjona (@sarjona)
        33. MDL-78096_nouploadfilerepo.png
          12 kB
          Sara Arjona (@sarjona)
        34. MDL-78096_repo_disabled.png
          17 kB
          Meirza
        35. MDL-78096_Test1_CustomSizeBox.png
          122 kB
          Raquel Ortega
        36. MDL-78096_Test1_DeleteConfirmation.png
          21 kB
          Raquel Ortega
        37. MDL-78096_Test1_Step10_OK.png
          13 kB
          Raquel Ortega
        38. MDL-78096_Test1_Step10.png
          28 kB
          Raquel Ortega
        39. MDL-78096_Test1_Step11_OK.png
          12 kB
          Raquel Ortega
        40. MDL-78096_Test1_Step11.png
          13 kB
          Raquel Ortega
        41. MDL-78096_url_string.png
          38 kB
          Meirza
        42. MDL-78096 - Testing 1 - Step 11.png
          30 kB
          Carlos Escobedo
        43. MDL-78096 - Testing 1 - Step 16.png
          24 kB
          Carlos Escobedo
        44. MDL-78096 - Testing 1 - Step 6.png
          30 kB
          Carlos Escobedo
        45. MDL-78096 - Testing 2- Step 10.png
          14 kB
          Carlos Escobedo
        46. MDL-78096 - Testing 2- Step 12.png
          162 kB
          Carlos Escobedo
        47. MDL-78096 - Testing 2 - Step 7.png
          98 kB
          Carlos Escobedo
        48. MDL-78096 - Testing 3 - Step 3.png
          32 kB
          Carlos Escobedo
        49. MDL-78096 - Testing 4 - Step 11.png
          57 kB
          Carlos Escobedo
        50. MDL-78096 - Testing 4 - Step 14.png
          44 kB
          Carlos Escobedo
        51. MDL-78096 - Testing 4 - Step 17.png
          39 kB
          Carlos Escobedo
        52. MDL-78096 - Testing 4 - Step 19.png
          24 kB
          Carlos Escobedo
        53. MDL-78096 - Testing 4 - Step 21.png
          45 kB
          Carlos Escobedo
        54. MDL-78096 - Testing 4 - Step 3.png
          42 kB
          Carlos Escobedo
        55. MDL-78096 - Testing 4 - Step 6.png
          50 kB
          Carlos Escobedo
        56. resizebiggersize.gif
          236 kB
          Sara Arjona (@sarjona)
        57. sample.pdf
          8 kB
          Meirza
        58. sample.png
          501 kB
          Meirza
        59. Screencast from 08-12-23 10 25 58.mp4
          8.42 MB
          Safat Shahin
        60. tinymce_image4-2023-11-03_09.42.16.mp4
          312 kB
          Meirza
        61. ui_bug_1.png
          74 kB
          Huong Nguyen

            meirza.arson@moodle.com Meirza
            matt.porritt@moodle.com Matt Porritt
            Raquel Ortega Raquel Ortega
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Carlos Escobedo Carlos Escobedo
            Votes:
            0 Vote for this issue
            Watchers:
            17 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 weeks, 1 day, 3 hours, 58 minutes
                4w 1d 3h 58m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.