arreglar selecciones otra vez (+ estilos)

app/assets/javascripts/02-editor.js

@@ -335,27 +335,48 @@ function setupEditor (editorEl) {
 		const sel = window.getSelection()
 		const range = sel.getRangeAt(0)
 
+		// Borrar todas las selecciones
+		for (const el of contentEl.querySelectorAll(".selected")) {
+			el.classList.remove("selected")
+		}
+		for (const el of contentEl.querySelectorAll(".selected-unactive")) {
+			el.classList.remove("selected-unactive")
+		}
+
 		for (const [name, type] of Object.entries(typesWithProperties)) {
+			let i = 0
+			
 			let result
-			try {
-				result = findRecursiveChild(type.checkFn, range.commonAncestorContainer)
-			} catch (err) {
-				// Permission denied or something...
-				// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Property_access_denied
-				console.log("Error raro", err)
-				break
+			while (true) {
+				try {
+					result = findRecursiveChild(
+						el => type.checkFn(el)
+							&& !(el.classList.contains("selected")
+								|| el.classList.contains("selected-unactive")),
+						range.commonAncestorContainer
+					)
+				} catch (err) {
+					// Permission denied or something...
+					// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Property_access_denied
+					console.log("Error raro", err)
+					break
+				}
+
+				if (result) {
+					if (i === 0) {
+						type.updateInput(result, editorEl)
+						result.classList.add("selected")
+					} else {
+						result.classList.add("selected-unactive")
+					}
+					i++
+				} else {
+					break
+				}
 			}
 
-			if (result) {
-				type.updateInput(result, editorEl)
-				result.classList.add("selected")
-				break
-			} else {
-				if (!contentEl.contains(range.commonAncestorContainer)) return
+			if (i === 0) {
 				type.disableInput(editorEl)
-				for (const el of contentEl.querySelectorAll(".selected")) {
-					el.classList.remove("selected")
-				}
 			}
 		}
 	})

app/assets/stylesheets/editor.scss

@@ -13,12 +13,13 @@
 		padding: 0;
 	}
 
-	.selected {
-		outline: #f206f9 solid medium;
+	/*.selected, .selected-unactive {
 		outline-offset: 1pt;
-	}
+	}*/
+	.selected { outline: #f206f9 solid medium; }
+	.selected-unactive { outline: gray solid medium; }
 
-	img, video, iframe {
+	img, video, iframe, audio {
 		width: 100%;
 		max-width: 600px;
 		display: block;