123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" crossorigin="anonymous" id="fontawesome">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.9.0/codemirror.min.css"/>

<meta charset="utf-8">

<div id="wysi-app"></div>

<div class="page">

	Html Editor Test Page <a href="http://foobar.com" target="_blank"> <img src="http://lorempizza.com/50/16"> <label><input checked type="checkbox" id="toggleedit">edit</label>

	<div class="row" style="margin-top:20px">

		<div class="text" contenteditable="true" style="flex:3">
			<p>Lorem ipsum p<br> lon p... <a href="http://">linky</a></p>
			Test Lorem ipsum dolor sit amet, <a href="https://www.youtube.com/embed/YE7VzlLtp-4" target="lightbox">some video</a>, <a href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d439752.81099746784!2d8.561789093950436!3d42.425159642506166!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1456878134490" target="lightbox">map</a> consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <a href="http://www.placekitten.com/1280/800?image=12#.jpg" target="lightbox"><img src="http://www.placekitten.com/150/100?image=12"></a> aliqua.

			<table style="width: 100%; height: 127px;"><tbody><tr><td>ioh</td><td>2 2</td></tr><tr><td>i ,, h</td><td>4 4 .<img src="http://lorempizza.com/100/50"></td></tr></tbody></table>

			<table style="height: 127px;"><tbody><tr><td>ioh</td><td>2 2</td></tr><tr><td>i ,, h</td><td>4 4 .</td></tr></tbody></table>

			<a href="http://foobar.com" target="_blank"><span style="color:red">Foo bar</span></a> <a href="https://google.com" target="_blank">Goog le </a>
			<span>Lorem ipsum span</span>
			<table><tr><td>ioh</td><td> 2 2</td></tr><tr><td>i ,, h</td><td> 4 4 .</td></tr></table>
			<h1>ok</h1>
			l,kl,l <a href="http://kmmc.in/wp-content/uploads/2014/01/lesson2.pdf" id="testa">Some pdf file</a> <img src="http://lorempizza.com/50/50"> ...<ul><li>a</li><li></li></ul> ig <span>ok o</span><a href="http://froala.com" target="_blank"><span style="color:blue">Fro</span>ala</a> . .
		</div>

		<div style="flex:1">

			<div class="text" contenteditable="true">
				<h1>Hello World</h1>
			</div>

			<div class="text" contenteditable="true">
				<h1>Hello World</h1>
			</div>

			<div class="text xs" contenteditable="true">
				<h1>Hello World, small toolbar</h1>
			</div>

			<div class="text" contenteditable="true">
				 main issues with webkit:<ul>
					<li><a href="https://i.imgur.com/1hYsxO0.webm" target="lightbox">test cat video ...</a></li>
					<li><a href="http://example.org" target="_blank">test 2</a></li>
					<li><a href="https://jsfiddle.net/">test 3</a></li>
				</ul>
						<table id="tbl" style="width: 100%; height: 127px;"><tbody><tr><td>ioh <img src="http://lorempizza.com/50/50"></td><td>2 2</td></tr><tr><td>i ,, h</td><td>4 4 .</td></tr></tbody></table>
				 
			</div>

		</div>
		
	</div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.9.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.9.0/mode/xml/xml.min.js"></script>
<script src="http://feather.aviary.com/imaging/v3/editor.js"></script>
  <script src="https://fb.me/react-15.0.2.js"></script>
<script src="https://fb.me/react-dom-15.0.2.js"></script>
  
  <script src="https://rawgit.com/cauburtin/b1994561abbf4a64a5c129577d89dfa0/raw/fa9cf411e57c7c55c5469bf755723f843ef7f03d/polyfills.js"></script>
            
          
!
            
              * {box-sizing: border-box;}

.page { /* there would be one page, so maybe use an id*/
	padding:10px;
}

.row {display: flex;}

/* the contenteditable elements we target with the wysi,
we separate .text and [contenteditable] that is specific to an editable mode */
.text { 
	padding: 4px 0;
	margin: 8px;
}
.text table {
	border-collapse: collapse;
	empty-cells: show;
	max-width: 100%;
}
.text blockquote, .dropdown blockquote {
	border-left: 4px solid #768;
	padding-left: 6px;
}
.text i.fa {
	margin: 0 2px;
	cursor: pointer;
}
.text a > img {
	vertical-align: text-bottom;
}

[contenteditable=true] {
	position: relative;
	min-height: 16px;
	min-width: 16px;
	border: thin solid #bbf;
}
[contenteditable=true], .CodeMirror {
	/*border: 1px solid blue;*/
}
[contenteditable=true]:empty::before{
	content: 'Type text here';
	opacity: .7;
	display: block; /* For Firefox */
}

/* ::selection style reset */
[contenteditable=true] ::selection,
[contenteditable=true]::selection { all: inherit;background-color: rgba(200,0,0,.2);} 

[contenteditable=true] ::-moz-selection, 
[contenteditable=true]::-moz-selection { all: inherit;background-color: rgba(200,0,0,.2);}

[contenteditable=true] img::selection {background: none;}
[contenteditable=true] img::-moz-selection { background: none;}

/*maybe put other blocks in relative, for resizing*/

[contenteditable=true] table,
[contenteditable=true] img, 
[contenteditable=true] a {
	position: relative; 
}
[contenteditable=true] td {
	border: thin solid #bbf;
	vertical-align: middle;
	height: 32px;
	padding: 2px 5px;
}
[contenteditable=true] td.selected { outline: 2px solid rgb(51,153,255)!important; }
@-moz-document url-prefix() {
		[contenteditable] td.selected { outline: 3px solid rgb(51,153,255)!important; }
}

[contenteditable=true] a:hover::after {
	content: "\f08e";
	font: normal normal normal 12px/1 FontAwesome;
	position: absolute;
	cursor: pointer;
	top: 2px;
	right: -12px;
	z-index: 8;
	background-color: rgba(255,255,255,1);
}
[contenteditable=true] a:hover::before {
	content: attr(href);
	position: fixed;
	white-space: nowrap;
	bottom:0;
	left: 0;
	min-width: 300px;
	max-width: 100%;
	text-overflow: ellipsis;
	overflow-x: hidden;
	font: status-bar;
	z-index: 8;
	color: #888;
	line-height: 22px;
	background-color: #ddd;
	border-top-right-radius: 4px;
	display: inline-block;
}
/*like fa-file-pdf-o but directly in the a element with href ending with .pdf*/




/* code mirror positionned as an overlay above text*/
.CodeMirror {
	position:absolute!important;
	left: -9999px;
	z-index: 7;
}


/****  wysi app  *****/

.wysi {

}
.wysi button, .wysi input[type=button], .wysi input[type=submit], .dropdown > label {
	display: inline-block;
	border: 1px solid #aaa;
	padding: 0;
	min-width: 24px;
	height: 24px;
	vertical-align: top;
	background: none;
	/*outline: none;*/
}


.wysi form {margin:0}

.wysi input[type=search] {height: 24px; min-width: 250px;}
.wysi input[type=submit], .wysi input[type=button] { cursor:pointer; background: none; border: 1px solid #aaa;/* outline:none;*/}
.wysi input.error {outline: 1px solid red}


.toolbar {
	position: absolute;
	left: -9999px;
	background: #ddd;
	z-index: 8;
	white-space: nowrap;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.toolbar > button, .toolbar > fieldset > button, .toolbar .dropdown > label { max-width: 24px; }
.toolbar > button > i, .toolbar > fieldset > button > i, .wysi .dropdown > label > i { font-size: 13px; }


.toolbar > fieldset {
	margin: 0;
	padding: 0;
	border: none;
	display: inline-block;
}
.toolbar > fieldset > * {
	vertical-align: bottom;
}
.toolbar > fieldset[disabled] + button {background-color: #bbb;}
.toolbar > fieldset[disabled] {
	opacity: .5;
}
.toolbar .dropdown.justify > label > i,
.toolbar .dropdown.list > label > i,
.toolbar .dropdown.fontsize > label > i {margin-right: -2px;}

.toolbar .dropdown > :last-child > li { padding: 4px;}

.toolbar button:hover:not(.selected), .toolbar label:hover { background-color: #ccc;}
.toolbar .selected { background-color: #bbb;}

.toolbar fieldset[disabled] .fa-tint {color: rgba(0,0,0,.2)!important;}

.toolbar.xs > fieldset > .dropdown:not(.inline):not(.justify):not(.icon-picker),
.toolbar.xs > :last-child,
.toolbar.xs > fieldset > :last-child {display:none;}


/* .modal > * > .content > header, footer, .. */
.modal {
	position:fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background:rgba(50,50,50,.5); 
	z-index:15;
	display: flex;
	align-items:center;
	justify-content:center;
	transition: all .3s ease-in-out;
	/*transform: scale(1);*/
	opacity: 1;
}
.modal:not(.active)  {
	visibility: hidden; 
	transition: all .2s ease-in-out;
	/*transform: scale(0);*/
	opacity: 0;
}
.modal > :only-child {
	position: relative;
	background-color: #eee;
}

.modal header { 
	margin: 2px;
	display: flex;
	align-items: center;
}

.modal > * > .content {
	max-height: 100%;
	max-width: 70vw;
}
@media (max-width: 600px) {
	.modal > * > .content {
		max-width: 100%;
	}
}
.modal.lightbox > * > .content > * {max-width: 100%;}

.modal > * > i.fa-close {
	position: absolute;
	font-size: 1.5em;
	right: -10px;
	top: -13px;
	color: white;
	cursor: pointer;
}
.modal iframe {
	max-width:100%;
	min-width: 400px;
	min-height: 400px;
	border: none;
}



.tabs > input,
.dropdown > input {position: absolute; left: -9999px;}

/*.dropdown > button:hover { background: #e8e8e8; }*/
/*.dropdown.active > button { background: #d6d6d6; }*/
.dropdown h1, .dropdown h2,.dropdown h3,.dropdown p,.dropdown pre,.dropdown blockquote {margin:0;}

.toolbar .dropdown > label::after,
.table-style .dropdown > label::after {
	content: "▾";
	color: #555;
	width: 10px;
}

.dropdown > :last-child > li:hover:not(.selected) {background: #ccc;}

.dropdown.fontsize > :last-child > li:nth-child(8):hover {background: inherit;}
.dropdown.fontsize > :last-child > li:nth-child(8) {padding: 0;}

.dropdown { position: relative; display: inline-block;}
.dropdown > label { display: flex; align-items: center; justify-content: center; }
.dropdown > :last-child {	
	list-style-type: none;
	margin: 0;
	padding:0;
	transition: all 0.15s;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	background-color: #eee;
	min-width: 100%;
	z-index: 10;
	opacity: 0;
	position: absolute;
	visibility: hidden;
	pointer-events: none;
}
.dropdown > input:checked ~ :last-child {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}
.dropdown > :last-child > li { cursor: pointer; padding: 1px 4px; }
.dropdown > input:checked ~ label {background-color: #bbb;}

.tabs > .labels {display: flex;}
.tabs > .labels > label {
	height: 1.2em;
	white-space: nowrap;
	/*display: inline-block;*/
	flex: 1;
	text-align: center;
	position: relative;
}
/*.tabs > .contents {position: relative;}*/
.tabs > .contents   {
	position: relative;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.tabs > .contents > li {
	opacity: 0;
	position: absolute;
	top: 0; left: 0;
	visibility: hidden;
	transform: scale(0);
	transition: all .1s;
}
.tabs > input:nth-of-type(1):checked ~ .labels > :nth-child(1),
.tabs > input:nth-of-type(2):checked ~ .labels > :nth-child(2),
.tabs > input:nth-of-type(3):checked ~ .labels > :nth-child(3),
.tabs > input:nth-of-type(4):checked ~ .labels > :nth-child(4)
{border-bottom: 1px solid blue; background-color: #ddd;} 

.tabs > input:nth-of-type(1):checked ~ .contents > :nth-child(1),
.tabs > input:nth-of-type(2):checked ~ .contents > :nth-child(2),
.tabs > input:nth-of-type(3):checked ~ .contents > :nth-child(3),
.tabs > input:nth-of-type(4):checked ~ .contents > :nth-child(4) {
	visibility: inherit;
	position: relative;
	opacity: 1;
	transform: scale(1);
	transition: all .4s ease-in-out;
}

.palette { width: 156px; white-space: normal;} /* color palette grids */
.palette.sm {width: 104px; left: -150%;}
.palette > button {
	height:26px;
	width:26px;
	vertical-align: middle;
	position: relative;
}
.palette > button:hover:not(.selected) {border-color: #444;}
.palette button.selected::after {
	color: #ffffff;
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 11px;
	font-weight: 400;
	line-height: 24px;
	position: absolute;
	top: 0; bottom: 0; right: 0; left: 0;
	text-align: center;
}

/** icon-picker **/
.icon-picker.dropdown > .scroll:last-child {
	max-height: 250px;
	width: 270px;
	white-space: normal;
	left: -120px;
	opacity: .8;
}
.icon-picker > .scroll > .fa {
	font-size: 150%;
	margin: 4px;
	cursor: pointer;
	width: 25px;
}

/** table  (picker, tools and resizer) **/
.table-picker-value {text-align: center; font-size: 12px;margin-top: 3px;} 

.table-picker td {padding: 1px;}
.table-picker td > span {
	display: inline-block;
	padding: 1px;
	height:15px;
	width:15px;
	border: 1px solid #dddddd;
	background-color: #f0f0f0;
}
.table-picker td.selected > span {
	background-color: rgba(30,136,229,0.3);
	border: solid 1px #1e88e5;
}

.table-picker  td.active + td:not(.active) ~ td,
.table-picker tr.active + tr:not(.active) ~ tr {
	display: none;
}

.table-tools {
	position: absolute;
	left: -9999px;
}
.table-tools > * {
	position: absolute;
	z-index: 4;
}
.table-tools, .image-tools {white-space: nowrap;}
.table-tools > :nth-child(1) { /*rows tools*/
	left: calc(50% - 10px); top: -8px;
}
.table-tools > :nth-child(2) { /*cols tools*/
	top: calc(50% - 8px); left: -12px;
	transform: rotate(90deg);
}
.table-tools > :nth-child(3) { /*merge + edit  buttons*/
	left: calc(50% - 13px); bottom: -8px; display: flex;
}

.table-tools > :nth-child(3) > .dropdown > :last-child {
	box-shadow: none;
	background-color: none;
	transition:none;
}
.table-tools > :nth-child(3) > .dropdown > :last-child > :last-child {
	background-color: #eee;
}
.table-tools > :nth-child(3) > .dropdown > :last-child > * {flex:1;}


.table-tools .fa-remove {font-size: 12px;vertical-align: middle;}
.table-tools .fa-caret-right {vertical-align: middle;margin-left:1px;height: 14px;}
.table-tools .fa-caret-left {vertical-align: middle;margin-right:1px;height: 14px;}
.table-tools .fa-pencil {font-size: 14px;}
.table-tools .fa-compress {font-size: 15px;}

.dropdown.table-style > label, .image-tools .dropdown > label {
	height: 14px;
	border: none;
	width: 14px;
	min-width: auto;
}
.t-s-tabs {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	left: 0;
	right: 0;
	cursor: default;
}
.t-s-tabs > .labels {
	background-color: #eee;
}


.table-resizer {
	position: absolute; left:-9999px;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.col-resize {
	cursor: col-resize;
	height: 100%;
	width: 9px;
	margin-left:-4px;
	/*background-color: rgba(0,0,0,.1);*/
}
.row-resize {
	cursor: row-resize;
	width: 100%;
	height: 9px;
	margin-top: -4px;
	/*background-color: rgba(0,0,0,.1);*/
}
.col-resize, .row-resize {position: absolute;z-index: 2;}
.col-resize.moving > div, .row-resize.moving > div { opacity: 1; }
.col-resize > div, .row-resize > div { pointer-events: none; opacity: 0;}
.col-resize > div { height:100%;margin-right: 4px; border-right: 1px solid #1e88e5;}
.row-resize > div { width:100%; margin-top: 4px; border-bottom: 1px solid #1e88e5;}


/** image  tools, link tools **/
.image-tools, .link-edit {
	position:absolute;
	left: -9999px;
}
.image-tools {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.image-tools > *, .link-tools > * {
	z-index: 4;
}
.image-tools > :first-child {
	position: absolute;
	left:0; bottom: 0;
	background-color: rgba(255,255,255,.6);
}
.handle { /* small resize handle */
	position: absolute;
	width: 8px;
	height: 8px; 
	background: #1e88e5;
}
.handle.se { cursor: se-resize;  right: -4px;  bottom: -4px;}
.handle.sw { cursor: sw-resize;  left: -4px;  bottom: -4px;}
.handle.ne { cursor: ne-resize;  right: -4px;  top: -4px;}
.handle.nw { cursor: nw-resize;  left: -4px;  top: -4px;}

.link-edit {
	background-color: rgba(200,0,0,.2); /* fake text selection */
}
.link-edit > form {
	position: absolute;
	top: calc(100% + 3px);
	display: flex;
	flex-direction: column;
	align-items: center;
	left:0; right:0;
}
.link-edit > form > .row {
	z-index: 8;
	background-color: #eee;
}
.link-edit > form > .row:last-child {z-index: 7;}
.link-edit ul {
	margin: 0;
	padding: 0; 
}
.link-edit ul > * {
	padding-left: 4px;padding-right: 4px;
}
.link-edit .fa-remove {
	margin-top: 2px;
	margin-left: 10px;
}
.link-edit label, .link-edit input[type=checkbox] {cursor: pointer;}

.image-picker {
	-moz-column-count:6;
	-webkit-column-count:6;
	column-count:6;
	-webkit-column-gap: 2px;
	-moz-column-gap: 2px;
	column-gap: 2px;
	text-align: center;
}
@media (max-width: 800px) {
	.image-picker {
		-moz-column-count:3;
		-webkit-column-count:3;
		column-count:3;
	}
}
.image-picker > figure { 
	display: inline-block;
	position: relative;
	max-width: 100%;
	min-width: 60px;
	min-height: 60px;
	margin: 2px;
}
.image-picker > figure > div {
	visibility: hidden;
	position: absolute;
	left:0; 
	right:0;
	top:0;
	width: 100%;
	display:flex;
	flex-direction: row-reverse;
	background-color: rgba(255,255,255,0.4);
	z-index: 1;
}
.wysi figure i.fa, .wysi .modal header i.fa, input[type=submit] {cursor: pointer;}

.image-picker input {
	flex: 1; 
	overflow: hidden;
	background-color: transparent;
	border: 0;
}

.image-picker > figure:hover > div {visibility: visible}


.image-picker > figure.selected > img {outline: 1px dashed gray;}
.image-picker img {max-width: 100%; min-width: 60px; height: auto;}

.image-picker .remove {position: relative;}
.image-picker .remove:hover > strong {display: block;}
.image-picker .remove:hover ~ * {display: none;}
.image-picker .remove > strong {
	display:none;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 100%;
	padding-right: 3px;
}
.image-picker i.fa-plus {
	width: 100%;
	height:100px;
	font-size: 4em;
	cursor: pointer;
	display: flex;
	align-items:center;
	justify-content:center;
}

@media (max-width: 350px) {
	.modal header input[type=submit] {
		display: none;
	}
}


/**  links suggestions list dropdown  **/
.link-picker {position: relative; flex:1}
.link-picker > input {width: 200px;}
.link-picker > :last-child {
	background-color: #eee;
	position: absolute;
	width: 100%;
	white-space: nowrap;
}
.link-picker li:hover {background: #ddd;}
.link-picker li {display: flex;}
.link-picker span {
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 100%;
}
.link-picker a {
	text-decoration: none;
	font-size: 12px;
	margin: 4;
}

.scroll {overflow-y: auto; overflow-x: hidden;}
.dropdown > .scroll {max-height: 100px; overflow-y: scroll; overflow-x: hidden;}

.CodeMirror-vscrollbar::-webkit-scrollbar, 
.scroll::-webkit-scrollbar { width: 5px; }

.CodeMirror-vscrollbar::-webkit-scrollbar-track-piece,
.scroll::-webkit-scrollbar-track-piece { background: #f1f1f1; }

.CodeMirror-vscrollbar::-webkit-scrollbar-thumb, 
.scroll::-webkit-scrollbar-thumb { background: #bcbcbc; border: 1px solid #a8a8a8; }

            
          
!
            
              (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.wysi = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
module.exports={

	"inline": ["bold","italic", "underline","strikethrough","superscript","subscript"],

	"justify": ["justifyLeft","justifyCenter","justifyRight","justifyFull"],
	"justifyFa": {
		"justifyLeft":"align-left",
		"justifyCenter":"align-center",
		"justifyRight":"align-right",
		"justifyFull":"align-justify"
	},


	"list": ["insertUnorderedList", "insertOrderedList","outdent","indent"],
	"listFa": {
		"insertUnorderedList":"list-ul",
		"insertOrderedList":"list-ol",
		"outdent":"outdent",
		"indent":"indent"
	},


	"block": ["h1","h2","h3","p", "blockquote","pre"],
	"blockValue": {
		"div":"Normal",
		"p":"Paragraph",
		"h1":"Heading 1",
		"h2":"Heading 2",
		"h3":"Heading 3",
		"pre":"Code",
		"blockquote":"Quote",
		"h4":"Heading 4",
		"h5":"Heading 5",
		"h6":"Heading 6"
	},

	"fontname": ["Times New Roman", "Arial", "Arial Black", "Calibri", "Georgia", "Courier New"],
	"fontnameValue": {
		"Arial":"Arial",
		"sans-serif": "Arial",
		"Arial Black": "Arial Black",
		"Calibri": "Calibri",
		"Georgia": "Georgia",
		"serif": "Times New Roman",
		"Times New Roman":"Times New Roman",
		"Courier New": "Courier New"
	},

	"fontsize": ["1", "2", "3", "4", "5", "6", "7"],
	"fontsizeValue": {"1":10, "2":13, "3":16, "4":18, "5":24, "6":32, "7":48},
	"fontsizeName": {"x-small":10, "small":13, "large":18, "x-large":24, "xx-large":32, "-webkit-xxx-large":48},

	"float": ["right","left","none"],
	"floatFa": {"left": "long-arrow-left", "right": "long-arrow-right", "": "arrows-h", "none": "arrows-h"},

	"margin": ["top", "right", "bottom", "left"],
	"marginValues": ["0", "5", "10", "20", "auto"],

	"padding": ["0", "2", "2 5", "5", "10", "10 20", "20"],

	"verticalAlign": ["top", "middle", "bottom"],

	"border": ["border", "borderTop", "borderRight",  "borderBottom","borderLeft"],

	"borderStyle": ["double", "solid", "dotted", "dashed", "none", "inset", "outset"],

	"borderWidth": ["thin", "medium", "thick", 0],

	"borderCollapse": ["collapse", "separate"],

	"table_picker": {"m_max":20, "m_min":2, "n_max": 20, "n_min": 2},

	"palette": [
		"rgb(20, 200, 80)",
		"rgb(220, 40, 70)",
		"rgb(60, 50, 220)",
		"rgb(60, 100, 80)",
		"rgb(120, 100, 80)",
		"rgb(220, 200, 180)",
		"rgb(150, 20, 180)",
		"rgb(20, 10, 80)",
		"rgb(120, 180, 10)",
		"rgb(170, 200, 160)",
		"rgb(190, 200, 220)"
	]

}
},{}],2:[function(require,module,exports){
(function (global){
"use strict";var React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),_require=require("./utils/"),v=_require.v,equals=_require.equals,ImageModal=require("./ImageModal.js"),ImageTools=require("./ImageTools.js"),LinkEdit=require("./LinkEdit.js"),TableTools=require("./TableTools.js"),TableResizer=require("./TableResizer.js"),Toolbar=require("./Toolbar.js"),cfg=require("../config.json"),sel=getSelection();module.exports=React.createClass({shouldComponentUpdate:function(e,t){var r=this;return Object.keys(t).some(function(e){return t[e]!==r.state[e]})},getInitialState:function(){return{a:null,img:null,aForm:{href:"http://",target:"_blank",rel:""},imgForm:{src:""},aR:null,imgR:null,urls:JSON.parse(localStorage.wysiUrls||"[]")}},update:function(e){this.setState(e)},componentDidMount:function(){var e=this;document.addEventListener("selectionchange",function(t){if("true"===document.activeElement.contentEditable){var r=sel.getRange().closest("[contenteditable=true] a"),a=sel.getRange().start().closest("[contenteditable=true] img");e.setState({a:r,img:a,aR:null,imgR:null})}}),require("./utils/pasteparser.js")(),require("./utils/autoinsertlink.js")();var t=require("./utils/lightbox.js");t.listen()},render:function(){var e=this.state,t=e.a,r=e.img,a=e.aForm,i=e.imgForm,s=e.aR,l=e.imgR,u=e.urls;return v("div",{className:"wysi",ref:"el"},v(ImageTools,{update:this.update,img:r}),v(ImageModal,{update:this.update,imgForm:i,imgR:l,urls:u}),v(LinkEdit,{update:this.update,aForm:a,aR:s,urls:u}),v(TableResizer),v(TableTools),v(Toolbar,{ref:"tb",update:this.update,a:t,img:r},this.props.children))}});

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"../config.json":1,"./ImageModal.js":3,"./ImageTools.js":4,"./LinkEdit.js":5,"./TableResizer.js":6,"./TableTools.js":7,"./Toolbar.js":8,"./utils/":10,"./utils/autoinsertlink.js":9,"./utils/lightbox.js":11,"./utils/pasteparser.js":12}],3:[function(require,module,exports){
(function (global){
"use strict";var React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),_require=require("./utils/"),v=_require.v,h=_require.h,insertImage=_require.insertImage,equals=_require.equals,base64=_require.base64,loadImage=_require.loadImage;module.exports=React.createClass({shouldComponentUpdate:function(e){return this.props.imgR!==e.imgR||this.props.imgForm!==e.imgForm||this.props.urls!==e.urls},componentDidMount:function(){var e=this;this.input=h("input",{type:"file",accept:"image/*",multiple:!0,title:"Click to add your images, or drop them"}).on("change",function(t){return e.addImages(t.target.files)}),this.editor=new Aviary.Feather({apiKey:localStorage.aviaryKey||"fe87002a-3c50-4eb8-be2e-b7cd5ce0efc0",theme:"dark",tools:"all",appendTo:"",onSave:function(t,i){var r=e.props.urls;e.editing.url=i,e.props.update({urls:{links:r.links,imgs:r.imgs}}),e.editor.close()},onError:function(e){console.log(e.message)}}),this.editorImg=document.body.appendChild(h("img",{id:"editorId",hidden:!0,src:"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="})),window.addEventListener("beforeunload",function(e){return console.log("bye, lets save")}),this.apply=this.props.apply||function(t,i){var r=e.props,a=r.imgR,s=r.imgForm,n=a.cloneContents().firstChild;n&&"IMG"===n.tagName||(n=new Image),n.attr({src:i.url,title:i.title,style:s.style}),insertImage(n,a),e.props.update({imgR:null})}},edit:function(e,t){e.stopPropagation(),this.editing=t,this.editor.launch({image:this.editorImg.id,url:t.url})},drop:function(e){e.stopPropagation(),e.preventDefault(),this.addImages(e.dataTransfer.files)},dragOver:function(e){e.stopPropagation(),e.preventDefault()},addImages:function(e){var t=this,i=this.props.urls;Promise.all(Array.from(e).filter(function(e){return e.type.startsWith("image")}).map(base64)).then(function(r){t.props.update({urls:{links:i.links,imgs:[].concat(r.map(function(t,i){return{url:t,type:"img",time:e[i].lastModified,title:e[i].name.replace(/.\w+$/,"")}}),i.imgs)}}),t.refs.input.className=""})},addImage:function(e){var t=this,i=this.props.urls,r=i.imgs.findIndex(function(t){return t.url===e});r>=0||loadImage(e).then(function(e){t.props.update({urls:{links:i.links,imgs:[{url:e.target.src,title:"",type:"img"}].concat(i.imgs)}}),t.refs.input.className=""})["catch"](function(e){t.refs.input.className="error",console.log("bad url",e)})},close:function(e){e.currentTarget===e.target&&this.props.update({imgR:null})},setForm:function(e){this.props.update({imgForm:Object.assign({},this.props.imgForm,e)})},render:function(){var e=this,t=this.props,i=t.imgForm,r=t.urls,a=r.imgs;return v("div",{className:"modal "+(this.props.imgR?"active":""),onClick:this.close,onDrop:this.drop,onDragOver:this.dragOver},v("div",v("i",{className:"fa fa-close",onClick:this.close}),v("div",{className:"content scroll"},v("header",v("form",{onSubmit:function(t){return e.addImage(i.src),t.preventDefault(),!1}},v("input",{type:"search",value:i.src,ref:"input",placeholder:"Paste an image url",onChange:function(t){return e.setForm({src:t.target.value})},onPaste:function(t){var i=t.clipboardData.getData("text");i?e.addImage(i):t.clipboardData.files.length&&e.addImages(t.clipboardData.files)}}),v("input",{type:"submit",value:"✓"})),v("button",{title:"Click to add your images, or drop them",onClick:function(t){return e.input.click()}},v("i",{className:"fa fa-upload"}))),v("div",{className:"image-picker"},a.map(function(t,s){return v("figure",{key:s,className:t.url===i.src?"selected":null},v("img",{src:t.url,onClick:function(i){return e.apply(i,t)}}),v("div",v("div",{className:"remove"},v("i",{className:"fa fa-remove"}),v("strong",{onClick:function(t){t.stopPropagation(),a.splice(s,1),e.props.update({urls:{links:r.links,imgs:a}})}},"Sure?")),v("input",{value:t.title,onChange:function(i){t.title=i.target.value,e.props.update({urls:{links:r.links,imgs:a}})}}),v("i",{className:"fa fa-magic"})))})))))}});

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./utils/":10}],4:[function(require,module,exports){
(function (global){
"use strict";var React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),_require=require("./utils/"),v=_require.v,popOver=_require.popOver,insertImage=_require.insertImage,StyleWidget=require("./widgets/StyleWidget.js"),_require2=require("../config.json"),float=_require2["float"],padding=_require2.padding,max=Math.max,sel=getSelection();module.exports=React.createClass({shouldComponentUpdate:function(e){return this.props.img!==e.img},componentDidMount:function(){var e=this;document.addEventListener("mousemove",function(t){e.resizing&&(1===e.resizing?e.props.img.style.width=max(25,t.clientX-e.rect.left):2===e.resizing&&(e.props.img.style.width=max(25,e.rect.right-t.clientX)),e.refs.el.css(popOver(e.props.img.rect())))}),document.addEventListener("mouseup",function(t){if(e.resizing){e.resizing=0;var i=e.props.img.cloneNode(!0);e.props.img.style.width=e.rect.width,i=insertImage(i,sel.selectNode(e.props.img)),sel.setRange(sel.selectNode(i))}}),document.addEventListener("drop",function(t){e.resizing=0}),document.addEventListener("dragend",function(t){e.resizing=0}),window.addEventListener("resize",function(t){e.props.img&&e.refs.el.css(popOver(e.props.img.rect()))})},startResize:function(e){this.resizing=e,this.rect=this.props.img.rect()},imgStyle:function(e){var t=this.props.img.cloneNode(!0);t.css(e),t=insertImage(t,sel.selectNode(this.props.img)),sel.setRange(sel.selectNode(t))},render:function(){var e=this,t=this.props.img,i=t?popOver(t.rect()):null;return v("div",{className:"image-tools",ref:"el",style:i,onMouseDown:function(e){return e.preventDefault()}},v("div",v(StyleWidget,{name:"float",cmd:this.imgStyle,el:t,values:float,label:v("i",{className:"fa fa-arrows-h"})}),v(StyleWidget,{name:"margin",cmd:this.imgStyle,el:t,values:padding,label:v("i",{className:"fa fa-square-o"})})),v("div",{className:"handle se",onMouseDown:function(t){return e.startResize(1)}}),v("div",{className:"handle ne",onMouseDown:function(t){return e.startResize(1)}}),v("div",{className:"handle sw",onMouseDown:function(t){return e.startResize(2)}}),v("div",{className:"handle nw",onMouseDown:function(t){return e.startResize(2)}}))}});

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"../config.json":1,"./utils/":10,"./widgets/StyleWidget.js":19}],5:[function(require,module,exports){
(function (global){
"use strict";var React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),_require=require("./utils/"),v=_require.v,popOver=_require.popOver,replaceElement=_require.replaceElement,exec=_require.exec,lightbox=require("./utils/lightbox.js"),sel=getSelection();module.exports=React.createClass({shouldComponentUpdate:function(e){return this.props.aR!==e.aR||this.props.aForm!==e.aForm||this.props.urls!==e.urls},componentDidMount:function(){var e=this;window.addEventListener("resize",function(t){e.props.aR&&e.refs.el.css(popOver(e.props.aR.rect()))}),this.apply=this.props.apply||function(t){t.preventDefault();var r=e.props,n=r.aR,a=r.aForm;sel.setRange(n),document.execCommand("createLink",null,a.href),n=sel.getRange();var i=n.start().closest("a");return i&&(i.rel=a.rel,i.target=a.target),e.props.update({aR:null}),!1}},setForm:function(e,t){this.props.update({aForm:Object.assign({},this.props.aForm,e)})},render:function(){var e=this,t=this.props,r=t.aR,n=t.aForm,a=t.urls,i=void 0,l=void 0;if(r){var o=r.rect();i=popOver(o);var s=o.left<120,c=o.right>window.innerWidth-120;(s||c)&&(l=s?{right:"auto"}:{left:"auto"})}var u=a.links.filter(function(e){return e.url.indexOf(n.href||"")>-1});return v("div",{className:"link-edit",ref:"el",style:i},v("form",{onSubmit:this.apply,style:l},v("div",{className:"row"},v("div",{className:"link-picker"},v("input",{type:"search",value:n.href,onChange:function(t){return e.setForm({href:t.target.value})}}),v("ul",{hidden:1===u.length&&u[0].url===n.href},u.map(function(t,r){return v("li",{key:r,onClick:function(r){return e.setForm({href:t.url})}},v("span",t.url),v("a",{className:"fa fa-"+(t.url.endsWith(".pdf")?"file-pdf-o":"external-link"),href:t.url,target:"_blank",onClick:function(e){return e.stopPropagation()}}))}))),v("input",{type:"submit",value:"✓"})),v("div",{className:"row"},v("label",{className:"fa fa-external-link",title:"Open in new window"},v("input",{type:"checkbox",name:"opening",checked:"_blank"===n.target,onChange:function(t){return e.setForm({target:t.target.checked?"_blank":""})}})),v("label",{className:"fa fa-expand",title:"Open in lighbox"},v("input",{type:"checkbox",name:"opening",checked:"lightbox"===n.target,onChange:function(t){return e.setForm({target:t.target.checked?"lightbox":""})},disabled:!lightbox.accepts(n.href)})),v("label",{className:"fa fa-ban",title:"No follow"},v("input",{type:"checkbox",checked:n.rel,onChange:function(t){return e.setForm({rel:t.target.checked?"nofollow":""})}})),v("label",{className:"fa fa-remove",title:"Remove link",onClick:function(e){sel.setRange(r),exec("unlink")}}))))}});

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./utils/":10,"./utils/lightbox.js":11}],6:[function(require,module,exports){
(function (global){
"use strict";var React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),_require=require("./utils/"),v=_require.v,popOver=_require.popOver,argMin=_require.argMin,tableToMatrix=_require.tableToMatrix,exec=_require.exec,insertNode=_require.insertNode,min=Math.min,max=Math.max,abs=Math.abs,round=Math.round,sel=getSelection();module.exports=React.createClass({shouldComponentUpdate:function(){return!1},M:{t:null},resize:0,i:-1,j:-1,rowMouseDown:function(e){if(this.i<0)return console.log("DEBUG: something went wrong or you were too fast, aborting");this.resize=2,this.refs.row.classList.add("moving");var t=this.M.t,i=t.rect();0===this.i?this.limit=[0,i.bottom,i.top]:this.i===t.rows.length?this.limit=[i.top,1/0,i.top]:this.limit=[t.rows[this.i-1].rect().top,t.rows[this.i].rect().bottom,i.top]},colMouseDown:function(e){if(this.j<0)return console.log("DEBUG: something went wrong or you were too fast, aborting");this.resize=1,this.refs.col.classList.add("moving");var t=this.M.t,i=t.rect();if(0===this.j)this.limit=[t.parentNode.rect().left,i.right,i.left];else if(this.j===this.M[0].length)this.limit=[i.left,t.parentNode.rect().right,i.left];else{this.limit=[i.left,i.right,i.left];for(var o=0;o<this.M.length;o++)this.limit[0]=max(this.limit[0],this.M[o][this.j-1].rect().left),this.limit[1]=min(this.limit[1],this.M[o][this.j].rect().right)}},componentDidMount:function(){var e=this;document.addEventListener("mouseup",function(t){if(!(e.resize>0)||e.M.t&&e.M.t.parentNode){if(1===e.resize){var i=e.refs.col.offsetLeft+4,o=e.M.t,s=o.cloneNode(!0),r=tableToMatrix(s);if(0===e.j){var n=round(100*i/o.parentNode.offsetWidth),l=round(100*o.offsetLeft/o.parentNode.offsetWidth),f=round(100*o.offsetWidth/o.parentNode.offsetWidth),a=1>n+l?0:n+l,h=f+l-a;s.style.marginLeft=a+"%",s.style.width=h+"%"}else if(e.j===e.M[0].length){var d=round(100*i/o.parentNode.offsetWidth),c=round(100*o.offsetLeft/o.parentNode.offsetWidth);c+d>97&&(d=100-c),s.style.width=d+"%"}else for(var u=0;u<e.M.length;u++)e.M[u][e.j-1]!==e.M[u][e.j]&&(r[u][e.j-1].style.width=round((i-e.M[u][e.j-1].offsetLeft)/o.offsetWidth*100)+"%",r[u][e.j].style.width=round((e.M[u][e.j].offsetLeft+e.M[u][e.j].offsetWidth-i)/o.offsetWidth*100)+"%");e.M=tableToMatrix(insertNode(s,sel.selectNode(o))),e.refs.col.classList.remove("moving"),e.refs.el.css({left:""}),e.resize=0}else if(2===e.resize){var m=e.refs.row.offsetTop+4,p=e.M.t,M=p.cloneNode(!0);if(0===e.i){var g=parseFloat(p.style.marginTop)||0;0>g+m&&(m=-g),M.style.marginTop=g+m||"",M.style.height=p.offsetHeight-m+1}else if(e.i===e.M.length)M.style.height=m;else{var v=m-p.rows[e.i-1].offsetTop,w=p.rows[e.i].offsetTop+p.rows[e.i].offsetHeight-m;M.rows[e.i-1].style.height=round(v/p.offsetHeight*100)+"%",M.rows[e.i].style.height=round(w/p.offsetHeight*100)+"%"}e.M=tableToMatrix(insertNode(M,sel.selectNode(p))),e.refs.row.classList.remove("moving"),e.refs.el.css({left:""}),e.resize=0}}else console.log("DEBUG: current table isnt in editable? that happen after an execTable and your mouse get directly on resizer which has the old table in memory")}),document.addEventListener("mousemove",function(t){if(1===e.resize)return e.refs.col.style.left=min(max(e.limit[0],t.clientX),e.limit[1])-e.limit[2];if(2===e.resize)return e.refs.row.style.top=min(max(e.limit[0],t.clientY),e.limit[1])-e.limit[2];var i=t.target.closest("[contenteditable=true] td");if(i){var o=i.closest("table");if(o){o!==e.M.t&&(e.M=tableToMatrix(o));var s=i.rect(),r=argMin(abs(t.clientX-s.left),abs(t.clientX-s.right)),n=r[0],l=r[1],f=argMin(abs(t.clientY-s.top),abs(t.clientY-s.bottom)),a=f[0],h=f[1];4>l?(e.j=e.M[i.parentNode.rowIndex].indexOf(t.target)+(n?i.colSpan:0),e.refs.col.style.left=i.offsetLeft+(n?i.offsetWidth:0),e.refs.el.css(popOver(o.rect()))):4>h&&(e.i=i.parentNode.rowIndex+(a?i.rowSpan:0),e.refs.row.style.top=a?offsetBottom(o.rows[i.parentNode.rowIndex+i.rowSpan-1]):i.parentNode.offsetTop,e.refs.el.css(popOver(o.rect())))}}})},hide:function(e){this.resize||e.currentTarget.css({left:""})},render:function(){return v("div",{className:"table-resizer",ref:"el",onMouseOut:this.hide},v("div",{className:"row-resize",ref:"row",onMouseDown:this.rowMouseDown},v("div")),v("div",{className:"col-resize",ref:"col",onMouseDown:this.colMouseDown},v("div")))}});var offsetBottom=function(e){return e.offsetTop+e.offsetHeight};

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./utils/":10}],7:[function(require,module,exports){
(function (global){
"use strict";var React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),_require=require("./utils/"),v=_require.v,popOver2=_require.popOver2,tableToMatrix=_require.tableToMatrix,matrixToTable=_require.matrixToTable,dropdown=_require.dropdown,tabs=_require.tabs,_exec=_require.exec,insertNode=_require.insertNode,StyleWidget=require("./widgets/StyleWidget.js"),StyleColorWidget=require("./widgets/StyleColorWidget.js"),StyleBorderWidget=require("./widgets/StyleBorderWidget.js"),_require2=require("../config.json"),palette=_require2.palette,borderWidth=_require2.borderWidth,borderStyle=_require2.borderStyle,padding=_require2.padding,borderCollapse=_require2.borderCollapse,verticalAlign=_require2.verticalAlign,tableExec=require("./utils/tablecommands.js"),sel=getSelection();module.exports=React.createClass({shouldComponentUpdate:function(e){return this.state.s!==e.s},getInitialState:function(){return{s:null,M:null}},exec:function(e,t){var a=this.state,l=a.s,r=a.M,i=r.t.cloneNode(!0),s=tableToMatrix(i),n=tableExec[e](l,s,t);if(s.length&&s[0].length){var o=matrixToTable(s);i.empty().appendChild(o),s=tableToMatrix(insertNode(i,sel.selectNode(r.t))),this.setState({s:n,M:s})}else sel.setRange(sel.selectNode(r.t)),_exec("insertHTML","<br>"),this.setState({s:null,M:null})},cellStyle:function(e){this.exec("cellStyle",e)},tableStyle:function(e){var t=this.state.M,a=t.t.cloneNode(!0);a.css(e);var l=tableToMatrix(insertNode(a,sel.selectNode(t.t)));this.setState({s:this.state.s.slice(),M:l})},componentDidMount:function(){var e=this;require("./utils/tableselection.js")(),document.addEventListener("tableselectionchange",function(t){var a=t.detail;"end"===a.type?setTimeout(function(t){return e.setState({s:a.s,M:a.M})}):"start"!==a.type||e.refs.el.contains(a.target)||e.setState({s:null})}),document.addEventListener("keydown",function(t){e.state.s&&e.setState({s:null})}),document.addEventListener("mouseup",function(t){e.state.s&&t.target.closest(".toolbar")&&e.setState({s:null})}),window.addEventListener("resize",function(t){if(e.state.s){var a=e.state,l=a.s,r=a.M,i=r[l[0]][l[1]],s=r[l[2]][l[3]];e.refs.el.css(popOver2(i.rect(),s.rect()))}})},render:function(){var e=this,t=this.state,a=t.s,l=t.M,r=(t.tab,void 0),i=void 0,s=void 0,n=void 0;return a&&(r=l[a[0]][a[1]],i=l[a[2]][a[3]],n=l.t,s=popOver2(r.rect(),i.rect()),sel.isCollapsed||i!==r||(s.left="")),v("div",{className:"table-tools",ref:"el",style:s},v("div",v("i",{className:"fa fa-caret-left",onClick:function(t){return e.exec("addCol",0)}}),v("i",{className:"fa fa-remove",onClick:function(t){return e.exec("delCols")}}),v("i",{className:"fa fa-caret-right",onClick:function(t){return e.exec("addCol",1)}})),v("div",v("i",{className:"fa fa-caret-left",onClick:function(t){return e.exec("addRow",0)}}),v("i",{className:"fa fa-remove",onClick:function(t){return e.exec("delRows")}}),v("i",{className:"fa fa-caret-right",onClick:function(t){return e.exec("addRow",1)}})),v("div",v("i",{className:"fa fa-compress",onClick:function(t){return e.exec("merge")}}),dropdown({name:"table-style",label:v("i",{className:"fa fa-pencil"}),content:tabs({name:"t-s-tabs",children:[{label:"Cell",content:v("div",v(StyleBorderWidget,{el:i,cmd:this.cellStyle,tab:1,palette:palette,borderWidth:borderWidth,borderStyle:borderStyle}),v("div",{className:"row"},v("span","background"),v(StyleColorWidget,{name:"backgroundColor",tab:1,cmd:this.cellStyle,el:i,values:palette})),v("div",{className:"row"},v("span","padding"),v(StyleWidget,{name:"padding",cmd:this.cellStyle,el:i,values:padding})),v("div",{className:"row"},v("span","vertical-align"),v(StyleWidget,{name:"verticalAlign",cmd:this.cellStyle,el:i,values:verticalAlign})))},{label:"Table",content:v("div",v(StyleBorderWidget,{el:n,cmd:this.tableStyle,tab:2,palette:palette,borderWidth:borderWidth,borderStyle:borderStyle}),v("div",{className:"row"},v("span","background"),v(StyleColorWidget,{name:"backgroundColor",tab:2,cmd:this.tableStyle,el:n,values:palette})),v("div",{className:"row"},v("span","border-collapse"),v(StyleWidget,{name:"borderCollapse",cmd:this.tableStyle,el:n,values:borderCollapse})),v("div",{className:"row"},v("span","align"),v("div",v("button",{onMouseUp:function(t){return e.tableStyle({marginLeft:"",marginRight:""})}},v("i",{className:"fa fa-align-left"})),v("button",{onMouseUp:function(t){return e.tableStyle({marginLeft:"auto",marginRight:"auto"})}},v("i",{className:"fa fa-align-center"})),v("button",{onMouseUp:function(t){return e.tableStyle({marginLeft:"auto",marginRight:0})}},v("i",{className:"fa fa-align-right"})))))}]})})))}});

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"../config.json":1,"./utils/":10,"./utils/tablecommands.js":14,"./utils/tableselection.js":15,"./widgets/StyleBorderWidget.js":17,"./widgets/StyleColorWidget.js":18,"./widgets/StyleWidget.js":19}],8:[function(require,module,exports){
(function (global){
"use strict";var React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),_require=require("./utils/"),v=_require.v,popOver=_require.popOver,exec=_require.exec,execNoCss=_require.execNoCss,expand=_require.expand,expandTag=_require.expandTag,formatBlock=_require.formatBlock,Dropdown=_require.Dropdown,dropdown=_require.dropdown,tabs=_require.tabs,TablePicker=require("./widgets/TablePicker.js"),IconPicker=require("./widgets/IconPicker.js"),prettify=require("./utils/prettifyhtml.js"),cfg=require("../config.json"),max=Math.max,min=Math.min,sel=getSelection(),queryCommandFontName=function(e){var t=document.queryCommandValue("fontname"),n=t.split(",")[0].replace(/^["'\s]+|["'\s]+$/g,"");return cfg.fontnameValue[n]||n},queryCommandFontSize=function(e){var t=document.queryCommandValue("fontsize");if(cfg.fontsizeValue.hasOwnProperty(t))return cfg.fontsizeValue[t];var n=sel.getRange().closest("*");return n?parseInt(getComputedStyle(n).fontSize):16},commandStates=function(e){for(var t={},n=e,o=Array.isArray(n),r=0,n=o?n:n[Symbol.iterator]();;){var a;if(o){if(r>=n.length)break;a=n[r++]}else{if(r=n.next(),r.done)break;a=r.value}var s=a;t[s]=document.queryCommandState(s)}return t},BlockDropdown=Dropdown({cmd:formatBlock,update:function(){this.setState({value:document.queryCommandValue("formatblock")})},render:function(){var e=this;return dropdown({name:"formatblock",onChange:this.change,label:v("i",{className:"fa fa-paragraph"}),content:v("ul",cfg.block.map(function(t,n){return v("li",{key:n,onMouseUp:function(n){return e.cmd(t)},className:t===e.state.value?"selected":null},v(t,cfg.blockValue[t]))}))})}}),FontNameDropdown=Dropdown({update:function(){this.setState({value:queryCommandFontName()})},render:function(){var e=this;return dropdown({name:"fontname",onChange:this.change,label:v("i",{className:"fa fa-font"}),content:v("ul",cfg.fontname.map(function(t,n){return v("li",{key:n,onMouseUp:function(n){return e.cmd("fontname",t)},className:t===e.state.value?"selected":null},v("span",{style:{fontFamily:t}},t))}))})}}),FontSizeDropdown=Dropdown({update:function(){this.setState({value:document.queryCommandValue("fontsize")})},render:function(){var e=this;return dropdown({name:"fontsize",onChange:this.change,label:v("i",{className:"fa"},queryCommandFontSize()),content:v("ul",cfg.fontsize.map(function(t,n){return v("li",{key:n,onMouseUp:function(n){return e.cmd("fontsize",t)},className:t===e.state.value?"selected":null},cfg.fontsizeValue[t])}),document.queryCommandSupported("fontSizeDelta")?v("li",{onMouseUp:this.update},v("button",{key:"-",onMouseUp:function(e){return exec("fontsizeDelta",-1)}},"-"),v("button",{key:"+",onMouseUp:function(e){return exec("fontsizeDelta",1)}},"+")):null)})}}),ColorDropdown=Dropdown({update:function(){this.setState({forecolor:document.queryCommandValue("forecolor"),backcolor:document.queryCommandValue("backcolor")})},render:function(){var e=this;return dropdown({name:"color",onChange:this.change,label:v("i",{className:"fa fa-tint",style:{color:this.state.forecolor,backgroundColor:this.state.backcolor}}),content:tabs({name:"color-picker",children:[{label:"Text",content:v("div",{className:"palette"},cfg.palette.map(function(t,n){return v("button",{key:n,className:t===e.state.forecolor?"selected":null,onMouseUp:function(n){return e.cmd("forecolor",t)},style:{backgroundColor:t}})}),v("button",{onMouseUp:function(t){return e.cmd("forecolor","inherit")}},v("i",{className:"fa fa-eraser"})))},{label:"Background",content:v("div",{className:"palette"},cfg.palette.map(function(t,n){return v("button",{key:n,className:t===e.state.backcolor?"selected":null,onMouseUp:function(n){return e.cmd("backcolor",t)},style:{backgroundColor:t}})}),v("button",{onMouseUp:function(t){return e.cmd("backcolor","inherit")}},v("i",{className:"fa fa-eraser"})))}]})})}}),InlineDropdown=Dropdown({cmd:execNoCss,update:function(){this.setState(commandStates(cfg.inline))},render:function(){var e=this;return dropdown({name:"inline",onChange:this.change,label:v("i",{className:"fa fa-bold"}),content:v("ul",cfg.inline.map(function(t,n){return v("li",{key:n,onMouseUp:function(n){return e.cmd(t)},className:document.queryCommandState(t)?"selected":null},v("i",{className:"fa fa-"+t}))}))})}}),JustifyDropdown=Dropdown({update:function(){this.setState(commandStates(cfg.justify))},render:function(){var e=this;return dropdown({name:"justify",onChange:this.change,label:v("i",{className:"fa fa-"+cfg.justifyFa[cfg.justify.find(function(e){return document.queryCommandState(e)})||"justifyLeft"]}),content:v("ul",cfg.justify.map(function(t,n){return v("li",{key:n,onMouseUp:function(n){return e.cmd(t)},className:document.queryCommandState(t)?"selected":null},v("i",{className:"fa fa-"+cfg.justifyFa[t]}))}))})}}),ListDropdown=Dropdown({update:function(){this.setState(commandStates(cfg.list))},render:function(){var e=this;return dropdown({name:"list",onChange:this.change,label:v("i",{className:"fa fa-list-"+(document.queryCommandState("insertorderedlist")?"ol":"ul")}),content:v("ul",cfg.list.map(function(t,n){return v("li",{key:n,onMouseUp:function(n){return e.cmd(t)},className:document.queryCommandState(t)?"selected":null},v("i",{className:"fa fa-"+cfg.listFa[t]}))}))})}});module.exports=React.createClass({shouldComponentUpdate:function(e){return!this.props.a!=!e.a||!this.props.img!=!e.img},newLink:function(e){var t=expandTag(sel.getRange(),"a");expand(t);var n=t.cloneContents(),o=n.querySelector("a"),r=n.querySelector("img"),a={href:"http://",target:"_blank",rel:""};r?a.href=r.src:o?Object.assign(a,o.attr()):/(https?:[^ ]+$)/.test(t.toString().trim())&&(a.href=t.toString().trim()),this.props.update({aR:t,aForm:a})},newImage:function(e){var t=sel.getRange(),n=t.cloneContents().querySelector("img");this.props.update({imgR:t,imgForm:n?n.attr():{src:""}})},componentDidMount:function(){var e=this,t=function(t){var n=e.ce.rect(),o=e.refs.el,r=min(n.bottom,max(0,n.top-o.offsetHeight))+window.scrollY,a=n.left+o.offsetWidth>window.innerWidth-20?n.width-o.offsetWidth:0;o.css({left:n.left+a+window.scrollX,top:r})};window.addEventListener("resize",function(n){e.ce&&(t(),e.refs.fs.disabled&&e.cm.display.wrapper.css(popOver(e.ce.rect())))}),window.addEventListener("scroll",function(n){e.ce&&requestAnimationFrame(t)}),document.addEventListener("blur",function(t){var n=t.target;if(e.ce){if(n.matches(".wysi input, .CodeMirror textarea"))return;setTimeout(function(t){var n=sel.getRange();n.commonAncestorContainer.matches("[contenteditable=true] *, [contenteditable=true], .CodeMirror *, .wysi input")||(e.refs.fs.disabled&&e.toggleCM(),e.refs.el.css({left:""}),e.ce.dispatchEvent(new CustomEvent("wysi.blur")),e.ce=null)})}},!0),document.addEventListener("focus",function(n){var o=n.target;if(!o.matches(".wysi input, .CodeMirror textarea")){var r=o.matches("[contenteditable=true]")?o:null;r&&r!==e.ce&&(e.ce&&e.refs.fs.disabled&&e.toggleCM(),e.ce&&e.ce.dispatchEvent(new CustomEvent("wysi.blur")),e.ce=r,setTimeout(t))}},!0),this.cm=window.CodeMirror(document.body,{tabMode:"indent",indentWidthTabs:!0,lineWrapping:!0,tabSize:2,mode:"text/html"})},toggleCM:function(){var e=this.refs.fs;e.disabled?(this.ce.innerHTML=this.cm.getValue(),this.cm.display.wrapper.css({left:""})):(this.cm.display.wrapper.css(popOver(this.ce.rect())),this.cm.setValue(prettify(this.ce.cloneNode(!0)))),e.disabled=!e.disabled},render:function(){var e=this;return v("div",{className:"toolbar",ref:"el",onMouseDown:function(e){return e.preventDefault()}},this.props.children,v("fieldset",{ref:"fs"},v(BlockDropdown),v(FontNameDropdown),v(FontSizeDropdown),v(ColorDropdown),v(InlineDropdown),v(JustifyDropdown),v(ListDropdown),v(IconPicker,{app:this}),v(TablePicker,{cfg:cfg.table_picker}),v("button",{onMouseUp:this.newLink,className:this.props.a?"selected":null},v("i",{className:"fa fa-link"})),v("button",{onMouseUp:this.newImage,className:this.props.img?"selected":null},v("i",{className:"fa fa-picture-o"})),v("button",{onMouseUp:function(e){return exec("removeFormat")},title:"Remove format"},v("i",{className:"fa fa-eraser"}))),v("button",{onMouseUp:function(t){return e.toggleCM()},title:"View source"},v("i",{className:"fa fa-code"})))}});

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"../config.json":1,"./utils/":10,"./utils/prettifyhtml.js":13,"./widgets/IconPicker.js":16,"./widgets/TablePicker.js":20}],9:[function(require,module,exports){
"use strict";function autoInsertLink(e){if(e.keyCode===spaceKey||e.keyCode===returnKey){var t=sel.getRange();if(t.closest("[contenteditable=true]")&&3===t.endContainer.nodeType&&!t.closest("a")){var n=t.endContainer.substringData(0,t.endOffset).match(/(\w+:\/\/[^ ]+$)/);n&&(t.setStart(t.endContainer,n.index),sel.setRange(t),exec("createLink",t.toString().trim()),sel.collapseToEnd())}}}var _require=require("./"),exec=_require.exec,sel=getSelection();module.exports=function(){document.addEventListener("keydown",autoInsertLink)};var returnKey=13,spaceKey=32;

},{"./":10}],10:[function(require,module,exports){
(function (global){
"use strict";function argMin(){for(var e=0,t=arguments.length,n=Array(t),r=0;t>r;r++)n[r]=arguments[r];for(var o=1;o<n.length;o++)n[o]<n[e]&&(e=o);return[e,n[e]]}function replaceElement(e,t){var n=document.createElement(e);if(t.attributes)for(var r=t.attributes,o=Array.isArray(r),a=0,r=o?r:r[Symbol.iterator]();;){var i;if(o){if(a>=r.length)break;i=r[a++]}else{if(a=r.next(),a.done)break;i=a.value}var l=i;n.setAttribute(l.name,l.value)}for(;t.firstChild;)n.appendChild(t.firstChild);return n}function upload(e,t,n,r){var o=new XMLHttpRequest;o.open("post",e),o.send(t),o.onload=n,o.upload&&r&&(o.upload.onprogress=r)}function base64(e){var t=new FileReader;return t.readAsDataURL(e),new Promise(function(e,n){t.onload=function(t){e(t.target.result)},t.onerror=n})}function tableToMatrix(e){if(!e)return{t:e};for(var t=Array.from(e.rows[0].cells).reduce(function(e,t){return e+t.colSpan},0),n=Array.from({length:e.rows.length},function(e){return Array(t).fill(null)}),r=0;r<e.rows.length;r++){for(var o=e.rows[r],a=0,i=0;a<o.cells.length;a++){var l=o.cells[a];i=n[r].indexOf(null,i);for(var c=0;c<l.rowSpan;c++){var d;(d=n[r+c]).splice.apply(d,[i,l.colSpan].concat(Array(l.colSpan).fill(l)))}}n[r].tr=o}return n.t=e,n}function matrixToTable(e){for(var t=document.createDocumentFragment(),n=0;n<e.length;n++){for(var r=e[n].tr?e[n].tr.empty():document.createElement("tr"),o=0;o<e[n].length;o+=e[n][o].colSpan)isRowSpanned(e,n,o)||r.appendChild(e[n][o]);t.appendChild(r)}return t}function insertNode(e,t){e.id=TEMPID,sel.setRange(t),exec("insertHTML",e.outerHTML);var n=document.getElementById(TEMPID);return n?(n.removeAttribute("id"),n):console.log("unable to retrieve replaced node")}var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),v=function(e,t){for(var n=arguments.length,r=Array(n>2?n-2:0),o=2;n>o;o++)r[o-2]=arguments[o];return!t||React.isValidElement(t)||"string"==typeof t||Array.isArray(t)?React.createElement.apply(React,[e,void 0,t].concat(r)):React.createElement.apply(React,[e,t].concat(r))},max=Math.max,random=Math.random,floor=Math.floor,rand=function(e){return floor(1296*random()).toString(36)},isRowSpanned=function(e,t,n){return t>0&&e[t-1][n]===e[t][n]},sel=getSelection(),exec=function(e,t){return document.execCommand(e,null,t)},TEMPID="temp_id",dropdownChange=function(e){var t=e.target,n=void 0;t.checked?(n||(n=function(e){t.parentNode.contains(e.target)||(t.checked=!1,document.removeEventListener("mousedown",n))}),document.addEventListener("mousedown",n)):document.removeEventListener("mousedown",n)};module.exports={dropdownChange:dropdownChange,dropdown:function(e){var t=e.name,n=void 0===t?"__dd"+rand():t,r=e.label,o=void 0===r?n:r,a=e.ref,i=void 0===a?"el":a,l=e.style,c=e.content,d=e.onChange,s=void 0===d?dropdownChange:d;return v("div",{className:"dropdown "+n,ref:i,style:l},v("input",{type:"checkbox",name:n,id:n,onChange:s}),v("label",{htmlFor:n},o),c)},tabs:function(e){var t=e.name,n=void 0===t?"__tab"+rand():t,r=e.style,o=e.children,a=void 0===o?[]:o;return v("div",{className:"tabs "+n,style:r},a.map(function(e,t){return v("input",{key:t,type:"radio",defaultChecked:0===t,name:n,id:n+"_"+t})}),v("div",{className:"labels"},a.map(function(e,t){var r=e.label;return v("label",{key:"l"+t,htmlFor:n+"_"+t},r)})),v("ol",{className:"contents"},a.map(function(e,t){var n=e.content;return v("li",{key:"c"+t},n)})))},Dropdown:function(e){var t=e.cmd,n=void 0===t?exec:t,r=e.update,o=e.render;return React.createClass({shouldComponentUpdate:function(e,t){var n=this;return Object.keys(t).some(function(e){return t[e]!==n.state[e]})},getInitialState:function(){return{}},change:dropdownChange,update:r,componentDidMount:function(){var e=this;document.addEventListener("selectionchange",function(t){return"true"===document.activeElement.contentEditable&&e.update()})},componentWillUnmount:function(){console.log("unmounting dropdown")},cmd:function(e,t){n(e,t),this.update(),this.refs.el.firstChild.checked=!1,this.change({target:this.refs.el.firstChild})},render:o})},popOver:function(e){return{top:e.top+window.scrollY,left:e.left+window.scrollX,width:e.width,height:e.height}},popOver2:function(e){var t=arguments.length<=1||void 0===arguments[1]?e:arguments[1];return{top:e.top+window.scrollY,left:e.left+window.scrollX,width:t.right-e.left,height:t.bottom-e.top}},expandTag:function(e,t){var n=e.startContainer.closest(t),r=e.endContainer.closest(t);return n&&e.setStartBefore(n),r&&e.setEndAfter(r),e},expand:function(e){var t=arguments.length<=1||void 0===arguments[1]?/[\s,.:]/:arguments[1],n=arguments.length<=2||void 0===arguments[2]?t:arguments[2];if(t&&3===e.startContainer.nodeType)for(;e.startOffset>0&&!t.test(e.startContainer.textContent[e.startOffset-1]);)e.setStart(e.startContainer,e.startOffset-1);if(n&&3===e.endContainer.nodeType)for(;e.endOffset<e.endContainer.length&&!n.test(e.endContainer.textContent[e.endOffset]);)e.setEnd(e.endContainer,e.endOffset+1);return e},formatBlock:function(e){var t=document.queryCommandValue("formatblock");return e!==t?exec("formatblock",e):void exec("formatblock","div")},replaceElement:replaceElement,createFrag:function(e){for(var t=document.createDocumentFragment();e.firstChild;)t.appendChild(e.firstChild);return t},h:function(e,t){var n,r=e.split("."),o=r[0],a=r.slice(1),i=document.createElement(o||"div");if(t){"string"==typeof t||t instanceof Node||Array.isArray(t)?i.add(t):"object"===("undefined"==typeof t?"undefined":_typeof(t))&&(Object.assign(i,t),t.style&&Object.assign(i.style,t.style));for(var l=arguments.length,c=Array(l>2?l-2:0),d=2;l>d;d++)c[d-2]=arguments[d];i.add.apply(i,c)}return(n=i.classList).add.apply(n,a),i},v:v,upload:upload,base64:base64,loadImage:function(e){var t=new Image;return t.src=e,new Promise(function(e,n){t.onerror=t.onabort=n,t.onload=e})},fetchJSON:function(e,t){return fetch(e,t).then(function(e){return e.json()})},tableToMatrix:tableToMatrix,matrixToTable:matrixToTable,argMin:argMin,exec:exec,execNoCss:function(e,t){exec("styleWithCSS",!1),exec(e,t),exec("styleWithCSS",!0)},createTable:function(e,t){exec("insertHTML",'<table style="width:100%">'+Array.from({length:e+1},function(e,n){return"<tr>"+Array.from({length:t+1},function(e,t){return"<td>   </td>"}).join("")+"</tr>"}).join("")+"</table>")},insertNode:isFirefox?function(e,t){var n=t.closest("[contenteditable=true]");n&&n!==document.activeElement&&n.focus(),insertNode(e,t)}:insertNode,insertImage:function(e,t){var n=t.start().closest("a");if(n){var r=n.cloneNode(!0);r.empty(),r.appendChild(e);var o=insertNode(r,sel.selectNode(n));return o?o.querySelector("img"):console.log("unable to find replaced a")}return insertNode(e,t)}};

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}],11:[function(require,module,exports){
"use strict";function lightbox(t){modalContent.appendChild(/(.jpg|.png|.gif)$/.test(t)?h("img",{src:t}):/(.webm|.ogg|.mp4)$/.test(t)?h("video",{src:t,controls:!0,autoplay:!0}):h("iframe",{allowFullScreen:"",src:t})),modal.classList.add("active")}var _require=require("./"),h=_require.h,modalContent=h("div.content"),modal=document.body.appendChild(h("div.modal.lightbox",h("div",h("i.fa.fa-close").on("click",function(t){return close()}),modalContent)).on("click",function(t){return t.target===modal&&close()})),close=function(t){modal.classList.remove("active"),modalContent.empty()};lightbox.accepts=function(t){return/(\/embed|(.jpg|.png|.gif|.webm|.ogg|.mp4)$)/.test(t)},lightbox.listen=function(t){document.body.addEventListener("click",function(t){if(t.target.matches("a, a *")){var e=t.target.closest("a");if(e.matches("[contenteditable=true] a")){if(t.clientX<e.rect().right)return;"lightbox"===e.target&&lightbox.accepts(e.href)?lightbox(e.href):window.open(e.href)}else"lightbox"===e.target&&lightbox.accepts(e.href)&&(t.preventDefault(),lightbox(e.href))}})},module.exports=lightbox;

},{"./":10}],12:[function(require,module,exports){
"use strict";function parse(e){for(var t=r.createContextualFragment(e),a=[t.firstChild,t.firstChild.nextSibling,t.lastChild,t.lastChild.previousSibling],i=0;i<a.length;i++){var l=a[i];l&&l.nodeType>3&&l.remove()}filterChildren(t),exec("insertHTML",fragHtml(t))}function filterChildren(e){for(var t=e.firstElementChild;t;){var r=t.nextElementSibling,a=tags[t.tagName];if(a&&(keepEmptyTags[t.tagName]||t.textContent.trim()||t.querySelector("i.fa")))if(a.u){filterChildren(t);var i=createFrag(t);t.parentNode.replaceChild(i,t)}else if(a.r||"A"===t.tagName&&!t.href){var l=replaceElement(a.r||"SPAN",t);t.parentNode.replaceChild(l,t),filterAttributes(l,a),filterChildren(l)}else filterAttributes(t,a),filterChildren(t);else t.remove();t=r}}function filterAttributes(e,t){for(var r=0;r<e.attributes.length;){var a=e.attributes[r];"style"===a.name||"class"===a.name||t.a.indexOf(a.name)>=0?r++:e.removeAttribute(a.name)}for(var i={},l=0;l<e.style.length;l++){var s=e.style[l];t.s.indexOf(s)>=0&&(i[s]=e.style[s])}if(e.removeAttribute("style"),e.css(i),e.classList.length){var n,o=Array.from(e.classList);e.removeAttribute("class");var g=o.filter(function(e){return t.c.test(e)});(n=e.classList).add.apply(n,g)}}function fragHtml(e){var t=document.createElement("div");return t.appendChild(e),t.innerHTML}for(var _require=require("./"),replaceElement=_require.replaceElement,exec=_require.exec,createFrag=_require.createFrag,sel=getSelection(),tags={},_arr=["PRE","BLOCKQUOTE","P","H1","H2","H3","H4","H5","H6","UL","OL","LI","TBODY","THEAD","TH"],_i=0;_i<_arr.length;_i++){var t=_arr[_i];tags[t]={s:["text-align"],a:["id"],c:/test/}}for(var _arr2=["B","STRONG","I","EM","STRIKE","DEL","U","SUB","SUP","SPAN","A","CODE"],_i2=0;_i2<_arr2.length;_i2++){var _t=_arr2[_i2];tags[_t]={s:["color","background-color","font-size","font-family"],a:[],c:/^fa/}}for(var _arr3=["DIV","HEADER","FOOTER"],_i3=0;_i3<_arr3.length;_i3++){var _t2=_arr3[_i3];tags[_t2]={u:!0}}tags.SECTION=tags.ARTICLE=tags.ASIDE=tags.NAV=Object.assign({r:"P"},tags.P),tags.BUTTON=Object.assign({r:"SPAN"},tags.SPAN),tags.IMG={s:["float","width","height","margin"],a:["src"],c:/^fa/},tags.TABLE={s:["text-align","width","height","border-collapse","margin-top","margin-left","margin-right","background-color","border","border-color","border-width","border-style"],a:["id"],c:/res/},tags.TR={s:["text-align","height"],a:[],c:/test/},tags.TD={s:["text-align","width","height","padding","background-color","border","border-color","border-width","border-style"],a:[],c:/test/},tags.BR={s:[],a:[],c:/^fa/},tags.HR={s:[],a:[],c:/line|^fa/},tags.A={s:["background-color","color","font-size","font-family"],a:["href","target","rel"],c:/^fa/};var r=document.createRange();module.exports=function(){document.addEventListener("paste",function(e){if(e.target.closest("[contenteditable=true]")){if(window.disablePasteFilter)return console.log("paste filter disabled");var t=e.clipboardData.getData("text/html");t&&(e.preventDefault(),parse(t))}})};var keepEmptyTags={TD:!0,I:!0,IMG:!0,HR:!0,BR:!0};

},{"./":10}],13:[function(require,module,exports){
"use strict";function prettyChildren(e){var r=arguments.length<=1||void 0===arguments[1]?0:arguments[1];return[].filter.call(e.childNodes,function(e){return 3!==e.nodeType||!!e.textContent.trim()}).map(function(e){return prettyNode(e,r)}).join("\n")}function prettyNode(e){var r=arguments.length<=1||void 0===arguments[1]?0:arguments[1],t="	".repeat(r);if(e.attributes){var a=e.attributes.length?t+"<"+e.tagName.toLowerCase()+" "+Array.prototype.map.call(e.attributes,function(e){return e.name+'="'+e.value+'"'}).join(" ")+">":t+"<"+e.tagName.toLowerCase()+">";if("IMG"===e.tagName||"BR"===e.tagName||"HR"===e.tagName)return a;if(!e.childElementCount)return""+a+e.textContent.replace(/^[\n\t]+|[\n\t]+$/g,"")+"</"+e.tagName.toLowerCase()+">";t+"</"+e.tagName.toLowerCase()+">";return a+"\n"+prettyChildren(e,r+1)+"\n"+t+"</"+e.tagName.toLowerCase()+">"}return e.childElementCount,""+t+e.textContent.replace(/^[\n\t]+|[\n\t]+$/g,"")}var _require=require("./"),replaceElement=_require.replaceElement,createFrag=_require.createFrag,cfg=require("../../config.json"),reFontSizeName=new RegExp("("+Object.keys(cfg.fontsizeName).join("|")+")");module.exports=function(e){for(var r=e.querySelectorAll("b"),t=Array.isArray(r),a=0,r=t?r:r[Symbol.iterator]();;){var l;if(t){if(a>=r.length)break;l=r[a++]}else{if(a=r.next(),a.done)break;l=a.value}var n=l,o=replaceElement("strong",n);n.parentNode.replaceChild(o,n)}for(var i=e.querySelectorAll("i:not(.fa)"),f=Array.isArray(i),s=0,i=f?i:i[Symbol.iterator]();;){var y;if(f){if(s>=i.length)break;y=i[s++]}else{if(s=i.next(),s.done)break;y=s.value}var u=y,c=replaceElement("em",u);u.parentNode.replaceChild(c,u)}for(var v=e.querySelectorAll("strike"),g=Array.isArray(v),b=0,v=g?v:v[Symbol.iterator]();;){var m;if(g){if(b>=v.length)break;m=v[b++]}else{if(b=v.next(),b.done)break;m=b.value}var d=m,p=replaceElement("del",d);d.parentNode.replaceChild(p,d)}for(var A=e.querySelectorAll('[style*="font-size"]'),h=Array.isArray(A),k=0,A=h?A:A[Symbol.iterator]();;){var S;if(h){if(k>=A.length)break;S=A[k++]}else{if(k=A.next(),k.done)break;S=k.value}var N=S;N.style.fontSize=N.style.fontSize.replace(reFontSizeName,function(e){return cfg.fontsizeName[e]})}for(var C=e.querySelectorAll("font[size]"),q=Array.isArray(C),x=0,C=q?C:C[Symbol.iterator]();;){var z;if(q){if(x>=C.length)break;z=C[x++]}else{if(x=C.next(),x.done)break;z=x.value}var E=z;E.attributes.length>2&&console.log("warning, skipped other attrs on ff",E);var w=replaceElement("span",{style:{fontSize:cfg.fontsizeValue[E.size]}});E.parentNode.replaceChild(w,E)}for(var j=e.querySelectorAll('[style*="color: inherit"]'),F=Array.isArray(j),L=0,j=F?j:j[Symbol.iterator]();;){var R;if(F){if(L>=j.length)break;R=j[L++]}else{if(L=j.next(),L.done)break;R=L.value}var _=R;_.style.color="",_.style.length||_.removeAttribute("style")}for(var $=e.querySelectorAll('[style*="background-color: inherit"]'),B=Array.isArray($),G=0,$=B?$:$[Symbol.iterator]();;){var H;if(B){if(G>=$.length)break;H=$[G++]}else{if(G=$.next(),G.done)break;H=G.value}var I=H;I.style.backgroundColor="",I.style.length||I.removeAttribute("style")}for(var M=e.querySelectorAll('[class=""]'),O=Array.isArray(M),T=0,M=O?M:M[Symbol.iterator]();;){var V;if(O){if(T>=M.length)break;V=M[T++]}else{if(T=M.next(),T.done)break;V=T.value}var D=V;D.removeAttribute("class")}for(var J=e.querySelectorAll("div:not([style])"),K=Array.isArray(J),P=0,J=K?J:J[Symbol.iterator]();;){var Q;if(K){if(P>=J.length)break;Q=J[P++]}else{if(P=J.next(),P.done)break;Q=P.value}var U=Q,W=createFrag(U);U.parentNode.replaceChild(W,U)}return prettyChildren(e)};

},{"../../config.json":1,"./":10}],14:[function(require,module,exports){
"use strict";var max=Math.max;module.exports={addCol:function(r,n,e){for(var o,a=e?r[3]:r[1],t=0;t<n.length;t+=n[t][a].rowSpan){e&&n[t][a]===n[t][a+1]||!e&&n[t][a-1]===n[t][a]?(n[t][a].colSpan+=1,o=n[t][a]):(o=document.createElement("td"),1!==n[t][a].rowSpan&&(o.rowSpan=n[t][a].rowSpan));for(var l=0;l<n[t][a].rowSpan;l++)n[t+l].splice(a+e,0,o)}return e?r.slice():[r[0],r[1]+1,r[2],r[3]+1]},addRow:function(r,n,e){for(var o,a=[],t=e?r[2]:r[0],l=0;l<n[0].length;l+=n[t][l].colSpan){t<n.length-1&&e&&n[t][l]===n[t+1][l]||t>0&&!e&&n[t][l]===n[t-1][l]?(n[t][l].rowSpan+=1,o=n[t][l]):(o=document.createElement("td"),1!==n[t][l].colSpan&&(o.colSpan=n[t][l].colSpan));for(var c=0;c<n[t][l].colSpan;c++)a.push(o)}return n.splice(t+e,0,a),e?r.slice():[r[0]+1,r[1],r[2]+1,r[3]]},delRows:function(r,n){for(var e=r[0];e<=r[2];e++)for(var o=0;o<n[0].length;o+=n[e][o].colSpan)n[e][o].rowSpan=max(1,n[e][o].rowSpan-1);return n.splice(r[0],r[2]-r[0]+1),null},delCols:function(r,n){for(var e=r[1];e<=r[3];e++)for(var o=0;o<n.length;o+=n[o][e].rowSpan)n[o][e].colSpan=max(1,n[o][e].colSpan-1);for(var a=0;a<n.length;a++)n[a].splice(r[1],r[3]-r[1]+1);return null},merge:function(r,n){if(n[r[2]][r[3]]===n[r[0]][r[1]])return this.unmerge(r,n);for(var e=n[r[0]][r[1]],o="",a=0,t=r[0];t<=r[2];t++)for(var l=r[1];l<=r[3];l+=n[t][l].colSpan)n[t][l].parentNode.rowIndex===t&&(o+=n[t][l].innerHTML+" ");for(var c=r[1];c<=r[3];c+=n[r[0]][c].colSpan)a+=parseFloat(n[r[0]][c].style.width);for(var p=r[0];p<=r[2];p++)for(var s=r[1];s<=r[3];s++)p===r[0]&&s===r[1]||(n[p][s]=e);return e.attr({rowspan:r[2]-r[0]+1,colspan:r[3]-r[1]+1}).innerHTML=o.replace(/(\s*<br>\s*)+/g,"<br>"),r.slice()},unmerge:function(r,n){var e=n[r[0]][r[1]];e.style.width.endsWith("%")?parseFloat(e.style.width)/e.colSpan:null;e.removeAttribute("rowspan"),e.removeAttribute("colspan");for(var o=r[0];o<=r[2];o++)for(var a=r[1];a<=r[3];a++)o===r[0]&&a===r[1]||(n[o][a]=document.createElement("td"));return r.slice()},cellStyle:function(r,n,e){for(var o=r[0];o<=r[2];o++)for(var a=r[1];a<=r[3];a+=n[o][a].colSpan)n[o][a].parentNode.rowIndex===o&&n[o][a].css(e);return r.slice()}};

},{}],15:[function(require,module,exports){
"use strict";function highlightCells(e,t){for(var n=e.t.querySelectorAll("tr > .selected"),r=Array.isArray(n),a=0,n=r?n:n[Symbol.iterator]();;){var o;if(r){if(a>=n.length)break;o=n[a++]}else{if(a=n.next(),a.done)break;o=a.value}var l=o;l.classList.remove("selected")}for(var i=t[0];i<=t[2];i++)for(var d=t[1];d<=t[3];d+=e[i][d].colSpan)e[i][d].parentNode.rowIndex===i&&e[i][d].classList.add("selected")}function clearCells(){for(var e=document.body.querySelectorAll("[contenteditable=true] tr > .selected"),t=Array.isArray(e),n=0,e=t?e:e[Symbol.iterator]();;){var r;if(t){if(n>=e.length)break;r=e[n++]}else{if(n=e.next(),n.done)break;r=n.value}var a=r;a.classList.remove("selected")}}function getTableSelection(e,t,n){var r=t.parentNode.rowIndex,a=e[r].indexOf(t);if(t===n)return[r,a,r+t.rowSpan-1,a+t.colSpan-1];var o=n.parentNode.rowIndex,l=e[o].indexOf(n);if(r>o){var i=[o,r];r=i[0],o=i[1]}if(a>l){var d=[l,a];a=d[0],l=d[1]}return expandSelection(e,[r,a,o,l])}function expandSelection(e,t){var n=void 0;do{n=t.slice();for(var r=n[0],a=n[1];a<=n[3];a++)t[0]=min(t[0],e[r][a].parentNode.rowIndex);for(var o=n[0],l=n[1];o<=n[2];o++)t[1]=min(t[1],e[o].indexOf(e[o][l]));for(var i=n[2],d=n[1];d<=n[3];d++)t[2]=max(t[2],e[i][d].parentNode.rowIndex+e[i][d].rowSpan-1);for(var c=n[0],s=n[3];c<=n[2];c++)t[3]=max(t[3],e[c].indexOf(e[c][s])+e[c][s].colSpan-1)}while(n>t||t>n);return t}var _require=require("./"),tableToMatrix=_require.tableToMatrix,min=Math.min,max=Math.max;module.exports=function(){var e,t,n,r={t:null},a=!1;document.body.addEventListener("mouseenter",function(l){if(e){t=l.target.closest("[contenteditable=true] td, [contenteditable=true] th");var i=e.closest("table");t&&i===t.closest("table")&&(n=getTableSelection(r,e,t),o({type:"enter",s:n,M:r,anchor:e,focus:t}),highlightCells(r,n),a=!0)}},!0),document.body.addEventListener("mousedown",function(t){if(e=t.target.closest("[contenteditable=true] td, [contenteditable=true] th"),a&&(clearCells(),a=!1),e){var l=e.closest("table");l!==r.t&&(r=tableToMatrix(l)),n=getTableSelection(r,e,e)}else n=null;o({type:"start",s:n,M:r,anchor:e,target:t.target})}),document.addEventListener("mouseup",function(a){e&&o({type:"end",s:n,M:r,anchor:e,focus:t,target:a.target}),e=null}),document.addEventListener("drop",function(t){e=null}),document.addEventListener("dragend",function(t){e=null}),document.addEventListener("keydown",function(e){a&&(clearCells(),a=!1)});var o=function(e){return document.dispatchEvent(new CustomEvent("tableselectionchange",{detail:e}))}};

},{"./":10}],16:[function(require,module,exports){
(function (global){
"use strict";var React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),_require=require("../utils/"),v=_require.v,h=_require.h,exec=_require.exec,dropdown=_require.dropdown,dropdownChange=_require.dropdownChange,sel=getSelection();module.exports=React.createClass({shouldComponentUpdate:function(){return!1},change:dropdownChange,componentDidMount:function(){var e=this,r=document.querySelector("link#fontawesome");if(r){var t=function(){if(i){if(a>=n.length)return"break";s=n[a++]}else{if(a=n.next(),a.done)return"break";s=a.value}var r=s,t=r.selectorText;if(!t)return"continue";var c=t.match(/\.fa-([\w-]+)::before/);c&&e.refs.icons.appendChild(h("i",{className:"fa fa-"+c[1],title:c[1]}).on("click",function(r){return e.insert(c[1])}))};e:for(var n=r.sheet.cssRules,i=Array.isArray(n),a=0,n=i?n:n[Symbol.iterator]();;){var s,c=t();switch(c){case"break":break e;case"continue":continue}}document.body.addEventListener("click",function(r){r.target.matches("i.fa")&&r.target.closest("[contenteditable=true]")&&(sel.setRange(sel.selectNode(r.target)),e.refs.el.firstChild.checked=!0,e.change({target:e.refs.el.firstChild}))})}},insert:function(e){exec("insertHTML",'<i class="fa fa-'+e+'">&thinsp;</i>&thinsp;'),this.refs.el.firstChild.checked=!1,this.change({target:this.refs.el.firstChild})},render:function(){return dropdown({name:"icon-picker",onChange:this.change,label:v("i",{className:"fa fa-fonticons"}),content:v("div",{ref:"icons",className:"scroll"})})}});

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"../utils/":10}],17:[function(require,module,exports){
(function (global){
"use strict";var React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),_require=require("../utils/"),v=_require.v,StyleWidget=require("./StyleWidget.js"),StyleColorWidget=require("./StyleColorWidget.js"),sides=["border","borderTop","borderRight","borderBottom","borderLeft"];module.exports=React.createClass({shouldComponentUpdate:function(e,t){return Boolean(e.el)&&(this.props.el!==e.el||t.idx!==this.state.idx)},getInitialState:function(){return{idx:0}},render:function(){var e=this,t=this.state.idx,r=sides[t],i=this.props,d=i.el,l=i.tab,o=i.cmd,s=i.palette,a=i.borderWidth,n=i.borderStyle;return v("div",{className:"row"},v("span",{onClick:function(r){return e.setState({idx:(t+1)%sides.length})}},r),v(StyleColorWidget,{name:r+"Color",tab:l,cmd:o,el:d,values:s}),v(StyleWidget,{name:r+"Width",tab:l,cmd:o,el:d,values:a}),v(StyleWidget,{name:r+"Style",tab:l,cmd:o,el:d,values:n}))}});

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"../utils/":10,"./StyleColorWidget.js":18,"./StyleWidget.js":19}],18:[function(require,module,exports){
(function (global){
"use strict";var React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),_require=require("../utils/"),v=_require.v,dropdown=_require.dropdown,dropdownChange=_require.dropdownChange;module.exports=React.createClass({shouldComponentUpdate:function(e){return Boolean(e.el)&&(this.props.el!==e.el||this.props.name!==e.name)},change:dropdownChange,cmd:function(e){this.props.cmd(e),this.refs.el.firstChild.checked=!1,this.change({target:this.refs.el.firstChild})},render:function(){var e=this,r=this.props,t=r.name,n=r.tab,a=r.el,o=r.values,s=a?a.style[t]:"gray";return dropdown({name:t+n,onChange:this.change,label:v("i",{className:"fa fa-tint",style:{color:s}}),content:v("div",{className:"palette sm"},o.map(function(r,n){return v("button",{key:n,className:r===s?"selected":null,onMouseUp:function(n){var a;return e.cmd((a={},a[t]=r,a))},style:{backgroundColor:r}})}),v("button",{onMouseUp:function(r){var n;return e.cmd((n={},n[t]="",n))}},v("i",{className:"fa fa-eraser"})))})}});

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"../utils/":10}],19:[function(require,module,exports){
(function (global){
"use strict";var React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),_require=require("../utils/"),v=_require.v,dropdown=_require.dropdown,dropdownChange=_require.dropdownChange;module.exports=React.createClass({shouldComponentUpdate:function(e){return Boolean(e.el)&&(this.props.el!==e.el||this.props.name!==e.name)},change:dropdownChange,cmd:function(e){this.props.cmd(e),this.refs.el.firstChild.checked=!1,this.change({target:this.refs.el.firstChild})},render:function(){var e=this,r=this.props,t=r.name,n=r.tab,o=void 0===n?"":n,s=r.el,a=r.values,i=s?s.style[t]||getComputedStyle(s)[t]:"";return dropdown({name:t+o,onChange:this.change,label:this.props.label||i,content:v("ul",{className:"scroll"},a.map(function(r,n){return v("li",{key:n,className:r===i?"selected":null,onClick:function(n){var o;return e.cmd((o={},o[t]=r,o))}},r)}))})}});

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"../utils/":10}],20:[function(require,module,exports){
(function (global){
"use strict";var React=(typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null),_require=require("../utils/"),v=_require.v,h=_require.h,_createTable=_require.createTable,dropdown=_require.dropdown,dropdownChange=_require.dropdownChange,min=Math.min,max=Math.max;module.exports=React.createClass({shouldComponentUpdate:function(){return!1},change:function(e){var r=e.target;r.checked&&this.update(this.t,0,0),dropdownChange({target:r})},update:function(e,r,t){for(var a=0;r>=a;a++){e.rows[a].className="active";for(var s=0;t>=s;s++)e.rows[a].cells[s].className="active selected";e.rows[a].cells[t+1]&&(e.rows[a].cells[t+1].className="")}if(e.rows[r+1]){e.rows[r+1].className="";for(var s=0;t>=s;s++)e.rows[r+1].cells[s].className="active";e.rows[r+1].cells[t+1]&&(e.rows[r+1].cells[t+1].className="")}this.refs.value.textContent=r+1+" x "+(t+1)},createTable:function(e,r){_createTable(e,r),this.refs.el.firstChild.checked=!1,this.change({target:this.refs.el.firstChild})},componentDidMount:function(){var e=this;this.t=this.refs.picker.add(Array.from({length:this.props.cfg.m_max},function(r,t){return h("tr",Array.from({length:e.props.cfg.n_max},function(r,a){return h("td",h("span")).on("click",function(r){return e.createTable(t,a)}).on("mouseenter",function(r){return e.update(e.t,t,a)})}))})),this.update(this.t,0,0)},render:function(){return dropdown({name:"table-picker",onChange:this.change,label:v("i",{className:"fa fa-table"}),content:v("div",v("table",{ref:"picker"}),v("div",{className:"table-picker-value",ref:"value"}))})}});

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"../utils/":10}]},{},[2])(2)
});


if (!localStorage.wysiUrls) localStorage.wysiUrls = JSON.stringify({
	links: [
		{url:'https://google.com', title:'Google'},
		{url:'https://youtube.com', title:'Youtube'},
		{url:'http://john.site.com/contact', title:'Contact me', tag:'something'},
		{url:'http://static.site.com/s/1122/dummy.pdf', title:'dummy 1', tag:'test'},
		{url:'http://www.roeland.be/media/staging/content/config/dummy.pdf', title:'dummy 2', tag:'test'}],
	imgs: [
		{url: `http://images.aviary.com/imagesv5/feather_default.jpg`, title:'Aviary'},
		{url:`http://i1089.photobucket.com/albums/i348/2L2L2L/test/RIMG0006.jpg`, title:'Cool'},
		{url:`http://i211.photobucket.com/albums/bb148/FlashPlayerQA/Halloween/Haunt2006/test/200832174644219.jpg`, title:'Indonesia'},
		...Array.from({length:9},(_,i)=>({url:`http://placekitten.com/600/${400+Math.round(100*Math.random())}?image=${i+1}#.jpg`, title:`Cat ${i+1}`}))
]});

var wapp = ReactDOM.render( React.createElement(wysi), document.getElementById('wysi-app') );

toggleedit.addEventListener('change', e=>{
	for (let el of document.querySelectorAll('[contenteditable]'))
		el.contentEditable=e.target.checked;
});
let tb = wapp.refs.tb.refs.el;
for (let el of document.querySelectorAll('.text.xs')){
	el.on('focus', e=>tb.classList.add('xs')).on('wysi.blur', e=>tb.classList.remove('xs'));
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console