5
0
Fork 0
mirror of https://0xacab.org/sutty/sutty synced 2024-11-23 00:16:23 +00:00

Merge branch 'editor' into rails

This commit is contained in:
f 2021-02-02 17:36:21 -03:00
commit 143e392ab5
3 changed files with 66 additions and 63 deletions

View file

@ -1,3 +1,13 @@
import {
moveChildren,
marks,
blocks,
parentBlocks,
typesWithProperties,
setAuxiliaryToolbar,
tagNameSetFn
} from 'editor/types'
const origin = location.origin const origin = location.origin
/* /*
@ -27,7 +37,7 @@ const restoreContent = (editorEl, contentEl) => {
/* getRangeAt puede fallar si no hay una selección /* getRangeAt puede fallar si no hay una selección
*/ */
function safeGetRangeAt (num) { const safeGetRangeAt = (num) => {
try { try {
return window.getSelection().getRangeAt(num) return window.getSelection().getRangeAt(num)
} catch (error) { } catch (error) {
@ -36,48 +46,27 @@ function safeGetRangeAt (num) {
} }
} }
function uploadFile (file) {
return new Promise((resolve, reject) => {
const upload = new ActiveStorage.DirectUpload(
file,
origin + '/rails/active_storage/direct_uploads',
)
upload.create((error, blob) => { const isDirectChild = (node, supposedChild) => {
if (error) {
reject(error)
} else {
const url = `${origin}/rails/active_storage/blobs/${blob.signed_id}/${blob.filename}`
resolve(url)
}
})
})
}
function moveChildren (from, to, toRef) {
while (from.firstChild) to.insertBefore(from.firstChild, toRef);
}
function isDirectChild (node, supposedChild) {
for (const child of node.childNodes) { for (const child of node.childNodes) {
if (child == supposedChild) return true if (child == supposedChild) return true
} }
} }
function isChildSelection (sel, el) { const isChildSelection = (sel, el) => {
return ( return (
(el.contains(sel.anchorNode) || el.contains(sel.focusNode)) (el.contains(sel.anchorNode) || el.contains(sel.focusNode))
&& !(sel.anchorNode == el || sel.focusNode == el) && !(sel.anchorNode == el || sel.focusNode == el)
) )
} }
function getElementParent (node) { const getElementParent = (node) => {
let parentEl = node let parentEl = node
while (parentEl.nodeType != Node.ELEMENT_NODE) parentEl = parentEl.parentElement while (parentEl.nodeType != Node.ELEMENT_NODE) parentEl = parentEl.parentElement
return parentEl return parentEl
} }
function splitNode (node, range) { const splitNode = (node, range) => {
const [left, right] = [ const [left, right] = [
{ range: document.createRange(), node: node.cloneNode(false) }, { range: document.createRange(), node: node.cloneNode(false) },
{ range: document.createRange(), node: node.cloneNode(false) }, { range: document.createRange(), node: node.cloneNode(false) },
@ -109,7 +98,7 @@ function splitNode (node, range) {
* * mark: un objeto que representa el tipo de acción (ver types.js) * * mark: un objeto que representa el tipo de acción (ver types.js)
* * contentEl: el elemento de contenido del editor. * * contentEl: el elemento de contenido del editor.
*/ */
function setupMarkButton (button, mark, contentEl) { const setupMarkButton = (button, mark, contentEl) => {
button.addEventListener("click", event => { button.addEventListener("click", event => {
event.preventDefault() event.preventDefault()
@ -168,7 +157,7 @@ function setupMarkButton (button, mark, contentEl) {
} }
/* Igual que `setupMarkButton` pero para bloques. */ /* Igual que `setupMarkButton` pero para bloques. */
function setupBlockButton (button, block, contentEl, editorEl) { const setupBlockButton = (button, block, contentEl, editorEl) => {
button.addEventListener("click", event => { button.addEventListener("click", event => {
event.preventDefault() event.preventDefault()
@ -203,7 +192,7 @@ function setupBlockButton (button, block, contentEl, editorEl) {
} }
/* Igual que `setupBlockButton` pero para bloques parientes. */ /* Igual que `setupBlockButton` pero para bloques parientes. */
function setupParentBlockButton (button, parentBlock, contentEl) { const setupParentBlockButton = (button, parentBlock, contentEl) => {
button.addEventListener("click", event => { button.addEventListener("click", event => {
event.preventDefault() event.preventDefault()
@ -246,7 +235,7 @@ const elementIsTypes = types => element => {
const elementIsBlock = elementIsTypes(blocks) const elementIsBlock = elementIsTypes(blocks)
const elementIsParentBlock = elementIsTypes(parentBlocks) const elementIsParentBlock = elementIsTypes(parentBlocks)
function hasContent (element) { const hasContent = (element) => {
if (element.firstElementChild) return true if (element.firstElementChild) return true
for (const child of element.childNodes) { for (const child of element.childNodes) {
if (child.nodeType === Node.TEXT_NODE && child.data.length > 0) return true if (child.nodeType === Node.TEXT_NODE && child.data.length > 0) return true
@ -266,7 +255,7 @@ function hasContent (element) {
* * Cambia el tag de los bloques no reconocidos (ver `elementIsBlock`) * * Cambia el tag de los bloques no reconocidos (ver `elementIsBlock`)
* * Hace lo que hace cleanNode * * Hace lo que hace cleanNode
*/ */
function cleanContent (contentEl) { const cleanContent = (contentEl) => {
const sel = window.getSelection() const sel = window.getSelection()
cleanNode(contentEl, contentEl) cleanNode(contentEl, contentEl)
@ -276,14 +265,18 @@ function cleanContent (contentEl) {
if (elementIsParentBlock(child)) { if (elementIsParentBlock(child)) {
cleanContent(child) cleanContent(child)
} else if (!elementIsBlock(child)) { } else if (!elementIsBlock(child)) {
child.tagName = "P" const el = document.createElement("p")
moveChildren(child, el, null)
contentEl.insertBefore(el, child)
child.parentNode.removeChild(child)
} }
} else if (child.nodeType === Node.TEXT_NODE) { } else if (child.nodeType === Node.TEXT_NODE) {
const el = document.createElement("p") const el = document.createElement("p")
contentEl.insertBefore(el, child.nextSibling) contentEl.insertBefore(el, child.nextSibling)
el.appendChild(child) el.appendChild(child)
sel.collapse(el, el.textContent.length) sel.selectAllChildren(el)
sel.collapseToEnd()
} }
} }
} }
@ -293,7 +286,7 @@ function cleanContent (contentEl) {
* * Crea un p y inserta la selección si no hay elementos * * 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á * * Wrappea el contenido de un UL o OL en un LI si no lo está
*/ */
function fixContent (contentEl) { const fixContent = (contentEl) => {
for (const child of contentEl.childNodes) { for (const child of contentEl.childNodes) {
if (child.tagName) { if (child.tagName) {
if (elementIsParentBlock(child)) { if (elementIsParentBlock(child)) {
@ -323,7 +316,7 @@ function fixContent (contentEl) {
* * Borra propiedades de IMG no autorizadas * * Borra propiedades de IMG no autorizadas
* * Borra <FONT> y <STYLE> * * Borra <FONT> y <STYLE>
*/ */
function cleanNode (node, contentEl) { const cleanNode = (node, contentEl) => {
for (const child of node.childNodes) { for (const child of node.childNodes) {
if (child.nodeType === Node.TEXT_NODE) { if (child.nodeType === Node.TEXT_NODE) {
if (child.nextSibling && child.nextSibling.nodeType === Node.TEXT_NODE) { if (child.nextSibling && child.nextSibling.nodeType === Node.TEXT_NODE) {
@ -407,10 +400,10 @@ function cleanNode (node, contentEl) {
/* Generar el clickListener para este editor. /* Generar el clickListener para este editor.
*/ */
function generateClickListener (editorEl, contentEl) { const generateClickListener = (editorEl, contentEl) => {
/* El event listener para los typesWithProperties. /* El event listener para los typesWithProperties.
*/ */
return function clickListener (event) { return (event) => {
// Borrar todas las selecciones // Borrar todas las selecciones
for (const el of contentEl.querySelectorAll(".selected")) { for (const el of contentEl.querySelectorAll(".selected")) {
el.classList.remove("selected") el.classList.remove("selected")
@ -441,7 +434,7 @@ function generateClickListener (editorEl, contentEl) {
} }
} }
function setupEditor (editorEl) { const setupEditor = (editorEl) => {
// XXX: ¡Esto afecta a todo el documento! ¿Quizás usar un iframe para el editor? // XXX: ¡Esto afecta a todo el documento! ¿Quizás usar un iframe para el editor?
document.execCommand('defaultParagraphSeparator', false, 'p') document.execCommand('defaultParagraphSeparator', false, 'p')
@ -450,9 +443,8 @@ function setupEditor (editorEl) {
contentEl.addEventListener("paste", event => { contentEl.addEventListener("paste", event => {
editorEl.querySelector(".editor-aviso-word").style.display = "block" editorEl.querySelector(".editor-aviso-word").style.display = "block"
}) })
document.addEventListener("selectionchange", event => {
cleanContent(contentEl) document.addEventListener("selectionchange", event => cleanContent(contentEl))
})
const clickListener = generateClickListener(editorEl, contentEl) const clickListener = generateClickListener(editorEl, contentEl)
contentEl.addEventListener("click", clickListener, true) contentEl.addEventListener("click", clickListener, true)
@ -474,15 +466,6 @@ function setupEditor (editorEl) {
const editorBtn = id => editorEl.querySelector(`*[data-button="${id}"]`) const editorBtn = id => editorEl.querySelector(`*[data-button="${id}"]`)
// XXX: Por qué está duplicada de types.js esta función?
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)
}
// == SETUP BUTTONS == // == SETUP BUTTONS ==
for (const [name, mark] of Object.entries(marks)) { for (const [name, mark] of Object.entries(marks)) {
setupMarkButton(editorBtn(name), mark, contentEl) setupMarkButton(editorBtn(name), mark, contentEl)
@ -529,9 +512,7 @@ function setupEditor (editorEl) {
} }
// TODO: por ahora confiamos, quizás queremos filtrar estilos? // TODO: por ahora confiamos, quizás queremos filtrar estilos?
function stringifyAllowedStyle (element) { const stringifyAllowedStyle = (element) => element.style.cssText
return element.style.cssText
}
document.addEventListener("turbolinks:load", () => { document.addEventListener("turbolinks:load", () => {
for (const editorEl of document.querySelectorAll(".editor")) { for (const editorEl of document.querySelectorAll(".editor")) {

View file

@ -1,4 +1,4 @@
function setAuxiliaryToolbar (editorEl, toolbarName) { export const setAuxiliaryToolbar = (editorEl, toolbarName) => {
const toolbarEl = editorEl.querySelector(`*[data-editor-auxiliary-toolbar]`) const toolbarEl = editorEl.querySelector(`*[data-editor-auxiliary-toolbar]`)
for (const otherEl of toolbarEl.childNodes) { for (const otherEl of toolbarEl.childNodes) {
if (otherEl.nodeType !== Node.ELEMENT_NODE) continue if (otherEl.nodeType !== Node.ELEMENT_NODE) continue
@ -10,7 +10,29 @@ function setAuxiliaryToolbar (editorEl, toolbarName) {
} }
} }
const marks = { export const moveChildren = (from, to, toRef) => {
while (from.firstChild) to.insertBefore(from.firstChild, toRef);
}
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)
}
})
})
}
export const marks = {
bold: { bold: {
selector: "strong", selector: "strong",
createFn: () => document.createElement("STRONG"), createFn: () => document.createElement("STRONG"),
@ -45,7 +67,7 @@ const marks = {
} }
} }
const tagNameSetFn = tagName => el => { export const tagNameSetFn = tagName => el => {
const newEl = document.createElement(tagName) const newEl = document.createElement(tagName)
moveChildren(el, newEl, null) moveChildren(el, newEl, null)
el.parentNode.insertBefore(newEl, el) el.parentNode.insertBefore(newEl, el)
@ -53,7 +75,7 @@ const tagNameSetFn = tagName => el => {
window.getSelection().collapse(newEl, 0) window.getSelection().collapse(newEl, 0)
} }
const blocks = { export const blocks = {
p: { p: {
noButton: true, noButton: true,
selector: "P", selector: "P",
@ -158,7 +180,7 @@ const divWithStyleCreateFn = styleFn => () => {
return el return el
} }
const parentBlocks = { export const parentBlocks = {
left: { left: {
selector: "div[data-align=left]", selector: "div[data-align=left]",
createFn: divWithStyleCreateFn(el => el.dataset.align = "left"), createFn: divWithStyleCreateFn(el => el.dataset.align = "left"),
@ -173,19 +195,18 @@ const parentBlocks = {
}, },
} }
const hex = (x) => ("0" + parseInt(x).toString(16)).slice(-2)
// https://stackoverflow.com/a/3627747 // https://stackoverflow.com/a/3627747
// TODO: cambiar por una solución más copada // TODO: cambiar por una solución más copada
function rgb2hex(rgb) { const rgb2hex = (rgb) => {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
} }
const getSelected = contentEl => contentEl.querySelector(".selected") const getSelected = contentEl => contentEl.querySelector(".selected")
const typesWithProperties = { export const typesWithProperties = {
a: { a: {
selector: marks.a.selector, selector: marks.a.selector,
updateInput (el, editorEl) { updateInput (el, editorEl) {

View file

@ -26,6 +26,7 @@ window.airbrake = new Notifier({
import 'core-js/stable' import 'core-js/stable'
import 'regenerator-runtime/runtime' import 'regenerator-runtime/runtime'
import 'controllers' import 'controllers'
import 'editor/editor'
import {EditorState} from "prosemirror-state" import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view" import {EditorView} from "prosemirror-view"