From 57f885360fc1a97545576f433fb169e7b2761ac5 Mon Sep 17 00:00:00 2001
From: void <v0id@riseup.net>
Date: Wed, 28 Apr 2021 18:54:55 +0000
Subject: [PATCH] permitir cambiar el color del texto en <mark>

fixes #1160
---
 app/javascript/editor/editor.ts          |  5 +++++
 app/javascript/editor/types/mark.ts      | 18 ++++++++++++++++++
 app/views/posts/attributes/_content.haml |  2 ++
 config/locales/en.yml                    |  1 +
 config/locales/es.yml                    |  1 +
 5 files changed, 27 insertions(+)

diff --git a/app/javascript/editor/editor.ts b/app/javascript/editor/editor.ts
index 6ec06f3c..880547de 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 2607cae5..4735c799 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<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();
   });
diff --git a/app/views/posts/attributes/_content.haml b/app/views/posts/attributes/_content.haml
index 235dca30..4ae70ba0 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 02570b12..9366f9fc 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 5bb4a221..3a64e7ee 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