')
},
olist: {
icon: '#',
title: 'Ordered List',
- result: function result() {
- return exec('insertOrderedList');
- }
+ result: exec.bind(null, 'insertOrderedList')
},
ulist: {
icon: '•',
title: 'Unordered List',
- result: function result() {
- return exec('insertUnorderedList');
- }
+ result: exec.bind(null, 'insertUnorderedList')
},
code: {
icon: '</>',
title: 'Code',
- result: function result() {
- return exec(formatBlock, '');
- }
+ result: exec.bind(null, formatBlock, '')
},
line: {
icon: '―',
title: 'Horizontal Line',
- result: function result() {
- return exec('insertHorizontalRule');
- }
+ result: exec.bind(null, 'insertHorizontalRule')
},
link: {
icon: '🔗',
title: 'Link',
result: function result() {
- var url = window.prompt('Enter the link URL');
+ var url = prompt('Enter the link URL');
if (url) exec('createLink', url);
}
},
@@ -138,7 +100,7 @@ var defaultActions = {
icon: '📷',
title: 'Image',
result: function result() {
- var url = window.prompt('Enter the image URL');
+ var url = prompt('Enter the image URL');
if (url) exec('insertImage', url);
}
}
@@ -153,7 +115,8 @@ var defaultClasses = {
var init = function init(settings) {
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);
+ if (typeof action === 'string') return defaultActions[action];
+ if (defaultActions[action.name]) return _extends({}, defaultActions[action.name], action);
return action;
}) : Object.keys(defaultActions).map(function (action) {
return defaultActions[action];
@@ -165,7 +128,7 @@ var init = function init(settings) {
var actionbar = createElement('div');
actionbar.className = classes.actionbar;
- appendChild(settings.element, actionbar);
+ settings.element.appendChild(actionbar);
var content = settings.element.content = createElement('div');
content.contentEditable = true;
@@ -185,28 +148,26 @@ var init = function init(settings) {
}, 0);
}
};
- appendChild(settings.element, content);
+ settings.element.appendChild(content);
actions.forEach(function (action) {
var button = createElement('button');
button.className = classes.button;
button.innerHTML = action.icon;
button.title = action.title;
- button.setAttribute('type', 'button');
button.onclick = function () {
return action.result() && content.focus();
};
if (action.state) {
var handler = function handler() {
- return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
+ return button.classList[action.state() ? 'add' : 'remove'](classes.selected)[('keyup', 'mouseup', 'click')].map(function (e) {
+ return content.addEventListener(e, handler);
+ });
};
- addEventListener(content, 'keyup', handler);
- addEventListener(content, 'mouseup', handler);
- addEventListener(button, 'click', handler);
}
- appendChild(actionbar, button);
+ actionbar.appendChild(button);
});
if (settings.styleWithCSS) exec('styleWithCSS');
diff --git a/dist/pell.min.js b/dist/pell.min.js
index 8615f8e..635109e 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;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})});
+!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:i.bind("bold"),result:l.bind(null,"bold")},italic:{icon:"I",title:"Italic",state:i.bind("italic"),result:l.bind(null,"italic")},underline:{icon:"U",title:"Underline",state:i.bind("underline"),result:l.bind(null,"underline")},strikethrough:{icon:"S",title:"Strike-through",state:i.bind("strikeThrough"),result:l.bind(null,"strikeThrough")},heading1:{icon:"H1",title:"Heading 1",result:l.bind(null,"formatBlock","")},heading2:{icon:"H2",title:"Heading 2",result:l.bind(null,"formatBlock","")},paragraph:{icon:"¶",title:"Paragraph",result:l.bind(null,"formatBlock","
")},quote:{icon:"“ ”",title:"Quote",result:l.bind(null,"formatBlock","
")},olist:{icon:"#",title:"Ordered List",result:l.bind(null,"insertOrderedList")},ulist:{icon:"•",title:"Unordered List",result:l.bind(null,"insertUnorderedList")},code:{icon:"</>",title:"Code",result:l.bind(null,"formatBlock","")},line:{icon:"―",title:"Horizontal Line",result:l.bind(null,"insertHorizontalRule")},link:{icon:"🔗",title:"Link",result:function(){var t=prompt("Enter the link URL");t&&l("createLink",t)}},image:{icon:"📷",title:"Image",result:function(){var t=prompt("Enter the image URL");t&&l("insertImage",t)}}},u={actionbar:"pell-actionbar",button:"pell-button",content:"pell-content",selected:"pell-button-selected"},a=function(t){var i=t.actions?t.actions.map(function(t){return"string"==typeof t?o[t]:o[t.name]?e({},o[t.name],t):t}):Object.keys(o).map(function(t){return o[t]}),a=e({},u,t.classes),c=t.defaultParagraphSeparator||"div",d=n("div");d.className=a.actionbar,t.element.appendChild(d);var s=t.element.content=n("div");return s.contentEditable=!0,s.className=a.content,s.oninput=function(e){var n=e.target.firstChild;n&&3===n.nodeType?l("formatBlock","<"+c+">"):"
"===s.innerHTML&&(s.innerHTML=""),t.onChange(s.innerHTML)},s.onkeydown=function(t){"Tab"===t.key?t.preventDefault():"Enter"===t.key&&"blockquote"===r("formatBlock")&&setTimeout(function(){return l("formatBlock","<"+c+">")},0)},t.element.appendChild(s),i.forEach(function(t){var e=n("button");if(e.className=a.button,e.innerHTML=t.icon,e.title=t.title,e.onclick=function(){return t.result()&&s.focus()},t.state);d.appendChild(e)}),t.styleWithCSS&&l("styleWithCSS"),l("defaultParagraphSeparator",c),t.element},c={exec:l,init:a};t.exec=l,t.init=a,t.default=c,Object.defineProperty(t,"__esModule",{value:!0})});
diff --git a/src/pell.js b/src/pell.js
index 3e2fe64..db7fb2f 100644
--- a/src/pell.js
+++ b/src/pell.js
@@ -1,83 +1,83 @@
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)
+export const exec = (command, value) => document.execCommand(command, false, value)
const defaultActions = {
bold: {
icon: 'B',
title: 'Bold',
- state: () => queryCommandState('bold'),
- result: () => exec('bold')
+ state: queryCommandState.bind('bold'),
+ result: exec.bind(null, 'bold')
},
italic: {
icon: 'I',
title: 'Italic',
- state: () => queryCommandState('italic'),
- result: () => exec('italic')
+ state: queryCommandState.bind('italic'),
+ result: exec.bind(null, 'italic')
},
underline: {
icon: 'U',
title: 'Underline',
- state: () => queryCommandState('underline'),
- result: () => exec('underline')
+ state: queryCommandState.bind('underline'),
+ result: exec.bind(null, 'underline')
},
strikethrough: {
icon: 'S',
title: 'Strike-through',
- state: () => queryCommandState('strikeThrough'),
- result: () => exec('strikeThrough')
+ state: queryCommandState.bind('strikeThrough'),
+ result: exec.bind(null, 'strikeThrough')
},
heading1: {
icon: 'H1',
title: 'Heading 1',
- result: () => exec(formatBlock, '')
+ result: exec.bind(null, formatBlock, '')
},
heading2: {
icon: 'H2',
title: 'Heading 2',
- result: () => exec(formatBlock, '')
+ result: exec.bind(null, formatBlock, '')
},
paragraph: {
icon: '¶',
title: 'Paragraph',
- result: () => exec(formatBlock, '
')
+ result: exec.bind(null, formatBlock, '
')
},
quote: {
icon: '“ ”',
title: 'Quote',
- result: () => exec(formatBlock, '
')
+ result: exec.bind(null, formatBlock, '')
},
olist: {
icon: '#',
title: 'Ordered List',
- result: () => exec('insertOrderedList')
+ result: exec.bind(null, 'insertOrderedList')
},
ulist: {
icon: '•',
title: 'Unordered List',
- result: () => exec('insertUnorderedList')
+ result: exec.bind(null, 'insertUnorderedList')
},
code: {
icon: '</>',
title: 'Code',
- result: () => exec(formatBlock, '')
+ result: exec.bind(null, formatBlock, '')
},
line: {
icon: '―',
title: 'Horizontal Line',
- result: () => exec('insertHorizontalRule')
+ result: exec.bind(null, 'insertHorizontalRule')
},
link: {
icon: '🔗',
title: 'Link',
result: () => {
- const url = window.prompt('Enter the link URL')
+ const url = prompt('Enter the link URL')
if (url) exec('createLink', url)
}
},
@@ -85,7 +85,7 @@ const defaultActions = {
icon: '📷',
title: 'Image',
result: () => {
- const url = window.prompt('Enter the image URL')
+ const url = prompt('Enter the image URL')
if (url) exec('insertImage', url)
}
}
@@ -103,7 +103,7 @@ export const init = settings => {
? (
settings.actions.map(action => {
if (typeof action === 'string') return defaultActions[action]
- else if (defaultActions[action.name]) return { ...defaultActions[action.name], ...action }
+ if (defaultActions[action.name]) return { ...defaultActions[action.name], ...action }
return action
})
)
@@ -115,7 +115,7 @@ export const init = settings => {
const actionbar = createElement('div')
actionbar.className = classes.actionbar
- appendChild(settings.element, actionbar)
+ settings.element.appendChild(actionbar)
const content = settings.element.content = createElement('div')
content.contentEditable = true
@@ -132,24 +132,21 @@ export const init = settings => {
setTimeout(() => exec(formatBlock, `<${defaultParagraphSeparator}>`), 0)
}
}
- appendChild(settings.element, content)
+ settings.element.appendChild(content)
actions.forEach(action => {
const button = createElement('button')
button.className = classes.button
button.innerHTML = action.icon
button.title = action.title
- button.setAttribute('type', 'button')
button.onclick = () => action.result() && content.focus()
if (action.state) {
const handler = () => button.classList[action.state() ? 'add' : 'remove'](classes.selected)
- addEventListener(content, 'keyup', handler)
- addEventListener(content, 'mouseup', handler)
- addEventListener(button, 'click', handler)
+ ['keyup', 'mouseup', 'click'].map(e => content.addEventListener(e, handler))
}
- appendChild(actionbar, button)
+ actionbar.appendChild(button)
})
if (settings.styleWithCSS) exec('styleWithCSS')