arreglar selecciones otra vez (+ estilos)

app/assets/javascripts/02-editor.js

@@ -335,10 +335,26 @@ 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
+			while (true) {
 				try {
-				result = findRecursiveChild(type.checkFn, range.commonAncestorContainer)
+					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
@@ -347,15 +363,20 @@ function setupEditor (editorEl) {
 				}
 
 				if (result) {
+					if (i === 0) {
 						type.updateInput(result, editorEl)
 						result.classList.add("selected")
-				break
 					} else {
-				if (!contentEl.contains(range.commonAncestorContainer)) return
-				type.disableInput(editorEl)
-				for (const el of contentEl.querySelectorAll(".selected")) {
-					el.classList.remove("selected")
+						result.classList.add("selected-unactive")
 					}
+					i++
+				} else {
+					break
+				}
+			}
+
+			if (i === 0) {
+				type.disableInput(editorEl)
 			}
 		}
 	})

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;