ya fucki
This commit is contained in:
@@ -1,262 +1,249 @@
|
||||
(function (global, factory)
|
||||
|
||||
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 defaultParagraphSeparatorString = 'defaultParagraphSeparator';
|
||||
var formatBlock = 'formatBlock';
|
||||
var addEventListener = function addEventListener(parent, type, listener)
|
||||
{
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
||||
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
||||
(factory((global.pell = {})));
|
||||
}(this, (function (exports)
|
||||
return parent.addEventListener(type, listener);
|
||||
};
|
||||
var appendChild = function appendChild(parent, child)
|
||||
{
|
||||
'use strict';
|
||||
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 _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 exec = function exec(command)
|
||||
{
|
||||
var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
||||
return document.execCommand(command, false, value);
|
||||
};
|
||||
|
||||
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 defaultActions = {
|
||||
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');
|
||||
}
|
||||
},
|
||||
heading1: {
|
||||
icon: '<b>H<sub>1</sub></b>',
|
||||
title: 'Heading 1',
|
||||
result: function result()
|
||||
{
|
||||
return exec(formatBlock, '<h1>');
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
icon: '<b>H<sub>2</sub></b>',
|
||||
title: 'Heading 2',
|
||||
result: function result()
|
||||
{
|
||||
return exec(formatBlock, '<h2>');
|
||||
}
|
||||
},
|
||||
paragraph: {
|
||||
icon: '¶',
|
||||
title: 'Paragraph',
|
||||
result: function result()
|
||||
{
|
||||
return exec(formatBlock, '<p>');
|
||||
}
|
||||
},
|
||||
quote: {
|
||||
icon: '“ ”',
|
||||
title: 'Quote',
|
||||
result: function result()
|
||||
{
|
||||
return exec(formatBlock, '<blockquote>');
|
||||
}
|
||||
},
|
||||
olist: {
|
||||
icon: '<i class="fth-list"></i>',
|
||||
title: 'Ordered List',
|
||||
result: function result()
|
||||
{
|
||||
return exec('insertOrderedList');
|
||||
}
|
||||
},
|
||||
ulist: {
|
||||
icon: '<i class="fth-menu"></i>',
|
||||
title: 'Unordered List',
|
||||
result: function result()
|
||||
{
|
||||
return exec('insertUnorderedList');
|
||||
}
|
||||
},
|
||||
code: {
|
||||
icon: '</>',
|
||||
title: 'Code',
|
||||
result: function result()
|
||||
{
|
||||
return exec(formatBlock, '<pre>');
|
||||
}
|
||||
},
|
||||
line: {
|
||||
icon: '<i class="fth-minus"></i>',
|
||||
title: 'Horizontal Line',
|
||||
result: function result()
|
||||
{
|
||||
return exec('insertHorizontalRule');
|
||||
}
|
||||
},
|
||||
link: {
|
||||
icon: '<i class="fth-link"></i>',
|
||||
title: 'Link',
|
||||
result: function result()
|
||||
{
|
||||
var url = window.prompt('Enter the link URL');
|
||||
if (url) exec('createLink', url);
|
||||
}
|
||||
},
|
||||
image: {
|
||||
icon: '📷',
|
||||
title: 'Image',
|
||||
result: function result()
|
||||
{
|
||||
var url = window.prompt('Enter the image URL');
|
||||
if (url) exec('insertImage', url);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var exec = function exec(command)
|
||||
{
|
||||
var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
||||
return document.execCommand(command, false, value);
|
||||
};
|
||||
var defaultClasses = {
|
||||
actionbar: 'pell-actionbar',
|
||||
button: 'pell-button',
|
||||
content: 'pell-content',
|
||||
selected: 'pell-button-selected'
|
||||
};
|
||||
|
||||
var defaultActions = {
|
||||
bold: {
|
||||
icon: '<b>B</b>',
|
||||
title: 'Bold',
|
||||
state: function state()
|
||||
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);
|
||||
return action;
|
||||
}) : Object.keys(defaultActions).map(function (action)
|
||||
{
|
||||
return defaultActions[action];
|
||||
});
|
||||
|
||||
var classes = _extends({}, defaultClasses, settings.classes);
|
||||
|
||||
var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';
|
||||
|
||||
var actionbar = createElement('div');
|
||||
actionbar.className = classes.actionbar;
|
||||
appendChild(settings.element, actionbar);
|
||||
|
||||
var content = settings.element.content = createElement('div');
|
||||
content.contentEditable = true;
|
||||
content.className = classes.content;
|
||||
content.oninput = function (_ref)
|
||||
{
|
||||
var firstChild = _ref.target.firstChild;
|
||||
|
||||
if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>'); else if (content.innerHTML === '<br>') content.innerHTML = '';
|
||||
settings.onChange(content.innerHTML);
|
||||
};
|
||||
content.onkeydown = function (event)
|
||||
{
|
||||
if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote')
|
||||
{
|
||||
setTimeout(function ()
|
||||
{
|
||||
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');
|
||||
}
|
||||
},
|
||||
heading1: {
|
||||
icon: '<b>H<sub>1</sub></b>',
|
||||
title: 'Heading 1',
|
||||
result: function result()
|
||||
{
|
||||
return exec(formatBlock, '<h1>');
|
||||
}
|
||||
},
|
||||
heading2: {
|
||||
icon: '<b>H<sub>2</sub></b>',
|
||||
title: 'Heading 2',
|
||||
result: function result()
|
||||
{
|
||||
return exec(formatBlock, '<h2>');
|
||||
}
|
||||
},
|
||||
paragraph: {
|
||||
icon: '¶',
|
||||
title: 'Paragraph',
|
||||
result: function result()
|
||||
{
|
||||
return exec(formatBlock, '<p>');
|
||||
}
|
||||
},
|
||||
quote: {
|
||||
icon: '“ ”',
|
||||
title: 'Quote',
|
||||
result: function result()
|
||||
{
|
||||
return exec(formatBlock, '<blockquote>');
|
||||
}
|
||||
},
|
||||
olist: {
|
||||
icon: '<i class="fth-list"></i>',
|
||||
title: 'Ordered List',
|
||||
result: function result()
|
||||
{
|
||||
return exec('insertOrderedList');
|
||||
}
|
||||
},
|
||||
ulist: {
|
||||
icon: '<i class="fth-menu"></i>',
|
||||
title: 'Unordered List',
|
||||
result: function result()
|
||||
{
|
||||
return exec('insertUnorderedList');
|
||||
}
|
||||
},
|
||||
code: {
|
||||
icon: '</>',
|
||||
title: 'Code',
|
||||
result: function result()
|
||||
{
|
||||
return exec(formatBlock, '<pre>');
|
||||
}
|
||||
},
|
||||
line: {
|
||||
icon: '<i class="fth-minus"></i>',
|
||||
title: 'Horizontal Line',
|
||||
result: function result()
|
||||
{
|
||||
return exec('insertHorizontalRule');
|
||||
}
|
||||
},
|
||||
link: {
|
||||
icon: '<i class="fth-link"></i>',
|
||||
title: 'Link',
|
||||
result: function result()
|
||||
{
|
||||
var url = window.prompt('Enter the link URL');
|
||||
if (url) exec('createLink', url);
|
||||
}
|
||||
},
|
||||
image: {
|
||||
icon: '📷',
|
||||
title: 'Image',
|
||||
result: function result()
|
||||
{
|
||||
var url = window.prompt('Enter the image URL');
|
||||
if (url) exec('insertImage', url);
|
||||
}
|
||||
return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
appendChild(settings.element, content);
|
||||
|
||||
var defaultClasses = {
|
||||
actionbar: 'pell-actionbar',
|
||||
button: 'pell-button',
|
||||
content: 'pell-content',
|
||||
selected: 'pell-button-selected'
|
||||
};
|
||||
|
||||
var init = function init(settings)
|
||||
actions.forEach(function (action)
|
||||
{
|
||||
var actions = settings.actions ? settings.actions.map(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 ()
|
||||
{
|
||||
if (typeof action === 'string') return defaultActions[action]; else if (defaultActions[action.name]) return _extends({}, defaultActions[action.name], action);
|
||||
return action;
|
||||
}) : Object.keys(defaultActions).map(function (action)
|
||||
{
|
||||
return defaultActions[action];
|
||||
});
|
||||
|
||||
var classes = _extends({}, defaultClasses, settings.classes);
|
||||
|
||||
var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';
|
||||
|
||||
var actionbar = createElement('div');
|
||||
actionbar.className = classes.actionbar;
|
||||
appendChild(settings.element, actionbar);
|
||||
|
||||
var content = settings.element.content = createElement('div');
|
||||
content.contentEditable = true;
|
||||
content.className = classes.content;
|
||||
content.oninput = function (_ref)
|
||||
{
|
||||
var firstChild = _ref.target.firstChild;
|
||||
|
||||
if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>'); else if (content.innerHTML === '<br>') content.innerHTML = '';
|
||||
settings.onChange(content.innerHTML);
|
||||
return action.result() && content.focus();
|
||||
};
|
||||
content.onkeydown = function (event)
|
||||
{
|
||||
if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote')
|
||||
{
|
||||
setTimeout(function ()
|
||||
{
|
||||
return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
appendChild(settings.element, content);
|
||||
|
||||
actions.forEach(function (action)
|
||||
if (action.state)
|
||||
{
|
||||
var button = createElement('button');
|
||||
button.className = classes.button;
|
||||
button.innerHTML = action.icon;
|
||||
button.title = action.title;
|
||||
button.setAttribute('type', 'button');
|
||||
button.onclick = function ()
|
||||
var handler = function handler()
|
||||
{
|
||||
return action.result() && content.focus();
|
||||
return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
|
||||
};
|
||||
addEventListener(content, 'keyup', handler);
|
||||
addEventListener(content, 'mouseup', handler);
|
||||
addEventListener(button, 'click', handler);
|
||||
}
|
||||
|
||||
if (action.state)
|
||||
{
|
||||
var handler = function handler()
|
||||
{
|
||||
return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
|
||||
};
|
||||
addEventListener(content, 'keyup', handler);
|
||||
addEventListener(content, 'mouseup', handler);
|
||||
addEventListener(button, 'click', handler);
|
||||
}
|
||||
appendChild(actionbar, button);
|
||||
});
|
||||
|
||||
appendChild(actionbar, button);
|
||||
});
|
||||
if (settings.styleWithCSS) exec('styleWithCSS');
|
||||
exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
|
||||
|
||||
if (settings.styleWithCSS) exec('styleWithCSS');
|
||||
exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
|
||||
return settings.element;
|
||||
};
|
||||
|
||||
return settings.element;
|
||||
};
|
||||
|
||||
var pell = { exec: exec, init: init };
|
||||
|
||||
exports.exec = exec;
|
||||
exports.init = init;
|
||||
exports['default'] = pell;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
})));
|
||||
export default {
|
||||
exec,
|
||||
init
|
||||
};
|
||||
Reference in New Issue
Block a user