agregar editor

app/assets/javascripts/01-types.js

@@ -0,0 +1,182 @@
+// TODO: minimizar complejidad utilizando selectores css/querySelector
+
+const marks = {
+	bold: {
+		checkFn: el => el.tagName === "STRONG",
+		createFn: () => document.createElement("STRONG"),
+	},
+	italic: {
+		checkFn: el => el.tagName === "EM",
+		createFn: () => document.createElement("EM"),
+	},
+	deleted: {
+		checkFn: el => el.tagName === "DEL",
+		createFn: () => document.createElement("DEL"),
+	},
+	underline: {
+		checkFn: el => el.tagName === "U",
+		createFn: () => document.createElement("U"),
+	},
+	mark: {
+		checkFn: el => el.tagName === "MARK",
+		createFn: () => document.createElement("MARK"),
+	},
+}
+
+const tagNameSetFn = tagName => el => {
+	const newEl = document.createElement(tagName)
+	moveChildren(el, newEl, null)
+	el.parentNode.insertBefore(newEl, el)
+	el.parentNode.removeChild(el)
+	window.getSelection().collapse(newEl, 0)
+}
+
+const blocks = {
+	p: {
+		noButton: true,
+		checkFn: el => el.tagName == "P",
+		setFn: tagNameSetFn("P"),
+	},
+	h1: {
+		checkFn: el => el.tagName == "H1",
+		setFn: tagNameSetFn("H1"),
+	},
+	h2: {
+		checkFn: el => el.tagName == "H2",
+		setFn: tagNameSetFn("H2"),
+	},
+	h3: {
+		checkFn: el => el.tagName == "H3",
+		setFn: tagNameSetFn("H3"),
+	},
+	h4: {
+		checkFn: el => el.tagName == "H4",
+		setFn: tagNameSetFn("H4"),
+	},
+	h5: {
+		checkFn: el => el.tagName == "H5",
+		setFn: tagNameSetFn("H5"),
+	},
+	h6: {
+		checkFn: el => el.tagName == "H6",
+		setFn: tagNameSetFn("H6"),
+	},
+	ul: {
+		checkFn: el => el.tagName == "UL",
+		setFn: tagNameSetFn("UL"),
+	},
+	ol: {
+		checkFn: el => el.tagName == "OL",
+		setFn: tagNameSetFn("OL"),
+	},
+	img: {
+		checkFn: el => el.tagName == "IMG",
+		createFn: editorEl => {
+			const imgEl = document.createElement("IMG")
+			imgEl.src = "https://radio.sutty.nl/public/placeholder_992x992.png"
+			imgEl.alt = "Un hermoso álbum"
+			return imgEl
+		},
+	},
+}
+
+const divWithStyleCreateFn = styleFn => () => {
+	const el = document.createElement("DIV")
+	styleFn(el)
+	return el
+}
+
+const parentBlocks = {
+	left: {
+		checkFn: el => el.tagName === "DIV" && el.dataset.align === "left",
+		createFn: divWithStyleCreateFn(el => el.dataset.align = "left"),
+	},
+	center: {
+		checkFn: el => el.tagName === "DIV" && el.dataset.align === "center",
+		createFn: divWithStyleCreateFn(el => el.dataset.align = "center"),
+	},
+	right: {
+		checkFn: el => el.tagName === "DIV" && el.dataset.align === "right",
+		createFn: divWithStyleCreateFn(el => el.dataset.align = "right"),
+	},
+}
+
+// https://stackoverflow.com/a/3627747
+// TODO: cambiar por una solución más copada
+function rgb2hex(rgb) {
+	rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+	function hex(x) {
+		return ("0" + parseInt(x).toString(16)).slice(-2);
+	}
+	return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+}
+
+// Encuentra lx primer hijx que esté en la selección que cumpla con checkFn
+const findRecursiveChild = (checkFn, node) => {
+	if (checkFn(node) && window.getSelection().containsNode(node)) return node
+	for (const child of node.childNodes) {
+		const result = findRecursiveChild(checkFn, child)
+		if (result) return result
+	}
+}
+
+const getSelected = contentEl => contentEl.querySelector(".selected")
+
+const typesWithProperties = {
+	mark: {
+		checkFn: marks.mark.checkFn,
+		updateInput (el, editorEl) {
+			const markColorInputEl = editorEl.querySelector("#mark-color")
+			markColorInputEl.disabled = false
+			markColorInputEl.value = el.style.backgroundColor ? rgb2hex(el.style.backgroundColor) : "#f206f9"
+		},
+		disableInput (editorEl) {
+			const markColorInputEl = editorEl.querySelector("#mark-color")
+			markColorInputEl.disabled = true
+			markColorInputEl.value = "#000000"
+		},
+		setupInput (editorEl, contentEl) {
+			const markColorInputEl = editorEl.querySelector("#mark-color")
+			markColorInputEl.addEventListener("change", event => {
+				const markEl = findRecursiveChild(marks.mark.checkFn, contentEl)
+				if (markEl) markEl.style.backgroundColor = markColorInputEl.value
+			}, false)
+		},
+	},
+	img: {
+		checkFn: blocks.img.checkFn,
+		updateInput (el, editorEl) {
+			const imgSrcEl = editorEl.querySelector("#img-src")
+			imgSrcEl.disabled = false
+			imgSrcEl.value = el.src
+
+			const imgAltEl = editorEl.querySelector("#img-alt")
+			imgAltEl.disabled = false
+			imgAltEl.value = el.alt
+		},
+		disableInput (editorEl) {
+			const imgSrcEl = editorEl.querySelector("#img-src")
+			imgSrcEl.disabled = true
+			imgSrcEl.value = ""
+
+			const imgAltEl = editorEl.querySelector("#img-alt")
+			imgAltEl.disabled = true
+			imgAltEl.value = ""
+		},
+		setupInput (editorEl, contentEl) {
+			const imgSrcEl = editorEl.querySelector("#img-src")
+			imgSrcEl.addEventListener("input", event => {
+				// const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl)
+				const imgEl = getSelected(contentEl)
+				if (imgEl) imgEl.src = imgSrcEl.value
+			}, false)
+
+			const imgAltEl = editorEl.querySelector("#img-alt")
+			imgAltEl.addEventListener("input", event => {
+				// const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl)
+				const imgEl = getSelected(contentEl)
+				if (imgEl) imgEl.alt = imgAltEl.value
+			}, false)
+		},
+	},
+}

app/assets/javascripts/02-editor.js

@@ -0,0 +1,422 @@
+const origin = "http://panel.sutty.local:3000" || location.origin
+
+function uploadFile (file) {
+	return new Promise((resolve, reject) => {
+		const upload = new ActiveStorage.DirectUpload(
+			file,
+			origin + '/rails/active_storage/direct_uploads',
+		)
+
+		upload.create((error, blob) => {
+			if (error) {
+				reject(error)
+			} else {
+				const url = `${origin}/rails/active_storage/blobs/${blob.signed_id}/${blob.filename}`
+				resolve(url)
+			}
+		})
+	})
+}
+
+function moveChildren (from, to, toRef) {
+	while (from.firstChild) to.insertBefore(from.firstChild, toRef);
+}
+
+function isDirectChild (node, supposedChild) {
+	for (const child of node.childNodes) {
+		if (child == supposedChild) return true
+	}
+}
+
+function isChildSelection (sel, el) {
+	return (
+		(el.contains(sel.anchorNode) || el.contains(sel.focusNode))
+		&& !(sel.anchorNode == el || sel.focusNode == el)
+	)
+}
+
+function getElementParent (node) {
+	let parentEl = node
+	while (parentEl.nodeType != Node.ELEMENT_NODE) parentEl = parentEl.parentElement
+	return parentEl
+}
+
+function splitNode (node, range) {
+	const [left, right] = [
+		{ range: document.createRange(), node: node.cloneNode(false) },
+		{ range: document.createRange(), node: node.cloneNode(false) },
+	]
+
+	left.range.setStartBefore(node.firstChild)
+	left.range.setEnd(range.startContainer, range.startOffset)
+	left.range.surroundContents(left.node)
+
+	right.range.setStart(range.endContainer, range.endOffset)
+	right.range.setEndAfter(node.lastChild)
+	right.range.surroundContents(right.node)
+
+	//left.node.appendChild(left.range.extractContents())
+	//left.range.insertNode(left.node)
+
+	//right.node.appendChild(right.range.extractContents())
+	//right.range.insertNode(right.node)
+
+	moveChildren(node, node.parentNode, node)
+	node.parentNode.removeChild(node)
+
+	return [left, right]
+}
+
+/* Configura un botón que hace una acción inline (ej: negrita).
+ * Parametros:
+ *  * button:		el botón
+ *  * mark:			un objeto que representa el tipo de acción (ver types.js)
+ *  * contentEl:	el elemento de contenido del editor.
+ */
+function setupMarkButton (button, mark, contentEl) {
+	button.addEventListener("click", event => {
+		event.preventDefault()
+
+		const sel = window.getSelection()
+		if (!isChildSelection(sel, contentEl)) return
+
+		let parentEl = getElementParent(sel.anchorNode)
+		//if (sel.anchorNode == parentEl) parentEl = parentEl.firstChild
+		const parentChildren = Array.from(parentEl.childNodes)
+
+		const range = sel.getRangeAt(0)
+
+		if (mark.checkFn(parentEl)) {
+			const [left, right] = splitNode(parentEl, range)
+			right.range.insertNode(range.extractContents())
+
+			const selectionRange = document.createRange()
+			selectionRange.setStartAfter(left.node)
+			selectionRange.setEndBefore(right.node)
+			sel.removeAllRanges()
+			sel.addRange(selectionRange)
+		} else {
+			for (const child of parentChildren) {
+				if (mark.checkFn(child) && sel.containsNode(child)) {
+					moveChildren(child, parentEl, child)
+					parentEl.removeChild(child)
+					// TODO: agregar a selección
+					return
+				}
+			}
+
+			const tagEl = mark.createFn()
+
+			try {
+				range.surroundContents(tagEl)
+			} catch (error) {
+				// TODO: mostrar error
+				return console.error("No puedo marcar cosas a través de distintos bloques!")
+			}
+
+			for (const child of tagEl.childNodes) {
+				if (mark.checkFn(child)) {
+					moveChildren(child, tagEl, child)
+					tagEl.removeChild(child)
+				}
+			}
+
+			range.insertNode(tagEl)
+			range.selectNode(tagEl)
+		}
+	})
+}
+
+/* Igual que `setupMarkButton` pero para bloques. */
+function setupBlockButton (button, block, contentEl, editorEl) {
+	button.addEventListener("click", event => {
+		event.preventDefault()
+
+		const sel = window.getSelection()
+		// TODO: mostrar error
+		if (
+			!contentEl.contains(sel.anchorNode)
+			|| !contentEl.contains(sel.focusNode)
+			|| sel.anchorNode == contentEl
+			|| sel.focusNode == contentEl
+		) return
+
+		const range = sel.getRangeAt(0)
+
+		let parentEl = sel.anchorNode
+		while (!isDirectChild(contentEl, parentEl)) parentEl = parentEl.parentElement
+
+		if (block.setFn) {
+			if (block.checkFn(parentEl)) {
+				tagNameSetFn("P")(parentEl)
+			} else {
+				block.setFn(parentEl)
+			}
+		} else if (block.createFn) {
+			const newEl = block.createFn(editorEl)
+			parentEl.parentElement.insertBefore(newEl, parentEl.nextSibling)
+		}
+	})
+}
+
+/* Igual que `setupBlockButton` pero para bloques parientes. */
+function setupParentBlockButton (button, parentBlock, contentEl) {
+	button.addEventListener("click", event => {
+		event.preventDefault()
+
+		const sel = window.getSelection()
+		if (
+			!contentEl.contains(sel.anchorNode)
+			|| !contentEl.contains(sel.focusNode)
+			|| sel.anchorNode == contentEl
+			|| sel.focusNode == contentEl
+		) return
+
+		const range = sel.getRangeAt(0)
+
+		let parentEl = sel.anchorNode
+		while (!isDirectChild(contentEl, parentEl)) parentEl = parentEl.parentElement
+
+		if (parentBlock.checkFn(parentEl)) {
+			moveChildren(parentEl, parentEl.parentElement, parentEl)
+			parentEl.parentElement.removeChild(parentEl)
+		} else if (elementIsParentBlock(parentEl)) {
+			const el = parentBlock.createFn()
+			moveChildren(parentEl, el, null)
+			parentEl.parentElement.insertBefore(el, parentEl)
+			parentEl.parentElement.removeChild(parentEl)
+		} else {
+			const el = parentBlock.createFn()
+			parentEl.parentElement.insertBefore(el, parentEl)
+			el.appendChild(parentEl)
+		}
+	})
+}
+
+const elementIsTypes = types => element => {
+	for (const type of Object.values(types)) {
+		if (type.checkFn(element)) return true
+	}
+	return false
+}
+const elementIsBlock = elementIsTypes(blocks)
+const elementIsParentBlock = elementIsTypes(parentBlocks)
+
+function hasContent (element) {
+	if (element.firstElementChild) return true
+	for (const child of element.childNodes) {
+		if (child.nodeType === Node.TEXT_NODE && child.data.length > 0) return true
+		else if (child.hasChildNodes() && hasContent(child)) return true
+	}
+	// TODO: verificar que la imágen tiene contenido
+	if (element.tagName === "IMG") return true
+	return false
+}
+
+/* Limpia el elemento de contenido del editor
+ * Por ahora:
+ *  * Cambia el tag de los bloques no reconocidos (ver `elementIsBlock`)
+ *  * Hace lo que hace cleanNode
+ */
+function cleanContent (contentEl) {
+	const sel = window.getSelection()
+
+	cleanNode(contentEl)
+
+	for (const child of contentEl.childNodes) {
+		if (child.tagName) {
+			if (elementIsParentBlock(child)) {
+				cleanContent(child)
+			} else if (!elementIsBlock(child)) {
+				child.tagName = "P"
+			}
+		}
+	}
+}
+
+/* Arregla cosas en el elemento de contendo del editor
+ * Por ahora:
+ *  * Crea un p y inserta la selección si no hay elementos
+ *  * Wrappea el contenido de un UL o OL en un LI si no lo está
+ */
+function fixContent (contentEl) {
+	if (!contentEl.firstChild) {
+		const newEl = document.createElement("p")
+		contentEl.appendChild(newEl)
+		window.getSelection().collapse(newEl)
+	}
+
+	for (const child of contentEl.childNodes) {
+		if (child.tagName) {
+			if (elementIsParentBlock(child)) {
+				fixContent(child)
+			} else if (child.tagName === "UL" || child.tagName === "OL") {
+				let notItems = []
+				for (const item of child.childNodes) {
+					if (item.tagName !== "LI") notItems.push(item)
+				}
+				if (notItems.length) {
+					const item = document.createElement("li")
+					item.append(...notItems)
+					child.appendChild(item)
+				}
+			}
+		}
+	}
+}
+
+/* Recursivamente "limpia" los nodos a partir del llamado.
+ * Por ahora:
+ *  * Junta nodos de texto que están al lado
+ *  * Junta nodos de la misma "mark" que están al lado
+ *  * Borra elementos sin contenido (ver `hasContent`) y no están seleccionados
+ */
+function cleanNode (node) {
+	for (const child of node.childNodes) {
+		if (child.nodeType === Node.TEXT_NODE) {
+			if (child.nextSibling && child.nextSibling.nodeType === Node.TEXT_NODE) {
+				// Juntar nodos
+				child.data += child.nextSibling.data
+				child.parentNode.removeChild(child.nextSibling)
+			}
+		} else if (child.nodeType === Node.ELEMENT_NODE) {
+			if (!hasContent(child) && !window.getSelection().getRangeAt(0).intersectsNode(child))
+				child.parentNode.removeChild(child)
+
+			for (const mark of Object.values(marks)) {
+				if (mark.checkFn(child) && child.nextSibling && mark.checkFn(child.nextSibling)) {
+					moveChildren(child.nextSibling, child, null)
+					child.nextSibling.parentNode.removeChild(child.nextSibling)
+				}
+			}
+		}
+		cleanNode(child)
+	}
+}
+
+function setupEditor (editorEl) {
+	const contentEl = editorEl.querySelector(".editor-content")
+
+	contentEl.addEventListener("keydown", event => {
+		if (event.keyCode === 13) { // Enter
+			event.preventDefault()
+			const sel = window.getSelection()
+
+			let parentEl = sel.anchorNode
+			if (parentEl == contentEl) {
+				const newEl = document.createElement("p")
+				contentEl.appendChild(newEl)
+				sel.collapse(newEl)
+			} else if (contentEl.contains(parentEl)) {
+				while ((parentEl.nodeType == Node.TEXT_NODE || !elementIsBlock(parentEl)) && parentEl != contentEl)
+					parentEl = parentEl.parentElement
+
+				if (parentEl == contentEl) parentEl = parentEl.firstChild
+
+				console.log(parentEl)
+
+				let newEl
+				switch (parentEl.tagName) {
+				case "UL":
+				case "OL":
+					newEl = document.createElement("li")
+
+					let itemEl = sel.anchorNode
+					while (itemEl.tagName !== "LI" && parentEl.contains(itemEl)) itemEl = itemEl.parentElement
+
+					parentEl.insertBefore(newEl, itemEl && parentEl.contains(itemEl) && itemEl.nextSibling || null)
+					break
+				default:
+					newEl = document.createElement("p")
+					contentEl.insertBefore(newEl, parentEl.nextSibling || null)
+				}
+
+				sel.collapse(newEl)
+			}
+		} else if (event.keyCode === 32) { // Espacio
+			event.preventDefault()
+			const sel = window.getSelection()
+			const range = sel.getRangeAt(0)
+			range.insertNode(document.createTextNode("\xa0"))
+			cleanContent(contentEl)
+			range.collapse()
+		}
+	})
+	document.addEventListener("selectionchange", event => {
+		cleanContent(contentEl)
+
+		const sel = window.getSelection()
+		const range = sel.getRangeAt(0)
+
+		for (const [name, type] of Object.entries(typesWithProperties)) {
+			const result = findRecursiveChild(type.checkFn, range.commonAncestorContainer)
+			if (result) {
+				type.updateInput(result, editorEl)
+				result.classList.add("selected")
+			} else {
+				if (!contentEl.contains(range.commonAncestorContainer)) return
+				type.disableInput(editorEl)
+				for (const el of contentEl.querySelectorAll(".selected")) {
+					el.classList.remove("selected")
+				}
+			}
+		}
+	})
+
+	const htmlEl = editorEl.querySelector("textarea")
+	const observer = new MutationObserver((mutationList, observer) => {
+		cleanContent(contentEl)
+		htmlEl.value = contentEl.innerHTML
+		fixContent(contentEl)
+	})
+	observer.observe(contentEl, {
+		childList: true,
+		attributes: true,
+		subtree: true,
+		characterData: true,
+	})
+
+	const editorBtn = id => editorEl.querySelector(`#${id}-button`)
+
+	const tagNameSetFn = tagName => el => {
+		const newEl = document.createElement(tagName)
+		moveChildren(el, newEl, null)
+		el.parentNode.insertBefore(newEl, el)
+		el.parentNode.removeChild(el)
+		window.getSelection().collapse(newEl, 0)
+	}
+
+	// == SETUP BUTTONS ==
+	for (const [name, mark] of Object.entries(marks)) {
+		setupMarkButton(editorBtn(name), mark, contentEl)
+	}
+
+	for (const [name, block] of Object.entries(blocks)) {
+		if (block.noButton) continue
+		setupBlockButton(editorBtn(name), block, contentEl, editorEl)
+	}
+
+	for (const [name, parentBlock] of Object.entries(parentBlocks)) {
+		if (parentBlock.noButton) continue
+		setupParentBlockButton(editorBtn(name), parentBlock, contentEl)
+	}
+
+	for (const [name, type] of Object.entries(typesWithProperties)) {
+		type.setupInput(editorEl, contentEl)
+	}
+
+	cleanContent(contentEl)
+	htmlEl.value = contentEl.innerHTML
+}
+
+// TODO: por ahora confiamos, quizás queremos filtrar estilos?
+function stringifyAllowedStyle (element) {
+	return element.style.cssText
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+	for (const editorEl of document.querySelectorAll(".editor")) {
+		setupEditor(editorEl)
+	}
+})
+

app/assets/javascripts/activestorage.js

@@ -0,0 +1,942 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define([ "exports" ], factory) : factory(global.ActiveStorage = {});
+})(this, function(exports) {
+  "use strict";
+  function createCommonjsModule(fn, module) {
+    return module = {
+      exports: {}
+    }, fn(module, module.exports), module.exports;
+  }
+  var sparkMd5 = createCommonjsModule(function(module, exports) {
+    (function(factory) {
+      {
+        module.exports = factory();
+      }
+    })(function(undefined) {
+      var hex_chr = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f" ];
+      function md5cycle(x, k) {
+        var a = x[0], b = x[1], c = x[2], d = x[3];
+        a += (b & c | ~b & d) + k[0] - 680876936 | 0;
+        a = (a << 7 | a >>> 25) + b | 0;
+        d += (a & b | ~a & c) + k[1] - 389564586 | 0;
+        d = (d << 12 | d >>> 20) + a | 0;
+        c += (d & a | ~d & b) + k[2] + 606105819 | 0;
+        c = (c << 17 | c >>> 15) + d | 0;
+        b += (c & d | ~c & a) + k[3] - 1044525330 | 0;
+        b = (b << 22 | b >>> 10) + c | 0;
+        a += (b & c | ~b & d) + k[4] - 176418897 | 0;
+        a = (a << 7 | a >>> 25) + b | 0;
+        d += (a & b | ~a & c) + k[5] + 1200080426 | 0;
+        d = (d << 12 | d >>> 20) + a | 0;
+        c += (d & a | ~d & b) + k[6] - 1473231341 | 0;
+        c = (c << 17 | c >>> 15) + d | 0;
+        b += (c & d | ~c & a) + k[7] - 45705983 | 0;
+        b = (b << 22 | b >>> 10) + c | 0;
+        a += (b & c | ~b & d) + k[8] + 1770035416 | 0;
+        a = (a << 7 | a >>> 25) + b | 0;
+        d += (a & b | ~a & c) + k[9] - 1958414417 | 0;
+        d = (d << 12 | d >>> 20) + a | 0;
+        c += (d & a | ~d & b) + k[10] - 42063 | 0;
+        c = (c << 17 | c >>> 15) + d | 0;
+        b += (c & d | ~c & a) + k[11] - 1990404162 | 0;
+        b = (b << 22 | b >>> 10) + c | 0;
+        a += (b & c | ~b & d) + k[12] + 1804603682 | 0;
+        a = (a << 7 | a >>> 25) + b | 0;
+        d += (a & b | ~a & c) + k[13] - 40341101 | 0;
+        d = (d << 12 | d >>> 20) + a | 0;
+        c += (d & a | ~d & b) + k[14] - 1502002290 | 0;
+        c = (c << 17 | c >>> 15) + d | 0;
+        b += (c & d | ~c & a) + k[15] + 1236535329 | 0;
+        b = (b << 22 | b >>> 10) + c | 0;
+        a += (b & d | c & ~d) + k[1] - 165796510 | 0;
+        a = (a << 5 | a >>> 27) + b | 0;
+        d += (a & c | b & ~c) + k[6] - 1069501632 | 0;
+        d = (d << 9 | d >>> 23) + a | 0;
+        c += (d & b | a & ~b) + k[11] + 643717713 | 0;
+        c = (c << 14 | c >>> 18) + d | 0;
+        b += (c & a | d & ~a) + k[0] - 373897302 | 0;
+        b = (b << 20 | b >>> 12) + c | 0;
+        a += (b & d | c & ~d) + k[5] - 701558691 | 0;
+        a = (a << 5 | a >>> 27) + b | 0;
+        d += (a & c | b & ~c) + k[10] + 38016083 | 0;
+        d = (d << 9 | d >>> 23) + a | 0;
+        c += (d & b | a & ~b) + k[15] - 660478335 | 0;
+        c = (c << 14 | c >>> 18) + d | 0;
+        b += (c & a | d & ~a) + k[4] - 405537848 | 0;
+        b = (b << 20 | b >>> 12) + c | 0;
+        a += (b & d | c & ~d) + k[9] + 568446438 | 0;
+        a = (a << 5 | a >>> 27) + b | 0;
+        d += (a & c | b & ~c) + k[14] - 1019803690 | 0;
+        d = (d << 9 | d >>> 23) + a | 0;
+        c += (d & b | a & ~b) + k[3] - 187363961 | 0;
+        c = (c << 14 | c >>> 18) + d | 0;
+        b += (c & a | d & ~a) + k[8] + 1163531501 | 0;
+        b = (b << 20 | b >>> 12) + c | 0;
+        a += (b & d | c & ~d) + k[13] - 1444681467 | 0;
+        a = (a << 5 | a >>> 27) + b | 0;
+        d += (a & c | b & ~c) + k[2] - 51403784 | 0;
+        d = (d << 9 | d >>> 23) + a | 0;
+        c += (d & b | a & ~b) + k[7] + 1735328473 | 0;
+        c = (c << 14 | c >>> 18) + d | 0;
+        b += (c & a | d & ~a) + k[12] - 1926607734 | 0;
+        b = (b << 20 | b >>> 12) + c | 0;
+        a += (b ^ c ^ d) + k[5] - 378558 | 0;
+        a = (a << 4 | a >>> 28) + b | 0;
+        d += (a ^ b ^ c) + k[8] - 2022574463 | 0;
+        d = (d << 11 | d >>> 21) + a | 0;
+        c += (d ^ a ^ b) + k[11] + 1839030562 | 0;
+        c = (c << 16 | c >>> 16) + d | 0;
+        b += (c ^ d ^ a) + k[14] - 35309556 | 0;
+        b = (b << 23 | b >>> 9) + c | 0;
+        a += (b ^ c ^ d) + k[1] - 1530992060 | 0;
+        a = (a << 4 | a >>> 28) + b | 0;
+        d += (a ^ b ^ c) + k[4] + 1272893353 | 0;
+        d = (d << 11 | d >>> 21) + a | 0;
+        c += (d ^ a ^ b) + k[7] - 155497632 | 0;
+        c = (c << 16 | c >>> 16) + d | 0;
+        b += (c ^ d ^ a) + k[10] - 1094730640 | 0;
+        b = (b << 23 | b >>> 9) + c | 0;
+        a += (b ^ c ^ d) + k[13] + 681279174 | 0;
+        a = (a << 4 | a >>> 28) + b | 0;
+        d += (a ^ b ^ c) + k[0] - 358537222 | 0;
+        d = (d << 11 | d >>> 21) + a | 0;
+        c += (d ^ a ^ b) + k[3] - 722521979 | 0;
+        c = (c << 16 | c >>> 16) + d | 0;
+        b += (c ^ d ^ a) + k[6] + 76029189 | 0;
+        b = (b << 23 | b >>> 9) + c | 0;
+        a += (b ^ c ^ d) + k[9] - 640364487 | 0;
+        a = (a << 4 | a >>> 28) + b | 0;
+        d += (a ^ b ^ c) + k[12] - 421815835 | 0;
+        d = (d << 11 | d >>> 21) + a | 0;
+        c += (d ^ a ^ b) + k[15] + 530742520 | 0;
+        c = (c << 16 | c >>> 16) + d | 0;
+        b += (c ^ d ^ a) + k[2] - 995338651 | 0;
+        b = (b << 23 | b >>> 9) + c | 0;
+        a += (c ^ (b | ~d)) + k[0] - 198630844 | 0;
+        a = (a << 6 | a >>> 26) + b | 0;
+        d += (b ^ (a | ~c)) + k[7] + 1126891415 | 0;
+        d = (d << 10 | d >>> 22) + a | 0;
+        c += (a ^ (d | ~b)) + k[14] - 1416354905 | 0;
+        c = (c << 15 | c >>> 17) + d | 0;
+        b += (d ^ (c | ~a)) + k[5] - 57434055 | 0;
+        b = (b << 21 | b >>> 11) + c | 0;
+        a += (c ^ (b | ~d)) + k[12] + 1700485571 | 0;
+        a = (a << 6 | a >>> 26) + b | 0;
+        d += (b ^ (a | ~c)) + k[3] - 1894986606 | 0;
+        d = (d << 10 | d >>> 22) + a | 0;
+        c += (a ^ (d | ~b)) + k[10] - 1051523 | 0;
+        c = (c << 15 | c >>> 17) + d | 0;
+        b += (d ^ (c | ~a)) + k[1] - 2054922799 | 0;
+        b = (b << 21 | b >>> 11) + c | 0;
+        a += (c ^ (b | ~d)) + k[8] + 1873313359 | 0;
+        a = (a << 6 | a >>> 26) + b | 0;
+        d += (b ^ (a | ~c)) + k[15] - 30611744 | 0;
+        d = (d << 10 | d >>> 22) + a | 0;
+        c += (a ^ (d | ~b)) + k[6] - 1560198380 | 0;
+        c = (c << 15 | c >>> 17) + d | 0;
+        b += (d ^ (c | ~a)) + k[13] + 1309151649 | 0;
+        b = (b << 21 | b >>> 11) + c | 0;
+        a += (c ^ (b | ~d)) + k[4] - 145523070 | 0;
+        a = (a << 6 | a >>> 26) + b | 0;
+        d += (b ^ (a | ~c)) + k[11] - 1120210379 | 0;
+        d = (d << 10 | d >>> 22) + a | 0;
+        c += (a ^ (d | ~b)) + k[2] + 718787259 | 0;
+        c = (c << 15 | c >>> 17) + d | 0;
+        b += (d ^ (c | ~a)) + k[9] - 343485551 | 0;
+        b = (b << 21 | b >>> 11) + c | 0;
+        x[0] = a + x[0] | 0;
+        x[1] = b + x[1] | 0;
+        x[2] = c + x[2] | 0;
+        x[3] = d + x[3] | 0;
+      }
+      function md5blk(s) {
+        var md5blks = [], i;
+        for (i = 0; i < 64; i += 4) {
+          md5blks[i >> 2] = s.charCodeAt(i) + (s.charCodeAt(i + 1) << 8) + (s.charCodeAt(i + 2) << 16) + (s.charCodeAt(i + 3) << 24);
+        }
+        return md5blks;
+      }
+      function md5blk_array(a) {
+        var md5blks = [], i;
+        for (i = 0; i < 64; i += 4) {
+          md5blks[i >> 2] = a[i] + (a[i + 1] << 8) + (a[i + 2] << 16) + (a[i + 3] << 24);
+        }
+        return md5blks;
+      }
+      function md51(s) {
+        var n = s.length, state = [ 1732584193, -271733879, -1732584194, 271733878 ], i, length, tail, tmp, lo, hi;
+        for (i = 64; i <= n; i += 64) {
+          md5cycle(state, md5blk(s.substring(i - 64, i)));
+        }
+        s = s.substring(i - 64);
+        length = s.length;
+        tail = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
+        for (i = 0; i < length; i += 1) {
+          tail[i >> 2] |= s.charCodeAt(i) << (i % 4 << 3);
+        }
+        tail[i >> 2] |= 128 << (i % 4 << 3);
+        if (i > 55) {
+          md5cycle(state, tail);
+          for (i = 0; i < 16; i += 1) {
+            tail[i] = 0;
+          }
+        }
+        tmp = n * 8;
+        tmp = tmp.toString(16).match(/(.*?)(.{0,8})$/);
+        lo = parseInt(tmp[2], 16);
+        hi = parseInt(tmp[1], 16) || 0;
+        tail[14] = lo;
+        tail[15] = hi;
+        md5cycle(state, tail);
+        return state;
+      }
+      function md51_array(a) {
+        var n = a.length, state = [ 1732584193, -271733879, -1732584194, 271733878 ], i, length, tail, tmp, lo, hi;
+        for (i = 64; i <= n; i += 64) {
+          md5cycle(state, md5blk_array(a.subarray(i - 64, i)));
+        }
+        a = i - 64 < n ? a.subarray(i - 64) : new Uint8Array(0);
+        length = a.length;
+        tail = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
+        for (i = 0; i < length; i += 1) {
+          tail[i >> 2] |= a[i] << (i % 4 << 3);
+        }
+        tail[i >> 2] |= 128 << (i % 4 << 3);
+        if (i > 55) {
+          md5cycle(state, tail);
+          for (i = 0; i < 16; i += 1) {
+            tail[i] = 0;
+          }
+        }
+        tmp = n * 8;
+        tmp = tmp.toString(16).match(/(.*?)(.{0,8})$/);
+        lo = parseInt(tmp[2], 16);
+        hi = parseInt(tmp[1], 16) || 0;
+        tail[14] = lo;
+        tail[15] = hi;
+        md5cycle(state, tail);
+        return state;
+      }
+      function rhex(n) {
+        var s = "", j;
+        for (j = 0; j < 4; j += 1) {
+          s += hex_chr[n >> j * 8 + 4 & 15] + hex_chr[n >> j * 8 & 15];
+        }
+        return s;
+      }
+      function hex(x) {
+        var i;
+        for (i = 0; i < x.length; i += 1) {
+          x[i] = rhex(x[i]);
+        }
+        return x.join("");
+      }
+      if (hex(md51("hello")) !== "5d41402abc4b2a76b9719d911017c592") ;
+      if (typeof ArrayBuffer !== "undefined" && !ArrayBuffer.prototype.slice) {
+        (function() {
+          function clamp(val, length) {
+            val = val | 0 || 0;
+            if (val < 0) {
+              return Math.max(val + length, 0);
+            }
+            return Math.min(val, length);
+          }
+          ArrayBuffer.prototype.slice = function(from, to) {
+            var length = this.byteLength, begin = clamp(from, length), end = length, num, target, targetArray, sourceArray;
+            if (to !== undefined) {
+              end = clamp(to, length);
+            }
+            if (begin > end) {
+              return new ArrayBuffer(0);
+            }
+            num = end - begin;
+            target = new ArrayBuffer(num);
+            targetArray = new Uint8Array(target);
+            sourceArray = new Uint8Array(this, begin, num);
+            targetArray.set(sourceArray);
+            return target;
+          };
+        })();
+      }
+      function toUtf8(str) {
+        if (/[\u0080-\uFFFF]/.test(str)) {
+          str = unescape(encodeURIComponent(str));
+        }
+        return str;
+      }
+      function utf8Str2ArrayBuffer(str, returnUInt8Array) {
+        var length = str.length, buff = new ArrayBuffer(length), arr = new Uint8Array(buff), i;
+        for (i = 0; i < length; i += 1) {
+          arr[i] = str.charCodeAt(i);
+        }
+        return returnUInt8Array ? arr : buff;
+      }
+      function arrayBuffer2Utf8Str(buff) {
+        return String.fromCharCode.apply(null, new Uint8Array(buff));
+      }
+      function concatenateArrayBuffers(first, second, returnUInt8Array) {
+        var result = new Uint8Array(first.byteLength + second.byteLength);
+        result.set(new Uint8Array(first));
+        result.set(new Uint8Array(second), first.byteLength);
+        return returnUInt8Array ? result : result.buffer;
+      }
+      function hexToBinaryString(hex) {
+        var bytes = [], length = hex.length, x;
+        for (x = 0; x < length - 1; x += 2) {
+          bytes.push(parseInt(hex.substr(x, 2), 16));
+        }
+        return String.fromCharCode.apply(String, bytes);
+      }
+      function SparkMD5() {
+        this.reset();
+      }
+      SparkMD5.prototype.append = function(str) {
+        this.appendBinary(toUtf8(str));
+        return this;
+      };
+      SparkMD5.prototype.appendBinary = function(contents) {
+        this._buff += contents;
+        this._length += contents.length;
+        var length = this._buff.length, i;
+        for (i = 64; i <= length; i += 64) {
+          md5cycle(this._hash, md5blk(this._buff.substring(i - 64, i)));
+        }
+        this._buff = this._buff.substring(i - 64);
+        return this;
+      };
+      SparkMD5.prototype.end = function(raw) {
+        var buff = this._buff, length = buff.length, i, tail = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], ret;
+        for (i = 0; i < length; i += 1) {
+          tail[i >> 2] |= buff.charCodeAt(i) << (i % 4 << 3);
+        }
+        this._finish(tail, length);
+        ret = hex(this._hash);
+        if (raw) {
+          ret = hexToBinaryString(ret);
+        }
+        this.reset();
+        return ret;
+      };
+      SparkMD5.prototype.reset = function() {
+        this._buff = "";
+        this._length = 0;
+        this._hash = [ 1732584193, -271733879, -1732584194, 271733878 ];
+        return this;
+      };
+      SparkMD5.prototype.getState = function() {
+        return {
+          buff: this._buff,
+          length: this._length,
+          hash: this._hash
+        };
+      };
+      SparkMD5.prototype.setState = function(state) {
+        this._buff = state.buff;
+        this._length = state.length;
+        this._hash = state.hash;
+        return this;
+      };
+      SparkMD5.prototype.destroy = function() {
+        delete this._hash;
+        delete this._buff;
+        delete this._length;
+      };
+      SparkMD5.prototype._finish = function(tail, length) {
+        var i = length, tmp, lo, hi;
+        tail[i >> 2] |= 128 << (i % 4 << 3);
+        if (i > 55) {
+          md5cycle(this._hash, tail);
+          for (i = 0; i < 16; i += 1) {
+            tail[i] = 0;
+          }
+        }
+        tmp = this._length * 8;
+        tmp = tmp.toString(16).match(/(.*?)(.{0,8})$/);
+        lo = parseInt(tmp[2], 16);
+        hi = parseInt(tmp[1], 16) || 0;
+        tail[14] = lo;
+        tail[15] = hi;
+        md5cycle(this._hash, tail);
+      };
+      SparkMD5.hash = function(str, raw) {
+        return SparkMD5.hashBinary(toUtf8(str), raw);
+      };
+      SparkMD5.hashBinary = function(content, raw) {
+        var hash = md51(content), ret = hex(hash);
+        return raw ? hexToBinaryString(ret) : ret;
+      };
+      SparkMD5.ArrayBuffer = function() {
+        this.reset();
+      };
+      SparkMD5.ArrayBuffer.prototype.append = function(arr) {
+        var buff = concatenateArrayBuffers(this._buff.buffer, arr, true), length = buff.length, i;
+        this._length += arr.byteLength;
+        for (i = 64; i <= length; i += 64) {
+          md5cycle(this._hash, md5blk_array(buff.subarray(i - 64, i)));
+        }
+        this._buff = i - 64 < length ? new Uint8Array(buff.buffer.slice(i - 64)) : new Uint8Array(0);
+        return this;
+      };
+      SparkMD5.ArrayBuffer.prototype.end = function(raw) {
+        var buff = this._buff, length = buff.length, tail = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], i, ret;
+        for (i = 0; i < length; i += 1) {
+          tail[i >> 2] |= buff[i] << (i % 4 << 3);
+        }
+        this._finish(tail, length);
+        ret = hex(this._hash);
+        if (raw) {
+          ret = hexToBinaryString(ret);
+        }
+        this.reset();
+        return ret;
+      };
+      SparkMD5.ArrayBuffer.prototype.reset = function() {
+        this._buff = new Uint8Array(0);
+        this._length = 0;
+        this._hash = [ 1732584193, -271733879, -1732584194, 271733878 ];
+        return this;
+      };
+      SparkMD5.ArrayBuffer.prototype.getState = function() {
+        var state = SparkMD5.prototype.getState.call(this);
+        state.buff = arrayBuffer2Utf8Str(state.buff);
+        return state;
+      };
+      SparkMD5.ArrayBuffer.prototype.setState = function(state) {
+        state.buff = utf8Str2ArrayBuffer(state.buff, true);
+        return SparkMD5.prototype.setState.call(this, state);
+      };
+      SparkMD5.ArrayBuffer.prototype.destroy = SparkMD5.prototype.destroy;
+      SparkMD5.ArrayBuffer.prototype._finish = SparkMD5.prototype._finish;
+      SparkMD5.ArrayBuffer.hash = function(arr, raw) {
+        var hash = md51_array(new Uint8Array(arr)), ret = hex(hash);
+        return raw ? hexToBinaryString(ret) : ret;
+      };
+      return SparkMD5;
+    });
+  });
+  var classCallCheck = function(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  };
+  var createClass = function() {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
+    return function(Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
+  var fileSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
+  var FileChecksum = function() {
+    createClass(FileChecksum, null, [ {
+      key: "create",
+      value: function create(file, callback) {
+        var instance = new FileChecksum(file);
+        instance.create(callback);
+      }
+    } ]);
+    function FileChecksum(file) {
+      classCallCheck(this, FileChecksum);
+      this.file = file;
+      this.chunkSize = 2097152;
+      this.chunkCount = Math.ceil(this.file.size / this.chunkSize);
+      this.chunkIndex = 0;
+    }
+    createClass(FileChecksum, [ {
+      key: "create",
+      value: function create(callback) {
+        var _this = this;
+        this.callback = callback;
+        this.md5Buffer = new sparkMd5.ArrayBuffer();
+        this.fileReader = new FileReader();
+        this.fileReader.addEventListener("load", function(event) {
+          return _this.fileReaderDidLoad(event);
+        });
+        this.fileReader.addEventListener("error", function(event) {
+          return _this.fileReaderDidError(event);
+        });
+        this.readNextChunk();
+      }
+    }, {
+      key: "fileReaderDidLoad",
+      value: function fileReaderDidLoad(event) {
+        this.md5Buffer.append(event.target.result);
+        if (!this.readNextChunk()) {
+          var binaryDigest = this.md5Buffer.end(true);
+          var base64digest = btoa(binaryDigest);
+          this.callback(null, base64digest);
+        }
+      }
+    }, {
+      key: "fileReaderDidError",
+      value: function fileReaderDidError(event) {
+        this.callback("Error reading " + this.file.name);
+      }
+    }, {
+      key: "readNextChunk",
+      value: function readNextChunk() {
+        if (this.chunkIndex < this.chunkCount || this.chunkIndex == 0 && this.chunkCount == 0) {
+          var start = this.chunkIndex * this.chunkSize;
+          var end = Math.min(start + this.chunkSize, this.file.size);
+          var bytes = fileSlice.call(this.file, start, end);
+          this.fileReader.readAsArrayBuffer(bytes);
+          this.chunkIndex++;
+          return true;
+        } else {
+          return false;
+        }
+      }
+    } ]);
+    return FileChecksum;
+  }();
+  function getMetaValue(name) {
+    var element = findElement(document.head, 'meta[name="' + name + '"]');
+    if (element) {
+      return element.getAttribute("content");
+    }
+  }
+  function findElements(root, selector) {
+    if (typeof root == "string") {
+      selector = root;
+      root = document;
+    }
+    var elements = root.querySelectorAll(selector);
+    return toArray$1(elements);
+  }
+  function findElement(root, selector) {
+    if (typeof root == "string") {
+      selector = root;
+      root = document;
+    }
+    return root.querySelector(selector);
+  }
+  function dispatchEvent(element, type) {
+    var eventInit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var disabled = element.disabled;
+    var bubbles = eventInit.bubbles, cancelable = eventInit.cancelable, detail = eventInit.detail;
+    var event = document.createEvent("Event");
+    event.initEvent(type, bubbles || true, cancelable || true);
+    event.detail = detail || {};
+    try {
+      element.disabled = false;
+      element.dispatchEvent(event);
+    } finally {
+      element.disabled = disabled;
+    }
+    return event;
+  }
+  function toArray$1(value) {
+    if (Array.isArray(value)) {
+      return value;
+    } else if (Array.from) {
+      return Array.from(value);
+    } else {
+      return [].slice.call(value);
+    }
+  }
+  var BlobRecord = function() {
+    function BlobRecord(file, checksum, url) {
+      var _this = this;
+      classCallCheck(this, BlobRecord);
+      this.file = file;
+      this.attributes = {
+        filename: file.name,
+        content_type: file.type || "application/octet-stream",
+        byte_size: file.size,
+        checksum: checksum
+      };
+      this.xhr = new XMLHttpRequest();
+      this.xhr.open("POST", url, true);
+      this.xhr.responseType = "json";
+      this.xhr.setRequestHeader("Content-Type", "application/json");
+      this.xhr.setRequestHeader("Accept", "application/json");
+      this.xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+      var csrfToken = getMetaValue("csrf-token");
+      if (csrfToken != undefined) {
+        this.xhr.setRequestHeader("X-CSRF-Token", csrfToken);
+      }
+      this.xhr.addEventListener("load", function(event) {
+        return _this.requestDidLoad(event);
+      });
+      this.xhr.addEventListener("error", function(event) {
+        return _this.requestDidError(event);
+      });
+    }
+    createClass(BlobRecord, [ {
+      key: "create",
+      value: function create(callback) {
+        this.callback = callback;
+        this.xhr.send(JSON.stringify({
+          blob: this.attributes
+        }));
+      }
+    }, {
+      key: "requestDidLoad",
+      value: function requestDidLoad(event) {
+        if (this.status >= 200 && this.status < 300) {
+          var response = this.response;
+          var direct_upload = response.direct_upload;
+          delete response.direct_upload;
+          this.attributes = response;
+          this.directUploadData = direct_upload;
+          this.callback(null, this.toJSON());
+        } else {
+          this.requestDidError(event);
+        }
+      }
+    }, {
+      key: "requestDidError",
+      value: function requestDidError(event) {
+        this.callback('Error creating Blob for "' + this.file.name + '". Status: ' + this.status);
+      }
+    }, {
+      key: "toJSON",
+      value: function toJSON() {
+        var result = {};
+        for (var key in this.attributes) {
+          result[key] = this.attributes[key];
+        }
+        return result;
+      }
+    }, {
+      key: "status",
+      get: function get$$1() {
+        return this.xhr.status;
+      }
+    }, {
+      key: "response",
+      get: function get$$1() {
+        var _xhr = this.xhr, responseType = _xhr.responseType, response = _xhr.response;
+        if (responseType == "json") {
+          return response;
+        } else {
+          return JSON.parse(response);
+        }
+      }
+    } ]);
+    return BlobRecord;
+  }();
+  var BlobUpload = function() {
+    function BlobUpload(blob) {
+      var _this = this;
+      classCallCheck(this, BlobUpload);
+      this.blob = blob;
+      this.file = blob.file;
+      var _blob$directUploadDat = blob.directUploadData, url = _blob$directUploadDat.url, headers = _blob$directUploadDat.headers;
+      this.xhr = new XMLHttpRequest();
+      this.xhr.open("PUT", url, true);
+      this.xhr.responseType = "text";
+      for (var key in headers) {
+        this.xhr.setRequestHeader(key, headers[key]);
+      }
+      this.xhr.addEventListener("load", function(event) {
+        return _this.requestDidLoad(event);
+      });
+      this.xhr.addEventListener("error", function(event) {
+        return _this.requestDidError(event);
+      });
+    }
+    createClass(BlobUpload, [ {
+      key: "create",
+      value: function create(callback) {
+        this.callback = callback;
+        this.xhr.send(this.file.slice());
+      }
+    }, {
+      key: "requestDidLoad",
+      value: function requestDidLoad(event) {
+        var _xhr = this.xhr, status = _xhr.status, response = _xhr.response;
+        if (status >= 200 && status < 300) {
+          this.callback(null, response);
+        } else {
+          this.requestDidError(event);
+        }
+      }
+    }, {
+      key: "requestDidError",
+      value: function requestDidError(event) {
+        this.callback('Error storing "' + this.file.name + '". Status: ' + this.xhr.status);
+      }
+    } ]);
+    return BlobUpload;
+  }();
+  var id = 0;
+  var DirectUpload = function() {
+    function DirectUpload(file, url, delegate) {
+      classCallCheck(this, DirectUpload);
+      this.id = ++id;
+      this.file = file;
+      this.url = url;
+      this.delegate = delegate;
+    }
+    createClass(DirectUpload, [ {
+      key: "create",
+      value: function create(callback) {
+        var _this = this;
+        FileChecksum.create(this.file, function(error, checksum) {
+          if (error) {
+            callback(error);
+            return;
+          }
+          var blob = new BlobRecord(_this.file, checksum, _this.url);
+          notify(_this.delegate, "directUploadWillCreateBlobWithXHR", blob.xhr);
+          blob.create(function(error) {
+            if (error) {
+              callback(error);
+            } else {
+              var upload = new BlobUpload(blob);
+              notify(_this.delegate, "directUploadWillStoreFileWithXHR", upload.xhr);
+              upload.create(function(error) {
+                if (error) {
+                  callback(error);
+                } else {
+                  callback(null, blob.toJSON());
+                }
+              });
+            }
+          });
+        });
+      }
+    } ]);
+    return DirectUpload;
+  }();
+  function notify(object, methodName) {
+    if (object && typeof object[methodName] == "function") {
+      for (var _len = arguments.length, messages = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+        messages[_key - 2] = arguments[_key];
+      }
+      return object[methodName].apply(object, messages);
+    }
+  }
+  var DirectUploadController = function() {
+    function DirectUploadController(input, file) {
+      classCallCheck(this, DirectUploadController);
+      this.input = input;
+      this.file = file;
+      this.directUpload = new DirectUpload(this.file, this.url, this);
+      this.dispatch("initialize");
+    }
+    createClass(DirectUploadController, [ {
+      key: "start",
+      value: function start(callback) {
+        var _this = this;
+        var hiddenInput = document.createElement("input");
+        hiddenInput.type = "hidden";
+        hiddenInput.name = this.input.name;
+        this.input.insertAdjacentElement("beforebegin", hiddenInput);
+        this.dispatch("start");
+        this.directUpload.create(function(error, attributes) {
+          if (error) {
+            hiddenInput.parentNode.removeChild(hiddenInput);
+            _this.dispatchError(error);
+          } else {
+            hiddenInput.value = attributes.signed_id;
+          }
+          _this.dispatch("end");
+          callback(error);
+        });
+      }
+    }, {
+      key: "uploadRequestDidProgress",
+      value: function uploadRequestDidProgress(event) {
+        var progress = event.loaded / event.total * 100;
+        if (progress) {
+          this.dispatch("progress", {
+            progress: progress
+          });
+        }
+      }
+    }, {
+      key: "dispatch",
+      value: function dispatch(name) {
+        var detail = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        detail.file = this.file;
+        detail.id = this.directUpload.id;
+        return dispatchEvent(this.input, "direct-upload:" + name, {
+          detail: detail
+        });
+      }
+    }, {
+      key: "dispatchError",
+      value: function dispatchError(error) {
+        var event = this.dispatch("error", {
+          error: error
+        });
+        if (!event.defaultPrevented) {
+          alert(error);
+        }
+      }
+    }, {
+      key: "directUploadWillCreateBlobWithXHR",
+      value: function directUploadWillCreateBlobWithXHR(xhr) {
+        this.dispatch("before-blob-request", {
+          xhr: xhr
+        });
+      }
+    }, {
+      key: "directUploadWillStoreFileWithXHR",
+      value: function directUploadWillStoreFileWithXHR(xhr) {
+        var _this2 = this;
+        this.dispatch("before-storage-request", {
+          xhr: xhr
+        });
+        xhr.upload.addEventListener("progress", function(event) {
+          return _this2.uploadRequestDidProgress(event);
+        });
+      }
+    }, {
+      key: "url",
+      get: function get$$1() {
+        return this.input.getAttribute("data-direct-upload-url");
+      }
+    } ]);
+    return DirectUploadController;
+  }();
+  var inputSelector = "input[type=file][data-direct-upload-url]:not([disabled])";
+  var DirectUploadsController = function() {
+    function DirectUploadsController(form) {
+      classCallCheck(this, DirectUploadsController);
+      this.form = form;
+      this.inputs = findElements(form, inputSelector).filter(function(input) {
+        return input.files.length;
+      });
+    }
+    createClass(DirectUploadsController, [ {
+      key: "start",
+      value: function start(callback) {
+        var _this = this;
+        var controllers = this.createDirectUploadControllers();
+        var startNextController = function startNextController() {
+          var controller = controllers.shift();
+          if (controller) {
+            controller.start(function(error) {
+              if (error) {
+                callback(error);
+                _this.dispatch("end");
+              } else {
+                startNextController();
+              }
+            });
+          } else {
+            callback();
+            _this.dispatch("end");
+          }
+        };
+        this.dispatch("start");
+        startNextController();
+      }
+    }, {
+      key: "createDirectUploadControllers",
+      value: function createDirectUploadControllers() {
+        var controllers = [];
+        this.inputs.forEach(function(input) {
+          toArray$1(input.files).forEach(function(file) {
+            var controller = new DirectUploadController(input, file);
+            controllers.push(controller);
+          });
+        });
+        return controllers;
+      }
+    }, {
+      key: "dispatch",
+      value: function dispatch(name) {
+        var detail = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        return dispatchEvent(this.form, "direct-uploads:" + name, {
+          detail: detail
+        });
+      }
+    } ]);
+    return DirectUploadsController;
+  }();
+  var processingAttribute = "data-direct-uploads-processing";
+  var submitButtonsByForm = new WeakMap();
+  var started = false;
+  function start() {
+    if (!started) {
+      started = true;
+      document.addEventListener("click", didClick, true);
+      document.addEventListener("submit", didSubmitForm);
+      document.addEventListener("ajax:before", didSubmitRemoteElement);
+    }
+  }
+  function didClick(event) {
+    var target = event.target;
+    if ((target.tagName == "INPUT" || target.tagName == "BUTTON") && target.type == "submit" && target.form) {
+      submitButtonsByForm.set(target.form, target);
+    }
+  }
+  function didSubmitForm(event) {
+    handleFormSubmissionEvent(event);
+  }
+  function didSubmitRemoteElement(event) {
+    if (event.target.tagName == "FORM") {
+      handleFormSubmissionEvent(event);
+    }
+  }
+  function handleFormSubmissionEvent(event) {
+    var form = event.target;
+    if (form.hasAttribute(processingAttribute)) {
+      event.preventDefault();
+      return;
+    }
+    var controller = new DirectUploadsController(form);
+    var inputs = controller.inputs;
+    if (inputs.length) {
+      event.preventDefault();
+      form.setAttribute(processingAttribute, "");
+      inputs.forEach(disable);
+      controller.start(function(error) {
+        form.removeAttribute(processingAttribute);
+        if (error) {
+          inputs.forEach(enable);
+        } else {
+          submitForm(form);
+        }
+      });
+    }
+  }
+  function submitForm(form) {
+    var button = submitButtonsByForm.get(form) || findElement(form, "input[type=submit], button[type=submit]");
+    if (button) {
+      var _button = button, disabled = _button.disabled;
+      button.disabled = false;
+      button.focus();
+      button.click();
+      button.disabled = disabled;
+    } else {
+      button = document.createElement("input");
+      button.type = "submit";
+      button.style.display = "none";
+      form.appendChild(button);
+      button.click();
+      form.removeChild(button);
+    }
+    submitButtonsByForm.delete(form);
+  }
+  function disable(input) {
+    input.disabled = true;
+  }
+  function enable(input) {
+    input.disabled = false;
+  }
+  function autostart() {
+    if (window.ActiveStorage) {
+      start();
+    }
+  }
+  setTimeout(autostart, 1);
+  exports.start = start;
+  exports.DirectUpload = DirectUpload;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+});

app/assets/stylesheets/editor.scss

@@ -0,0 +1,7 @@
+.editor {
+	.editor-content {
+		div[data-align="left"] { text-align: left; }
+		div[data-align="center"] { text-align: center; }
+		div[data-align="right"] { text-align: right; }
+	}
+}

app/views/application/markdown.haml

@@ -1,74 +1,39 @@
-- if request.referer
+= form_with do
-  = render 'layouts/breadcrumb', crumbs: [ link_to(t('help.markdown.back'), request.referer) ] 
+  .editor
+    %button#bold-button Bold
+    %button#italic-button Italic
+    %button#deleted-button Deleted
+    %button#underline-button Underline
+    %button#mark-button Mark
+    %button#h1-button H1
+    %button#h2-button H2
+    %button#h3-button H3
+    %button#h4-button H4
+    %button#h5-button H5
+    %button#h6-button H6
+    %button#ul-button Lista desordenada
+    %button#ol-button Lista ordenada
+    %button#left-button Left
+    %button#center-button Center
+    %button#right-button Right
+    %br/
+    %label{:for => "mark-color"} Color de resaltado:
+    %input#mark-color{:type => "color"}/
+    %br/
+    %label{:for => "img-src"} URL de imágen:
+    %input#img-src{:placeholder => "https://radio.sutty.nl/public/placeholder_992x992.png", :type => "url"}/
+    %label{:for => "img-alt"} Descripción de imágen:
+    %input#img-alt{:placeholder => "Un álbum", :type => "text"}/
+    %button#img-button Insertar imágen
+    %br/
+    %label{:for => "link-href"} URL de link:
+    %input#link-href{:type => "url"}/
+    .editor-content{:contenteditable => "true"}
+      %h1
+        Hola
+        %em mundo
+      %p Como te va?
+      %div{:data => {:align => "right"}}
+        %p Esto está a la derecha
+    %textarea{:cols => "80", :disabled => "disabled", :rows => "15"}
 
-.row
-  .col
-    %table.table.table-responsive-md
-      %thead
-        %tr
-          %th= t('help.markdown.input')
-          %th= t('help.markdown.output')
-      %tbody
-        %tr
-          %td
-            %code= "**#{t('help.markdown.bold')}**"
-          %td
-            %strong= t('help.markdown.bold')
-        %tr
-          %td
-            %code= "_#{t('help.markdown.italic')}_"
-          %td
-            %em= t('help.markdown.italic')
-        - 7.times do |i|
-          - next if i == 0
-          %tr
-            %td
-              %code= "#{'#' * i} #{t('help.markdown.heading')} #{i}"
-            %td= raw "<h#{i}>#{t('help.markdown.heading')} #{i}</h#{i}>"
-        %tr
-          %td
-            %code= "[#{t('help.markdown.link.text')}](#{t('help.markdown.link.url')})"
-          %td= link_to t('help.markdown.link.text'), t('help.markdown.link.url')
-        %tr
-          %td
-            %code= "> #{t('help.markdown.quote')}"
-          %td
-            %blockquote.blockquote= t('help.markdown.quote')
-        %tr
-          %td
-            %code
-              - 3.times do
-                = "* #{t('help.markdown.ul')}"
-                %br
-          %td
-            %ul
-              - 3.times do
-                %li= t('help.markdown.ul')
-        %tr
-          %td
-            %code
-              - 3.times do |i|
-                = "#{i}. #{t('help.markdown.ol')}"
-                %br
-          %td
-            %ol
-              - 3.times do
-                %li= t('help.markdown.ol')
-        %tr
-          %td{colspan: 2}= t('help.markdown.dir')
-        %tr
-          %td
-            %code= "[#{t('help.markdown.ltr')}]{dir=ltr lang=es}"
-          %td
-            %span{dir: 'ltr', lang: 'es'}= t('help.markdown.ltr')
-        %tr
-          %td
-            %code= "[#{t('help.markdown.rtl')}]{dir=rtl lang=es}"
-          %td
-            %span{dir: 'rtl', lang: 'es'}= t('help.markdown.rtl')
-
-        %tr
-          %td
-            %code= "![#{t('help.markdown.img.text')}](#{t('help.markdown.img.url')})"
-          %td
-            %img{alt: t('help.markdown.img.text'), src: t('help.markdown.img.url')}