Lines: {lineCount}
Characters: {characterCount}
- {enableLinting && showSyntaxErrors && (
- Syntax Errors: {syntaxErrorCount}
- )}
- {enableLinting && showSemanticErrors && (
- Semantic Errors: {semanticErrorCount}
- )}
+ {enableLinting && showSyntaxErrors && Syntax Errors: {syntaxErrorCount}}
+ {enableLinting && showSemanticErrors && Semantic Errors: {semanticErrorCount}}
{enableLinting && showSemanticWarnings && (
Semantic Warnings: {semanticWarningCount}
)}
diff --git a/src/components/SubNav.tsx b/src/components/SubNav.tsx
index af22882..3a01f86 100644
--- a/src/components/SubNav.tsx
+++ b/src/components/SubNav.tsx
@@ -7,12 +7,7 @@ interface SubNavProps {
onPrettify: () => void;
}
-export function SubNav({
- theme,
- onCollapseAll,
- onExpandAll,
- onPrettify,
-}: SubNavProps) {
+export function SubNav({ theme, onCollapseAll, onExpandAll, onPrettify }: SubNavProps) {
return (
(() => {
+ const [autoDisplayCompletions, setAutoDisplayCompletionsInternal] = useState(() => {
const stored = localStorage.getItem("autoDisplayCompletions");
if (stored !== null) {
return stored === "true";
@@ -12,10 +10,7 @@ export function useAutoDisplayCompletions(defaultValue: boolean = true) {
});
useEffect(() => {
- localStorage.setItem(
- "autoDisplayCompletions",
- String(autoDisplayCompletions),
- );
+ localStorage.setItem("autoDisplayCompletions", String(autoDisplayCompletions));
}, [autoDisplayCompletions]);
const setAutoDisplayCompletions = useCallback((value: boolean) => {
diff --git a/src/hooks/useDragResize.ts b/src/hooks/useDragResize.ts
index f7eb481..32b678b 100644
--- a/src/hooks/useDragResize.ts
+++ b/src/hooks/useDragResize.ts
@@ -19,63 +19,69 @@ export function useDragResize({
const [dragStartX, setDragStartX] = useState(0);
const [dragStartPercentage, setDragStartPercentage] = useState(0);
- const handleMouseDown = useCallback((e: React.MouseEvent) => {
- if (!isSettingsShown) {
- return;
- }
-
- e.preventDefault();
-
- const container = containerRef.current;
-
- if (!container) {
- return;
- }
-
- const containerRect = container.getBoundingClientRect();
- const mouseX = e.clientX - containerRect.left;
- const currentPercentage = (mouseX / containerRect.width) * 100;
-
- setDragStartX(e.clientX);
- setDragStartPercentage(currentPercentage);
- setIsDragging(true);
- }, [isSettingsShown, containerRef]);
-
- const handleMouseMove = useCallback((e: MouseEvent) => {
- if (!isDragging || !containerRef.current || !isSettingsShown) {
- return;
- }
-
- const container = containerRef.current;
- const containerRect = container.getBoundingClientRect();
- const containerWidth = containerRect.width;
-
- // Calculate the delta from where the drag started
- const deltaX = e.clientX - dragStartX;
- const deltaPercentage = (deltaX / containerWidth) * 100;
-
- // Calculate new percentage based on drag start position + delta
- let newPercentage = dragStartPercentage + deltaPercentage;
-
- // Apply minimum width constraints
- const minLeftPercentage = (minLeftWidth / containerWidth) * 100;
- const minRightPercentage = (minRightWidth / containerWidth) * 100;
-
- // Clamp the percentage to valid bounds
- newPercentage = Math.max(minLeftPercentage, newPercentage);
- newPercentage = Math.min(100 - minRightPercentage, newPercentage);
-
- onSplitPercentageChange(newPercentage);
- }, [
- isDragging,
- dragStartX,
- dragStartPercentage,
- minLeftWidth,
- minRightWidth,
- isSettingsShown,
- onSplitPercentageChange,
- containerRef,
- ]);
+ const handleMouseDown = useCallback(
+ (e: React.MouseEvent) => {
+ if (!isSettingsShown) {
+ return;
+ }
+
+ e.preventDefault();
+
+ const container = containerRef.current;
+
+ if (!container) {
+ return;
+ }
+
+ const containerRect = container.getBoundingClientRect();
+ const mouseX = e.clientX - containerRect.left;
+ const currentPercentage = (mouseX / containerRect.width) * 100;
+
+ setDragStartX(e.clientX);
+ setDragStartPercentage(currentPercentage);
+ setIsDragging(true);
+ },
+ [isSettingsShown, containerRef],
+ );
+
+ const handleMouseMove = useCallback(
+ (e: MouseEvent) => {
+ if (!isDragging || !containerRef.current || !isSettingsShown) {
+ return;
+ }
+
+ const container = containerRef.current;
+ const containerRect = container.getBoundingClientRect();
+ const containerWidth = containerRect.width;
+
+ // Calculate the delta from where the drag started
+ const deltaX = e.clientX - dragStartX;
+ const deltaPercentage = (deltaX / containerWidth) * 100;
+
+ // Calculate new percentage based on drag start position + delta
+ let newPercentage = dragStartPercentage + deltaPercentage;
+
+ // Apply minimum width constraints
+ const minLeftPercentage = (minLeftWidth / containerWidth) * 100;
+ const minRightPercentage = (minRightWidth / containerWidth) * 100;
+
+ // Clamp the percentage to valid bounds
+ newPercentage = Math.max(minLeftPercentage, newPercentage);
+ newPercentage = Math.min(100 - minRightPercentage, newPercentage);
+
+ onSplitPercentageChange(newPercentage);
+ },
+ [
+ isDragging,
+ dragStartX,
+ dragStartPercentage,
+ minLeftWidth,
+ minRightWidth,
+ isSettingsShown,
+ onSplitPercentageChange,
+ containerRef,
+ ],
+ );
const handleMouseUp = useCallback(() => {
setIsDragging(false);
diff --git a/src/hooks/useFileOperations.ts b/src/hooks/useFileOperations.ts
index 48424c7..b315755 100644
--- a/src/hooks/useFileOperations.ts
+++ b/src/hooks/useFileOperations.ts
@@ -9,9 +9,7 @@ interface UseFileOperationsProps {
editorRef: React.RefObject;
}
-export function useFileOperations(
- { code, setCode, showToast, editorRef }: UseFileOperationsProps,
-) {
+export function useFileOperations({ code, setCode, showToast, editorRef }: UseFileOperationsProps) {
const handleSave = useCallback(async () => {
try {
if (globalThis.window.showSaveFilePicker) {
diff --git a/src/hooks/useMobileDetection.ts b/src/hooks/useMobileDetection.ts
index 95b95bc..af7e907 100644
--- a/src/hooks/useMobileDetection.ts
+++ b/src/hooks/useMobileDetection.ts
@@ -3,9 +3,7 @@ import { useEffect, useState } from "react";
export function useMobileDetection(breakpoint: number = 768) {
const [isMobile, setIsMobile] = useState(() => {
// Only check on client-side, return false for SSR
- if (
- typeof globalThis !== "undefined" && globalThis.innerWidth !== undefined
- ) {
+ if (typeof globalThis !== "undefined" && globalThis.innerWidth !== undefined) {
return globalThis.innerWidth < breakpoint;
}
return false;
@@ -13,9 +11,7 @@ export function useMobileDetection(breakpoint: number = 768) {
useEffect(() => {
// Only run on client-side
- if (
- typeof globalThis === "undefined" || globalThis.innerWidth === undefined
- ) {
+ if (typeof globalThis === "undefined" || globalThis.innerWidth === undefined) {
return;
}
diff --git a/src/hooks/usePrettier.ts b/src/hooks/usePrettier.ts
index 32cad66..c6e2f54 100644
--- a/src/hooks/usePrettier.ts
+++ b/src/hooks/usePrettier.ts
@@ -10,9 +10,7 @@ interface UsePrettierProps {
rulerWidth: number;
}
-export function usePrettier(
- { code, setCode, showToast, rulerWidth }: UsePrettierProps,
-) {
+export function usePrettier({ code, setCode, showToast, rulerWidth }: UsePrettierProps) {
const prettifyInProgressRef = useRef(false);
const handlePrettify = useCallback(async () => {
diff --git a/src/hooks/useRulerWidth.ts b/src/hooks/useRulerWidth.ts
index 741f06c..5d72abf 100644
--- a/src/hooks/useRulerWidth.ts
+++ b/src/hooks/useRulerWidth.ts
@@ -1,15 +1,6 @@
import { useCallback, useEffect, useState } from "react";
-export const RULER_WIDTH_OPTIONS = [
- 60,
- 80,
- 100,
- 120,
- 140,
- 160,
- 180,
- 200,
-] as const;
+export const RULER_WIDTH_OPTIONS = [60, 80, 100, 120, 140, 160, 180, 200] as const;
export type RulerWidth = (typeof RULER_WIDTH_OPTIONS)[number];
function isValidRulerWidth(value: number): value is RulerWidth {
diff --git a/src/hooks/useShowSemanticWarnings.ts b/src/hooks/useShowSemanticWarnings.ts
index c8c8c9f..b329b4d 100644
--- a/src/hooks/useShowSemanticWarnings.ts
+++ b/src/hooks/useShowSemanticWarnings.ts
@@ -1,9 +1,7 @@
import { useCallback, useEffect, useState } from "react";
export function useShowSemanticWarnings(defaultValue: boolean = true) {
- const [showSemanticWarnings, setShowSemanticWarningsInternal] = useState<
- boolean
- >(() => {
+ const [showSemanticWarnings, setShowSemanticWarningsInternal] = useState(() => {
const stored = localStorage.getItem("showSemanticWarnings");
if (stored !== null) {
return stored === "true";
diff --git a/src/hooks/useShowSymanticErrors.ts b/src/hooks/useShowSymanticErrors.ts
index 5939eb8..23bb808 100644
--- a/src/hooks/useShowSymanticErrors.ts
+++ b/src/hooks/useShowSymanticErrors.ts
@@ -1,15 +1,13 @@
import { useCallback, useEffect, useState } from "react";
export function useShowSemanticErrors(defaultValue: boolean = true) {
- const [showSemanticErrors, setShowSemanticErrorsInternal] = useState(
- () => {
- const stored = localStorage.getItem("showSemanticErrors");
- if (stored !== null) {
- return stored === "true";
- }
- return defaultValue;
- },
- );
+ const [showSemanticErrors, setShowSemanticErrorsInternal] = useState(() => {
+ const stored = localStorage.getItem("showSemanticErrors");
+ if (stored !== null) {
+ return stored === "true";
+ }
+ return defaultValue;
+ });
useEffect(() => {
localStorage.setItem("showSemanticErrors", String(showSemanticErrors));
diff --git a/src/hooks/useShowSyntaxErrors.ts b/src/hooks/useShowSyntaxErrors.ts
index ab7b433..7575234 100644
--- a/src/hooks/useShowSyntaxErrors.ts
+++ b/src/hooks/useShowSyntaxErrors.ts
@@ -1,15 +1,13 @@
import { useCallback, useEffect, useState } from "react";
export function useShowSyntaxErrors(defaultValue: boolean = true) {
- const [showSyntaxErrors, setShowSyntaxErrorsInternal] = useState(
- () => {
- const stored = localStorage.getItem("showSyntaxErrors");
- if (stored !== null) {
- return stored === "true";
- }
- return defaultValue;
- },
- );
+ const [showSyntaxErrors, setShowSyntaxErrorsInternal] = useState(() => {
+ const stored = localStorage.getItem("showSyntaxErrors");
+ if (stored !== null) {
+ return stored === "true";
+ }
+ return defaultValue;
+ });
useEffect(() => {
localStorage.setItem("showSyntaxErrors", String(showSyntaxErrors));
diff --git a/src/hooks/useToast.ts b/src/hooks/useToast.ts
index b6be5f3..4f154b8 100644
--- a/src/hooks/useToast.ts
+++ b/src/hooks/useToast.ts
@@ -1,11 +1,7 @@
import { useCallback, useEffect, useState } from "react";
export type ToastType = "success" | "warning" | "error";
-export type ShowToastFunction = (
- message: string,
- type?: ToastType,
- duration?: number,
-) => void;
+export type ShowToastFunction = (message: string, type?: ToastType, duration?: number) => void;
interface ToastState {
message: string;
diff --git a/src/sdl/sdlComplete.ts b/src/sdl/sdlComplete.ts
index fc0798a..a40f9c2 100644
--- a/src/sdl/sdlComplete.ts
+++ b/src/sdl/sdlComplete.ts
@@ -1,14 +1,8 @@
-import {
- CompletionContext,
- type CompletionResult,
-} from "@codemirror/autocomplete";
+import { CompletionContext, type CompletionResult } from "@codemirror/autocomplete";
import type { SyntaxNode } from "@lezer/common";
import { syntaxTree } from "@codemirror/language";
import { foldNodeProp } from "@codemirror/language";
-import {
- getPotentialSyntacticTokens,
- TokenTypeId,
-} from "@mpeggroup/mpeg-sdl-parser";
+import { getPotentialSyntacticTokens, TokenTypeId } from "@mpeggroup/mpeg-sdl-parser";
function isCommentCompletion(lastNode: SyntaxNode): boolean {
return lastNode.type.id === TokenTypeId.Comment;
@@ -37,10 +31,7 @@ function isBlockScopeCompletion(lastNode: SyntaxNode): boolean {
return parentNode.type.prop(foldNodeProp) !== undefined;
}
-function getCompletionResult(
- completionOptions: string[],
- from: number,
-): CompletionResult {
+function getCompletionResult(completionOptions: string[], from: number): CompletionResult {
return {
from,
options: completionOptions.map((label) => ({ label })),
@@ -73,11 +64,8 @@ function sdlComplete(context: CompletionContext): CompletionResult | null {
const completions = getPotentialSyntacticTokens(lastNode.cursor());
- if (completions && (completions.length > 0)) {
- return getCompletionResult(
- completions,
- lastTag ? lastNode.from + lastTag.index : context.pos,
- );
+ if (completions && completions.length > 0) {
+ return getCompletionResult(completions, lastTag ? lastNode.from + lastTag.index : context.pos);
}
return null;
diff --git a/src/sdl/sdlLinter.ts b/src/sdl/sdlLinter.ts
index 9359f1b..ac7861a 100644
--- a/src/sdl/sdlLinter.ts
+++ b/src/sdl/sdlLinter.ts
@@ -1,10 +1,5 @@
import { syntaxTree } from "@codemirror/language";
-import {
- type Diagnostic,
- forEachDiagnostic,
- linter,
- setDiagnostics,
-} from "@codemirror/lint";
+import { type Diagnostic, forEachDiagnostic, linter, setDiagnostics } from "@codemirror/lint";
import { type Extension } from "@codemirror/state";
import { EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view";
import {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 12deb12..1a35171 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,13 +1,9 @@
const tailwindConfig: import("tailwindcss").Config & { daisyui?: any } = {
- content: [
- "./src/**/*.{html,js,jsx,ts,tsx}",
- ],
+ content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: {
extend: {},
},
- plugins: [
- require("daisyui"),
- ],
+ plugins: [require("daisyui")],
daisyui: {
themes: ["light", "dark"],
},
diff --git a/tests/Editor_test.tsx b/tests/Editor_test.tsx
index 5af62d4..0b1f6a4 100644
--- a/tests/Editor_test.tsx
+++ b/tests/Editor_test.tsx
@@ -21,9 +21,7 @@ describe("Editor component", () => {
const textboxes = getAllByRole("textbox");
// Check that at least one textbox contains the expected content
- const found = textboxes.some(
- (el) => el.textContent && el.textContent.includes("int a;"),
- );
+ const found = textboxes.some((el) => el.textContent && el.textContent.includes("int a;"));
expect(found).toBe(true);
});
});
diff --git a/tsconfig.json b/tsconfig.json
index 238655f..67fad3e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,10 @@
// Some stricter flags (disabled by default)
"noUnusedLocals": false,
"noUnusedParameters": false,
- "noPropertyAccessFromIndexSignature": false
- }
+ "noPropertyAccessFromIndexSignature": false,
+
+ // Type definitions
+ "types": ["bun", "node"]
+ },
+ "exclude": ["dist"]
}