poder seleccionar audio y pdf

app/assets/javascripts/01-types.js

@@ -88,10 +88,25 @@ const blocks = {
 			return el
 		},
 	},
+	figure: {
+		selector: "FIGURE",
+		noButton: true
+	},
+	figcaption: {
+		selector: "FIGCAPTION",
+		noButton: true,
+	},
 	audio: {
 		selector: "AUDIO",
 		createFn: editorEl => {
-			const el = document.createElement("AUDIO")
+			const el = document.createElement("FIGURE")
+
+			el.appendChild(document.createElement("AUDIO"))
+			el.appendChild(document.createElement("FIGCAPTION"))
+
+			el.children[0].controls = true
+			el.children[1].innerText = "Toca el borde para subir un archivo de audio"
+
 			return el
 		},
 	},
@@ -113,7 +128,13 @@ const blocks = {
 	pdf: {
 		selector: "IFRAME",
 		createFn: editorEl => {
-			const el = document.createElement("IFRAME")
+			const el = document.createElement("FIGURE")
+
+			el.appendChild(document.createElement("IFRAME"))
+			el.appendChild(document.createElement("FIGCAPTION"))
+
+			el.children[1].innerText = "Toca el borde para subir un archivo PDF"
+
 			return el
 		},
 	},
@@ -228,6 +249,21 @@ const typesWithProperties = {
 			}, false)
 		},
 	},
+	figure: {
+		selector: blocks.figure.selector,
+		actualInput (el) {
+			// TODO: Cuando tengamos otros iframes hay que seleccionarlos de
+			// otra forma.
+			const tag = el.children[0].tagName.toLowerCase()
+
+			return typesWithProperties[(tag === 'iframe' ? 'pdf' : tag)]
+		},
+		updateInput (el, editorEl) {
+			typesWithProperties.figure.actualInput(el).updateInput(el.children[0], editorEl)
+		},
+		disableInput (editorEl) {},
+		setupInput (editorEl, contentEl) {},
+	},
 	audio: {
 		selector: blocks.audio.selector,
 		updateInput (el, editorEl) {
@@ -244,11 +280,13 @@ const typesWithProperties = {
 		setupInput (editorEl, contentEl) {
 			const audioFileEl = editorEl.querySelector(`*[data-prop="audio-file"]`)
 			audioFileEl.addEventListener("input", event => {
-				const audioEl = getSelected(contentEl)
-				if (!audioEl) return
+				const figureEl = getSelected(contentEl)
+				if (!figureEl) return
 
 				const file = audioFileEl.files[0]
 
+				const audioEl = figureEl.querySelector('audio')
+
 				audioEl.src = URL.createObjectURL(file)
 				audioEl.dataset.editorLoading = true
 				uploadFile(file)
@@ -323,10 +361,11 @@ const typesWithProperties = {
 		setupInput (editorEl, contentEl) {
 			const pdfFileEl = editorEl.querySelector(`*[data-prop="pdf-file"]`)
 			pdfFileEl.addEventListener("input", event => {
-				const pdfEl = getSelected(contentEl)
-				if (!pdfEl) return
+				const figureEl = getSelected(contentEl)
+				if (!figureEl) return
 
 				const file = pdfFileEl.files[0]
+				const pdfEl = figureEl.children[0]
 
 				pdfEl.src = URL.createObjectURL(file)
 				pdfEl.dataset.editorLoading = true

app/assets/stylesheets/application.scss

@@ -23,6 +23,14 @@ $component-active-bg: $magenta;
 @import "bootstrap";
 @import "editor";
 
+.editor {
+  .editor-content {
+    figure {
+      border: 1px solid transparentize($magenta, 0.3)
+    }
+  }
+}
+
 :root {
   --foreground: #{$black};
   --background: #{$white};

app/assets/stylesheets/editor.scss

@@ -14,9 +14,14 @@
 	.selected { outline: #f206f9 solid medium; }
 
 	iframe {
+		border: 0;
 		min-height: 480px;
 	}
 
+	figure {
+		padding: .5rem;
+	}
+
 	img, video, iframe, audio {
 		width: 100%;
 		max-width: 600px;
@@ -51,7 +56,7 @@
 		div[data-align="center"] { text-align: center; }
 		div[data-align="right"] { text-align: right; }
 
-    min-height: 480px;
+		min-height: 480px;
 	}
 
 	*[data-editor-loading] {