editor: hacer que el color de mark se pueda cambiar

This commit is contained in:
void 2021-02-14 00:07:38 +00:00
parent 1759d0f680
commit 704616b18e
4 changed files with 49 additions and 2 deletions

View file

@ -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)

View file

@ -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 {

View file

@ -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()
})
}

View file

@ -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,
}