Visual link between comments and commented content

customize.dist/src/less2/include/comments.less

@@ -45,12 +45,13 @@
             cursor: pointer;
             .tools_unselectable();
         }
-        &:not(:last-child) {
-            margin-bottom: 10px;
-        }
+        //&:not(:last-child) {
+        //    margin-bottom: 10px;
+        //}
         .cp-comment-form {
             margin-top: 5px;
         }
+        padding: 5px;
     }
     .cp-comment {
         &:not(:first-child) {
@@ -77,7 +78,8 @@
     .cp-comment-content {
         background-color: white;
         padding: 10px 5px 5px;
-        display: pre-wrap;
+        white-space: pre-wrap;
+        word-break: break-all;
     }
     .cp-comment-actions {
         display: none;
@@ -88,6 +90,7 @@
         }
     }
     .cp-comment-active {
+        background-color: rgba(0,0,0,0.2);
         .cp-comment-actions {
             display: block;
         }

www/pad/comment.js

@@ -1,21 +1,23 @@
 (function () {
+    var CKEDITOR = window.CKEDITOR;
 
     function isUnstylable (el) {
-        console.log(el);
-        console.log(el.getAttribute('contentEditable'));
-        console.log(el.getAttribute('data-nostyle'));
-        var b = el.getAttribute( 'contentEditable' ) == 'false' ||
+        var b = el.getAttribute( 'contentEditable' ) === 'false' ||
                el.getAttribute( 'data-nostyle' );
-        console.log(b);
         return b;
     }
 
+    var color1 = 'rgba(252, 165, 3, 0.8);';
+    var color2 = 'rgba(252, 231, 3, 0.8);';
+
     CKEDITOR.plugins.add('comments', {
         //requires: 'dialog,widget',
         //icons: 'image',
         //hidpi: true,
         onLoad: function () {
-            CKEDITOR.addCss('comment { background-color: rgba(252, 165, 3, 0.8); }' +
+            CKEDITOR.addCss('comment { background-color: '+color1+' }' +
+                '@keyframes color { 0% { background-color: '+color2+' } 50% { background-color: '+color1+' } 100% { background-color: '+color2+' } }' +
+                'comment:focus { animation-name: color; animation-duration: 1s; animation-iteration-count: 2; background-color: '+color2+' outline: none;}' +
                 'comment * { background-color: transparent !important; }');
         },
         init: function (editor) {
@@ -28,7 +30,8 @@
             var styleDef = {
                 element: 'comment',
                 attributes: {
-                    'data-uid': '#(uid)'
+                    'data-uid': '#(uid)',
+                    'tabindex': '1'
                 },
                 overrides: [ {
                     element: 'comment'
@@ -71,7 +74,7 @@
             });
 
             // Uncomment provided element
-            editor.plugins.comments.uncomment = function (id) {
+            editor.plugins.comments.uncomment = function (id, els) {
                 if (editor.readOnly) { return; }
                 editor.fire('saveSnapshot');
 
@@ -79,14 +82,20 @@
                 var style = new CKEDITOR.style({
                     element: 'comment',
                     attributes: {
-                        'data-uid': id
+                        'data-uid': id,
+                        'tabindex': '1'
                     },
                 });
-                // Create range for the entire document
-                var range = editor.createRange();
-                range.selectNodeContents( editor.document.getBody() );
-                // Remove style for the document
-                style.removeFromRange(range, editor);
+                style.alwaysRemoveElement = true;
+                els.forEach(function (el) {
+                    // Create range for the entire document
+                    var node = new CKEDITOR.dom.node(el);
+                    var range = editor.createRange();
+                    range.setStart(node, 0);
+                    range.setEnd(node, Number.MAX_SAFE_INTEGER);
+                    // Remove style for the document
+                    style.removeFromRange(range, editor);
+                });
 
                 setTimeout( function() {
                     editor.fire('saveSnapshot');

www/pad/comments.js

@@ -1,10 +1,11 @@
 define([
+    'jquery',
     'json.sortify',
     '/common/common-util.js',
     '/common/hyperscript.js',
     '/common/common-interface.js',
     '/customize/messages.js'
-], function (Sortify, Util, h, UI, Messages) {
+], function ($, Sortify, Util, h, UI, Messages) {
     var Comments = {};
 
 /*
@@ -262,20 +263,27 @@ define([
             }, function () {
                 // Delete the comment
                 delete Env.comments.data[key];
-                Env.editor.plugins.comments.uncomment(key);
+                var els = Env.$inner.find('comment[data-uid="'+key+'"]').toArray();
+                Env.editor.plugins.comments.uncomment(key, els);
 
                 // Send to chainpad
                 updateMetadata(Env);
                 Env.framework.localChange();
             });
 
+            var focusContent = function () {
+                Env.$inner.find('comment[data-uid="'+key+'"]').focus();
+            };
+
             $div.click(function () {
                 if ($div.hasClass('cp-comment-active')) { return; }
                 Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
                 $div.addClass('cp-comment-active');
+                div.scrollIntoView();
                 $actions.css('display', '');
                 Env.$container.find('.cp-comment-form').remove();
-                // XXX highlight (and scroll to) the comment in the doc?
+
+                focusContent();
             });
 
             if ($oldInput && $oldInput.attr('data-uid') === key) {
@@ -283,6 +291,7 @@ define([
                 $actions.hide();
                 $div.append($oldInput);
                 $oldInput.find('textarea').focus();
+                focusContent();
             }
         });
 
@@ -338,7 +347,7 @@ define([
             }
             // Comment not in the metadata: uncomment (probably an undo)
             if (comments.indexOf(id) === -1) {
-                Env.editor.plugins.comments.uncomment(id);
+                Env.editor.plugins.comments.uncomment(id, [el]);
                 changed = true;
                 return;
             }
@@ -459,6 +468,12 @@ sel.forEach(function (el) {
             }
             Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
         });
+        Env.$inner.on('click', 'comment', function (e) {
+            var $comment = $(e.target);
+            var uid = $comment.attr('data-uid');
+            if (!uid) { return; }
+            Env.$container.find('.cp-comment-container[data-uid="'+uid+'"]').click();
+        });
 
         var call = function (f) {
             return function () {