permitir cambiar el color del texto en <mark>

fixes #1160

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]"),

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

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

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

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