diff --git a/app/assets/javascripts/02-editor.js b/app/assets/javascripts/02-editor.js index e737ca9d..64c88107 100644 --- a/app/assets/javascripts/02-editor.js +++ b/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") - } } } }) diff --git a/app/assets/stylesheets/editor.scss b/app/assets/stylesheets/editor.scss index 75d8177b..d5290d41 100644 --- a/app/assets/stylesheets/editor.scss +++ b/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;