From 9514ff7e2461cfeac9dfa400a0bcad1d475fbacd Mon Sep 17 00:00:00 2001 From: void Date: Tue, 2 Feb 2021 17:00:42 +0000 Subject: [PATCH 1/4] editor: arreglar bug de los espacios --- app/assets/javascripts/02-editor.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/02-editor.js b/app/assets/javascripts/02-editor.js index b95fe17..5d383cf 100644 --- a/app/assets/javascripts/02-editor.js +++ b/app/assets/javascripts/02-editor.js @@ -242,7 +242,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 } @@ -433,16 +434,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" }) From 812f5aab2a73a9ea1daad0731b0eecae220c2308 Mon Sep 17 00:00:00 2001 From: void Date: Tue, 2 Feb 2021 17:20:32 +0000 Subject: [PATCH 2/4] editor: getRangeAt puede fallar --- app/assets/javascripts/02-editor.js | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/02-editor.js b/app/assets/javascripts/02-editor.js index 5d383cf..746141c 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 @@ -320,7 +334,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)) { From 8887932beee6b106855b520f2645ebf36d80e371 Mon Sep 17 00:00:00 2001 From: void Date: Tue, 2 Feb 2021 17:20:54 +0000 Subject: [PATCH 3/4] editor: no se por que falla esto MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit pero es medio chota la forma en que lo hace así que no me sorprende. igualmente esto no debería pasar. --- app/assets/javascripts/02-editor.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/assets/javascripts/02-editor.js b/app/assets/javascripts/02-editor.js index 746141c..79d09f9 100644 --- a/app/assets/javascripts/02-editor.js +++ b/app/assets/javascripts/02-editor.js @@ -279,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) } } } From 0c844a5c94fbb5ada01aa5887f1cd1c57bb88c9e Mon Sep 17 00:00:00 2001 From: void Date: Tue, 2 Feb 2021 17:44:10 +0000 Subject: [PATCH 4/4] =?UTF-8?q?editor:=20borrar=20c=C3=B3digo=20usando=20c?= =?UTF-8?q?reateObjectURL?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit está deprecado por Chrome y de todas formas hay cosas que no funcionaban por el content policy. hay algunos lugares en los que se podría arreglar (con MediaStream) pero IMO no tiene sentido --- app/assets/javascripts/01-types.js | 4 ---- 1 file changed, 4 deletions(-) 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 => {