Enhance image extension to support image uploads

What does this MR do?

NOTICE: This MR is part of a larger effort to allow inserting images in the Content Editor. To get a full picture and understand how this change fits in this goal, check: !63939 (merged)

This MR implements support for uploading images in the Content Editor. It allows uploading an image by dropping it or pasting in the editor.

Relevant documentation

• TipTap custom extensions
• TipTap Interactive views
• ProseMirror plugins
• Node views and dispatching transactions
• handlePaste and handleDrop
• someProp
• prosemirror-test-builder

Other MRs

• Insert images in the Content Editor
• Provide renderMarkdown and uploadsPath to Image extension
• Display Content Editor errors
• Upload file service
• Image node view wrapper
• Add file upload support to image extension
• Insert image toolbar button

Screenshots or Screencasts (strongly suggested)

Does this MR meet the acceptance criteria?

Conformity

• I have included changelog trailers, or none are needed. (Does this MR need a changelog?)
• I have added/updated documentation, or it's not needed. (Is documentation required?)
• I have properly separated EE content from FOSS, or this MR is FOSS only. (Where should EE code go?)
• I have added information for database reviewers in the MR description, or it's not needed. (Does this MR have database related changes?)
• I have self-reviewed this MR per code review guidelines.
• This MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines)
• I have followed the style guides.
• This change is backwards compatible across updates, or this does not apply.

Availability and Testing

• I have added/updated tests following the Testing Guide, or it's not needed. (Consider all test levels. See the Test Planning Process.)
• I have tested this MR in all supported browsers, or it's not needed.
• I have informed the Infrastructure department of a default or new setting change per definition of done, or it's not needed.

Security

Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

• Label as security and @ mention @gitlab-com/gl-security/appsec
• The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• Security reports checked/validated by a reviewer from the AppSec team

Related to #328641 (closed)

changed milestone to %14.1

added Deliverable GitLab Free Technical Writing [deprecated] Content Editor devopscreate direction documentation frontend groupeditor [DEPRECATED] sectiondev tw-weight5 typefeature workflowin dev labels

assigned to @ealcantara

mentioned in merge request !63939 (merged)

mentioned in merge request !65680 (merged)

mentioned in merge request !65684 (merged)

changed the description

	1 Message
	CHANGELOG missing: If you want to create a changelog entry for GitLab FOSS, add the Changelog trailer to the commit message you want to add to the changelog. If you want to create a changelog entry for GitLab EE, also add the EE: true trailer to your commit message. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

Reviewer roulette

Changes that require review have been detected!

Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:

Category	Reviewer	Maintainer
frontend	André Luís (@andr3) (UTC+1, 5 hours ahead of @ealcantara)	Olena HK. (@ohoral) (UTC+3, 7 hours ahead of @ealcantara)

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

changed the description

mentioned in merge request !65765 (merged)

Allure report

allure-report-publisher generated test report for 9b558f53!

review-qa-smoke: test report

marked the checklist item Provide renderMarkdown and uploadsPath to Image extension as completed

marked the checklist item Image node view wrapper as completed

added 156 commits

• 311571f9...e2a94766 - 155 commits from branch 328641-insert-images/upload-file-service
• 03dd5dc0 - Enhance image extension to support image uploads

Compare with previous version

changed the description

added 1 commit

• 533b4b0c - Enhance image extension to support image uploads

Compare with previous version

added 1 commit

• c08da444 - Enhance image extension to support image uploads

Compare with previous version

added 1 commit

• baa49bba - Enhance image extension to support image uploads

Compare with previous version

@rob.hunt: Since you already have some context on this feature, could you review this MR, please? This one is a inevitably larger than the previous one but there are few moving parts.

I left some documentation references for the APIs used in the MR. Please, do not send to a maintainer for review.

requested review from @rob.hunt

changed the description

removed review request for @rob.hunt

mentioned in issue gitlab-com/www-gitlab-com#10293 (closed)

deleted the 328641-insert-images/upload-file-service branch. This merge request now targets the master branch

added 172 commits

• baa49bba...c0224f12 - 171 commits from branch master
• 5b86aaa8 - Enhance image extension to support image uploads

Compare with previous version

marked the checklist item Upload file service as completed

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 62b147f1 and 9b558f53

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	3.09 MB	3.09 MB	-	0.0 %
mainChunk	1.84 MB	1.84 MB	-	0.0 %

---

Note: We do not have exact data for 62b147f1. So we have used data from: ae94bd46.
The target commit was too new, so we used the latest commit from master we have info on.
It might help to rerun the bundle-size-review job
This might mean that you have a few false positives in this report. If something unrelated to your code changes is reported, you can check this comparison in order to see if they caused this change.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

added 1 commit

• ebf3e20b - Enhance image extension to support image uploads

Compare with previous version

added 1 commit

• 31406320 - Enhance image extension to support image uploads

Compare with previous version

requested review from @rob.hunt

added 1 commit

• 9b558f53 - Enhance image extension to support image uploads

Compare with previous version

approved this merge request

removed review request for @rob.hunt

@ohoral: Could you review this MR, please?

requested review from @ohoral

approved this merge request

resolved all threads

added workflowin review label and removed workflowin dev label

enabled an automatic merge when the pipeline for acfc0aea succeeds

merged

mentioned in commit 4287fcf3

added workflowcanary label and removed workflowin review label

added workflowproduction label and removed workflowcanary label

added releasedcandidate label

removed documentation label