copybutton 4click copy

src/Components/HighlightInput/CodeEditor.tsx

@@ -11,7 +11,7 @@ import TriggerSource, { TriggerTargetProblem } from "../../Domain/Trigger";
 import { formatQuery } from "./formatQuery";
 import { TargetQueryEntityColors } from "../../Domain/Target";
 import { PromQLExtension } from "@clavinjune/codemirror-metricsql";
-import { TransactionSpec } from "@codemirror/state";
+import { TransactionSpec, EditorSelection } from "@codemirror/state";
 import classNames from "classnames/bind";
 
 import styles from "./HighlightInput.less";
@@ -64,6 +64,40 @@ const ShowModeTheme = EditorView.theme({
     },
 });
 
+const quadrupleClickCopy = EditorView.mouseSelectionStyle.of((view, event) => {
+    if (event.detail !== 4 || event.button !== 0) return null;
+    return {
+        get() {
+            const range = EditorSelection.range(0, view.state.doc.length);
+            return EditorSelection.create([range]);
+        },
+        update() {
+            return true;
+        },
+    };
+});
+
+const transactionFilter = EditorState.transactionFilter.of((tr) => {
+    const newTr: TransactionSpec[] = [];
+
+    if (tr.isUserEvent("input.paste")) {
+        const currentState = tr.startState;
+
+        tr.changes.iterChanges((_fromA, _toA, _fromB, _toB, inserted) => {
+            const newText = formatQuery(inserted);
+
+            const { ranges } = currentState.selection;
+
+            if (ranges.length > 0) {
+                const tr = currentState.replaceSelection(newText);
+                newTr.push(tr);
+            }
+        });
+        return newTr;
+    }
+    return tr;
+});
+
 export const CodeEditor = React.forwardRef<HTMLDivElement, Props>(function CodeEditor(
     { value, triggerSource, problemTree, error, warning, disabled, onBlur, onValueChange },
     validationRef
@@ -76,27 +110,6 @@ export const CodeEditor = React.forwardRef<HTMLDivElement, Props>(function CodeE
 
     const languageToUse = isPromQl ? promQL.asExtension() : graphiteLanguage();
 
-    const transactionFilter = EditorState.transactionFilter.of((tr) => {
-        const newTr: TransactionSpec[] = [];
-
-        if (tr.isUserEvent("input.paste")) {
-            const currentState = tr.startState;
-
-            tr.changes.iterChanges((_fromA, _toA, _fromB, _toB, inserted) => {
-                const newText = formatQuery(inserted);
-
-                const { ranges } = currentState.selection;
-
-                if (ranges.length > 0) {
-                    const tr = currentState.replaceSelection(newText);
-                    newTr.push(tr);
-                }
-            });
-            return newTr;
-        }
-        return tr;
-    });
-
     const GraphiteExtensions = [
         GraphiteTheme,
         basicSetup,
@@ -111,13 +124,15 @@ export const CodeEditor = React.forwardRef<HTMLDivElement, Props>(function CodeE
         invalidTokensHighlightExtension(problemTree),
         transactionFilter,
         languageToUse,
+        quadrupleClickCopy,
     ];
 
     const ShowModeExtensions = [
         basicSetup,
         languageToUse,
         EditorView.editable.of(!disabled),
         ShowModeTheme,
+        quadrupleClickCopy,
     ];
 
     if (!isPromQl) {

src/Components/TriggerEditForm/CopyButton.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Button, Toast } from "@skbkontur/react-ui";
+import CopyIcon from "@skbkontur/react-icons/Copy";
+
+interface Props {
+    value: string;
+    className?: string;
+}
+
+const copy = async (text: string) => {
+    if (!navigator?.clipboard) {
+        return;
+    }
+    try {
+        await navigator.clipboard.writeText(text);
+    } catch (error) {
+        console.log(error);
+    }
+};
+
+export const CopyButton: React.FC<Props> = ({ value, className }) => {
+    const handleCopy = () => {
+        Toast.push("Target value copied");
+        copy(value.trim());
+    };
+
+    return <Button className={className} use="link" icon={<CopyIcon />} onClick={handleCopy} />;
+};

src/Components/TriggerEditForm/TriggerEditForm.less

@@ -1,6 +1,12 @@
 @import '~styles/variables.less';
 @import '~styles/mixins.less';
 
+.copyButton {
+    position: absolute;
+    right:-24px;
+    top:3px
+}
+
 .form {
     max-width: 800px;
 }

src/Components/TriggerEditForm/TriggerEditForm.tsx

@@ -4,8 +4,7 @@ import { Remarkable } from "remarkable";
 import { sanitize } from "dompurify";
 import RemoveIcon from "@skbkontur/react-icons/Remove";
 import AddIcon from "@skbkontur/react-icons/Add";
-import CopyIcon from "@skbkontur/react-icons/Copy";
-import { Checkbox, Input, Textarea, Button, Tabs, Hint } from "@skbkontur/react-ui";
+import { Checkbox, Input, Textarea, Button, Tabs } from "@skbkontur/react-ui";
 import { RowStack, Fill, Fit } from "@skbkontur/react-stack-layout";
 import {
     DEFAULT_TRIGGER_TTL,
@@ -28,6 +27,7 @@ import HighlightInput from "../HighlightInput/HighlightInput";
 import HelpTooltip from "../HelpTooltip/HelpTooltip";
 import EditDescriptionHelp from "./EditDescritionHelp";
 import { MetricSourceSelect } from "./MetricSourceSelect";
+import { CopyButton } from "./CopyButton";
 import classNames from "classnames/bind";
 
 import styles from "./TriggerEditForm.less";
@@ -191,7 +191,7 @@ export default class TriggerEditForm extends React.Component<Props, State> {
                 <FormRow label="Target" useTopAlignForLabel>
                     {targets?.map((x, i) => (
                         <div key={`target-${i}`} className={cn("target")}>
-                            <RowStack block verticalAlign="center" gap={1}>
+                            <RowStack block verticalAlign="top" gap={1}>
                                 <span className={cn("target-number")}>T{i + 1}</span>
                                 <Fill>
                                     <HighlightInput
@@ -203,9 +203,6 @@ export default class TriggerEditForm extends React.Component<Props, State> {
                                         validate={validationResult?.targets?.[i]}
                                     />
                                 </Fill>
-                                <Hint text="Copy as single string">
-                                    <Button use="link" icon={<CopyIcon />} onClick={() => {}} />
-                                </Hint>
 
                                 {targets.length > 1 && (
                                     <Fit>
@@ -231,6 +228,7 @@ export default class TriggerEditForm extends React.Component<Props, State> {
                                     </Fit>
                                 )}
                             </RowStack>
+                            <CopyButton className={cn("copyButton")} value={x} />
                         </div>
                     ))}
                     <Button use="link" icon={<AddIcon />} onClick={() => this.handleAddTarget()}>

src/Components/TriggerInfo/TriggerInfo.less

@@ -53,6 +53,10 @@
     }
 }
 
+.copyButton{
+    margin-left: 11px;
+}
+
 .maintenance-info {
     color: @linkColor
 }

src/Components/TriggerInfo/TriggerInfo.tsx

@@ -25,6 +25,8 @@ import FileExport from "../FileExport/FileExport";
 import MaintenanceSelect from "../MaintenanceSelect/MaintenanceSelect";
 import { CodeEditor } from "../HighlightInput/CodeEditor";
 import { Gapped } from "@skbkontur/react-ui";
+import { CopyButton } from "../TriggerEditForm/CopyButton";
+
 import classNames from "classnames/bind";
 
 import styles from "./TriggerInfo.less";
@@ -192,12 +194,17 @@ export default function TriggerInfo({
                 <dd className={cn("codeEditor")}>
                     <Gapped vertical gap={10}>
                         {targets.map((target, i) => (
-                            <CodeEditor
-                                triggerSource={triggerSource}
-                                disabled
-                                key={i}
-                                value={target}
-                            />
+                            <>
+                                <CodeEditor
+                                    triggerSource={triggerSource}
+                                    disabled
+                                    key={i}
+                                    value={target}
+                                />
+                                <div className={cn("copyButton")}>
+                                    <CopyButton value={target} />
+                                </div>
+                            </>
                         ))}
                     </Gapped>
                 </dd>