Merge pull request #362 from hypothesis/render-censored-text

Render "censored text" for hidden annotations

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

@@ -1074,15 +1074,33 @@ describe('annotation', function() {
       assert.equal(el[0].querySelector('blockquote').textContent, '<<-&->>');
     });
 
-    it('renders hidden annotations with a custom text class', function () {
-      var ann = fixtures.moderatedAnnotation({ hidden: true });
-      var el = createDirective(ann).element;
+    unroll('renders hidden annotations with a custom text class (#context)', function (testCase) {
+      var el = createDirective(testCase.ann).element;
       assert.match(el.find('markdown').controller('markdown'), sinon.match({
-        customTextClass: {
-          'annotation-body is-hidden': true,
-        },
+        customTextClass: testCase.textClass,
       }));
-    });
+    }, [{
+      context: 'for moderators',
+      ann: Object.assign(fixtures.moderatedAnnotation({ hidden: true }), {
+        // Content still present.
+        text: 'Some offensive content',
+      }),
+      textClass: {
+        'annotation-body is-hidden': true,
+        'has-content': true,
+      },
+    },{
+      context: 'for non-moderators',
+      ann: Object.assign(fixtures.moderatedAnnotation({ hidden: true }), {
+        // Content filtered out by service.
+        tags: [],
+        text: '',
+      }),
+      textClass: {
+        'annotation-body is-hidden': true,
+        'has-content': false,
+      },
+    }]);
 
     it('flags the annotation when the user clicks the "Flag" button', function () {
       fakeAnnotationMapper.flagAnnotation.returns(Promise.resolve());

src/sidebar/templates/annotation.html

@@ -39,7 +39,8 @@
       overflow-hysteresis="20"
       content-data="vm.state().text">
       <markdown text="vm.state().text"
-                custom-text-class="{'annotation-body is-hidden':vm.isHiddenByModerator()}"
+                custom-text-class="{'annotation-body is-hidden':vm.isHiddenByModerator(),
+                                    'has-content':vm.hasContent()}"
                 on-edit-text="vm.setText(text)"
                 read-only="!vm.editing()">
       </markdown>

src/styles/annotation.scss

@@ -102,11 +102,26 @@
   margin-left: 0px;
 }
 
-.annotation-body.is-hidden {
+// Hidden annotations displayed to moderators, where the content is still
+// present.
+.annotation-body.is-hidden.has-content {
   text-decoration: line-through;
   filter: grayscale(100%) contrast(65%);
 }
 
+// Hidden annotations displayed to non-moderators, where the content has been
+// filtered out by the service.
+.annotation-body.is-hidden:not(.has-content) {
+  // Create a column of horizontal stripes, giving the impression of text
+  // underneath that has been censored.
+  display: block;
+  height: 60px;
+  background: repeating-linear-gradient(
+    to bottom,
+    $grey-2, $grey-2 15px, white 15px, white 20px
+  );
+}
+
 // the footer at the bottom of an annotation displaying
 // the annotation actions and reply counts
 .annotation-footer {