import { storeContent, restoreContent, forgetContent } from 'editor/storage' 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' import { setupButtons as setupParentBlocksButtons } from 'editor/types/parentBlocks' import { setupAuxiliaryToolbar as setupLinkAuxiliaryToolbar } from 'editor/types/link' import { setupAuxiliaryToolbar as setupMultimediaAuxiliaryToolbar, setupButtons as setupMultimediaButtons, } from 'editor/types/multimedia' 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 // inserta un allowedChildren[0]) // * TODO: que haya una imágen sin
o que no esté como bloque (se ponen // después del bloque en el que están como bloque de por si) // * convierte y en y // Lo hace para que siga la estructura del documento y que no se borren por // cleanContent luego. function fixContent (editor: Editor, node: Element = editor.contentEl): void { if (node.tagName === 'SCRIPT' || node.tagName === 'STYLE') { node.parentElement?.removeChild(node) return } if (node.tagName === 'I') { const el = document.createElement('em') moveChildren(node, el, null) node.parentElement?.replaceChild(el, node) node = el } if (node.tagName === 'B') { const el = document.createElement('strong') moveChildren(node, el, null) node.parentElement?.replaceChild(el, node) node = el } if (node instanceof HTMLImageElement) { node.dataset.multimediaInner = '' const figureEl = types.multimedia.create(editor) let targetEl = node.parentElement if (!targetEl) throw new Error('No encontré lx objetivo') while (true) { const type = getType(targetEl) if (!type) throw new Error('lx objetivo tiene tipo') if (type.type.allowedChildren.includes('multimedia')) break if (!targetEl.parentElement) throw new Error('No encontré lx objetivo') targetEl = targetEl.parentElement } let parentEl = [...targetEl.childNodes].find( el => el.contains(node) ) if (!parentEl) throw new Error('no encontré lx pariente') targetEl.insertBefore(figureEl, parentEl) const innerEl = figureEl.querySelector('[data-multimedia-inner]') if (!innerEl) throw new Error('Raro.') figureEl.replaceChild(node, innerEl) node = figureEl } const _type = getType(node) if (!_type) return const { typeName, type } = _type if (type.allowedChildren !== 'ignore-children') { const sel = safeGetSelection(editor) const range = sel && safeGetRangeAt(sel) if (getValidChildren(node, type).length == 0) { if (typeof type.handleEmpty !== 'string') { const el = type.handleEmpty.create(editor) // mover cosas que pueden haber // por ejemplo: cuando convertís a un
    , queda texto fuera del li que // creamos acá moveChildren(node, el, null) node.appendChild(el) if (range?.intersectsNode(node)) sel?.collapse(el) } } for (const child of node.childNodes) { if (!(child instanceof Element)) continue fixContent(editor, child) } } } // Esta funcion hace que los elementos del editor sigan la estructura. // TODO: nos falta borrar atributos (style, y básicamente cualquier otra cosa) // Edge cases: // * no borramos los
    por que se requieren para que los navegadores // funcionen bien al escribir. no se deberían mostrar de todas maneras function cleanContent (editor: Editor, node: Element = editor.contentEl): void { const _type = getType(node) if (!_type) { node.parentElement?.removeChild(node) return } const { type } = _type if (type.allowedChildren !== 'ignore-children') { for (const child of node.childNodes) { if (child.nodeType === Node.TEXT_NODE && !type.allowedChildren.includes('text') ) { node.removeChild(child) continue } if (!(child instanceof Element)) continue const childType = getType(child) if (childType?.typeName === 'br') continue if (!childType || !type.allowedChildren.includes(childType.typeName)) { // XXX: esto extrae las cosas de adentro para que no sea destructivo moveChildren(child, node, child) node.removeChild(child) return } cleanContent(editor, child) } // solo contar children válido para ese nodo const validChildrenLength = getValidChildren(node, type).length const sel = safeGetSelection(editor) const range = sel && safeGetRangeAt(sel) if (type.handleEmpty === 'remove' && validChildrenLength == 0 //&& (!range || !range.intersectsNode(node)) ) { node.parentNode?.removeChild(node) return } } } function routine (editor: Editor): void { try { fixContent(editor) cleanContent(editor) storeContent(editor) editor.htmlEl.value = editor.contentEl.innerHTML } catch (error) { console.error('Hubo un problema corriendo la rutina', editor, error) } } export interface Editor { editorEl: HTMLElement, toolbarEl: HTMLElement, toolbar: { auxiliary: { mark: { parentEl: HTMLElement, colorEl: HTMLInputElement, }, multimedia: { parentEl: HTMLElement, fileEl: HTMLInputElement, uploadEl: HTMLButtonElement, altEl: HTMLInputElement, removeEl: HTMLButtonElement, }, link: { parentEl: HTMLElement, urlEl: HTMLInputElement, }, }, }, contentEl: HTMLElement, wordAlertEl: HTMLElement, htmlEl: HTMLTextAreaElement, } function getSel(parentEl: HTMLElement, selector: string): T { const el = parentEl.querySelector(selector) if (!el) throw new Error(`No pude encontrar un componente \`${selector}\``) return el } function setupEditor (editorEl: HTMLElement): void { // XXX: ¡Esto afecta a todo el documento! ¿Quizás usar un iframe para el editor? document.execCommand('defaultParagraphSeparator', false, 'p') const editor: Editor = { editorEl, toolbarEl: getSel(editorEl, '.editor-toolbar'), toolbar: { auxiliary: { mark: { parentEl: getSel(editorEl, '[data-editor-auxiliary=mark]'), colorEl: getSel(editorEl, '[data-editor-auxiliary=mark] [name=mark-color]'), }, multimedia: { parentEl: getSel(editorEl, '[data-editor-auxiliary=multimedia]'), fileEl: getSel(editorEl, '[data-editor-auxiliary=multimedia] [name=multimedia-file]'), uploadEl: getSel(editorEl, '[data-editor-auxiliary=multimedia] [name=multimedia-file-upload]'), altEl: getSel(editorEl, '[data-editor-auxiliary=multimedia] [name=multimedia-alt]'), removeEl: getSel(editorEl, '[data-editor-auxiliary=multimedia] [name=multimedia-remove]'), }, link: { parentEl: getSel(editorEl, '[data-editor-auxiliary=link]'), urlEl: getSel(editorEl, '[data-editor-auxiliary=link] [name=link-url]'), }, }, }, contentEl: getSel(editorEl, '.editor-content'), wordAlertEl: getSel(editorEl, '.editor-aviso-word'), htmlEl: getSel(editorEl, 'textarea'), } console.debug('iniciando editor', editor) // Recuperar el contenido si hay algo guardado, si tuviéramos un campo // de última edición podríamos saber si el artículo fue editado // después o la versión local es la última. // // TODO: Preguntar si se lo quiere recuperar. restoreContent(editor) // Word alert editor.contentEl.addEventListener('paste', () => { editor.wordAlertEl.style.display = 'block' }) // Setup routine listeners const observer = new MutationObserver(() => routine(editor)) observer.observe(editor.contentEl, { childList: true, attributes: true, subtree: true, characterData: true, }) document.addEventListener("selectionchange", () => routine(editor)) // Capture onClick editor.contentEl.addEventListener('click', event => { const target = event.target! as Element const type = getType(target) if (!type || !type.type.onClick) { setAuxiliaryToolbar(editor, null) clearSelected(editor) return true } type.type.onClick(editor, target) return false }, true) // Clean seleted const selectedEl = editor.contentEl.querySelector('[data-editor-selected]') if (selectedEl) delete (selectedEl as HTMLElement).dataset.editorSelected // Setup botones setupMarksButtons(editor) setupBlocksButtons(editor) setupParentBlocksButtons(editor) setupMultimediaButtons(editor) setupLinkAuxiliaryToolbar(editor) setupMultimediaAuxiliaryToolbar(editor) setupMarkAuxiliaryToolbar(editor) // Finally... routine(editor) } document.addEventListener("turbolinks:load", () => { const flash = document.querySelector('.js-flash') if (flash) { const keys = JSON.parse(flash.dataset.keys || '[]') switch (flash.dataset.target) { case 'editor': switch (flash.dataset.action) { case 'forget-content': keys.forEach(forgetContent) } } } for (const editorEl of document.querySelectorAll('.editor[data-editor]')) { try { setupEditor(editorEl) } catch (error) { // TODO: mostrar error console.error('no se pudo iniciar el editor, error completo', error) } } })