Custom actions, export execute method

closes #11, closes #25, closes #41
jaredreich · Jul 15, 2017 · 6d57bd4 · 6d57bd4
1 parent 88159c0
commit 6d57bd4
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -6,13 +6,13 @@
 
 Live demo: [https://jaredreich.com/pell](https://jaredreich.com/pell)
 
-![Alt text](/demo.gif?raw=true "Demo")
+[![Live demo](/demo.gif?raw=true "Demo")](https://jaredreich.com/pell)
 
 ## Comparisons
 
 | library       | size (min+gzip) | size (min) | jquery | bootstrap |
 |---------------|-----------------|------------|--------|-----------|
-| pell          | 1.14kB          | 2.89kB     |        |           |
+| pell          | 1.11kB          | 2.86kB     |        |           |
 | medium-editor | 27kB            | 105kB      |        |           |
 | quill         | 43kB            | 205kB      |        |           |
 | ckeditor      | 163kB           | 551kB      |        |           |
@@ -108,6 +108,47 @@ pell
 window.pell
 ```
 
+```js
+// Initialize pell on an HTMLElement
+pell.init({
+  // element<HTMLElement> (required)
+  element: document.getElementById('some-id'),
+
+  // onChange<Function> (required)
+  // Use the output html, triggered by element's `oninput` event
+  onChange: html => console.log(html),
+
+  // styleWithCSS<boolean> (optional)
+  // Outputs <span style="font-weight: bold;"></span> instead of <b></b>
+  // default: false
+  styleWithCSS: false,
+
+  // actions<Array[string | Object]> (optional)
+  // Specify the actions you specifically want (in order), and edit them
+  actions: [
+    {
+      name: 'bold',
+      icon: 'BB',
+      title: 'BBold',
+      result: () => pell.execute('bold')
+    }
+  ],
+
+  // classes<Array[string]> (optional)
+  // Choose your custom class names
+  classes: {
+    actionbar: 'pell-actionbar',
+    button: 'pell-button',
+    content: 'pell-content'
+  }
+})
+
+// Execute a document command, see reference:
+// https://developer.mozilla.org/en/docs/Web/API/Document/execCommand
+// this is just `document.execCommand(command, false, value)`
+pell.execute(command<string>, value<string>)
+```
+
 #### Example:
 
 ```html
@@ -122,38 +163,48 @@ window.pell
 
 ```js
 const editor = pell.init({
-  // element: HTMLElement (required)
   element: document.getElementById('pell'),
-
-  // onChange: Function (required)
-  // Use the output html, triggered by element's `oninput` event
   onChange: html => {
     document.getElementById('text-output').innerHTML = html
     document.getElementById('html-output').textContent = html
   },
-
-  // styleWithCSS: boolean (optional)
-  // Outputs <span style="font-weight: bold;"></span> instead of <b></b>
   styleWithCSS: true,
-
-  // actions: Array<string | Object> (optional)
-  // Pluck the actions you specifically want, and edit them
   actions: [
     'bold',
-    { name: 'italic', icon: '&#9786;', title: 'Zitalic' },
-    'underline'
+    'underline',
+    {
+      name: 'italic',
+      result: () => window.pell.execute('italic')
+    },
+    {
+      name: 'zitalic',
+      icon: '<u>Z</u>',
+      title: 'Zitalic',
+      result: () => window.pell.execute('italic')
+    },
+    {
+      name: 'image',
+      result: () => {
+        const url = window.prompt('Enter the image URL')
+        if (url) window.pell.execute('insertImage', ensureHTTP(url))
+      }
+    },
+    {
+      name: 'link',
+      result: () => {
+        const url = window.prompt('Enter the link URL')
+        if (url) window.pell.execute('createLink', ensureHTTP(url))
+      }
+    }
   ],
-
-  // classes: Array<string> (optional)
-  // Choose your custom class names
   classes: {
-    actionbar: 'pell-actionbar',
-    button: 'pell-button',
-    content: 'pell-content'
+    actionbar: 'pell-actionbar-custom-name',
+    button: 'pell-button-custom-name',
+    content: 'pell-content-custom-name'
   }
 })
 
-// editor.content: HTMLElement
+// editor.content<HTMLElement>
 // To change the editor's content:
 editor.content.innerHTML = '<b><u><i>Initial content!</i></u></b>'
 ```

diff --git a/demo.gif b/demo.gif
diff --git a/demo.html b/demo.html
@@ -44,9 +44,38 @@ <h3>HTML output:</h3>
 
     <script src="dist/pell.js"></script>
     <script>
+      function ensureHTTP (str) {
+        return /^https?:\/\//.test(str) && str || `http://${str}`
+      }
+
       var editor = window.pell.init({
         element: document.getElementById('pell'),
         styleWithCSS: false,
+        actions: [
+          'bold',
+          'underline',
+          'italic',
+          {
+            name: 'zitalic',
+            icon: 'Z',
+            title: 'Zitalic',
+            result: () => window.pell.execute('italic')
+          },
+          {
+            name: 'image',
+            result: () => {
+              const url = window.prompt('Enter the image URL')
+              if (url) window.pell.execute('insertImage', ensureHTTP(url))
+            }
+          },
+          {
+            name: 'link',
+            result: () => {
+              const url = window.prompt('Enter the link URL')
+              if (url) window.pell.execute('createLink', ensureHTTP(url))
+            }
+          }
+        ],
         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
@@ -6,16 +6,6 @@
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var link = function link() {
-  var url = window.prompt('Enter the link URL');
-  if (url) execute('createLink', ensureHTTP(url));
-};
-
-var image = function image() {
-  var url = window.prompt('Enter the image URL');
-  if (url) execute('insertImage', ensureHTTP(url));
-};
-
 var actions = {
   bold: {
     icon: '<b>B</b>',
@@ -104,12 +94,18 @@ var actions = {
   link: {
     icon: '&#128279;',
     title: 'Link',
-    result: link
+    result: function result() {
+      var url = window.prompt('Enter the link URL');
+      if (url) execute('createLink', url);
+    }
   },
   image: {
     icon: '&#128247;',
     title: 'Image',
-    result: image
+    result: function result() {
+      var url = window.prompt('Enter the image URL');
+      if (url) execute('insertImage', url);
+    }
   }
 };
 
@@ -125,19 +121,14 @@ var execute = function execute(command) {
   document.execCommand(command, false, value);
 };
 
-var ensureHTTP = function ensureHTTP(str) {
-  return (/^https?:\/\//.test(str) && str || 'http://' + str
-  );
-};
-
 var preventTab = function preventTab(event) {
-  event.which === 9 ? event.preventDefault() : null;
+  if (event.which === 9) event.preventDefault();
 };
 
 var init = function init(settings) {
   settings.actions = settings.actions ? settings.actions.map(function (action) {
-    if (typeof action === 'string') return actions[action];
-    return _extends({}, actions[action.name], action);
+    if (typeof action === 'string') return actions[action];else if (actions[action.name]) return _extends({}, actions[action.name], action);
+    return action;
   }) : Object.keys(actions).map(function (action) {
     return actions[action];
   });
@@ -157,8 +148,6 @@ var init = function init(settings) {
   settings.element.content.onkeydown = preventTab;
   settings.element.appendChild(settings.element.content);
 
-  if (settings.styleWithCSS) execute('styleWithCSS');
-
   settings.actions.forEach(function (action) {
     var button = document.createElement('button');
     button.className = settings.classes.button;
@@ -168,11 +157,14 @@ var init = function init(settings) {
     actionbar.appendChild(button);
   });
 
+  if (settings.styleWithCSS) execute('styleWithCSS');
+
   return settings.element;
 };
 
-var pell = { init: init };
+var pell = { execute: execute, init: init };
 
+exports.execute = execute;
 exports.init = init;
 exports['default'] = pell;
 

diff --git a/dist/pell.min.js b/dist/pell.min.js
diff --git a/package.json b/package.json
@@ -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.5.0",
+  "version": "0.6.0",
   "main": "./dist/pell.min.js",
   "scripts": {
     "dev": "gulp",

diff --git a/src/pell.js b/src/pell.js
@@ -1,13 +1,3 @@
-const link = () => {
-  const url = window.prompt('Enter the link URL')
-  if (url) execute('createLink', ensureHTTP(url))
-}
-
-const image = () => {
-  const url = window.prompt('Enter the image URL')
-  if (url) execute('insertImage', ensureHTTP(url))
-}
-
 const actions = {
   bold: {
     icon: '<b>B</b>',
@@ -72,12 +62,18 @@ const actions = {
   link: {
     icon: '&#128279;',
     title: 'Link',
-    result: link
+    result: () => {
+      const url = window.prompt('Enter the link URL')
+      if (url) execute('createLink', url)
+    }
   },
   image: {
     icon: '&#128247;',
     title: 'Image',
-    result: image
+    result: () => {
+      const url = window.prompt('Enter the image URL')
+      if (url) execute('insertImage', url)
+    }
   }
 }
 
@@ -87,19 +83,20 @@ const classes = {
   content: 'pell-content'
 }
 
-const execute = (command, value = null) => {
+export const execute = (command, value = null) => {
   document.execCommand(command, false, value)
 }
 
-const ensureHTTP = str => /^https?:\/\//.test(str) && str || `http://${str}`
-
-const preventTab = event => { event.which === 9 ? event.preventDefault() : null }
+const preventTab = event => {
+  if (event.which === 9) event.preventDefault()
+}
 
 export const init = settings => {
   settings.actions = settings.actions
     ? settings.actions.map(action => {
       if (typeof action === 'string') return actions[action]
-      return { ...actions[action.name], ...action }
+      else if (actions[action.name]) return { ...actions[action.name], ...action }
+      return action
     })
     : Object.keys(actions).map(action => actions[action])
 
@@ -116,8 +113,6 @@ export const init = settings => {
   settings.element.content.onkeydown = preventTab
   settings.element.appendChild(settings.element.content)
 
-  if (settings.styleWithCSS) execute('styleWithCSS')
-
   settings.actions.forEach(action => {
     const button = document.createElement('button')
     button.className = settings.classes.button
@@ -127,7 +122,9 @@ export const init = settings => {
     actionbar.appendChild(button)
   })
 
+  if (settings.styleWithCSS) execute('styleWithCSS')
+
   return settings.element
 }
 
-export default { init }
+export default { execute, init }