Support underlined text formatting.

- Enable the `underline` option for Showdown.
- Implement option for underlined text colour.
- Update stylesheet.

default/settings.json

@@ -113,6 +113,7 @@
         "shadow_width": 2,
         "main_text_color": "rgba(220, 220, 210, 1)",
         "italics_text_color": "rgba(145, 145, 145, 1)",
+        "underline_text_color": "rgba(188, 231, 207, 1)",
         "quote_text_color": "rgba(225, 138, 36, 1)",
         "blur_tint_color": "rgba(23, 23, 23, 1)",
         "user_mes_blur_tint_color": "rgba(0, 0, 0, 0.9)",

public/index.html

@@ -3277,6 +3277,10 @@
                                     <toolcool-color-picker id="italics-color-picker"></toolcool-color-picker>
                                     <span data-i18n="Italics Text">Italics Text</span>
                                 </div>
+                                <div class="flex-container">
+                                    <toolcool-color-picker id="underline-color-picker"></toolcool-color-picker>
+                                    <span data-i18n="Underlined Text">Underlined Text</span>
+                                </div>
                                 <div class="flex-container">
                                     <toolcool-color-picker id="quote-color-picker"></toolcool-color-picker>
                                     <span data-i18n="Quote Text">Quote Text</span>

public/script.js

@@ -689,6 +689,7 @@ function reloadMarkdownProcessor(render_formulas = false) {
             literalMidWordUnderscores: true,
             parseImgDimensions: true,
             tables: true,
+            underline: true,
         });
     }
 

public/scripts/power-user.js

@@ -138,6 +138,7 @@ let power_user = {
 
     main_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBodyColor').trim()}`,
     italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`,
+    underline_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeUnderlineColor').trim()}`,
     quote_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeQuoteColor').trim()}`,
     blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`,
     chat_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeChatTintColor').trim()}`,
@@ -255,6 +256,7 @@ const storage_keys = {
 
     main_text_color: 'TavernAI_main_text_color',
     italics_text_color: 'TavernAI_italics_text_color',
+    underline_text_color: 'TavernAI_underline_text_color',
     quote_text_color: 'TavernAI_quote_text_color',
     blur_tint_color: 'TavernAI_blur_tint_color',
     chat_tint_color: 'TavernAI_chat_tint_color',
@@ -1039,6 +1041,9 @@ async function applyThemeColor(type) {
     if (type === 'italics') {
         document.documentElement.style.setProperty('--SmartThemeEmColor', power_user.italics_text_color);
     }
+    if (type === 'underline') {
+        document.documentElement.style.setProperty('--SmartThemeUnderlineColor', power_user.underline_text_color);
+    }
     if (type === 'quote') {
         document.documentElement.style.setProperty('--SmartThemeQuoteColor', power_user.quote_text_color);
     }
@@ -1131,6 +1136,7 @@ async function applyTheme(name) {
     const themeProperties = [
         { key: 'main_text_color', selector: '#main-text-color-picker', type: 'main' },
         { key: 'italics_text_color', selector: '#italics-color-picker', type: 'italics' },
+        { key: 'underline_text_color', selector: '#underline-color-picker', type: 'underline' },
         { key: 'quote_text_color', selector: '#quote-color-picker', type: 'quote' },
         { key: 'blur_tint_color', selector: '#blur-tint-color-picker', type: 'blurTint' },
         { key: 'chat_tint_color', selector: '#chat-tint-color-picker', type: 'chatTint' },
@@ -1540,6 +1546,7 @@ function loadPowerUserSettings(settings, data) {
 
     $('#main-text-color-picker').attr('color', power_user.main_text_color);
     $('#italics-color-picker').attr('color', power_user.italics_text_color);
+    $('#underline-color-picker').attr('color', power_user.underline_text_color);
     $('#quote-color-picker').attr('color', power_user.quote_text_color);
     $('#blur-tint-color-picker').attr('color', power_user.blur_tint_color);
     $('#chat-tint-color-picker').attr('color', power_user.chat_tint_color);
@@ -2048,6 +2055,7 @@ async function saveTheme(name = undefined) {
         blur_strength: power_user.blur_strength,
         main_text_color: power_user.main_text_color,
         italics_text_color: power_user.italics_text_color,
+        underline_text_color: power_user.underline_text_color,
         quote_text_color: power_user.quote_text_color,
         blur_tint_color: power_user.blur_tint_color,
         chat_tint_color: power_user.chat_tint_color,
@@ -2894,6 +2902,12 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $('#underline-color-picker').on('change', (evt) => {
+        power_user.underline_text_color = evt.detail.rgba;
+        applyThemeColor('underline');
+        saveSettingsDebounced();
+    });
+
     $('#quote-color-picker').on('change', (evt) => {
         power_user.quote_text_color = evt.detail.rgba;
         applyThemeColor('quote');

public/style.css

@@ -50,6 +50,7 @@
     /*Default Theme, will be changed by ToolCool Color Picker*/
     --SmartThemeBodyColor: rgb(220, 220, 210);
     --SmartThemeEmColor: rgb(145, 145, 145);
+    --SmartThemeUnderlineColor: rgb(188, 231, 207);
     --SmartThemeQuoteColor: rgb(225, 138, 36);
     /* --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9); */
     --SmartThemeBlurTintColor: rgba(23, 23, 23, 1);
@@ -274,6 +275,11 @@ table.responsiveTable {
     color: var(--SmartThemeEmColor);
 }
 
+.mes_text u
+{
+    color: var(--SmartThemeUnderlineColor);
+}
+
 .mes_text q {
     color: var(--SmartThemeQuoteColor);
 }