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

            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.