[ext] Add copy, paste and cut regions hotkey interactions

src/components/CurrentEntity/CurrentEntity.js

@@ -1,5 +1,5 @@
 import { inject, observer } from "mobx-react";
-import React from "react";
+import React, { useEffect } from "react";
 import { LsSettings, LsTrash } from "../../assets/icons";
 import { Button } from "../../common/Button/Button";
 import { confirm } from "../../common/Modal/Modal";
@@ -26,6 +26,64 @@ export const CurrentEntity = injector(observer(({
   const isPrediction = entity?.type === 'prediction';
   const saved = !entity.userGenerate || entity.sentUserGenerate;
 
+  useEffect(()=>{
+    const copyToClipboard = (ev) => {
+      const { clipboardData } = ev;
+      const results = entity.serializedSelection;
+
+      clipboardData.setData('application/json', JSON.stringify(results));
+      ev.preventDefault();
+
+    };
+    const pasteFromClipboard = (ev) => {
+      const { clipboardData } = ev;
+      const data = clipboardData.getData('application/json');
+
+      try {
+        const results = JSON.parse(data);
+
+        entity.appendResults(results);
+        ev.preventDefault();
+      } catch (e) {
+        return;
+      }
+    };
+
+    const copyHandler = (ev) =>{
+      const selection = window.getSelection();
+
+      if (!selection.isCollapsed) return;
+
+      copyToClipboard(ev);
+    };
+    const pasteHandler = (ev) =>{
+      const selection = window.getSelection();
+
+      if (Node.ELEMENT_NODE === selection.focusNode.nodeType && selection.focusNode.focus) return;
+
+      pasteFromClipboard(ev);
+    };
+    const cutHandler = (ev) =>{
+      const selection = window.getSelection();
+
+      if (!selection.isCollapsed) return;
+
+      copyToClipboard(ev);
+      entity.deleteSelectedRegions();
+
+      console.log("Window event: cutHandler", ev);
+    };
+
+    window.addEventListener("copy", copyHandler);
+    window.addEventListener("paste", pasteHandler);
+    window.addEventListener("cut", cutHandler);
+    return () => {
+      window.removeEventListener("copy", copyHandler);
+      window.removeEventListener("paste", pasteHandler);
+      window.removeEventListener("cut", cutHandler);
+    };
+  }, [entity.pk ?? entity.id]);
+
   return entity ? (
     <Block name="annotation" onClick={e => e.stopPropagation()}>
       <Elem name="info" tag={Space} spread>

src/stores/AnnotationStore.js

@@ -133,6 +133,24 @@ const Annotation = types
         .concat(self.relationStore.serializeAnnotation());
     },
 
+    get serializedSelection() {
+      // Dirty hack to force MST track changes
+      self.areas.toJSON();
+
+      const selectedResults = [];
+
+      self.areas.forEach(a => {
+        if (!a.inSelection) return;
+        a.results.forEach(r => {
+          selectedResults.push(r);
+        });
+      });
+
+      return selectedResults
+        .map(r => r.serialize())
+        .filter(Boolean);
+    },
+
     get highlightedNode() {
       return self.regionStore.selection.highlighted;
     },
@@ -640,6 +658,23 @@ const Annotation = types
       return area;
     },
 
+    appendResults(results) {
+      const regionIdMap = {};
+
+      // Generate new ids to prevent collisions
+      results.forEach((result)=>{
+        const regionId = result.id;
+
+        if (!regionIdMap[regionId]) {
+          regionIdMap[regionId] = guidGenerator();
+        }
+        result.id = regionIdMap[regionId];
+      });
+
+      self.deserializeAnnotation(results);
+      self.updateObjects();
+    },
+
     serializeAnnotation() {
       return self.serialized;
     },