sutty/app/javascript/editor/types/parentBlocks.ts

import { Editor } from 'editor/editor'
import {
	safeGetSelection, safeGetRangeAt,
	moveChildren,
	blockNames, parentBlockNames,
} from 'editor/utils'
import { EditorNode, getType, getValidParentInSelection } from 'editor/types'

function makeParentBlock (tag: string, create: EditorNode["create"]): EditorNode {
	return {
		selector: tag,
		allowedChildren: [...blockNames, 'multimedia'],
		handleEmpty: 'remove',
		create,
	}
}

// TODO: añadir blockquote
// XXX: si agregás algo acá, probablemente le quieras hacer un botón
// en app/views/posts/attributes/_content.haml
export const parentBlocks: { [propName: string]: EditorNode } = {
	left: makeParentBlock('div[data-align=left]', () => {
		const el = document.createElement('div')
		el.dataset.align = 'left'
		return el
	}),
	center: makeParentBlock('div[data-align=center]', () => {
		const el = document.createElement('div')
		el.dataset.align = 'center'
		return el
	}),
	right: makeParentBlock('div[data-align=right]', () => {
		const el = document.createElement('div')
		el.dataset.align = 'right'
		return el
	}),
}

export function setupButtons (editor: Editor): void {
	for (const [ name, type ] of Object.entries(parentBlocks)) {
		const buttonEl = editor.toolbarEl.querySelector(
			`[data-editor-button="parentBlock-${name}"]`
		)
		if (!buttonEl) continue
		buttonEl.addEventListener("click", event => {
			event.preventDefault()

			// TODO: Esto solo mueve el bloque en el que está el final de la selección
			// (anchorNode). quizás lo podemos hacer al revés (iterar desde contentEl
			// para encontrar los bloques que están seleccionados y moverlos/cambiarles
			// el parentBlock)

			const list = getValidParentInSelection({ editor, type: name })

			const replacementEl = type.create(editor)
			if (list[0] == editor.contentEl) {
				// no está en un parentBlock
				editor.contentEl.insertBefore(replacementEl, list[1])
				replacementEl.appendChild(list[1])
			} else {
				// está en un parentBlock
				moveChildren(list[0], replacementEl, null)
				editor.contentEl.replaceChild(replacementEl, list[0])
			}
			window.getSelection()?.collapse(replacementEl)

			return false
		})
	}
}