llamar a onClick al crear nodos

si hay un onClick cuando se apreta el botón para crear el nodo, se
llama. esto hace que las cosas con barras auxiliares aparezcan cuando se
crean sin tener que apretar manualmente.

app/javascript/editor/editor.ts

@@ -1,5 +1,5 @@
 import { storeContent, restoreContent, forgetContent } from 'editor/storage'
-import { isDirectChild, moveChildren, safeGetSelection, safeGetRangeAt, setAuxiliaryToolbar, parentBlockNames } from 'editor/utils'
+import { isDirectChild, moveChildren, safeGetSelection, safeGetRangeAt, setAuxiliaryToolbar, parentBlockNames, clearSelected } 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'
@@ -252,8 +252,7 @@ function setupEditor (editorEl: HTMLElement): void {
 		const type = getType(target)
 		if (!type || !type.type.onClick) {
 			setAuxiliaryToolbar(editor, null)
-			const selectedEl = editor.contentEl.querySelector('[data-editor-selected]')
+			clearSelected(editor)
-			if (selectedEl) delete (selectedEl as HTMLElement).dataset.editorSelected
 			return true
 		}
 		type.type.onClick(editor, target)

app/javascript/editor/types.ts

@@ -20,6 +20,10 @@ export interface EditorNode {
 	//   ej: ul: { handleNothing: li }
 	handleEmpty: 'do-nothing' | 'remove' | EditorBlock,
 
+	// esta función puede ser llamada para cosas que no necesariamente sea la
+	// creación del nodo con el botón; por ejemplo, al intentar recuperar
+	// el formato. esto es importante por que, por ejemplo, no deberíamos
+	// cambiar la selección acá.
 	create: (editor: Editor) => HTMLElement,
 
 	onClick?: (editor: Editor, target: Element) => void,

app/javascript/editor/types/blocks.ts

@@ -79,6 +79,7 @@ export function setupButtons (editor: Editor): void {
 				: type
 
 			const el = replacementType.create(editor)
+			replacementType.onClick && replacementType.onClick(editor, el)
 			moveChildren(blockEl, el, null)
 			parentEl.replaceChild(el, blockEl)
 			sel.collapse(el)

app/javascript/editor/types/link.ts

@@ -1,6 +1,13 @@
 import { Editor } from 'editor/editor'
 import { EditorNode } from 'editor/types'
-import { markNames, setAuxiliaryToolbar } from 'editor/utils'
+import { markNames, setAuxiliaryToolbar, clearSelected } from 'editor/utils'
+
+function select (editor: Editor, el: HTMLAnchorElement): void {
+	clearSelected(editor)
+	el.dataset.editorSelected = ''
+	editor.toolbar.auxiliary.link.urlEl.value = el.href
+	setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.link.parentEl)
+}
 
 export const link: EditorNode = {
 	selector: 'a',
@@ -10,9 +17,7 @@ export const link: EditorNode = {
 	onClick (editor, el) {
 		if (!(el instanceof HTMLAnchorElement))
 			throw new Error('oh no')
-		el.dataset.editorSelected = ''
+		select(editor, el)
-		editor.toolbar.auxiliary.link.urlEl.value = el.href
-		setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.link.parentEl)
 	},
 }
 

app/javascript/editor/types/mark.ts

@@ -1,6 +1,6 @@
 import { Editor } from 'editor/editor'
 import { EditorNode } from 'editor/types'
-import { markNames, setAuxiliaryToolbar } from 'editor/utils'
+import { markNames, setAuxiliaryToolbar, clearSelected } from 'editor/utils'
 
 const hex = (x: string) => ("0" + parseInt(x).toString(16)).slice(-2)
 // https://stackoverflow.com/a/3627747
@@ -11,6 +11,16 @@ function rgbToHex (rgb: string): string {
 	return "#" + hex(matches[1]) + hex(matches[2]) + hex(matches[3])
 }
 
+function select (editor: Editor, el: HTMLElement): void {
+	clearSelected(editor)
+	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 const mark: EditorNode = {
 	selector: 'mark',
 	allowedChildren: [...markNames.filter(n => n !== 'mark'), 'text'],
@@ -19,12 +29,7 @@ export const mark: EditorNode = {
 	onClick (editor, el) {
 		if (!(el instanceof HTMLElement))
 			throw new Error('oh no')
-		el.dataset.editorSelected = ''
+		select(editor, el)
-		editor.toolbar.auxiliary.mark.colorEl.value
-			= el.style.backgroundColor
-				? rgbToHex(el.style.backgroundColor)
-				: '#f206f9'
-		setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.mark.parentEl)
 	},
 }
 

app/javascript/editor/types/marks.ts

@@ -4,7 +4,6 @@ import {
 	safeGetSelection, safeGetRangeAt,
 	moveChildren,
 	markNames,
-	setAuxiliaryToolbar,
 } from 'editor/utils'
 import { link } from 'editor/types/link'
 import { mark } from 'editor/types/mark'
@@ -82,6 +81,7 @@ export function setupButtons (editor: Editor): void {
 					return console.error("No puedo marcar cosas a través de distintos bloques!")
 
 				const tagEl = type.create(editor)
+				type.onClick && type.onClick(editor, tagEl)
 
 				tagEl.appendChild(range.extractContents())
 

app/javascript/editor/types/multimedia.ts

@@ -3,7 +3,7 @@ import { EditorNode, getType } from 'editor/types'
 import {
 	safeGetSelection, safeGetRangeAt,
 	markNames, parentBlockNames,
-	setAuxiliaryToolbar,
+	setAuxiliaryToolbar, clearSelected,
 } from 'editor/utils'
 
 // TODO: tener ActiveStorage como import así no hacemos hacks
@@ -59,6 +59,18 @@ function setAlt (multimediaInnerEl: HTMLElement, value: string): void {
 	}
 }
 
+function select (editor: Editor, el: HTMLElement): void {
+	clearSelected(editor)
+	el.dataset.editorSelected = ''
+
+	const innerEl = el.querySelector<HTMLElement>('[data-multimedia-inner]')
+	if (!innerEl) throw new Error('No hay multimedia válida')
+	if (innerEl.tagName !== 'P') 
+		editor.toolbar.auxiliary.multimedia.altEl.value = getAlt(innerEl) || ''
+
+	setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.multimedia.parentEl)
+}
+
 export const multimedia: EditorNode = {
 	selector: 'figure[data-multimedia]',
 	allowedChildren: 'ignore-children',
@@ -85,14 +97,7 @@ export const multimedia: EditorNode = {
 	onClick (editor, el) {
 		if (!(el instanceof HTMLElement))
 			throw new Error('oh no')
-		el.dataset.editorSelected = ''
+		select(editor, el)
-
-		const innerEl = el.querySelector<HTMLElement>('[data-multimedia-inner]')
-		if (!innerEl) throw new Error('No hay multimedia válida')
-		if (innerEl.tagName !== 'P') 
-			editor.toolbar.auxiliary.multimedia.altEl.value = getAlt(innerEl) || ''
-
-		setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.multimedia.parentEl)
 	},
 }
 function createElementWithFile (url: string, type: string): HTMLElement {
@@ -213,6 +218,7 @@ export function setupButtons (editor: Editor): void {
 		if (!parentEl) throw new Error('Inesperado')
 
 		const el = multimedia.create(editor)
+		multimedia.onClick!(editor, el)
 		parentEl.insertBefore(el, blockEl.nextElementSibling)
 
 		return false

app/javascript/editor/utils.ts

@@ -71,3 +71,7 @@ export function setAuxiliaryToolbar (editor: Editor, bar: HTMLElement | null): v
 	}
 	if (bar) bar.dataset.editorAuxiliaryActive = 'active'
 }
+export function clearSelected (editor: Editor): void {
+	const selectedEl = editor.contentEl.querySelector('[data-editor-selected]')
+	if (selectedEl) delete (selectedEl as HTMLElement).dataset.editorSelected
+}