From 92d5aeae41ea384c1b0249bd70721481bf7b4dfc Mon Sep 17 00:00:00 2001
From: SiriusXT <1160925501@qq.com>
Date: Wed, 31 May 2023 22:34:24 +0800
Subject: [PATCH]  Show highlighted text in the right panel

---
 src/public/app/widgets/highlighted_text.js    | 11 ++--
 .../options/text_notes/highlighted_text.js    | 62 +++++++++----------
 src/services/options_init.js                  |  4 +-
 3 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/src/public/app/widgets/highlighted_text.js b/src/public/app/widgets/highlighted_text.js
index 43bc377ce..c9f3ef08c 100644
--- a/src/public/app/widgets/highlighted_text.js
+++ b/src/public/app/widgets/highlighted_text.js
@@ -82,11 +82,14 @@ export default class HighlightTextWidget extends RightPanelWidget {
 
         let optionsHltColors = JSON.parse(options.get('highlightedTextColors'));
         let optionsHltBgColors = JSON.parse(options.get('highlightedTextBgColors'));
+        const colorToValDic={"Dark": "#000000", "Dim grey": "#4d4d4d", "Grey": "#999999", "Light grey": "#e6e6e6", "White": "#ffffff", "Red": "#e64c4c", "Orange": "#e6994c", "Yellow": "#e6e64c", "Light green": "#99e64c", "Green": "#4ce64c", "Aquamarine": "#4ce699", "Turquoise": "#4ce6e6", "Light blue": "#4c99e6", "Blue": "#4c4ce6", "Purple": "#994ce6"}
+        const optionsHltColorsVal = optionsHltColors.map(color => colorToValDic[color]);
+        const optionsHltBgColorsVal = optionsHltBgColors.map(color => colorToValDic[color]);
         // Check for type text unconditionally in case alwaysShowWidget is set
         if (this.note.type === 'text') {
             const { content } = await note.getNoteComplement();
             //hltColors/hltBgColors are the colors/background-color that appear in notes and in options 
-            ({ $hlt, hltColors, hltBgColors } = await this.getHlt(content, optionsHltColors, optionsHltBgColors));
+            ({ $hlt, hltColors, hltBgColors } = await this.getHlt(content, optionsHltColorsVal, optionsHltBgColorsVal));
         }
         this.$hlt.html($hlt);
         this.toggleInt(
@@ -167,7 +170,7 @@ export default class HighlightTextWidget extends RightPanelWidget {
     /**
      * Builds a jquery table of helight text.      
      */
-    getHlt(html, optionsHltColors, optionsHltBgColors) {
+    getHlt(html, optionsHltColorsVal, optionsHltBgColorsVal) {
         const hltBCs = $(html).find(`span[style*="background-color"],span[style*="color"]`)
         const $hlt = $("<ol>");
         let hltColors = [];
@@ -181,7 +184,7 @@ export default class HighlightTextWidget extends RightPanelWidget {
             
             if (color != "") {
                 var hexColor = this.colorToHex(color);
-                if (this.hexIsInOptionHexs(hexColor,optionsHltColors)) {                   
+                if (this.hexIsInOptionHexs(hexColor,optionsHltColorsVal)) {                   
                     $li.html(hltText)
                     hltColors.push(hexColor);
                     liDisplay=true;
@@ -189,7 +192,7 @@ export default class HighlightTextWidget extends RightPanelWidget {
             }
             if (bgColor != "") {
                 var hexBgColor = this.colorToHex(bgColor);
-                if (this.hexIsInOptionHexs(hexBgColor,optionsHltBgColors)) {
+                if (this.hexIsInOptionHexs(hexBgColor,optionsHltBgColorsVal)) {
                     //When you need to add a background color, in order to make the display more comfortable, change the background color to transparent
                     $li.html(hltText.css("background-color", hexBgColor+"80"))
                     hltBgColors.push(hexBgColor);
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/highlighted_text.js b/src/public/app/widgets/type_widgets/options/text_notes/highlighted_text.js
index ec884959a..d5c284d94 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/highlighted_text.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/highlighted_text.js
@@ -3,7 +3,7 @@ import OptionsWidget from "../options_widget.js";
 const TPL = `
 <div class="options-section" style='max-width: 46em;'>
     <style>
-        .highlighted-text-checkbox-label {
+        .highlighted-text-label {
             display: inline-block;
             min-width: 8em;
         }
@@ -12,37 +12,37 @@ const TPL = `
     
     Displays highlighted text in the right panel. You can customize the highlighted text displayed in the right panel:
     <br><strong>Text color:</strong><br>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#000000"> Dark &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4d4d4d"> Dim grey &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#999999"> Grey &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e6e6e6"> Light grey &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#ffffff"> White &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e64c4c"> Red &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e6994c"> Orange &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#e6e64c"> Yellow &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#99e64c"> Light green &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4ce64c"> Green &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4ce699"> Aquamarine &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4ce6e6"> Turquoise &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4c99e6"> Light blue &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#4c4ce6"> Blue &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-color" value="#994ce6"> Purple &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Dark"> Dark &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Dim grey"> Dim grey &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Grey"> Grey &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Light grey"> Light grey &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="White"> White &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Red"> Red &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Orange"> Orange &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Yellow"> Yellow &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Light green"> Light green &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Green"> Green &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Aquamarine"> Aquamarine &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Turquoise"> Turquoise &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Light blue"> Light blue &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Blue"> Blue &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-color" value="Purple"> Purple &nbsp;</label>
 <br><strong>Background color:</strong><br>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#000000"> Dark&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4d4d4d"> Dim grey&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#999999"> Grey&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e6e6e6"> Light grey&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#ffffff"> White&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e64c4c"> Red &nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e6994c"> Orange&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#e6e64c"> Yellow&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#99e64c"> Light green&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4ce64c"> Green&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4ce699"> Aquamarine&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4ce6e6"> Turquoise&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4c99e6"> Light blue&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#4c4ce6"> Blue&nbsp;</label>
-<label class='highlighted-text-checkbox-label'><input type="checkbox" class="highlighted-text-background-color" value="#994ce6"> Purple&nbsp;</label>  
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Dark"> Dark &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Dim grey"> Dim grey &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Grey"> Grey &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Light grey"> Light grey &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="White"> White &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Red"> Red &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Orange"> Orange &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Yellow"> Yellow &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Light green"> Light green &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Green"> Green &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Aquamarine"> Aquamarine &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Turquoise"> Turquoise &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Light blue"> Light blue &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Blue"> Blue &nbsp;</label>
+<label class='highlighted-text-label'><input type="checkbox" class="highlighted-text-background-color" value="Purple"> Purple &nbsp;</label>  
 </div>`;
 
 export default class HighlightedTextOptions extends OptionsWidget {
diff --git a/src/services/options_init.js b/src/services/options_init.js
index ba34fba03..53ca56932 100644
--- a/src/services/options_init.js
+++ b/src/services/options_init.js
@@ -87,8 +87,8 @@ const defaultOptions = [
     { name: 'compressImages', value: 'true', isSynced: true },
     { name: 'downloadImagesAutomatically', value: 'true', isSynced: true },
     { name: 'minTocHeadings', value: '5', isSynced: true },
-    { name: 'highlightedTextColors', value: '["#e64c4c","#e6994c","#e6e64c","#99e64c","#4ce64c","#4ce699","#4ce6e6","#4c99e6","#4c4ce6","#994ce6"]', isSynced: true },
-    { name: 'highlightedTextBgColors', value: '["#e64c4c","#e6994c","#e6e64c","#99e64c","#4ce64c","#4ce699","#4ce6e6","#4c99e6","#4c4ce6","#994ce6"]', isSynced: true },
+    { name: 'highlightedTextColors', value: '["Red","Orange","Yellow","Light green","Green","Aquamarine","Turquoise","Light blue","Blue","Purple"]', isSynced: true },
+    { name: 'highlightedTextBgColors', value: '["Red","Orange","Yellow","Light green","Green","Aquamarine","Turquoise","Light blue","Blue","Purple"]', isSynced: true },
     { name: 'checkForUpdates', value: 'true', isSynced: true },
     { name: 'disableTray', value: 'false', isSynced: false },
     { name: 'customSearchEngineName', value: 'Duckduckgo', isSynced: false },