diff --git a/app/javascript/editor/editor.ts b/app/javascript/editor/editor.ts index 6ec06f3..880547d 100644 --- a/app/javascript/editor/editor.ts +++ b/app/javascript/editor/editor.ts @@ -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]"), diff --git a/app/javascript/editor/types/mark.ts b/app/javascript/editor/types/mark.ts index 2607cae..4735c79 100644 --- a/app/javascript/editor/types/mark.ts +++ b/app/javascript/editor/types/mark.ts @@ -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( + "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(); }); diff --git a/app/views/posts/attributes/_content.haml b/app/views/posts/attributes/_content.haml index 235dca3..4ae70ba 100644 --- a/app/views/posts/attributes/_content.haml +++ b/app/views/posts/attributes/_content.haml @@ -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 diff --git a/config/locales/en.yml b/config/locales/en.yml index 02570b1..9366f9f 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -599,6 +599,7 @@ en: right: Right center: Center color: Color + text-color: Text color multimedia: Media multimedia-select: Select file multimedia-upload: Upload diff --git a/config/locales/es.yml b/config/locales/es.yml index 5bb4a22..3a64e7e 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -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