diff --git a/app/assets/javascripts/01-types.js b/app/assets/javascripts/01-types.js index 909b9e3..2caea19 100644 --- a/app/assets/javascripts/01-types.js +++ b/app/assets/javascripts/01-types.js @@ -259,7 +259,6 @@ const typesWithProperties = { const file = imgFileEl.files[0] - imgEl.src = URL.createObjectURL(file) imgEl.dataset.editorLoading = true uploadFile(file) .then(url => { @@ -321,7 +320,6 @@ const typesWithProperties = { const audioEl = figureEl.querySelector('audio') - audioEl.src = URL.createObjectURL(file) audioEl.dataset.editorLoading = true uploadFile(file) .then(url => { @@ -361,7 +359,6 @@ const typesWithProperties = { const file = videoFileEl.files[0] videoEl.poster = "" - videoEl.src = URL.createObjectURL(file) videoEl.dataset.editorLoading = true uploadFile(file) .then(url => { @@ -401,7 +398,6 @@ const typesWithProperties = { const file = pdfFileEl.files[0] const pdfEl = figureEl.children[0] - pdfEl.src = URL.createObjectURL(file) pdfEl.dataset.editorLoading = true uploadFile(file) .then(url => { diff --git a/app/assets/javascripts/02-editor.js b/app/assets/javascripts/02-editor.js index b95fe17..79d09f9 100644 --- a/app/assets/javascripts/02-editor.js +++ b/app/assets/javascripts/02-editor.js @@ -25,6 +25,17 @@ const restoreContent = (editorEl, contentEl) => { contentEl.innerHTML = content } +/* getRangeAt puede fallar si no hay una selección + */ +function safeGetRangeAt (num) { + try { + return window.getSelection().getRangeAt(num) + } catch (error) { + console.warn("No hay una selección!") + return null; + } +} + function uploadFile (file) { return new Promise((resolve, reject) => { const upload = new ActiveStorage.DirectUpload( @@ -108,7 +119,8 @@ function setupMarkButton (button, mark, contentEl) { let parentEl = getElementParent(sel.anchorNode) //if (sel.anchorNode == parentEl) parentEl = parentEl.firstChild - const range = sel.getRangeAt(0) + const range = safeGetRangeAt(0) + if (!range) return if (parentEl.matches(mark.selector)) { const [left, right] = splitNode(parentEl, range) @@ -169,7 +181,8 @@ function setupBlockButton (button, block, contentEl, editorEl) { || sel.focusNode == contentEl ) return - const range = sel.getRangeAt(0) + const range = safeGetRangeAt(0) + if (!range) return let parentEl = sel.anchorNode while (!isDirectChild(contentEl, parentEl)) parentEl = parentEl.parentElement @@ -202,7 +215,8 @@ function setupParentBlockButton (button, parentBlock, contentEl) { || sel.focusNode == contentEl ) return - const range = sel.getRangeAt(0) + const range = safeGetRangeAt(0) + if (!range) return let parentEl = sel.anchorNode while (!isDirectChild(contentEl, parentEl)) parentEl = parentEl.parentElement @@ -242,7 +256,8 @@ function hasContent (element) { if (element.tagName === "IMG" || element.tagName === "AUDIO" || element.tagName === "VIDEO" - || element.tagName === "IFRAME") return true + || element.tagName === "IFRAME" + || element.tagName === "BR") return true return false } @@ -264,13 +279,9 @@ function cleanContent (contentEl) { child.tagName = "P" } } else if (child.nodeType === Node.TEXT_NODE) { - const wasSelected = sel.getRangeAt(0).intersectsNode(child) - const el = document.createElement("p") - el.appendChild(child) contentEl.insertBefore(el, child.nextSibling) - - if (wasSelected) sel.collapse(el, child.data.length) + el.appendChild(child) } } } @@ -319,7 +330,8 @@ function cleanNode (node, contentEl) { child.parentNode.removeChild(child.nextSibling) } } else if (child.nodeType === Node.ELEMENT_NODE) { - if (!hasContent(child) && !window.getSelection().getRangeAt(0).intersectsNode(child)) + const range = safeGetRangeAt(0) + if (!hasContent(child) && (!range || !range.intersectsNode(child))) child.parentNode.removeChild(child) for (const mark of Object.values(marks)) { @@ -433,16 +445,6 @@ function setupEditor (editorEl) { const contentEl = editorEl.querySelector(".editor-content") - contentEl.addEventListener("keydown", event => { - if (event.keyCode === 32) { // Espacio - event.preventDefault() - const sel = window.getSelection() - const range = sel.getRangeAt(0) - range.insertNode(document.createTextNode("\xa0")) - cleanContent(contentEl) - range.collapse() - } - }) contentEl.addEventListener("paste", event => { editorEl.querySelector(".editor-aviso-word").style.display = "block" })