Merge pull request #189 from livingdocsIO/example-page-improvement

Example page improvement

Author: peyerluk

examples/events.js

@@ -1,5 +1,6 @@
 import $ from 'jquery'
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import { PropTypes } from 'prop-types'
 import ReactDOM from 'react-dom'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 
@@ -157,7 +158,6 @@ export default function (editable) {
     .on('paste', (elem, blocks, cursor) => {
       if (!isFromFirstExample(elem)) return
 
-      console.log(blocks)
       let text = blocks.join(' ')
       if (text.length > 40) text = text.substring(0, 38) + '...'
 
@@ -201,7 +201,7 @@ export default function (editable) {
 
     .on('switch', (elem, direction, cursor) => {
       if (!isFromFirstExample(elem)) return
-      const content = direction === 'after'
+      const content = direction === 'down'
         ? 'Set the focus to the following block'
         : 'Set the focus to the previous block'
 

examples/index.html

@@ -140,21 +140,22 @@ <h2 class="example-title">iFrame</h2>
         <h2 class="example-title">Setup</h2>
 
 <pre><code class="language-javascript">
+// create a new Editable object, and configure it as needed
 var editable = new Editable({
-  // here you can pass an iframe window if required
+  // here you can pass an iframe window if required (default: main window)
   window: window,
 
-  // activate the default behaviour for merge, split and insert
+  // activate the default behaviour for merge, split and insert (default: true)
   defaultBehavior: true,
 
-  // fire selection events on mouse move
+  // fire selection events on mouse move (default: false)
   mouseMoveSelectionChanges: false,
 
-  // control the 'spellcheck' attribute on editable elements
+  // control the 'spellcheck' attribute on editable elements (default: true)
   browserSpellcheck: true
 });
 
-// add and initialize a block element to be made editable
+// add and initialize a block element to make it editable
 editable.add(elem)
 </code></pre>
 
@@ -204,7 +205,7 @@ <h2 class="example-title">Events</h2>
           <h4>
             <span>focus</span> <span>blur</span>
           </h4>
-          <p>Fired when when editable block gets focus and after it is blurred. </p>
+          <p>Fired when when an editable block gets focus and after it is blurred. </p>
 
           <div class="code-example">
             <h3>Example:</h3>
@@ -253,7 +254,7 @@ <h3>Example:</h3>
           <h4>
             <span>cursor</span>
           </h4>
-          <p>Fired when the user selects some text inside an editable block.</p>
+          <p>Fired when the user moves the cursor within an editable block.</p>
 
           <div class="code-example">
           <h3>Example:</h3>
@@ -275,7 +276,7 @@ <h3>Example:</h3>
           <h4>
             <span>change</span>
           </h4>
-          <p>Fired when the user selects some text inside an editable block.</p>
+          <p>Fired when the user changes the content of an editable block.</p>
 
           <div class="code-example">
             <h3>Example:</h3>
@@ -336,7 +337,7 @@ <h3>Example:</h3>
           <h4>
             <span>insert</span>
           </h4>
-          <p>Fired when the user presses enter (&#x23ce;) at the beginning or end of an editable (For example you can insert a new paragraph after the element if this happens).</p>
+          <p>Fired when the user presses enter (&#x23ce;) at the beginning or end of an editable (for example you can insert a new paragraph after the element if this happens).</p>
 
           <p class="edit-example">
             The end<span class="cursor">&nbsp;</span>
@@ -412,15 +413,15 @@ <h4>
             <span>switch</span>
           </h4>
 
-          <p>Fired when the user pressed an arrow key at the top or bottom so that you may want to set the cursor into the preceding or following editale element.</p>
+          <p>Fired when the user presses an arrow key at the top or bottom so that you may want to set the cursor into the preceding or following editable element.</p>
 
           <div class="code-example">
             <h3>Example:</h3>
 <pre><code class="language-javascript">
 editable.on('switch', (elem, direction, cursor) => {
-  if (direction === 'after') {
+  if (direction === 'down') {
     // your code...
-  } else if (direction === 'before') {
+  } else if (direction === 'up') {
     // your code...
   }
 })