From 31656361667c5ec352e5f9dd5a9e497770d8d8d2 Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Mon, 21 Aug 2023 12:16:49 +0200
Subject: [PATCH 01/26] Add initial dialog

---
 gatsby-browser.tsx                   |  10 ++-
 src/components/feedbackButton.tsx    |  24 ++++++
 src/components/feedbackModal.tsx     | 118 +++++++++++++++++++++++++++
 src/components/feedbackWidget.tsx    |  20 +++++
 src/components/hooks/useFocusTrap.ts |  48 +++++++++++
 src/components/hooks/useShortcut.ts  |  35 ++++++++
 6 files changed, 254 insertions(+), 1 deletion(-)
 create mode 100644 src/components/feedbackButton.tsx
 create mode 100644 src/components/feedbackModal.tsx
 create mode 100644 src/components/feedbackWidget.tsx
 create mode 100644 src/components/hooks/useFocusTrap.ts
 create mode 100644 src/components/hooks/useShortcut.ts

diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
index 7a9b945f6e4c2..e788d0a5e737a 100644
--- a/gatsby-browser.tsx
+++ b/gatsby-browser.tsx
@@ -1,12 +1,20 @@
 import React from 'react';
 import {GatsbyBrowser} from 'gatsby';
 
+import {FeebdackWidget} from 'sentry-docs/components/feedbackWidget';
 import PageContext from 'sentry-docs/components/pageContext';
 
 export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({
   element,
   props: {pageContext},
-}) => <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>;
+}) => {
+  return (
+    <React.Fragment>
+      <FeebdackWidget />
+      <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>
+    </React.Fragment>
+  );
+};
 
 // Disable prefetching altogether so our bw is not destroyed.
 // If this turns out to hurt performance significantly, we can
diff --git a/src/components/feedbackButton.tsx b/src/components/feedbackButton.tsx
new file mode 100644
index 0000000000000..f0821815156bd
--- /dev/null
+++ b/src/components/feedbackButton.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+const Button = styled.button`
+  position: fixed;
+  right: 0px;
+  bottom: 50%;
+  transform: translate(25%, 50%) rotate(-90deg);
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  color: #333;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 6px 16px;
+  text-align: center;
+  text-decoration: none;
+  z-index: 9000;
+`;
+
+export function FeebdackButton(props) {
+  return <Button {...props}>Feedback</Button>;
+}
diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
new file mode 100644
index 0000000000000..230ac9d0cd341
--- /dev/null
+++ b/src/components/feedbackModal.tsx
@@ -0,0 +1,118 @@
+import React, {FormEvent} from 'react';
+import styled from '@emotion/styled';
+
+import {useFocusTrap} from './hooks/useFocusTrap';
+import {useShortcut} from './hooks/useShortcut';
+
+const Dialog = styled.dialog`
+  background-color: rgba(0, 0, 0, 0.05);
+  border: none;
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:not([open]) {
+    opacity: 0;
+    pointer-events: none;
+  }
+`;
+
+const Content = styled.div`
+  border-radius: 4px;
+  background-color: #fff;
+  padding: 24px;
+  width: 500px;
+  max-width: 100%;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.2);
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const Label = styled.label`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const SubmitButton = styled.button`
+  background-color: #79628c;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  color: #fff;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 6px 16px;
+  align-self: flex-end;
+`;
+
+interface FeedbackModalProps {
+  onClose: () => void;
+  onSubmit: (data: {comment: string; title: string}) => void;
+  open: boolean;
+}
+
+function stopPropagation(e: React.MouseEvent) {
+  e.stopPropagation();
+}
+
+const retrieveStringValue = (formData: FormData, key: string) => {
+  const value = formData.get(key);
+  if (typeof value === 'string') {
+    return value.trim();
+  }
+  return '';
+};
+
+export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
+  const dialogRef = React.useRef<HTMLDialogElement>(null);
+  const formRef = React.useRef<HTMLFormElement>(null);
+
+  useFocusTrap(dialogRef, open);
+
+  useShortcut('Escape', onClose);
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    onSubmit({
+      comment: retrieveStringValue(formData, 'comment'),
+      title: retrieveStringValue(formData, 'title'),
+    });
+    formRef.current.reset();
+  };
+
+  return (
+    <Dialog open={open} ref={dialogRef} onClick={onClose}>
+      <Content onClick={stopPropagation}>
+        <Form ref={formRef} onSubmit={handleSubmit}>
+          <Label>
+            Title:
+            <input required type="text" name="title" placeholder="Enter a subject" />
+          </Label>
+          <Label>
+            Comment:
+            <textarea
+              onKeyDown={event => {
+                if (event.key === 'Enter' && event.ctrlKey) {
+                  formRef.current.requestSubmit();
+                }
+              }}
+              name="title"
+              placeholder="Explain what bothers you"
+            />
+          </Label>
+          <SubmitButton type="submit">Submit</SubmitButton>
+        </Form>
+      </Content>
+    </Dialog>
+  );
+}
diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
new file mode 100644
index 0000000000000..dfc3eb5def159
--- /dev/null
+++ b/src/components/feedbackWidget.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {FeebdackButton} from './feedbackButton';
+import {FeedbackModal} from './feedbackModal';
+
+export function FeebdackWidget() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSubmit = (data: {comment: string; title: string}) => {
+    console.log(data);
+    setOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      {!open && <FeebdackButton onClick={() => setOpen(true)} />}
+      <FeedbackModal open={open} onSubmit={handleSubmit} onClose={() => setOpen(false)} />
+    </React.Fragment>
+  );
+}
diff --git a/src/components/hooks/useFocusTrap.ts b/src/components/hooks/useFocusTrap.ts
new file mode 100644
index 0000000000000..b8f7a8c914973
--- /dev/null
+++ b/src/components/hooks/useFocusTrap.ts
@@ -0,0 +1,48 @@
+import {useEffect} from 'react';
+
+export const focusableElements = [
+  'input:not([disabled]):not([type="hidden"])',
+  'textarea:not([disabled])',
+  'button:not([disabled])',
+].join(',');
+
+export const useFocusTrap = (ref: React.RefObject<HTMLElement>, autofocus?: boolean) => {
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return () => {};
+    }
+    const focusable = element.querySelectorAll(focusableElements);
+    const firstFocusable = focusable[0] as HTMLElement;
+    const lastFocusable = focusable[focusable.length - 1] as HTMLElement;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Tab') {
+        if (event.shiftKey) {
+          if (document.activeElement === firstFocusable) {
+            lastFocusable.focus();
+            event.preventDefault();
+          }
+        } else if (document.activeElement === lastFocusable) {
+          firstFocusable.focus();
+          event.preventDefault();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [ref]);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (element && autofocus) {
+      const focusable = element.querySelectorAll(focusableElements);
+      const firstFocusable = focusable[0] as HTMLElement;
+      firstFocusable.focus();
+    }
+  }, [ref, autofocus]);
+};
diff --git a/src/components/hooks/useShortcut.ts b/src/components/hooks/useShortcut.ts
new file mode 100644
index 0000000000000..aaaf5dc6a722a
--- /dev/null
+++ b/src/components/hooks/useShortcut.ts
@@ -0,0 +1,35 @@
+import {useEffect} from 'react';
+
+type ShurtcutConfig = {
+  key: string;
+  altKey?: boolean;
+  ctrlKey?: boolean;
+  shiftKey?: boolean;
+};
+
+export const useShortcut = (key: string | ShurtcutConfig, callback: () => void) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (typeof key === 'string') {
+        if (event.key === key) {
+          callback();
+        }
+      } else {
+        if (
+          event.key === key.key &&
+          event.shiftKey === key.shiftKey &&
+          event.ctrlKey === key.ctrlKey &&
+          event.altKey === key.altKey
+        ) {
+          callback();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [key, callback]);
+};

From 0b558766084bfd2e0783e77db595e2052f874390 Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Mon, 21 Aug 2023 13:11:34 +0200
Subject: [PATCH 02/26] Refine styling

---
 src/components/feedbackModal.tsx  | 46 +++++++++++++++++++++++++++++--
 src/components/feedbackWidget.tsx |  2 +-
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index 230ac9d0cd341..64971ebd53a0b 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -1,4 +1,5 @@
 import React, {FormEvent} from 'react';
+import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {useFocusTrap} from './hooks/useFocusTrap';
@@ -24,22 +25,52 @@ const Dialog = styled.dialog`
 const Content = styled.div`
   border-radius: 4px;
   background-color: #fff;
-  padding: 24px;
   width: 500px;
   max-width: 100%;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.2);
 `;
 
+const Header = styled.h2`
+  font-size: 20px;
+  font-weight: 600;
+  border-bottom: 1px solid #ccc;
+  padding: 20px 24px;
+  margin: 0px;
+`;
+
 const Form = styled.form`
   display: flex;
   flex-direction: column;
   gap: 16px;
+  padding: 24px;
 `;
 
 const Label = styled.label`
   display: flex;
   flex-direction: column;
   gap: 4px;
+  margin: 0px;
+`;
+
+const inputStyles = css`
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  padding: 6px 8px;
+  &:focus {
+    outline: 1px solid #79628c;
+    border-color: #79628c;
+  }
+`;
+
+const Input = styled.input`
+  ${inputStyles}
+`;
+
+const TextArea = styled.textarea`
+  ${inputStyles}
+  min-height: 64px;
+  resize: vertical;
 `;
 
 const SubmitButton = styled.button`
@@ -52,6 +83,14 @@ const SubmitButton = styled.button`
   font-weight: 600;
   padding: 6px 16px;
   align-self: flex-end;
+  margin-top: 8px;
+  &:hover {
+    background-color: #5f4b73;
+  }
+  &:focus-visible {
+    outline: 1px solid #79628c;
+    background-color: #5f4b73;
+  }
 `;
 
 interface FeedbackModalProps {
@@ -93,14 +132,15 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
   return (
     <Dialog open={open} ref={dialogRef} onClick={onClose}>
       <Content onClick={stopPropagation}>
+        <Header>Got any Feedback?</Header>
         <Form ref={formRef} onSubmit={handleSubmit}>
           <Label>
             Title:
-            <input required type="text" name="title" placeholder="Enter a subject" />
+            <Input required type="text" name="title" placeholder="Enter a subject" />
           </Label>
           <Label>
             Comment:
-            <textarea
+            <TextArea
               onKeyDown={event => {
                 if (event.key === 'Enter' && event.ctrlKey) {
                   formRef.current.requestSubmit();
diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index dfc3eb5def159..fd656b965eef6 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -6,7 +6,7 @@ import {FeedbackModal} from './feedbackModal';
 export function FeebdackWidget() {
   const [open, setOpen] = React.useState(false);
 
-  const handleSubmit = (data: {comment: string; title: string}) => {
+  const handleSubmit = (data: {comment: string; title: string; image?: Blob}) => {
     console.log(data);
     setOpen(false);
   };

From 7fd4ca606e0a06c4890c67b806bf5362ff54ecc2 Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Mon, 21 Aug 2023 13:53:36 +0200
Subject: [PATCH 03/26] Add screenshot

---
 src/components/feedbackButton.tsx        |   2 +-
 src/components/feedbackModal.tsx         | 104 +++++++++++++++++++++--
 src/components/hooks/useTakeScreenhot.ts |  52 ++++++++++++
 3 files changed, 148 insertions(+), 10 deletions(-)
 create mode 100644 src/components/hooks/useTakeScreenhot.ts

diff --git a/src/components/feedbackButton.tsx b/src/components/feedbackButton.tsx
index f0821815156bd..35cf1b36ca910 100644
--- a/src/components/feedbackButton.tsx
+++ b/src/components/feedbackButton.tsx
@@ -9,7 +9,7 @@ const Button = styled.button`
   background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 4px;
-  color: #333;
+  color: #231c3d;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index 64971ebd53a0b..3092fb7969aa0 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import {useFocusTrap} from './hooks/useFocusTrap';
 import {useShortcut} from './hooks/useShortcut';
+import {useTakeScreenshot} from './hooks/useTakeScreenhot';
 
 const Dialog = styled.dialog`
   background-color: rgba(0, 0, 0, 0.05);
@@ -16,6 +17,8 @@ const Dialog = styled.dialog`
   display: flex;
   align-items: center;
   justify-content: center;
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
   &:not([open]) {
     opacity: 0;
     pointer-events: none;
@@ -28,6 +31,11 @@ const Content = styled.div`
   width: 500px;
   max-width: 100%;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s ease-in-out;
+  transform: translate(0, 0) scale(1);
+  dialog:not([open]) & {
+    transform: translate(0, -16px) scale(0.98);
+  }
 `;
 
 const Header = styled.h2`
@@ -73,17 +81,26 @@ const TextArea = styled.textarea`
   resize: vertical;
 `;
 
-const SubmitButton = styled.button`
-  background-color: #79628c;
+const ModalFooter = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+`;
+
+const buttonStyles = css`
   border: 1px solid #ccc;
   border-radius: 4px;
-  color: #fff;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   padding: 6px 16px;
-  align-self: flex-end;
-  margin-top: 8px;
+`;
+
+const SubmitButton = styled.button`
+  ${buttonStyles}
+  background-color: #79628c;
+  color: #fff;
   &:hover {
     background-color: #5f4b73;
   }
@@ -93,9 +110,45 @@ const SubmitButton = styled.button`
   }
 `;
 
+const CancelButton = styled.button`
+  ${buttonStyles}
+  background-color: #fff;
+  color: #231c3d;
+  font-weight: 500;
+  &:hover {
+    background-color: #ccc;
+  }
+  &:focus-visible {
+    outline: 1px solid #79628c;
+    background-color: #ccc;
+  }
+`;
+
+const ScreenshotButton = styled.button`
+  ${buttonStyles}
+  background-color: #fff;
+  color: #231c3d;
+  font-weight: 500;
+  &:hover {
+    background-color: #ccc;
+  }
+  &:focus-visible {
+    outline: 1px solid #79628c;
+    background-color: #ccc;
+  }
+`;
+
+const ScreenshotPreview = styled.img`
+  display: block;
+  width: 100%;
+  height: 200px;
+  object-fit: contain;
+  background-color: #ccc;
+`;
+
 interface FeedbackModalProps {
   onClose: () => void;
-  onSubmit: (data: {comment: string; title: string}) => void;
+  onSubmit: (data: {comment: string; title: string; image?: Blob}) => void;
   open: boolean;
 }
 
@@ -111,13 +164,25 @@ const retrieveStringValue = (formData: FormData, key: string) => {
   return '';
 };
 
+function blobToBase64(blob: Blob) {
+  return new Promise<string>((resolve, _) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.readAsDataURL(blob);
+  });
+}
+
 export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
+  const [screenshot, setScreenshot] = React.useState<Blob | undefined>(undefined);
+  const [screenshotPreview, setScreenshotPreview] = React.useState<string | undefined>(
+    undefined
+  );
   const dialogRef = React.useRef<HTMLDialogElement>(null);
   const formRef = React.useRef<HTMLFormElement>(null);
 
   useFocusTrap(dialogRef, open);
-
   useShortcut('Escape', onClose);
+  const {isInProgress, takeScreenshot} = useTakeScreenshot();
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -125,12 +190,21 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
     onSubmit({
       comment: retrieveStringValue(formData, 'comment'),
       title: retrieveStringValue(formData, 'title'),
+      image: screenshot,
     });
     formRef.current.reset();
+    setScreenshot(undefined);
+    setScreenshotPreview(undefined);
+  };
+
+  const handleScreenshot = async () => {
+    const image = await takeScreenshot();
+    setScreenshot(image);
+    setScreenshotPreview(await blobToBase64(image));
   };
 
   return (
-    <Dialog open={open} ref={dialogRef} onClick={onClose}>
+    <Dialog open={open && !isInProgress} ref={dialogRef} onClick={onClose}>
       <Content onClick={stopPropagation}>
         <Header>Got any Feedback?</Header>
         <Form ref={formRef} onSubmit={handleSubmit}>
@@ -150,7 +224,19 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
               placeholder="Explain what bothers you"
             />
           </Label>
-          <SubmitButton type="submit">Submit</SubmitButton>
+          {screenshot ? (
+            <ScreenshotPreview src={screenshotPreview} />
+          ) : (
+            <ScreenshotButton type="button" onClick={handleScreenshot}>
+              Add Screenshot
+            </ScreenshotButton>
+          )}
+          <ModalFooter>
+            <CancelButton type="button" onClick={onClose}>
+              Cancel
+            </CancelButton>
+            <SubmitButton type="submit">Submit</SubmitButton>
+          </ModalFooter>
         </Form>
       </Content>
     </Dialog>
diff --git a/src/components/hooks/useTakeScreenhot.ts b/src/components/hooks/useTakeScreenhot.ts
new file mode 100644
index 0000000000000..c62c36aaea5e8
--- /dev/null
+++ b/src/components/hooks/useTakeScreenhot.ts
@@ -0,0 +1,52 @@
+import {useCallback, useState} from 'react';
+
+const takeScreenshot = async (): Promise<Blob> => {
+  const stream = await navigator.mediaDevices.getDisplayMedia({
+    video: true,
+    audio: false,
+    preferCurrentTab: true,
+    surfaceSwitching: 'exclude',
+  } as any);
+  const videoTrack = stream.getVideoTracks()[0];
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  if (!context) {
+    throw new Error('Could not get canvas context');
+  }
+  const video = document.createElement('video');
+  video.srcObject = new MediaStream([videoTrack]);
+
+  await new Promise<void>(resolve => {
+    video.onloadedmetadata = () => {
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      context.drawImage(video, 0, 0);
+      stream.getTracks().forEach(track => track.stop());
+      resolve();
+    };
+    video.play();
+  });
+
+  return new Promise(resolve => {
+    canvas.toBlob(resolve);
+  });
+};
+
+export const useTakeScreenshot = () => {
+  const [isInProgress, setIsInProgress] = useState(false);
+
+  const takeScreenshotCallback = useCallback(async (): Promise<Blob> => {
+    setIsInProgress(true);
+    let image: Blob | null = null;
+    try {
+      image = await takeScreenshot();
+    } catch (error) {
+      setIsInProgress(false);
+      throw error;
+    }
+    setIsInProgress(false);
+    return image;
+  }, []);
+
+  return {isInProgress, takeScreenshot: takeScreenshotCallback};
+};

From 374c588859e48d80aa2cae6f9603c9dd3153d5f0 Mon Sep 17 00:00:00 2001
From: Anton Ovchinnikov <anton@tonyo.info>
Date: Mon, 21 Aug 2023 13:54:18 +0200
Subject: [PATCH 04/26] Basic submit handler

---
 src/components/feedbackWidget.tsx | 50 +++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index fd656b965eef6..84cbef0b64902 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -1,14 +1,64 @@
 import React from 'react';
+import * as Sentry from '@sentry/browser';
 
 import {FeebdackButton} from './feedbackButton';
 import {FeedbackModal} from './feedbackModal';
 
+Sentry.init({
+  // https://sentry-test.sentry.io/issues/?project=4505742647754752
+  dsn: 'https://db1366bd2d586cac50181e3eaee5c3e1@o19635.ingest.sentry.io/4505742647754752',
+});
+
+function getGitHubSourcePage(): string {
+  const xpath = "//a[text()='Suggest an edit to this page']";
+  const matchingElement = document.evaluate(
+    xpath,
+    document,
+    null,
+    XPathResult.FIRST_ORDERED_NODE_TYPE,
+    null
+  ).singleNodeValue as HTMLAnchorElement;
+  return matchingElement === null ? '' : matchingElement.href;
+}
+
 export function FeebdackWidget() {
   const [open, setOpen] = React.useState(false);
 
   const handleSubmit = (data: {comment: string; title: string; image?: Blob}) => {
     console.log(data);
     setOpen(false);
+
+    let eventId: string;
+    const imageBlob: Uint8Array = Uint8Array.from('', c => c.charCodeAt(0));
+
+    Sentry.withScope(scope => {
+      scope.addAttachment({
+        filename: 'screenshot.png',
+        data: imageBlob,
+        contentType: 'image/png',
+      });
+
+      // We don't need breadcrumbs for now
+      scope.clearBreadcrumbs();
+
+      const sourcePage = getGitHubSourcePage();
+      console.log('GitHub source page:', sourcePage);
+      if (sourcePage) {
+        scope.setContext('Edit Content', {
+          'Source file': sourcePage,
+        });
+      }
+
+      eventId = Sentry.captureMessage(data.title);
+    });
+
+    const userFeedback = {
+      name: 'fixme name',
+      email: 'test@test.com',
+      comments: `${data.title}: ${data.comment}`,
+      event_id: eventId,
+    };
+    Sentry.captureUserFeedback(userFeedback);
   };
 
   return (

From 39ca3f126ef9736779f064f903ae2d8e5b8e8a7c Mon Sep 17 00:00:00 2001
From: Anton Ovchinnikov <anton@tonyo.info>
Date: Mon, 21 Aug 2023 14:13:29 +0200
Subject: [PATCH 05/26] Submit screenshot

---
 src/components/feedbackWidget.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index 84cbef0b64902..2dba8705626f6 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -24,23 +24,31 @@ function getGitHubSourcePage(): string {
 export function FeebdackWidget() {
   const [open, setOpen] = React.useState(false);
 
-  const handleSubmit = (data: {comment: string; title: string; image?: Blob}) => {
-    console.log(data);
+  const handleSubmit = async (data: {comment: string; title: string; image?: Blob}) => {
+    console.log('handleSubmit data:', data);
     setOpen(false);
 
     let eventId: string;
-    const imageBlob: Uint8Array = Uint8Array.from('', c => c.charCodeAt(0));
+    let imageBlob: Uint8Array = null;
 
-    Sentry.withScope(scope => {
-      scope.addAttachment({
-        filename: 'screenshot.png',
-        data: imageBlob,
-        contentType: 'image/png',
-      });
+    if (data.image && data.image.size > 0) {
+      const blobData = await data.image.arrayBuffer();
+      console.log('blobdata:', blobData);
+      imageBlob = new Uint8Array(blobData);
+    }
 
+    Sentry.withScope(scope => {
       // We don't need breadcrumbs for now
       scope.clearBreadcrumbs();
 
+      if (imageBlob) {
+        scope.addAttachment({
+          filename: 'screenshot.png',
+          data: imageBlob,
+          contentType: 'image/png',
+        });
+      }
+
       const sourcePage = getGitHubSourcePage();
       console.log('GitHub source page:', sourcePage);
       if (sourcePage) {

From c2c09c701d90985944a2d576c232882a7add4f99 Mon Sep 17 00:00:00 2001
From: Anton Ovchinnikov <anton@tonyo.info>
Date: Mon, 21 Aug 2023 14:46:17 +0200
Subject: [PATCH 06/26] Add a basic hotkey

---
 src/components/feedbackWidget.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index 2dba8705626f6..b90523dbed34d 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback, useEffect} from 'react';
 import * as Sentry from '@sentry/browser';
 
 import {FeebdackButton} from './feedbackButton';
@@ -69,6 +69,20 @@ export function FeebdackWidget() {
     Sentry.captureUserFeedback(userFeedback);
   };
 
+  const handleKeyPress = useCallback(event => {
+    // Shift+Enter
+    if (event.shiftKey && event.keyCode === 13) {
+      setOpen(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+
   return (
     <React.Fragment>
       {!open && <FeebdackButton onClick={() => setOpen(true)} />}

From 1fdbdbdb4f1c92675143ed1488542f6436a631e2 Mon Sep 17 00:00:00 2001
From: Anton Ovchinnikov <anton@tonyo.info>
Date: Mon, 21 Aug 2023 14:46:36 +0200
Subject: [PATCH 07/26] Fix comment field

---
 src/components/feedbackModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index 3092fb7969aa0..f7b3e6e4ca5a1 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -220,7 +220,7 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
                   formRef.current.requestSubmit();
                 }
               }}
-              name="title"
+              name="comment"
               placeholder="Explain what bothers you"
             />
           </Label>

From 773d53bb9adf793bfdb6328300778e066373fbc2 Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Mon, 21 Aug 2023 15:29:57 +0200
Subject: [PATCH 08/26] Drawing functionality

---
 src/components/feedbackButton.tsx        |   7 +
 src/components/feedbackModal.tsx         | 110 ++++++++------
 src/components/hooks/useTakeScreenhot.ts |  15 +-
 src/components/screenshotEditor.tsx      | 179 +++++++++++++++++++++++
 src/components/screenshotEditorHelp.tsx  |  62 ++++++++
 5 files changed, 320 insertions(+), 53 deletions(-)
 create mode 100644 src/components/screenshotEditor.tsx
 create mode 100644 src/components/screenshotEditorHelp.tsx

diff --git a/src/components/feedbackButton.tsx b/src/components/feedbackButton.tsx
index 35cf1b36ca910..b3d6bb2666632 100644
--- a/src/components/feedbackButton.tsx
+++ b/src/components/feedbackButton.tsx
@@ -17,6 +17,13 @@ const Button = styled.button`
   text-align: center;
   text-decoration: none;
   z-index: 9000;
+  &:hover {
+    background-color: #eee;
+  }
+  &:focus-visible {
+    outline: 1px solid #79628c;
+    background-color: #eee;
+  }
 `;
 
 export function FeebdackButton(props) {
diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index f7b3e6e4ca5a1..09310b8ec7591 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -1,10 +1,11 @@
-import React, {FormEvent} from 'react';
+import React, {FormEvent, useEffect} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {useFocusTrap} from './hooks/useFocusTrap';
 import {useShortcut} from './hooks/useShortcut';
 import {useTakeScreenshot} from './hooks/useTakeScreenhot';
+import {ScreenshotEditor} from './screenshotEditor';
 
 const Dialog = styled.dialog`
   background-color: rgba(0, 0, 0, 0.05);
@@ -116,11 +117,11 @@ const CancelButton = styled.button`
   color: #231c3d;
   font-weight: 500;
   &:hover {
-    background-color: #ccc;
+    background-color: #eee;
   }
   &:focus-visible {
     outline: 1px solid #79628c;
-    background-color: #ccc;
+    background-color: #eee;
   }
 `;
 
@@ -130,11 +131,11 @@ const ScreenshotButton = styled.button`
   color: #231c3d;
   font-weight: 500;
   &:hover {
-    background-color: #ccc;
+    background-color: #eee;
   }
   &:focus-visible {
     outline: 1px solid #79628c;
-    background-color: #ccc;
+    background-color: #eee;
   }
 `;
 
@@ -184,6 +185,17 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
   useShortcut('Escape', onClose);
   const {isInProgress, takeScreenshot} = useTakeScreenshot();
 
+  // Reset on close
+  useEffect(() => {
+    if (!open) {
+      setTimeout(() => {
+        formRef.current.reset();
+        setScreenshot(undefined);
+        setScreenshotPreview(undefined);
+      }, 200);
+    }
+  }, [open]);
+
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
@@ -192,53 +204,59 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
       title: retrieveStringValue(formData, 'title'),
       image: screenshot,
     });
-    formRef.current.reset();
-    setScreenshot(undefined);
-    setScreenshotPreview(undefined);
   };
 
   const handleScreenshot = async () => {
     const image = await takeScreenshot();
-    setScreenshot(image);
-    setScreenshotPreview(await blobToBase64(image));
+    setScreenshotPreview(image);
+  };
+
+  const handleEditorSubmit = async (newScreenshot: Blob) => {
+    setScreenshot(newScreenshot);
+    setScreenshotPreview(await blobToBase64(newScreenshot));
   };
 
   return (
-    <Dialog open={open && !isInProgress} ref={dialogRef} onClick={onClose}>
-      <Content onClick={stopPropagation}>
-        <Header>Got any Feedback?</Header>
-        <Form ref={formRef} onSubmit={handleSubmit}>
-          <Label>
-            Title:
-            <Input required type="text" name="title" placeholder="Enter a subject" />
-          </Label>
-          <Label>
-            Comment:
-            <TextArea
-              onKeyDown={event => {
-                if (event.key === 'Enter' && event.ctrlKey) {
-                  formRef.current.requestSubmit();
-                }
-              }}
-              name="comment"
-              placeholder="Explain what bothers you"
-            />
-          </Label>
-          {screenshot ? (
-            <ScreenshotPreview src={screenshotPreview} />
-          ) : (
-            <ScreenshotButton type="button" onClick={handleScreenshot}>
-              Add Screenshot
-            </ScreenshotButton>
-          )}
-          <ModalFooter>
-            <CancelButton type="button" onClick={onClose}>
-              Cancel
-            </CancelButton>
-            <SubmitButton type="submit">Submit</SubmitButton>
-          </ModalFooter>
-        </Form>
-      </Content>
-    </Dialog>
+    <React.Fragment>
+      <Dialog open={open && !isInProgress} ref={dialogRef} onClick={onClose}>
+        <Content onClick={stopPropagation}>
+          <Header>Got any Feedback?</Header>
+          <Form ref={formRef} onSubmit={handleSubmit}>
+            <Label>
+              Title:
+              <Input required type="text" name="title" placeholder="Enter a subject" />
+            </Label>
+            <Label>
+              Comment:
+              <TextArea
+                onKeyDown={event => {
+                  if (event.key === 'Enter' && event.ctrlKey) {
+                    formRef.current.requestSubmit();
+                  }
+                }}
+                name="comment"
+                placeholder="Explain what bothers you"
+              />
+            </Label>
+            {screenshotPreview ? (
+              <ScreenshotPreview src={screenshotPreview} />
+            ) : (
+              <ScreenshotButton type="button" onClick={handleScreenshot}>
+                Add Screenshot
+              </ScreenshotButton>
+            )}
+            <ModalFooter>
+              <CancelButton type="button" onClick={onClose}>
+                Cancel
+              </CancelButton>
+              <SubmitButton type="submit">Submit</SubmitButton>
+            </ModalFooter>
+          </Form>
+        </Content>
+      </Dialog>
+      {screenshotPreview && !screenshot && (
+        <ScreenshotEditor dataUrl={screenshotPreview} onSubmit={handleEditorSubmit} />
+      )}
+    </React.Fragment>
   );
 }
diff --git a/src/components/hooks/useTakeScreenhot.ts b/src/components/hooks/useTakeScreenhot.ts
index c62c36aaea5e8..1cd7983b6aca7 100644
--- a/src/components/hooks/useTakeScreenhot.ts
+++ b/src/components/hooks/useTakeScreenhot.ts
@@ -1,8 +1,11 @@
 import {useCallback, useState} from 'react';
 
-const takeScreenshot = async (): Promise<Blob> => {
+const takeScreenshot = async (): Promise<string> => {
   const stream = await navigator.mediaDevices.getDisplayMedia({
-    video: true,
+    video: {
+      width: window.innerWidth * window.devicePixelRatio,
+      height: window.innerHeight * window.devicePixelRatio,
+    },
     audio: false,
     preferCurrentTab: true,
     surfaceSwitching: 'exclude',
@@ -27,17 +30,15 @@ const takeScreenshot = async (): Promise<Blob> => {
     video.play();
   });
 
-  return new Promise(resolve => {
-    canvas.toBlob(resolve);
-  });
+  return canvas.toDataURL();
 };
 
 export const useTakeScreenshot = () => {
   const [isInProgress, setIsInProgress] = useState(false);
 
-  const takeScreenshotCallback = useCallback(async (): Promise<Blob> => {
+  const takeScreenshotCallback = useCallback(async (): Promise<string> => {
     setIsInProgress(true);
-    let image: Blob | null = null;
+    let image: string | null = null;
     try {
       image = await takeScreenshot();
     } catch (error) {
diff --git a/src/components/screenshotEditor.tsx b/src/components/screenshotEditor.tsx
new file mode 100644
index 0000000000000..bdc29d1f3261c
--- /dev/null
+++ b/src/components/screenshotEditor.tsx
@@ -0,0 +1,179 @@
+import React, {useEffect, useState} from 'react';
+import styled from '@emotion/styled';
+
+import {ScreenshotEditorHelp} from './screenshotEditorHelp';
+
+interface Rect {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}
+interface ScreenshotEditorProps {
+  dataUrl: string;
+  onSubmit: (screenshot: Blob, selection?: Rect) => void;
+}
+
+const Canvas = styled.canvas`
+  position: absolute;
+  cursor: crosshair;
+  max-width: 100vw;
+  max-height: 100vh;
+`;
+const Container = styled.div`
+  position: fixed;
+  z-index: 10000;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  background-color: #ccc;
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 16px,
+    rgba(0, 0, 0, 0.2) 16px,
+    rgba(0, 0, 0, 0.2) 17.5px
+  );
+`;
+
+const getCanvasRenderSize = (width: number, height: number) => {
+  const maxWidth = window.innerWidth;
+  const maxHeight = window.innerHeight;
+
+  if (width > maxWidth) {
+    height = (maxWidth / width) * height;
+    width = maxWidth;
+  }
+
+  if (height > maxHeight) {
+    width = (maxHeight / height) * width;
+    height = maxHeight;
+  }
+
+  return {width, height};
+};
+
+export function ScreenshotEditor({dataUrl, onSubmit}: ScreenshotEditorProps) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const [isDraggingState, setIsDraggingState] = useState(false);
+  const currentRatio = React.useRef<number>(1);
+
+  useEffect(() => {
+    const canvas = document.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+    const rectStart: {x: number; y: number} = {x: 0, y: 0};
+    const rectEnd: {x: number; y: number} = {x: 0, y: 0};
+    let isDragging = false;
+
+    function setCanvasSize() {
+      const renderSize = getCanvasRenderSize(img.width, img.height);
+      canvas.style.width = `${renderSize.width}px`;
+      canvas.style.height = `${renderSize.height}px`;
+      canvas.style.top = `${(window.innerHeight - renderSize.height) / 2}px`;
+      canvas.style.left = `${(window.innerWidth - renderSize.width) / 2}px`;
+      // store it so we can translate the selection
+      currentRatio.current = renderSize.width / img.width;
+    }
+
+    function refreshCanvas() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0);
+
+      if (!isDragging) {
+        return;
+      }
+
+      // draw gray overlay around the selection
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+      ctx.fillRect(0, 0, canvas.width, rectStart.y);
+      ctx.fillRect(0, rectStart.y, rectStart.x, rectEnd.y - rectStart.y);
+      ctx.fillRect(
+        rectEnd.x,
+        rectStart.y,
+        canvas.width - rectEnd.x,
+        rectEnd.y - rectStart.y
+      );
+      ctx.fillRect(0, rectEnd.y, canvas.width, canvas.height - rectEnd.y);
+
+      ctx.strokeStyle = '#79628c';
+      ctx.lineWidth = 6;
+      ctx.strokeRect(
+        rectStart.x,
+        rectStart.y,
+        rectEnd.x - rectStart.x,
+        rectEnd.y - rectStart.y
+      );
+    }
+
+    function submit(rect?: Rect) {
+      canvasRef.current.toBlob(blob => {
+        onSubmit(blob, rect);
+      });
+    }
+
+    function handleMouseDown(e) {
+      rectStart.x = e.offsetX / currentRatio.current;
+      rectStart.y = e.offsetY / currentRatio.current;
+      isDragging = true;
+      setIsDraggingState(true);
+    }
+    function handleMouseMove(e) {
+      rectEnd.x = e.offsetX / currentRatio.current;
+      rectEnd.y = e.offsetY / currentRatio.current;
+      refreshCanvas();
+    }
+    function handleMouseUp() {
+      isDragging = false;
+      setIsDraggingState(false);
+      if (rectStart.x - rectEnd.x === 0 && rectStart.y - rectEnd.y === 0) {
+        // no selection
+        refreshCanvas();
+        return;
+      }
+      submit({
+        x: rectStart.x,
+        y: rectStart.y,
+        width: rectEnd.x - rectStart.x,
+        height: rectEnd.y - rectStart.y,
+      });
+    }
+
+    function handleEnterKey(e) {
+      if (e.key === 'Enter') {
+        submit();
+      }
+    }
+
+    img.onload = () => {
+      canvas.width = img.width;
+      canvas.height = img.height;
+      setCanvasSize();
+      ctx.drawImage(img, 0, 0);
+    };
+
+    img.src = dataUrl;
+
+    window.addEventListener('resize', setCanvasSize, {passive: true});
+    window.addEventListener('mousedown', handleMouseDown);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    window.addEventListener('keydown', handleEnterKey);
+
+    return () => {
+      window.removeEventListener('resize', setCanvasSize);
+      window.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      window.removeEventListener('keydown', handleEnterKey);
+    };
+  }, [dataUrl]);
+
+  return (
+    <Container>
+      <Canvas ref={canvasRef} />
+      <ScreenshotEditorHelp hide={isDraggingState} />
+    </Container>
+  );
+}
diff --git a/src/components/screenshotEditorHelp.tsx b/src/components/screenshotEditorHelp.tsx
new file mode 100644
index 0000000000000..e389cbd6acb7d
--- /dev/null
+++ b/src/components/screenshotEditorHelp.tsx
@@ -0,0 +1,62 @@
+import React, {useEffect} from 'react';
+import styled from '@emotion/styled';
+
+const Wrapper = styled.div`
+  position: fixed;
+  width: 100vw;
+  padding-top: 8px;
+  left: 0;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  transition: transform 0.2s ease-in-out;
+  transition-delay: 0.5s;
+  transform: translateY(0);
+  &[data-hide='true'] {
+    transition-delay: 0s;
+    transform: translateY(-100%);
+  }
+`;
+
+const Content = styled.div`
+  background-color: #231c3d;
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  color: #fff;
+  font-size: 14px;
+  padding: 6px 24px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.2);
+`;
+
+export function ScreenshotEditorHelp({hide}: {hide: boolean}) {
+  const [isHidden, setIsHidden] = React.useState(false);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const initialBoundingRect = contentRef.current!.getBoundingClientRect();
+    const handleMouseMove = (e: MouseEvent) => {
+      const {clientX, clientY} = e;
+      const {left, bottom, right} = initialBoundingRect;
+      const threshold = 50;
+      const isNearContent =
+        clientX > left - threshold &&
+        clientX < right + threshold &&
+        clientY < bottom + threshold;
+      if (isNearContent) {
+        setIsHidden(true);
+      } else {
+        setIsHidden(false);
+      }
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  return (
+    <Wrapper data-hide={isHidden || hide}>
+      <Content ref={contentRef}>
+        {'Mark the problem on the sceen ("Enter" to skip)'}
+      </Content>
+    </Wrapper>
+  );
+}

From ea3fb21df1f778cf051c30a78a692c26347116f6 Mon Sep 17 00:00:00 2001
From: Anton Ovchinnikov <anton@tonyo.info>
Date: Mon, 21 Aug 2023 15:38:30 +0200
Subject: [PATCH 09/26] Extract page title, clear breadcrumbs later

---
 src/components/feedbackWidget.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index b90523dbed34d..43cdaf6bdd414 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -38,9 +38,6 @@ export function FeebdackWidget() {
     }
 
     Sentry.withScope(scope => {
-      // We don't need breadcrumbs for now
-      scope.clearBreadcrumbs();
-
       if (imageBlob) {
         scope.addAttachment({
           filename: 'screenshot.png',
@@ -57,6 +54,13 @@ export function FeebdackWidget() {
         });
       }
 
+      const pageTitle = document.title;
+      if (pageTitle) {
+        scope.setTag('page_title', pageTitle);
+      }
+
+      // We don't need breadcrumbs for now
+      scope.clearBreadcrumbs();
       eventId = Sentry.captureMessage(data.title);
     });
 

From 030bde195c64e74dc549b4ccb2a5f630279f31b8 Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Mon, 21 Aug 2023 16:19:28 +0200
Subject: [PATCH 10/26] Submit cutout

---
 src/components/feedbackModal.tsx    | 15 ++++++++++--
 src/components/feedbackWidget.tsx   | 34 ++++++++++++++++++--------
 src/components/screenshotEditor.tsx | 37 +++++++++++++++++++++++++----
 3 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index 09310b8ec7591..4c9d1e96da6ff 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -149,7 +149,12 @@ const ScreenshotPreview = styled.img`
 
 interface FeedbackModalProps {
   onClose: () => void;
-  onSubmit: (data: {comment: string; title: string; image?: Blob}) => void;
+  onSubmit: (data: {
+    comment: string;
+    title: string;
+    image?: Blob;
+    imageCutout?: Blob;
+  }) => void;
   open: boolean;
 }
 
@@ -175,6 +180,9 @@ function blobToBase64(blob: Blob) {
 
 export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
   const [screenshot, setScreenshot] = React.useState<Blob | undefined>(undefined);
+  const [screenshotCutout, setScreenshotCutout] = React.useState<Blob | undefined>(
+    undefined
+  );
   const [screenshotPreview, setScreenshotPreview] = React.useState<string | undefined>(
     undefined
   );
@@ -191,6 +199,7 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
       setTimeout(() => {
         formRef.current.reset();
         setScreenshot(undefined);
+        setScreenshotCutout(undefined);
         setScreenshotPreview(undefined);
       }, 200);
     }
@@ -203,6 +212,7 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
       comment: retrieveStringValue(formData, 'comment'),
       title: retrieveStringValue(formData, 'title'),
       image: screenshot,
+      imageCutout: screenshotCutout,
     });
   };
 
@@ -211,8 +221,9 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
     setScreenshotPreview(image);
   };
 
-  const handleEditorSubmit = async (newScreenshot: Blob) => {
+  const handleEditorSubmit = async (newScreenshot: Blob, cutout?: Blob) => {
     setScreenshot(newScreenshot);
+    setScreenshotCutout(cutout);
     setScreenshotPreview(await blobToBase64(newScreenshot));
   };
 
diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index 43cdaf6bdd414..b40ce97d1ab10 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -21,27 +21,41 @@ function getGitHubSourcePage(): string {
   return matchingElement === null ? '' : matchingElement.href;
 }
 
+async function blobToUint8Array(blob: Blob): Promise<Uint8Array> {
+  const blobData = await blob.arrayBuffer();
+  return new Uint8Array(blobData);
+}
+
 export function FeebdackWidget() {
   const [open, setOpen] = React.useState(false);
 
-  const handleSubmit = async (data: {comment: string; title: string; image?: Blob}) => {
+  const handleSubmit = async (data: {
+    comment: string;
+    title: string;
+    image?: Blob;
+    imageCutout?: Blob;
+  }) => {
     console.log('handleSubmit data:', data);
     setOpen(false);
 
     let eventId: string;
-    let imageBlob: Uint8Array = null;
-
-    if (data.image && data.image.size > 0) {
-      const blobData = await data.image.arrayBuffer();
-      console.log('blobdata:', blobData);
-      imageBlob = new Uint8Array(blobData);
-    }
+    const imageData = data.image && (await blobToUint8Array(data.image));
+    const imageCutoutData =
+      data.imageCutout && (await blobToUint8Array(data.imageCutout));
 
     Sentry.withScope(scope => {
-      if (imageBlob) {
+      if (imageData) {
+        scope.addAttachment({
+          filename: 'screenshot-2.png',
+          data: imageData,
+          contentType: 'image/png',
+        });
+      }
+
+      if (imageCutoutData) {
         scope.addAttachment({
           filename: 'screenshot.png',
-          data: imageBlob,
+          data: imageCutoutData,
           contentType: 'image/png',
         });
       }
diff --git a/src/components/screenshotEditor.tsx b/src/components/screenshotEditor.tsx
index bdc29d1f3261c..c2e6b5a17097f 100644
--- a/src/components/screenshotEditor.tsx
+++ b/src/components/screenshotEditor.tsx
@@ -11,7 +11,7 @@ interface Rect {
 }
 interface ScreenshotEditorProps {
   dataUrl: string;
-  onSubmit: (screenshot: Blob, selection?: Rect) => void;
+  onSubmit: (screenshot: Blob, cutout?: Blob, selection?: Rect) => void;
 }
 
 const Canvas = styled.canvas`
@@ -54,6 +54,14 @@ const getCanvasRenderSize = (width: number, height: number) => {
   return {width, height};
 };
 
+const canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob> => {
+  return new Promise(resolve => {
+    canvas.toBlob(blob => {
+      resolve(blob);
+    });
+  });
+};
+
 export function ScreenshotEditor({dataUrl, onSubmit}: ScreenshotEditorProps) {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
   const [isDraggingState, setIsDraggingState] = useState(false);
@@ -107,10 +115,29 @@ export function ScreenshotEditor({dataUrl, onSubmit}: ScreenshotEditorProps) {
       );
     }
 
-    function submit(rect?: Rect) {
-      canvasRef.current.toBlob(blob => {
-        onSubmit(blob, rect);
-      });
+    async function submit(rect?: Rect) {
+      const imageBlob = await canvasToBlob(canvas);
+      if (!rect) {
+        onSubmit(imageBlob);
+        return;
+      }
+      const cutoutCanvas = document.createElement('canvas');
+      cutoutCanvas.width = rect.width;
+      cutoutCanvas.height = rect.height;
+      const cutoutCtx = cutoutCanvas.getContext('2d');
+      cutoutCtx.drawImage(
+        canvas,
+        rect.x,
+        rect.y,
+        rect.width,
+        rect.height,
+        0,
+        0,
+        rect.width,
+        rect.height
+      );
+      const cutoutBlob = await canvasToBlob(cutoutCanvas);
+      onSubmit(imageBlob, cutoutBlob, rect);
     }
 
     function handleMouseDown(e) {

From dc97c09e2512a2a1a9acea70102b8182f93644f0 Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Mon, 21 Aug 2023 16:58:26 +0200
Subject: [PATCH 11/26] Fix window resizing and reverse selection

---
 src/components/feedbackModal.tsx        | 36 ++++++++++-----
 src/components/screenshotEditor.tsx     | 59 +++++++++++++------------
 src/components/screenshotEditorHelp.tsx | 15 +++++--
 3 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index 4c9d1e96da6ff..a213c17105367 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -31,6 +31,9 @@ const Content = styled.div`
   background-color: #fff;
   width: 500px;
   max-width: 100%;
+  max-height: calc(100% - 64px);
+  display: flex;
+  flex-direction: column;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.2);
   transition: transform 0.2s ease-in-out;
   transform: translate(0, 0) scale(1);
@@ -49,6 +52,7 @@ const Header = styled.h2`
 
 const Form = styled.form`
   display: flex;
+  overflow: auto;
   flex-direction: column;
   gap: 16px;
   padding: 24px;
@@ -145,6 +149,8 @@ const ScreenshotPreview = styled.img`
   height: 200px;
   object-fit: contain;
   background-color: #ccc;
+  border-radius: 4px;
+  border: 1px solid #ccc;
 `;
 
 interface FeedbackModalProps {
@@ -217,8 +223,13 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
   };
 
   const handleScreenshot = async () => {
-    const image = await takeScreenshot();
-    setScreenshotPreview(image);
+    try {
+      const image = await takeScreenshot();
+      setScreenshotPreview(image);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
   };
 
   const handleEditorSubmit = async (newScreenshot: Blob, cutout?: Blob) => {
@@ -234,11 +245,11 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
           <Header>Got any Feedback?</Header>
           <Form ref={formRef} onSubmit={handleSubmit}>
             <Label>
-              Title:
+              Title
               <Input required type="text" name="title" placeholder="Enter a subject" />
             </Label>
             <Label>
-              Comment:
+              Comment
               <TextArea
                 onKeyDown={event => {
                   if (event.key === 'Enter' && event.ctrlKey) {
@@ -249,13 +260,16 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
                 placeholder="Explain what bothers you"
               />
             </Label>
-            {screenshotPreview ? (
-              <ScreenshotPreview src={screenshotPreview} />
-            ) : (
-              <ScreenshotButton type="button" onClick={handleScreenshot}>
-                Add Screenshot
-              </ScreenshotButton>
-            )}
+            <Label>
+              Screenshot
+              {screenshotPreview ? (
+                <ScreenshotPreview src={screenshotPreview} />
+              ) : (
+                <ScreenshotButton type="button" onClick={handleScreenshot}>
+                  Add Screenshot
+                </ScreenshotButton>
+              )}
+            </Label>
             <ModalFooter>
               <CancelButton type="button" onClick={onClose}>
                 Cancel
diff --git a/src/components/screenshotEditor.tsx b/src/components/screenshotEditor.tsx
index c2e6b5a17097f..44f141a9ec1d6 100644
--- a/src/components/screenshotEditor.tsx
+++ b/src/components/screenshotEditor.tsx
@@ -61,6 +61,19 @@ const canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob> => {
     });
   });
 };
+interface Point {
+  x: number;
+  y: number;
+}
+
+const constructRect = (start: Point, end: Point) => {
+  return {
+    x: Math.min(start.x, end.x),
+    y: Math.min(start.y, end.y),
+    width: Math.abs(start.x - end.x),
+    height: Math.abs(start.y - end.y),
+  };
+};
 
 export function ScreenshotEditor({dataUrl, onSubmit}: ScreenshotEditorProps) {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
@@ -68,7 +81,7 @@ export function ScreenshotEditor({dataUrl, onSubmit}: ScreenshotEditorProps) {
   const currentRatio = React.useRef<number>(1);
 
   useEffect(() => {
-    const canvas = document.querySelector('canvas');
+    const canvas = canvasRef.current;
     const ctx = canvas.getContext('2d');
     const img = new Image();
     const rectStart: {x: number; y: number} = {x: 0, y: 0};
@@ -93,26 +106,19 @@ export function ScreenshotEditor({dataUrl, onSubmit}: ScreenshotEditorProps) {
         return;
       }
 
-      // draw gray overlay around the selection
+      const rect = constructRect(rectStart, rectEnd);
+
+      // draw gray overlay around the selectio
       ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-      ctx.fillRect(0, 0, canvas.width, rectStart.y);
-      ctx.fillRect(0, rectStart.y, rectStart.x, rectEnd.y - rectStart.y);
-      ctx.fillRect(
-        rectEnd.x,
-        rectStart.y,
-        canvas.width - rectEnd.x,
-        rectEnd.y - rectStart.y
-      );
-      ctx.fillRect(0, rectEnd.y, canvas.width, canvas.height - rectEnd.y);
+      ctx.fillRect(0, 0, canvas.width, rect.y);
+      ctx.fillRect(0, rect.y, rect.x, rect.height);
+      ctx.fillRect(rect.x + rect.width, rect.y, canvas.width, rect.height);
+      ctx.fillRect(0, rect.y + rect.height, canvas.width, canvas.height);
 
+      // draw selection border
       ctx.strokeStyle = '#79628c';
       ctx.lineWidth = 6;
-      ctx.strokeRect(
-        rectStart.x,
-        rectStart.y,
-        rectEnd.x - rectStart.x,
-        rectEnd.y - rectStart.y
-      );
+      ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
     }
 
     async function submit(rect?: Rect) {
@@ -159,12 +165,7 @@ export function ScreenshotEditor({dataUrl, onSubmit}: ScreenshotEditorProps) {
         refreshCanvas();
         return;
       }
-      submit({
-        x: rectStart.x,
-        y: rectStart.y,
-        width: rectEnd.x - rectStart.x,
-        height: rectEnd.y - rectStart.y,
-      });
+      submit(constructRect(rectStart, rectEnd));
     }
 
     function handleEnterKey(e) {
@@ -183,16 +184,16 @@ export function ScreenshotEditor({dataUrl, onSubmit}: ScreenshotEditorProps) {
     img.src = dataUrl;
 
     window.addEventListener('resize', setCanvasSize, {passive: true});
-    window.addEventListener('mousedown', handleMouseDown);
-    window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mouseup', handleMouseUp);
+    canvas.addEventListener('mousedown', handleMouseDown);
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseup', handleMouseUp);
     window.addEventListener('keydown', handleEnterKey);
 
     return () => {
       window.removeEventListener('resize', setCanvasSize);
-      window.removeEventListener('mousedown', handleMouseDown);
-      window.removeEventListener('mousemove', handleMouseMove);
-      window.removeEventListener('mouseup', handleMouseUp);
+      canvas.removeEventListener('mousedown', handleMouseDown);
+      canvas.removeEventListener('mousemove', handleMouseMove);
+      canvas.removeEventListener('mouseup', handleMouseUp);
       window.removeEventListener('keydown', handleEnterKey);
     };
   }, [dataUrl]);
diff --git a/src/components/screenshotEditorHelp.tsx b/src/components/screenshotEditorHelp.tsx
index e389cbd6acb7d..b608f29e1af0d 100644
--- a/src/components/screenshotEditorHelp.tsx
+++ b/src/components/screenshotEditorHelp.tsx
@@ -33,10 +33,10 @@ export function ScreenshotEditorHelp({hide}: {hide: boolean}) {
   const contentRef = React.useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const initialBoundingRect = contentRef.current!.getBoundingClientRect();
+    let boundingRect = contentRef.current!.getBoundingClientRect();
     const handleMouseMove = (e: MouseEvent) => {
       const {clientX, clientY} = e;
-      const {left, bottom, right} = initialBoundingRect;
+      const {left, bottom, right} = boundingRect;
       const threshold = 50;
       const isNearContent =
         clientX > left - threshold &&
@@ -48,8 +48,17 @@ export function ScreenshotEditorHelp({hide}: {hide: boolean}) {
         setIsHidden(false);
       }
     };
+
+    function handleResize() {
+      boundingRect = contentRef.current!.getBoundingClientRect();
+    }
+
+    window.addEventListener('resize', handleResize);
     window.addEventListener('mousemove', handleMouseMove);
-    return () => window.removeEventListener('mousemove', handleMouseMove);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
   }, []);
 
   return (

From 86b177cfaf4e32e92c4ea41136a188bbd010671d Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Mon, 21 Aug 2023 17:45:06 +0200
Subject: [PATCH 12/26] Add logic to find selected & related elements

---
 src/components/feedbackModal.tsx    |  20 ++++-
 src/components/feedbackWidget.tsx   | 114 ++++++++++++++++++++++++++++
 src/components/screenshotEditor.tsx |   2 +-
 3 files changed, 132 insertions(+), 4 deletions(-)

diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index a213c17105367..3c9c6f5b584e7 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import {useFocusTrap} from './hooks/useFocusTrap';
 import {useShortcut} from './hooks/useShortcut';
 import {useTakeScreenshot} from './hooks/useTakeScreenhot';
-import {ScreenshotEditor} from './screenshotEditor';
+import {Rect, ScreenshotEditor} from './screenshotEditor';
 
 const Dialog = styled.dialog`
   background-color: rgba(0, 0, 0, 0.05);
@@ -23,6 +23,7 @@ const Dialog = styled.dialog`
   &:not([open]) {
     opacity: 0;
     pointer-events: none;
+    visibility: hidden;
   }
 `;
 
@@ -160,6 +161,7 @@ interface FeedbackModalProps {
     title: string;
     image?: Blob;
     imageCutout?: Blob;
+    selection?: Rect;
   }) => void;
   open: boolean;
 }
@@ -192,6 +194,7 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
   const [screenshotPreview, setScreenshotPreview] = React.useState<string | undefined>(
     undefined
   );
+  const selectionRef = React.useRef<Rect | undefined>(undefined);
   const dialogRef = React.useRef<HTMLDialogElement>(null);
   const formRef = React.useRef<HTMLFormElement>(null);
 
@@ -219,6 +222,7 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
       title: retrieveStringValue(formData, 'title'),
       image: screenshot,
       imageCutout: screenshotCutout,
+      selection: selectionRef.current,
     });
   };
 
@@ -232,15 +236,25 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
     }
   };
 
-  const handleEditorSubmit = async (newScreenshot: Blob, cutout?: Blob) => {
+  const handleEditorSubmit = async (
+    newScreenshot: Blob,
+    cutout?: Blob,
+    selection?: Rect
+  ) => {
     setScreenshot(newScreenshot);
     setScreenshotCutout(cutout);
     setScreenshotPreview(await blobToBase64(newScreenshot));
+    selectionRef.current = selection;
   };
 
   return (
     <React.Fragment>
-      <Dialog open={open && !isInProgress} ref={dialogRef} onClick={onClose}>
+      <Dialog
+        id="feedbackModal"
+        open={open && !isInProgress}
+        ref={dialogRef}
+        onClick={onClose}
+      >
         <Content onClick={stopPropagation}>
           <Header>Got any Feedback?</Header>
           <Form ref={formRef} onSubmit={handleSubmit}>
diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index b40ce97d1ab10..0a84cb670e1e0 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -3,6 +3,112 @@ import * as Sentry from '@sentry/browser';
 
 import {FeebdackButton} from './feedbackButton';
 import {FeedbackModal} from './feedbackModal';
+import {Rect} from './screenshotEditor';
+
+function containsRect(bounds: DOMRect, rect: Rect): boolean {
+  return (
+    rect.x >= bounds.x &&
+    rect.y >= bounds.y &&
+    rect.x + rect.width <= bounds.right &&
+    rect.y + rect.height <= bounds.bottom
+  );
+}
+
+function containsBounds(a: DOMRect, b: DOMRect): boolean {
+  return a.x <= b.x && a.y <= b.y && a.right >= b.right && a.bottom >= b.bottom;
+}
+
+function getSelectedDomElement(selection: Rect): HTMLElement | null {
+  const feedbackModal = document.getElementById('feedbackModal');
+  // reduce selection by 30px as a workaround for the selection being too large
+  const reducedSelection = {
+    x: selection.x + 30,
+    y: selection.y + 30,
+    width: selection.width - 60,
+    height: selection.height - 60,
+  };
+
+  // Retrieve all elements at the center of the selection
+  const elements = document
+    .elementsFromPoint(
+      reducedSelection.x + reducedSelection.width / 2,
+      reducedSelection.y + reducedSelection.height / 2
+    )
+    .filter(element => element !== feedbackModal && !feedbackModal?.contains(element));
+
+  // Get the smallest element that contains the entire selection
+  let selectedElement = null;
+  for (const element of elements) {
+    const elementBounds = element.getBoundingClientRect();
+    const selectedElementBounds = selectedElement?.getBoundingClientRect();
+    if (
+      containsRect(elementBounds, reducedSelection) &&
+      (selectedElement === null || containsBounds(selectedElementBounds, elementBounds))
+    ) {
+      selectedElement = element;
+      break;
+    }
+  }
+
+  return selectedElement;
+}
+
+const headingElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+function getNearestHeadingElement(element: HTMLElement): HTMLElement | null {
+  let currentElement: HTMLElement | null = element;
+  while (currentElement !== null) {
+    const nextElement = currentElement.previousElementSibling;
+    if (nextElement === null) {
+      currentElement = currentElement.parentElement;
+      if (currentElement === null) {
+        return null;
+      }
+    } else {
+      currentElement = nextElement as HTMLElement;
+    }
+    if (headingElements.includes(currentElement.tagName.toLowerCase())) {
+      return currentElement;
+    }
+  }
+  return null;
+}
+
+function isElementInViewport(el) {
+  const bounds = el.getBoundingClientRect();
+
+  return (
+    bounds.top >= 0 &&
+    bounds.left >= 0 &&
+    bounds.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    bounds.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
+function getNearestIdInViewport(element: HTMLElement): HTMLElement | null {
+  let currentElement: HTMLElement | null = element;
+  while (currentElement !== null) {
+    const nextElement = currentElement.previousElementSibling;
+    if (nextElement === null) {
+      currentElement = currentElement.parentElement;
+      if (currentElement === null) {
+        return null;
+      }
+    } else {
+      currentElement = nextElement as HTMLElement;
+    }
+    if (
+      currentElement.id !== '' &&
+      isElementInViewport(currentElement) &&
+      // Ignore elements that are fixed or absolute as they most likely won't help with scrolling the element into view
+      ['fixed', 'absolute'].includes(
+        currentElement.computedStyleMap().get('position').toString()
+      )
+    ) {
+      return currentElement;
+    }
+  }
+  return null;
+}
 
 Sentry.init({
   // https://sentry-test.sentry.io/issues/?project=4505742647754752
@@ -34,10 +140,18 @@ export function FeebdackWidget() {
     title: string;
     image?: Blob;
     imageCutout?: Blob;
+    selection?: Rect;
   }) => {
     console.log('handleSubmit data:', data);
     setOpen(false);
 
+    const selectedElement = data.selection && getSelectedDomElement(data.selection);
+    console.log('selected element:', selectedElement);
+    if (selectedElement) {
+      console.log('nearest heading:', getNearestHeadingElement(selectedElement));
+      console.log('nearest id:', getNearestIdInViewport(selectedElement));
+    }
+
     let eventId: string;
     const imageData = data.image && (await blobToUint8Array(data.image));
     const imageCutoutData =
diff --git a/src/components/screenshotEditor.tsx b/src/components/screenshotEditor.tsx
index 44f141a9ec1d6..a0d3d297fc8e8 100644
--- a/src/components/screenshotEditor.tsx
+++ b/src/components/screenshotEditor.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import {ScreenshotEditorHelp} from './screenshotEditorHelp';
 
-interface Rect {
+export interface Rect {
   height: number;
   width: number;
   x: number;

From 39aa05dbb91689b600678186106d6db2a7278b1c Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Mon, 21 Aug 2023 17:59:37 +0200
Subject: [PATCH 13/26] Fix visual artifacts

---
 src/components/feedbackModal.tsx    | 15 +++++++++++++++
 src/components/screenshotEditor.tsx | 16 ++++++++--------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index 3c9c6f5b584e7..ccddd354335c1 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -150,8 +150,23 @@ const ScreenshotPreview = styled.img`
   height: 200px;
   object-fit: contain;
   background-color: #ccc;
+  repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 16px,
+    rgba(0, 0, 0, 0.2) 16px,
+    rgba(0, 0, 0, 0.2) 17.5px
+  );
   border-radius: 4px;
   border: 1px solid #ccc;
+  background-color: #fff;
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 5px,
+    rgba(0, 0, 0, 0.03) 5px,
+    rgba(0, 0, 0, 0.03) 10px
+  );
 `;
 
 interface FeedbackModalProps {
diff --git a/src/components/screenshotEditor.tsx b/src/components/screenshotEditor.tsx
index a0d3d297fc8e8..40532aa8cb8cb 100644
--- a/src/components/screenshotEditor.tsx
+++ b/src/components/screenshotEditor.tsx
@@ -27,13 +27,13 @@ const Container = styled.div`
   width: 100vw;
   top: 0;
   left: 0;
-  background-color: #ccc;
+  background-color: #fff;
   background-image: repeating-linear-gradient(
     45deg,
     transparent,
-    transparent 16px,
-    rgba(0, 0, 0, 0.2) 16px,
-    rgba(0, 0, 0, 0.2) 17.5px
+    transparent 5px,
+    rgba(0, 0, 0, 0.03) 5px,
+    rgba(0, 0, 0, 0.03) 10px
   );
 `;
 
@@ -147,14 +147,14 @@ export function ScreenshotEditor({dataUrl, onSubmit}: ScreenshotEditorProps) {
     }
 
     function handleMouseDown(e) {
-      rectStart.x = e.offsetX / currentRatio.current;
-      rectStart.y = e.offsetY / currentRatio.current;
+      rectStart.x = Math.floor(e.offsetX / currentRatio.current);
+      rectStart.y = Math.floor(e.offsetY / currentRatio.current);
       isDragging = true;
       setIsDraggingState(true);
     }
     function handleMouseMove(e) {
-      rectEnd.x = e.offsetX / currentRatio.current;
-      rectEnd.y = e.offsetY / currentRatio.current;
+      rectEnd.x = Math.floor(e.offsetX / currentRatio.current);
+      rectEnd.y = Math.floor(e.offsetY / currentRatio.current);
       refreshCanvas();
     }
     function handleMouseUp() {

From 36bc1f5b4eaa46feaa7db67dbdf32b6ecd7fd5cb Mon Sep 17 00:00:00 2001
From: Anton Ovchinnikov <anton@tonyo.info>
Date: Tue, 22 Aug 2023 12:37:36 +0200
Subject: [PATCH 14/26] Typo

---
 src/components/screenshotEditorHelp.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/screenshotEditorHelp.tsx b/src/components/screenshotEditorHelp.tsx
index b608f29e1af0d..0bece6c0d512d 100644
--- a/src/components/screenshotEditorHelp.tsx
+++ b/src/components/screenshotEditorHelp.tsx
@@ -64,7 +64,7 @@ export function ScreenshotEditorHelp({hide}: {hide: boolean}) {
   return (
     <Wrapper data-hide={isHidden || hide}>
       <Content ref={contentRef}>
-        {'Mark the problem on the sceen ("Enter" to skip)'}
+        {'Mark the problem on the screen (press "Enter" to skip)'}
       </Content>
     </Wrapper>
   );

From 0fe9b37380798b2c25a726202870508462541f38 Mon Sep 17 00:00:00 2001
From: Anton Ovchinnikov <anton@tonyo.info>
Date: Tue, 22 Aug 2023 14:33:50 +0200
Subject: [PATCH 15/26] Add name/email fields

---
 src/components/feedbackModal.tsx  | 14 ++++++++++++++
 src/components/feedbackWidget.tsx |  8 +++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index ccddd354335c1..922f7434ba6f0 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -173,6 +173,8 @@ interface FeedbackModalProps {
   onClose: () => void;
   onSubmit: (data: {
     comment: string;
+    email: string;
+    name: string;
     title: string;
     image?: Blob;
     imageCutout?: Blob;
@@ -235,6 +237,8 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
     onSubmit({
       comment: retrieveStringValue(formData, 'comment'),
       title: retrieveStringValue(formData, 'title'),
+      name: retrieveStringValue(formData, 'name'),
+      email: retrieveStringValue(formData, 'email'),
       image: screenshot,
       imageCutout: screenshotCutout,
       selection: selectionRef.current,
@@ -299,6 +303,16 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
                 </ScreenshotButton>
               )}
             </Label>
+            <div style={{display: 'flex', flexDirection: 'row'}}>
+              <Label>
+                Your Name (optional)
+                <Input type="text" name="name" placeholder="Anonymous" />
+              </Label>
+              <Label>
+                Your Email (optional)
+                <Input type="text" name="email" placeholder="you@test.com" />
+              </Label>
+            </div>
             <ModalFooter>
               <CancelButton type="button" onClick={onClose}>
                 Cancel
diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index 0a84cb670e1e0..c5b7cf39125b7 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -137,6 +137,8 @@ export function FeebdackWidget() {
 
   const handleSubmit = async (data: {
     comment: string;
+    email: string;
+    name: string;
     title: string;
     image?: Blob;
     imageCutout?: Blob;
@@ -193,9 +195,9 @@ export function FeebdackWidget() {
     });
 
     const userFeedback = {
-      name: 'fixme name',
-      email: 'test@test.com',
-      comments: `${data.title}: ${data.comment}`,
+      name: data.name || 'Anonymous',
+      email: data.email,
+      comments: data.comment,
       event_id: eventId,
     };
     Sentry.captureUserFeedback(userFeedback);

From e4050272de398fa58de40e624ccfc8e41660fd29 Mon Sep 17 00:00:00 2001
From: Anton Ovchinnikov <anton@tonyo.info>
Date: Tue, 22 Aug 2023 14:55:55 +0200
Subject: [PATCH 16/26] Set a section tag, if detected

---
 src/components/feedbackWidget.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index c5b7cf39125b7..a1b1bcc170911 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -148,10 +148,14 @@ export function FeebdackWidget() {
     setOpen(false);
 
     const selectedElement = data.selection && getSelectedDomElement(data.selection);
+    let nearestHeadingElement: HTMLElement;
+    let nearestIdInViewport: HTMLElement;
     console.log('selected element:', selectedElement);
     if (selectedElement) {
-      console.log('nearest heading:', getNearestHeadingElement(selectedElement));
-      console.log('nearest id:', getNearestIdInViewport(selectedElement));
+      nearestHeadingElement = getNearestHeadingElement(selectedElement);
+      nearestIdInViewport = getNearestIdInViewport(selectedElement);
+      console.log('nearest heading:', nearestHeadingElement);
+      console.log('nearest id:', nearestIdInViewport);
     }
 
     let eventId: string;
@@ -179,8 +183,9 @@ export function FeebdackWidget() {
       const sourcePage = getGitHubSourcePage();
       console.log('GitHub source page:', sourcePage);
       if (sourcePage) {
-        scope.setContext('Edit Content', {
-          'Source file': sourcePage,
+        scope.setContext('Content', {
+          'Edit file': sourcePage,
+          Repository: sourcePage.split('/').slice(0, 5).join('/'),
         });
       }
 
@@ -189,6 +194,10 @@ export function FeebdackWidget() {
         scope.setTag('page_title', pageTitle);
       }
 
+      if (nearestHeadingElement && nearestHeadingElement.textContent) {
+        scope.setTag('page_section', nearestHeadingElement.textContent);
+      }
+
       // We don't need breadcrumbs for now
       scope.clearBreadcrumbs();
       eventId = Sentry.captureMessage(data.title);

From c521a03e4b3535b2c5a2500eb5b2c127f036d0a1 Mon Sep 17 00:00:00 2001
From: Anton Ovchinnikov <anton@tonyo.info>
Date: Tue, 22 Aug 2023 16:52:55 +0200
Subject: [PATCH 17/26] Basic session replay support

---
 src/components/feedbackWidget.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index a1b1bcc170911..71874d4c6c21b 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -5,6 +5,16 @@ import {FeebdackButton} from './feedbackButton';
 import {FeedbackModal} from './feedbackModal';
 import {Rect} from './screenshotEditor';
 
+const replay = new Sentry.Replay();
+Sentry.init({
+  // https://sentry-test.sentry.io/issues/?project=4505742647754752
+  dsn: 'https://db1366bd2d586cac50181e3eaee5c3e1@o19635.ingest.sentry.io/4505742647754752',
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 1.0,
+  integrations: [replay],
+  debug: true,
+});
+
 function containsRect(bounds: DOMRect, rect: Rect): boolean {
   return (
     rect.x >= bounds.x &&
@@ -110,11 +120,6 @@ function getNearestIdInViewport(element: HTMLElement): HTMLElement | null {
   return null;
 }
 
-Sentry.init({
-  // https://sentry-test.sentry.io/issues/?project=4505742647754752
-  dsn: 'https://db1366bd2d586cac50181e3eaee5c3e1@o19635.ingest.sentry.io/4505742647754752',
-});
-
 function getGitHubSourcePage(): string {
   const xpath = "//a[text()='Suggest an edit to this page']";
   const matchingElement = document.evaluate(
@@ -198,6 +203,14 @@ export function FeebdackWidget() {
         scope.setTag('page_section', nearestHeadingElement.textContent);
       }
 
+      // Prepare session replay
+      replay.flush();
+      const replayId = replay.getReplayId();
+      console.log('replayId', replayId);
+      if (replayId) {
+        scope.setTag('replayId', replayId);
+      }
+
       // We don't need breadcrumbs for now
       scope.clearBreadcrumbs();
       eventId = Sentry.captureMessage(data.title);

From d300fa185aa9208f1c806096be31bf278ad078c2 Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Tue, 22 Aug 2023 17:36:31 +0200
Subject: [PATCH 18/26] Add editor

---
 src/components/feedbackModal.tsx              | 124 +++++--
 src/components/feedbackWidget.tsx             |   4 +-
 .../hooks/useImageEditor/imageEditor.ts       | 309 ++++++++++++++++++
 src/components/hooks/useImageEditor/index.ts  |  75 +++++
 src/components/hooks/useImageEditor/tool.ts   | 220 +++++++++++++
 src/components/hooks/useImageEditor/types.ts  |  33 ++
 src/components/hooks/useImageEditor/utils.ts  | 181 ++++++++++
 src/components/imageEditorWrapper.tsx         | 264 +++++++++++++++
 8 files changed, 1185 insertions(+), 25 deletions(-)
 create mode 100644 src/components/hooks/useImageEditor/imageEditor.ts
 create mode 100644 src/components/hooks/useImageEditor/index.ts
 create mode 100644 src/components/hooks/useImageEditor/tool.ts
 create mode 100644 src/components/hooks/useImageEditor/types.ts
 create mode 100644 src/components/hooks/useImageEditor/utils.ts
 create mode 100644 src/components/imageEditorWrapper.tsx

diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index 922f7434ba6f0..d76158266fa8e 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -5,6 +5,7 @@ import styled from '@emotion/styled';
 import {useFocusTrap} from './hooks/useFocusTrap';
 import {useShortcut} from './hooks/useShortcut';
 import {useTakeScreenshot} from './hooks/useTakeScreenhot';
+import {ImageEditorWrapper} from './imageEditorWrapper';
 import {Rect, ScreenshotEditor} from './screenshotEditor';
 
 const Dialog = styled.dialog`
@@ -144,22 +145,53 @@ const ScreenshotButton = styled.button`
   }
 `;
 
-const ScreenshotPreview = styled.img`
-  display: block;
+const ScreenshotWrapper = styled.div`
+  display: flex;
+  gap: 8px;
   width: 100%;
-  height: 200px;
-  object-fit: contain;
-  background-color: #ccc;
-  repeating-linear-gradient(
-    45deg,
-    transparent,
-    transparent 16px,
-    rgba(0, 0, 0, 0.2) 16px,
-    rgba(0, 0, 0, 0.2) 17.5px
-  );
+`;
+
+const ScreenshotPreview = styled.button`
+  position: relative;
+  display: block;
+  flex: 1;
+  min-width: 0;
+  height: 160px;
   border-radius: 4px;
   border: 1px solid #ccc;
-  background-color: #fff;
+  overflow: hidden;
+  &::after {
+    content: 'Edit';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 600;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+  &:hover {
+    &::after {
+      opacity: 1;
+    }
+  }
+`;
+
+const PreviewImage = styled.img`
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  object-fit: contain;
   background-image: repeating-linear-gradient(
     45deg,
     transparent,
@@ -211,6 +243,12 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
   const [screenshotPreview, setScreenshotPreview] = React.useState<string | undefined>(
     undefined
   );
+  const [screenshotCutoutPreview, setScreenshotCutoutPreview] = React.useState<
+    string | undefined
+  >(undefined);
+  const [isEditScreenshotOpen, setIsEditScreenshotOpen] = React.useState(false);
+  const [isEditCutoutOpen, setIsEditCutoutOpen] = React.useState(false);
+
   const selectionRef = React.useRef<Rect | undefined>(undefined);
   const dialogRef = React.useRef<HTMLDialogElement>(null);
   const formRef = React.useRef<HTMLFormElement>(null);
@@ -263,6 +301,7 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
     setScreenshot(newScreenshot);
     setScreenshotCutout(cutout);
     setScreenshotPreview(await blobToBase64(newScreenshot));
+    setScreenshotCutoutPreview(cutout && (await blobToBase64(cutout)));
     selectionRef.current = selection;
   };
 
@@ -293,16 +332,6 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
                 placeholder="Explain what bothers you"
               />
             </Label>
-            <Label>
-              Screenshot
-              {screenshotPreview ? (
-                <ScreenshotPreview src={screenshotPreview} />
-              ) : (
-                <ScreenshotButton type="button" onClick={handleScreenshot}>
-                  Add Screenshot
-                </ScreenshotButton>
-              )}
-            </Label>
             <div style={{display: 'flex', flexDirection: 'row'}}>
               <Label>
                 Your Name (optional)
@@ -313,6 +342,29 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
                 <Input type="text" name="email" placeholder="you@test.com" />
               </Label>
             </div>
+            <Label>Screenshot</Label>
+            {screenshotPreview ? (
+              <ScreenshotWrapper>
+                <ScreenshotPreview
+                  type="button"
+                  onClick={() => setIsEditScreenshotOpen(true)}
+                >
+                  <PreviewImage src={screenshotPreview} />
+                </ScreenshotPreview>
+                {screenshotCutout && (
+                  <ScreenshotPreview
+                    type="button"
+                    onClick={() => setIsEditCutoutOpen(true)}
+                  >
+                    <PreviewImage src={screenshotCutoutPreview} />
+                  </ScreenshotPreview>
+                )}
+              </ScreenshotWrapper>
+            ) : (
+              <ScreenshotButton type="button" onClick={handleScreenshot}>
+                Add Screenshot
+              </ScreenshotButton>
+            )}
             <ModalFooter>
               <CancelButton type="button" onClick={onClose}>
                 Cancel
@@ -325,6 +377,32 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
       {screenshotPreview && !screenshot && (
         <ScreenshotEditor dataUrl={screenshotPreview} onSubmit={handleEditorSubmit} />
       )}
+      {isEditScreenshotOpen && (
+        <ImageEditorWrapper
+          src={screenshotPreview}
+          onSubmit={async newScreenshot => {
+            setScreenshot(newScreenshot);
+            setScreenshotPreview(await blobToBase64(newScreenshot));
+            setIsEditScreenshotOpen(false);
+          }}
+          onCancel={() => {
+            setIsEditScreenshotOpen(false);
+          }}
+        />
+      )}
+      {isEditCutoutOpen && (
+        <ImageEditorWrapper
+          src={screenshotCutoutPreview}
+          onSubmit={async newCutout => {
+            setScreenshotCutout(newCutout);
+            setScreenshotCutoutPreview(await blobToBase64(newCutout));
+            setIsEditCutoutOpen(false);
+          }}
+          onCancel={() => {
+            setIsEditCutoutOpen(false);
+          }}
+        />
+      )}
     </React.Fragment>
   );
 }
diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index 71874d4c6c21b..eeed619710c78 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -34,8 +34,8 @@ function getSelectedDomElement(selection: Rect): HTMLElement | null {
   const reducedSelection = {
     x: selection.x + 30,
     y: selection.y + 30,
-    width: selection.width - 60,
-    height: selection.height - 60,
+    width: Math.max(selection.width - 60, 0),
+    height: Math.max(selection.height - 60),
   };
 
   // Retrieve all elements at the center of the selection
diff --git a/src/components/hooks/useImageEditor/imageEditor.ts b/src/components/hooks/useImageEditor/imageEditor.ts
new file mode 100644
index 0000000000000..5aeabb8f51a45
--- /dev/null
+++ b/src/components/hooks/useImageEditor/imageEditor.ts
@@ -0,0 +1,309 @@
+import {IDrawing, ITool, Rect} from './types';
+import {
+  Point,
+  translateBoundingBoxToDocument,
+  translateMouseEvent,
+  translatePointToCanvas,
+} from './utils';
+
+interface Options {
+  canvas: HTMLCanvasElement;
+  image: HTMLImageElement;
+  onLoad?: () => void;
+}
+
+class Resizer {
+  private boundingBox: Rect;
+  private box: HTMLDivElement;
+  private isDragging: boolean = false;
+  constructor(boundingBox: Rect, onDrag?: (event: MouseEvent) => void) {
+    this.boundingBox = boundingBox;
+
+    const box = document.createElement('div');
+    this.box = box;
+    document.body.appendChild(box);
+
+    const horizontalDashedGradient = `repeating-linear-gradient(
+      to right,
+      white,
+      white 5px,
+      black 5px,
+      black 10px
+    )`;
+    const verticalDashedGradient = `repeating-linear-gradient(
+      to bottom,
+      white,
+      white 5px,
+      black 5px,
+      black 10px
+    )`;
+
+    const topBorder = document.createElement('div');
+    topBorder.style.position = 'absolute';
+    topBorder.style.width = '100%';
+    topBorder.style.height = '2px';
+    topBorder.style.top = '0';
+    topBorder.style.left = '0';
+    topBorder.style.backgroundImage = horizontalDashedGradient;
+
+    const bottomBorder = document.createElement('div');
+    bottomBorder.style.position = 'absolute';
+    bottomBorder.style.width = '100%';
+    bottomBorder.style.height = '2px';
+    bottomBorder.style.bottom = '0';
+    bottomBorder.style.left = '0';
+    bottomBorder.style.backgroundImage = horizontalDashedGradient;
+
+    this.box.appendChild(topBorder);
+    this.box.appendChild(bottomBorder);
+
+    const leftBorder = document.createElement('div');
+    leftBorder.style.position = 'absolute';
+    leftBorder.style.height = '100%';
+    leftBorder.style.width = '2px';
+    leftBorder.style.top = '0';
+    leftBorder.style.left = '0';
+    leftBorder.style.backgroundImage = verticalDashedGradient;
+
+    const rightBorder = document.createElement('div');
+    rightBorder.style.position = 'absolute';
+    rightBorder.style.height = '100%';
+    rightBorder.style.width = '2px';
+    rightBorder.style.top = '0';
+    rightBorder.style.right = '0';
+    rightBorder.style.backgroundImage = verticalDashedGradient;
+
+    this.box.appendChild(leftBorder);
+    this.box.appendChild(rightBorder);
+
+    this.box.addEventListener('mousedown', () => {
+      this.isDragging = true;
+    });
+
+    this.box.addEventListener('mouseup', () => {
+      this.isDragging = false;
+    });
+
+    window.addEventListener('mousemove', e => {
+      if (this.isDragging) {
+        onDrag?.(e);
+      }
+    });
+
+    this.updateStyles();
+  }
+
+  destroy() {
+    this.box.remove();
+  }
+
+  move(x: number, y: number) {
+    this.boundingBox = {
+      ...this.boundingBox,
+      x: this.boundingBox.x + x,
+      y: this.boundingBox.y + y,
+    };
+    this.updateStyles();
+  }
+
+  private updateStyles() {
+    this.box.style.position = 'fixed';
+    this.box.style.zIndex = '90000';
+    this.box.style.width = `${this.boundingBox.width + 12}px`;
+    this.box.style.height = `${this.boundingBox.height + 12}px`;
+    this.box.style.left = `${this.boundingBox.x - 6}px`;
+    this.box.style.top = `${this.boundingBox.y - 6}px`;
+    this.box.style.cursor = 'move';
+  }
+}
+
+export class ImageEditor {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private drawings: IDrawing[] = [];
+  private scheduledFrame: number | null = null;
+  private image: HTMLImageElement;
+  private isInteractive: boolean = false;
+  private selectedDrawingId: string | null = null;
+  private resizer: Resizer | null = null;
+  private _tool: ITool | null = null;
+  private _color: string = '#79628c';
+  private _strokeSize: number = 6;
+
+  constructor(options: Options) {
+    const {canvas, image, onLoad} = options;
+    this.canvas = canvas;
+    this.image = image;
+    this.ctx = canvas.getContext('2d');
+
+    if (image.complete) {
+      this.isInteractive = true;
+      this.canvas.width = image.width;
+      this.canvas.height = image.height;
+      this.sheduleUpdateCanvas();
+      onLoad?.();
+    } else {
+      image.addEventListener('load', () => {
+        this.isInteractive = true;
+        this.canvas.width = image.width;
+        this.canvas.height = image.height;
+        this.sheduleUpdateCanvas();
+        onLoad();
+      });
+    }
+
+    this.canvas.addEventListener('mousedown', this.handleMouseDown);
+    this.canvas.addEventListener('mousemove', this.handleMouseMove, {passive: true});
+    this.canvas.addEventListener('mouseup', this.handleMouseUp);
+    this.canvas.addEventListener('click', this.handleClick);
+    window.addEventListener('keydown', this.handleDelete);
+  }
+
+  destroy() {
+    this.canvas.removeEventListener('mousedown', this.handleMouseDown);
+    this.canvas.removeEventListener('mousemove', this.handleMouseMove);
+    this.canvas.removeEventListener('mouseup', this.handleMouseUp);
+    this.canvas.removeEventListener('click', this.handleClick);
+    window.removeEventListener('keydown', this.handleDelete);
+    this.drawings = [];
+  }
+
+  set tool(tool: ITool | null) {
+    if (this._tool?.isDrawing) {
+      // end the current drawing and discard it
+      this._tool.endDrawing(Point.fromNumber(0));
+    }
+    this._tool = tool;
+    // TODO(arthur): where to place this?
+    this.canvas.style.cursor = this._tool ? 'crosshair' : 'grab';
+  }
+
+  get tool(): ITool | null {
+    return this._tool;
+  }
+
+  set color(color: string) {
+    this._color = color;
+    if (this.selectedDrawingId) {
+      const selectedDrawing = this.drawings.find(d => d.id === this.selectedDrawingId);
+      selectedDrawing?.setColor(color);
+    }
+  }
+
+  get color(): string {
+    return this._color;
+  }
+
+  set strokeSize(strokeSize: number) {
+    this._strokeSize = strokeSize;
+    if (this.selectedDrawingId) {
+      const selectedDrawing = this.drawings.find(d => d.id === this.selectedDrawingId);
+      selectedDrawing?.setStrokeSize(strokeSize);
+    }
+  }
+
+  get strokeSize(): number {
+    return this._strokeSize;
+  }
+
+  private updateCanvas = () => {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.ctx.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);
+    this.drawings.forEach(drawing => {
+      drawing.drawToCanvas(this.ctx, drawing.id === this.selectedDrawingId);
+    });
+    if (this._tool?.isDrawing) {
+      const drawing = this._tool.getDrawingBuffer();
+      if (drawing) {
+        drawing.drawToCanvas(this.ctx, false);
+      }
+    }
+  };
+
+  private sheduleUpdateCanvas = () => {
+    if (this.scheduledFrame) {
+      cancelAnimationFrame(this.scheduledFrame);
+    }
+    this.scheduledFrame = requestAnimationFrame(this.updateCanvas);
+  };
+
+  private handleClick = (e: MouseEvent) => {
+    if (this._tool || !this.isInteractive) {
+      return;
+    }
+    const point = translateMouseEvent(e, this.canvas);
+    const drawing = [...this.drawings].reverse().find(d => d.isInPath(this.ctx, point));
+    this.selectedDrawingId = drawing?.id;
+    this.sheduleUpdateCanvas();
+    this.resizer?.destroy();
+    this.resizer = null;
+    if (drawing) {
+      const boundingBox = drawing.getBoundingBox();
+      this.resizer = new Resizer(
+        translateBoundingBoxToDocument(boundingBox, this.canvas),
+        this.handleDrag
+      );
+    }
+  };
+
+  private handleDelete = (e: KeyboardEvent) => {
+    if (!this.selectedDrawingId || !['Delete', 'Backspace'].includes(e.key)) {
+      return;
+    }
+    this.drawings = this.drawings.filter(d => d.id !== this.selectedDrawingId);
+    this.selectedDrawingId = null;
+    this.resizer?.destroy();
+    this.resizer = null;
+    this.sheduleUpdateCanvas();
+  };
+
+  private handleMouseDown = (e: MouseEvent) => {
+    if (!this._tool || this._tool.isDrawing || !this.isInteractive) {
+      return;
+    }
+    this._tool.startDrawing(translateMouseEvent(e, this.canvas), this._color);
+    this.sheduleUpdateCanvas();
+  };
+
+  private handleMouseMove = (e: MouseEvent) => {
+    if (!this._tool || !this._tool.isDrawing) {
+      return;
+    }
+    this._tool.draw(translateMouseEvent(e, this.canvas));
+    this.sheduleUpdateCanvas();
+  };
+
+  private handleMouseUp = (e: MouseEvent) => {
+    if (!this._tool || !this._tool.isDrawing) {
+      return;
+    }
+    const drawing = this._tool.endDrawing(translateMouseEvent(e, this.canvas));
+    if (drawing) {
+      this.drawings.push(drawing);
+    }
+    this.sheduleUpdateCanvas();
+  };
+
+  private handleDrag = (e: MouseEvent) => {
+    const selectedDrawing = this.drawings.find(d => d.id === this.selectedDrawingId);
+    if (!this.resizer || !this.selectedDrawingId) {
+      return;
+    }
+    const delta = Point.fromNumber(e.movementX, e.movementY);
+    selectedDrawing.moveBy(translatePointToCanvas(delta, this.canvas));
+    this.resizer.move(e.movementX, e.movementY);
+    this.sheduleUpdateCanvas();
+  };
+
+  public getDataURL = (): string => {
+    return this.canvas.toDataURL();
+  };
+
+  public getBlob = (): Promise<Blob> => {
+    return new Promise<Blob>(resolve => {
+      this.canvas.toBlob(blob => {
+        resolve(blob);
+      });
+    });
+  };
+}
diff --git a/src/components/hooks/useImageEditor/index.ts b/src/components/hooks/useImageEditor/index.ts
new file mode 100644
index 0000000000000..38870558830f7
--- /dev/null
+++ b/src/components/hooks/useImageEditor/index.ts
@@ -0,0 +1,75 @@
+import {useEffect, useRef, useState} from 'react';
+
+import {ImageEditor} from './imageEditor';
+import {Arrow, Pen, Rectangle} from './tool';
+
+interface Params {
+  canvas: HTMLCanvasElement;
+  image: HTMLImageElement;
+  onLoad?: () => void;
+}
+
+export type ToolKey = 'arrow' | 'pen' | 'rectangle' | null;
+export const Tools: ToolKey[] = ['arrow', 'pen', 'rectangle', null];
+
+export function useImageEditor({canvas, image, onLoad}: Params) {
+  const editorRef = useRef<ImageEditor | null>(null);
+  const [selectedTool, setSelectedTool] = useState<ToolKey>('arrow');
+  const [selectedColor, setSelectedColor] = useState<string>('#ff7738');
+  const [strokeSize, setStrokeSize] = useState<number>(6);
+
+  useEffect(() => {
+    if (!canvas) {
+      return () => {};
+    }
+    const editor = new ImageEditor({canvas, image, onLoad});
+    editor.tool = new Arrow();
+    editor.color = '#ff7738';
+    editor.strokeSize = 6;
+    editorRef.current = editor;
+    return () => {
+      editor.destroy();
+    };
+  }, [canvas, image, onLoad]);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      switch (selectedTool) {
+        case 'arrow':
+          editorRef.current.tool = new Arrow();
+          break;
+        case 'pen':
+          editorRef.current.tool = new Pen();
+          break;
+        case 'rectangle':
+          editorRef.current.tool = new Rectangle();
+          break;
+        default:
+          editorRef.current.tool = null;
+          break;
+      }
+    }
+  }, [selectedTool]);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.color = selectedColor;
+    }
+  }, [selectedColor]);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.strokeSize = strokeSize;
+    }
+  }, [strokeSize]);
+
+  return {
+    selectedTool,
+    setSelectedTool,
+    selectedColor,
+    setSelectedColor,
+    strokeSize,
+    setStrokeSize,
+    getBlob: () => editorRef.current?.getBlob(),
+  };
+}
diff --git a/src/components/hooks/useImageEditor/tool.ts b/src/components/hooks/useImageEditor/tool.ts
new file mode 100644
index 0000000000000..eaef69268f158
--- /dev/null
+++ b/src/components/hooks/useImageEditor/tool.ts
@@ -0,0 +1,220 @@
+import {IDrawing, IPoint, ITool, Rect} from './types';
+import {
+  getPointsBoundingBox,
+  Point,
+  translateRect,
+  updateBoundingBox,
+  Vector,
+} from './utils';
+
+class Tool implements ITool {
+  private DrawingConstructor: new () => IDrawing;
+  private drawing: IDrawing | null = null;
+
+  get isDrawing() {
+    return this.drawing !== null;
+  }
+
+  constructor(DrawingConstructor: new () => IDrawing) {
+    this.DrawingConstructor = DrawingConstructor;
+  }
+
+  startDrawing(point: IPoint, color: string) {
+    this.drawing = new this.DrawingConstructor();
+    this.drawing.setColor(color);
+    this.drawing.start(point);
+  }
+
+  draw(point: IPoint) {
+    if (!this.isDrawing) {
+      throw new Error('Call startDrawing before calling draw');
+    }
+    this.drawing.draw(point);
+  }
+  endDrawing(point: IPoint) {
+    if (!this.isDrawing) {
+      throw new Error('Call startDrawing before calling endDrawing');
+    }
+    this.drawing.end(point);
+    const drawing = this.drawing;
+    this.drawing = null;
+    return drawing;
+  }
+  getDrawingBuffer() {
+    return this.drawing;
+  }
+}
+
+class Drawing implements IDrawing {
+  protected path = new Path2D();
+  protected startPoint: IPoint;
+  protected endPoint: IPoint;
+  protected translate: IPoint = {x: 0, y: 0};
+  protected color = 'red';
+  protected strokeSize = 6;
+
+  public id = Math.random().toString();
+
+  constructor() {
+    this.start = this.start.bind(this);
+    this.draw = this.draw.bind(this);
+    this.end = this.end.bind(this);
+    this.isInPath = this.isInPath.bind(this);
+    this.drawToCanvas = this.drawToCanvas.bind(this);
+    this.getBoundingBox = this.getBoundingBox.bind(this);
+  }
+
+  get isValid() {
+    return true;
+  }
+
+  start(point: IPoint): void {
+    this.startPoint = point;
+    this.endPoint = point;
+  }
+
+  draw(point: IPoint): void {
+    this.endPoint = point;
+  }
+
+  end(point: IPoint): void {
+    this.endPoint = point;
+  }
+
+  getBoundingBox() {
+    return getPointsBoundingBox([
+      Point.add(this.startPoint, this.translate),
+      Point.add(this.endPoint, this.translate),
+    ]);
+  }
+
+  setColor(color: string) {
+    this.color = color;
+  }
+
+  setStrokeSize(strokeSize: number) {
+    this.strokeSize = strokeSize;
+  }
+
+  isInPath(context: CanvasRenderingContext2D, point: IPoint) {
+    context.translate(this.translate.x, this.translate.y);
+    const isCollision = context.isPointInStroke(this.path, point.x, point.y);
+
+    // Reset current transformation matrix to the identity matrix
+    context.setTransform(1, 0, 0, 1, 0, 0);
+    return isCollision;
+  }
+
+  drawToCanvas(context: CanvasRenderingContext2D) {
+    if (!this.isValid) {
+      return;
+    }
+
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    context.strokeStyle = this.color;
+    context.lineWidth = this.strokeSize;
+
+    context.translate(this.translate.x, this.translate.y);
+    context.stroke(this.path);
+
+    // Reset current transformation matrix to the identity matrix
+    context.setTransform(1, 0, 0, 1, 0, 0);
+  }
+
+  moveBy(point: IPoint) {
+    this.translate = Point.add(this.translate, point);
+  }
+}
+
+class RectangleDrawing extends Drawing {
+  get isValid() {
+    return Point.distance(this.startPoint, this.endPoint) > 0;
+  }
+
+  draw = (point: IPoint) => {
+    super.draw(point);
+    this.endPoint = point;
+    this.path = new Path2D();
+    this.path.rect(
+      this.startPoint.x,
+      this.startPoint.y,
+      this.endPoint.x - this.startPoint.x,
+      this.endPoint.y - this.startPoint.y
+    );
+  };
+}
+
+export class Rectangle extends Tool {
+  constructor() {
+    super(RectangleDrawing);
+  }
+}
+
+class PenDrawing extends Drawing {
+  private lastPoint: IPoint;
+  private boundingBox: Rect;
+
+  getBoundingBox(): Rect {
+    return translateRect(this.boundingBox, this.translate);
+  }
+
+  start = (point: IPoint) => {
+    super.start(point);
+    this.path.moveTo(point.x, point.y);
+    this.lastPoint = point;
+    this.boundingBox = getPointsBoundingBox([point]);
+  };
+
+  draw = (point: IPoint) => {
+    super.draw(point);
+    // Smooth the line
+    if (Point.distance(this.lastPoint, point) < 5) {
+      return;
+    }
+    this.lastPoint = point;
+    this.path.lineTo(point.x, point.y);
+    this.boundingBox = updateBoundingBox(this.boundingBox, [point]);
+  };
+
+  end = (point: IPoint) => {
+    this.path.lineTo(point.x, point.y);
+    this.boundingBox = updateBoundingBox(this.boundingBox, [point]);
+  };
+}
+
+export class Pen extends Tool {
+  constructor() {
+    super(PenDrawing);
+  }
+}
+
+class ArrowDrawing extends Drawing {
+  get isValid() {
+    return Point.distance(this.startPoint, this.endPoint) > 0;
+  }
+
+  draw = (point: IPoint) => {
+    super.draw(point);
+
+    this.path = new Path2D();
+    this.path.moveTo(this.startPoint.x, this.startPoint.y);
+    this.path.lineTo(this.endPoint.x, this.endPoint.y);
+    const unitVector = new Vector(
+      Point.subtract(this.startPoint, this.endPoint)
+    ).normalize();
+    const leftVector = unitVector.rotate(Math.PI / 5);
+    const rightVector = unitVector.rotate(-Math.PI / 5);
+    const leftPoint = Point.add(this.endPoint, Point.multiply(leftVector, 20));
+    const rightPoint = Point.add(this.endPoint, Point.multiply(rightVector, 20));
+    this.path.lineTo(leftPoint.x, leftPoint.y);
+    this.path.moveTo(this.endPoint.x, this.endPoint.y);
+    this.path.lineTo(rightPoint.x, rightPoint.y);
+  };
+}
+
+export class Arrow extends Tool {
+  constructor() {
+    super(ArrowDrawing);
+  }
+}
diff --git a/src/components/hooks/useImageEditor/types.ts b/src/components/hooks/useImageEditor/types.ts
new file mode 100644
index 0000000000000..5f4ddb82f27a2
--- /dev/null
+++ b/src/components/hooks/useImageEditor/types.ts
@@ -0,0 +1,33 @@
+export interface IPoint {
+  x: number;
+  y: number;
+}
+
+export interface IDrawing {
+  draw: (point: IPoint) => void;
+  drawToCanvas: (context: CanvasRenderingContext2D, isSelected: boolean) => void;
+  end: (point: IPoint) => void;
+  getBoundingBox: () => Rect;
+  id: string;
+  isInPath: (ctx: CanvasRenderingContext2D, point: IPoint) => boolean;
+  get isValid(): boolean;
+  moveBy: (point: IPoint) => void;
+  setColor: (color: string) => void;
+  setStrokeSize: (strokeSize: number) => void;
+  start: (point: IPoint) => void;
+}
+
+export interface ITool {
+  draw: (point: IPoint) => void;
+  endDrawing: (point: IPoint) => IDrawing | null;
+  getDrawingBuffer: () => IDrawing | null;
+  isDrawing: boolean;
+  startDrawing: (point: IPoint, color: string) => void;
+}
+
+export interface Rect {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}
diff --git a/src/components/hooks/useImageEditor/utils.ts b/src/components/hooks/useImageEditor/utils.ts
new file mode 100644
index 0000000000000..96a517133d92e
--- /dev/null
+++ b/src/components/hooks/useImageEditor/utils.ts
@@ -0,0 +1,181 @@
+import {IPoint, Rect} from './types';
+
+function asPoint(x: IPoint | number): IPoint {
+  return typeof x === 'number' ? Point.fromNumber(x) : x;
+}
+
+export class Vector implements IPoint {
+  public x: number;
+  public y: number;
+
+  public get length(): number {
+    return Point.distance(Point.fromNumber(0), this);
+  }
+
+  static fromPoints(point1: IPoint, point2: IPoint): Vector {
+    return new Vector(Point.subtract(point2, point1));
+  }
+
+  constructor(point: IPoint) {
+    this.x = point.x;
+    this.y = point.y;
+  }
+
+  normalize() {
+    const length = this.length;
+    return new Vector({
+      x: this.x / length,
+      y: this.y / length,
+    });
+  }
+
+  rotate(angle: number) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    return new Vector({
+      x: this.x * cos - this.y * sin,
+      y: this.x * sin + this.y * cos,
+    });
+  }
+}
+
+export class Point {
+  static fromMouseEvent(e: MouseEvent): IPoint {
+    return {
+      x: e.offsetX,
+      y: e.offsetY,
+    };
+  }
+
+  static fromNumber(x: number, y?: number): IPoint {
+    return {x, y: y ?? x};
+  }
+
+  static multiply(point: IPoint, multiplier: number | IPoint): IPoint {
+    const mult = asPoint(multiplier);
+    return {
+      x: point.x * mult.x,
+      y: point.y * mult.y,
+    };
+  }
+
+  static divide(point: IPoint, divisor: number | IPoint): IPoint {
+    const div = asPoint(divisor);
+    return {
+      x: point.x / div.x,
+      y: point.y / div.y,
+    };
+  }
+
+  static add(point1: IPoint, point2: number | IPoint): IPoint {
+    const point = asPoint(point2);
+    return {
+      x: point1.x + point.x,
+      y: point1.y + point.y,
+    };
+  }
+
+  static subtract(point1: IPoint, point2: number | IPoint): IPoint {
+    const point = asPoint(point2);
+    return {
+      x: point1.x - point.x,
+      y: point1.y - point.y,
+    };
+  }
+
+  static distance(point1: IPoint, point2: IPoint): number {
+    return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
+  }
+
+  static round(point: IPoint): IPoint {
+    return {
+      x: Math.round(point.x),
+      y: Math.round(point.y),
+    };
+  }
+}
+
+export function getCanvasScaleRatio(canvas: HTMLCanvasElement): IPoint {
+  const rect = canvas.getBoundingClientRect();
+  const verticalScale = canvas.height / rect.height;
+  const horizontalScale = canvas.width / rect.width;
+  return {
+    x: horizontalScale,
+    y: verticalScale,
+  };
+}
+
+export function translatePoint(point: IPoint, ratio: IPoint): IPoint {
+  return Point.multiply(point, ratio);
+}
+
+export function translatePointToDocument(
+  point: IPoint,
+  canvas: HTMLCanvasElement
+): IPoint {
+  return translatePoint(
+    point,
+    Point.divide(Point.fromNumber(1), getCanvasScaleRatio(canvas))
+  );
+}
+
+export function translateBoundingBoxToDocument(
+  boundingBox: Rect,
+  canvas: HTMLCanvasElement
+): Rect {
+  const start = translatePointToDocument(boundingBox, canvas);
+  const dimensions = translatePointToDocument(
+    Point.fromNumber(boundingBox.width, boundingBox.height),
+    canvas
+  );
+  return {
+    x: start.x + canvas.getBoundingClientRect().left,
+    y: start.y + canvas.getBoundingClientRect().top,
+    width: dimensions.x,
+    height: dimensions.y,
+  };
+}
+
+export function translateMouseEvent(e: MouseEvent, canvas: HTMLCanvasElement): IPoint {
+  const ratio = getCanvasScaleRatio(canvas);
+  return Point.round(translatePoint(Point.fromMouseEvent(e), ratio));
+}
+
+export function translatePointToCanvas(point: IPoint, canvas: HTMLCanvasElement): IPoint {
+  return translatePoint(point, getCanvasScaleRatio(canvas));
+}
+
+export function translateRect(rect: Rect, vector: IPoint): Rect {
+  return {
+    x: rect.x + vector.x,
+    y: rect.y + vector.y,
+    width: rect.width,
+    height: rect.height,
+  };
+}
+
+export function getPointsBoundingBox(points: IPoint[]): Rect {
+  const xValues = points.map(p => p.x);
+  const yValues = points.map(p => p.y);
+  const minX = Math.min(...xValues);
+  const maxX = Math.max(...xValues);
+  const minY = Math.min(...yValues);
+  const maxY = Math.max(...yValues);
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY,
+  };
+}
+
+export function updateBoundingBox(boundingBox: Rect, points: IPoint[]): Rect {
+  return getPointsBoundingBox([
+    ...points,
+    Point.fromNumber(boundingBox.x, boundingBox.y),
+    Point.fromNumber(
+      boundingBox.x + boundingBox.width,
+      boundingBox.y + boundingBox.height
+    ),
+  ]);
+}
diff --git a/src/components/imageEditorWrapper.tsx b/src/components/imageEditorWrapper.tsx
new file mode 100644
index 0000000000000..38255811fbd26
--- /dev/null
+++ b/src/components/imageEditorWrapper.tsx
@@ -0,0 +1,264 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import styled from '@emotion/styled';
+
+import {Tools, useImageEditor} from './hooks/useImageEditor';
+
+export interface Rect {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}
+interface ImageEditorWrapperProps {
+  onCancel: () => void;
+  onSubmit: (screenshot: Blob) => void;
+  src: string;
+}
+
+const Canvas = styled.canvas`
+  cursor: crosshair;
+  max-width: 100vw;
+  max-height: 100vh;
+`;
+const Container = styled.div`
+  position: fixed;
+  z-index: 10000;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 5px,
+    rgba(0, 0, 0, 0.03) 5px,
+    rgba(0, 0, 0, 0.03) 10px
+  );
+`;
+
+const CanvasWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  margin-top: 32px;
+  height: calc(100% - 96px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ToolbarGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 48px;
+  background-color: #7669d3;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.2);
+`;
+
+const Toolbar = styled.div`
+  position: absolute;
+  width: 100%;
+  bottom: 8px;
+  display: flex;
+  gap: 16px;
+  flex-direction: row;
+  justify-content: center;
+`;
+
+const ToolButton = styled.button<{active: boolean}>`
+  width: 48px;
+  height: 48px;
+  border: none;
+  background-color: transparent;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  &:hover {
+    background-color: #4939ba;
+  }
+  &:focus {
+    outline: none;
+  }
+  &:not(:last-child) {
+  }
+  ${({active}) =>
+    active &&
+    `
+    background-color: #4939ba;
+  `}
+`;
+
+const CancelButton = styled.button`
+  height: 48px;
+  padding: 0 24px;
+  border: none;
+  background-color: #999;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  &:hover {
+    background-color: #4939ba;
+  }
+  &:focus {
+    outline: none;
+  }
+`;
+
+const SubmitButton = styled.button`
+  height: 48px;
+  padding: 0 24px;
+  border: none;
+  background-color: transparent;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  &:hover {
+    background-color: #4939ba;
+  }
+  &:focus {
+    outline: none;
+  }
+`;
+
+const ColorInput = styled.label<{background: string}>`
+  position: relative;
+  display: block;
+  width: 48px;
+  height: 48px;
+  margin: 0;
+  cursor: pointer;
+  ${({background}) => `background-color: ${background};`}
+  & input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0;
+    border: 4px solid rgba(0, 0, 0, 0.2);
+    pointer-events: none;
+  }
+`;
+
+const getCanvasRenderSize = (
+  canvas: HTMLCanvasElement,
+  containerElement: HTMLDivElement
+) => {
+  const canvasWidth = canvas.width;
+  const canvasHeight = canvas.height;
+  const maxWidth = containerElement.getBoundingClientRect().width;
+  const maxHeight = containerElement.getBoundingClientRect().height;
+  // fit canvas to window
+  let width = canvasWidth;
+  let height = canvasHeight;
+  const canvasRatio = canvasWidth / canvasHeight;
+  const windowRatio = maxWidth / maxHeight;
+
+  if (canvasRatio > windowRatio && canvasWidth > maxWidth) {
+    height = (maxWidth / canvasWidth) * canvasHeight;
+    width = maxWidth;
+  }
+
+  if (canvasRatio < windowRatio && canvasHeight > maxHeight) {
+    width = (maxHeight / canvasHeight) * canvasWidth;
+    height = maxHeight;
+  }
+
+  return {width, height};
+};
+
+const srcToImage = (src: string): HTMLImageElement => {
+  const image = new Image();
+  image.src = src;
+  return image;
+};
+
+export function ImageEditorWrapper({src, onCancel, onSubmit}: ImageEditorWrapperProps) {
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
+
+  const resizeCanvas = useCallback(() => {
+    if (!canvas) {
+      return;
+    }
+    // fit canvas to window
+    const {width, height} = getCanvasRenderSize(canvas, wrapperRef.current);
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+  }, [canvas]);
+
+  const image = useMemo(() => srcToImage(src), [src]);
+  const {selectedTool, setSelectedTool, selectedColor, setSelectedColor, getBlob} =
+    useImageEditor({
+      canvas,
+      image,
+      onLoad: resizeCanvas,
+    });
+
+  useEffect(() => {
+    resizeCanvas();
+    window.addEventListener('resize', resizeCanvas);
+    return () => {
+      window.removeEventListener('resize', resizeCanvas);
+    };
+  }, [resizeCanvas]);
+
+  return (
+    <Container>
+      <CanvasWrapper ref={wrapperRef}>
+        <Canvas ref={setCanvas} />
+      </CanvasWrapper>
+
+      <Toolbar>
+        <ToolbarGroup>
+          <ColorInput background={selectedColor}>
+            <input
+              type="color"
+              value={selectedColor}
+              onChange={e => setSelectedColor(e.target.value)}
+            />
+          </ColorInput>
+        </ToolbarGroup>
+        <ToolbarGroup>
+          {Tools.map(tool => (
+            <ToolButton
+              key={tool}
+              active={selectedTool === tool}
+              onClick={() => setSelectedTool(tool)}
+            >
+              {tool?.[0] || 'h'}
+            </ToolButton>
+          ))}
+        </ToolbarGroup>
+        <ToolbarGroup>
+          <CancelButton onClick={() => onCancel()}>Clear</CancelButton>
+        </ToolbarGroup>
+        <ToolbarGroup>
+          <SubmitButton onClick={async () => onSubmit(await getBlob())}>
+            Save
+          </SubmitButton>
+        </ToolbarGroup>
+      </Toolbar>
+    </Container>
+  );
+}

From eeee45682fe0f790df9c584ff1913496d6c471f6 Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Wed, 23 Aug 2023 10:08:19 +0200
Subject: [PATCH 19/26] Add drawing scaling logic

---
 src/components/feedbackModal.tsx              | 13 ++++++++++--
 .../hooks/useImageEditor/imageEditor.ts       | 17 +++++++++++++++-
 src/components/hooks/useImageEditor/tool.ts   | 20 +++++++++++++++----
 src/components/hooks/useImageEditor/types.ts  |  3 ++-
 src/components/imageEditorWrapper.tsx         |  3 +--
 5 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index d76158266fa8e..7d22a48b0b56b 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -201,6 +201,15 @@ const PreviewImage = styled.img`
   );
 `;
 
+const FlexColumns = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  & > * {
+    flex: 1;
+  }
+`;
+
 interface FeedbackModalProps {
   onClose: () => void;
   onSubmit: (data: {
@@ -332,7 +341,7 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
                 placeholder="Explain what bothers you"
               />
             </Label>
-            <div style={{display: 'flex', flexDirection: 'row'}}>
+            <FlexColumns>
               <Label>
                 Your Name (optional)
                 <Input type="text" name="name" placeholder="Anonymous" />
@@ -341,7 +350,7 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
                 Your Email (optional)
                 <Input type="text" name="email" placeholder="you@test.com" />
               </Label>
-            </div>
+            </FlexColumns>
             <Label>Screenshot</Label>
             {screenshotPreview ? (
               <ScreenshotWrapper>
diff --git a/src/components/hooks/useImageEditor/imageEditor.ts b/src/components/hooks/useImageEditor/imageEditor.ts
index 5aeabb8f51a45..db38732a7a5b3 100644
--- a/src/components/hooks/useImageEditor/imageEditor.ts
+++ b/src/components/hooks/useImageEditor/imageEditor.ts
@@ -117,6 +117,13 @@ class Resizer {
   }
 }
 
+const SCALEING_BASE = 800 * 800;
+
+const getScaling = (width: number, height: number) => {
+  const area = width * height;
+  return Math.max(Math.sqrt(area / SCALEING_BASE), 1);
+};
+
 export class ImageEditor {
   private canvas: HTMLCanvasElement;
   private ctx: CanvasRenderingContext2D;
@@ -126,6 +133,7 @@ export class ImageEditor {
   private isInteractive: boolean = false;
   private selectedDrawingId: string | null = null;
   private resizer: Resizer | null = null;
+  private drawingScaling: number = 1;
   private _tool: ITool | null = null;
   private _color: string = '#79628c';
   private _strokeSize: number = 6;
@@ -140,6 +148,7 @@ export class ImageEditor {
       this.isInteractive = true;
       this.canvas.width = image.width;
       this.canvas.height = image.height;
+      this.drawingScaling = getScaling(image.width, image.height);
       this.sheduleUpdateCanvas();
       onLoad?.();
     } else {
@@ -147,6 +156,7 @@ export class ImageEditor {
         this.isInteractive = true;
         this.canvas.width = image.width;
         this.canvas.height = image.height;
+        this.drawingScaling = getScaling(image.width, image.height);
         this.sheduleUpdateCanvas();
         onLoad();
       });
@@ -165,6 +175,7 @@ export class ImageEditor {
     this.canvas.removeEventListener('mouseup', this.handleMouseUp);
     this.canvas.removeEventListener('click', this.handleClick);
     window.removeEventListener('keydown', this.handleDelete);
+    this.resizer?.destroy();
     this.drawings = [];
   }
 
@@ -261,7 +272,11 @@ export class ImageEditor {
     if (!this._tool || this._tool.isDrawing || !this.isInteractive) {
       return;
     }
-    this._tool.startDrawing(translateMouseEvent(e, this.canvas), this._color);
+    this._tool.startDrawing(
+      translateMouseEvent(e, this.canvas),
+      this._color,
+      this.drawingScaling
+    );
     this.sheduleUpdateCanvas();
   };
 
diff --git a/src/components/hooks/useImageEditor/tool.ts b/src/components/hooks/useImageEditor/tool.ts
index eaef69268f158..40adeceeacdb9 100644
--- a/src/components/hooks/useImageEditor/tool.ts
+++ b/src/components/hooks/useImageEditor/tool.ts
@@ -19,8 +19,9 @@ class Tool implements ITool {
     this.DrawingConstructor = DrawingConstructor;
   }
 
-  startDrawing(point: IPoint, color: string) {
+  startDrawing(point: IPoint, color: string, scalingFactor: number) {
     this.drawing = new this.DrawingConstructor();
+    this.drawing.setScalingFactor(scalingFactor);
     this.drawing.setColor(color);
     this.drawing.start(point);
   }
@@ -52,6 +53,7 @@ class Drawing implements IDrawing {
   protected translate: IPoint = {x: 0, y: 0};
   protected color = 'red';
   protected strokeSize = 6;
+  protected scalingFactor = 1;
 
   public id = Math.random().toString();
 
@@ -88,6 +90,10 @@ class Drawing implements IDrawing {
     ]);
   }
 
+  setScalingFactor(scalingFactor: number) {
+    this.scalingFactor = scalingFactor;
+  }
+
   setColor(color: string) {
     this.color = color;
   }
@@ -113,7 +119,7 @@ class Drawing implements IDrawing {
     context.lineCap = 'round';
     context.lineJoin = 'round';
     context.strokeStyle = this.color;
-    context.lineWidth = this.strokeSize;
+    context.lineWidth = this.strokeSize * this.scalingFactor;
 
     context.translate(this.translate.x, this.translate.y);
     context.stroke(this.path);
@@ -205,8 +211,14 @@ class ArrowDrawing extends Drawing {
     ).normalize();
     const leftVector = unitVector.rotate(Math.PI / 5);
     const rightVector = unitVector.rotate(-Math.PI / 5);
-    const leftPoint = Point.add(this.endPoint, Point.multiply(leftVector, 20));
-    const rightPoint = Point.add(this.endPoint, Point.multiply(rightVector, 20));
+    const leftPoint = Point.add(
+      this.endPoint,
+      Point.multiply(leftVector, 20 * this.scalingFactor)
+    );
+    const rightPoint = Point.add(
+      this.endPoint,
+      Point.multiply(rightVector, 20 * this.scalingFactor)
+    );
     this.path.lineTo(leftPoint.x, leftPoint.y);
     this.path.moveTo(this.endPoint.x, this.endPoint.y);
     this.path.lineTo(rightPoint.x, rightPoint.y);
diff --git a/src/components/hooks/useImageEditor/types.ts b/src/components/hooks/useImageEditor/types.ts
index 5f4ddb82f27a2..c6201e84ec460 100644
--- a/src/components/hooks/useImageEditor/types.ts
+++ b/src/components/hooks/useImageEditor/types.ts
@@ -13,6 +13,7 @@ export interface IDrawing {
   get isValid(): boolean;
   moveBy: (point: IPoint) => void;
   setColor: (color: string) => void;
+  setScalingFactor: (scalingFactor: number) => void;
   setStrokeSize: (strokeSize: number) => void;
   start: (point: IPoint) => void;
 }
@@ -22,7 +23,7 @@ export interface ITool {
   endDrawing: (point: IPoint) => IDrawing | null;
   getDrawingBuffer: () => IDrawing | null;
   isDrawing: boolean;
-  startDrawing: (point: IPoint, color: string) => void;
+  startDrawing: (point: IPoint, color: string, scalingFactor: number) => void;
 }
 
 export interface Rect {
diff --git a/src/components/imageEditorWrapper.tsx b/src/components/imageEditorWrapper.tsx
index 38255811fbd26..502e253e65f04 100644
--- a/src/components/imageEditorWrapper.tsx
+++ b/src/components/imageEditorWrapper.tsx
@@ -228,7 +228,6 @@ export function ImageEditorWrapper({src, onCancel, onSubmit}: ImageEditorWrapper
       <CanvasWrapper ref={wrapperRef}>
         <Canvas ref={setCanvas} />
       </CanvasWrapper>
-
       <Toolbar>
         <ToolbarGroup>
           <ColorInput background={selectedColor}>
@@ -251,7 +250,7 @@ export function ImageEditorWrapper({src, onCancel, onSubmit}: ImageEditorWrapper
           ))}
         </ToolbarGroup>
         <ToolbarGroup>
-          <CancelButton onClick={() => onCancel()}>Clear</CancelButton>
+          <CancelButton onClick={() => onCancel()}>Cancel</CancelButton>
         </ToolbarGroup>
         <ToolbarGroup>
           <SubmitButton onClick={async () => onSubmit(await getBlob())}>

From f9f182eaed3c06883dc6d11f813720b6aa50d2ac Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Wed, 23 Aug 2023 10:50:44 +0200
Subject: [PATCH 20/26] Add icons

---
 src/components/feedbackModal.tsx              |  4 +-
 src/components/hooks/useImageEditor/icons.tsx | 61 +++++++++++++++++++
 src/components/imageEditorWrapper.tsx         | 18 +++++-
 3 files changed, 78 insertions(+), 5 deletions(-)
 create mode 100644 src/components/hooks/useImageEditor/icons.tsx

diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index 7d22a48b0b56b..779d76813ff9a 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -343,11 +343,11 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
             </Label>
             <FlexColumns>
               <Label>
-                Your Name (optional)
+                Name (optional)
                 <Input type="text" name="name" placeholder="Anonymous" />
               </Label>
               <Label>
-                Your Email (optional)
+                Email (optional)
                 <Input type="text" name="email" placeholder="you@test.com" />
               </Label>
             </FlexColumns>
diff --git a/src/components/hooks/useImageEditor/icons.tsx b/src/components/hooks/useImageEditor/icons.tsx
new file mode 100644
index 0000000000000..d6108b93fad91
--- /dev/null
+++ b/src/components/hooks/useImageEditor/icons.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+export function PenIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      fill="white"
+      focusable="false"
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+    >
+      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+    </svg>
+  );
+}
+
+export function RectangleIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      fill="white"
+      focusable="false"
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+    >
+      <path d="M17 5h-2V3h2v2zm-2 16h2v-2.59L19.59 21 21 19.59 18.41 17H21v-2h-6v6zm4-12h2V7h-2v2zm0 4h2v-2h-2v2zm-8 8h2v-2h-2v2zM7 5h2V3H7v2zM3 17h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM19 3v2h2c0-1.1-.9-2-2-2zm-8 2h2V3h-2v2zM3 9h2V7H3v2zm4 12h2v-2H7v2zm-4-8h2v-2H3v2zm0-8h2V3c-1.1 0-2 .9-2 2z" />
+    </svg>
+  );
+}
+
+export function ArrowIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      fill="white"
+      focusable="false"
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+    >
+      <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z" />
+    </svg>
+  );
+}
+
+export function HandIcon() {
+  return (
+    <svg
+      focusable="false"
+      fill="white"
+      height="20"
+      width="20"
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+    >
+      <path d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z" />
+    </svg>
+  );
+}
diff --git a/src/components/imageEditorWrapper.tsx b/src/components/imageEditorWrapper.tsx
index 502e253e65f04..5d73d116c4391 100644
--- a/src/components/imageEditorWrapper.tsx
+++ b/src/components/imageEditorWrapper.tsx
@@ -1,7 +1,8 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {ComponentType, useCallback, useEffect, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
-import {Tools, useImageEditor} from './hooks/useImageEditor';
+import {ToolKey, Tools, useImageEditor} from './hooks/useImageEditor';
+import {ArrowIcon, HandIcon, PenIcon, RectangleIcon} from './hooks/useImageEditor/icons';
 
 export interface Rect {
   height: number;
@@ -160,6 +161,12 @@ const ColorInput = styled.label<{background: string}>`
   }
 `;
 
+const iconMap: Record<ToolKey, ComponentType> = {
+  arrow: ArrowIcon,
+  pen: PenIcon,
+  rectangle: RectangleIcon,
+};
+
 const getCanvasRenderSize = (
   canvas: HTMLCanvasElement,
   containerElement: HTMLDivElement
@@ -193,6 +200,11 @@ const srcToImage = (src: string): HTMLImageElement => {
   return image;
 };
 
+function ToolIcon({tool}: {tool: ToolKey}) {
+  const Icon = tool ? iconMap[tool] : HandIcon;
+  return <Icon />;
+}
+
 export function ImageEditorWrapper({src, onCancel, onSubmit}: ImageEditorWrapperProps) {
   const wrapperRef = React.useRef<HTMLDivElement>(null);
   const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
@@ -245,7 +257,7 @@ export function ImageEditorWrapper({src, onCancel, onSubmit}: ImageEditorWrapper
               active={selectedTool === tool}
               onClick={() => setSelectedTool(tool)}
             >
-              {tool?.[0] || 'h'}
+              <ToolIcon tool={tool} />
             </ToolButton>
           ))}
         </ToolbarGroup>

From 36fde3864f45b561f5024473ce820b8f63a2dd39 Mon Sep 17 00:00:00 2001
From: Anton Ovchinnikov <anton@tonyo.info>
Date: Wed, 23 Aug 2023 11:25:43 +0200
Subject: [PATCH 21/26] Pre-fill name and email if auth data is available

---
 gatsby-browser.tsx               |  7 ++++++-
 src/components/codeContext.tsx   |  5 ++++-
 src/components/feedbackModal.tsx | 33 +++++++++++++++++++++++++++-----
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
index e788d0a5e737a..3b72f48db5286 100644
--- a/gatsby-browser.tsx
+++ b/gatsby-browser.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {GatsbyBrowser} from 'gatsby';
 
+import {CodeContextProvider} from 'sentry-docs/components/codeContext';
 import {FeebdackWidget} from 'sentry-docs/components/feedbackWidget';
 import PageContext from 'sentry-docs/components/pageContext';
 
@@ -10,7 +11,11 @@ export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({
 }) => {
   return (
     <React.Fragment>
-      <FeebdackWidget />
+      {/* FIXME: we're duplicating CodeContextProvider, which is not nice.
+      Ideally, FeedbackWidget is a child of the existing CodeContextProvider. */}
+      <CodeContextProvider>
+        <FeebdackWidget />
+      </CodeContextProvider>
       <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>
     </React.Fragment>
   );
diff --git a/src/components/codeContext.tsx b/src/components/codeContext.tsx
index b587835ec67a4..fee6b16ca5298 100644
--- a/src/components/codeContext.tsx
+++ b/src/components/codeContext.tsx
@@ -18,6 +18,7 @@ type ProjectCodeKeywords = {
 };
 
 type UserCodeKeywords = {
+  EMAIL: string;
   ID: number;
   NAME: string;
 };
@@ -51,6 +52,7 @@ type ProjectApiResult = {
 
 type UserApiResult = {
   avatarUrl: string;
+  email: string;
   id: number;
   isAuthenticated: boolean;
   name: string;
@@ -131,7 +133,7 @@ export async function fetchCodeKeywords(): Promise<CodeKeywords> {
 
   const url =
     process.env.NODE_ENV === 'development'
-      ? 'http://dev.getsentry.net:8000/docs/api/user/'
+      ? 'http://dev.getsentry.net:8000/api/0/auth-details/'
       : 'https://sentry.io/docs/api/user/';
 
   const makeDefaults = () => {
@@ -185,6 +187,7 @@ export async function fetchCodeKeywords(): Promise<CodeKeywords> {
       ? {
           ID: user.id,
           NAME: user.name,
+          EMAIL: user.email,
         }
       : undefined,
   };
diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index 779d76813ff9a..e3f57dceecce0 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -1,10 +1,11 @@
-import React, {FormEvent, useEffect} from 'react';
+import React, {FormEvent, useContext, useEffect} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {useFocusTrap} from './hooks/useFocusTrap';
 import {useShortcut} from './hooks/useShortcut';
 import {useTakeScreenshot} from './hooks/useTakeScreenhot';
+import {CodeContext} from './codeContext';
 import {ImageEditorWrapper} from './imageEditorWrapper';
 import {Rect, ScreenshotEditor} from './screenshotEditor';
 
@@ -278,6 +279,18 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
     }
   }, [open]);
 
+  const codeContext = useContext(CodeContext);
+  console.log('codeContext', codeContext);
+  let defaultUserName: string;
+  let defaultEmail: string;
+  if (codeContext && codeContext.codeKeywords) {
+    const userData = codeContext.codeKeywords.USER;
+    if (userData) {
+      defaultUserName = userData.NAME;
+      defaultEmail = userData.EMAIL;
+    }
+  }
+
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
@@ -343,12 +356,22 @@ export function FeedbackModal({open, onClose, onSubmit}: FeedbackModalProps) {
             </Label>
             <FlexColumns>
               <Label>
-                Name (optional)
-                <Input type="text" name="name" placeholder="Anonymous" />
+                Your Name (optional)
+                <Input
+                  type="text"
+                  name="name"
+                  placeholder="Anonymous"
+                  defaultValue={defaultUserName}
+                />
               </Label>
               <Label>
-                Email (optional)
-                <Input type="text" name="email" placeholder="you@test.com" />
+                Your Email (optional)
+                <Input
+                  type="text"
+                  name="email"
+                  placeholder="you@test.com"
+                  defaultValue={defaultEmail}
+                />
               </Label>
             </FlexColumns>
             <Label>Screenshot</Label>

From 39b36f7a9060884e27f3ca8e2e24f99c900595fc Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Wed, 23 Aug 2023 15:03:37 +0200
Subject: [PATCH 22/26] Add resizing & success message

---
 src/components/feedbackModal.tsx              |  16 +-
 src/components/feedbackSuccessMessage.tsx     |  67 +++++++++
 src/components/feedbackWidget.tsx             |  30 ++--
 src/components/hooks/useImageEditor/icons.tsx |  99 +++++++++----
 .../hooks/useImageEditor/imageEditor.ts       | 110 ++++++++++----
 src/components/hooks/useImageEditor/tool.ts   | 110 ++++++++++++--
 src/components/hooks/useImageEditor/types.ts  |   3 +-
 src/components/hooks/useImageEditor/utils.ts  |  10 +-
 src/components/imageEditorWrapper.tsx         | 138 +++++++++---------
 src/components/screenshotEditor.tsx           |   2 +-
 10 files changed, 419 insertions(+), 166 deletions(-)
 create mode 100644 src/components/feedbackSuccessMessage.tsx

diff --git a/src/components/feedbackModal.tsx b/src/components/feedbackModal.tsx
index e3f57dceecce0..f4b2e6717ef42 100644
--- a/src/components/feedbackModal.tsx
+++ b/src/components/feedbackModal.tsx
@@ -74,8 +74,8 @@ const inputStyles = css`
   font-size: 14px;
   padding: 6px 8px;
   &:focus {
-    outline: 1px solid #79628c;
-    border-color: #79628c;
+    outline: 1px solid rgba(108, 95, 199, 1);
+    border-color: rgba(108, 95, 199, 1);
   }
 `;
 
@@ -107,14 +107,14 @@ const buttonStyles = css`
 
 const SubmitButton = styled.button`
   ${buttonStyles}
-  background-color: #79628c;
+  background-color: rgba(108, 95, 199, 1);
   color: #fff;
   &:hover {
-    background-color: #5f4b73;
+    background-color: rgba(88, 74, 192, 1);
   }
   &:focus-visible {
-    outline: 1px solid #79628c;
-    background-color: #5f4b73;
+    outline: 1px solid rgba(108, 95, 199, 1);
+    background-color: rgba(88, 74, 192, 1);
   }
 `;
 
@@ -127,7 +127,7 @@ const CancelButton = styled.button`
     background-color: #eee;
   }
   &:focus-visible {
-    outline: 1px solid #79628c;
+    outline: 1px solid rgba(108, 95, 199, 1);
     background-color: #eee;
   }
 `;
@@ -141,7 +141,7 @@ const ScreenshotButton = styled.button`
     background-color: #eee;
   }
   &:focus-visible {
-    outline: 1px solid #79628c;
+    outline: 1px solid rgba(108, 95, 199, 1);
     background-color: #eee;
   }
 `;
diff --git a/src/components/feedbackSuccessMessage.tsx b/src/components/feedbackSuccessMessage.tsx
new file mode 100644
index 0000000000000..a56242ee6ef0f
--- /dev/null
+++ b/src/components/feedbackSuccessMessage.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import {keyframes} from '@emotion/react';
+import styled from '@emotion/styled';
+
+const Wrapper = styled.div`
+  position: fixed;
+  width: 100vw;
+  padding: 8px;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  display: flex;
+  justify-content: flex-end;
+  transition: transform 0.4s ease-in-out;
+  transform: translateY(0);
+  z-index: 9000;
+  &[data-hide='true'] {
+    transform: translateY(120%);
+  }
+`;
+
+const borderColor = keyframes`
+  0% {
+    box-shadow: 0 2px 6px rgba(88, 74, 192, 1);
+    border-color: rgba(88, 74, 192, 1);
+  }
+  20% {
+    box-shadow: 0 2px 6px #FFC227;
+    border-color: #FFC227;
+  }
+  40% {
+    box-shadow: 0 2px 6px #FF7738;
+    border-color: #FF7738;
+  }
+  60% {
+    box-shadow: 0 2px 6px #33BF9E;
+    border-color: #33BF9E;
+  }
+  80% {
+    box-shadow: 0 2px 6px #F05781;
+    border-color: #F05781;
+  }
+  100% {
+    box-shadow: 0 2px 6px rgba(88, 74, 192, 1);
+    border-color: rgba(88, 74, 192, 1);
+  }
+`;
+
+const Content = styled.div`
+  background-color: #fff;
+  border: 2px solid rgba(88, 74, 192, 1);
+  border-radius: 20px;
+  color: rgba(43, 34, 51, 1);
+  font-size: 14px;
+  padding: 6px 24px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px;
+  box-shadow-color: red;
+  animation: ${borderColor} 4s alternate infinite;
+`;
+
+export function FeedbackSuccessMessage(props) {
+  return (
+    <Wrapper data-hide={!props.show} {...props}>
+      <Content>🎉 Thank you for your feedback! 🙌</Content>
+    </Wrapper>
+  );
+}
diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index eeed619710c78..b55a6342d1457 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -1,8 +1,9 @@
-import React, {useCallback, useEffect} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import * as Sentry from '@sentry/browser';
 
 import {FeebdackButton} from './feedbackButton';
 import {FeedbackModal} from './feedbackModal';
+import {FeedbackSuccessMessage} from './feedbackSuccessMessage';
 import {Rect} from './screenshotEditor';
 
 const replay = new Sentry.Replay();
@@ -138,7 +139,20 @@ async function blobToUint8Array(blob: Blob): Promise<Uint8Array> {
 }
 
 export function FeebdackWidget() {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
+  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
+
+  useEffect(() => {
+    if (!showSuccessMessage) {
+      return () => {};
+    }
+    const timeout = setTimeout(() => {
+      setShowSuccessMessage(false);
+    }, 6000);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [showSuccessMessage]);
 
   const handleSubmit = async (data: {
     comment: string;
@@ -149,18 +163,13 @@ export function FeebdackWidget() {
     imageCutout?: Blob;
     selection?: Rect;
   }) => {
-    console.log('handleSubmit data:', data);
-    setOpen(false);
-
     const selectedElement = data.selection && getSelectedDomElement(data.selection);
     let nearestHeadingElement: HTMLElement;
     let nearestIdInViewport: HTMLElement;
-    console.log('selected element:', selectedElement);
+
     if (selectedElement) {
       nearestHeadingElement = getNearestHeadingElement(selectedElement);
       nearestIdInViewport = getNearestIdInViewport(selectedElement);
-      console.log('nearest heading:', nearestHeadingElement);
-      console.log('nearest id:', nearestIdInViewport);
     }
 
     let eventId: string;
@@ -186,7 +195,6 @@ export function FeebdackWidget() {
       }
 
       const sourcePage = getGitHubSourcePage();
-      console.log('GitHub source page:', sourcePage);
       if (sourcePage) {
         scope.setContext('Content', {
           'Edit file': sourcePage,
@@ -206,7 +214,6 @@ export function FeebdackWidget() {
       // Prepare session replay
       replay.flush();
       const replayId = replay.getReplayId();
-      console.log('replayId', replayId);
       if (replayId) {
         scope.setTag('replayId', replayId);
       }
@@ -223,6 +230,8 @@ export function FeebdackWidget() {
       event_id: eventId,
     };
     Sentry.captureUserFeedback(userFeedback);
+    setOpen(false);
+    setShowSuccessMessage(true);
   };
 
   const handleKeyPress = useCallback(event => {
@@ -243,6 +252,7 @@ export function FeebdackWidget() {
     <React.Fragment>
       {!open && <FeebdackButton onClick={() => setOpen(true)} />}
       <FeedbackModal open={open} onSubmit={handleSubmit} onClose={() => setOpen(false)} />
+      <FeedbackSuccessMessage show={showSuccessMessage} />
     </React.Fragment>
   );
 }
diff --git a/src/components/hooks/useImageEditor/icons.tsx b/src/components/hooks/useImageEditor/icons.tsx
index d6108b93fad91..f3608ce4ad7c3 100644
--- a/src/components/hooks/useImageEditor/icons.tsx
+++ b/src/components/hooks/useImageEditor/icons.tsx
@@ -3,14 +3,33 @@ import React from 'react';
 export function PenIcon() {
   return (
     <svg
-      width="20"
-      height="20"
-      fill="white"
-      focusable="false"
-      aria-hidden="true"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+      <path
+        d="M8.5 12L12 8.5L14 11L11 14L8.5 12Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 8.5L11 3.5L2 2L3.5 11L8.5 12L12 8.5Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2 2L7.5 7.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </svg>
   );
 }
@@ -18,14 +37,21 @@ export function PenIcon() {
 export function RectangleIcon() {
   return (
     <svg
-      width="20"
-      height="20"
-      fill="white"
-      focusable="false"
-      aria-hidden="true"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M17 5h-2V3h2v2zm-2 16h2v-2.59L19.59 21 21 19.59 18.41 17H21v-2h-6v6zm4-12h2V7h-2v2zm0 4h2v-2h-2v2zm-8 8h2v-2h-2v2zM7 5h2V3H7v2zM3 17h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM19 3v2h2c0-1.1-.9-2-2-2zm-8 2h2V3h-2v2zM3 9h2V7H3v2zm4 12h2v-2H7v2zm-4-8h2v-2H3v2zm0-8h2V3c-1.1 0-2 .9-2 2z" />
+      <rect
+        x="2.5"
+        y="2.5"
+        width="11"
+        height="11"
+        rx="2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
     </svg>
   );
 }
@@ -33,14 +59,26 @@ export function RectangleIcon() {
 export function ArrowIcon() {
   return (
     <svg
-      width="20"
-      height="20"
-      fill="white"
-      focusable="false"
-      aria-hidden="true"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z" />
+      <path
+        d="M2.5 2.5L13 13"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.5 2.5H2.5L2.5 8.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </svg>
   );
 }
@@ -48,14 +86,19 @@ export function ArrowIcon() {
 export function HandIcon() {
   return (
     <svg
-      focusable="false"
-      fill="white"
-      height="20"
-      width="20"
-      aria-hidden="true"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z" />
+      <path
+        d="M2 2L6.5 14.5L8.5 8.5L14.5 6.5L2 2Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </svg>
   );
 }
diff --git a/src/components/hooks/useImageEditor/imageEditor.ts b/src/components/hooks/useImageEditor/imageEditor.ts
index db38732a7a5b3..a5b538b606a6d 100644
--- a/src/components/hooks/useImageEditor/imageEditor.ts
+++ b/src/components/hooks/useImageEditor/imageEditor.ts
@@ -16,7 +16,13 @@ class Resizer {
   private boundingBox: Rect;
   private box: HTMLDivElement;
   private isDragging: boolean = false;
-  constructor(boundingBox: Rect, onDrag?: (event: MouseEvent) => void) {
+  private isDraggingHandle: boolean = false;
+
+  constructor(
+    boundingBox: Rect,
+    onDrag?: (event: MouseEvent) => void,
+    onResize?: (event: MouseEvent) => void
+  ) {
     this.boundingBox = boundingBox;
 
     const box = document.createElement('div');
@@ -40,18 +46,18 @@ class Resizer {
 
     const topBorder = document.createElement('div');
     topBorder.style.position = 'absolute';
-    topBorder.style.width = '100%';
+    topBorder.style.width = 'calc(100% + 16px)';
     topBorder.style.height = '2px';
-    topBorder.style.top = '0';
-    topBorder.style.left = '0';
+    topBorder.style.top = '-8px';
+    topBorder.style.left = '-8px';
     topBorder.style.backgroundImage = horizontalDashedGradient;
 
     const bottomBorder = document.createElement('div');
     bottomBorder.style.position = 'absolute';
-    bottomBorder.style.width = '100%';
+    bottomBorder.style.width = 'calc(100% + 16px)';
     bottomBorder.style.height = '2px';
-    bottomBorder.style.bottom = '0';
-    bottomBorder.style.left = '0';
+    bottomBorder.style.bottom = '-8px';
+    bottomBorder.style.left = '-8px';
     bottomBorder.style.backgroundImage = horizontalDashedGradient;
 
     this.box.appendChild(topBorder);
@@ -59,35 +65,55 @@ class Resizer {
 
     const leftBorder = document.createElement('div');
     leftBorder.style.position = 'absolute';
-    leftBorder.style.height = '100%';
+    leftBorder.style.height = 'calc(100% + 16px)';
     leftBorder.style.width = '2px';
-    leftBorder.style.top = '0';
-    leftBorder.style.left = '0';
+    leftBorder.style.top = '-8px';
+    leftBorder.style.left = '-8px';
     leftBorder.style.backgroundImage = verticalDashedGradient;
 
     const rightBorder = document.createElement('div');
     rightBorder.style.position = 'absolute';
-    rightBorder.style.height = '100%';
+    rightBorder.style.height = 'calc(100% + 16px)';
     rightBorder.style.width = '2px';
-    rightBorder.style.top = '0';
-    rightBorder.style.right = '0';
+    rightBorder.style.top = '-8px';
+    rightBorder.style.right = '-8px';
     rightBorder.style.backgroundImage = verticalDashedGradient;
 
     this.box.appendChild(leftBorder);
     this.box.appendChild(rightBorder);
 
+    const handle = document.createElement('div');
+    handle.style.position = 'absolute';
+    handle.style.width = '10px';
+    handle.style.height = '10px';
+    handle.style.borderRadius = '50%';
+    handle.style.backgroundColor = 'white';
+    handle.style.border = '2px solid black';
+    handle.style.right = '-12px';
+    handle.style.bottom = '-12px';
+    handle.style.cursor = 'nwse-resize';
+    handle.addEventListener('mousedown', e => {
+      e.stopPropagation();
+      this.isDraggingHandle = true;
+    });
+    this.box.appendChild(handle);
+
     this.box.addEventListener('mousedown', () => {
       this.isDragging = true;
     });
 
-    this.box.addEventListener('mouseup', () => {
+    window.addEventListener('mouseup', () => {
       this.isDragging = false;
+      this.isDraggingHandle = false;
     });
 
     window.addEventListener('mousemove', e => {
       if (this.isDragging) {
         onDrag?.(e);
       }
+      if (this.isDraggingHandle) {
+        onResize?.(e);
+      }
     });
 
     this.updateStyles();
@@ -106,18 +132,38 @@ class Resizer {
     this.updateStyles();
   }
 
+  resize(x: number, y: number) {
+    this.boundingBox = {
+      ...this.boundingBox,
+      width: this.boundingBox.width + x,
+      height: this.boundingBox.height + y,
+    };
+    this.updateStyles();
+  }
+
   private updateStyles() {
     this.box.style.position = 'fixed';
     this.box.style.zIndex = '90000';
-    this.box.style.width = `${this.boundingBox.width + 12}px`;
-    this.box.style.height = `${this.boundingBox.height + 12}px`;
-    this.box.style.left = `${this.boundingBox.x - 6}px`;
-    this.box.style.top = `${this.boundingBox.y - 6}px`;
+    this.box.style.width = `${Math.abs(this.boundingBox.width)}px`;
+    this.box.style.height = `${Math.abs(this.boundingBox.height)}px`;
+    this.box.style.left = `${this.boundingBox.x}px`;
+    this.box.style.top = `${this.boundingBox.y}px`;
     this.box.style.cursor = 'move';
+    this.box.style.transformOrigin = 'top left';
+
+    if (this.boundingBox.width < 0 && this.boundingBox.height < 0) {
+      this.box.style.transform = 'scale(-1)';
+    } else if (this.boundingBox.width < 0) {
+      this.box.style.transform = 'scaleX(-1)';
+    } else if (this.boundingBox.height < 0) {
+      this.box.style.transform = 'scaleY(-1)';
+    } else {
+      this.box.style.transform = 'none';
+    }
   }
 }
 
-const SCALEING_BASE = 800 * 800;
+const SCALEING_BASE = 1000 * 1000;
 
 const getScaling = (width: number, height: number) => {
   const area = width * height;
@@ -162,18 +208,18 @@ export class ImageEditor {
       });
     }
 
-    this.canvas.addEventListener('mousedown', this.handleMouseDown);
-    this.canvas.addEventListener('mousemove', this.handleMouseMove, {passive: true});
-    this.canvas.addEventListener('mouseup', this.handleMouseUp);
     this.canvas.addEventListener('click', this.handleClick);
+    this.canvas.addEventListener('mousedown', this.handleMouseDown);
+    window.addEventListener('mousemove', this.handleMouseMove, {passive: true});
+    window.addEventListener('mouseup', this.handleMouseUp);
     window.addEventListener('keydown', this.handleDelete);
   }
 
   destroy() {
-    this.canvas.removeEventListener('mousedown', this.handleMouseDown);
-    this.canvas.removeEventListener('mousemove', this.handleMouseMove);
-    this.canvas.removeEventListener('mouseup', this.handleMouseUp);
     this.canvas.removeEventListener('click', this.handleClick);
+    this.canvas.removeEventListener('mousedown', this.handleMouseDown);
+    window.removeEventListener('mousemove', this.handleMouseMove);
+    window.removeEventListener('mouseup', this.handleMouseUp);
     window.removeEventListener('keydown', this.handleDelete);
     this.resizer?.destroy();
     this.drawings = [];
@@ -252,7 +298,8 @@ export class ImageEditor {
       const boundingBox = drawing.getBoundingBox();
       this.resizer = new Resizer(
         translateBoundingBoxToDocument(boundingBox, this.canvas),
-        this.handleDrag
+        this.handleDrag,
+        this.handleResize
       );
     }
   };
@@ -310,6 +357,17 @@ export class ImageEditor {
     this.sheduleUpdateCanvas();
   };
 
+  private handleResize = (e: MouseEvent) => {
+    const selectedDrawing = this.drawings.find(d => d.id === this.selectedDrawingId);
+    if (!this.resizer || !this.selectedDrawingId) {
+      return;
+    }
+    const delta = Point.fromNumber(e.movementX, e.movementY);
+    selectedDrawing.scaleBy(translatePointToCanvas(delta, this.canvas));
+    this.resizer.resize(e.movementX, e.movementY);
+    this.sheduleUpdateCanvas();
+  };
+
   public getDataURL = (): string => {
     return this.canvas.toDataURL();
   };
diff --git a/src/components/hooks/useImageEditor/tool.ts b/src/components/hooks/useImageEditor/tool.ts
index 40adeceeacdb9..432591d3ca23b 100644
--- a/src/components/hooks/useImageEditor/tool.ts
+++ b/src/components/hooks/useImageEditor/tool.ts
@@ -21,7 +21,7 @@ class Tool implements ITool {
 
   startDrawing(point: IPoint, color: string, scalingFactor: number) {
     this.drawing = new this.DrawingConstructor();
-    this.drawing.setScalingFactor(scalingFactor);
+    this.drawing.setStrokeScalingFactor(scalingFactor);
     this.drawing.setColor(color);
     this.drawing.start(point);
   }
@@ -53,7 +53,9 @@ class Drawing implements IDrawing {
   protected translate: IPoint = {x: 0, y: 0};
   protected color = 'red';
   protected strokeSize = 6;
-  protected scalingFactor = 1;
+  protected strokeScalingFactor = 1;
+  protected scalingFactorX = 1;
+  protected scalingFactorY = 1;
 
   public id = Math.random().toString();
 
@@ -70,6 +72,20 @@ class Drawing implements IDrawing {
     return true;
   }
 
+  get topLeftPoint() {
+    return Point.fromNumber(
+      Math.min(this.startPoint.x, this.endPoint.x),
+      Math.min(this.startPoint.y, this.endPoint.y)
+    );
+  }
+
+  get bottomRightPoint() {
+    return Point.fromNumber(
+      Math.max(this.startPoint.x, this.endPoint.x),
+      Math.max(this.startPoint.y, this.endPoint.y)
+    );
+  }
+
   start(point: IPoint): void {
     this.startPoint = point;
     this.endPoint = point;
@@ -84,14 +100,20 @@ class Drawing implements IDrawing {
   }
 
   getBoundingBox() {
-    return getPointsBoundingBox([
+    const box = getPointsBoundingBox([
       Point.add(this.startPoint, this.translate),
       Point.add(this.endPoint, this.translate),
     ]);
+
+    return {
+      ...box,
+      width: box.width * this.scalingFactorX,
+      height: box.height * this.scalingFactorY,
+    };
   }
 
-  setScalingFactor(scalingFactor: number) {
-    this.scalingFactor = scalingFactor;
+  setStrokeScalingFactor(strokeScalingFactor: number) {
+    this.strokeScalingFactor = strokeScalingFactor;
   }
 
   setColor(color: string) {
@@ -103,12 +125,41 @@ class Drawing implements IDrawing {
   }
 
   isInPath(context: CanvasRenderingContext2D, point: IPoint) {
-    context.translate(this.translate.x, this.translate.y);
-    const isCollision = context.isPointInStroke(this.path, point.x, point.y);
+    return this.withTransform(
+      context,
+      () =>
+        // we check for multiple points to make selection easier
+        context.isPointInStroke(this.path, point.x, point.y) ||
+        context.isPointInStroke(this.path, point.x + this.strokeSize, point.y) ||
+        context.isPointInStroke(this.path, point.x - this.strokeSize, point.y) ||
+        context.isPointInStroke(this.path, point.x, point.y + this.strokeSize) ||
+        context.isPointInStroke(this.path, point.x, point.y - this.strokeSize) ||
+        context.isPointInStroke(
+          this.path,
+          point.x + this.strokeSize,
+          point.y + this.strokeSize
+        ) ||
+        context.isPointInStroke(
+          this.path,
+          point.x - this.strokeSize,
+          point.y - this.strokeSize
+        )
+    );
+  }
 
+  private withTransform<T>(context: CanvasRenderingContext2D, callback: () => T): T {
+    context.setTransform(
+      this.scalingFactorX,
+      0,
+      0,
+      this.scalingFactorY,
+      this.translate.x + this.topLeftPoint.x * (1 - this.scalingFactorX),
+      this.translate.y + this.topLeftPoint.y * (1 - this.scalingFactorY)
+    );
+    const result = callback();
     // Reset current transformation matrix to the identity matrix
     context.setTransform(1, 0, 0, 1, 0, 0);
-    return isCollision;
+    return result;
   }
 
   drawToCanvas(context: CanvasRenderingContext2D) {
@@ -119,13 +170,24 @@ class Drawing implements IDrawing {
     context.lineCap = 'round';
     context.lineJoin = 'round';
     context.strokeStyle = this.color;
-    context.lineWidth = this.strokeSize * this.scalingFactor;
+    context.lineWidth = this.strokeSize * this.strokeScalingFactor;
 
-    context.translate(this.translate.x, this.translate.y);
-    context.stroke(this.path);
+    this.withTransform(context, () => {
+      context.stroke(this.path);
+    });
+  }
 
-    // Reset current transformation matrix to the identity matrix
-    context.setTransform(1, 0, 0, 1, 0, 0);
+  scaleBy(delta: IPoint) {
+    const originalWidth = this.topLeftPoint.x - this.bottomRightPoint.x;
+    const originalHeight = this.topLeftPoint.y - this.bottomRightPoint.y;
+    const currentWidth = originalWidth * this.scalingFactorX;
+    const currentHeight = originalHeight * this.scalingFactorY;
+
+    const newWidth = currentWidth - delta.x;
+    const newHeight = currentHeight - delta.y;
+
+    this.scalingFactorX = newWidth / originalWidth;
+    this.scalingFactorY = newHeight / originalHeight;
   }
 
   moveBy(point: IPoint) {
@@ -162,7 +224,23 @@ class PenDrawing extends Drawing {
   private boundingBox: Rect;
 
   getBoundingBox(): Rect {
-    return translateRect(this.boundingBox, this.translate);
+    const rect = translateRect(this.boundingBox, this.translate);
+    return {
+      ...rect,
+      width: rect.width * this.scalingFactorX,
+      height: rect.height * this.scalingFactorY,
+    };
+  }
+
+  get topLeftPoint() {
+    return Point.fromNumber(this.boundingBox.x, this.boundingBox.y);
+  }
+
+  get bottomRightPoint() {
+    return Point.fromNumber(
+      this.boundingBox.x + this.boundingBox.width,
+      this.boundingBox.y + this.boundingBox.height
+    );
   }
 
   start = (point: IPoint) => {
@@ -213,11 +291,11 @@ class ArrowDrawing extends Drawing {
     const rightVector = unitVector.rotate(-Math.PI / 5);
     const leftPoint = Point.add(
       this.endPoint,
-      Point.multiply(leftVector, 20 * this.scalingFactor)
+      Point.multiply(leftVector, 20 * this.strokeScalingFactor)
     );
     const rightPoint = Point.add(
       this.endPoint,
-      Point.multiply(rightVector, 20 * this.scalingFactor)
+      Point.multiply(rightVector, 20 * this.strokeScalingFactor)
     );
     this.path.lineTo(leftPoint.x, leftPoint.y);
     this.path.moveTo(this.endPoint.x, this.endPoint.y);
diff --git a/src/components/hooks/useImageEditor/types.ts b/src/components/hooks/useImageEditor/types.ts
index c6201e84ec460..f3c0c8670b7df 100644
--- a/src/components/hooks/useImageEditor/types.ts
+++ b/src/components/hooks/useImageEditor/types.ts
@@ -12,8 +12,9 @@ export interface IDrawing {
   isInPath: (ctx: CanvasRenderingContext2D, point: IPoint) => boolean;
   get isValid(): boolean;
   moveBy: (point: IPoint) => void;
+  scaleBy: (point: IPoint) => void;
   setColor: (color: string) => void;
-  setScalingFactor: (scalingFactor: number) => void;
+  setStrokeScalingFactor: (scalingFactor: number) => void;
   setStrokeSize: (strokeSize: number) => void;
   start: (point: IPoint) => void;
 }
diff --git a/src/components/hooks/useImageEditor/utils.ts b/src/components/hooks/useImageEditor/utils.ts
index 96a517133d92e..8b951c36490dc 100644
--- a/src/components/hooks/useImageEditor/utils.ts
+++ b/src/components/hooks/useImageEditor/utils.ts
@@ -42,8 +42,8 @@ export class Vector implements IPoint {
 export class Point {
   static fromMouseEvent(e: MouseEvent): IPoint {
     return {
-      x: e.offsetX,
-      y: e.offsetY,
+      x: e.clientX,
+      y: e.clientY,
     };
   }
 
@@ -138,7 +138,11 @@ export function translateBoundingBoxToDocument(
 
 export function translateMouseEvent(e: MouseEvent, canvas: HTMLCanvasElement): IPoint {
   const ratio = getCanvasScaleRatio(canvas);
-  return Point.round(translatePoint(Point.fromMouseEvent(e), ratio));
+  const clientRect = canvas.getBoundingClientRect();
+  const canvasOffset = Point.fromNumber(clientRect.left, clientRect.top);
+  return Point.round(
+    translatePoint(Point.subtract(Point.fromMouseEvent(e), canvasOffset), ratio)
+  );
 }
 
 export function translatePointToCanvas(point: IPoint, canvas: HTMLCanvasElement): IPoint {
diff --git a/src/components/imageEditorWrapper.tsx b/src/components/imageEditorWrapper.tsx
index 5d73d116c4391..c9a1926aad600 100644
--- a/src/components/imageEditorWrapper.tsx
+++ b/src/components/imageEditorWrapper.tsx
@@ -28,7 +28,7 @@ const Container = styled.div`
   width: 100vw;
   top: 0;
   left: 0;
-  background-color: #fff;
+  background-color: rgba(240, 236, 243, 1);
   background-image: repeating-linear-gradient(
     45deg,
     transparent,
@@ -51,29 +51,38 @@ const CanvasWrapper = styled.div`
 const ToolbarGroup = styled.div`
   display: flex;
   flex-direction: row;
-  height: 48px;
-  background-color: #7669d3;
-  border-radius: 4px;
+  height: 42px;
+  background-color: white;
+  border: rgba(58, 17, 95, 0.14) 1px solid;
+  border-radius: 10px;
+  padding: 4px;
   overflow: hidden;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.2);
+  gap: 4px;
+  box-shadow: 0px 1px 2px 1px rgba(43, 34, 51, 0.04);
 `;
 
 const Toolbar = styled.div`
   position: absolute;
   width: 100%;
-  bottom: 8px;
+  bottom: 0px;
+  padding: 12px 16px;
   display: flex;
-  gap: 16px;
+  gap: 12px;
   flex-direction: row;
   justify-content: center;
 `;
 
+const FlexSpacer = styled.div`
+  flex: 1;
+`;
+
 const ToolButton = styled.button<{active: boolean}>`
-  width: 48px;
-  height: 48px;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
   border: none;
-  background-color: transparent;
-  color: #fff;
+  background-color: white;
+  color: rgba(43, 34, 51, 1);
   font-size: 16px;
   font-weight: 600;
   display: flex;
@@ -81,69 +90,56 @@ const ToolButton = styled.button<{active: boolean}>`
   justify-content: center;
   cursor: pointer;
   &:hover {
-    background-color: #4939ba;
-  }
-  &:focus {
-    outline: none;
-  }
-  &:not(:last-child) {
+    background-color: rgba(43, 34, 51, 0.06);
   }
   ${({active}) =>
     active &&
     `
-    background-color: #4939ba;
+    background-color: rgba(108, 95, 199, 1) !important;\
+    color: white;
   `}
 `;
 
 const CancelButton = styled.button`
-  height: 48px;
-  padding: 0 24px;
-  border: none;
-  background-color: #999;
-  color: #fff;
-  font-size: 16px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  height: 40px;
+  width: 84px;
+  border: rgba(58, 17, 95, 0.14) 1px solid;
+  background-color: #fff;
+  color: rgba(43, 34, 51, 1);
+  font-size: 14px;
+  font-weight: 500;
   cursor: pointer;
+  border-radius: 10px;
   &:hover {
-    background-color: #4939ba;
-  }
-  &:focus {
-    outline: none;
+    background-color: #eee;
   }
 `;
 
 const SubmitButton = styled.button`
-  height: 48px;
-  padding: 0 24px;
+  height: 40px;
+  width: 84px;
   border: none;
-  background-color: transparent;
+  background-color: rgba(108, 95, 199, 1);
   color: #fff;
-  font-size: 16px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  font-size: 14px;
+  font-weight: 500;
   cursor: pointer;
+  border-radius: 10px;
   &:hover {
-    background-color: #4939ba;
-  }
-  &:focus {
-    outline: none;
+    background-color: rgba(88, 74, 192, 1);
   }
 `;
 
-const ColorInput = styled.label<{background: string}>`
+const ColorInput = styled.label`
   position: relative;
-  display: block;
-  width: 48px;
-  height: 48px;
+  display: flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
   margin: 0;
   cursor: pointer;
-  ${({background}) => `background-color: ${background};`}
-  & input {
+  & input[type='color'] {
     position: absolute;
     top: 0;
     left: 0;
@@ -151,14 +147,13 @@ const ColorInput = styled.label<{background: string}>`
     width: 0;
     height: 0;
   }
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    inset: 0;
-    border: 4px solid rgba(0, 0, 0, 0.2);
-    pointer-events: none;
-  }
+`;
+
+const ColorDisplay = styled.div<{color: string}>`
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  ${({color}) => `background-color: ${color};`}
 `;
 
 const iconMap: Record<ToolKey, ComponentType> = {
@@ -241,15 +236,8 @@ export function ImageEditorWrapper({src, onCancel, onSubmit}: ImageEditorWrapper
         <Canvas ref={setCanvas} />
       </CanvasWrapper>
       <Toolbar>
-        <ToolbarGroup>
-          <ColorInput background={selectedColor}>
-            <input
-              type="color"
-              value={selectedColor}
-              onChange={e => setSelectedColor(e.target.value)}
-            />
-          </ColorInput>
-        </ToolbarGroup>
+        <CancelButton onClick={() => onCancel()}>Cancel</CancelButton>
+        <FlexSpacer />
         <ToolbarGroup>
           {Tools.map(tool => (
             <ToolButton
@@ -262,13 +250,17 @@ export function ImageEditorWrapper({src, onCancel, onSubmit}: ImageEditorWrapper
           ))}
         </ToolbarGroup>
         <ToolbarGroup>
-          <CancelButton onClick={() => onCancel()}>Cancel</CancelButton>
-        </ToolbarGroup>
-        <ToolbarGroup>
-          <SubmitButton onClick={async () => onSubmit(await getBlob())}>
-            Save
-          </SubmitButton>
+          <ColorInput>
+            <ColorDisplay color={selectedColor} />
+            <input
+              type="color"
+              value={selectedColor}
+              onChange={e => setSelectedColor(e.target.value)}
+            />
+          </ColorInput>
         </ToolbarGroup>
+        <FlexSpacer />
+        <SubmitButton onClick={async () => onSubmit(await getBlob())}>Save</SubmitButton>
       </Toolbar>
     </Container>
   );
diff --git a/src/components/screenshotEditor.tsx b/src/components/screenshotEditor.tsx
index 40532aa8cb8cb..10cae00b469c2 100644
--- a/src/components/screenshotEditor.tsx
+++ b/src/components/screenshotEditor.tsx
@@ -27,7 +27,7 @@ const Container = styled.div`
   width: 100vw;
   top: 0;
   left: 0;
-  background-color: #fff;
+  background-color: rgba(240, 236, 243, 1);
   background-image: repeating-linear-gradient(
     45deg,
     transparent,

From 7cc637e39421957c52ac7c4440e733308d13866b Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Wed, 23 Aug 2023 15:25:26 +0200
Subject: [PATCH 23/26] Fix color change

---
 src/components/hooks/useImageEditor/imageEditor.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/hooks/useImageEditor/imageEditor.ts b/src/components/hooks/useImageEditor/imageEditor.ts
index a5b538b606a6d..430c879e45a90 100644
--- a/src/components/hooks/useImageEditor/imageEditor.ts
+++ b/src/components/hooks/useImageEditor/imageEditor.ts
@@ -244,6 +244,7 @@ export class ImageEditor {
     if (this.selectedDrawingId) {
       const selectedDrawing = this.drawings.find(d => d.id === this.selectedDrawingId);
       selectedDrawing?.setColor(color);
+      this.sheduleUpdateCanvas();
     }
   }
 

From 8d9af2bbd2b9d8437f4c9212016bd32d56f5c7d2 Mon Sep 17 00:00:00 2001
From: Anton Ovchinnikov <anton@tonyo.info>
Date: Wed, 23 Aug 2023 15:43:31 +0200
Subject: [PATCH 24/26] Fix ID detection, add a tag pointing at element

---
 src/components/feedbackWidget.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index b55a6342d1457..ef20e98168c14 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -95,7 +95,7 @@ function isElementInViewport(el) {
   );
 }
 
-function getNearestIdInViewport(element: HTMLElement): HTMLElement | null {
+function getNearestIdInViewport(element: HTMLElement): string | null {
   let currentElement: HTMLElement | null = element;
   while (currentElement !== null) {
     const nextElement = currentElement.previousElementSibling;
@@ -111,11 +111,11 @@ function getNearestIdInViewport(element: HTMLElement): HTMLElement | null {
       currentElement.id !== '' &&
       isElementInViewport(currentElement) &&
       // Ignore elements that are fixed or absolute as they most likely won't help with scrolling the element into view
-      ['fixed', 'absolute'].includes(
+      !['fixed', 'absolute'].includes(
         currentElement.computedStyleMap().get('position').toString()
       )
     ) {
-      return currentElement;
+      return currentElement.id;
     }
   }
   return null;
@@ -165,12 +165,13 @@ export function FeebdackWidget() {
   }) => {
     const selectedElement = data.selection && getSelectedDomElement(data.selection);
     let nearestHeadingElement: HTMLElement;
-    let nearestIdInViewport: HTMLElement;
+    let nearestIdInViewport: string;
 
     if (selectedElement) {
       nearestHeadingElement = getNearestHeadingElement(selectedElement);
       nearestIdInViewport = getNearestIdInViewport(selectedElement);
     }
+    console.log('selected element', selectedElement);
 
     let eventId: string;
     const imageData = data.image && (await blobToUint8Array(data.image));
@@ -218,6 +219,12 @@ export function FeebdackWidget() {
         scope.setTag('replayId', replayId);
       }
 
+      if (nearestIdInViewport) {
+        const currentUrl = new URL(document.location.href);
+        currentUrl.hash = nearestIdInViewport;
+        scope.setTag('element_url', currentUrl.toString());
+      }
+
       // We don't need breadcrumbs for now
       scope.clearBreadcrumbs();
       eventId = Sentry.captureMessage(data.title);

From 78f2a7e07381da38d801f51a948660580a20ea83 Mon Sep 17 00:00:00 2001
From: Anton Ovchinnikov <anton@tonyo.info>
Date: Wed, 23 Aug 2023 15:50:11 +0200
Subject: [PATCH 25/26] Duplicate useful values in the content context

---
 src/components/feedbackWidget.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/feedbackWidget.tsx b/src/components/feedbackWidget.tsx
index ef20e98168c14..93f5d9924c8d5 100644
--- a/src/components/feedbackWidget.tsx
+++ b/src/components/feedbackWidget.tsx
@@ -195,21 +195,31 @@ export function FeebdackWidget() {
         });
       }
 
+      const contentContext: any = {};
       const sourcePage = getGitHubSourcePage();
       if (sourcePage) {
-        scope.setContext('Content', {
-          'Edit file': sourcePage,
-          Repository: sourcePage.split('/').slice(0, 5).join('/'),
-        });
+        contentContext['Edit file'] = sourcePage;
+        contentContext.Repository = sourcePage.split('/').slice(0, 5).join('/');
       }
 
       const pageTitle = document.title;
       if (pageTitle) {
         scope.setTag('page_title', pageTitle);
+        contentContext['Page title'] = pageTitle;
       }
 
       if (nearestHeadingElement && nearestHeadingElement.textContent) {
-        scope.setTag('page_section', nearestHeadingElement.textContent);
+        const pageSection = nearestHeadingElement.textContent;
+        scope.setTag('page_section', pageSection);
+        contentContext['Page section'] = pageSection;
+      }
+
+      if (nearestIdInViewport) {
+        const currentUrl = new URL(document.location.href);
+        currentUrl.hash = nearestIdInViewport;
+        const elementUrl = currentUrl.toString();
+        scope.setTag('element_url', elementUrl);
+        contentContext['Element URL'] = elementUrl;
       }
 
       // Prepare session replay
@@ -219,10 +229,8 @@ export function FeebdackWidget() {
         scope.setTag('replayId', replayId);
       }
 
-      if (nearestIdInViewport) {
-        const currentUrl = new URL(document.location.href);
-        currentUrl.hash = nearestIdInViewport;
-        scope.setTag('element_url', currentUrl.toString());
+      if (contentContext) {
+        scope.setContext('Content', contentContext);
       }
 
       // We don't need breadcrumbs for now

From 85e6d5857711002b96daa494a37c9a5bd6a873b9 Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Thu, 24 Aug 2023 11:01:52 +0200
Subject: [PATCH 26/26] Introduce bugs

---
 gatsby-browser.tsx                                    | 10 +++++++++-
 .../getting-started-install/javascript.mdx            | 11 ++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
index 3b72f48db5286..025487313e176 100644
--- a/gatsby-browser.tsx
+++ b/gatsby-browser.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {GatsbyBrowser} from 'gatsby';
 
 import {CodeContextProvider} from 'sentry-docs/components/codeContext';
@@ -9,6 +9,14 @@ export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({
   element,
   props: {pageContext},
 }) => {
+  useEffect(() => {
+    const codeBlock = document.querySelector<HTMLDivElement>('.code-tabs-wrapper');
+    if (!codeBlock) {
+      return;
+    }
+    codeBlock.style.position = 'relative';
+    codeBlock.style.right = '-74px';
+  });
   return (
     <React.Fragment>
       {/* FIXME: we're duplicating CodeContextProvider, which is not nice.
diff --git a/src/platform-includes/getting-started-install/javascript.mdx b/src/platform-includes/getting-started-install/javascript.mdx
index 44636f266062d..525e09633bc13 100644
--- a/src/platform-includes/getting-started-install/javascript.mdx
+++ b/src/platform-includes/getting-started-install/javascript.mdx
@@ -2,11 +2,12 @@ In order to get started using the Sentry JavaScript SDK, add the following code
 
 <SignInNote />
 
-```html
-<script
-  src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"
-  crossorigin="anonymous"
-></script>
+```javascript
+Santry.captureEggception(new Error("something went wrong"), {
+  tags: {
+    section: "articles",
+  },
+});
 ```
 
 The Loader Script allows you to configure some SDK features from the Sentry UI, without having to redeploy your application. The [Loader Script documentation](/platforms/javascript/install/loader/) shows more information about how to use it.