user can now delete image in topic separately

[Israellund]

Link to Issue

Closes: #8841

Description of Changes

• User is now able to delete an image from a topic within the edit_topic_modal by clicking the "Remove image" button instead of having to manually delete the markdown.
  NOTE: This solution solves mostly for 1 image. It works for 2, but the user first has to delete the first image if they also want to delete the second image. Please let me know if you'd like for me to change the code to account for multiple images.

"How We Fixed It"

-added logic to look for ![image](<url>) in the markdown and to display an image if present. And when "Remove image" is clicked the topic gets updated without the image markdown text.

Test Plan

• make yourself an admin
• go to Topics in sidebar
• create a topic and add an image. You can also add text if you want
• to make your life easier, make sure you check "Featured topic and sidebar"
• after creating the topic go to Topics > Manage Topics and click the pencil icon of the topic you just created
• confirm that you now see the image in the Edit topic modal
• click "Remove image" and confirm that the image disappears and that the markdown is gone
• save the changes and confirm you see the toast that reads "Topic updated"

Deployment Plan

Other Considerations

[masvelio]

my general thought is that if we give user ability to add description as a rich text (or markdown) editor, then why the description in edit modal is just an inline input? Shouldn't we just put the editor component inside the modal? Your solution is kinda hacky, cause as you said, it works, but only for one image, not two etc. Adding editor to the modal should be straightforward

[Israellund]

@masvelio Yeah, I'll try putting in an editor and see how that works. I went with this current solution because a Topic has a character limit of 250, so 2 images felt like an unlikely edge case. But you're right.

[masvelio]

I would say remove the "delete image button" + fix those styling issues and will be g2g

[mzparacha]

Had similar comments as @masvelio and found another issue mentioned above. Otherwise LGTM.

[Israellund]

@masvelio @mzparacha I merged master into this branch and for some reason some of these changes got included in this PR. I only changed files relating to the edit_topic_modal and react_quill_editor

[mzparacha]

@masvelio @mzparacha I merged master into this branch and for some reason some of these changes got included in this PR. I only changed files relating to the edit_topic_modal and react_quill_editor

I had a look and seems like the linter added some minimal changes, no biggie.

[masvelio]

is this ready for review? I am still getting this issue. Basically we want editor to be scrollable inside the modal instead of being overflown. To be clear, those are two images uploaded in the quill editor

[mzparacha]

Getting this error when updating a topic description with this info

[Israellund]

Getting this error when updating a topic description with this info

Can you send me the replication steps for this?

[mzparacha]

I followed these steps

1. Create a new topic with 2 images in the description like this

upload_image_1

some_text

upload_image_2

2. Update the topic and remove upload_image_2 and save

[Israellund]

@mzparacha I am unable to replicate your bug, I have tried many different ways of adding/updating/saving and they all work perfectly for me.

[mzparacha]

I tried again and still reproducible for me.

Screen.Recording.2024-09-27.at.8.08.12.PM.mov

cc: @Israellund

[Israellund]

@mzparacha I've tried your exact steps multiple times as well as many different iterations and I still can not replicate your error. I think @masvelio and @burtonator should look at this when they get a chance and see if they see the error.

[Israellund]

@mzparacha Figured out why you were seeing the error with the help of @timolegros. Will you both take a look and let me know if it's working for you?

[mzparacha]

Worked for me, Thanks @Israellund