Build for 1.0.0 release.

Author: jaredreich

README.md

@@ -13,7 +13,7 @@ Live demo: [https://jaredreich.com/pell](https://jaredreich.com/pell)
 
 | library       | size (min+gzip) | size (min) | jquery | bootstrap | link |
 |---------------|-----------------|------------|--------|-----------|------|
-| pell          | 1.11kB          | 2.85kB     |        |           | https://github.com/jaredreich/pell |
+| pell          | 1.29kB          | 3.48kB     |        |           | https://github.com/jaredreich/pell |
 | squire        | 16kB            | 49kB       |        |           | https://github.com/neilj/Squire |
 | medium-editor | 27kB            | 105kB      |        |           | https://github.com/yabwe/medium-editor |
 | quill         | 43kB            | 205kB      |        |           | https://github.com/quilljs/quill |
@@ -29,7 +29,7 @@ Live demo: [https://jaredreich.com/pell](https://jaredreich.com/pell)
 * Pure JavaScript, no dependencies, written in ES6
 * Easily customizable with the sass file (pell.scss) or overwrite the CSS
 
-Current actions:
+Included actions:
 - Bold
 - Italic
 - Underline
@@ -45,7 +45,7 @@ Current actions:
 - Link
 - Image
 
-Other possible future actions:
+Other available actions (listed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand):
 - Justify Center
 - Justify Full
 - Justify Left
@@ -60,6 +60,8 @@ Other possible future actions:
 - Undo
 - Redo
 
+Or create any custom action!
+
 ## Browser Support
 
 * IE 9+
@@ -116,7 +118,7 @@ window.pell
 
 ```js
 // Initialize pell on an HTMLElement
-pell.init({
+init({
   // <HTMLElement>, required
   element: document.getElementById('some-id'),
 
@@ -193,7 +195,7 @@ pell.exec(command<string>, value<string>)
 ```
 
 ```js
-const editor = pell.init({
+const editor = init({
   element: document.getElementById('pell'),
   onChange: html => {
     document.getElementById('text-output').innerHTML = html
@@ -206,7 +208,7 @@ const editor = pell.init({
     'underline',
     {
       name: 'italic',
-      result: () => window.pell.exec('italic')
+      result: () => exec('italic')
     },
     {
       name: 'custom',
@@ -218,14 +220,14 @@ const editor = pell.init({
       name: 'image',
       result: () => {
         const url = window.prompt('Enter the image URL')
-        if (url) window.pell.exec('insertImage', ensureHTTP(url))
+        if (url) exec('insertImage', ensureHTTP(url))
       }
     },
     {
       name: 'link',
       result: () => {
         const url = window.prompt('Enter the link URL')
-        if (url) window.pell.exec('createLink', ensureHTTP(url))
+        if (url) exec('createLink', ensureHTTP(url))
       }
     }
   ],

demo.gif

@@ -1,28 +1,26 @@
 .pell {
-  border-radius: 5px;
-  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  box-sizing: border-box;
-  width: 100%; }
+  border: 1px solid rgba(10, 10, 10, 0.1);
+  box-sizing: border-box; }
 
 .pell-content {
   box-sizing: border-box;
   height: 300px;
   outline: 0;
   overflow-y: auto;
-  padding: 10px;
-  width: 100%; }
+  padding: 10px; }
 
 .pell-actionbar {
   background-color: #FFF;
-  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  width: 100%; }
+  border-bottom: 1px solid rgba(10, 10, 10, 0.1); }
 
 .pell-button {
   background-color: transparent;
   border: none;
   cursor: pointer;
   height: 30px;
   outline: 0;
-  width: 30px; }
+  width: 30px;
+  vertical-align: bottom; }
+
+.pell-button-selected {
+  background-color: #F0F0F0; }

dist/pell.css

@@ -10,27 +10,39 @@ var actions = {
   bold: {
     icon: '<b>B</b>',
     title: 'Bold',
+    state: function state() {
+      return queryCommandState('bold');
+    },
     result: function result() {
       return exec('bold');
     }
   },
   italic: {
     icon: '<i>I</i>',
     title: 'Italic',
+    state: function state() {
+      return queryCommandState('italic');
+    },
     result: function result() {
       return exec('italic');
     }
   },
   underline: {
     icon: '<u>U</u>',
     title: 'Underline',
+    state: function state() {
+      return queryCommandState('underline');
+    },
     result: function result() {
       return exec('underline');
     }
   },
   strikethrough: {
     icon: '<strike>S</strike>',
     title: 'Strike-through',
+    state: function state() {
+      return queryCommandState('strikeThrough');
+    },
     result: function result() {
       return exec('strikeThrough');
     }
@@ -112,19 +124,24 @@ var actions = {
 var classes = {
   actionbar: 'pell-actionbar',
   button: 'pell-button',
-  content: 'pell-content'
+  content: 'pell-content',
+  selected: 'pell-button-selected'
 };
 
-var exec = function exec(command) {
-  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-
-  document.execCommand(command, false, value);
+var queryCommandState = function queryCommandState(command) {
+  return document.queryCommandState(command);
 };
 
 var preventTab = function preventTab(event) {
   if (event.which === 9) event.preventDefault();
 };
 
+var exec = function exec(command) {
+  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+  document.execCommand(command, false, value);
+};
+
 var init = function init(settings) {
   settings.actions = settings.actions ? settings.actions.map(function (action) {
     if (typeof action === 'string') return actions[action];else if (actions[action.name]) return _extends({}, actions[action.name], action);
@@ -153,10 +170,24 @@ var init = function init(settings) {
     button.className = settings.classes.button;
     button.innerHTML = action.icon;
     button.title = action.title;
-    button.onclick = action.result;
+    button.setAttribute('type', 'button');
+    button.onclick = function () {
+      return action.result() || settings.element.content.focus();
+    };
+
+    if (action.state) {
+      var handler = function handler() {
+        return 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);
   });
 
+  if (settings.defaultParagraphSeparator) exec('defaultParagraphSeparator', settings.defaultParagraphSeparator);
   if (settings.styleWithCSS) exec('styleWithCSS');
 
   return settings.element;

dist/pell.js

@@ -2,7 +2,7 @@
   "name": "pell",
   "description": "pell - the simplest and smallest WYSIWYG text editor for web, with no dependencies",
   "author": "Jared Reich",
-  "version": "0.7.0",
+  "version": "1.0.0",
   "main": "./dist/pell.min.js",
   "scripts": {
     "dev": "gulp",