Sutty/sutty
5
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

subida de imágenes; limpiar un poco

Browse source
This commit is contained in:
void 2020-11-05 19:19:02 -03:00
parent 9f36636227
commit fdb8584dcb
4 changed files with 43 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
app/assets/javascripts/01-types.js
View file

@ -146,32 +146,49 @@ const typesWithProperties = {
img: {
checkFn: blocks.img.checkFn,
updateInput (el, editorEl) {
const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]")
imgSrcEl.disabled = false
imgSrcEl.value = el.src
const imgFileEl = editorEl.querySelector(`*[data-prop="img-file"]`)
imgFileEl.disabled = false
// XXX: No se puede cambiar el texto, ¡esto puede ser confuso!
const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]")
const imgAltEl = editorEl.querySelector(`*[data-prop="img-alt"]`)
imgAltEl.disabled = false
imgAltEl.value = el.alt
},
disableInput (editorEl) {
const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]")
imgSrcEl.disabled = true
imgSrcEl.value = ""
const imgFileEl = editorEl.querySelector(`*[data-prop="img-file"]`)
imgFileEl.disabled = true
const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]")
const imgAltEl = editorEl.querySelector(`*[data-prop="img-alt"]`)
imgAltEl.disabled = true
imgAltEl.value = ""
},
setupInput (editorEl, contentEl) {
const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]")
imgSrcEl.addEventListener("input", event => {
const imgFileEl = editorEl.querySelector(`*[data-prop="img-file"]`)
imgFileEl.addEventListener("input", event => {
// const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl)
const imgEl = getSelected(contentEl)
if (imgEl) imgEl.src = imgSrcEl.value
if (!imgEl) return
const file = imgFileEl.files[0]
imgEl.src = URL.createObjectURL(file)
imgEl.dataset.editorLoading = true
uploadFile(file)
.then(url => {
imgEl.src = url
delete imgEl.dataset.editorError
})
.catch(err => {
// TODO: mostrar error
console.error(err)
imgEl.dataset.editorError = true
})
.finally(() => {
delete imgEl.dataset.editorLoading
})
}, false)
const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]")
const imgAltEl = editorEl.querySelector(`*[data-prop="img-alt"]`)
imgAltEl.addEventListener("input", event => {
// const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl)
const imgEl = getSelected(contentEl)

7
app/assets/stylesheets/editor.scss
View file

@ -30,4 +30,11 @@
div[data-align="center"] { text-align: center; }
div[data-align="right"] { text-align: right; }
}
*[data-editor-loading] {
opacity: 0.5;
}
*[data-editor-error] {
filter: grayscale(100%);
}
}

8
app/views/application/markdown.haml
View file

@ -17,17 +17,21 @@
%button{:data => {:button => "center"}} Center
%button{:data => {:button => "right"}} Right
%br/
// TODO: generar IDs para labels
%label{:for => "mark-color"} Color de resaltado:
%input{:type => "color", :data => {:prop => "mark-color"}}/
%br/
%label{:for => "img-src"} URL de imágen:
%input{:placeholder => "https://radio.sutty.nl/public/placeholder_992x992.png", :type => "url", :data => {:prop => "img-src"}}/
%label{:for => "img-file"} Archivo de la imágen:
%input{:type => "file", :data => {:prop => "img-file"}}/
%label{:for => "img-alt"} Descripción de imágen:
%input{:placeholder => "Un álbum", :type => "text", :data => {:prop => "img-alt"}}/
%button{:data => {:button => "img"}} Insertar imágen
%br/
%label{:for => "link-href"} URL de link:
%input{:type => "url", :data => {:prop => "link-href"}}/
.editor-content{:contenteditable => "true"}
%h1
Hola

2
config/initializers/content_security_policy.rb
View file

@ -14,7 +14,7 @@ Rails.application.config.content_security_policy do |policy|
policy.script_src :self
policy.font_src :self
# XXX: Los íconos de Trix se cargan vía data:
policy.img_src :self, :data, :https
policy.img_src :self, :data, :https, :blob
# Ya no usamos applets!
policy.object_src :none
if Rails.env.development?