From 10e40127f806a37f3d050a79a82a003c7ad53005 Mon Sep 17 00:00:00 2001 From: Jared Reich Date: Thu, 15 Mar 2018 08:31:15 -0600 Subject: [PATCH] Fix variable scope bug. --- README.md | 2 +- dist/pell.js | 95 ++++++++++++++++++++++-------------------------- dist/pell.min.js | 2 +- src/pell.js | 73 ++++++++++++++++++------------------- 4 files changed, 81 insertions(+), 91 deletions(-) diff --git a/README.md b/README.md index 59dacfc..6efbd2e 100644 --- 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 index 7afa4b6..62ddf0c 100644 --- 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', 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 index 02cc2ec..8615f8e 100644 --- a/dist/pell.min.js +++ b/dist/pell.min.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.pell={})}(this,function(t){"use strict";var e=Object.assign||function(t){for(var e=1;eB",title:"Bold",state:function(){return s("bold")},result:function(){return p("bold")}},italic:{icon:"I",title:"Italic",state:function(){return s("italic")},result:function(){return p("italic")}},underline:{icon:"U",title:"Underline",state:function(){return s("underline")},result:function(){return p("underline")}},strikethrough:{icon:"S",title:"Strike-through",state:function(){return s("strikeThrough")},result:function(){return p("strikeThrough")}},heading1:{icon:"H1",title:"Heading 1",result:function(){return p(u,"

")}},heading2:{icon:"H2",title:"Heading 2",result:function(){return p(u,"

")}},paragraph:{icon:"¶",title:"Paragraph",result:function(){return p(u,"

")}},quote:{icon:"“ ”",title:"Quote",result:function(){return p(u,"

")}},olist:{icon:"#",title:"Ordered List",result:function(){return p("insertOrderedList")}},ulist:{icon:"•",title:"Unordered List",result:function(){return p("insertUnorderedList")}},code:{icon:"</>",title:"Code",result:function(){return p(u,"
")}},line:{icon:"―",title:"Horizontal Line",result:function(){return p("insertHorizontalRule")}},link:{icon:"🔗",title:"Link",result:function(){var t=window.prompt("Enter the link URL");t&&p("createLink",t)}},image:{icon:"📷",title:"Image",result:function(){var t=window.prompt("Enter the image URL");t&&p("insertImage",t)}}},r={actionbar:"pell-actionbar",button:"pell-button",content:"pell-content",selected:"pell-button-selected"},i=null,o=null,u="formatBlock",c=function(t,e,n){return t.addEventListener(e,n)},l=function(t,e){return t.appendChild(e)},a=function(t){return document.createElement(t)},s=function(t){return document.queryCommandState(t)},d=function(t){return document.queryCommandValue(t)},f=function(t,e){"Tab"===t.key?t.preventDefault():"Enter"===t.key&&"blockquote"===d(u)&&setTimeout(function(){return p(u,"<"+o+">")},0)},p=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;return document.execCommand(t,!1,e)},b=function(t){i=t.element,o=t.defaultParagraphSeparator||"div",n=t.actions?t.actions.map(function(t){return"string"==typeof t?n[t]:n[t.name]?e({},n[t.name],t):t}):Object.keys(n).map(function(t){return n[t]}),r=e({},r,t.classes);var s=a("div");s.className=r.actionbar,l(i,s);var d=i.content=a("div");return d.contentEditable=!0,d.className=r.content,d.oninput=function(e){var n=e.target.firstChild;n&&3===n.nodeType?p(u,"<"+o+">"):"
"===d.innerHTML&&(d.innerHTML=""),t.onChange(d.innerHTML)},d.onkeydown=function(t){return f(t)},l(i,d),n.forEach(function(t){var e=a("button");if(e.className=r.button,e.innerHTML=t.icon,e.title=t.title,e.setAttribute("type","button"),e.onclick=function(){return t.result()&&d.focus()},t.state){var n=function(){return e.classList[t.state()?"add":"remove"](r.selected)};c(d,"keyup",n),c(d,"mouseup",n),c(e,"click",n)}l(s,e)}),o&&p("defaultParagraphSeparator",o),t.styleWithCSS&&p("styleWithCSS"),i},m={exec:p,init:b};t.exec=p,t.init=b,t.default=m,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.pell={})}(this,function(t){"use strict";var e=Object.assign||function(t){for(var e=1;e1&&void 0!==arguments[1]?arguments[1]:null;return document.execCommand(t,!1,e)},l={bold:{icon:"B",title:"Bold",state:function(){return o("bold")},result:function(){return c("bold")}},italic:{icon:"I",title:"Italic",state:function(){return o("italic")},result:function(){return c("italic")}},underline:{icon:"U",title:"Underline",state:function(){return o("underline")},result:function(){return c("underline")}},strikethrough:{icon:"S",title:"Strike-through",state:function(){return o("strikeThrough")},result:function(){return c("strikeThrough")}},heading1:{icon:"H1",title:"Heading 1",result:function(){return c("formatBlock","
")}},heading2:{icon:"H2",title:"Heading 2",result:function(){return c("formatBlock","
")}},paragraph:{icon:"¶",title:"Paragraph",result:function(){return c("formatBlock","
")}},quote:{icon:"“ ”",title:"Quote",result:function(){return c("formatBlock","
")}},olist:{icon:"#",title:"Ordered List",result:function(){return c("insertOrderedList")}},ulist:{icon:"•",title:"Unordered List",result:function(){return c("insertUnorderedList")}},code:{icon:"</>",title:"Code",result:function(){return c("formatBlock","
")}},line:{icon:"―",title:"Horizontal Line",result:function(){return c("insertHorizontalRule")}},link:{icon:"🔗",title:"Link",result:function(){var t=window.prompt("Enter the link URL");t&&c("createLink",t)}},image:{icon:"📷",title:"Image",result:function(){var t=window.prompt("Enter the image URL");t&&c("insertImage",t)}}},a={actionbar:"pell-actionbar",button:"pell-button",content:"pell-content",selected:"pell-button-selected"},s=function(t){var o=t.actions?t.actions.map(function(t){return"string"==typeof t?l[t]:l[t.name]?e({},l[t.name],t):t}):Object.keys(l).map(function(t){return l[t]}),s=e({},a,t.classes),f=t.defaultParagraphSeparator||"div",d=i("div");d.className=s.actionbar,r(t.element,d);var m=t.element.content=i("div");return m.contentEditable=!0,m.className=s.content,m.oninput=function(e){var n=e.target.firstChild;n&&3===n.nodeType?c("formatBlock","<"+f+">"):"
"===m.innerHTML&&(m.innerHTML=""),t.onChange(m.innerHTML)},m.onkeydown=function(t){"Tab"===t.key?t.preventDefault():"Enter"===t.key&&"blockquote"===u("formatBlock")&&setTimeout(function(){return c("formatBlock","<"+f+">")},0)},r(t.element,m),o.forEach(function(t){var e=i("button");if(e.className=s.button,e.innerHTML=t.icon,e.title=t.title,e.setAttribute("type","button"),e.onclick=function(){return t.result()&&m.focus()},t.state){var o=function(){return e.classList[t.state()?"add":"remove"](s.selected)};n(m,"keyup",o),n(m,"mouseup",o),n(e,"click",o)}r(d,e)}),t.styleWithCSS&&c("styleWithCSS"),c("defaultParagraphSeparator",f),t.element},f={exec:c,init:s};t.exec=c,t.init=s,t.default=f,Object.defineProperty(t,"__esModule",{value:!0})});
diff --git a/src/pell.js b/src/pell.js
index 6ef743b..3e2fe64 100644
--- 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',
     title: 'Bold',
@@ -81,52 +91,33 @@ 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 } }) => {
@@ -134,8 +125,14 @@ export const init = settings => {
     else if (content.innerHTML === '
') 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 }