-
Improvement
-
Resolution: Fixed
-
Minor
-
4.2
-
MOODLE_402_STABLE
-
MOODLE_404_STABLE
-
MDL-78096-main-alt -
-
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)
- The file name and URL in the Image Details section should be displayed in text format.
- The preview of the image should be visible without requiring the user to scroll.
- The delete icon is currently inaccessible. suggestion, adding a circle shape as a background for the icon to make it more noticeable.
- 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
- blocks
-
MDL-80891 AI placement - Text Editor (image and text)
- Closed
- caused a regression
-
MDL-81556 Missing lang string "filename" from tiny_media
- Closed
-
MDL-81757 Uploading images to Tiny editor corrupts unicode response in errors
- Closed
-
MDL-82181 Tiny image plugin doesn't correctly observe whether files can be uploaded
- Closed
-
MDL-82718 Cannot edit broken image in TinyMCE
- Closed
- has a non-specific relationship to
-
MDL-80685 Implement image file autoresize for text editors media uploads.
- Open
- has to be done before
-
MDL-81432 TinyMCE - DIfferent behaviour between FF and Chrome
- Open
- is blocked by
-
MDL-80850 Javascript: Create core/dropzone module to handle dropzone
- Closed
- is parent of
-
MDL-82943 TinyMCE: Image & Media adding - styling uplift
- Open
- Testing discovered
-
MDL-81157 FilePicker UX issue with button color in small screens and border css issue.
- Waiting for peer review
-
MDL-81347 Fix .form-control elements width in Atto/TinyMCE
- Closed
-
MDL-81400 Fix .form-control elements width in TinyMCE media plugin
- Closed
- links to