Add thumbnail to dropzone when pasting images in to comments #20147

tyroneyeh · 2022-06-27T02:07:22Z

When pasting images into comment with an attached dropzone, add a thumbnail into the dropzone area.

Closes #20130

codecov-commenter · 2022-06-27T02:45:50Z

Codecov Report

❗ No coverage uploaded for pull request base (main@97bfabc). Click here to learn what that means.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main   #20147   +/-   ##
=======================================
  Coverage        ?   46.93%           
=======================================
  Files           ?      973           
  Lines           ?   134788           
  Branches        ?        0           
=======================================
  Hits            ?    63265           
  Misses          ?    63772           
  Partials        ?     7751

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 97bfabc...1466001. Read the comment docs.

zeripath · 2022-06-28T00:29:40Z

Closes #20130

Doesn't describe what this PR is doing and what it is fixing.

Please update your description to make this clearer.

I've done this for you.

tyroneyeh · 2022-06-28T00:56:30Z

Closes #20130
Doesn't describe what this PR is doing and what it is fixing.

Please update your description to make this clearer.

I've done this for you.

Thank you very much

wxiaoguang

I will take a look at this later (and make some changes). For exmplae:

this.element.parentElement.parentElement.querySelector('textarea')._data_easyMDE;, is not ideal to access the internal member, there was a helper function (getAttachedEasyMDE).

And the duplicate code like dropzone.dropzone.emit could be removed after #19776 .

And there are two different editors, one is EasyMDE, one is textarea, I do not think editor.value(editor.value().replace(oldval, '')); is suitable for both of them (maybe it's suitable, I will confirm later ... 😊)

wxiaoguang · 2022-06-28T02:42:40Z

I made some changes:

Bug fix:
- the removal doesn't work for simple textarea
- the removal seems not working for edit on existing comment
Refactaor
- add files to dropzone in uploadFile, only one copy of the code
- introduce general removeUploadedFileFromEditor
Improvment
- use regexp to remove texts in editor. eg: user may upload with filename "unamed" and get ![unamed](...), then they may change the text to ![MyDocName](...), the new logic can remove such changed text correctly.
TODO
- the logic in initGlobalDropzone is still fragile
- the fileUuidDict is very suspicious

Although there are still TODOs, I have left comments there. I think this PR has done what it should do.

done

# Conflicts: # web_src/js/features/comp/ImagePaste.js # web_src/js/features/repo-legacy.js

wxiaoguang · 2022-06-28T18:39:31Z

Hmm ... still some tricky bugs. I think I have fixed most of them and tested these pages: comment (new/edit), pull-request (new/edit/approve), release edit.

Almost done from my side. If no objection, I could vote a L-G-T-M after several days.

tyroneyeh · 2022-06-28T22:14:02Z

Hmm ... still some tricky bugs. I think I have fixed most of them and tested these pages: comment (new/edit), pull-request (new/edit/approve), release edit.

Almost done from my side. If no objection, I could vote a L-G-T-M after several days.

gitea/web_src/js/features/repo-legacy.js

Line 414 in f07b0de

dz.emit('reload');

Maybe this is the event that triggers the removal of the file. If the pages are all refreshed, is this reload required?

wxiaoguang · 2022-06-29T01:02:02Z

Some reload events are for AJAX comment edit. For example, you click the Edit in the menu for an existing comment, cancel, and edit it again.

Some trivial logics here are still not 100% correct, but they were there and could be considered as out scope of this PR, so I think this PR is enough at the moment. Feel free to do more tests to see whether everything works.

FYI, the editor related pages are (IIRC):

New Issue / View Issue: new comment, edit comment
New PR / View PR: new comment, edit comment, approve/reject PR
Release: New / Edit

(and every EasyMDE editor has simple textarea mode)

tyroneyeh · 2022-06-29T15:23:09Z

I tried to change it to use the dropzone upload method directly, and at the same time add a drag and drop event in the input window, and attach the demo video and patch

Screen.Recording.2022-06-29.at.23.13.18.mov

ImproveImagePaste.patch.zip

tyroneyeh · 2022-07-05T06:10:21Z

Hi @wxiaoguang any suggestions?

wxiaoguang · 2022-07-05T06:40:08Z

I haven't got time to test your new patch. Since the insert code changes again, have you tested it with simple textarea mode?

Update: maybe you can propose a new PR (to replace this one) for supporting dragdrop uploading and use it to replace legacy pasting uploading.

tyroneyeh · 2022-07-05T07:20:30Z

The simple text area mode can be uploaded normally, but the link of the attachment is not pasted to text area, I am researching this problem, thank you

tyroneyeh · 2022-07-05T10:24:45Z

So don't want this PR anymore? close it?

tyroneyeh · 2022-07-06T07:03:57Z

I created a new PR #20263, so close this
Thanks

wxiaoguang · 2022-10-28T13:08:45Z

Maybe we can take this one first, IIRC I might have fixed the bug in this PR:

Issue images can not be deleted #21588

The new PR (#20263 (comment)) is much more complex and I'm afraid it will be too difficult to maintain in the future, and I haven't got time to test or optimize it.

Close #24195 Some of the changes are taken from my another fix f07b0de in #20147 (although that PR was discarded ....) The bug is: 1. The old code doesn't handle `removedfile` event correctly 2. The old code doesn't provide attachments for type=CommentTypeReview This PR doesn't intend to refactor the "upload" code to a perfect state (to avoid making the review difficult), so some legacy styles are kept. --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Giteabot <teabot@gitea.io>

tyroneyeh added 3 commits June 27, 2022 09:08

Add paste images legend function

bc8d508

Adjust editor define postition

9adeab8

Combine const

1466001

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jun 27, 2022

Gusted added this to the 1.18.0 milestone Jun 27, 2022

zeripath changed the title ~~20130 add paste image legend~~ Add thumbnail to dropzone when pasting images in to comments Jun 28, 2022

zeripath approved these changes Jun 28, 2022

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Jun 28, 2022

wxiaoguang previously requested changes Jun 28, 2022

View reviewed changes

refactor

0fbe301

decouple cycle-import

6747657

wxiaoguang requested a review from zeripath June 28, 2022 02:50

wxiaoguang added 3 commits June 29, 2022 01:54

Merge branch 'main' into 20130_add_paste_image_legend

63f9cc2

# Conflicts: # web_src/js/features/comp/ImagePaste.js # web_src/js/features/repo-legacy.js

fix merge, fix the bug for the removal of saved comment's attachments

c6c05b2

fix removal bug

f07b0de

fix

7f23b59

Merge branch 'go-gitea:main' into 20130_add_paste_image_legend

fef017c

tyroneyeh mentioned this pull request Jul 6, 2022

Refactor to use dropzone native methods upload files #20263

Closed

tyroneyeh closed this Jul 6, 2022

tyroneyeh deleted the 20130_add_paste_image_legend branch July 17, 2022 14:45

wxiaoguang mentioned this pull request Oct 28, 2022

Issue images can not be deleted #21588

Closed

lunny removed this from the 1.18.0 milestone Dec 20, 2022

wxiaoguang mentioned this pull request Apr 19, 2023

Fix issue attachment handling #24202

Merged

go-gitea locked and limited conversation to collaborators May 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add thumbnail to dropzone when pasting images in to comments #20147

Add thumbnail to dropzone when pasting images in to comments #20147

tyroneyeh commented Jun 27, 2022 •

edited by zeripath

Loading

codecov-commenter commented Jun 27, 2022

zeripath commented Jun 28, 2022 •

edited

Loading

tyroneyeh commented Jun 28, 2022

wxiaoguang left a comment •

edited

Loading

wxiaoguang commented Jun 28, 2022

wxiaoguang commented Jun 28, 2022

tyroneyeh commented Jun 28, 2022

wxiaoguang commented Jun 29, 2022

tyroneyeh commented Jun 29, 2022

tyroneyeh commented Jul 5, 2022

wxiaoguang commented Jul 5, 2022 •

edited

Loading

tyroneyeh commented Jul 5, 2022

tyroneyeh commented Jul 5, 2022

tyroneyeh commented Jul 6, 2022

wxiaoguang commented Oct 28, 2022

Add thumbnail to dropzone when pasting images in to comments #20147

Add thumbnail to dropzone when pasting images in to comments #20147

Conversation

tyroneyeh commented Jun 27, 2022 • edited by zeripath Loading

codecov-commenter commented Jun 27, 2022

Codecov Report

zeripath commented Jun 28, 2022 • edited Loading

tyroneyeh commented Jun 28, 2022

wxiaoguang left a comment • edited Loading

Choose a reason for hiding this comment

wxiaoguang commented Jun 28, 2022

wxiaoguang commented Jun 28, 2022

tyroneyeh commented Jun 28, 2022

wxiaoguang commented Jun 29, 2022

tyroneyeh commented Jun 29, 2022

tyroneyeh commented Jul 5, 2022

wxiaoguang commented Jul 5, 2022 • edited Loading

tyroneyeh commented Jul 5, 2022

tyroneyeh commented Jul 5, 2022

tyroneyeh commented Jul 6, 2022

wxiaoguang commented Oct 28, 2022

tyroneyeh commented Jun 27, 2022 •

edited by zeripath

Loading

zeripath commented Jun 28, 2022 •

edited

Loading

wxiaoguang left a comment •

edited

Loading

wxiaoguang commented Jul 5, 2022 •

edited

Loading