Prevent highlights with duplicate uids from being created

client/package.json

@@ -41,6 +41,7 @@
     "redux-devtools-extension": "^2.13.2",
     "redux-thunk": "^2.2.0",
     "redux-token-auth": "^0.19.0",
+    "uuid": "^10.0.0",
     "xmldom": "^0.6.0"
   },
   "resolutions": {

client/src/CanvasResource.js

@@ -45,6 +45,7 @@ import HighlightColorSelect from './HighlightColorSelect';
 import AddImageLayer from './AddImageLayer';
 import TextField from 'material-ui/TextField';
 import deepEqual from 'deep-equal';
+import { v4 as uuidv4 } from 'uuid';
 
 // overlay these modules
 openSeaDragonFabricOverlay(OpenSeadragon, fabric);
@@ -375,7 +376,7 @@ class CanvasResource extends Component {
     overlay.fabricCanvas().on('path:created', event => {
       if (event.path) {
         let path = event.path;
-        const highlightUid = `dm_canvas_highlight_${Date.now()}`;
+        const highlightUid = `dm_canvas_highlight_${uuidv4()}`;
         path._highlightUid = highlightUid;
         path.perPixelTargetFind = true;
         this.overlay.fabricCanvas().setActiveObject(path);
@@ -822,7 +823,7 @@ class CanvasResource extends Component {
     this.lineInProgress.perPixelTargetFind = true;
     this.lineInProgress.selectable = true;
     this.lockCanvasObject(this.lineInProgress, true);
-    const highlightUid = `dm_canvas_highlight_${Date.now()}`;
+    const highlightUid = `dm_canvas_highlight_${uuidv4()}`;
     this.lineInProgress['_highlightUid'] = highlightUid;
 
     this.props.setSaving({ doneSaving: false });
@@ -849,7 +850,7 @@ class CanvasResource extends Component {
   }
 
   addShape(fabricObject) {
-    const highlightUid = `dm_canvas_highlight_${Date.now()}`;
+    const highlightUid = `dm_canvas_highlight_${uuidv4()}`;
     const { highlightColors } = this.props;
     const instanceKey = this.getInstanceKey();
     fabricObject['_highlightUid'] = highlightUid;

client/src/TextResource.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import { v4 as uuidv4 } from 'uuid';
 
 import { yellow500 } from 'material-ui/styles/colors';
 import DropDownMenu from 'material-ui/DropDownMenu';
@@ -814,7 +815,7 @@ class TextResource extends Component {
     const markType = this.state.documentSchema.marks.highlight;
     const { document_id } = this.props;
     const editorState = this.getEditorState();
-    const cmd = addMark( markType, {highlightUid: `dm_text_highlight_${Date.now()}`, documentId: document_id });
+    const cmd = addMark( markType, {highlightUid: `dm_text_highlight_${uuidv4()}`, documentId: document_id });
     cmd( editorState, this.state.editorView.dispatch );
     this.state.editorView.focus();
   }
@@ -1259,7 +1260,7 @@ class TextResource extends Component {
     });
     pastedMarks.forEach((mark, index) => {
       let markEntry = Object.assign({}, mark.attrs);
-      mark.attrs['highlightUid'] = markEntry['newHighlightUid'] = `dm_text_highlight_${Date.now()}_${index}`;
+      mark.attrs['highlightUid'] = markEntry['newHighlightUid'] = `dm_text_highlight_${uuidv4()}_${index}`;
       mark.attrs['documentId'] = this.props.document_id;
       this.highlightsToDuplicate.push(markEntry);
     });

client/yarn.lock

@@ -9569,6 +9569,11 @@ [email protected]:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
 
+uuid@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
+  integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
+
 uuid@^3.0.1, uuid@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"