permitir cambiar el color del texto en <mark>

fixes #1160
This commit is contained in:
void 2021-04-28 18:54:55 +00:00
parent 525a6fc680
commit 57f885360f
5 changed files with 27 additions and 0 deletions

View file

@ -173,6 +173,7 @@ export interface Editor {
mark: { mark: {
parentEl: HTMLElement; parentEl: HTMLElement;
colorEl: HTMLInputElement; colorEl: HTMLInputElement;
textColorEl: HTMLInputElement;
}; };
multimedia: { multimedia: {
parentEl: HTMLElement; parentEl: HTMLElement;
@ -213,6 +214,10 @@ function setupEditor(editorEl: HTMLElement): void {
editorEl, editorEl,
"[data-editor-auxiliary=mark] [name=mark-color]" "[data-editor-auxiliary=mark] [name=mark-color]"
), ),
textColorEl: getSel(
editorEl,
"[data-editor-auxiliary=mark] [name=mark-text-color]"
),
}, },
multimedia: { multimedia: {
parentEl: getSel(editorEl, "[data-editor-auxiliary=multimedia]"), parentEl: getSel(editorEl, "[data-editor-auxiliary=multimedia]"),

View file

@ -17,6 +17,9 @@ function select(editor: Editor, el: HTMLElement): void {
editor.toolbar.auxiliary.mark.colorEl.value = el.style.backgroundColor editor.toolbar.auxiliary.mark.colorEl.value = el.style.backgroundColor
? rgbToHex(el.style.backgroundColor) ? rgbToHex(el.style.backgroundColor)
: "#f206f9"; : "#f206f9";
editor.toolbar.auxiliary.mark.textColorEl.value = el.style.color
? rgbToHex(el.style.color)
: "#000000";
setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.mark.parentEl); setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.mark.parentEl);
} }
@ -42,6 +45,21 @@ export function setupAuxiliaryToolbar(editor: Editor): void {
selectedEl.style.backgroundColor = color; selectedEl.style.backgroundColor = color;
}); });
editor.toolbar.auxiliary.mark.textColorEl.addEventListener(
"input",
(event) => {
const color = editor.toolbar.auxiliary.mark.textColorEl.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 del text"
);
selectedEl.style.color = color;
}
);
editor.toolbar.auxiliary.mark.colorEl.addEventListener("keydown", (event) => { editor.toolbar.auxiliary.mark.colorEl.addEventListener("keydown", (event) => {
if (event.keyCode == 13) event.preventDefault(); if (event.keyCode == 13) event.preventDefault();
}); });

View file

@ -101,6 +101,8 @@
.form-group{ data: { editor_auxiliary: 'mark' } } .form-group{ data: { editor_auxiliary: 'mark' } }
%label{ for: 'mark-color' }= t('editor.color') %label{ for: 'mark-color' }= t('editor.color')
%input.form-control{ type: 'color', name: 'mark-color' }/ %input.form-control{ type: 'color', name: 'mark-color' }/
%label{ for: 'mark-text-color' }= t('editor.text-color')
%input.form-control{ type: 'color', name: 'mark-text-color' }/
%div{ data: { editor_auxiliary: 'multimedia' } } %div{ data: { editor_auxiliary: 'multimedia' } }
.form-group .form-group

View file

@ -599,6 +599,7 @@ en:
right: Right right: Right
center: Center center: Center
color: Color color: Color
text-color: Text color
multimedia: Media multimedia: Media
multimedia-select: Select file multimedia-select: Select file
multimedia-upload: Upload multimedia-upload: Upload

View file

@ -612,6 +612,7 @@ es:
right: Derecha right: Derecha
center: Centro center: Centro
color: Color color: Color
text-color: Color del texto
multimedia: Multimedia multimedia: Multimedia
multimedia-select: Seleccionar archivo multimedia-select: Seleccionar archivo
multimedia-upload: Subir multimedia-upload: Subir