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:
commit
b0d78dfade
5 changed files with 27 additions and 0 deletions
|
@ -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]"),
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -599,6 +599,7 @@ en:
|
|||
right: Right
|
||||
center: Center
|
||||
color: Color
|
||||
text-color: Text color
|
||||
multimedia: Media
|
||||
multimedia-select: Select file
|
||||
multimedia-upload: Upload
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue