Stylize command panel preview

spec/extensions/command-panel-spec.coffee

@@ -120,7 +120,7 @@ describe "CommandPanel", ->
         expect(buffer.lineForRow(1)).toMatch /var torta/
 
     describe "when the command returns operations to be previewed", ->
-      fit "displays a preview of the operations above the mini-editor", ->
+      it "displays a preview of the operations above the mini-editor", ->
         rootView.attachToDom()
         editor.remove()
 
@@ -135,7 +135,8 @@ describe "CommandPanel", ->
           expect(commandPanel.previewList).toBeVisible()
           previewItem = commandPanel.previewList.find("li:contains(dir/a)").view()
           expect(previewItem.path.text()).toBe "dir/a"
-          expect(previewItem.preview.text()).toMatch /a+/
+          expect(previewItem.preview.text()).toBe "aaa bbb"
+          expect(previewItem.preview.find(".match").text()).toBe "aaa"
 
     describe "if the command is malformed", ->
       it "adds and removes an error class to the command panel and does not close it", ->

src/extensions/command-panel/operation.coffee

@@ -18,7 +18,12 @@ class Operation
 
   preview: ->
     range = @anchorRange.getBufferRange()
-    @buffer.getTextInRange(range)
+    line = @buffer.lineForRow(range.start.row)
+    prefix = line[0...range.start.column]
+    match = line[range.start.column...range.end.column]
+    suffix = line[range.end.column..]
+
+    {prefix, suffix, match}
 
   destroy: ->
     @buffer.release()

src/extensions/command-panel/preview-item.coffee

@@ -3,7 +3,13 @@
 module.exports =
 class PreviewItem extends View
   @content: (operation) ->
+    {prefix, suffix, match} = operation.preview()
+
     @li =>
       @span operation.getPath(), outlet: "path", class: "path"
-      @span operation.preview(), outlet: "preview", class: "preview"
+      @span outlet: "preview", class: "preview", =>
+        @span prefix
+        @span match, class: 'match'
+        @span suffix
+
 

static/command-panel.css

@@ -9,20 +9,22 @@
 .command-panel .preview-list {
   max-height: 300px;
   overflow: auto;
+  padding-bottom: 3px;
 }
 
 .command-panel .preview-list .path{
-  padding-left: 1em;
-  color: red;
+  padding-left: 3px;
+  color: #00ffff;
 }
 
 .command-panel .preview-list .preview {
   padding-left: 1em;
-  color: green;
+  color: #f6f3e8;
 }
 
 .command-panel .preview-list .preview .match{
-  font-weight: bold;
+  background-color: #8E8A8A;
+  padding: 1px;
 }
 
 .command-panel .prompt-and-editor {