feat(prop-view): copy props to clipboard

src/panel/components/PropView.spec.tsx

@@ -3,22 +3,26 @@ import { mount } from "enzyme";
 import { PropView } from "./PropView";
 import { useSelectedBrickContext } from "../libs/SelectedBrickContext";
 import { PropList } from "./PropList";
+import { Button } from "@blueprintjs/core";
+import { DehydratedBrickInfo } from "../../shared/interfaces";
 
 jest.mock("../libs/SelectedBrickContext");
 
 (useSelectedBrickContext as jest.Mock).mockReturnValue({ selectedBrick: null });
 
-const mockEval = jest.fn((string: string, fn: Function): void => {
-  fn({
-    info: {
-      properties: {
-        quality: "good",
+const mockEval = jest.fn(
+  (string: string, fn: (brickInfo: DehydratedBrickInfo) => void): void => {
+    fn({
+      info: {
+        properties: {
+          quality: "good",
+        },
+        events: [["click", { action: "console.log" }]],
       },
-      events: [["click", { action: "console.log" }]],
-    },
-    repo: [],
-  });
-});
+      repo: [],
+    });
+  }
+);
 
 (window as any).chrome = {
   devtools: {
@@ -58,4 +62,17 @@ describe("PropView", () => {
 
     (useSelectedBrickContext as jest.Mock).mockReset();
   });
+
+  it("should work when copy properties", () => {
+    const selectedBrick = {
+      uid: 1,
+    };
+    (useSelectedBrickContext as jest.Mock).mockReturnValue({ selectedBrick });
+    const wrapper = mount(<PropView />);
+    document.execCommand = jest.fn().mockReturnValue(true);
+    document.removeEventListener = jest.fn();
+    wrapper.find(Button).simulate("click");
+    expect(document.execCommand).toBeCalledWith("copy");
+    expect(document.removeEventListener).toHaveBeenCalled();
+  });
 });

src/panel/components/PropView.tsx

@@ -1,11 +1,42 @@
 import React from "react";
-import { Tag } from "@blueprintjs/core";
+import { Tag, Button, Tooltip } from "@blueprintjs/core";
 import { useSelectedBrickContext } from "../libs/SelectedBrickContext";
 import { HOOK_NAME } from "../../shared/constants";
 import { BrickInfo, DehydratedBrickInfo } from "../../shared/interfaces";
 import { hydrate } from "../libs/hydrate";
 import { PropList } from "./PropList";
 
+const copyToClipboard = (text: string): boolean => {
+  let success = false;
+  try {
+    const listener = (e: ClipboardEvent) => {
+      e.stopPropagation();
+      const clipboard = e.clipboardData;
+      clipboard.clearData();
+      clipboard.setData("text", text);
+      e.preventDefault();
+    };
+
+    document.addEventListener("copy", listener);
+    success = document.execCommand("copy");
+
+    if (!success) {
+      throw new Error("copy command was unsuccessful!");
+    }
+    document.removeEventListener("copy", listener);
+  } catch (err) {
+    try {
+      //  for IE supported only
+      (window as any).clipboardData.setData("text", text);
+      success = true;
+    } catch (e) {
+      // do nothing
+    }
+  }
+
+  return success;
+};
+
 function isNotEmpty(object: any[] | Record<string, any>): boolean {
   return object
     ? (Array.isArray(object) ? object : Object.keys(object)).length > 0
@@ -42,6 +73,18 @@ export function PropView(): React.ReactElement {
     return null;
   }
 
+  const handleCopyProps = () => {
+    if (!brickInfo.properties) {
+      return;
+    }
+    try {
+      const propsText = JSON.stringify(brickInfo.properties, null, 2);
+      copyToClipboard(propsText);
+    } catch (error) {
+      // do nothing
+    }
+  };
+
   return (
     <div className="prop-view source-code">
       <div className="scroll-container">
@@ -51,6 +94,17 @@ export function PropView(): React.ReactElement {
             <React.Fragment key={tag}>
               <div style={{ padding: 5 }}>
                 <Tag minimal>{tag}</Tag>
+                {key === "properties" && (
+                  <Tooltip content="Copy to clipboard" hoverOpenDelay={300}>
+                    <Button
+                      icon="duplicate"
+                      minimal
+                      onClick={handleCopyProps}
+                      style={{ marginLeft: "10px" }}
+                      small
+                    />
+                  </Tooltip>
+                )}
               </div>
               <div className="expanded">
                 <PropList list={brickInfo[key]} />