@mpeggroup/mpeg-sdl-editor 1.4.2 → 1.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -5
- package/bun.lock +2 -2
- package/html/index.html +1 -1
- package/package.json +25 -25
- package/src/App.tsx +29 -56
- package/src/codemirror/ruler.ts +3 -9
- package/src/components/DesktopPanels.tsx +2 -6
- package/src/components/Editor.tsx +94 -109
- package/src/components/MobileDrawer.tsx +8 -12
- package/src/components/Navbar.tsx +35 -42
- package/src/components/ResizableLayout.tsx +20 -24
- package/src/components/Settings.tsx +38 -49
- package/src/components/StatusBar.tsx +2 -6
- package/src/components/SubNav.tsx +1 -6
- package/src/hooks/useAutoDisplayCompletions.ts +2 -7
- package/src/hooks/useDragResize.ts +63 -57
- package/src/hooks/useFileOperations.ts +1 -3
- package/src/hooks/useMobileDetection.ts +2 -6
- package/src/hooks/usePrettier.ts +1 -3
- package/src/hooks/useRulerWidth.ts +1 -10
- package/src/hooks/useShowSemanticWarnings.ts +1 -3
- package/src/hooks/useShowSymanticErrors.ts +7 -9
- package/src/hooks/useShowSyntaxErrors.ts +7 -9
- package/src/hooks/useToast.ts +1 -5
- package/src/sdl/sdlComplete.ts +5 -17
- package/src/sdl/sdlLinter.ts +1 -6
- package/tailwind.config.ts +2 -6
- package/tests/Editor_test.tsx +1 -3
- package/tsconfig.json +6 -2
|
@@ -71,12 +71,7 @@ export function Navbar({
|
|
|
71
71
|
</button>
|
|
72
72
|
</li>
|
|
73
73
|
<li>
|
|
74
|
-
<button
|
|
75
|
-
type="button"
|
|
76
|
-
onClick={onSave}
|
|
77
|
-
title="Save"
|
|
78
|
-
className="[&_svg]:w-6 [&_svg]:h-6"
|
|
79
|
-
>
|
|
74
|
+
<button type="button" onClick={onSave} title="Save" className="[&_svg]:w-6 [&_svg]:h-6">
|
|
80
75
|
<svg
|
|
81
76
|
viewBox="0 0 24 24"
|
|
82
77
|
fill="none"
|
|
@@ -156,42 +151,40 @@ export function Navbar({
|
|
|
156
151
|
title={isSettingsShown ? "Close settings" : "Open settings"}
|
|
157
152
|
className="[&_svg]:w-6 [&_svg]:h-6"
|
|
158
153
|
>
|
|
159
|
-
{isSettingsShown
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
</svg>
|
|
194
|
-
)}
|
|
154
|
+
{isSettingsShown ? (
|
|
155
|
+
<svg
|
|
156
|
+
fill="none"
|
|
157
|
+
stroke="currentColor"
|
|
158
|
+
strokeWidth="2"
|
|
159
|
+
strokeLinecap="round"
|
|
160
|
+
strokeLinejoin="round"
|
|
161
|
+
viewBox="0 0 24 24"
|
|
162
|
+
className="w-6 h-6"
|
|
163
|
+
>
|
|
164
|
+
<path
|
|
165
|
+
fill="currentColor"
|
|
166
|
+
opacity="0.3"
|
|
167
|
+
fillRule="evenodd"
|
|
168
|
+
clipRule="evenodd"
|
|
169
|
+
d="M11 3C10.4477 3 10 3.44772 10 4V4.56876C10 4.99658 9.71288 5.36825 9.31776 5.53229C8.9225 5.6964 8.46228 5.63386 8.15966 5.33123L7.75734 4.92891C7.36681 4.53839 6.73365 4.53839 6.34312 4.92891L4.92891 6.34313C4.53838 6.73365 4.53838 7.36681 4.92891 7.75734L5.33123 8.15966C5.63386 8.46229 5.6964 8.9225 5.53229 9.31776C5.36825 9.71288 4.99658 10 4.56877 10L4 10C3.44772 10 3 10.4477 3 11V13C3 13.5523 3.44772 14 4 14H4.56879C4.99659 14 5.36825 14.2871 5.53228 14.6822C5.69638 15.0775 5.63384 15.5377 5.33123 15.8403L4.92889 16.2426C4.53837 16.6331 4.53837 17.2663 4.92889 17.6568L6.34311 19.071C6.73363 19.4616 7.36679 19.4616 7.75732 19.071L8.1596 18.6688C8.46223 18.3661 8.92247 18.3036 9.31774 18.4677C9.71287 18.6317 10 19.0034 10 19.4313V20C10 20.5523 10.4477 21 11 21H13C13.5523 21 14 20.5523 14 20V19.4312C14 19.0034 14.2871 18.6318 14.6822 18.4677C15.0775 18.3036 15.5377 18.3661 15.8403 18.6688L16.2426 19.071C16.6331 19.4616 17.2663 19.4616 17.6568 19.071L19.071 17.6568C19.4616 17.2663 19.4616 16.6331 19.071 16.2426L18.6688 15.8403C18.3661 15.5377 18.3036 15.0775 18.4677 14.6822C18.6318 14.2871 19.0034 14 19.4312 14H20C20.5523 14 21 13.5523 21 13V11C21 10.4477 20.5523 10 20 10L19.4313 10C19.0034 10 18.6317 9.71287 18.4677 9.31774C18.3036 8.92247 18.3661 8.46223 18.6688 8.1596L19.071 7.75734C19.4615 7.36681 19.4616 6.73365 19.071 6.34312L17.6568 4.92891C17.2663 4.53838 16.6331 4.53838 16.2426 4.92891L15.8403 5.33123C15.5377 5.63384 15.0775 5.69638 14.6822 5.53228C14.2871 5.36825 14 4.99659 14 4.56879V4C14 3.44772 13.5523 3 13 3H11ZM12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z"
|
|
170
|
+
/>
|
|
171
|
+
<path d="M11 3H13C13.5523 3 14 3.44772 14 4V4.56879C14 4.99659 14.2871 5.36825 14.6822 5.53228C15.0775 5.69638 15.5377 5.63384 15.8403 5.33123L16.2426 4.92891C16.6331 4.53838 17.2663 4.53838 17.6568 4.92891L19.071 6.34312C19.4616 6.73365 19.4615 7.36681 19.071 7.75734L18.6688 8.1596C18.3661 8.46223 18.3036 8.92247 18.4677 9.31774C18.6317 9.71287 19.0034 10 19.4313 10L20 10C20.5523 10 21 10.4477 21 11V13C21 13.5523 20.5523 14 20 14H19.4312C19.0034 14 18.6318 14.2871 18.4677 14.6822C18.3036 15.0775 18.3661 15.5377 18.6688 15.8403L19.071 16.2426C19.4616 16.6331 19.4616 17.2663 19.071 17.6568L17.6568 19.071C17.2663 19.4616 16.6331 19.4616 16.2426 19.071L15.8403 18.6688C15.5377 18.3661 15.0775 18.3036 14.6822 18.4677C14.2871 18.6318 14 19.0034 14 19.4312V20C14 20.5523 13.5523 21 13 21H11C10.4477 21 10 20.5523 10 20V19.4313C10 19.0034 9.71287 18.6317 9.31774 18.4677C8.92247 18.3036 8.46223 18.3661 8.1596 18.6688L7.75732 19.071C7.36679 19.4616 6.73363 19.4616 6.34311 19.071L4.92889 17.6568C4.53837 17.2663 4.53837 16.6331 4.92889 16.2426L5.33123 15.8403C5.63384 15.5377 5.69638 15.0775 5.53228 14.6822C5.36825 14.2871 4.99659 14 4.56879 14H4C3.44772 14 3 13.5523 3 13V11C3 10.4477 3.44772 10 4 10L4.56877 10C4.99658 10 5.36825 9.71288 5.53229 9.31776C5.6964 8.9225 5.63386 8.46229 5.33123 8.15966L4.92891 7.75734C4.53838 7.36681 4.53838 6.73365 4.92891 6.34313L6.34312 4.92891C6.73365 4.53839 7.36681 4.53839 7.75734 4.92891L8.15966 5.33123C8.46228 5.63386 8.9225 5.6964 9.31776 5.53229C9.71288 5.36825 10 4.99658 10 4.56876V4C10 3.44772 10.4477 3 11 3Z" />
|
|
172
|
+
<path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" />
|
|
173
|
+
</svg>
|
|
174
|
+
) : (
|
|
175
|
+
<svg
|
|
176
|
+
fill="none"
|
|
177
|
+
strokeWidth="2"
|
|
178
|
+
strokeLinecap="round"
|
|
179
|
+
strokeLinejoin="round"
|
|
180
|
+
stroke="currentColor"
|
|
181
|
+
viewBox="0 0 24 24"
|
|
182
|
+
className="w-6 h-6"
|
|
183
|
+
>
|
|
184
|
+
<path d="M11 3H13C13.5523 3 14 3.44772 14 4V4.56879C14 4.99659 14.2871 5.36825 14.6822 5.53228C15.0775 5.69638 15.5377 5.63384 15.8403 5.33123L16.2426 4.92891C16.6331 4.53838 17.2663 4.53838 17.6568 4.92891L19.071 6.34312C19.4616 6.73365 19.4615 7.36681 19.071 7.75734L18.6688 8.1596C18.3661 8.46223 18.3036 8.92247 18.4677 9.31774C18.6317 9.71287 19.0034 10 19.4313 10L20 10C20.5523 10 21 10.4477 21 11V13C21 13.5523 20.5523 14 20 14H19.4312C19.0034 14 18.6318 14.2871 18.4677 14.6822C18.3036 15.0775 18.3661 15.5377 18.6688 15.8403L19.071 16.2426C19.4616 16.6331 19.4616 17.2663 19.071 17.6568L17.6568 19.071C17.2663 19.4616 16.6331 19.4616 16.2426 19.071L15.8403 18.6688C15.5377 18.3661 15.0775 18.3036 14.6822 18.4677C14.2871 18.6318 14 19.0034 14 19.4312V20C14 20.5523 13.5523 21 13 21H11C10.4477 21 10 20.5523 10 20V19.4313C10 19.0034 9.71287 18.6317 9.31774 18.4677C8.92247 18.3036 8.46223 18.3661 8.1596 18.6688L7.75732 19.071C7.36679 19.4616 6.73363 19.4616 6.34311 19.071L4.92889 17.6568C4.53837 17.2663 4.53837 16.6331 4.92889 16.2426L5.33123 15.8403C5.63384 15.5377 5.69638 15.0775 5.53228 14.6822C5.36825 14.2871 4.99659 14 4.56879 14H4C3.44772 14 3 13.5523 3 13V11C3 10.4477 3.44772 10 4 10L4.56877 10C4.99658 10 5.36825 9.71288 5.53229 9.31776C5.6964 8.9225 5.63386 8.46229 5.33123 8.15966L4.92891 7.75734C4.53838 7.36681 4.53838 6.73365 4.92891 6.34313L6.34312 4.92891C6.73365 4.53839 7.36681 4.53839 7.75734 4.92891L8.15966 5.33123C8.46228 5.63386 8.9225 5.6964 9.31776 5.53229C9.71288 5.36825 10 4.99658 10 4.56876V4C10 3.44772 10.4477 3 11 3Z" />
|
|
185
|
+
<path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" />
|
|
186
|
+
</svg>
|
|
187
|
+
)}
|
|
195
188
|
</button>
|
|
196
189
|
</li>
|
|
197
190
|
}
|
|
@@ -38,32 +38,28 @@ export function ResizableLayout({
|
|
|
38
38
|
|
|
39
39
|
return (
|
|
40
40
|
<div ref={containerRef} className="flex h-full w-full relative">
|
|
41
|
-
{isMobile
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<div className="flex flex-col w-full">
|
|
45
|
-
{children[0]}
|
|
46
|
-
</div>
|
|
41
|
+
{isMobile ? (
|
|
42
|
+
<>
|
|
43
|
+
<div className="flex flex-col w-full">{children[0]}</div>
|
|
47
44
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
isSettingsShown={isSettingsShown}
|
|
51
|
-
onToggleSettings={onToggleSettings}
|
|
52
|
-
>
|
|
53
|
-
{children[1]}
|
|
54
|
-
</MobileDrawer>
|
|
55
|
-
</>
|
|
56
|
-
)
|
|
57
|
-
: (
|
|
58
|
-
<DesktopPanels
|
|
59
|
-
leftChild={children[0]}
|
|
60
|
-
rightChild={children[1]}
|
|
61
|
-
splitPercentage={splitPercentage}
|
|
45
|
+
<MobileDrawer
|
|
46
|
+
theme={theme}
|
|
62
47
|
isSettingsShown={isSettingsShown}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
48
|
+
onToggleSettings={onToggleSettings}
|
|
49
|
+
>
|
|
50
|
+
{children[1]}
|
|
51
|
+
</MobileDrawer>
|
|
52
|
+
</>
|
|
53
|
+
) : (
|
|
54
|
+
<DesktopPanels
|
|
55
|
+
leftChild={children[0]}
|
|
56
|
+
rightChild={children[1]}
|
|
57
|
+
splitPercentage={splitPercentage}
|
|
58
|
+
isSettingsShown={isSettingsShown}
|
|
59
|
+
isDragging={isDragging}
|
|
60
|
+
onMouseDown={handleMouseDown}
|
|
61
|
+
/>
|
|
62
|
+
)}
|
|
67
63
|
</div>
|
|
68
64
|
);
|
|
69
65
|
}
|
|
@@ -18,29 +18,25 @@ interface SettingsProps {
|
|
|
18
18
|
onShowSemanticWarningsChange?: (value: boolean) => void;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
export function Settings(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}: SettingsProps,
|
|
38
|
-
) {
|
|
21
|
+
export function Settings({
|
|
22
|
+
theme,
|
|
23
|
+
onToggleTheme,
|
|
24
|
+
rulerWidth,
|
|
25
|
+
onRulerWidthChange,
|
|
26
|
+
autoDisplayCompletions,
|
|
27
|
+
onAutoDisplayCompletionsChange,
|
|
28
|
+
enableLinting,
|
|
29
|
+
onEnableLintingChange,
|
|
30
|
+
showSyntaxErrors,
|
|
31
|
+
onShowSyntaxErrorsChange,
|
|
32
|
+
showSemanticErrors,
|
|
33
|
+
onShowSemanticErrorsChange,
|
|
34
|
+
showSemanticWarnings,
|
|
35
|
+
onShowSemanticWarningsChange,
|
|
36
|
+
}: SettingsProps) {
|
|
39
37
|
return (
|
|
40
38
|
<div className="h-full bg-base-100 md:p-4 overflow-auto">
|
|
41
|
-
<h2 className="font-bold pb-4">
|
|
42
|
-
Settings
|
|
43
|
-
</h2>
|
|
39
|
+
<h2 className="font-bold pb-4">Settings</h2>
|
|
44
40
|
<div className="flex flex-col gap-3">
|
|
45
41
|
<div className="flex items-center gap-3">
|
|
46
42
|
<span className="text-sm whitespace-nowrap">Theme</span>
|
|
@@ -50,25 +46,23 @@ export function Settings(
|
|
|
50
46
|
title={theme === "dark" ? "Light theme" : "Dark theme"}
|
|
51
47
|
className="btn btn-sm border border-base-content/30 rounded-lg bg-transparent hover:bg-base-content/10 hover:border-base-content/30 [&_svg]:w-5 [&_svg]:h-5"
|
|
52
48
|
>
|
|
53
|
-
{theme === "dark"
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
</svg>
|
|
71
|
-
)}
|
|
49
|
+
{theme === "dark" ? (
|
|
50
|
+
<svg
|
|
51
|
+
className="w-5 h-5 fill-current"
|
|
52
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
53
|
+
viewBox="0 0 24 24"
|
|
54
|
+
>
|
|
55
|
+
<path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
|
|
56
|
+
</svg>
|
|
57
|
+
) : (
|
|
58
|
+
<svg
|
|
59
|
+
className="w-5 h-5 fill-current"
|
|
60
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
61
|
+
viewBox="0 0 24 24"
|
|
62
|
+
>
|
|
63
|
+
<path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
|
|
64
|
+
</svg>
|
|
65
|
+
)}
|
|
72
66
|
</button>
|
|
73
67
|
</div>
|
|
74
68
|
<div className="flex items-center gap-3">
|
|
@@ -86,9 +80,7 @@ export function Settings(
|
|
|
86
80
|
</select>
|
|
87
81
|
</div>
|
|
88
82
|
<div className="flex items-center gap-3">
|
|
89
|
-
<span className="text-sm whitespace-nowrap">
|
|
90
|
-
Auto-Display Completions
|
|
91
|
-
</span>
|
|
83
|
+
<span className="text-sm whitespace-nowrap">Auto-Display Completions</span>
|
|
92
84
|
<input
|
|
93
85
|
type="checkbox"
|
|
94
86
|
className="checkbox checkbox-sm border-base-content/30"
|
|
@@ -115,8 +107,7 @@ export function Settings(
|
|
|
115
107
|
className="checkbox checkbox-xs disabled:opacity-50 disabled:cursor-not-allowed"
|
|
116
108
|
checked={showSyntaxErrors}
|
|
117
109
|
disabled={!enableLinting}
|
|
118
|
-
onChange={(e) =>
|
|
119
|
-
onShowSyntaxErrorsChange?.(e.target.checked)}
|
|
110
|
+
onChange={(e) => onShowSyntaxErrorsChange?.(e.target.checked)}
|
|
120
111
|
/>
|
|
121
112
|
<span
|
|
122
113
|
className={`text-xs text-left whitespace-nowrap ${
|
|
@@ -132,8 +123,7 @@ export function Settings(
|
|
|
132
123
|
className="checkbox checkbox-xs disabled:opacity-50 disabled:cursor-not-allowed"
|
|
133
124
|
checked={showSemanticErrors}
|
|
134
125
|
disabled={!enableLinting}
|
|
135
|
-
onChange={(e) =>
|
|
136
|
-
onShowSemanticErrorsChange?.(e.target.checked)}
|
|
126
|
+
onChange={(e) => onShowSemanticErrorsChange?.(e.target.checked)}
|
|
137
127
|
/>
|
|
138
128
|
<span
|
|
139
129
|
className={`text-xs text-left whitespace-nowrap ${
|
|
@@ -149,8 +139,7 @@ export function Settings(
|
|
|
149
139
|
className="checkbox checkbox-xs disabled:opacity-50 disabled:cursor-not-allowed"
|
|
150
140
|
checked={showSemanticWarnings}
|
|
151
141
|
disabled={!enableLinting}
|
|
152
|
-
onChange={(e) =>
|
|
153
|
-
onShowSemanticWarningsChange?.(e.target.checked)}
|
|
142
|
+
onChange={(e) => onShowSemanticWarningsChange?.(e.target.checked)}
|
|
154
143
|
/>
|
|
155
144
|
<span
|
|
156
145
|
className={`text-xs text-left whitespace-nowrap ${
|
|
@@ -28,12 +28,8 @@ export function StatusBar({
|
|
|
28
28
|
<div className="flex items-center space-x-4">
|
|
29
29
|
<span>Lines: {lineCount}</span>
|
|
30
30
|
<span>Characters: {characterCount}</span>
|
|
31
|
-
{enableLinting && showSyntaxErrors &&
|
|
32
|
-
|
|
33
|
-
)}
|
|
34
|
-
{enableLinting && showSemanticErrors && (
|
|
35
|
-
<span>Semantic Errors: {semanticErrorCount}</span>
|
|
36
|
-
)}
|
|
31
|
+
{enableLinting && showSyntaxErrors && <span>Syntax Errors: {syntaxErrorCount}</span>}
|
|
32
|
+
{enableLinting && showSemanticErrors && <span>Semantic Errors: {semanticErrorCount}</span>}
|
|
37
33
|
{enableLinting && showSemanticWarnings && (
|
|
38
34
|
<span>Semantic Warnings: {semanticWarningCount}</span>
|
|
39
35
|
)}
|
|
@@ -7,12 +7,7 @@ interface SubNavProps {
|
|
|
7
7
|
onPrettify: () => void;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
export function SubNav({
|
|
11
|
-
theme,
|
|
12
|
-
onCollapseAll,
|
|
13
|
-
onExpandAll,
|
|
14
|
-
onPrettify,
|
|
15
|
-
}: SubNavProps) {
|
|
10
|
+
export function SubNav({ theme, onCollapseAll, onExpandAll, onPrettify }: SubNavProps) {
|
|
16
11
|
return (
|
|
17
12
|
<div
|
|
18
13
|
className={`border-b border-base-300 px-2 py-1.5 flex items-center justify-between text-xs min-h-8 ${
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { useCallback, useEffect, useState } from "react";
|
|
2
2
|
|
|
3
3
|
export function useAutoDisplayCompletions(defaultValue: boolean = true) {
|
|
4
|
-
const [autoDisplayCompletions, setAutoDisplayCompletionsInternal] = useState<
|
|
5
|
-
boolean
|
|
6
|
-
>(() => {
|
|
4
|
+
const [autoDisplayCompletions, setAutoDisplayCompletionsInternal] = useState<boolean>(() => {
|
|
7
5
|
const stored = localStorage.getItem("autoDisplayCompletions");
|
|
8
6
|
if (stored !== null) {
|
|
9
7
|
return stored === "true";
|
|
@@ -12,10 +10,7 @@ export function useAutoDisplayCompletions(defaultValue: boolean = true) {
|
|
|
12
10
|
});
|
|
13
11
|
|
|
14
12
|
useEffect(() => {
|
|
15
|
-
localStorage.setItem(
|
|
16
|
-
"autoDisplayCompletions",
|
|
17
|
-
String(autoDisplayCompletions),
|
|
18
|
-
);
|
|
13
|
+
localStorage.setItem("autoDisplayCompletions", String(autoDisplayCompletions));
|
|
19
14
|
}, [autoDisplayCompletions]);
|
|
20
15
|
|
|
21
16
|
const setAutoDisplayCompletions = useCallback((value: boolean) => {
|
|
@@ -19,63 +19,69 @@ export function useDragResize({
|
|
|
19
19
|
const [dragStartX, setDragStartX] = useState(0);
|
|
20
20
|
const [dragStartPercentage, setDragStartPercentage] = useState(0);
|
|
21
21
|
|
|
22
|
-
const handleMouseDown = useCallback(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
22
|
+
const handleMouseDown = useCallback(
|
|
23
|
+
(e: React.MouseEvent) => {
|
|
24
|
+
if (!isSettingsShown) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
e.preventDefault();
|
|
29
|
+
|
|
30
|
+
const container = containerRef.current;
|
|
31
|
+
|
|
32
|
+
if (!container) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const containerRect = container.getBoundingClientRect();
|
|
37
|
+
const mouseX = e.clientX - containerRect.left;
|
|
38
|
+
const currentPercentage = (mouseX / containerRect.width) * 100;
|
|
39
|
+
|
|
40
|
+
setDragStartX(e.clientX);
|
|
41
|
+
setDragStartPercentage(currentPercentage);
|
|
42
|
+
setIsDragging(true);
|
|
43
|
+
},
|
|
44
|
+
[isSettingsShown, containerRef],
|
|
45
|
+
);
|
|
46
|
+
|
|
47
|
+
const handleMouseMove = useCallback(
|
|
48
|
+
(e: MouseEvent) => {
|
|
49
|
+
if (!isDragging || !containerRef.current || !isSettingsShown) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
const container = containerRef.current;
|
|
54
|
+
const containerRect = container.getBoundingClientRect();
|
|
55
|
+
const containerWidth = containerRect.width;
|
|
56
|
+
|
|
57
|
+
// Calculate the delta from where the drag started
|
|
58
|
+
const deltaX = e.clientX - dragStartX;
|
|
59
|
+
const deltaPercentage = (deltaX / containerWidth) * 100;
|
|
60
|
+
|
|
61
|
+
// Calculate new percentage based on drag start position + delta
|
|
62
|
+
let newPercentage = dragStartPercentage + deltaPercentage;
|
|
63
|
+
|
|
64
|
+
// Apply minimum width constraints
|
|
65
|
+
const minLeftPercentage = (minLeftWidth / containerWidth) * 100;
|
|
66
|
+
const minRightPercentage = (minRightWidth / containerWidth) * 100;
|
|
67
|
+
|
|
68
|
+
// Clamp the percentage to valid bounds
|
|
69
|
+
newPercentage = Math.max(minLeftPercentage, newPercentage);
|
|
70
|
+
newPercentage = Math.min(100 - minRightPercentage, newPercentage);
|
|
71
|
+
|
|
72
|
+
onSplitPercentageChange(newPercentage);
|
|
73
|
+
},
|
|
74
|
+
[
|
|
75
|
+
isDragging,
|
|
76
|
+
dragStartX,
|
|
77
|
+
dragStartPercentage,
|
|
78
|
+
minLeftWidth,
|
|
79
|
+
minRightWidth,
|
|
80
|
+
isSettingsShown,
|
|
81
|
+
onSplitPercentageChange,
|
|
82
|
+
containerRef,
|
|
83
|
+
],
|
|
84
|
+
);
|
|
79
85
|
|
|
80
86
|
const handleMouseUp = useCallback(() => {
|
|
81
87
|
setIsDragging(false);
|
|
@@ -9,9 +9,7 @@ interface UseFileOperationsProps {
|
|
|
9
9
|
editorRef: React.RefObject<EditorRef | null>;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
export function useFileOperations(
|
|
13
|
-
{ code, setCode, showToast, editorRef }: UseFileOperationsProps,
|
|
14
|
-
) {
|
|
12
|
+
export function useFileOperations({ code, setCode, showToast, editorRef }: UseFileOperationsProps) {
|
|
15
13
|
const handleSave = useCallback(async () => {
|
|
16
14
|
try {
|
|
17
15
|
if (globalThis.window.showSaveFilePicker) {
|
|
@@ -3,9 +3,7 @@ import { useEffect, useState } from "react";
|
|
|
3
3
|
export function useMobileDetection(breakpoint: number = 768) {
|
|
4
4
|
const [isMobile, setIsMobile] = useState(() => {
|
|
5
5
|
// Only check on client-side, return false for SSR
|
|
6
|
-
if (
|
|
7
|
-
typeof globalThis !== "undefined" && globalThis.innerWidth !== undefined
|
|
8
|
-
) {
|
|
6
|
+
if (typeof globalThis !== "undefined" && globalThis.innerWidth !== undefined) {
|
|
9
7
|
return globalThis.innerWidth < breakpoint;
|
|
10
8
|
}
|
|
11
9
|
return false;
|
|
@@ -13,9 +11,7 @@ export function useMobileDetection(breakpoint: number = 768) {
|
|
|
13
11
|
|
|
14
12
|
useEffect(() => {
|
|
15
13
|
// Only run on client-side
|
|
16
|
-
if (
|
|
17
|
-
typeof globalThis === "undefined" || globalThis.innerWidth === undefined
|
|
18
|
-
) {
|
|
14
|
+
if (typeof globalThis === "undefined" || globalThis.innerWidth === undefined) {
|
|
19
15
|
return;
|
|
20
16
|
}
|
|
21
17
|
|
package/src/hooks/usePrettier.ts
CHANGED
|
@@ -10,9 +10,7 @@ interface UsePrettierProps {
|
|
|
10
10
|
rulerWidth: number;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
export function usePrettier(
|
|
14
|
-
{ code, setCode, showToast, rulerWidth }: UsePrettierProps,
|
|
15
|
-
) {
|
|
13
|
+
export function usePrettier({ code, setCode, showToast, rulerWidth }: UsePrettierProps) {
|
|
16
14
|
const prettifyInProgressRef = useRef(false);
|
|
17
15
|
|
|
18
16
|
const handlePrettify = useCallback(async () => {
|
|
@@ -1,15 +1,6 @@
|
|
|
1
1
|
import { useCallback, useEffect, useState } from "react";
|
|
2
2
|
|
|
3
|
-
export const RULER_WIDTH_OPTIONS = [
|
|
4
|
-
60,
|
|
5
|
-
80,
|
|
6
|
-
100,
|
|
7
|
-
120,
|
|
8
|
-
140,
|
|
9
|
-
160,
|
|
10
|
-
180,
|
|
11
|
-
200,
|
|
12
|
-
] as const;
|
|
3
|
+
export const RULER_WIDTH_OPTIONS = [60, 80, 100, 120, 140, 160, 180, 200] as const;
|
|
13
4
|
export type RulerWidth = (typeof RULER_WIDTH_OPTIONS)[number];
|
|
14
5
|
|
|
15
6
|
function isValidRulerWidth(value: number): value is RulerWidth {
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { useCallback, useEffect, useState } from "react";
|
|
2
2
|
|
|
3
3
|
export function useShowSemanticWarnings(defaultValue: boolean = true) {
|
|
4
|
-
const [showSemanticWarnings, setShowSemanticWarningsInternal] = useState<
|
|
5
|
-
boolean
|
|
6
|
-
>(() => {
|
|
4
|
+
const [showSemanticWarnings, setShowSemanticWarningsInternal] = useState<boolean>(() => {
|
|
7
5
|
const stored = localStorage.getItem("showSemanticWarnings");
|
|
8
6
|
if (stored !== null) {
|
|
9
7
|
return stored === "true";
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import { useCallback, useEffect, useState } from "react";
|
|
2
2
|
|
|
3
3
|
export function useShowSemanticErrors(defaultValue: boolean = true) {
|
|
4
|
-
const [showSemanticErrors, setShowSemanticErrorsInternal] = useState<boolean>(
|
|
5
|
-
()
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
},
|
|
12
|
-
);
|
|
4
|
+
const [showSemanticErrors, setShowSemanticErrorsInternal] = useState<boolean>(() => {
|
|
5
|
+
const stored = localStorage.getItem("showSemanticErrors");
|
|
6
|
+
if (stored !== null) {
|
|
7
|
+
return stored === "true";
|
|
8
|
+
}
|
|
9
|
+
return defaultValue;
|
|
10
|
+
});
|
|
13
11
|
|
|
14
12
|
useEffect(() => {
|
|
15
13
|
localStorage.setItem("showSemanticErrors", String(showSemanticErrors));
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import { useCallback, useEffect, useState } from "react";
|
|
2
2
|
|
|
3
3
|
export function useShowSyntaxErrors(defaultValue: boolean = true) {
|
|
4
|
-
const [showSyntaxErrors, setShowSyntaxErrorsInternal] = useState<boolean>(
|
|
5
|
-
()
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
},
|
|
12
|
-
);
|
|
4
|
+
const [showSyntaxErrors, setShowSyntaxErrorsInternal] = useState<boolean>(() => {
|
|
5
|
+
const stored = localStorage.getItem("showSyntaxErrors");
|
|
6
|
+
if (stored !== null) {
|
|
7
|
+
return stored === "true";
|
|
8
|
+
}
|
|
9
|
+
return defaultValue;
|
|
10
|
+
});
|
|
13
11
|
|
|
14
12
|
useEffect(() => {
|
|
15
13
|
localStorage.setItem("showSyntaxErrors", String(showSyntaxErrors));
|
package/src/hooks/useToast.ts
CHANGED
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
import { useCallback, useEffect, useState } from "react";
|
|
2
2
|
|
|
3
3
|
export type ToastType = "success" | "warning" | "error";
|
|
4
|
-
export type ShowToastFunction = (
|
|
5
|
-
message: string,
|
|
6
|
-
type?: ToastType,
|
|
7
|
-
duration?: number,
|
|
8
|
-
) => void;
|
|
4
|
+
export type ShowToastFunction = (message: string, type?: ToastType, duration?: number) => void;
|
|
9
5
|
|
|
10
6
|
interface ToastState {
|
|
11
7
|
message: string;
|