Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added the ability to paste Google Docs images / charts into the Composer chat for web based platforms #34971

Merged
merged 1 commit into from
Jan 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/CONST.ts
Original file line number Diff line number Diff line change
Expand Up @@ -458,6 +458,8 @@ const CONST = {
NEW_ZOOM_MEETING_URL: 'https://zoom.us/start/videomeeting',
NEW_GOOGLE_MEET_MEETING_URL: 'https://meet.google.com/new',
GOOGLE_MEET_URL_ANDROID: 'https://meet.google.com',
GOOGLE_DOC_IMAGE_LINK_MATCH: 'googleusercontent.com',
IMAGE_BASE64_MATCH: 'base64',
DEEPLINK_BASE_URL: 'new-expensify://',
PDF_VIEWER_URL: '/pdf/web/viewer.html',
CLOUDFRONT_DOMAIN_REGEX: /^https:\/\/\w+\.cloudfront\.net/i,
Expand Down
42 changes: 40 additions & 2 deletions src/components/Composer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
import * as Browser from '@libs/Browser';
import * as ComposerUtils from '@libs/ComposerUtils';
import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
import * as FileUtils from '@libs/fileDownload/FileUtils';
import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
import CONST from '@src/CONST';
Expand Down Expand Up @@ -217,16 +218,53 @@ function Composer(

const TEXT_HTML = 'text/html';

const clipboardDataHtml = event.clipboardData?.getData(TEXT_HTML) ?? '';
const clipboardDataTypesHtml = event.clipboardData?.types.includes(TEXT_HTML) ?? false;

// If paste contains files, then trigger file management
if (event.clipboardData?.files.length && event.clipboardData.files.length > 0) {
// Prevent the default so we do not post the file name into the text box
onPasteFile(event.clipboardData?.files[0]);
return;
}

// If paste contains base64 image
if (clipboardDataHtml?.includes(CONST.IMAGE_BASE64_MATCH)) {
const domparser = new DOMParser();
const pastedHTML = clipboardDataHtml;
const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML)?.images;

if (embeddedImages.length > 0 && embeddedImages[0].src) {
const src = embeddedImages[0].src;
const file = FileUtils.base64ToFile(src, 'image.png');
onPasteFile(file);
return;
}
}

// If paste contains image from Google Workspaces ex: Sheets, Docs, Slide, etc
if (clipboardDataHtml?.includes(CONST.GOOGLE_DOC_IMAGE_LINK_MATCH)) {
const domparser = new DOMParser();
const pastedHTML = clipboardDataHtml;
const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;

if (embeddedImages.length > 0 && embeddedImages[0]?.src) {
const src = embeddedImages[0].src;
if (src.includes(CONST.GOOGLE_DOC_IMAGE_LINK_MATCH)) {
fetch(src)
.then((response) => response.blob())
.then((blob) => {
const file = new File([blob], 'image.jpg', {type: 'image/jpeg'});
onPasteFile(file);
});
return;
}
}
}

// If paste contains HTML
if (event.clipboardData?.types.includes(TEXT_HTML)) {
const pastedHTML = event.clipboardData?.getData(TEXT_HTML);
if (clipboardDataTypesHtml) {
const pastedHTML = clipboardDataHtml;

const domparser = new DOMParser();
const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML).images;
Expand Down
Loading