Fix variable scope bug.

jaredreich · Mar 15, 2018 · 10e4012 · 10e4012
1 parent 490cf02
commit 10e4012
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ Live demo: [https://jaredreich.com/pell](https://jaredreich.com/pell)
 
 | library       | size (min+gzip) | size (min) | jquery | bootstrap | react | link |
 |---------------|-----------------|------------|--------|-----------|-------|------|
-| pell          | 1.40kB          | 3.49kB     |        |           |       | https://github.com/jaredreich/pell |
+| pell          | 1.38kB          | 3.54kB     |        |           |       | 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 |

diff --git a/dist/pell.js b/dist/pell.js
@@ -6,7 +6,30 @@
 
 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 actions = {
+var defaultParagraphSeparatorString = 'defaultParagraphSeparator';
+var formatBlock = 'formatBlock';
+var addEventListener = function addEventListener(parent, type, listener) {
+  return parent.addEventListener(type, listener);
+};
+var appendChild = function appendChild(parent, child) {
+  return parent.appendChild(child);
+};
+var createElement = function createElement(tag) {
+  return document.createElement(tag);
+};
+var queryCommandState = function queryCommandState(command) {
+  return document.queryCommandState(command);
+};
+var queryCommandValue = function queryCommandValue(command) {
+  return document.queryCommandValue(command);
+};
+
+var exec = function exec(command) {
+  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  return document.execCommand(command, false, value);
+};
+
+var defaultActions = {
   bold: {
     icon: '<b>B</b>',
     title: 'Bold',
@@ -121,66 +144,30 @@ var actions = {
   }
 };
 
-var classes = {
+var defaultClasses = {
   actionbar: 'pell-actionbar',
   button: 'pell-button',
   content: 'pell-content',
   selected: 'pell-button-selected'
 };
 
-var element = null;
-var defaultParagraphSeparator = null;
-
-var formatBlock = 'formatBlock';
-var addEventListener = function addEventListener(parent, type, listener) {
-  return parent.addEventListener(type, listener);
-};
-var appendChild = function appendChild(parent, child) {
-  return parent.appendChild(child);
-};
-var createElement = function createElement(tag) {
-  return document.createElement(tag);
-};
-var queryCommandState = function queryCommandState(command) {
-  return document.queryCommandState(command);
-};
-var queryCommandValue = function queryCommandValue(command) {
-  return document.queryCommandValue(command);
-};
-
-var handleKeyDown = function handleKeyDown(event, settings) {
-  if (event.key === 'Tab') {
-    event.preventDefault();
-  } else if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
-    setTimeout(function () {
-      return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
-    }, 0);
-  }
-};
-
-var exec = function exec(command) {
-  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  return document.execCommand(command, false, value);
-};
-
 var init = function init(settings) {
-  element = settings.element;
-  defaultParagraphSeparator = settings.defaultParagraphSeparator || 'div';
-
-  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);
+  var actions = settings.actions ? settings.actions.map(function (action) {
+    if (typeof action === 'string') return defaultActions[action];else if (defaultActions[action.name]) return _extends({}, defaultActions[action.name], action);
     return action;
-  }) : Object.keys(actions).map(function (action) {
-    return actions[action];
+  }) : Object.keys(defaultActions).map(function (action) {
+    return defaultActions[action];
   });
 
-  classes = _extends({}, classes, settings.classes);
+  var classes = _extends({}, defaultClasses, settings.classes);
+
+  var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';
 
   var actionbar = createElement('div');
   actionbar.className = classes.actionbar;
-  appendChild(element, actionbar);
+  appendChild(settings.element, actionbar);
 
-  var content = element.content = createElement('div');
+  var content = settings.element.content = createElement('div');
   content.contentEditable = true;
   content.className = classes.content;
   content.oninput = function (_ref) {
@@ -190,9 +177,15 @@ var init = function init(settings) {
     settings.onChange(content.innerHTML);
   };
   content.onkeydown = function (event) {
-    return handleKeyDown(event, settings);
+    if (event.key === 'Tab') {
+      event.preventDefault();
+    } else if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
+      setTimeout(function () {
+        return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
+      }, 0);
+    }
   };
-  appendChild(element, content);
+  appendChild(settings.element, content);
 
   actions.forEach(function (action) {
     var button = createElement('button');
@@ -216,10 +209,10 @@ var init = function init(settings) {
     appendChild(actionbar, button);
   });
 
-  if (defaultParagraphSeparator) exec('defaultParagraphSeparator', defaultParagraphSeparator);
   if (settings.styleWithCSS) exec('styleWithCSS');
+  exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
 
-  return element;
+  return settings.element;
 };
 
 var pell = { exec: exec, init: init };

diff --git a/dist/pell.min.js b/dist/pell.min.js
diff --git a/src/pell.js b/src/pell.js
@@ -1,4 +1,14 @@
-let actions = {
+const defaultParagraphSeparatorString = 'defaultParagraphSeparator'
+const formatBlock = 'formatBlock'
+const addEventListener = (parent, type, listener) => parent.addEventListener(type, listener)
+const appendChild = (parent, child) => parent.appendChild(child)
+const createElement = tag => document.createElement(tag)
+const queryCommandState = command => document.queryCommandState(command)
+const queryCommandValue = command => document.queryCommandValue(command)
+
+export const exec = (command, value = null) => document.execCommand(command, false, value)
+
+const defaultActions = {
   bold: {
     icon: '<b>B</b>',
     title: 'Bold',
@@ -81,61 +91,48 @@ let actions = {
   }
 }
 
-let classes = {
+const defaultClasses = {
   actionbar: 'pell-actionbar',
   button: 'pell-button',
   content: 'pell-content',
   selected: 'pell-button-selected'
 }
 
-let element = null
-let defaultParagraphSeparator = null
-
-const formatBlock = 'formatBlock'
-const addEventListener = (parent, type, listener) => parent.addEventListener(type, listener)
-const appendChild = (parent, child) => parent.appendChild(child)
-const createElement = tag => document.createElement(tag)
-const queryCommandState = command => document.queryCommandState(command)
-const queryCommandValue = command => document.queryCommandValue(command)
-
-const handleKeyDown = (event, settings) => {
-  if (event.key === 'Tab') {
-    event.preventDefault()
-  } else if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
-    setTimeout(() => exec(formatBlock, `<${defaultParagraphSeparator}>`), 0)
-  }
-}
-
-export const exec = (command, value = null) => document.execCommand(command, false, value)
-
 export const init = settings => {
-  element = settings.element
-  defaultParagraphSeparator = settings.defaultParagraphSeparator || 'div'
+  const actions = settings.actions
+    ? (
+      settings.actions.map(action => {
+        if (typeof action === 'string') return defaultActions[action]
+        else if (defaultActions[action.name]) return { ...defaultActions[action.name], ...action }
+        return action
+      })
+    )
+    : Object.keys(defaultActions).map(action => defaultActions[action])
 
-  actions = settings.actions
-    ? settings.actions.map(action => {
-      if (typeof action === 'string') return actions[action]
-      else if (actions[action.name]) return { ...actions[action.name], ...action }
-      return action
-    })
-    : Object.keys(actions).map(action => actions[action])
+  const classes = { ...defaultClasses, ...settings.classes }
 
-  classes = { ...classes, ...settings.classes }
+  const defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div'
 
   const actionbar = createElement('div')
   actionbar.className = classes.actionbar
-  appendChild(element, actionbar)
+  appendChild(settings.element, actionbar)
 
-  const content = element.content = createElement('div')
+  const content = settings.element.content = createElement('div')
   content.contentEditable = true
   content.className = classes.content
   content.oninput = ({ target: { firstChild } }) => {
     if (firstChild && firstChild.nodeType === 3) exec(formatBlock, `<${defaultParagraphSeparator}>`)
     else if (content.innerHTML === '<br>') content.innerHTML = ''
     settings.onChange(content.innerHTML)
   }
-  content.onkeydown = event => handleKeyDown(event, settings)
-  appendChild(element, content)
+  content.onkeydown = event => {
+    if (event.key === 'Tab') {
+      event.preventDefault()
+    } else if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
+      setTimeout(() => exec(formatBlock, `<${defaultParagraphSeparator}>`), 0)
+    }
+  }
+  appendChild(settings.element, content)
 
   actions.forEach(action => {
     const button = createElement('button')
@@ -155,10 +152,10 @@ export const init = settings => {
     appendChild(actionbar, button)
   })
 
-  if (defaultParagraphSeparator) exec('defaultParagraphSeparator', defaultParagraphSeparator)
   if (settings.styleWithCSS) exec('styleWithCSS')
+  exec(defaultParagraphSeparatorString, defaultParagraphSeparator)
 
-  return element
+  return settings.element
 }
 
 export default { exec, init }