Pell - minimalist WYSIWYG editor

main.js

// Initialize the editor
pell.init({
  element: document.querySelector('.pell'),
  actions: ['bold','italic','olist','ulist','clearformat']
});

pell.js

// Pell - minimalist WYSIWYG editor
// Original at: https://github.com/jaredreich/pell
// This is a custom version with fixed buttons so that it works inside forms
// Also adds the 'clear formatting' button
// @TODO: use original installed via yarn once it's fixed

(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 actions = {
  bold: {
    icon: '<b>B</b>',
    title: 'Bold',
    result: function result() {
      return exec('bold');
    }
  },
  italic: {
    icon: '<i>I</i>',
    title: 'Italic',
    result: function result() {
      return exec('italic');
    }
  },
  underline: {
    icon: '<u>U</u>',
    title: 'Underline',
    result: function result() {
      return exec('underline');
    }
  },
  strikethrough: {
    icon: '<strike>S</strike>',
    title: 'Strike-through',
    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: '&#182;',
    title: 'Paragraph',
    result: function result() {
      return exec('formatBlock', '<P>');
    }
  },
  quote: {
    icon: '&#8220; &#8221;',
    title: 'Quote',
    result: function result() {
      return exec('formatBlock', '<BLOCKQUOTE>');
    }
  },
  olist: {
    icon: '&#35;',
    title: 'Ordered List',
    result: function result() {
      return exec('insertOrderedList');
    }
  },
  ulist: {
    icon: '&#8226;',
    title: 'Unordered List',
    result: function result() {
      return exec('insertUnorderedList');
    }
  },
  code: {
    icon: '&lt;/&gt;',
    title: 'Code',
    result: function result() {
      return exec('formatBlock', '<PRE>');
    }
  },
  line: {
    icon: '&#8213;',
    title: 'Horizontal Line',
    result: function result() {
      return exec('insertHorizontalRule');
    }
  },
  link: {
    icon: '&#128279;',
    title: 'Link',
    result: function result() {
      var url = window.prompt('Enter the link URL');
      if (url) exec('createLink', url);
    }
  },
  image: {
    icon: '&#128247;',
    title: 'Image',
    result: function result() {
      var url = window.prompt('Enter the image URL');
      if (url) exec('insertImage', url);
    }
  },
  clearformat: {
    icon: '&#128247;',
    title: 'Clear formatting on selected',
    result: function result() {
      return exec('removeFormat')
    }
  }
};

var classes = {
  actionbar: 'pell-actionbar',
  button: 'pell-button',
  content: 'pell-content'
};

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

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

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

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);
    return action;
  }) : Object.keys(actions).map(function (action) {
    return actions[action];
  });

  settings.classes = _extends({}, classes, settings.classes);

  var actionbar = document.createElement('div');
  actionbar.className = settings.classes.actionbar;
  settings.element.appendChild(actionbar);

  settings.element.content = document.createElement('div');
  settings.element.content.contentEditable = true;
  settings.element.content.className = settings.classes.content;
  settings.element.content.onInput = function (event) {
    return settings.onChange(event.target.innerHTML);
  };
  settings.element.content.onkeydown = preventTab;
  settings.element.appendChild(settings.element.content);

  settings.actions.forEach(function (action) {
    var button = document.createElement('button');
    button.className = settings.classes.button;
    button.innerHTML = action.icon;
    button.title = action.title;
    button.onclick = action.result;
    button.setAttribute('type', 'button')
    actionbar.appendChild(button);
  });

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

  return settings.element;
};

var pell = { exec: exec, init: init };

exports.exec = exec;
exports.init = init;
exports['default'] = pell;

Object.defineProperty(exports, '__esModule', { value: true });

})));

pell.scss

$pell-actionbar-color: #FFF !default;
$pell-border-color: rgba(10, 10, 10, 0.1) !default;
$pell-border-radius: 5px !default;
$pell-border-style: solid !default;
$pell-border-width: 1px !default;
$pell-box-shadow: 0 2px 3px $pell-border-color, 0 0 0 1px $pell-border-color !default;
$pell-button-height: 30px !default;
$pell-button-width: 30px !default;
$pell-content-height: 300px !default;
$pell-content-padding: 10px !default;

.pell {
  border-radius: $pell-border-radius;
  box-shadow: $pell-box-shadow;
  box-sizing: border-box;
  width: 100%;
}

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

.pell-actionbar {
  background-color: $pell-actionbar-color;
  border-bottom: $pell-border-width $pell-border-style $pell-border-color;
  border-top-left-radius: $pell-border-radius;
  border-top-right-radius: $pell-border-radius;
  width: 100%;
}

.pell-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  height: $pell-button-height;
  outline: 0;
  width: $pell-button-width;
}