Venseer · backstroke-bot · Jul 30, 2018 · Jul 30, 2018 · Jul 30, 2018 · Dec 5, 2018
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
-<img src="./logo.png" width="256" alt="Logo">
+#### [v2 working branch](https://github.com/jaredreich/pell/tree/v2) and [v2 project board](https://github.com/jaredreich/pell/projects/1)
+
+---
+
+<img src="./images/logo.png" width="128" alt="Logo">
 
 [![npm](https://img.shields.io/npm/v/pell.svg)](https://www.npmjs.com/package/pell)
 [![cdnjs](https://img.shields.io/cdnjs/v/pell.svg)](https://cdnjs.com/libraries/pell)
 
 > pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies
 
-Live demo: [https://jaredreich.com/pell](https://jaredreich.com/pell)
-
-[![Live demo](/demo.gif?raw=true "Demo")](https://jaredreich.com/pell)
+![Demo](/demo.gif?raw=true "Demo")
 
 ## Comparisons
 
@@ -184,10 +186,12 @@ pell.exec(command<string>, value<string>)
 - link
 - image
 
-#### Example
+## Examples
+
+#### General
 
 ```html
-<div id="pell"></div>
+<div id="editor" class="pell"></div>
 <div>
   HTML output:
   <div id="html-output" style="white-space:pre-wrap;"></div>
@@ -198,7 +202,7 @@ pell.exec(command<string>, value<string>)
 import { exec, init } from 'pell'
 
 const editor = init({
-  element: document.getElementById('pell'),
+  element: document.getElementById('editor'),
   onChange: html => {
     document.getElementById('html-output').textContent = html
   },
@@ -212,10 +216,10 @@ const editor = init({
       result: () => exec('italic')
     },
     {
-      name: 'custom',
-      icon: '<b><u><i>C</i></u></b>',
-      title: 'Custom Action',
-      result: () => console.log('YOLO')
+      name: 'backColor',
+      icon: '<div style="background-color:pink;">A</div>',
+      title: 'Highlight Color',
+      result: () => exec('backColor', 'pink')
     },
     {
       name: 'image',
@@ -248,7 +252,7 @@ editor.content.innerHTML = '<b><u><i>Initial content!</i></u></b>'
 #### Example (Markdown)
 
 ```html
-<div id="pell"></div>
+<div id="editor" class="pell"></div>
 <div>
   Markdown output:
   <div id="markdown-output" style="white-space:pre-wrap;"></div>
@@ -262,14 +266,19 @@ import Turndown from 'turndown'
 const { turndown } = new Turndown({ headingStyle: 'atx' })
 
 init({
-  element: document.getElementById('pell'),
+  element: document.getElementById('editor'),
   actions: ['bold', 'italic', 'heading1', 'heading2', 'olist', 'ulist'],
   onChange: html => {
     document.getElementById('markdown-output').innerHTML = turndown(html)
   }
 })
 ```
 
+#### Frameworks
+
+- [React](/examples/react.md)
+- [Vue](/examples/vue.md)
+
 ## Custom Styles
 
 #### SCSS
@@ -294,3 +303,9 @@ $pell-content-height: 400px;
 ## License
 
 MIT
+
+## Credits
+
+BrowserStack for cross browser testing:
+
+<a href="https://www.browserstack.com" target="_blank" rel="noopener noreferrer"><img width="128" src="./images/browserstack.png" alt="BrowserStack logo"></a>
diff --git a/demo.html b/demo.html
@@ -31,7 +31,7 @@
 
     <div class="content">
       <h1>pell</h1>
-      <div id="pell" class="pell"></div>
+      <div id="editor" class="pell"></div>
       <div style="margin-top:20px;">
         <h3>Text output:</h3>
         <div id="text-output"></div>
@@ -45,9 +45,8 @@ <h3>HTML output:</h3>
     <script src="dist/pell.js"></script>
     <script>
       var editor = window.pell.init({
-        element: document.getElementById('pell'),
+        element: document.getElementById('editor'),
         defaultParagraphSeparator: 'p',
-        styleWithCSS: false,
         onChange: function (html) {
           document.getElementById('text-output').innerHTML = html
           document.getElementById('html-output').textContent = html

diff --git a/dist/pell.js b/dist/pell.js
@@ -177,9 +177,7 @@ var init = function init(settings) {
     settings.onChange(content.innerHTML);
   };
   content.onkeydown = function (event) {
-    if (event.key === 'Tab') {
-      event.preventDefault();
-    } else if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
+    if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
       setTimeout(function () {
         return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
       }, 0);

diff --git a/dist/pell.min.js b/dist/pell.min.js
diff --git a/examples/react.md b/examples/react.md
@@ -0,0 +1,38 @@
+```js
+// App.js
+
+import React, { Component } from 'react';
+import { init } from 'pell';
+
+import 'pell/dist/pell.css'
+
+class App extends Component {
+  editor = null
+
+  constructor (props) {
+    super(props)
+    this.state = { html: null }
+  }
+
+  componentDidMount () {
+    this.editor = init({
+      element: document.getElementById('editor'),
+      onChange: html => this.setState({ html }),
+      actions: ['bold', 'underline', 'italic'],
+    })
+  }
+
+  render() {
+    return (
+      <div className="App">
+        <h3>Editor:</h3>
+        <div id="editor" className="pell" />
+        <h3>HTML Output:</h3>
+        <div id="html-output">{this.state.html}</div>
+      </div>
+    );
+  }
+}
+
+export default App;
+```
diff --git a/examples/vue.md b/examples/vue.md
@@ -0,0 +1,69 @@
+```vue
+<template>
+  <div>
+    <h6>Editor:</h6>
+    <div id="pell" class="pell" />
+    <h6>HTML Output:</h6>
+    <pre id="pell-html-output"></pre>
+  </div>
+</template>
+
+<script>
+import pell from 'pell'
+
+export default {
+  methods: {
+    ensureHTTP: str => /^https?:\/\//.test(str) && str || `http://${str}`
+  },
+  mounted () {
+    pell.init({
+      element: document.getElementById('pell'),
+      onChange: html => {
+        window.document.getElementById('pell-html-output').textContent = html
+      },
+      actions: [
+        'bold',
+        'italic',
+        'underline',
+        'strikethrough',
+        'heading1',
+        'heading2',
+        'paragraph',
+        'quote',
+        'olist',
+        'ulist',
+        'code',
+        'line',
+        {
+          name: 'image',
+          result: () => {
+            const url = window.prompt('Enter the image URL')
+            if (url) pell.exec('insertImage', this.ensureHTTP(url))
+          }
+        },
+        {
+          name: 'link',
+          result: () => {
+            const url = window.prompt('Enter the link URL')
+            if (url) pell.exec('createLink', this.ensureHTTP(url))
+          }
+        }
+      ]
+    })
+  }
+}
+</script>
+
+<style>
+.pell {
+  border: 2px solid #000;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+#pell-html-output {
+  margin: 0;
+  white-space: pre-wrap;
+}
+</style>
+```
diff --git a/images/browserstack.png b/images/browserstack.png
diff --git a/logo.png → images/logo.png b/logo.png → images/logo.png