Skip to content

Commit

Permalink
Build for 1.0.0 release.
Browse files Browse the repository at this point in the history
  • Loading branch information
jaredreich committed Mar 10, 2018
1 parent 1742bf9 commit c1db3b3
Show file tree
Hide file tree
Showing 7 changed files with 59 additions and 28 deletions.
18 changes: 10 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Live demo: [https://jaredreich.com/pell](https://jaredreich.com/pell)

| library | size (min+gzip) | size (min) | jquery | bootstrap | link |
|---------------|-----------------|------------|--------|-----------|------|
| pell | 1.11kB | 2.85kB | | | https://github.com/jaredreich/pell |
| pell | 1.29kB | 3.48kB | | | 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 |
Expand All @@ -29,7 +29,7 @@ Live demo: [https://jaredreich.com/pell](https://jaredreich.com/pell)
* Pure JavaScript, no dependencies, written in ES6
* Easily customizable with the sass file (pell.scss) or overwrite the CSS

Current actions:
Included actions:
- Bold
- Italic
- Underline
Expand All @@ -45,7 +45,7 @@ Current actions:
- Link
- Image

Other possible future actions:
Other available actions (listed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand):
- Justify Center
- Justify Full
- Justify Left
Expand All @@ -60,6 +60,8 @@ Other possible future actions:
- Undo
- Redo

Or create any custom action!

## Browser Support

* IE 9+
Expand Down Expand Up @@ -116,7 +118,7 @@ window.pell

```js
// Initialize pell on an HTMLElement
pell.init({
init({
// <HTMLElement>, required
element: document.getElementById('some-id'),

Expand Down Expand Up @@ -193,7 +195,7 @@ pell.exec(command<string>, value<string>)
```

```js
const editor = pell.init({
const editor = init({
element: document.getElementById('pell'),
onChange: html => {
document.getElementById('text-output').innerHTML = html
Expand All @@ -206,7 +208,7 @@ const editor = pell.init({
'underline',
{
name: 'italic',
result: () => window.pell.exec('italic')
result: () => exec('italic')
},
{
name: 'custom',
Expand All @@ -218,14 +220,14 @@ const editor = pell.init({
name: 'image',
result: () => {
const url = window.prompt('Enter the image URL')
if (url) window.pell.exec('insertImage', ensureHTTP(url))
if (url) exec('insertImage', ensureHTTP(url))
}
},
{
name: 'link',
result: () => {
const url = window.prompt('Enter the link URL')
if (url) window.pell.exec('createLink', ensureHTTP(url))
if (url) exec('createLink', ensureHTTP(url))
}
}
],
Expand Down
Binary file modified demo.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 9 additions & 11 deletions dist/pell.css
Original file line number Diff line number Diff line change
@@ -1,28 +1,26 @@
.pell {
border-radius: 5px;
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
box-sizing: border-box;
width: 100%; }
border: 1px solid rgba(10, 10, 10, 0.1);
box-sizing: border-box; }

.pell-content {
box-sizing: border-box;
height: 300px;
outline: 0;
overflow-y: auto;
padding: 10px;
width: 100%; }
padding: 10px; }

.pell-actionbar {
background-color: #FFF;
border-bottom: 1px solid rgba(10, 10, 10, 0.1);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%; }
border-bottom: 1px solid rgba(10, 10, 10, 0.1); }

.pell-button {
background-color: transparent;
border: none;
cursor: pointer;
height: 30px;
outline: 0;
width: 30px; }
width: 30px;
vertical-align: bottom; }

.pell-button-selected {
background-color: #F0F0F0; }
43 changes: 37 additions & 6 deletions dist/pell.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,39 @@ var actions = {
bold: {
icon: '<b>B</b>',
title: 'Bold',
state: function state() {
return queryCommandState('bold');
},
result: function result() {
return exec('bold');
}
},
italic: {
icon: '<i>I</i>',
title: 'Italic',
state: function state() {
return queryCommandState('italic');
},
result: function result() {
return exec('italic');
}
},
underline: {
icon: '<u>U</u>',
title: 'Underline',
state: function state() {
return queryCommandState('underline');
},
result: function result() {
return exec('underline');
}
},
strikethrough: {
icon: '<strike>S</strike>',
title: 'Strike-through',
state: function state() {
return queryCommandState('strikeThrough');
},
result: function result() {
return exec('strikeThrough');
}
Expand Down Expand Up @@ -112,19 +124,24 @@ var actions = {
var classes = {
actionbar: 'pell-actionbar',
button: 'pell-button',
content: 'pell-content'
content: 'pell-content',
selected: 'pell-button-selected'
};

var exec = function exec(command) {
var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;

document.execCommand(command, false, value);
var queryCommandState = function queryCommandState(command) {
return document.queryCommandState(command);
};

var preventTab = function preventTab(event) {
if (event.which === 9) event.preventDefault();
};

var exec = function exec(command) {
var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;

document.execCommand(command, false, value);
};

var init = function init(settings) {
settings.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);
Expand Down Expand Up @@ -153,10 +170,24 @@ var init = function init(settings) {
button.className = settings.classes.button;
button.innerHTML = action.icon;
button.title = action.title;
button.onclick = action.result;
button.setAttribute('type', 'button');
button.onclick = function () {
return action.result() || settings.element.content.focus();
};

if (action.state) {
var handler = function handler() {
return button.classList[action.state() ? 'add' : 'remove'](settings.classes.selected);
};
settings.element.content.addEventListener('keyup', handler);
settings.element.content.addEventListener('mouseup', handler);
button.addEventListener('click', handler);
}

actionbar.appendChild(button);
});

if (settings.defaultParagraphSeparator) exec('defaultParagraphSeparator', settings.defaultParagraphSeparator);
if (settings.styleWithCSS) exec('styleWithCSS');

return settings.element;
Expand Down
2 changes: 1 addition & 1 deletion dist/pell.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/pell.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.7.0",
"version": "1.0.0",
"main": "./dist/pell.min.js",
"scripts": {
"dev": "gulp",
Expand Down

0 comments on commit c1db3b3

Please sign in to comment.