diff --git a/src/components/Shared/CopyButton.tsx b/src/components/Shared/CopyButton.tsx
index 710b79fa..c6c67070 100644
--- a/src/components/Shared/CopyButton.tsx
+++ b/src/components/Shared/CopyButton.tsx
@@ -1,5 +1,5 @@
import { Button, ButtonPropTypes } from '@ui5/webcomponents-react';
-import { useToast } from '../../context/ToastContext.tsx';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
import { useId, CSSProperties } from 'react';
import { useCopyButton } from '../../context/CopyButtonContext.tsx';
import { ThemingParameters } from '@ui5/webcomponents-react-base';
@@ -11,20 +11,15 @@ interface CopyButtonProps extends ButtonPropTypes {
}
export const CopyButton = ({ text, style = {}, ...buttonProps }: CopyButtonProps) => {
- const { show } = useToast();
+ const { copyToClipboard } = useCopyToClipboard();
const { activeCopyId, setActiveCopyId } = useCopyButton();
const uniqueId = useId();
const isCopied = activeCopyId === uniqueId;
const { t } = useTranslation();
const handleCopy = async () => {
- try {
- await navigator.clipboard.writeText(text);
- setActiveCopyId(uniqueId);
- } catch (err) {
- console.error(`Failed to copy text: ${text}. Error: ${err}`);
- show(`${t('CopyButton.copiedMessage')} ${err}`);
- }
+ await copyToClipboard(text, { showToastOnSuccess: false });
+ setActiveCopyId(uniqueId);
};
const defaultStyle: CSSProperties = {
@@ -40,7 +35,7 @@ export const CopyButton = ({ text, style = {}, ...buttonProps }: CopyButtonProps
onClick={handleCopy}
{...buttonProps}
>
- {isCopied ? t('CopyButton.copiedMessage') : text}
+ {isCopied ? t('common.copyToClipboardSuccessToast') : text}
);
};
diff --git a/src/components/Yaml/YamlViewer.tsx b/src/components/Yaml/YamlViewer.tsx
index fa1cefa7..090dc85d 100644
--- a/src/components/Yaml/YamlViewer.tsx
+++ b/src/components/Yaml/YamlViewer.tsx
@@ -4,18 +4,14 @@ import { materialLight, materialDark } from 'react-syntax-highlighter/dist/esm/s
import { Button, FlexBox } from '@ui5/webcomponents-react';
import styles from './YamlViewer.module.css';
-import { useToast } from '../../context/ToastContext.tsx';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
import { useTranslation } from 'react-i18next';
import { useTheme } from '../../hooks/useTheme.ts';
type YamlViewerProps = { yamlString: string; filename: string };
const YamlViewer: FC
= ({ yamlString, filename }) => {
- const toast = useToast();
const { t } = useTranslation();
const { isDarkTheme } = useTheme();
- const copyToClipboard = () => {
- navigator.clipboard.writeText(yamlString);
- toast.show(t('yaml.copiedToClipboard'));
- };
+ const { copyToClipboard } = useCopyToClipboard();
const downloadYaml = () => {
const blob = new Blob([yamlString], { type: 'text/yaml' });
const url = window.URL.createObjectURL(blob);
@@ -31,7 +27,7 @@ const YamlViewer: FC = ({ yamlString, filename }) => {
return (
-