From 735e2a1a6a6e74baca5b15bf0212b2c317460e6c Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Tue, 2 Sep 2025 15:24:33 -0700
Subject: [PATCH 1/2] feat(feedback): Add more labels so people can configure
 Highlight and Hide labels

---
 packages/core/src/types-hoist/feedback/config.ts  | 15 +++++++++++++++
 packages/feedback/src/constants/index.ts          |  3 +++
 packages/feedback/src/core/integration.ts         |  9 +++++++++
 .../screenshot/components/ScreenshotEditor.tsx    |  4 ++--
 .../src/screenshot/components/Toolbar.tsx         |  7 +++++--
 5 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/types-hoist/feedback/config.ts b/packages/core/src/types-hoist/feedback/config.ts
index 49bc7231e9e2..f6a90c7c5b73 100644
--- a/packages/core/src/types-hoist/feedback/config.ts
+++ b/packages/core/src/types-hoist/feedback/config.ts
@@ -176,6 +176,21 @@ export interface FeedbackTextConfiguration {
    * The label for the button that removes a screenshot and hides the image editor
    */
   removeScreenshotButtonLabel: string;
+
+  /**
+   * The label for the button that highlights portions ofthe screenshot
+   */
+  highlightToolText: string;
+
+  /**
+   * The label for the button that hides portions of the screenshot
+   */
+  hideToolText: string;
+
+  /**
+   * The label for the button that removed a highlight/hidden section of the screenshot.
+   */
+  removeHighlightText: string;
 }
 
 /**
diff --git a/packages/feedback/src/constants/index.ts b/packages/feedback/src/constants/index.ts
index 198b6e199bb5..d18392258417 100644
--- a/packages/feedback/src/constants/index.ts
+++ b/packages/feedback/src/constants/index.ts
@@ -22,6 +22,9 @@ export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
 export const IS_REQUIRED_LABEL = '(required)';
 export const ADD_SCREENSHOT_LABEL = 'Add a screenshot';
 export const REMOVE_SCREENSHOT_LABEL = 'Remove screenshot';
+export const HIGHLIGHT_TOOL_TEXT = 'Highlight';
+export const HIDE_TOOL_TEXT = 'Hide';
+export const REMOVE_HIGHLIGHT_TEXT = 'Remove';
 
 export const FEEDBACK_WIDGET_SOURCE = 'widget';
 export const FEEDBACK_API_SOURCE = 'api';
diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts
index d70f563b6136..2fc0df2a7b7b 100644
--- a/packages/feedback/src/core/integration.ts
+++ b/packages/feedback/src/core/integration.ts
@@ -14,11 +14,14 @@ import {
   EMAIL_LABEL,
   EMAIL_PLACEHOLDER,
   FORM_TITLE,
+  HIDE_TOOL_TEXT,
+  HIGHLIGHT_TOOL_TEXT,
   IS_REQUIRED_LABEL,
   MESSAGE_LABEL,
   MESSAGE_PLACEHOLDER,
   NAME_LABEL,
   NAME_PLACEHOLDER,
+  REMOVE_HIGHLIGHT_TEXT,
   REMOVE_SCREENSHOT_LABEL,
   SUBMIT_BUTTON_LABEL,
   SUCCESS_MESSAGE_TEXT,
@@ -110,6 +113,9 @@ export const buildFeedbackIntegration = ({
     successMessageText = SUCCESS_MESSAGE_TEXT,
     triggerLabel = TRIGGER_LABEL,
     triggerAriaLabel = '',
+    highlightToolText = HIGHLIGHT_TOOL_TEXT,
+    hideToolText = HIDE_TOOL_TEXT,
+    removeHighlightText = REMOVE_HIGHLIGHT_TEXT,
 
     // FeedbackCallbacks
     onFormOpen,
@@ -152,6 +158,9 @@ export const buildFeedbackIntegration = ({
       isRequiredLabel,
       addScreenshotButtonLabel,
       removeScreenshotButtonLabel,
+      highlightToolText,
+      hideToolText,
+      removeHighlightText,
 
       onFormClose,
       onFormOpen,
diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index 083f5c16dec6..8995566fa8c2 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -310,7 +310,7 @@ export function ScreenshotEditorFactory({
                   }}
                 >
                   <button
-                    aria-label="Remove"
+                    aria-label={options.removeHighlightText}
                     onClick={deleteRect(index)}
                     onMouseDown={handleStopPropagation}
                     onMouseUp={handleStopPropagation}
@@ -323,7 +323,7 @@ export function ScreenshotEditorFactory({
             </div>
           </div>
         </div>
-        <Toolbar action={action} setAction={setAction} />
+        <Toolbar options={options} action={action} setAction={setAction} />
       </div>
     );
   };
diff --git a/packages/feedback/src/screenshot/components/Toolbar.tsx b/packages/feedback/src/screenshot/components/Toolbar.tsx
index 864f834d9127..c5aec5d2dc8d 100644
--- a/packages/feedback/src/screenshot/components/Toolbar.tsx
+++ b/packages/feedback/src/screenshot/components/Toolbar.tsx
@@ -1,5 +1,6 @@
 import type { h as hType, VNode } from 'preact';
 import type * as Hooks from 'preact/hooks';
+import type { FeedbackInternalOptions } from '@sentry/core';
 
 interface FactoryParams {
   h: typeof hType;
@@ -11,9 +12,11 @@ export default function ToolbarFactory({
   return function Toolbar({
     action,
     setAction,
+    options,
   }: {
     action: 'highlight' | 'hide' | '';
     setAction: Hooks.StateUpdater<'highlight' | 'hide' | ''>;
+    options: FeedbackInternalOptions;
   }): VNode {
     return (
       <div class="editor__tool-container">
@@ -25,7 +28,7 @@ export default function ToolbarFactory({
               setAction(action === 'highlight' ? '' : 'highlight');
             }}
           >
-            Highlight
+            {options.highlightToolText}
           </button>
           <button
             type="button"
@@ -34,7 +37,7 @@ export default function ToolbarFactory({
               setAction(action === 'hide' ? '' : 'hide');
             }}
           >
-            Hide
+            {options.hideToolText}
           </button>
         </div>
       </div>

From 253889b6dd720c2dbea986c6e8e4617c1f6eec8f Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Tue, 2 Sep 2025 16:20:39 -0700
Subject: [PATCH 2/2] lint

---
 packages/feedback/src/core/integration.ts               | 2 ++
 packages/feedback/src/screenshot/components/Toolbar.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts
index 2fc0df2a7b7b..87ab62cfec1b 100644
--- a/packages/feedback/src/core/integration.ts
+++ b/packages/feedback/src/core/integration.ts
@@ -1,3 +1,5 @@
+/* eslint-disable max-lines */
+
 import type {
   FeedbackInternalOptions,
   FeedbackModalIntegration,
diff --git a/packages/feedback/src/screenshot/components/Toolbar.tsx b/packages/feedback/src/screenshot/components/Toolbar.tsx
index c5aec5d2dc8d..96a9965d8322 100644
--- a/packages/feedback/src/screenshot/components/Toolbar.tsx
+++ b/packages/feedback/src/screenshot/components/Toolbar.tsx
@@ -1,6 +1,6 @@
+import type { FeedbackInternalOptions } from '@sentry/core';
 import type { h as hType, VNode } from 'preact';
 import type * as Hooks from 'preact/hooks';
-import type { FeedbackInternalOptions } from '@sentry/core';
 
 interface FactoryParams {
   h: typeof hType;