work around copy and paste background color

static/css/oml.css

@@ -1,16 +1,28 @@
+.OMLQuoteBox {
+    position: relative;
+}
 .OMLQuote {
+    position: relative;
     padding: 8px;
     color: rgb(0, 0, 0);
-    background-color: rgb(255, 255, 255);
     font-family: Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif;
     font-size: 14px;
     line-height: 21px;
 }
 
-.OMLAnnotation.selected .OMLQuote {
+.OMLAnnotation .OMLQuoteBackground {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgb(255, 255, 255);
+}
+.OMLAnnotation.selected .OMLQuoteBackground {
     background-color: rgb(128, 192, 255);
 }
 
+
 .OMLAnnotation .OxPlaceholder {
     display: none;
 }

static/js/annotation.js

@@ -1,18 +1,24 @@
 'use strict';
 
 oml.ui.annotation = function(annotation, $iframe) {
+    var $quotetext = Ox.Element()
+        .addClass('OxSelectable OMLQuote')
+        .html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>'))
+        .on({
+            click: function(event) {
+                that.select()
+                $iframe.postMessage('selectAnnotation', {
+                    id: annotation.id
+                })
+            }
+        })
     var $quote = Ox.Element()
-            .addClass('OxSelectable OMLQuote')
-            .append(
-                Ox.Element().html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>'))
-            ).on({
-                click: function(event) {
-                    that.select()
-                    $iframe.postMessage('selectAnnotation', {
-                        id: annotation.id
-                    })
-                }
-            })
+        .addClass('OMLQuoteBox')
+        .append(
+            Ox.Element().addClass('OMLQuoteBackground')
+        ).append(
+            $quotetext
+        )
     var notes = annotation.notes.length ? annotation.notes.map(function(note) {
         note.editable = !note.user
         return note