From d554edc0238dd9b067fce254c4e129802f2e252b Mon Sep 17 00:00:00 2001 From: Deciare <1689220+deciare@users.noreply.github.com> Date: Fri, 1 Mar 2024 00:33:37 -0500 Subject: [PATCH] Support underlined text formatting. - Enable the `underline` option for Showdown. - Implement option for underlined text colour. - Update stylesheet. --- default/settings.json | 1 + public/index.html | 4 ++++ public/script.js | 1 + public/scripts/power-user.js | 14 ++++++++++++++ public/style.css | 6 ++++++ 5 files changed, 26 insertions(+) diff --git a/default/settings.json b/default/settings.json index c351ab04e..ce8c07738 100644 --- a/default/settings.json +++ b/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)", diff --git a/public/index.html b/public/index.html index 74862b5b3..cf55313c9 100644 --- a/public/index.html +++ b/public/index.html @@ -3277,6 +3277,10 @@ Italics Text +
+ + Underlined Text +
Quote Text diff --git a/public/script.js b/public/script.js index c4b2435bb..7820a86a0 100644 --- a/public/script.js +++ b/public/script.js @@ -689,6 +689,7 @@ function reloadMarkdownProcessor(render_formulas = false) { literalMidWordUnderscores: true, parseImgDimensions: true, tables: true, + underline: true, }); } diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index 771640e00..cb7d52255 100644 --- a/public/scripts/power-user.js +++ b/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'); diff --git a/public/style.css b/public/style.css index 35f4c2f96..21b929831 100644 --- a/public/style.css +++ b/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); }