Skip to content

Commit bcd55cf

Browse files
Amour1688Copilot
Amour1688
and
Copilot
authored
feat: update playground css style (#318)
Co-authored-by: Copilot <[email protected]>
1 parent 7e7cf4d commit bcd55cf

File tree

6 files changed

+100
-97
lines changed

6 files changed

+100
-97
lines changed

‎website/theme/components/Playground/Editor.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.editor-container {
2-
min-height: 600px;
2+
flex: 1;
3+
height: 100%;
34
border: 1px solid #eee;
4-
border-radius: 4px;
55
}

‎website/theme/components/Playground/Editor.tsx‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React, { useRef, useEffect, forwardRef, Ref, createRef } from 'react';
22
import * as monaco from 'monaco-editor';
33
import { type Diagnostic } from '@rslint/wasm';
44
import './Editor.css';
5-
// @ts-ignore
6-
self.MonacoEnvironment = {
5+
6+
window.MonacoEnvironment = {
77
getWorker: function (moduleId, label) {
88
if (label === 'typescript' || label === 'javascript') {
99
return new Worker(
@@ -18,10 +18,12 @@ self.MonacoEnvironment = {
1818
);
1919
},
2020
};
21+
2122
export interface EditorRef {
2223
getValue: () => string | undefined;
2324
attachDiag: (diags: Diagnostic[]) => void;
2425
}
26+
2527
export const Editor = ({
2628
ref,
2729
onChange,
@@ -30,13 +32,13 @@ export const Editor = ({
3032
onChange: (value: string) => void;
3133
}) => {
3234
const divEl = useRef<HTMLDivElement>(null);
33-
let editor =
35+
const editorRef =
3436
useRef<import('monaco-editor').editor.IStandaloneCodeEditor>(null);
3537
// get value from editor using forwardRef
3638
React.useImperativeHandle(ref, () => ({
37-
getValue: () => editor.current?.getValue(),
39+
getValue: () => editorRef.current?.getValue(),
3840
attachDiag: (diags: Diagnostic[]) => {
39-
const model = editor.current?.getModel();
41+
const model = editorRef.current?.getModel();
4042

4143
if (model) {
4244
const markers = diags.map(diag => {
@@ -61,22 +63,23 @@ export const Editor = ({
6163
}));
6264

6365
useEffect(() => {
64-
if (divEl.current) {
65-
editor.current = monaco.editor.create(divEl.current, {
66-
value: ['let a:any; a.b = 10;'].join('\n'),
67-
language: 'typescript',
68-
hover: {
69-
enabled: true,
70-
delay: 100,
71-
above: false,
72-
},
73-
});
74-
editor.current.onDidChangeModelContent(() => {
75-
onChange(editor.current?.getValue() || '');
76-
});
66+
if (!divEl.current) {
67+
return;
7768
}
69+
70+
const editor = monaco.editor.create(divEl.current, {
71+
value: ['let a: any;', 'a.b = 10;'].join('\n'),
72+
language: 'typescript',
73+
automaticLayout: true,
74+
scrollBeyondLastLine: false,
75+
});
76+
editor.onDidChangeModelContent(() => {
77+
onChange(editor.getValue() || '');
78+
});
79+
editorRef.current = editor;
80+
7881
return () => {
79-
editor.current?.dispose();
82+
editor.dispose();
8083
};
8184
}, []);
8285
return <div className="editor-container" ref={divEl}></div>;

‎website/theme/components/Playground/ResultPanel.css‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
11
.result-header {
2-
border-bottom: 1px solid #d0d7de;
32
background: #f6f8fa;
43
}
54

65
.result-tabs {
76
display: flex;
8-
gap: 0.25rem;
9-
border: 1px solid #d0d7de;
10-
border-radius: 8px;
11-
padding: 0.25rem;
12-
margin-bottom: 0.25rem;
7+
gap: 4px;
8+
padding: 4px;
139
}
1410

1511
.result-tab {
1612
font-size: 0.8rem;
17-
padding: 0.5rem 1.1rem 0.5rem 0.8rem;
13+
padding: 8px 12px;
1814

1915
background: transparent;
2016
cursor: pointer;
@@ -55,11 +51,20 @@
5551
}
5652
}
5753

54+
.result-content {
55+
padding: 8px;
56+
height: calc(100% - 46px);
57+
}
58+
59+
.lint-results {
60+
height: calc(100% - 8px);
61+
}
62+
5863
/* Messages */
5964
.error-message,
6065
.success-message {
6166
display: flex;
62-
align-items: flex-start;
67+
align-items: center;
6368
gap: 0.75rem;
6469
padding: 1rem;
6570
border-radius: 6px;
@@ -94,8 +99,10 @@
9499
/* Diagnostics */
95100
.diagnostics-list {
96101
display: flex;
102+
height: 100%;
97103
flex-direction: column;
98-
gap: 0.75rem;
104+
gap: 16px;
105+
overflow: auto;
99106
}
100107

101108
.diagnostic-item {
@@ -118,7 +125,7 @@
118125
'Apple Color Emoji',
119126
'Segoe UI Emoji',
120127
'Segoe UI Symbol';
121-
padding: 1rem;
128+
padding: 12px;
122129
}
123130

124131
.diagnostic-header {

‎website/theme/components/Playground/ResultPanel.tsx‎

Lines changed: 52 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export interface Diagnostic {
1313
interface ResultPanelProps {
1414
diagnostics: Diagnostic[];
1515
ast?: string;
16-
isLoading: boolean;
16+
initialized?: boolean;
1717
error?: string;
1818
fixedCode?: string;
1919
typeInfo?: string;
@@ -22,7 +22,7 @@ interface ResultPanelProps {
2222
type TabType = 'lint' | 'fixed' | 'ast' | 'type';
2323

2424
export const ResultPanel: React.FC<ResultPanelProps> = props => {
25-
const { diagnostics, ast, isLoading, error, fixedCode, typeInfo } = props;
25+
const { diagnostics, ast, error, initialized, fixedCode, typeInfo } = props;
2626
const [activeTab, setActiveTab] = useState<TabType>('lint');
2727

2828
return (
@@ -46,65 +46,61 @@ export const ResultPanel: React.FC<ResultPanelProps> = props => {
4646
</div>
4747
</div>
4848

49-
<div className="result-content">
50-
{isLoading && (
51-
<div className="loading-state">
52-
<div className="spinner"></div>
53-
<span>Analyzing code...</span>
54-
</div>
55-
)}
56-
57-
{error && (
58-
<div className="error-message">
59-
<div className="error-icon">⚠️</div>
60-
<div className="error-text">
61-
<strong>Error:</strong> {error}
49+
{initialized ? (
50+
<div className="result-content">
51+
{error && (
52+
<div className="error-message">
53+
<div className="error-icon">⚠️</div>
54+
<div className="error-text">
55+
<strong>Error:</strong> {error}
56+
</div>
6257
</div>
63-
</div>
64-
)}
58+
)}
6559

66-
{!isLoading && !error && activeTab === 'lint' && (
67-
<div className="lint-results">
68-
{diagnostics.length === 0 ? (
69-
<div className="success-message">
70-
<div className="success-icon">✅</div>
71-
<div className="success-text">
72-
<strong>No issues found!</strong> Your code looks good.
60+
{!error && activeTab === 'lint' && (
61+
<div className="lint-results">
62+
{diagnostics.length === 0 ? (
63+
<div className="success-message">
64+
<div className="success-icon">✅</div>
65+
<div className="success-text">
66+
<strong>No issues found!</strong> Your code looks good.
67+
</div>
7368
</div>
74-
</div>
75-
) : (
76-
<div className="diagnostics-list">
77-
{diagnostics.map((diagnostic, index) => (
78-
<div key={index} className="diagnostic-item">
79-
<div className="diagnostic-header">
80-
<h4>{diagnostic.ruleName}</h4>
81-
</div>
82-
<div className="diagnostic-message">
83-
{diagnostic.message} {diagnostic.range.start.line}:
84-
{diagnostic.range.start.column} -{' '}
85-
{diagnostic.range.end.line}:{diagnostic.range.end.column}
69+
) : (
70+
<div className="diagnostics-list">
71+
{diagnostics.map((diagnostic, index) => (
72+
<div key={index} className="diagnostic-item">
73+
<div className="diagnostic-header">
74+
<h4>{diagnostic.ruleName}</h4>
75+
</div>
76+
<div className="diagnostic-message">
77+
{diagnostic.message} {diagnostic.range.start.line}:
78+
{diagnostic.range.start.column} -{' '}
79+
{diagnostic.range.end.line}:
80+
{diagnostic.range.end.column}
81+
</div>
8682
</div>
87-
</div>
88-
))}
89-
</div>
90-
)}
91-
</div>
92-
)}
83+
))}
84+
</div>
85+
)}
86+
</div>
87+
)}
9388

94-
{!isLoading && !error && activeTab === 'ast' && (
95-
<div className="ast-view">
96-
{ast ? (
97-
<div className="code-block-wrapper">
98-
<pre className="ast-content">{ast}</pre>
99-
</div>
100-
) : (
101-
<div className="empty-state">
102-
<div className="empty-text">AST will be displayed here</div>
103-
</div>
104-
)}
105-
</div>
106-
)}
107-
</div>
89+
{!error && activeTab === 'ast' && (
90+
<div className="ast-view">
91+
{ast ? (
92+
<div className="code-block-wrapper">
93+
<pre className="ast-content">{ast}</pre>
94+
</div>
95+
) : (
96+
<div className="empty-state">
97+
<div className="empty-text">AST will be displayed here</div>
98+
</div>
99+
)}
100+
</div>
101+
)}
102+
</div>
103+
) : null}
108104
</div>
109105
);
110106
};

‎website/theme/components/Playground/index.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
.playground-container {
22
display: flex;
3-
height: 100vh;
3+
height: calc(100vh - 72px);
44
background: #ffffff;
5+
overflow: hidden;
56
}
67

78
.editor-panel {
89
flex: 5;
910
background: #ffffff;
10-
border-right: 1px solid #d0d7de;
1111
}
12+
1213
.result-panel {
1314
flex: 3;
1415
background: #ffffff;
15-
border-left: 1px solid #d0d7de;
1616
}

‎website/theme/components/Playground/index.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,17 +48,15 @@ Program {
4848
const Playground: React.FC = () => {
4949
const editorRef = useRef<EditorRef | null>(null);
5050
const [diagnostics, setDiagnostics] = useState<Diagnostic[]>([]);
51-
const [isLoading, setIsLoading] = useState(false);
51+
const [initialized, setInitialized] = useState(false);
5252
const [error, setError] = useState<string | undefined>();
5353
const [ast, setAst] = useState<string | undefined>();
5454

5555
async function runLint() {
5656
try {
57-
setIsLoading(true);
5857
setError(undefined);
59-
6058
const service = await ensureService();
61-
const code = editorRef.current?.getValue() || 'let a:any; a.b = 10;';
59+
const code = editorRef.current?.getValue() ?? '';
6260

6361
const result = await service.lint({
6462
fileContents: {
@@ -69,6 +67,7 @@ const Playground: React.FC = () => {
6967
'@typescript-eslint/no-unsafe-member-access': 'error',
7068
},
7169
});
70+
setInitialized(true);
7271

7372
// Convert diagnostics to the expected format
7473
const convertedDiagnostics: Diagnostic[] = result.diagnostics.map(
@@ -99,8 +98,6 @@ const Playground: React.FC = () => {
9998
} catch (err) {
10099
const errorMessage = err instanceof Error ? err.message : String(err);
101100
setError(`Linting failed: ${errorMessage}`);
102-
} finally {
103-
setIsLoading(false);
104101
}
105102
}
106103

@@ -114,9 +111,9 @@ const Playground: React.FC = () => {
114111
<Editor ref={editorRef} onChange={() => runLint()} />
115112
</div>
116113
<ResultPanel
114+
initialized={initialized}
117115
diagnostics={diagnostics}
118116
ast={ast}
119-
isLoading={isLoading}
120117
error={error}
121118
/>
122119
</div>

0 commit comments

Comments
 (0)