diff --git a/frontend/src/components/QuestionImage/QuestionImage.test.tsx b/frontend/src/components/QuestionImage/QuestionImage.test.tsx
index 8d33e517be..1b602d08f7 100644
--- a/frontend/src/components/QuestionImage/QuestionImage.test.tsx
+++ b/frontend/src/components/QuestionImage/QuestionImage.test.tsx
@@ -1,12 +1,6 @@
import { fireEvent, render, screen } from "@testing-library/react";
import QuestionImage from ".";
-Object.assign(navigator, {
- clipboard: {
- writeText: jest.fn(),
- },
-});
-
describe("Question Image", () => {
const url = "https://example.com/image.jpg";
const mockHandleClickOpen = jest.fn();
@@ -15,19 +9,23 @@ describe("Question Image", () => {
render();
const image = screen.getByAltText("question image");
-
expect(image).toBeInTheDocument();
});
it("Copy Question Image url", () => {
+ const promptSpy = jest.spyOn(window, "prompt").mockImplementation(() => "");
+
render();
const copyButton = screen.getByLabelText("copy");
fireEvent.click(copyButton);
- expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+ expect(promptSpy).toHaveBeenCalledWith(
+ "Copy to clipboard: Ctrl+C, Enter",
`![image](${url})`
);
+
+ promptSpy.mockRestore();
});
it("Expand Question Image", () => {
diff --git a/frontend/src/components/QuestionImage/index.tsx b/frontend/src/components/QuestionImage/index.tsx
index 9314d8c616..4bd7cccd65 100644
--- a/frontend/src/components/QuestionImage/index.tsx
+++ b/frontend/src/components/QuestionImage/index.tsx
@@ -1,7 +1,6 @@
import { Box, ImageListItem, IconButton } from "@mui/material";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import FullscreenIcon from "@mui/icons-material/Fullscreen";
-import { toast } from "react-toastify";
interface QuestionImageProps {
url: string;
@@ -56,8 +55,11 @@ const QuestionImage: React.FC = ({
>
{
- navigator.clipboard.writeText(`![image](${url})`);
- toast.success("Image URL copied to clipboard");
+ // switch to window.prompt since navigator.clipboard.writeText is not supported in HTTP
+ window.prompt(
+ "Copy to clipboard: Ctrl+C, Enter",
+ `![image](${url})`
+ );
}}
sx={{ color: "#fff" }}
aria-label="copy"
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
index 1b7739f405..70d5f52120 100644
--- a/frontend/src/theme.ts
+++ b/frontend/src/theme.ts
@@ -1,4 +1,4 @@
-import grey from "@mui/material/colors/grey";
+import { grey } from "@mui/material/colors";
import { createTheme } from "@mui/material/styles";
const theme = createTheme({
@@ -47,13 +47,13 @@ const theme = createTheme({
},
},
},
- MuiListItemText: {
- styleOverrides: {
- primary: {
- fontSize: "14px",
- },
+ MuiListItemText: {
+ styleOverrides: {
+ primary: {
+ fontSize: "14px",
},
- }
+ },
+ },
},
});