mirror of
https://0xacab.org/sutty/sutty
synced 2024-11-22 21:26:21 +00:00
Merge branch 'void/editor' into rails
This commit is contained in:
f
commit
de5c1864c3
4 changed files with 29 additions and 877 deletions
|
|
@ -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:
|
||||
}
|
||||
})
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -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 }
|
||||
Loading…
Reference in a new issue