From 73ee9e4d15e7c9cbab54a889943d538ad3a2b57f Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Tue, 2 Feb 2021 16:05:39 -0300
Subject: [PATCH] WIP: editor en webpack
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

mover el editor a webpack para tener mejores stacktraces

algunas funciones que se usan en types.js se definían en editor.js

conversión a arrow functions para tener consistencia en la sintaxis

cleanContent() falla diciendo que tagName no es un setter
---
 .../editor/editor.js}                         | 79 +++++++------------
 .../editor/types.js}                          | 41 +++++++---
 app/javascript/packs/application.js           |  1 +
 3 files changed, 60 insertions(+), 61 deletions(-)
 rename app/{assets/javascripts/02-editor.js => javascript/editor/editor.js} (90%)
 rename app/{assets/javascripts/01-types.js => javascript/editor/types.js} (92%)

diff --git a/app/assets/javascripts/02-editor.js b/app/javascript/editor/editor.js
similarity index 90%
rename from app/assets/javascripts/02-editor.js
rename to app/javascript/editor/editor.js
index 79d09f96..24c0f346 100644
--- a/app/assets/javascripts/02-editor.js
+++ b/app/javascript/editor/editor.js
@@ -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)
@@ -291,7 +280,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)) {
@@ -321,7 +310,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) {
@@ -405,10 +394,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")
@@ -439,7 +428,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')
 
@@ -448,9 +437,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)
@@ -472,15 +460,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)
@@ -527,9 +506,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")) {
diff --git a/app/assets/javascripts/01-types.js b/app/javascript/editor/types.js
similarity index 92%
rename from app/assets/javascripts/01-types.js
rename to app/javascript/editor/types.js
index 2caea19d..f5ffefca 100644
--- a/app/assets/javascripts/01-types.js
+++ b/app/javascript/editor/types.js
@@ -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) {
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index b8a8c00a..6d903b4a 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -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"