5
0
Fork 0
mirror of https://0xacab.org/sutty/sutty synced 2024-11-14 17:41:41 +00:00

Merge branch 'editor-mark-text-color' into 'rails'

permitir cambiar el color del texto en <mark>

Closes #1160

See merge request sutty/sutty!20
This commit is contained in:
fauno 2021-04-28 19:20:40 +00:00
commit b0d78dfade
5 changed files with 27 additions and 0 deletions

View file

@ -173,6 +173,7 @@ export interface Editor {
mark: {
parentEl: HTMLElement;
colorEl: HTMLInputElement;
textColorEl: HTMLInputElement;
};
multimedia: {
parentEl: HTMLElement;
@ -213,6 +214,10 @@ function setupEditor(editorEl: HTMLElement): void {
editorEl,
"[data-editor-auxiliary=mark] [name=mark-color]"
),
textColorEl: getSel(
editorEl,
"[data-editor-auxiliary=mark] [name=mark-text-color]"
),
},
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
? rgbToHex(el.style.backgroundColor)
: "#f206f9";
editor.toolbar.auxiliary.mark.textColorEl.value = el.style.color
? rgbToHex(el.style.color)
: "#000000";
setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.mark.parentEl);
}
@ -42,6 +45,21 @@ export function setupAuxiliaryToolbar(editor: Editor): void {
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) => {
if (event.keyCode == 13) event.preventDefault();
});

View file

@ -101,6 +101,8 @@
.form-group{ data: { editor_auxiliary: 'mark' } }
%label{ for: 'mark-color' }= t('editor.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' } }
.form-group

View file

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

View file

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