`Communication`: Allow users to paste images from the clipboard #9637

pzdr7 · 2024-10-30T07:55:13Z

Checklist

General

I tested all changes and their related features with all corresponding user types on a test server.
I chose a title conforming to the naming conventions for pull requests.

Client

Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
I strictly followed the client coding and design guidelines.
I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
I documented the TypeScript code using JSDoc style.
I added multiple screenshots/screencasts of my UI changes.

Motivation and Context

It's currently not possible to (like on GitHub) paste images into the Markdown editor using the keyboard shortcut CTRL+V/Cmd+V.

Description

Added a paste listener that checks for images (and only images) in the clipboard and embeds them in the editor. Also, added some basic tests to improve the coverage.

Steps for Testing

Prerequisites:

1 Student
1 Course with communication enabled

Take a screenshot of something, ensuring that the result is in your clipboard after.
Navigate to the communication page of your course and open a channel.
Write a message and paste an image into the Markdown editor by using CTRL+V (if you are on MacOS: Cmd+V). Note that your browser may prompt you once for clipboard access. Firefox will always prompt you.
Send the message and ensure the image was embedded.
Paste some regular text as well with CTRL+V / Cmd+V and ensure that it still works

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked
Click on the badges to get to the test servers.

Review Progress

Code Review

Code Review 1
Code Review 2

Manual Tests

Test 1
Test 2

Test Coverage

Client

Class/File	Line Coverage	Confirmation (assert/expect)
markdown-editor-monaco.component.ts	97.47%	✅
monaco-text-editor.adapter.ts	96%	✅
file-uploader.service.ts	100%	✅ (file not modified)
attachment.action.ts	100%	✅

Screenshots

Screencast.from.29.10.2024.14_41_19.webm

Summary by CodeRabbit

Release Notes

New Features
- Enhanced file upload capabilities in the Markdown editor, allowing users to upload files directly and receive feedback on upload status.
- Added functionality to handle paste events, enabling users to register actions when text is pasted into the editor.
Bug Fixes
- Improved error handling during file uploads, providing alerts for failed uploads.
Tests
- Expanded test coverage for file uploads and paste actions, ensuring robust functionality and user feedback in various scenarios.

This reverts commit 754bdf3.

This reverts commit aa57a07.

HanyangXu0508

Every thing works well.

coolchock

code LGTM

HanyangXu0508

tested locally and works as expected

JanaNF

Manual tested on TS2 in Chrome. Worked as expected

Feras797

Tested on TS1, everything works as described

florian-glombik

Approve code

I left 2 comments that could be addressed, however, I have no hard feelings there and it might be a matter of taste anyways

florian-glombik · 2024-11-03T17:35:05Z

src/main/webapp/app/shared/monaco-editor/model/actions/attachment.action.ts

+            for (const clipboardItem of clipboardItems) {
+                for (const type of clipboardItem.types) {
+                    if (type.startsWith('image/')) {
+                        // Map image type to extension.
+                        const extension = type.replace('image/', '');
+                        const blob = await clipboardItem.getType(type);
+                        files.push(new File([blob], `image.${extension}`, { type }));
+                        break;
+                    }
+                }
+            }


I think that this should be a method on its own, from my point of view it would make the method easier to understand if it was a method with a descriptive name

florian-glombik · 2024-11-03T17:38:34Z

src/test/javascript/spec/helpers/mocks/service/mock-clipboard-item.ts

+export class MockClipboardItem {
+    types: string[];
+
+    getType(_type: string): Promise<Blob> {


I think this might be worth adding a comment in the code here as well 😅

pzdr7 added 6 commits October 29, 2024 13:44

Add image paste

f3f34a7

Experimental: Disable contextmenu?

aa57a07

Experimental: Allow native paste?

754bdf3

Revert "Experimental: Allow native paste?"

a1e034f

This reverts commit 754bdf3.

Revert "Experimental: Disable contextmenu?"

6636150

This reverts commit aa57a07.

Add client tests

7183b2c

github-actions bot assigned pzdr7 Oct 30, 2024

github-actions bot added tests client Pull requests that update TypeScript code. (Added Automatically!) labels Oct 30, 2024

pzdr7 and others added 2 commits October 30, 2024 08:55

Merge branch 'develop' into chore/communication/paste-images

6237fee

Fix build error

91d02e6

krusche added this to the 7.6.5 milestone Oct 30, 2024

pzdr7 added the deploy:artemis-test1 label Oct 30, 2024

pzdr7 temporarily deployed to artemis-test1.artemis.cit.tum.de October 30, 2024 09:08 — with GitHub Actions Inactive

github-actions bot added lock:artemis-test1 and removed deploy:artemis-test1 labels Oct 30, 2024

pzdr7 added deploy:artemis-test2 and removed lock:artemis-test1 labels Oct 30, 2024

pzdr7 temporarily deployed to artemis-test2.artemis.cit.tum.de October 30, 2024 10:01 — with GitHub Actions Inactive

github-actions bot added lock:artemis-test2 and removed deploy:artemis-test2 labels Oct 30, 2024

Reduce prompts on Firefox

81d2094

pzdr7 added deploy:artemis-test2 and removed lock:artemis-test2 labels Oct 30, 2024

pzdr7 temporarily deployed to artemis-test2.artemis.cit.tum.de October 30, 2024 10:49 — with GitHub Actions Inactive

github-actions bot added lock:artemis-test2 and removed deploy:artemis-test2 labels Oct 30, 2024

pzdr7 removed the lock:artemis-test2 label Oct 30, 2024

pzdr7 and others added 2 commits October 31, 2024 11:19

Merge branch 'develop' into chore/communication/paste-images

83743c8

Disable embedFiles if enableFileUpload is false

bd94dd4

HanyangXu0508 removed the deploy:artemis-test2 label Nov 2, 2024

HanyangXu0508 approved these changes Nov 2, 2024

View reviewed changes

pzdr7 removed the lock:artemis-test1 label Nov 2, 2024

coolchock approved these changes Nov 2, 2024

View reviewed changes

HanyangXu0508 self-requested a review November 3, 2024 11:59

HanyangXu0508 approved these changes Nov 3, 2024

View reviewed changes

JanaNF added the deploy:artemis-test2 label Nov 3, 2024

JanaNF temporarily deployed to artemis-test2.artemis.cit.tum.de November 3, 2024 12:29 — with GitHub Actions Inactive

github-actions bot added lock:artemis-test2 and removed deploy:artemis-test2 labels Nov 3, 2024

JanaNF approved these changes Nov 3, 2024

View reviewed changes

JanaNF removed the lock:artemis-test2 label Nov 3, 2024

Feras797 added the deploy:artemis-test1 label Nov 3, 2024

Feras797 temporarily deployed to artemis-test1.artemis.cit.tum.de November 3, 2024 13:00 — with GitHub Actions Inactive

github-actions bot added lock:artemis-test1 and removed deploy:artemis-test1 labels Nov 3, 2024

Feras797 approved these changes Nov 3, 2024

View reviewed changes

Feras797 removed the lock:artemis-test1 label Nov 3, 2024

florian-glombik approved these changes Nov 3, 2024

View reviewed changes

krusche merged commit 9a4f832 into develop Nov 3, 2024
120 of 122 checks passed

krusche deleted the chore/communication/paste-images branch November 3, 2024 18:39

krusche added the ready to merge label Nov 3, 2024

This was referenced Nov 3, 2024

Communication: Add additional input formatting options #9657

Merged

Development: Use signals in lecture add attachment form #9656

Merged

flbrgit added the deploy:artemis-test2 label Nov 4, 2024

flbrgit had a problem deploying to artemis-test2.artemis.cit.tum.de November 4, 2024 10:16 — with GitHub Actions Failure

github-actions bot added deployment-error Added by deployment workflows if an error occured and removed deploy:artemis-test2 labels Nov 4, 2024

coderabbitai bot mentioned this pull request Dec 2, 2024

Communication: Fix an issue with list formatting in Markdown #9925

Merged

9 tasks

coderabbitai bot mentioned this pull request Dec 13, 2024

Communication: Add shortcut to private messages on usernames #10007

Merged

17 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`Communication`: Allow users to paste images from the clipboard #9637

`Communication`: Allow users to paste images from the clipboard #9637

pzdr7 commented Oct 30, 2024 •

edited

Loading

HanyangXu0508 left a comment

coolchock left a comment

HanyangXu0508 left a comment

JanaNF left a comment

Feras797 left a comment

florian-glombik left a comment

florian-glombik Nov 3, 2024 •

edited

Loading

florian-glombik Nov 3, 2024

Communication: Allow users to paste images from the clipboard #9637

Communication: Allow users to paste images from the clipboard #9637

Conversation

pzdr7 commented Oct 30, 2024 • edited Loading

Checklist

General

Client

Motivation and Context

Description

Steps for Testing

Testserver States

Review Progress

Code Review

Manual Tests

Test Coverage

Client

Screenshots

Summary by CodeRabbit

Release Notes

HanyangXu0508 left a comment

Choose a reason for hiding this comment

coolchock left a comment

Choose a reason for hiding this comment

HanyangXu0508 left a comment

Choose a reason for hiding this comment

JanaNF left a comment

Choose a reason for hiding this comment

Feras797 left a comment

Choose a reason for hiding this comment

florian-glombik left a comment

Choose a reason for hiding this comment

florian-glombik Nov 3, 2024 • edited Loading

Choose a reason for hiding this comment

florian-glombik Nov 3, 2024

Choose a reason for hiding this comment

`Communication`: Allow users to paste images from the clipboard #9637

`Communication`: Allow users to paste images from the clipboard #9637

pzdr7 commented Oct 30, 2024 •

edited

Loading

florian-glombik Nov 3, 2024 •

edited

Loading