openedx / frontend-app-authoring

Front-end for the Open edX Studio experience, implemented in React and Paragon.
GNU Affero General Public License v3.0
14 stars 77 forks source link

Support uploading images through the TinyMCE Editor #1398

Open ormsbee opened 1 month ago

ormsbee commented 1 month ago

Background

From courses, you can upload images in the editor via a modal dialog:

add-image

We need to implement this same functionality for content libraries.

Acceptance criteria:

  1. Modal dialog is triggered from the "Add Image" button in the Tiny MCE editor when editing HTML or ProblemBlock content in Content Libraries.
  2. Assets that have already been uploaded to the Component Version are displayed (this is available via the LibraryBlockAssetListView endpoint in Studio: /api/libraries/v2/blocks/{usage_key}/assets/. This endpoint does not contain the timestamp for when these assets were added, so just ignore that for display purposes.
  3. Images are selectable for insertion into the editor.
  4. Images are uploadable via the "Upload a New Image" button.
  5. Search and sort is not important for this release because we expect to only have a small handful of assets (unlike a course, which can have hundreds or thousands). Implement this only if it's easier than hiding it. The backend API currently returns results sorted by asset path (case-sensitive).
  6. Images in the list should display to the user without the 'static/' prefix, but they should insert into the OLX with the '/static/` prefix, per our OLX conventions (which we may not like, but which we will stay compatible with).
  7. This modal should work for both the HTML component and the ProblemBlock standard editor. Supporting the advanced problem editor is not required.
  8. These changes are only for libraries and should not impact the course editing experience in any way.
ormsbee commented 1 month ago

@Ian2012: To be clear, we want to get something thin and workable into Sumac without shooting ourselves in the foot with complexity. If there's something in here that is harder than it sounds and we can get 80% of the end goal with less effort, let's talk about it. This would be the next task after you get the inline preview working.

jmakowski1123 commented 1 month ago

This AC looks good. I'd say we could descope the search bar and sort.

ormsbee commented 1 month ago

@jmakowski1123: Changed the wording of the AC so that search/sort boils down to: "Implement this only if it's easier than hiding it." Moving it to the backlog.

dcoa commented 2 weeks ago

Hi, the PR is ready for review https://github.com/openedx/frontend-app-authoring/pull/1458 :)

bradenmacdonald commented 4 days ago

@ormsbee @jmakowski1123 This has been implemented on master by @dcoa and I think it's a huge improvement for usability of authoring text components with images. (It's not on the sandbox yet but will be next time we update it.) Do you want this backported to Sumac?

bradenmacdonald commented 1 day ago

@jmakowski1123 @sdaitzman @marcotuts @lizc577 This is now ready for acceptance testing on the sandbox. Please advise if it should be backported to Sumac. I think it's a good idea, but the PR that implemented this did introduce some other bugs that are still being fixed, so there is a little bit of risk associated with it.

Screenshot 2024-11-21 at 3 09 02 PM