From b8e9e4799ada76ba1a1bf43508d31f0b4c9504b3 Mon Sep 17 00:00:00 2001
From: void <v0id@riseup.net>
Date: Thu, 25 Feb 2021 21:05:25 +0000
Subject: [PATCH] editor: borrar archivos viejos

---
 app/javascript/editor/editor.js.old       | 546 ----------------------
 app/javascript/editor/types.js            | 181 -------
 app/javascript/editor/types/multimedia.js | 148 ------
 3 files changed, 875 deletions(-)
 delete mode 100644 app/javascript/editor/editor.js.old
 delete mode 100644 app/javascript/editor/types.js
 delete mode 100644 app/javascript/editor/types/multimedia.js

diff --git a/app/javascript/editor/editor.js.old b/app/javascript/editor/editor.js.old
deleted file mode 100644
index c96fa7f7..00000000
--- a/app/javascript/editor/editor.js.old
+++ /dev/null
@@ -1,546 +0,0 @@
-import {
-	moveChildren,
-	marks,
-	blocks,
-	parentBlocks,
-	typesWithProperties,
-	setAuxiliaryToolbar,
-	tagNameSetFn
-} from 'editor/types'
-
-import { setMultimedia } from 'editor/types/multimedia'
-
-const origin = location.origin
-
-/*
- * Guarda una copia local de los cambios para poder recuperarlos
- * después.
- *
- * Usamos la URL completa sin anchors.
- */
-const storageKey = (editorEl) => editorEl.querySelector('[data-target="storage-key"]').value
-
-const forgetContent = (storedKey) => window.localStorage.removeItem(storedKey)
-
-const storeContent = (editorEl, contentEl) => {
-	if (contentEl.innerText.trim().length === 0) return
-
-	window.localStorage.setItem(storageKey(editorEl), contentEl.innerHTML)
-}
-
-const restoreContent = (editorEl, contentEl) => {
-	const content = window.localStorage.getItem(storageKey(editorEl))
-
-	if (!content) return
-	if (content.trim().length === 0) return
-
-	contentEl.innerHTML = content
-}
-
-/* getRangeAt puede fallar si no hay una selección
- */
-const safeGetRangeAt = (num) => {
-	try {
-		return window.getSelection().getRangeAt(num)
-	} catch (error) {
-		console.warn("No hay una selección!")
-		return null;
-	}
-}
-
-
-const isDirectChild = (node, supposedChild) => {
-	for (const child of node.childNodes) {
-		if (child == supposedChild) return true
-	}
-}
-
-const isChildSelection = (sel, el) => {
-	return (
-		(el.contains(sel.anchorNode) || el.contains(sel.focusNode))
-		&& !(sel.anchorNode == el || sel.focusNode == el)
-	)
-}
-
-const getElementParent = (node) => {
-	let parentEl = node
-	while (parentEl.nodeType != Node.ELEMENT_NODE) parentEl = parentEl.parentElement
-	return parentEl
-}
-
-const 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.
- */
-const 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 range = safeGetRangeAt(0)
-		if (!range) return
-
-		if (parentEl.matches(mark.selector)) {
-			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 parentEl.childNodes) {
-				if (
-					(child instanceof Element)
-						&& child.matches(mark.selector)
-						&& 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 (child instanceof Element && child.matches(mark.selector)) {
-					moveChildren(child, tagEl, child)
-					tagEl.removeChild(child)
-				}
-			}
-
-			range.insertNode(tagEl)
-			range.selectNode(tagEl)
-		}
-	})
-}
-
-/* Igual que `setupMarkButton` pero para bloques. */
-const 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 = safeGetRangeAt(0)
-		if (!range) return
-
-		let parentEl = sel.anchorNode
-		while (!isDirectChild(contentEl, parentEl)) parentEl = parentEl.parentElement
-
-		if (block.setFn) {
-			if (parentEl.matches(block.selector)) {
-				tagNameSetFn("P")(parentEl)
-			} else {
-				block.setFn(parentEl)
-			}
-		} else if (block.createFn) {
-			const newEl = block.createFn(editorEl)
-			parentEl.parentElement.insertBefore(newEl, parentEl.nextSibling)
-
-			newEl.click()
-		}
-	})
-}
-
-/* Igual que `setupBlockButton` pero para bloques parientes. */
-const 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 = safeGetRangeAt(0)
-		if (!range) return
-
-		let parentEl = sel.anchorNode
-		while (!isDirectChild(contentEl, parentEl)) parentEl = parentEl.parentElement
-
-		if (parentEl.matches(parentBlock.selector)) {
-			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 (element.matches(type.selector)) return true
-	}
-	return false
-}
-const elementIsBlock = elementIsTypes(blocks)
-const elementIsParentBlock = elementIsTypes(parentBlocks)
-
-const 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 los elementos tiene contenido
-	if (element.tagName === "BR") return true
-	if (element.parentElement.tagName === "FIGURE"
-		&& (element.dataset.editorMultimediaElement
-			|| element.tagName === "FIGCAPTION")
-	) return true
-	return false
-}
-
-/* Limpia el elemento de contenido del editor
- * Por ahora:
- *  * Cambia el tag de los bloques no reconocidos (ver `elementIsBlock`)
- *  * Borra <figure> sin multimedia adentro
- *  * Hace lo que hace cleanNode
- */
-const cleanContent = (contentEl) => {
-	const sel = window.getSelection()
-
-	cleanNode(contentEl, contentEl)
-
-	for (const child of contentEl.childNodes) {
-		if (child.tagName) {
-			if (elementIsParentBlock(child)) {
-				cleanContent(child)
-			} else if (child.tagName === "FIGURE") {
-				if (
-					!child.querySelector('*[data-editor-multimedia-element]')
-					&& !child.dataset.editorLoading
-				) {
-					moveChildren(child, child.parentNode, child)
-					child.parentNode.removeChild(child)
-				}
-			} else if (!elementIsBlock(child)) {
-				const el = document.createElement("p")
-				moveChildren(child, el, null)
-				child.parentNode.replaceChild(el, child)
-			}
-		} else if (child.nodeType === Node.TEXT_NODE) {
-			const el = document.createElement("p")
-			contentEl.insertBefore(el, child.nextSibling)
-			el.appendChild(child)
-
-			sel.selectAllChildren(el)
-			sel.collapseToEnd()
-		}
-	}
-}
-
-/* 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á
- */
-const fixContent = (contentEl) => {
-	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
- *  * Borra inline styles no autorizados
- *  * Borra propiedades de IMG no autorizadas
- *  * Borra <FONT> y <STYLE>
- */
-const cleanNode = (node, contentEl) => {
-	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) {
-			const range = safeGetRangeAt(0)
-			if (!hasContent(child) && (!range || !range.intersectsNode(child)))
-				child.parentNode.removeChild(child)
-
-			for (const mark of Object.values(marks)) {
-				if (
-					child.matches(mark.selector)
-						&& child.nextSibling
-						&& (child.nextSibling instanceof Element)
-						&& child.nextSibling.matches(mark.selector)
-				) {
-					moveChildren(child.nextSibling, child, null)
-					child.nextSibling.parentNode.removeChild(child.nextSibling)
-				}
-			}
-
-			if (child.tagName === "LI") {
-				let parentEl = child
-				while (
-					parentEl
-					&& !(parentEl.nodeType == Node.ELEMENT_NODE && elementIsBlock(parentEl))
-					&& contentEl.contains(parentEl)
-				)
-					parentEl = parentEl.parentElement
-
-				if (
-					parentEl
-					&& contentEl.contains(parentEl)
-					&& parentEl.tagName !== "UL"
-					&& parentEl.tagName !== "OL"
-				)
-					moveChildren(child, parentEl, child.nextSibling)
-			} else if (child.tagName === "IMG") {
-				if (child.getAttribute("width")) child.removeAttribute("width")
-				if (child.getAttribute("height")) child.removeAttribute("height")
-				if (child.getAttribute("vspace")) child.removeAttribute("vspace")
-				if (child.getAttribute("hspace")) child.removeAttribute("hspace")
-				if (child.align.length) child.removeAttribute("align")
-				if (child.name.length) child.removeAttribute("name")
-				if (!child.src.length) child.src = "/placeholder.png"
-			} else if (child.tagName === "FONT") {
-				moveChildren(child, child.parentElement, child.nextSiling)
-				child.parentElement.removeChild(child)
-				return
-			} else if (child.tagName === "STYLE") {
-				return child.parentElement.removeChild(child)
-			} else if (child.tagName === "B") {
-				const el = document.createElement("STRONG")
-				moveChildren(child, el)
-				child.parentElement.insertBefore(el, child)
-				child.parentElement.removeChild(child)
-			} else if (child.tagName === "I") {
-				const el = document.createElement("EM")
-				moveChildren(child, el)
-				child.parentElement.insertBefore(el, child)
-				child.parentElement.removeChild(child)
-			}
-
-			child.style.forEach(prop => {
-				const value = child.style[prop]
-
-				switch (prop) {
-				case 'background-color':
-					if (child.tagName === "MARK") return
-				default:
-					child.style[prop] = ""
-				}
-			})
-		}
-		cleanNode(child, contentEl)
-	}
-}
-
-/* Generar el clickListener para este editor.
- */
-const generateClickListener = (editorEl, contentEl) => {
-	/* El event listener para los typesWithProperties.
-	 */
-	return (event) => {
-		// Borrar todas las selecciones
-		for (const el of contentEl.querySelectorAll(".selected")) {
-			el.classList.remove("selected")
-		}
-
-		setAuxiliaryToolbar(editorEl)
-
-		let selectedType
-		let selectedEl
-
-		for (const [name, type] of Object.entries(typesWithProperties)) {
-			type.disableInput(editorEl)
-
-			let el = event.target
-			while (el && !el.matches(type.selector)) el = el.parentElement
-			if (el && contentEl.contains(el)) {
-				selectedType = type
-				selectedEl = el
-			}
-		}
-
-		if (selectedType) {
-			event.preventDefault()
-			selectedType.updateInput(selectedEl, editorEl)
-			selectedEl.classList.add("selected")
-			return false
-		}
-	}
-}
-
-const setupEditor = (editorEl) => {
-	// XXX: ¡Esto afecta a todo el documento! ¿Quizás usar un iframe para el editor?
-	document.execCommand('defaultParagraphSeparator', false, 'p')
-
-	const contentEl = editorEl.querySelector(".editor-content")
-
-	contentEl.addEventListener("paste", event => {
-		editorEl.querySelector(".editor-aviso-word").style.display = "block"
-	})
-
-	document.addEventListener("selectionchange", event => cleanContent(contentEl))
-
-	const clickListener = generateClickListener(editorEl, contentEl)
-	contentEl.addEventListener("click", clickListener, true)
-
-	const htmlEl = editorEl.querySelector("textarea")
-	const observer = new MutationObserver((mutationList, observer) => {
-		cleanContent(contentEl)
-		fixContent(contentEl)
-		storeContent(editorEl, contentEl)
-
-		htmlEl.value = contentEl.innerHTML
-	})
-	observer.observe(contentEl, {
-		childList: true,
-		attributes: true,
-		subtree: true,
-		characterData: true,
-	})
-
-	const editorBtn = id => editorEl.querySelector(`*[data-button="${id}"]`)
-
-	// == 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)
-	}
-
-	document.addEventListener(editorBtn("mark"), () => setAuxiliaryToolbar(editorEl, "mark"))
-	document.addEventListener(editorBtn("img"), () => setAuxiliaryToolbar(editorEl, "img"))
-	document.addEventListener(editorBtn("audio"), () => setAuxiliaryToolbar(editorEl, "audio"))
-	document.addEventListener(editorBtn("video"), () => setAuxiliaryToolbar(editorEl, "video"))
-	document.addEventListener(editorBtn("pdf"), () => setAuxiliaryToolbar(editorEl, "pdf"))
-	document.addEventListener(editorBtn("a"), () => setAuxiliaryToolbar(editorEl, "a"))
-
-	for (const video of document.querySelectorAll('.editor .editor-content video')) {
-		video.addEventListener('click', event => event.target.controls = true)
-		video.addEventListener('focusout', event => event.target.controls = false)
-		video.controls = false
-	}
-
-	cleanContent(contentEl)
-	fixContent(contentEl)
-
-	// Recuperar el contenido si hay algo guardado, si tuviéramos un campo
-	// de última edición podríamos saber si el artículo fue editado
-	// después o la versión local es la última.
-	//
-	// TODO: Preguntar si se lo quiere recuperar.
-	restoreContent(editorEl, contentEl)
-
-	htmlEl.value = contentEl.innerHTML
-}
-
-// TODO: por ahora confiamos, quizás queremos filtrar estilos?
-const stringifyAllowedStyle = (element) => element.style.cssText
-
-document.addEventListener("turbolinks:load", () => {
-	for (const editorEl of document.querySelectorAll(".editor")) {
-		if (!editorEl.querySelector('.editor-toolbar')) continue
-
-		setupEditor(editorEl)
-	}
-
-	const flash = document.querySelector('.js-flash[data-target="editor"]')
-	if (!flash) return
-
-	switch (flash.dataset.action) {
-		case 'forget-content':
-			if (!flash.dataset.keys) break
-
-			try { JSON.parse(flash.dataset.keys).forEach(forgetContent) } catch(e) { undefined }
-
-			break
-		default:
-	}
-})
diff --git a/app/javascript/editor/types.js b/app/javascript/editor/types.js
deleted file mode 100644
index af796754..00000000
--- a/app/javascript/editor/types.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import multimedia from './types/multimedia'
-
-export const setAuxiliaryToolbar = (editorEl, toolbarName) => {
-	const toolbarEl = editorEl.querySelector(`*[data-editor-auxiliary-toolbar]`)
-	for (const otherEl of toolbarEl.childNodes) {
-		if (otherEl.nodeType !== Node.ELEMENT_NODE) continue
-		otherEl.classList.remove("editor-auxiliary-tool-active")
-	}
-	if (toolbarName) {
-		const auxEl = editorEl.querySelector(`*[data-editor-auxiliary="${toolbarName}"]`)
-		auxEl.classList.add("editor-auxiliary-tool-active")
-	}
-}
-
-export const moveChildren = (from, to, toRef) => {
-	while (from.firstChild) to.insertBefore(from.firstChild, toRef);
-}
-
-export const marks = {
-	bold: {
-		selector: "strong",
-		createFn: () => document.createElement("STRONG"),
-	},
-	italic: {
-		selector: "em",
-		createFn: () => document.createElement("EM"),
-	},
-	deleted: {
-		selector: "del",
-		createFn: () => document.createElement("DEL"),
-	},
-	underline: {
-		selector: "u",
-		createFn: () => document.createElement("U"),
-	},
-	sub: {
-		selector: "sub",
-		createFn: () => document.createElement("SUB"),
-	},
-	sup: {
-		selector: "sup",
-		createFn: () => document.createElement("SUP"),
-	},
-	mark: {
-		selector: "mark",
-		createFn: () => document.createElement("MARK"),
-	},
-	a: {
-		selector: "a",
-		createFn: () => document.createElement("A"),
-	}
-}
-
-export 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)
-}
-
-export const blocks = {
-	p: {
-		noButton: true,
-		selector: "P",
-		setFn: tagNameSetFn("P"),
-	},
-	h1: {
-		selector: "H1",
-		setFn: tagNameSetFn("H1"),
-	},
-	h2: {
-		selector: "H2",
-		setFn: tagNameSetFn("H2"),
-	},
-	h3: {
-		selector: "H3",
-		setFn: tagNameSetFn("H3"),
-	},
-	h4: {
-		selector: "H4",
-		setFn: tagNameSetFn("H4"),
-	},
-	h5: {
-		selector: "H5",
-		setFn: tagNameSetFn("H5"),
-	},
-	h6: {
-		selector: "H6",
-		setFn: tagNameSetFn("H6"),
-	},
-	ul: {
-		selector: "UL",
-		setFn: tagNameSetFn("UL"),
-	},
-	ol: {
-		selector: "OL",
-		setFn: tagNameSetFn("OL"),
-	},
-	multimedia: multimedia.block,
-}
-
-const divWithStyleCreateFn = styleFn => () => {
-	const el = document.createElement("DIV")
-	styleFn(el)
-	return el
-}
-
-export const parentBlocks = {
-	left: {
-		selector: "div[data-align=left]",
-		createFn: divWithStyleCreateFn(el => el.dataset.align = "left"),
-	},
-	center: {
-		selector: "div[data-align=center]",
-		createFn: divWithStyleCreateFn(el => el.dataset.align = "center"),
-	},
-	right: {
-		selector: "div[data-align=right]",
-		createFn: divWithStyleCreateFn(el => el.dataset.align = "right"),
-	},
-}
-
-const hex = (x) => ("0" + parseInt(x).toString(16)).slice(-2)
-
-// https://stackoverflow.com/a/3627747
-// TODO: cambiar por una solución más copada
-const rgb2hex = (rgb) => {
-	rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-	return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
-}
-
-const getSelected = contentEl => contentEl.querySelector(".selected")
-
-export const typesWithProperties = {
-	a: {
-		selector: marks.a.selector,
-		updateInput (el, editorEl) {
-			setAuxiliaryToolbar(editorEl, "a")
-
-			const markAInputEl = editorEl.querySelector(`*[data-prop="a-href"]`)
-			markAInputEl.disabled = false
-			markAInputEl.value = el.href
-		},
-		disableInput (editorEl) {
-			const markAInputEl = editorEl.querySelector(`*[data-prop="a-href"]`)
-			markAInputEl.disabled = true
-			markAInputEl.value = ""
-		},
-		setupInput (editorEl, contentEl) {
-			const markAInputEl = editorEl.querySelector(`*[data-prop="a-href"]`)
-			markAInputEl.addEventListener("change", event => {
-				const markEl = contentEl.querySelector(marks.a.selector + ".selected")
-				if (markEl) markEl.href = markAInputEl.value
-			}, false)
-		}
-	},
-	mark: {
-		selector: marks.mark.selector,
-		updateInput (el, editorEl) {
-			setAuxiliaryToolbar(editorEl, "mark")
-
-			const markColorInputEl = editorEl.querySelector(`*[data-prop="mark-color"]`)
-			markColorInputEl.disabled = false
-			markColorInputEl.value = el.style.backgroundColor ? rgb2hex(el.style.backgroundColor) : "#f206f9"
-		},
-		disableInput (editorEl) {
-			const markColorInputEl = editorEl.querySelector(`*[data-prop="mark-color"]`)
-			markColorInputEl.disabled = true
-			markColorInputEl.value = "#000000"
-		},
-		setupInput (editorEl, contentEl) {
-			const markColorInputEl = editorEl.querySelector(`*[data-prop="mark-color"]`)
-			markColorInputEl.addEventListener("change", event => {
-				const markEl = contentEl.querySelector(marks.mark.selector + ".selected")
-				if (markEl) markEl.style.backgroundColor = markColorInputEl.value
-			}, false)
-		},
-	},
-	multimedia: multimedia.typeWithProperty,
-}
diff --git a/app/javascript/editor/types/multimedia.js b/app/javascript/editor/types/multimedia.js
deleted file mode 100644
index 7546a893..00000000
--- a/app/javascript/editor/types/multimedia.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import { setAuxiliaryToolbar } from '../types'
-
-const 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)
-			}
-		})
-	})
-}
-
-const srcMakeElement = tag => url => {
-	const el = document.createElement(tag)
-	el.src = url
-	return el
-}
-
-const multimediaKinds = {
-	img: {
-		mime: /^image\/.+$/,
-		makeElement: srcMakeElement('img'),
-	},
-	audio: {
-		mime: /^audio\/.+$/,
-		makeElement: srcMakeElement('audio'),
-	},
-	video: {
-		mime: /^video\/.+$/,
-		makeElement: srcMakeElement('video'),
-	},
-	pdf: {
-		mime: /^application\/pdf$/,
-		makeElement: srcMakeElement('iframe'),
-	},
-}
-
-const setMultimedia = (figureEl, url, mimeType) => {
-	let kind
-	for (const _kind of Object.values(multimediaKinds)) {
-		if (mimeType.match(_kind.mime)) {
-			kind = _kind
-			break
-		}
-	}
-	// TODO: mostrar error
-	if (!kind) 
-		throw new Error('¡Archivo no soportado!')
-
-	const currentMultimedia = figureEl.querySelector('*[data-editor-multimedia-element]')
-	const newMultimedia = kind.makeElement(url)
-	newMultimedia.dataset.editorMultimediaElement = true
-	if (currentMultimedia)
-		figureEl.replaceChild(newMultimedia, currentMultimedia)
-	else figureEl.appendChild(newMultimedia)
-}
-
-const block = {
-	selector: "FIGURE[data-editor-multimedia]",
-	createFn: editorEl => {
-		const el = document.createElement("FIGURE")
-		el.dataset.editorMultimedia = true
-
-		const placeholderEl = document.createElement("p")
-		placeholderEl.dataset.editorMultimediaElement = true
-		placeholderEl.append("Toca el borde para subir un archivo")
-		el.appendChild(placeholderEl)
-
-		const figcaptionEl = document.createElement("FIGCAPTION")
-		figcaptionEl.append("Escribí una descripción del archivo")
-		figcaptionEl.controls = true
-		el.appendChild(figcaptionEl)
-
-		return el
-	},
-}
-const typeWithProperty = {
-	selector: block.selector,
-	updateInput (el, editorEl) {
-		setAuxiliaryToolbar(editorEl, "multimedia")
-
-		const fileEl = editorEl.querySelector(`*[data-prop="multimedia-file"]`)
-		fileEl.disabled = false
-		// XXX: No se puede cambiar el texto del archivo seleccionado,
-		//   ¡esto puede ser confuso!
-
-		const altEl = editorEl.querySelector(`*[data-prop="multimedia-alt"]`)
-		altEl.disabled = false
-		altEl.value = el.alt
-
-		const uploadEl = editorEl.querySelector(`*[data-prop="multimedia-file-upload"]`)
-		uploadEl.disabled = false
-	},
-	disableInput (editorEl) {
-		const fileEl = editorEl.querySelector(`*[data-prop="multimedia-file"]`)
-		fileEl.disabled = true
-
-		const altEl = editorEl.querySelector(`*[data-prop="multimedia-alt"]`)
-		altEl.disabled = true
-		altEl.value = ""
-
-		const uploadEl = editorEl.querySelector(`*[data-prop="multimedia-file-upload"]`)
-		uploadEl.disabled = true
-	},
-	setupInput (editorEl, contentEl) {
-		const fileEl = editorEl.querySelector(`*[data-prop="multimedia-file"]`)
-		const uploadEl = editorEl.querySelector(`*[data-prop="multimedia-file-upload"]`)
-
-		uploadEl.addEventListener("click", event => {
-			const selectedEl = contentEl.querySelector("figure.selected")
-			if (!selectedEl) return
-
-			const file = fileEl.files[0]
-
-			selectedEl.dataset.editorLoading = true
-			uploadFile(file)
-				.then(url => {
-					setMultimedia(selectedEl, url, file.type)
-					delete selectedEl.dataset.editorError
-				})
-				.catch(err => {
-					// TODO: mostrar error
-					console.error(err)
-					selectedEl.dataset.editorError = true
-				})
-				.finally(() => {
-					delete selectedEl.dataset.editorLoading
-				})
-		}, false)
-
-		// TODO
-		const altEl = editorEl.querySelector(`*[data-prop="multimedia-alt"]`)
-		altEl.addEventListener("input", event => {
-			const imgEl = contentEl.querySelector("img.selected")
-			if (imgEl) imgEl.alt = imgAltEl.value
-		}, false)
-	},
-}
-
-export default { block, typeWithProperty }