5
0
Fork 0
mirror of https://0xacab.org/sutty/sutty synced 2024-11-14 17:11:41 +00:00

Merge branch 'void/editor' into rails

This commit is contained in:
f 2021-02-25 19:47:51 -03:00
commit de5c1864c3
4 changed files with 29 additions and 877 deletions

View file

@ -1,546 +0,0 @@
import {
moveChildren,
marks,
blocks,
parentBlocks,
typesWithProperties,
setAuxiliaryToolbar,
tagNameSetFn
} from 'editor/types'
import { setMultimedia } from 'editor/types/multimedia'
const origin = location.origin
/*
* Guarda una copia local de los cambios para poder recuperarlos
* después.
*
* Usamos la URL completa sin anchors.
*/
const storageKey = (editorEl) => editorEl.querySelector('[data-target="storage-key"]').value
const forgetContent = (storedKey) => window.localStorage.removeItem(storedKey)
const storeContent = (editorEl, contentEl) => {
if (contentEl.innerText.trim().length === 0) return
window.localStorage.setItem(storageKey(editorEl), contentEl.innerHTML)
}
const restoreContent = (editorEl, contentEl) => {
const content = window.localStorage.getItem(storageKey(editorEl))
if (!content) return
if (content.trim().length === 0) return
contentEl.innerHTML = content
}
/* getRangeAt puede fallar si no hay una selección
*/
const safeGetRangeAt = (num) => {
try {
return window.getSelection().getRangeAt(num)
} catch (error) {
console.warn("No hay una selección!")
return null;
}
}
const isDirectChild = (node, supposedChild) => {
for (const child of node.childNodes) {
if (child == supposedChild) return true
}
}
const isChildSelection = (sel, el) => {
return (
(el.contains(sel.anchorNode) || el.contains(sel.focusNode))
&& !(sel.anchorNode == el || sel.focusNode == el)
)
}
const getElementParent = (node) => {
let parentEl = node
while (parentEl.nodeType != Node.ELEMENT_NODE) parentEl = parentEl.parentElement
return parentEl
}
const splitNode = (node, range) => {
const [left, right] = [
{ range: document.createRange(), node: node.cloneNode(false) },
{ range: document.createRange(), node: node.cloneNode(false) },
]
left.range.setStartBefore(node.firstChild)
left.range.setEnd(range.startContainer, range.startOffset)
left.range.surroundContents(left.node)
right.range.setStart(range.endContainer, range.endOffset)
right.range.setEndAfter(node.lastChild)
right.range.surroundContents(right.node)
//left.node.appendChild(left.range.extractContents())
//left.range.insertNode(left.node)
//right.node.appendChild(right.range.extractContents())
//right.range.insertNode(right.node)
moveChildren(node, node.parentNode, node)
node.parentNode.removeChild(node)
return [left, right]
}
/* Configura un botón que hace una acción inline (ej: negrita).
* Parametros:
* * button: el botón
* * mark: un objeto que representa el tipo de acción (ver types.js)
* * contentEl: el elemento de contenido del editor.
*/
const setupMarkButton = (button, mark, contentEl) => {
button.addEventListener("click", event => {
event.preventDefault()
const sel = window.getSelection()
if (!isChildSelection(sel, contentEl)) return
let parentEl = getElementParent(sel.anchorNode)
//if (sel.anchorNode == parentEl) parentEl = parentEl.firstChild
const range = safeGetRangeAt(0)
if (!range) return
if (parentEl.matches(mark.selector)) {
const [left, right] = splitNode(parentEl, range)
right.range.insertNode(range.extractContents())
const selectionRange = document.createRange()
selectionRange.setStartAfter(left.node)
selectionRange.setEndBefore(right.node)
sel.removeAllRanges()
sel.addRange(selectionRange)
} else {
for (const child of parentEl.childNodes) {
if (
(child instanceof Element)
&& child.matches(mark.selector)
&& sel.containsNode(child)
) {
moveChildren(child, parentEl, child)
parentEl.removeChild(child)
// TODO: agregar a selección
return
}
}
const tagEl = mark.createFn()
try {
range.surroundContents(tagEl)
} catch (error) {
// TODO: mostrar error
return console.error("No puedo marcar cosas a través de distintos bloques!")
}
for (const child of tagEl.childNodes) {
if (child instanceof Element && child.matches(mark.selector)) {
moveChildren(child, tagEl, child)
tagEl.removeChild(child)
}
}
range.insertNode(tagEl)
range.selectNode(tagEl)
}
})
}
/* Igual que `setupMarkButton` pero para bloques. */
const setupBlockButton = (button, block, contentEl, editorEl) => {
button.addEventListener("click", event => {
event.preventDefault()
const sel = window.getSelection()
// TODO: mostrar error
if (
!contentEl.contains(sel.anchorNode)
|| !contentEl.contains(sel.focusNode)
|| sel.anchorNode == contentEl
|| sel.focusNode == contentEl
) return
const range = safeGetRangeAt(0)
if (!range) return
let parentEl = sel.anchorNode
while (!isDirectChild(contentEl, parentEl)) parentEl = parentEl.parentElement
if (block.setFn) {
if (parentEl.matches(block.selector)) {
tagNameSetFn("P")(parentEl)
} else {
block.setFn(parentEl)
}
} else if (block.createFn) {
const newEl = block.createFn(editorEl)
parentEl.parentElement.insertBefore(newEl, parentEl.nextSibling)
newEl.click()
}
})
}
/* Igual que `setupBlockButton` pero para bloques parientes. */
const setupParentBlockButton = (button, parentBlock, contentEl) => {
button.addEventListener("click", event => {
event.preventDefault()
const sel = window.getSelection()
if (
!contentEl.contains(sel.anchorNode)
|| !contentEl.contains(sel.focusNode)
|| sel.anchorNode == contentEl
|| sel.focusNode == contentEl
) return
const range = safeGetRangeAt(0)
if (!range) return
let parentEl = sel.anchorNode
while (!isDirectChild(contentEl, parentEl)) parentEl = parentEl.parentElement
if (parentEl.matches(parentBlock.selector)) {
moveChildren(parentEl, parentEl.parentElement, parentEl)
parentEl.parentElement.removeChild(parentEl)
} else if (elementIsParentBlock(parentEl)) {
const el = parentBlock.createFn()
moveChildren(parentEl, el, null)
parentEl.parentElement.insertBefore(el, parentEl)
parentEl.parentElement.removeChild(parentEl)
} else {
const el = parentBlock.createFn()
parentEl.parentElement.insertBefore(el, parentEl)
el.appendChild(parentEl)
}
})
}
const elementIsTypes = types => element => {
for (const type of Object.values(types)) {
if (element.matches(type.selector)) return true
}
return false
}
const elementIsBlock = elementIsTypes(blocks)
const elementIsParentBlock = elementIsTypes(parentBlocks)
const hasContent = (element) => {
if (element.firstElementChild) return true
for (const child of element.childNodes) {
if (child.nodeType === Node.TEXT_NODE && child.data.length > 0) return true
else if (child.hasChildNodes() && hasContent(child)) return true
}
// TODO: verificar que los elementos tiene contenido
if (element.tagName === "BR") return true
if (element.parentElement.tagName === "FIGURE"
&& (element.dataset.editorMultimediaElement
|| element.tagName === "FIGCAPTION")
) return true
return false
}
/* Limpia el elemento de contenido del editor
* Por ahora:
* * Cambia el tag de los bloques no reconocidos (ver `elementIsBlock`)
* * Borra <figure> sin multimedia adentro
* * Hace lo que hace cleanNode
*/
const cleanContent = (contentEl) => {
const sel = window.getSelection()
cleanNode(contentEl, contentEl)
for (const child of contentEl.childNodes) {
if (child.tagName) {
if (elementIsParentBlock(child)) {
cleanContent(child)
} else if (child.tagName === "FIGURE") {
if (
!child.querySelector('*[data-editor-multimedia-element]')
&& !child.dataset.editorLoading
) {
moveChildren(child, child.parentNode, child)
child.parentNode.removeChild(child)
}
} else if (!elementIsBlock(child)) {
const el = document.createElement("p")
moveChildren(child, el, null)
child.parentNode.replaceChild(el, child)
}
} else if (child.nodeType === Node.TEXT_NODE) {
const el = document.createElement("p")
contentEl.insertBefore(el, child.nextSibling)
el.appendChild(child)
sel.selectAllChildren(el)
sel.collapseToEnd()
}
}
}
/* Arregla cosas en el elemento de contendo del editor
* Por ahora:
* * Crea un p y inserta la selección si no hay elementos
* * Wrappea el contenido de un UL o OL en un LI si no lo está
*/
const fixContent = (contentEl) => {
for (const child of contentEl.childNodes) {
if (child.tagName) {
if (elementIsParentBlock(child)) {
fixContent(child)
} else if (child.tagName === "UL" || child.tagName === "OL") {
let notItems = []
for (const item of child.childNodes) {
if (item.tagName !== "LI") notItems.push(item)
}
if (notItems.length) {
const item = document.createElement("li")
item.append(...notItems)
child.appendChild(item)
}
}
}
}
}
/* Recursivamente "limpia" los nodos a partir del llamado.
* Por ahora:
* * Junta nodos de texto que están al lado
* * Junta nodos de la misma "mark" que están al lado
* * Borra elementos sin contenido (ver `hasContent`) y no están seleccionados
* * Borra inline styles no autorizados
* * Borra propiedades de IMG no autorizadas
* * Borra <FONT> y <STYLE>
*/
const cleanNode = (node, contentEl) => {
for (const child of node.childNodes) {
if (child.nodeType === Node.TEXT_NODE) {
if (child.nextSibling && child.nextSibling.nodeType === Node.TEXT_NODE) {
// Juntar nodos
child.data += child.nextSibling.data
child.parentNode.removeChild(child.nextSibling)
}
} else if (child.nodeType === Node.ELEMENT_NODE) {
const range = safeGetRangeAt(0)
if (!hasContent(child) && (!range || !range.intersectsNode(child)))
child.parentNode.removeChild(child)
for (const mark of Object.values(marks)) {
if (
child.matches(mark.selector)
&& child.nextSibling
&& (child.nextSibling instanceof Element)
&& child.nextSibling.matches(mark.selector)
) {
moveChildren(child.nextSibling, child, null)
child.nextSibling.parentNode.removeChild(child.nextSibling)
}
}
if (child.tagName === "LI") {
let parentEl = child
while (
parentEl
&& !(parentEl.nodeType == Node.ELEMENT_NODE && elementIsBlock(parentEl))
&& contentEl.contains(parentEl)
)
parentEl = parentEl.parentElement
if (
parentEl
&& contentEl.contains(parentEl)
&& parentEl.tagName !== "UL"
&& parentEl.tagName !== "OL"
)
moveChildren(child, parentEl, child.nextSibling)
} else if (child.tagName === "IMG") {
if (child.getAttribute("width")) child.removeAttribute("width")
if (child.getAttribute("height")) child.removeAttribute("height")
if (child.getAttribute("vspace")) child.removeAttribute("vspace")
if (child.getAttribute("hspace")) child.removeAttribute("hspace")
if (child.align.length) child.removeAttribute("align")
if (child.name.length) child.removeAttribute("name")
if (!child.src.length) child.src = "/placeholder.png"
} else if (child.tagName === "FONT") {
moveChildren(child, child.parentElement, child.nextSiling)
child.parentElement.removeChild(child)
return
} else if (child.tagName === "STYLE") {
return child.parentElement.removeChild(child)
} else if (child.tagName === "B") {
const el = document.createElement("STRONG")
moveChildren(child, el)
child.parentElement.insertBefore(el, child)
child.parentElement.removeChild(child)
} else if (child.tagName === "I") {
const el = document.createElement("EM")
moveChildren(child, el)
child.parentElement.insertBefore(el, child)
child.parentElement.removeChild(child)
}
child.style.forEach(prop => {
const value = child.style[prop]
switch (prop) {
case 'background-color':
if (child.tagName === "MARK") return
default:
child.style[prop] = ""
}
})
}
cleanNode(child, contentEl)
}
}
/* Generar el clickListener para este editor.
*/
const generateClickListener = (editorEl, contentEl) => {
/* El event listener para los typesWithProperties.
*/
return (event) => {
// Borrar todas las selecciones
for (const el of contentEl.querySelectorAll(".selected")) {
el.classList.remove("selected")
}
setAuxiliaryToolbar(editorEl)
let selectedType
let selectedEl
for (const [name, type] of Object.entries(typesWithProperties)) {
type.disableInput(editorEl)
let el = event.target
while (el && !el.matches(type.selector)) el = el.parentElement
if (el && contentEl.contains(el)) {
selectedType = type
selectedEl = el
}
}
if (selectedType) {
event.preventDefault()
selectedType.updateInput(selectedEl, editorEl)
selectedEl.classList.add("selected")
return false
}
}
}
const setupEditor = (editorEl) => {
// XXX: ¡Esto afecta a todo el documento! ¿Quizás usar un iframe para el editor?
document.execCommand('defaultParagraphSeparator', false, 'p')
const contentEl = editorEl.querySelector(".editor-content")
contentEl.addEventListener("paste", event => {
editorEl.querySelector(".editor-aviso-word").style.display = "block"
})
document.addEventListener("selectionchange", event => cleanContent(contentEl))
const clickListener = generateClickListener(editorEl, contentEl)
contentEl.addEventListener("click", clickListener, true)
const htmlEl = editorEl.querySelector("textarea")
const observer = new MutationObserver((mutationList, observer) => {
cleanContent(contentEl)
fixContent(contentEl)
storeContent(editorEl, contentEl)
htmlEl.value = contentEl.innerHTML
})
observer.observe(contentEl, {
childList: true,
attributes: true,
subtree: true,
characterData: true,
})
const editorBtn = id => editorEl.querySelector(`*[data-button="${id}"]`)
// == SETUP BUTTONS ==
for (const [name, mark] of Object.entries(marks)) {
setupMarkButton(editorBtn(name), mark, contentEl)
}
for (const [name, block] of Object.entries(blocks)) {
if (block.noButton) continue
setupBlockButton(editorBtn(name), block, contentEl, editorEl)
}
for (const [name, parentBlock] of Object.entries(parentBlocks)) {
if (parentBlock.noButton) continue
setupParentBlockButton(editorBtn(name), parentBlock, contentEl)
}
for (const [name, type] of Object.entries(typesWithProperties)) {
type.setupInput(editorEl, contentEl)
}
document.addEventListener(editorBtn("mark"), () => setAuxiliaryToolbar(editorEl, "mark"))
document.addEventListener(editorBtn("img"), () => setAuxiliaryToolbar(editorEl, "img"))
document.addEventListener(editorBtn("audio"), () => setAuxiliaryToolbar(editorEl, "audio"))
document.addEventListener(editorBtn("video"), () => setAuxiliaryToolbar(editorEl, "video"))
document.addEventListener(editorBtn("pdf"), () => setAuxiliaryToolbar(editorEl, "pdf"))
document.addEventListener(editorBtn("a"), () => setAuxiliaryToolbar(editorEl, "a"))
for (const video of document.querySelectorAll('.editor .editor-content video')) {
video.addEventListener('click', event => event.target.controls = true)
video.addEventListener('focusout', event => event.target.controls = false)
video.controls = false
}
cleanContent(contentEl)
fixContent(contentEl)
// Recuperar el contenido si hay algo guardado, si tuviéramos un campo
// de última edición podríamos saber si el artículo fue editado
// después o la versión local es la última.
//
// TODO: Preguntar si se lo quiere recuperar.
restoreContent(editorEl, contentEl)
htmlEl.value = contentEl.innerHTML
}
// TODO: por ahora confiamos, quizás queremos filtrar estilos?
const stringifyAllowedStyle = (element) => element.style.cssText
document.addEventListener("turbolinks:load", () => {
for (const editorEl of document.querySelectorAll(".editor")) {
if (!editorEl.querySelector('.editor-toolbar')) continue
setupEditor(editorEl)
}
const flash = document.querySelector('.js-flash[data-target="editor"]')
if (!flash) return
switch (flash.dataset.action) {
case 'forget-content':
if (!flash.dataset.keys) break
try { JSON.parse(flash.dataset.keys).forEach(forgetContent) } catch(e) { undefined }
break
default:
}
})

View file

@ -1,5 +1,5 @@
import { storeContent, restoreContent } from 'editor/storage'
import { isDirectChild, moveChildren, safeGetSelection, safeGetRangeAt, setAuxiliaryToolbar } from 'editor/utils'
import { isDirectChild, moveChildren, safeGetSelection, safeGetRangeAt, setAuxiliaryToolbar, parentBlockNames } from 'editor/utils'
import { types, getValidChildren, getType } from 'editor/types'
import { setupButtons as setupMarksButtons } from 'editor/types/marks'
import { setupButtons as setupBlocksButtons } from 'editor/types/blocks'
@ -14,7 +14,7 @@ import { setupAuxiliaryToolbar as setupMarkAuxiliaryToolbar } from 'editor/types
// Esta funcion corrije errores que pueden haber como:
// * que un nodo que no tiene 'text' permitido no tenga children (se les
// inserta un allowedChildren[0])
// * TODO: que haya una imágen sin <figure> o que no esté como bloque (se ponen
// * que haya una imágen sin <figure> o que no esté como bloque (se ponen
// después del bloque en el que están como bloque de por si)
// * convierte <i> y <b> en <em> y <strong>
// Lo hace para que siga la estructura del documento y que no se borren por
@ -38,6 +38,33 @@ function fixContent (editor: Editor, node: Element = editor.contentEl): void {
node = el
}
if (node instanceof HTMLImageElement) {
node.dataset.multimediaInner = ''
const figureEl = types.multimedia.create(editor)
let targetEl = node.parentElement
if (!targetEl) throw new Error('No encontré lx objetivo')
while (true) {
const type = getType(targetEl)
if (!type) throw new Error('lx objetivo tiene tipo')
if (type.type.allowedChildren.includes('multimedia')) break
if (!targetEl.parentElement) throw new Error('No encontré lx objetivo')
targetEl = targetEl.parentElement
}
let parentEl = [...targetEl.childNodes].find(
el => el.contains(node)
)
if (!parentEl) throw new Error('no encontré lx pariente')
const innerEl = figureEl.querySelector('[data-multimedia-inner]')
if (!innerEl) throw new Error('Raro.')
figureEl.replaceChild(node, innerEl)
targetEl.insertBefore(figureEl, parentEl)
node = figureEl
}
const _type = getType(node)
if (!_type) return

View file

@ -1,181 +0,0 @@
import multimedia from './types/multimedia'
export const setAuxiliaryToolbar = (editorEl, toolbarName) => {
const toolbarEl = editorEl.querySelector(`*[data-editor-auxiliary-toolbar]`)
for (const otherEl of toolbarEl.childNodes) {
if (otherEl.nodeType !== Node.ELEMENT_NODE) continue
otherEl.classList.remove("editor-auxiliary-tool-active")
}
if (toolbarName) {
const auxEl = editorEl.querySelector(`*[data-editor-auxiliary="${toolbarName}"]`)
auxEl.classList.add("editor-auxiliary-tool-active")
}
}
export const moveChildren = (from, to, toRef) => {
while (from.firstChild) to.insertBefore(from.firstChild, toRef);
}
export const marks = {
bold: {
selector: "strong",
createFn: () => document.createElement("STRONG"),
},
italic: {
selector: "em",
createFn: () => document.createElement("EM"),
},
deleted: {
selector: "del",
createFn: () => document.createElement("DEL"),
},
underline: {
selector: "u",
createFn: () => document.createElement("U"),
},
sub: {
selector: "sub",
createFn: () => document.createElement("SUB"),
},
sup: {
selector: "sup",
createFn: () => document.createElement("SUP"),
},
mark: {
selector: "mark",
createFn: () => document.createElement("MARK"),
},
a: {
selector: "a",
createFn: () => document.createElement("A"),
}
}
export const tagNameSetFn = tagName => el => {
const newEl = document.createElement(tagName)
moveChildren(el, newEl, null)
el.parentNode.insertBefore(newEl, el)
el.parentNode.removeChild(el)
window.getSelection().collapse(newEl, 0)
}
export const blocks = {
p: {
noButton: true,
selector: "P",
setFn: tagNameSetFn("P"),
},
h1: {
selector: "H1",
setFn: tagNameSetFn("H1"),
},
h2: {
selector: "H2",
setFn: tagNameSetFn("H2"),
},
h3: {
selector: "H3",
setFn: tagNameSetFn("H3"),
},
h4: {
selector: "H4",
setFn: tagNameSetFn("H4"),
},
h5: {
selector: "H5",
setFn: tagNameSetFn("H5"),
},
h6: {
selector: "H6",
setFn: tagNameSetFn("H6"),
},
ul: {
selector: "UL",
setFn: tagNameSetFn("UL"),
},
ol: {
selector: "OL",
setFn: tagNameSetFn("OL"),
},
multimedia: multimedia.block,
}
const divWithStyleCreateFn = styleFn => () => {
const el = document.createElement("DIV")
styleFn(el)
return el
}
export const parentBlocks = {
left: {
selector: "div[data-align=left]",
createFn: divWithStyleCreateFn(el => el.dataset.align = "left"),
},
center: {
selector: "div[data-align=center]",
createFn: divWithStyleCreateFn(el => el.dataset.align = "center"),
},
right: {
selector: "div[data-align=right]",
createFn: divWithStyleCreateFn(el => el.dataset.align = "right"),
},
}
const hex = (x) => ("0" + parseInt(x).toString(16)).slice(-2)
// https://stackoverflow.com/a/3627747
// TODO: cambiar por una solución más copada
const rgb2hex = (rgb) => {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
const getSelected = contentEl => contentEl.querySelector(".selected")
export const typesWithProperties = {
a: {
selector: marks.a.selector,
updateInput (el, editorEl) {
setAuxiliaryToolbar(editorEl, "a")
const markAInputEl = editorEl.querySelector(`*[data-prop="a-href"]`)
markAInputEl.disabled = false
markAInputEl.value = el.href
},
disableInput (editorEl) {
const markAInputEl = editorEl.querySelector(`*[data-prop="a-href"]`)
markAInputEl.disabled = true
markAInputEl.value = ""
},
setupInput (editorEl, contentEl) {
const markAInputEl = editorEl.querySelector(`*[data-prop="a-href"]`)
markAInputEl.addEventListener("change", event => {
const markEl = contentEl.querySelector(marks.a.selector + ".selected")
if (markEl) markEl.href = markAInputEl.value
}, false)
}
},
mark: {
selector: marks.mark.selector,
updateInput (el, editorEl) {
setAuxiliaryToolbar(editorEl, "mark")
const markColorInputEl = editorEl.querySelector(`*[data-prop="mark-color"]`)
markColorInputEl.disabled = false
markColorInputEl.value = el.style.backgroundColor ? rgb2hex(el.style.backgroundColor) : "#f206f9"
},
disableInput (editorEl) {
const markColorInputEl = editorEl.querySelector(`*[data-prop="mark-color"]`)
markColorInputEl.disabled = true
markColorInputEl.value = "#000000"
},
setupInput (editorEl, contentEl) {
const markColorInputEl = editorEl.querySelector(`*[data-prop="mark-color"]`)
markColorInputEl.addEventListener("change", event => {
const markEl = contentEl.querySelector(marks.mark.selector + ".selected")
if (markEl) markEl.style.backgroundColor = markColorInputEl.value
}, false)
},
},
multimedia: multimedia.typeWithProperty,
}

View file

@ -1,148 +0,0 @@
import { setAuxiliaryToolbar } from '../types'
const uploadFile = (file) => {
return new Promise((resolve, reject) => {
const upload = new ActiveStorage.DirectUpload(
file,
origin + '/rails/active_storage/direct_uploads',
)
upload.create((error, blob) => {
if (error) {
reject(error)
} else {
const url = `${origin}/rails/active_storage/blobs/${blob.signed_id}/${blob.filename}`
resolve(url)
}
})
})
}
const srcMakeElement = tag => url => {
const el = document.createElement(tag)
el.src = url
return el
}
const multimediaKinds = {
img: {
mime: /^image\/.+$/,
makeElement: srcMakeElement('img'),
},
audio: {
mime: /^audio\/.+$/,
makeElement: srcMakeElement('audio'),
},
video: {
mime: /^video\/.+$/,
makeElement: srcMakeElement('video'),
},
pdf: {
mime: /^application\/pdf$/,
makeElement: srcMakeElement('iframe'),
},
}
const setMultimedia = (figureEl, url, mimeType) => {
let kind
for (const _kind of Object.values(multimediaKinds)) {
if (mimeType.match(_kind.mime)) {
kind = _kind
break
}
}
// TODO: mostrar error
if (!kind)
throw new Error('¡Archivo no soportado!')
const currentMultimedia = figureEl.querySelector('*[data-editor-multimedia-element]')
const newMultimedia = kind.makeElement(url)
newMultimedia.dataset.editorMultimediaElement = true
if (currentMultimedia)
figureEl.replaceChild(newMultimedia, currentMultimedia)
else figureEl.appendChild(newMultimedia)
}
const block = {
selector: "FIGURE[data-editor-multimedia]",
createFn: editorEl => {
const el = document.createElement("FIGURE")
el.dataset.editorMultimedia = true
const placeholderEl = document.createElement("p")
placeholderEl.dataset.editorMultimediaElement = true
placeholderEl.append("Toca el borde para subir un archivo")
el.appendChild(placeholderEl)
const figcaptionEl = document.createElement("FIGCAPTION")
figcaptionEl.append("Escribí una descripción del archivo")
figcaptionEl.controls = true
el.appendChild(figcaptionEl)
return el
},
}
const typeWithProperty = {
selector: block.selector,
updateInput (el, editorEl) {
setAuxiliaryToolbar(editorEl, "multimedia")
const fileEl = editorEl.querySelector(`*[data-prop="multimedia-file"]`)
fileEl.disabled = false
// XXX: No se puede cambiar el texto del archivo seleccionado,
// ¡esto puede ser confuso!
const altEl = editorEl.querySelector(`*[data-prop="multimedia-alt"]`)
altEl.disabled = false
altEl.value = el.alt
const uploadEl = editorEl.querySelector(`*[data-prop="multimedia-file-upload"]`)
uploadEl.disabled = false
},
disableInput (editorEl) {
const fileEl = editorEl.querySelector(`*[data-prop="multimedia-file"]`)
fileEl.disabled = true
const altEl = editorEl.querySelector(`*[data-prop="multimedia-alt"]`)
altEl.disabled = true
altEl.value = ""
const uploadEl = editorEl.querySelector(`*[data-prop="multimedia-file-upload"]`)
uploadEl.disabled = true
},
setupInput (editorEl, contentEl) {
const fileEl = editorEl.querySelector(`*[data-prop="multimedia-file"]`)
const uploadEl = editorEl.querySelector(`*[data-prop="multimedia-file-upload"]`)
uploadEl.addEventListener("click", event => {
const selectedEl = contentEl.querySelector("figure.selected")
if (!selectedEl) return
const file = fileEl.files[0]
selectedEl.dataset.editorLoading = true
uploadFile(file)
.then(url => {
setMultimedia(selectedEl, url, file.type)
delete selectedEl.dataset.editorError
})
.catch(err => {
// TODO: mostrar error
console.error(err)
selectedEl.dataset.editorError = true
})
.finally(() => {
delete selectedEl.dataset.editorLoading
})
}, false)
// TODO
const altEl = editorEl.querySelector(`*[data-prop="multimedia-alt"]`)
altEl.addEventListener("input", event => {
const imgEl = contentEl.querySelector("img.selected")
if (imgEl) imgEl.alt = imgAltEl.value
}, false)
},
}
export default { block, typeWithProperty }