editor: hacer que el color de mark se pueda cambiar

app/javascript/editor/editor.ts

@@ -5,6 +5,7 @@ import { setupButtons as setupMarksButtons } from 'editor/types/marks'
 import { setupButtons as setupBlocksButtons } from 'editor/types/blocks'
 import { setupButtons as setupParentBlocksButtons } from 'editor/types/parentBlocks'
 import { setupAuxiliaryToolbar as setupLinkAuxiliaryToolbar } from 'editor/types/link'
+import { setupAuxiliaryToolbar as setupMarkAuxiliaryToolbar } from 'editor/types/mark'
 
 // Esta funcion corrije errores que pueden haber como:
 //  * que un nodo que no tiene 'text' permitido no tenga children (se les
@@ -232,6 +233,7 @@ function setupEditor (editorEl: HTMLElement): void {
 	setupParentBlocksButtons(editor)
 
 	setupLinkAuxiliaryToolbar(editor)
+	setupMarkAuxiliaryToolbar(editor)
 
 	// Finally...
 	routine(editor)

app/javascript/editor/types/link.ts

@@ -13,7 +13,7 @@ export const link: EditorNode = {
 		el.dataset.editorSelected = ''
 		editor.toolbar.auxiliary.link.urlEl.value = el.href
 		setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.link.parentEl)
-	}
+	},
 }
 
 export function setupAuxiliaryToolbar (editor: Editor): void {

app/javascript/editor/types/mark.ts

@@ -0,0 +1,44 @@
+import { Editor } from 'editor/editor'
+import { EditorNode } from 'editor/types'
+import { markNames, setAuxiliaryToolbar } from 'editor/utils'
+
+const hex = (x: string) => ("0" + parseInt(x).toString(16)).slice(-2)
+// https://stackoverflow.com/a/3627747
+// TODO: cambiar por una solución más copada
+function rgbToHex (rgb: string): string {
+	const matches = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
+	if (!matches) throw new Error('no pude parsear el rgb()')
+	return "#" + hex(matches[1]) + hex(matches[2]) + hex(matches[3])
+}
+
+export const mark: EditorNode = {
+	selector: 'mark',
+	allowedChildren: [...markNames.filter(n => n !== 'mark'), 'text'],
+	handleEmpty: 'remove',
+	create: () => document.createElement('mark'),
+	onClick (editor, el) {
+		if (!(el instanceof HTMLElement))
+			throw new Error('oh no')
+		el.dataset.editorSelected = ''
+		editor.toolbar.auxiliary.mark.colorEl.value
+			= el.style.backgroundColor
+				? rgbToHex(el.style.backgroundColor)
+				: '#f206f9'
+		setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.mark.parentEl)
+	},
+}
+
+export function setupAuxiliaryToolbar (editor: Editor): void {
+	editor.toolbar.auxiliary.mark.colorEl.addEventListener('input', event => {
+		const color = editor.toolbar.auxiliary.mark.colorEl.value
+		const selectedEl = editor.contentEl
+			.querySelector<HTMLElement>('mark[data-editor-selected]')
+		if (!selectedEl)
+			throw new Error('No pude encontrar el mark para setear el color')
+		
+		selectedEl.style.backgroundColor = color
+	})
+	editor.toolbar.auxiliary.mark.colorEl.addEventListener('keydown', event => {
+		if (event.keyCode == 13) event.preventDefault()
+	})
+}

app/javascript/editor/types/marks.ts

@@ -7,6 +7,7 @@ import {
 	setAuxiliaryToolbar,
 } from 'editor/utils'
 import { link } from 'editor/types/link'
+import { mark } from 'editor/types/mark'
 
 function makeMark (name: string, tag: string): EditorNode {
 	return {
@@ -25,7 +26,7 @@ export const marks: { [propName: string]: EditorNode } = {
 	underline: makeMark('underline', 'u'),
 	sub: makeMark('sub', 'sub'),
 	super: makeMark('super', 'sup'),
-	mark: makeMark('mark', 'mark'),
+	mark,
 	link,
 }