Update `AnnotationQuote` to use util for `isOrphan`, `quote`

src/sidebar/components/annotation-quote.js

@@ -2,17 +2,22 @@ const classnames = require('classnames');
 const { createElement } = require('preact');
 const propTypes = require('prop-types');
 
+const { isOrphan, quote } = require('../util/annotation-metadata');
 const { withServices } = require('../util/service-context');
 const { applyTheme } = require('../util/theme');
+
 const Excerpt = require('./excerpt');
 
 /**
  * Display the selected text from the document associated with an annotation.
  */
-function AnnotationQuote({ isOrphan, quote, settings = {} }) {
+function AnnotationQuote({ annotation, settings = {} }) {
   return (
     <section
-      className={classnames('annotation-quote', isOrphan && 'is-orphan')}
+      className={classnames(
+        'annotation-quote',
+        isOrphan(annotation) && 'is-orphan'
+      )}
     >
       <Excerpt
         collapsedHeight={35}
@@ -23,7 +28,7 @@ function AnnotationQuote({ isOrphan, quote, settings = {} }) {
           className="annotation-quote__quote"
           style={applyTheme(['selectionFontFamily'], settings)}
         >
-          {quote}
+          {quote(annotation)}
         </blockquote>
       </Excerpt>
     </section>
@@ -31,17 +36,7 @@ function AnnotationQuote({ isOrphan, quote, settings = {} }) {
 }
 
 AnnotationQuote.propTypes = {
-  /**
-   * If `true`, display an indicator that the annotated text was not found in
-   * the current version of the document.
-   */
-  isOrphan: propTypes.bool,
-
-  /**
-   * The text that the annotation refers to. This is rendered as plain text
-   * (ie. HTML tags are rendered literally).
-   */
-  quote: propTypes.string,
+  annotation: propTypes.object.isRequired,
 
   // Used for theming.
   settings: propTypes.object,

src/sidebar/components/annotation.js

@@ -377,13 +377,6 @@ function AnnotationController(
     });
   };
 
-  this.isOrphan = function() {
-    if (typeof self.annotation.$orphan === 'undefined') {
-      return self.annotation.$anchorTimeout;
-    }
-    return self.annotation.$orphan;
-  };
-
   this.user = function() {
     return self.annotation.user;
   };

src/sidebar/components/test/annotation-quote-test.js

@@ -6,14 +6,31 @@ const { $imports } = require('../annotation-quote');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('AnnotationQuote', () => {
+  let fakeAnnotation;
+  let fakeIsOrphan;
+  let fakeQuote;
+
   function createQuote(props) {
     return mount(
-      <AnnotationQuote quote="test quote" settings={{}} {...props} />
+      <AnnotationQuote annotation={fakeAnnotation} settings={{}} {...props} />
     );
   }
 
   beforeEach(() => {
+    fakeAnnotation = {
+      target: [],
+    };
+
+    fakeQuote = sinon.stub().returns('test quote');
+    fakeIsOrphan = sinon.stub();
+
     $imports.$mock(mockImportedComponents());
+    $imports.$mock({
+      '../util/annotation-metadata': {
+        quote: fakeQuote,
+        isOrphan: fakeIsOrphan,
+      },
+    });
   });
 
   afterEach(() => {

src/sidebar/components/test/annotation-test.js

@@ -137,8 +137,7 @@ describe('annotation', function() {
         })
         .component('annotationQuote', {
           bindings: {
-            isOrphan: '<',
-            quote: '<',
+            annotation: '<',
           },
         });
     });
@@ -682,33 +681,6 @@ describe('annotation', function() {
       });
     });
 
-    describe('#isOrphan', function() {
-      it('returns false if the annotation is not an orphan', function() {
-        const controller = createDirective().controller;
-        controller.annotation.$orphan = false;
-        assert.isFalse(controller.isOrphan());
-      });
-
-      it('returns true if the annotation is an orphan', function() {
-        const controller = createDirective().controller;
-        controller.annotation.$orphan = true;
-        assert.isTrue(controller.isOrphan());
-      });
-
-      it('returns true if the anchoring timeout expired', function() {
-        const controller = createDirective().controller;
-        controller.annotation.$anchorTimeout = true;
-        assert.isTrue(controller.isOrphan());
-      });
-
-      it('returns false if the anchoring timeout expired but anchoring did complete', function() {
-        const controller = createDirective().controller;
-        controller.annotation.$orphan = false;
-        controller.annotation.$anchorTimeout = true;
-        assert.isFalse(controller.isOrphan());
-      });
-    });
-
     describe('#shouldShowLicense', function() {
       [
         {

src/sidebar/templates/annotation.html

@@ -12,10 +12,7 @@
                          show-document-info="vm.showDocumentInfo">
   </annotation-header>
 
-  <annotation-quote
-    quote="vm.quote()"
-    is-orphan="vm.isOrphan()"
-    ng-if="vm.quote()">
+  <annotation-quote annotation="vm.annotation" ng-if="vm.quote()">
   </annotation-quote>
 
   <annotation-body