Skip to content

Commit 1aa16de

Browse files
cloud-on-premcloud-on-prem
committed
fix: remove react-syntax-highlighter refs
1 parent 224931a commit 1aa16de

2 files changed

Lines changed: 5 additions & 111 deletions

File tree

‎webview-ui/src/types.d.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
declare module 'react-syntax-highlighter';
2-
declare module 'react-syntax-highlighter/dist/esm/styles/prism';
3-
41
export enum MessageType {
52
HELLO = 'hello',
63
CHAT_RESPONSE = 'chatResponse',
@@ -17,4 +14,4 @@ export enum MessageType {
1714
REMOVE_CODE_REFERENCE = 'removeCodeReference',
1815
SESSION_LOADED = 'sessionLoaded',
1916
SESSIONS_LIST = 'sessionsList'
20-
}
17+
}

‎webview-ui/src/vscodeStyles.css‎

Lines changed: 4 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,7 @@
263263
/* Improved code block rendering */
264264
.message-text pre {
265265
margin: 0.75em 0 !important;
266-
padding: 0 !important;
266+
padding: 0 !important; /* Shiki adds its own padding */
267267
background-color: var(--vscode-textCodeBlock-background) !important;
268268
border: 1px solid var(--vscode-widget-border) !important;
269269
border-radius: 4px !important;
@@ -285,23 +285,7 @@
285285
width: 100% !important;
286286
max-width: 100% !important;
287287
margin: 0.75em 0 !important;
288-
padding: 0 !important;
289-
}
290-
291-
/* The actual syntax highlighted content */
292-
.react-syntax-highlighter-pre {
293-
margin: 0 !important;
294-
padding: 1em !important;
295-
background-color: var(--vscode-textCodeBlock-background) !important;
296-
border-radius: 4px !important;
297-
width: 100% !important;
298-
font-family: var(--vscode-editor-font-family) !important;
299-
font-size: var(--vscode-editor-font-size) !important;
300-
word-break: normal !important;
301-
white-space: pre !important;
302-
overflow-x: auto !important;
303-
line-height: 1.5 !important;
304-
tab-size: 4 !important;
288+
padding: 0 !important; /* Shiki adds its own padding */
305289
}
306290

307291
/* Ensure any code containers are full width */
@@ -313,15 +297,6 @@
313297
box-sizing: border-box !important;
314298
}
315299

316-
/* Line numbers in code blocks */
317-
.linenumber {
318-
color: var(--vscode-editorLineNumber-foreground) !important;
319-
opacity: 0.7 !important;
320-
padding-right: 0.5em !important;
321-
text-align: right !important;
322-
min-width: 3.5em !important;
323-
}
324-
325300
.message-actions {
326301
display: flex;
327302
justify-content: flex-end;
@@ -713,7 +688,7 @@
713688
border: 1px solid var(--vscode-widget-border);
714689
border-radius: 4px;
715690
margin: 0.5em 0;
716-
padding: 1em;
691+
padding: 1em; /* Keep padding for generic pre */
717692
overflow: auto;
718693
width: 100% !important;
719694
display: block !important;
@@ -722,7 +697,7 @@
722697
/* Code blocks (pre > code) */
723698
.message-text pre>code {
724699
display: block !important;
725-
padding: 0.5em;
700+
padding: 0.5em; /* Keep padding for generic pre > code */
726701
overflow-x: auto;
727702
white-space: pre;
728703
background-color: var(--vscode-textCodeBlock-background) !important;
@@ -734,41 +709,6 @@
734709
border: none;
735710
}
736711

737-
/* Enhanced styles for SyntaxHighlighter component */
738-
.message-text .react-syntax-highlighter-line-number {
739-
color: var(--vscode-editorLineNumber-foreground) !important;
740-
opacity: 0.7;
741-
}
742-
743-
.message-text pre.prism-code {
744-
margin: 1em 0 !important;
745-
background-color: var(--vscode-textCodeBlock-background) !important;
746-
border-radius: 4px !important;
747-
border: 1px solid var(--vscode-widget-border) !important;
748-
font-family: var(--vscode-editor-font-family) !important;
749-
font-size: var(--vscode-editor-font-size) !important;
750-
display: block !important;
751-
width: 100% !important;
752-
max-width: 100% !important;
753-
overflow-x: auto !important;
754-
}
755-
756-
/* This ensures the React Syntax Highlighter wrapper respects width */
757-
.message-text div:has(> pre.prism-code) {
758-
width: 100% !important;
759-
max-width: 100% !important;
760-
margin: 0 !important;
761-
padding: 0 !important;
762-
}
763-
764-
/* Fix for code blocks showing extra unwanted padding */
765-
.message-text pre>code,
766-
.message-text .react-syntax-highlighter-pre {
767-
padding: 0.5em !important;
768-
margin: 0 !important;
769-
background: var(--vscode-textCodeBlock-background) !important;
770-
}
771-
772712
/* Inline code */
773713
.message-text code:not(pre code),
774714
.message-text .inline-code,
@@ -818,15 +758,6 @@
818758
width: auto !important;
819759
}
820760

821-
/* For SyntaxHighlighter component */
822-
.message-text .prism-code {
823-
background-color: transparent !important;
824-
border-radius: 4px;
825-
margin: 0.5em 0;
826-
font-family: var(--vscode-editor-font-family) !important;
827-
font-size: var(--vscode-editor-font-size) !important;
828-
}
829-
830761
/* Blockquotes */
831762
.message-text blockquote {
832763
border-left: 3px solid var(--vscode-textBlockQuote-border);
@@ -1340,40 +1271,6 @@
13401271
font-size: 14px;
13411272
}
13421273

1343-
/* Fix specific issues with syntax highlighting containers */
1344-
.message-text .react-syntax-highlighter-pre {
1345-
margin: 0 !important;
1346-
padding: 1em !important;
1347-
border-radius: 4px !important;
1348-
width: 100% !important;
1349-
max-width: 100% !important;
1350-
word-break: normal !important;
1351-
white-space: pre !important;
1352-
overflow-x: auto !important;
1353-
font-family: var(--vscode-editor-font-family) !important;
1354-
font-size: var(--vscode-editor-font-size) !important;
1355-
line-height: 1.5 !important;
1356-
tab-size: 4 !important;
1357-
}
1358-
1359-
/* Fix for the SyntaxHighlighter container */
1360-
.message-text pre.prism-code,
1361-
.message-text pre.language-javascript,
1362-
.message-text pre.language-typescript,
1363-
.message-text pre.language-json,
1364-
.message-text pre.language-python,
1365-
.message-text pre.language-html,
1366-
.message-text pre.language-css,
1367-
.message-text pre[class*="language-"] {
1368-
margin: 1em 0 !important;
1369-
padding: 0 !important;
1370-
background-color: var(--vscode-textCodeBlock-background) !important;
1371-
border: 1px solid var(--vscode-widget-border) !important;
1372-
border-radius: 4px !important;
1373-
width: 100% !important;
1374-
overflow-x: auto !important;
1375-
}
1376-
13771274
/* Fix for ReactMarkdown container of code blocks */
13781275
.message-text>div {
13791276
max-width: 100% !important;

0 commit comments

Comments
 (0)