rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-18 13:10:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix syntax highlight editor (#2300)

Browse Source 
* add Noto Sans Mono as default monospace font

* fix ::selection for syntax highlighted editor

* add full noto sans mono

* add explicit "overflow: auto" to textarea to stop Firefox from freaking out

* add syntax hightlight disable toggle

* fix noto sans mono path

* fix details position on scroll

* disable pointer events on autocomplete wrap

* fix for Firefox bug using relative colors

* Shorten font file names.
So that I won't have to scroll the list horizontally

---------

Co-authored-by: LenAnderson <Anderson.Len@outlook.com>
Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>
This commit is contained in:
Len 2024-06-13 14:05:50 -04:00 committed by GitHub
parent 9c3176b29f
commit aa4bdec79c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 179 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/st-tailwind.css
View File

@ -220,7 +220,7 @@
}
.monospace {
font-family: monospace;
font-family: var(--monoFontFamily);
}
.expander {

1
public/index.html
View File

@ -18,6 +18,7 @@
<link rel="preload" as="style" href="style.css">
<link rel="manifest" crossorigin="use-credentials" href="manifest.json">
<link href="webfonts/NotoSans/stylesheet.css" rel="stylesheet">
<link href="webfonts/NotoSansMono/stylesheet.css" rel="stylesheet">
<link href="css/fontawesome.min.css" rel="stylesheet">
<link href="css/solid.min.css" rel="stylesheet">
<link href="css/brands.min.css" rel="stylesheet">

1
public/login.html
View File

@ -26,6 +26,7 @@
<link rel="stylesheet" type="text/css" href="css/login.css">
<link rel="manifest" crossorigin="use-credentials" href="manifest.json">
<link href="webfonts/NotoSans/stylesheet.css" rel="stylesheet">
<link href="webfonts/NotoSansMono/stylesheet.css" rel="stylesheet">
<!-- fontawesome webfonts-->
<link href="css/fontawesome.min.css" rel="stylesheet">
<link href="css/solid.min.css" rel="stylesheet">

2
public/scripts/autocomplete/AutoComplete.js
View File

@ -481,8 +481,8 @@ export class AutoComplete {
this.domWrap.style.setProperty('--leftOffset', `max(1vw, ${rect[power_user.stscript.autocomplete.width.left].left}px)`);
this.domWrap.style.setProperty('--rightOffset', `calc(100vw - min(99vw, ${rect[power_user.stscript.autocomplete.width.right].right}px)`);
}
this.updateDetailsPosition();
}
this.updateDetailsPosition();
}
/**

6
public/scripts/extensions/quick-reply/html/qrEditor.html
View File

@ -29,10 +29,14 @@
<input type="checkbox" id="qr--modal-executeShortcut">
<span>Ctrl+Enter to execute</span>
</label>
<label class="checkbox_label">
<input type="checkbox" id="qr--modal-syntax">
<span>Syntax highlight</span>
</label>
</div>
<div id="qr--modal-messageHolder">
<pre id="qr--modal-messageSyntax"><code id="qr--modal-messageSyntaxInner" class="hljs language-stscript"></code></pre>
<textarea class="monospace" id="qr--modal-message" spellcheck="false"></textarea>
<textarea id="qr--modal-message" spellcheck="false"></textarea>
</div>
</div>
</div>

17
public/scripts/extensions/quick-reply/src/QuickReply.js
View File

@ -264,6 +264,13 @@ export class QuickReply {
const updateSyntax = ()=>{
messageSyntaxInner.innerHTML = hljs.highlight(`${message.value}${message.value.slice(-1) == '\n' ? ' ' : ''}`, { language:'stscript', ignoreIllegals:true })?.value;
};
const updateSyntaxEnabled = ()=>{
if (JSON.parse(localStorage.getItem('qr--syntax'))) {
dom.querySelector('#qr--modal-messageHolder').classList.remove('qr--noSyntax');
} else {
dom.querySelector('#qr--modal-messageHolder').classList.add('qr--noSyntax');
}
};
/**@type {HTMLInputElement}*/
const tabSize = dom.querySelector('#qr--modal-tabSize');
tabSize.value = JSON.parse(localStorage.getItem('qr--tabSize') ?? '4');
@ -282,6 +289,13 @@ export class QuickReply {
executeShortcut.addEventListener('click', () => {
localStorage.setItem('qr--executeShortcut', JSON.stringify(executeShortcut.checked));
});
/**@type {HTMLInputElement}*/
const syntax = dom.querySelector('#qr--modal-syntax');
syntax.checked = JSON.parse(localStorage.getItem('qr--syntax') ?? 'true');
syntax.addEventListener('click', () => {
localStorage.setItem('qr--syntax', JSON.stringify(syntax.checked));
updateSyntaxEnabled();
});
/**@type {HTMLTextAreaElement}*/
const message = dom.querySelector('#qr--modal-message');
message.value = this.message;
@ -352,8 +366,7 @@ export class QuickReply {
}
});
window.addEventListener('resize', resizeListener);
message.style.color = 'transparent';
message.style.background = 'transparent';
updateSyntaxEnabled();
message.style.setProperty('text-shadow', 'none', 'important');
/**@type {HTMLElement}*/
const messageSyntaxInner = dom.querySelector('#qr--modal-messageSyntaxInner');

32
public/scripts/extensions/quick-reply/style.css
View File

@ -301,6 +301,22 @@
text-align: left;
overflow: hidden;
}
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-messageSyntax {
display: none;
}
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message {
background-color: var(--ac-style-color-background);
color: var(--ac-style-color-text);
}
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message::selection {
color: unset;
background-color: rgba(108 171 251 / 0.25);
}
@supports (color: rgb(from white r g b / 0.25)) {
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message::selection {
background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
}
}
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax {
grid-column: 1;
grid-row: 1;
@ -315,18 +331,30 @@
height: 100%;
}
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message {
background-color: transparent;
color: transparent;
grid-column: 1;
grid-row: 1;
caret-color: white;
mix-blend-mode: difference;
caret-color: var(--ac-style-color-text);
overflow: auto;
}
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar,
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar-thumb {
visibility: hidden;
cursor: default;
}
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::selection {
color: transparent;
background-color: rgba(108 171 251 / 0.25);
}
@supports (color: rgb(from white r g b / 0.25)) {
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::selection {
background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
}
}
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-message,
.dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-messageSyntaxInner {
font-family: var(--monoFontFamily);
padding: 0.75em;
margin: 0;
border: none;

30
public/scripts/extensions/quick-reply/style.less
View File

@ -322,6 +322,22 @@
display: grid;
text-align: left;
overflow: hidden;
&.qr--noSyntax {
> #qr--modal-messageSyntax {
display: none;
}
> #qr--modal-message {
background-color: var(--ac-style-color-background);
color: var(--ac-style-color-text);
&::selection {
color: unset;
background-color: rgba(108 171 251 / 0.25);
@supports (color: rgb(from white r g b / 0.25)) {
background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
}
}
}
}
> #qr--modal-messageSyntax {
grid-column: 1;
grid-row: 1;
@ -336,16 +352,26 @@
}
}
> #qr--modal-message {
background-color: transparent;
color: transparent;
grid-column: 1;
grid-row: 1;
caret-color: white;
mix-blend-mode: difference;
caret-color: var(--ac-style-color-text);
overflow: auto;
&::-webkit-scrollbar, &::-webkit-scrollbar-thumb {
visibility: hidden;
cursor: default;
}
&::selection {
color: transparent;
background-color: rgba(108 171 251 / 0.25);
@supports (color: rgb(from white r g b / 0.25)) {
background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
}
}
}
#qr--modal-message, #qr--modal-messageSyntaxInner {
font-family: var(--monoFontFamily);
padding: 0.75em;
margin: 0;
border: none;

14
public/style.css
View File

@ -77,6 +77,7 @@
--fontScale: 1;
--mainFontSize: calc(var(--fontScale) * 15px);
--mainFontFamily: "Noto Sans", "Noto Color Emoji", sans-serif;
--monoFontFamily: 'Noto Sans Mono', 'Courier New', Consolas, monospace;
/* base variable for blur strength slider calculations */
--blurStrength: 10;
@ -418,7 +419,7 @@ small {
}
code {
font-family: Consolas, monospace;
font-family: var(--monoFontFamily);
white-space: pre-wrap;
/* word-wrap: break-word; */
border: 1px solid var(--SmartThemeBorderColor);
@ -1226,6 +1227,7 @@ select {
left: var(--leftOffset);
right: var(--rightOffset);
z-index: 10000;
pointer-events: none;
&.isFloating {
@ -1634,7 +1636,7 @@ body[data-stscript-style] .hljs.language-stscript {
text-align: center;
/* opacity: 0.6; */
white-space: nowrap;
font-family: monospace;
font-family: var(--monoFontFamily);
line-height: calc(1.2em / 0.8);
/* &:before { content: "["; }
&:after { content: "]"; } */
@ -1802,7 +1804,7 @@ body[data-stscript-style] .hljs.language-stscript {
}
>.alias {
font-family: monospace;
font-family: var(--monoFontFamily);
&+.alias:before {
content: ', ';
@ -1822,7 +1824,7 @@ body[data-stscript-style] .hljs.language-stscript {
gap: 0.5em;
>.name {
font-family: monospace;
font-family: var(--monoFontFamily);
white-space: nowrap;
/* color: var(--ac-color-text); */
}
@ -1831,7 +1833,7 @@ body[data-stscript-style] .hljs.language-stscript {
display: flex;
>.arguments {
font-family: monospace;
font-family: var(--monoFontFamily);
.argument {
white-space: nowrap;
@ -1921,7 +1923,7 @@ body[data-stscript-style] .hljs.language-stscript {
}
>.returns {
font-family: monospace;
font-family: var(--monoFontFamily);
color: var(--ac-color-text);
&:before {

BIN
public/webfonts/NotoSansMono/noto-sans-mono-v30-100.woff2 Normal file
View File

Binary file not shown.

BIN
public/webfonts/NotoSansMono/noto-sans-mono-v30-200.woff2 Normal file
View File

Binary file not shown.

BIN
public/webfonts/NotoSansMono/noto-sans-mono-v30-300.woff2 Normal file
View File

Binary file not shown.

BIN
public/webfonts/NotoSansMono/noto-sans-mono-v30-500.woff2 Normal file
View File

Binary file not shown.

BIN
public/webfonts/NotoSansMono/noto-sans-mono-v30-600.woff2 Normal file
View File

Binary file not shown.

BIN
public/webfonts/NotoSansMono/noto-sans-mono-v30-700.woff2 Normal file
View File

Binary file not shown.

BIN
public/webfonts/NotoSansMono/noto-sans-mono-v30-800.woff2 Normal file
View File

Binary file not shown.

BIN
public/webfonts/NotoSansMono/noto-sans-mono-v30-900.woff2 Normal file
View File

Binary file not shown.

BIN
public/webfonts/NotoSansMono/noto-sans-mono-v30-regular.woff2 Normal file
View File

Binary file not shown.

89
public/webfonts/NotoSansMono/stylesheet.css Normal file
View File

@ -0,0 +1,89 @@
/* noto-sans-mono-100 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
@font-face {
font-display: swap;
font-family: 'Noto Sans Mono';
font-style: normal;
font-weight: 100;
src: url('noto-sans-mono-v30-100.woff2') format('woff2');
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-200 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
@font-face {
font-display: swap;
font-family: 'Noto Sans Mono';
font-style: normal;
font-weight: 200;
src: url('noto-sans-mono-v30-200.woff2') format('woff2');
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-300 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
@font-face {
font-display: swap;
font-family: 'Noto Sans Mono';
font-style: normal;
font-weight: 300;
src: url('noto-sans-mono-v30-300.woff2') format('woff2');
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-regular - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
@font-face {
font-display: swap;
font-family: 'Noto Sans Mono';
font-style: normal;
font-weight: 400;
src: url('noto-sans-mono-v30-regular.woff2') format('woff2');
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-500 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
@font-face {
font-display: swap;
font-family: 'Noto Sans Mono';
font-style: normal;
font-weight: 500;
src: url('noto-sans-mono-v30-500.woff2') format('woff2');
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-600 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
@font-face {
font-display: swap;
font-family: 'Noto Sans Mono';
font-style: normal;
font-weight: 600;
src: url('noto-sans-mono-v30-600.woff2') format('woff2');
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-700 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
@font-face {
font-display: swap;
font-family: 'Noto Sans Mono';
font-style: normal;
font-weight: 700;
src: url('noto-sans-mono-v30-700.woff2') format('woff2');
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-800 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
@font-face {
font-display: swap;
font-family: 'Noto Sans Mono';
font-style: normal;
font-weight: 800;
src: url('noto-sans-mono-v30-800.woff2') format('woff2');
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-mono-900 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
@font-face {
font-display: swap;
font-family: 'Noto Sans Mono';
font-style: normal;
font-weight: 900;
src: url('noto-sans-mono-v30-900.woff2') format('woff2');
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}