Skip to content

Commit a13d7fe

Browse files
udithishankaudithishanka
authored
Merge pull request #464 from jaseci-labs/Syntax-Highlighter
Syntax highlighter
2 parents adb66e3 + 183d369 commit a13d7fe

5 files changed

Lines changed: 233 additions & 654 deletions

File tree

‎jac-gpt-fullstack/components/ChatInput.cl.jac‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,4 +176,4 @@ def:pub ChatInput(
176176
</div>
177177
</form>
178178
</div>;
179-
}
179+
}

‎jac-gpt-fullstack/components/ChatMessage.cl.jac‎

Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,12 @@ import from "@tabler/icons-react" {
1616
IconCheck
1717
}
1818

19-
# Monaco Editor - React wrapper
20-
import from "@monaco-editor/react" { Editor }
19+
# CodeMirror syntax highlighting for Jac
20+
import from "..utils/syntax_highlighting" { getJacExtensions }
21+
import from "@codemirror/view" { EditorView }
22+
import from "@codemirror/state" { EditorState }
2123

22-
# Syntax highlighting utilities
23-
import from "..utils/syntax_highlighting" { highlightJacCode }
24-
25-
# Jac syntax highlighting CSS
24+
# Jac syntax highlighting CSS (kept for highlight.js bash/shell overrides)
2625
import "..styles/jacSyntax.css";
2726

2827

@@ -101,29 +100,35 @@ def:pub CodeBlock(language: str, code: str, children: any = null) -> any {
101100
}
102101

103102

104-
"""Lightweight Jac code block with tokenizer-based syntax highlighting."""
103+
"""Read-only Jac code block using CodeMirror 6."""
105104
def:pub JacCodeBlock(code: str) -> any {
106-
console.log("=== JacCodeBlock rendered ===");
107-
console.log("Code to highlight:", code);
108-
109105
has copied: bool = false;
110-
has highlightedCode: str = code;
106+
editorRef = useRef(None);
107+
viewRef = useRef(None);
111108

112109
def handleCopy() -> None {
113110
navigator.clipboard.writeText(code);
114111
copied = true;
115112
setTimeout(lambda { copied = false; }, 2000);
116113
}
117114

118-
# Highlight code on mount and when code changes
115+
# Create / destroy the CodeMirror EditorView when code changes
119116
useEffect(lambda {
120-
console.log("=== useEffect triggered for highlighting ===");
121-
console.log("Calling highlightJacCode with:", code);
122-
highlightJacCode(code).then(lambda result: any {
123-
console.log("=== Highlighting complete ===");
124-
console.log("Result:", result);
125-
highlightedCode = result;
126-
});
117+
if viewRef.current {
118+
viewRef.current.destroy();
119+
viewRef.current = None;
120+
}
121+
if editorRef.current {
122+
state = EditorState.create({
123+
"doc": code,
124+
"extensions": getJacExtensions()
125+
});
126+
viewRef.current = Reflect.construct(EditorView, [{
127+
"state": state,
128+
"parent": editorRef.current
129+
}]);
130+
}
131+
return lambda { if viewRef.current { viewRef.current.destroy(); viewRef.current = None; } };
127132
}, [code]);
128133

129134
copyLabel = "Copy code";
@@ -167,21 +172,7 @@ def:pub JacCodeBlock(code: str) -> any {
167172
</Group>
168173
169174
<Box px="md" py="sm" style={{"overflowX": "auto"}}>
170-
<pre
171-
className="jac-code"
172-
style={{
173-
"margin": "0",
174-
"padding": "0",
175-
"fontSize": "13px",
176-
"lineHeight": "1.5",
177-
"fontFamily": "Monaco, Menlo, Ubuntu Mono, monospace",
178-
"whiteSpace": "pre-wrap",
179-
"wordBreak": "break-word",
180-
"color": "#d4d4d4",
181-
"background": "transparent"
182-
}}
183-
dangerouslySetInnerHTML={{ "__html": highlightedCode }}
184-
/>
175+
<div ref={editorRef} className="jac-codemirror-wrapper" />
185176
</Box>
186177
</Paper>
187178
</Box>;

‎jac-gpt-fullstack/jac.toml‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,11 @@ tailwind-merge = "^2.2.0"
2727
"@emotion/react" = "^11.14.0"
2828
react-error-boundary = "latest"
2929

30-
# Monaco Editor for Jac syntax highlighting
31-
"@monaco-editor/react" = "^4.6.0"
32-
monaco-editor = "^0.45.0"
33-
monaco-textmate = "^3.0.1"
34-
onigasm = "^2.2.5"
35-
monaco-editor-textmate = "^4.0.0"
30+
# CodeMirror 6 for Jac syntax highlighting
31+
"@codemirror/view" = "^6.0.0"
32+
"@codemirror/state" = "^6.0.0"
33+
"@codemirror/language" = "^6.0.0"
34+
"@lezer/highlight" = "^1.0.0"
3635

3736
[dependencies.npm.dev]
3837
"@jac-client/dev-deps" = "1.0.0"

‎jac-gpt-fullstack/styles/jacSyntax.css‎

Lines changed: 6 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,13 @@
1-
/* Jac language syntax highlighting styles */
2-
.jac-code,
3-
pre[class*="jac"] {
4-
color: #d4d4d4;
5-
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
6-
font-size: 0.875rem;
1+
/* CodeMirror wrapper: font metrics for Jac code blocks in chat messages */
2+
.jac-codemirror-wrapper {
3+
font-size: 13px;
74
line-height: 1.5;
8-
}
9-
10-
.jac-keyword {
11-
color: #569cd6;
12-
font-weight: 500;
13-
}
14-
15-
.jac-control-flow {
16-
color: #c678dd;
17-
font-weight: 500;
18-
}
19-
20-
.jac-string {
21-
color: #ce9178;
22-
}
23-
24-
.jac-comment {
25-
color: #6a9955;
26-
font-style: italic;
27-
}
28-
29-
.jac-number {
30-
color: #b5cea8;
31-
}
32-
33-
.jac-type {
34-
color: #3ac9b0;
35-
}
36-
37-
.jac-class-name {
38-
color: #4ec9b0;
39-
}
40-
41-
.jac-operator {
42-
color: #d4d4d4;
43-
}
44-
45-
.jac-arrow {
46-
color: #ff6b6b;
47-
font-weight: bold;
48-
}
49-
50-
.jac-function {
51-
color: #dcdcaa;
52-
}
53-
54-
.jac-variable {
55-
color: #9cdcfe;
56-
}
57-
58-
.jac-special-keyword {
59-
color: #c678dd;
60-
}
61-
62-
.jac-module {
63-
color: #4ec9b0;
64-
}
65-
66-
.jac-punctuation {
675
color: #d4d4d4;
686
}
697

70-
/* Bracket nesting colors */
71-
.jac-bracket-level-0 {
72-
color: #ffd700; /* Yellow for outermost brackets */
73-
font-weight: bold;
74-
}
75-
76-
.jac-bracket-level-1 {
77-
color: #c678dd; /* Purple for second level */
78-
font-weight: bold;
79-
}
80-
81-
.jac-bracket-level-2 {
82-
color: #61afef; /* Blue for third level */
83-
font-weight: bold;
84-
}
85-
86-
.jac-bracket-level-3 {
87-
color: #98c379; /* Green for fourth level (fallback) */
88-
font-weight: bold;
89-
}
90-
91-
/* Dark theme adjustments */
92-
.dark .jac-code {
93-
background: #242424;
94-
border: 1px solid #30363d;
95-
border-radius: 2rem;
96-
}
97-
98-
/* Light theme adjustments */
99-
.light .jac-code {
100-
background: #f6f8fa;
101-
color: #24292f;
102-
border: 1px solid #d1d9e0;
103-
border-radius: 2rem;
104-
}
105-
106-
.light .jac-keyword {
107-
color: #0550ae;
108-
}
109-
110-
.light .jac-control-flow {
111-
color: #8250df;
112-
}
113-
114-
.light .jac-string {
115-
color: #0a3069;
116-
}
117-
118-
.light .jac-comment {
119-
color: #6e7781;
120-
}
121-
122-
.light .jac-number {
123-
color: #0550ae;
124-
}
125-
126-
.light .jac-type {
127-
color: #953800;
128-
}
129-
130-
.light .jac-operator {
131-
color: #24292f;
132-
}
133-
134-
.light .jac-arrow {
135-
color: #d73a49;
136-
font-weight: bold;
137-
}
138-
139-
.light .jac-special-keyword {
140-
color: #8250df;
141-
}
142-
143-
.light .jac-variable {
144-
color: #24292f;
8+
/* Transparent background so the dark Paper shows through */
9+
.jac-codemirror-wrapper .cm-editor {
10+
background: transparent !important;
14511
}
14612

14713
/* Override highlight.js bash/shell syntax colors to be white/gray */

0 commit comments

Comments
 (0)