Revert "feat(feedback) Allowing annotation via highlighting & masking (#15484)" (#15609)

Screenshots without annotations were not showing up properly (they are
being capture as completely transparent).

This reverts commit 9c1f79b.

Author: billyvg

packages/core/src/types-hoist/feedback/config.ts

@@ -57,6 +57,15 @@ export interface FeedbackGeneralConfiguration {
     name: string;
   };
 
+  /**
+   * _experiments allows users to enable experimental or internal features.
+   * We don't consider such features as part of the public API and hence we don't guarantee semver for them.
+   * Experimental features can be added, changed or removed at any time.
+   *
+   * Default: undefined
+   */
+  _experiments: Partial<{ annotations: boolean }>;
+
   /**
    * Set an object that will be merged sent as tags data with the event.
    */

packages/feedback/src/constants/index.ts

@@ -20,8 +20,8 @@ export const NAME_PLACEHOLDER = 'Your Name';
 export const NAME_LABEL = 'Name';
 export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
 export const IS_REQUIRED_LABEL = '(required)';
-export const ADD_SCREENSHOT_LABEL = 'Capture Screenshot';
-export const REMOVE_SCREENSHOT_LABEL = 'Remove Screenshot';
+export const ADD_SCREENSHOT_LABEL = 'Add a screenshot';
+export const REMOVE_SCREENSHOT_LABEL = 'Remove screenshot';
 
 export const FEEDBACK_WIDGET_SOURCE = 'widget';
 export const FEEDBACK_API_SOURCE = 'api';

packages/feedback/src/core/integration.ts

@@ -84,6 +84,7 @@ export const buildFeedbackIntegration = ({
       email: 'email',
       name: 'username',
     },
+    _experiments = {},
     tags,
     styleNonce,
     scriptNonce,
@@ -158,6 +159,8 @@ export const buildFeedbackIntegration = ({
       onSubmitError,
       onSubmitSuccess,
       onFormSubmitted,
+
+      _experiments,
     };
 
     let _shadow: ShadowRoot | null = null;

packages/feedback/src/screenshot/components/Annotations.tsx

@@ -0,0 +1,91 @@
+import type { VNode, h as hType } from 'preact';
+import type * as Hooks from 'preact/hooks';
+import { DOCUMENT } from '../../constants';
+
+interface FactoryParams {
+  h: typeof hType;
+}
+
+export default function AnnotationsFactory({
+  h, // eslint-disable-line @typescript-eslint/no-unused-vars
+}: FactoryParams) {
+  return function Annotations({
+    action,
+    imageBuffer,
+    annotatingRef,
+  }: {
+    action: 'crop' | 'annotate' | '';
+    imageBuffer: HTMLCanvasElement;
+    annotatingRef: Hooks.Ref<HTMLCanvasElement>;
+  }): VNode {
+    const onAnnotateStart = (): void => {
+      if (action !== 'annotate') {
+        return;
+      }
+
+      const handleMouseMove = (moveEvent: MouseEvent): void => {
+        const annotateCanvas = annotatingRef.current;
+        if (annotateCanvas) {
+          const rect = annotateCanvas.getBoundingClientRect();
+          const x = moveEvent.clientX - rect.x;
+          const y = moveEvent.clientY - rect.y;
+
+          const ctx = annotateCanvas.getContext('2d');
+          if (ctx) {
+            ctx.lineTo(x, y);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+          }
+        }
+      };
+
+      const handleMouseUp = (): void => {
+        const ctx = annotatingRef.current?.getContext('2d');
+        if (ctx) {
+          ctx.beginPath();
+        }
+
+        // Add your apply annotation logic here
+        applyAnnotation();
+
+        DOCUMENT.removeEventListener('mousemove', handleMouseMove);
+        DOCUMENT.removeEventListener('mouseup', handleMouseUp);
+      };
+
+      DOCUMENT.addEventListener('mousemove', handleMouseMove);
+      DOCUMENT.addEventListener('mouseup', handleMouseUp);
+    };
+
+    const applyAnnotation = (): void => {
+      // Logic to apply the annotation
+      const imageCtx = imageBuffer.getContext('2d');
+      const annotateCanvas = annotatingRef.current;
+      if (imageCtx && annotateCanvas) {
+        imageCtx.drawImage(
+          annotateCanvas,
+          0,
+          0,
+          annotateCanvas.width,
+          annotateCanvas.height,
+          0,
+          0,
+          imageBuffer.width,
+          imageBuffer.height,
+        );
+
+        const annotateCtx = annotateCanvas.getContext('2d');
+        if (annotateCtx) {
+          annotateCtx.clearRect(0, 0, annotateCanvas.width, annotateCanvas.height);
+        }
+      }
+    };
+    return (
+      <canvas
+        class={`editor__annotation ${action === 'annotate' ? 'editor__annotation--active' : ''}`}
+        onMouseDown={onAnnotateStart}
+        ref={annotatingRef}
+      ></canvas>
+    );
+  };
+}