mirror of
https://0xacab.org/sutty/sutty
synced 2024-11-14 18:01:42 +00:00
Merge branch 'editor' into rails
This commit is contained in:
commit
143e392ab5
3 changed files with 66 additions and 63 deletions
|
@ -1,3 +1,13 @@
|
|||
import {
|
||||
moveChildren,
|
||||
marks,
|
||||
blocks,
|
||||
parentBlocks,
|
||||
typesWithProperties,
|
||||
setAuxiliaryToolbar,
|
||||
tagNameSetFn
|
||||
} from 'editor/types'
|
||||
|
||||
const origin = location.origin
|
||||
|
||||
/*
|
||||
|
@ -27,7 +37,7 @@ const restoreContent = (editorEl, contentEl) => {
|
|||
|
||||
/* getRangeAt puede fallar si no hay una selección
|
||||
*/
|
||||
function safeGetRangeAt (num) {
|
||||
const safeGetRangeAt = (num) => {
|
||||
try {
|
||||
return window.getSelection().getRangeAt(num)
|
||||
} 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) => {
|
||||
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) {
|
||||
const isDirectChild = (node, supposedChild) => {
|
||||
for (const child of node.childNodes) {
|
||||
if (child == supposedChild) return true
|
||||
}
|
||||
}
|
||||
|
||||
function isChildSelection (sel, el) {
|
||||
const isChildSelection = (sel, el) => {
|
||||
return (
|
||||
(el.contains(sel.anchorNode) || el.contains(sel.focusNode))
|
||||
&& !(sel.anchorNode == el || sel.focusNode == el)
|
||||
)
|
||||
}
|
||||
|
||||
function getElementParent (node) {
|
||||
const getElementParent = (node) => {
|
||||
let parentEl = node
|
||||
while (parentEl.nodeType != Node.ELEMENT_NODE) parentEl = parentEl.parentElement
|
||||
return parentEl
|
||||
}
|
||||
|
||||
function splitNode (node, range) {
|
||||
const splitNode = (node, range) => {
|
||||
const [left, right] = [
|
||||
{ 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)
|
||||
* * contentEl: el elemento de contenido del editor.
|
||||
*/
|
||||
function setupMarkButton (button, mark, contentEl) {
|
||||
const setupMarkButton = (button, mark, contentEl) => {
|
||||
button.addEventListener("click", event => {
|
||||
event.preventDefault()
|
||||
|
||||
|
@ -168,7 +157,7 @@ function setupMarkButton (button, mark, contentEl) {
|
|||
}
|
||||
|
||||
/* Igual que `setupMarkButton` pero para bloques. */
|
||||
function setupBlockButton (button, block, contentEl, editorEl) {
|
||||
const setupBlockButton = (button, block, contentEl, editorEl) => {
|
||||
button.addEventListener("click", event => {
|
||||
event.preventDefault()
|
||||
|
||||
|
@ -203,7 +192,7 @@ function setupBlockButton (button, block, contentEl, editorEl) {
|
|||
}
|
||||
|
||||
/* Igual que `setupBlockButton` pero para bloques parientes. */
|
||||
function setupParentBlockButton (button, parentBlock, contentEl) {
|
||||
const setupParentBlockButton = (button, parentBlock, contentEl) => {
|
||||
button.addEventListener("click", event => {
|
||||
event.preventDefault()
|
||||
|
||||
|
@ -246,7 +235,7 @@ const elementIsTypes = types => element => {
|
|||
const elementIsBlock = elementIsTypes(blocks)
|
||||
const elementIsParentBlock = elementIsTypes(parentBlocks)
|
||||
|
||||
function hasContent (element) {
|
||||
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
|
||||
|
@ -266,7 +255,7 @@ function hasContent (element) {
|
|||
* * Cambia el tag de los bloques no reconocidos (ver `elementIsBlock`)
|
||||
* * Hace lo que hace cleanNode
|
||||
*/
|
||||
function cleanContent (contentEl) {
|
||||
const cleanContent = (contentEl) => {
|
||||
const sel = window.getSelection()
|
||||
|
||||
cleanNode(contentEl, contentEl)
|
||||
|
@ -276,14 +265,18 @@ function cleanContent (contentEl) {
|
|||
if (elementIsParentBlock(child)) {
|
||||
cleanContent(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) {
|
||||
const el = document.createElement("p")
|
||||
contentEl.insertBefore(el, child.nextSibling)
|
||||
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
|
||||
* * 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) {
|
||||
if (child.tagName) {
|
||||
if (elementIsParentBlock(child)) {
|
||||
|
@ -323,7 +316,7 @@ function fixContent (contentEl) {
|
|||
* * Borra propiedades de IMG no autorizadas
|
||||
* * Borra <FONT> y <STYLE>
|
||||
*/
|
||||
function cleanNode (node, contentEl) {
|
||||
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) {
|
||||
|
@ -407,10 +400,10 @@ function cleanNode (node, contentEl) {
|
|||
|
||||
/* Generar el clickListener para este editor.
|
||||
*/
|
||||
function generateClickListener (editorEl, contentEl) {
|
||||
const generateClickListener = (editorEl, contentEl) => {
|
||||
/* El event listener para los typesWithProperties.
|
||||
*/
|
||||
return function clickListener (event) {
|
||||
return (event) => {
|
||||
// Borrar todas las selecciones
|
||||
for (const el of contentEl.querySelectorAll(".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?
|
||||
document.execCommand('defaultParagraphSeparator', false, 'p')
|
||||
|
||||
|
@ -450,9 +443,8 @@ function setupEditor (editorEl) {
|
|||
contentEl.addEventListener("paste", event => {
|
||||
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)
|
||||
contentEl.addEventListener("click", clickListener, true)
|
||||
|
@ -474,15 +466,6 @@ function setupEditor (editorEl) {
|
|||
|
||||
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 ==
|
||||
for (const [name, mark] of Object.entries(marks)) {
|
||||
setupMarkButton(editorBtn(name), mark, contentEl)
|
||||
|
@ -529,9 +512,7 @@ function setupEditor (editorEl) {
|
|||
}
|
||||
|
||||
// TODO: por ahora confiamos, quizás queremos filtrar estilos?
|
||||
function stringifyAllowedStyle (element) {
|
||||
return element.style.cssText
|
||||
}
|
||||
const stringifyAllowedStyle = (element) => element.style.cssText
|
||||
|
||||
document.addEventListener("turbolinks:load", () => {
|
||||
for (const editorEl of document.querySelectorAll(".editor")) {
|
|
@ -1,4 +1,4 @@
|
|||
function setAuxiliaryToolbar (editorEl, toolbarName) {
|
||||
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
|
||||
|
@ -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: {
|
||||
selector: "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)
|
||||
moveChildren(el, newEl, null)
|
||||
el.parentNode.insertBefore(newEl, el)
|
||||
|
@ -53,7 +75,7 @@ const tagNameSetFn = tagName => el => {
|
|||
window.getSelection().collapse(newEl, 0)
|
||||
}
|
||||
|
||||
const blocks = {
|
||||
export const blocks = {
|
||||
p: {
|
||||
noButton: true,
|
||||
selector: "P",
|
||||
|
@ -158,7 +180,7 @@ const divWithStyleCreateFn = styleFn => () => {
|
|||
return el
|
||||
}
|
||||
|
||||
const parentBlocks = {
|
||||
export const parentBlocks = {
|
||||
left: {
|
||||
selector: "div[data-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
|
||||
// TODO: cambiar por una solución más copada
|
||||
function rgb2hex(rgb) {
|
||||
const rgb2hex = (rgb) => {
|
||||
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]);
|
||||
}
|
||||
|
||||
const getSelected = contentEl => contentEl.querySelector(".selected")
|
||||
|
||||
const typesWithProperties = {
|
||||
export const typesWithProperties = {
|
||||
a: {
|
||||
selector: marks.a.selector,
|
||||
updateInput (el, editorEl) {
|
|
@ -26,6 +26,7 @@ window.airbrake = new Notifier({
|
|||
import 'core-js/stable'
|
||||
import 'regenerator-runtime/runtime'
|
||||
import 'controllers'
|
||||
import 'editor/editor'
|
||||
|
||||
import {EditorState} from "prosemirror-state"
|
||||
import {EditorView} from "prosemirror-view"
|
||||
|
|
Loading…
Reference in a new issue