Visual editor: marking nodes as selected on keyboard events

diff --git a/modules/visualEditor.js b/modules/visualEditor.js
index ce62c6a..38f3302 100644 (file)
--- a/modules/visualEditor.js
+++ b/modules/visualEditor.js
@@ -4,20 +4,29 @@ rng.modules.visualEditor = function(sandbox) {
     var view = {\r
         node: $(sandbox.getTemplate('main')()),\r
         setup: function() {\r
     var view = {\r
         node: $(sandbox.getTemplate('main')()),\r
         setup: function() {\r

-            var node = this.node;\r
-            node.find('#rng-visualEditor-content').on('keyup', function() {\r
+            var view = this;\r
+
+            this.node.find('#rng-visualEditor-content').on('keyup', function() {\r

                 isDirty = true;\r
             });\r
             \r
                 isDirty = true;\r
             });\r
             \r

-            node.find('#rng-visualEditor-meta').on('keyup', function() {\r
+            this.node.find('#rng-visualEditor-meta').on('keyup', function() {\r

                 isDirty = true;\r
             });\r
 
             this.node.on('mouseover', '.rng', function(e) { $(e.target).addClass('rng-hover')});\r
             this.node.on('mouseout', '.rng', function(e) { $(e.target).removeClass('rng-hover')});\r
             this.node.on('click', '.rng', function(e) {\r
                 isDirty = true;\r
             });\r
 
             this.node.on('mouseover', '.rng', function(e) { $(e.target).addClass('rng-hover')});\r
             this.node.on('mouseout', '.rng', function(e) { $(e.target).removeClass('rng-hover')});\r
             this.node.on('click', '.rng', function(e) {\r

-                node.find('.rng').removeClass('rng-current');\r
-                $(e.target).addClass('rng-current');\r
+                view._markSelected($(e.target));\r
+            });\r
+\r
+            this.node.on('keyup', function(e) {\r
+                var anchor = $(window.getSelection().anchorNode);\r
+                if(anchor[0].nodeType === Node.TEXT_NODE)\r
+                    anchor = anchor.parent();\r
+                if(!anchor.hasClass('rng'))\r
+                    return;\r
+                view._markSelected(anchor);\r

             });
         },\r
         getMetaData: function() {\r
             });
         },\r
         getMetaData: function() {\r


@@ -43,7 +52,11 @@ rng.modules.visualEditor = function(sandbox) {
         },\r
         getBody: function() {\r
             return this.node.find('#rng-visualEditor-content').html();\r
         },\r
         getBody: function() {\r
             return this.node.find('#rng-visualEditor-content').html();\r

-        }   \r
+        }, \r
+        _markSelected: function(node) {\r
+            this.node.find('.rng').removeClass('rng-current');\r
+            node.addClass('rng-current');\r
+        }\r

     };\r
     view.setup();\r
     \r
     };\r
     view.setup();\r
     \r