Indicate text formatting on highlight.

This closes #27, closes #16.

src/pell.js

@@ -2,21 +2,25 @@ const actions = {
   bold: {
     icon: '<b>B</b>',
     title: 'Bold',
+    state: () => queryCommandState('bold'),
     result: () => exec('bold')
   },
   italic: {
     icon: '<i>I</i>',
     title: 'Italic',
+    state: () => queryCommandState('italic'),
     result: () => exec('italic')
   },
   underline: {
     icon: '<u>U</u>',
     title: 'Underline',
+    state: () => queryCommandState('underline'),
     result: () => exec('underline')
   },
   strikethrough: {
     icon: '<strike>S</strike>',
     title: 'Strike-through',
+    state: () => queryCommandState('strikeThrough'),
     result: () => exec('strikeThrough')
   },
   heading1: {
@@ -80,17 +84,20 @@ const actions = {
 const classes = {
   actionbar: 'pell-actionbar',
   button: 'pell-button',
-  content: 'pell-content'
+  content: 'pell-content',
+  selected: 'pell-button-selected'
 }
 
-export const exec = (command, value = null) => {
-  document.execCommand(command, false, value)
-}
+const queryCommandState = command => document.queryCommandState(command)
 
 const preventTab = event => {
   if (event.which === 9) event.preventDefault()
 }
 
+export const exec = (command, value = null) => {
+  document.execCommand(command, false, value)
+}
+
 export const init = settings => {
   settings.actions = settings.actions
     ? settings.actions.map(action => {
@@ -120,6 +127,14 @@ export const init = settings => {
     button.title = action.title
     button.setAttribute('type', 'button')
     button.onclick = () => action.result() || settings.element.content.focus()
+
+    if (action.state) {
+      const handler = () => button.classList[action.state() ? 'add' : 'remove'](settings.classes.selected)
+      settings.element.content.addEventListener('keyup', handler)
+      settings.element.content.addEventListener('mouseup', handler)
+      button.addEventListener('click', handler)
+    }
+
     actionbar.appendChild(button)
   })
 

src/pell.scss

@@ -5,6 +5,7 @@ $pell-border-style: solid !default;
 $pell-border-width: 1px !default;
 $pell-box-shadow: 0 2px 3px $pell-border-color, 0 0 0 1px $pell-border-color !default;
 $pell-button-height: 30px !default;
+$pell-button-selected-color: #F0F0F0 !default;
 $pell-button-width: 30px !default;
 $pell-content-height: 300px !default;
 $pell-content-padding: 10px !default;
@@ -37,4 +38,9 @@ $pell-content-padding: 10px !default;
   height: $pell-button-height;
   outline: 0;
   width: $pell-button-width;
+  vertical-align: bottom;
+}
+
+.pell-button-selected {
+  background-color: $pell-button-selected-color;
 }