Fix ui/scrollbar issues, make actionbar stack.

README.md

@@ -145,8 +145,7 @@ pell.init({
 #### SCSS:
 
 ```scss
-// Before pell is imported:
-$pell-border-color: #000;
+$pell-editor-height: 400px;
 // See all overwriteable variables in src/pell.scss
 
 // Then import pell.scss into styles:
@@ -158,7 +157,7 @@ $pell-border-color: #000;
 ```css
 /* After pell styles are applied to DOM: */
 .pell-editor {
- background-color: pink;
+ height: 400px;
 }
 ```
 

demo.html

@@ -21,10 +21,6 @@
  padding: 20px;
  }
 
- .pell {
- height: 400px;
- }
-
  #html-output {
  white-space: pre-wrap;
  }

dist/pell.css

@@ -2,36 +2,27 @@
  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;
- padding: 10px;
- position: relative;
  width: 100%; }
 
 .pell-editor {
  box-sizing: border-box;
- height: 100%;
+ height: 300px;
  outline: 0;
  overflow-y: auto;
- padding-top: 30px;
+ padding: 10px;
  width: 100%; }
 
 .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;
- height: 30px;
- left: 0;
- overflow-x: scroll;
- overflow-y: hidden;
- position: absolute;
- top: 0;
- white-space: nowrap;
  width: 100%; }
 
 .pell-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
- height: 100%;
+ height: 30px;
  outline: 0;
  width: 30px; }

dist/pell.js

@@ -240,6 +240,11 @@ var init = exports.init = function init(settings) {
  settings.classes = _extends({}, defaultSettings.classes, settings.classes);
 
  var root = document.getElementById(settings.root);
+
+ var actionbar = document.createElement('div');
+ actionbar.className = settings.classes.actionbar;
+ root.appendChild(actionbar);
+
  var editor = document.createElement('div');
  editor.contentEditable = true;
  editor.className = settings.classes.editor;
@@ -248,10 +253,6 @@ var init = exports.init = function init(settings) {
  };
  root.appendChild(editor);
 
- var actionbar = document.createElement('div');
- actionbar.className = settings.classes.actionbar;
- root.appendChild(actionbar);
-
  settings.actions.forEach(function (action) {
  var button = document.createElement('button');
  button.className = settings.classes.button;

package.json

@@ -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.2.2",
+ "version": "0.3.0",
  "main": "./dist/pell.min.js",
  "scripts": {
  "dev": "gulp",

src/pell.js

@@ -119,16 +119,17 @@ export const init = settings => {
  settings.classes = { ...defaultSettings.classes, ...settings.classes }
 
  const root = document.getElementById(settings.root)
+
+ const actionbar = document.createElement('div')
+ actionbar.className = settings.classes.actionbar
+ root.appendChild(actionbar)
+
  const editor = document.createElement('div')
  editor.contentEditable = true
  editor.className = settings.classes.editor
  editor.oninput = event => settings.onChange && settings.onChange(event.target.innerHTML)
  root.appendChild(editor)
 
- const actionbar = document.createElement('div')
- actionbar.className = settings.classes.actionbar
- root.appendChild(actionbar)
-
  settings.actions.forEach(action => {
  const button = document.createElement('button')
  button.className = settings.classes.button

src/pell.scss

@@ -1,27 +1,27 @@
 $pell-actionbar-color: #FFF !default;
-$pell-actionbar-height: 30px !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-editor-height: 300px !default;
+$pell-editor-padding: 10px !default;
 
 .pell {
  border-radius: $pell-border-radius;
  box-shadow: $pell-box-shadow;
  box-sizing: border-box;
- padding: 10px;
- position: relative;
  width: 100%;
 }
 
 .pell-editor {
  box-sizing: border-box;
- height: 100%;
+ height: $pell-editor-height;
  outline: 0;
  overflow-y: auto;
- padding-top: $pell-actionbar-height;
+ padding: $pell-editor-padding;
  width: 100%;
 }
 
@@ -30,21 +30,14 @@ $pell-button-width: 30px !default;
  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;
- height: $pell-actionbar-height;
- left: 0;
- overflow-x: scroll;
- overflow-y: hidden;
- position: absolute;
- top: 0;
- white-space: nowrap;
  width: 100%;
 }
 
 .pell-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
- height: 100%;
+ height: $pell-button-height;
  outline: 0;
  width: $pell-button-width;
 }