123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- (function (global, factory) {
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
- typeof define === 'function' && define.amd ? define(['exports'], factory) :
- (factory((global.pell = {})));
- }(this, (function (exports) { 'use strict';
- 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) {
- 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',
- 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: '#',
- title: 'Ordered List',
- result: function result() {
- return exec('insertOrderedList');
- }
- },
- ulist: {
- icon: '•',
- title: 'Unordered List',
- result: function result() {
- return exec('insertUnorderedList');
- }
- },
- code: {
- icon: '</>',
- title: 'Code',
- result: function result() {
- return exec(formatBlock, '<pre>');
- }
- },
- line: {
- icon: '―',
- title: 'Horizontal Line',
- result: function result() {
- return exec('insertHorizontalRule');
- }
- },
- link: {
- icon: '🔗',
- 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 defaultClasses = {
- actionbar: 'pell-actionbar',
- button: 'pell-button',
- content: 'pell-content',
- selected: 'pell-button-selected'
- };
- 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 exec(formatBlock, '<' + defaultParagraphSeparator + '>');
- }, 0);
- }
- };
- appendChild(settings.element, 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(settings.element, content, this) && content.focus();
- };
- 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);
- });
- if (settings.styleWithCSS) exec('styleWithCSS');
- exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
- return settings.element;
- };
- var pell = { exec: exec, init: init };
- exports.exec = exec;
- exports.init = init;
- exports['default'] = pell;
- Object.defineProperty(exports, '__esModule', { value: true });
- })));
|