From 891bb4db3f7a83f11f225e742eb76101ec05a676 Mon Sep 17 00:00:00 2001 From: void Date: Mon, 22 Mar 2021 20:54:26 +0000 Subject: [PATCH] llamar a onClick al crear nodos MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 5 ++--- app/javascript/editor/types.ts | 4 ++++ app/javascript/editor/types/blocks.ts | 1 + app/javascript/editor/types/link.ts | 13 ++++++++---- app/javascript/editor/types/mark.ts | 19 +++++++++++------- app/javascript/editor/types/marks.ts | 2 +- app/javascript/editor/types/multimedia.ts | 24 ++++++++++++++--------- app/javascript/editor/utils.ts | 4 ++++ 8 files changed, 48 insertions(+), 24 deletions(-) diff --git a/app/javascript/editor/editor.ts b/app/javascript/editor/editor.ts index b9e1e9fe..be1180fe 100644 --- a/app/javascript/editor/editor.ts +++ b/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]') - if (selectedEl) delete (selectedEl as HTMLElement).dataset.editorSelected + clearSelected(editor) return true } type.type.onClick(editor, target) diff --git a/app/javascript/editor/types.ts b/app/javascript/editor/types.ts index 3a178ee8..3c215a85 100644 --- a/app/javascript/editor/types.ts +++ b/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, diff --git a/app/javascript/editor/types/blocks.ts b/app/javascript/editor/types/blocks.ts index eb57b55d..28f6384e 100644 --- a/app/javascript/editor/types/blocks.ts +++ b/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) diff --git a/app/javascript/editor/types/link.ts b/app/javascript/editor/types/link.ts index 1ec02172..40a26e1e 100644 --- a/app/javascript/editor/types/link.ts +++ b/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 = '' - editor.toolbar.auxiliary.link.urlEl.value = el.href - setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.link.parentEl) + select(editor, el) }, } diff --git a/app/javascript/editor/types/mark.ts b/app/javascript/editor/types/mark.ts index a4be4c4e..1e63e368 100644 --- a/app/javascript/editor/types/mark.ts +++ b/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 = '' - editor.toolbar.auxiliary.mark.colorEl.value - = el.style.backgroundColor - ? rgbToHex(el.style.backgroundColor) - : '#f206f9' - setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.mark.parentEl) + select(editor, el) }, } diff --git a/app/javascript/editor/types/marks.ts b/app/javascript/editor/types/marks.ts index b626b595..ac2493a8 100644 --- a/app/javascript/editor/types/marks.ts +++ b/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()) diff --git a/app/javascript/editor/types/multimedia.ts b/app/javascript/editor/types/multimedia.ts index 16bf6963..7fdc0cac 100644 --- a/app/javascript/editor/types/multimedia.ts +++ b/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('[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 = '' - - const innerEl = el.querySelector('[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) + select(editor, el) }, } 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 diff --git a/app/javascript/editor/utils.ts b/app/javascript/editor/utils.ts index fc9e0871..fd3b0821 100644 --- a/app/javascript/editor/utils.ts +++ b/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 +}