@mpeggroup/mpeg-sdl-editor 1.4.2 → 1.4.4

package/src/hooks/useAutoDisplayCompletions.ts

@@ -1,9 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 
 export function useAutoDisplayCompletions(defaultValue: boolean = true) {
-  const [autoDisplayCompletions, setAutoDisplayCompletionsInternal] = useState<
-    boolean
-  >(() => {
+  const [autoDisplayCompletions, setAutoDisplayCompletionsInternal] = useState<boolean>(() => {
     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) => {

package/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);

package/src/hooks/useFileOperations.ts

@@ -9,9 +9,7 @@ interface UseFileOperationsProps {
   editorRef: React.RefObject<EditorRef | null>;
 }
 
-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) {

package/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;
     }
 

package/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 () => {

package/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 {

package/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<boolean>(() => {
     const stored = localStorage.getItem("showSemanticWarnings");
     if (stored !== null) {
       return stored === "true";

package/src/hooks/useShowSymanticErrors.ts

@@ -1,15 +1,13 @@
 import { useCallback, useEffect, useState } from "react";
 
 export function useShowSemanticErrors(defaultValue: boolean = true) {
-  const [showSemanticErrors, setShowSemanticErrorsInternal] = useState<boolean>(
-    () => {
-      const stored = localStorage.getItem("showSemanticErrors");
-      if (stored !== null) {
-        return stored === "true";
-      }
-      return defaultValue;
-    },
-  );
+  const [showSemanticErrors, setShowSemanticErrorsInternal] = useState<boolean>(() => {
+    const stored = localStorage.getItem("showSemanticErrors");
+    if (stored !== null) {
+      return stored === "true";
+    }
+    return defaultValue;
+  });
 
   useEffect(() => {
     localStorage.setItem("showSemanticErrors", String(showSemanticErrors));

package/src/hooks/useShowSyntaxErrors.ts

@@ -1,15 +1,13 @@
 import { useCallback, useEffect, useState } from "react";
 
 export function useShowSyntaxErrors(defaultValue: boolean = true) {
-  const [showSyntaxErrors, setShowSyntaxErrorsInternal] = useState<boolean>(
-    () => {
-      const stored = localStorage.getItem("showSyntaxErrors");
-      if (stored !== null) {
-        return stored === "true";
-      }
-      return defaultValue;
-    },
-  );
+  const [showSyntaxErrors, setShowSyntaxErrorsInternal] = useState<boolean>(() => {
+    const stored = localStorage.getItem("showSyntaxErrors");
+    if (stored !== null) {
+      return stored === "true";
+    }
+    return defaultValue;
+  });
 
   useEffect(() => {
     localStorage.setItem("showSyntaxErrors", String(showSyntaxErrors));

package/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;

package/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;

package/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 {

package/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"],
   },

package/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);
   });
 });

package/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"]
 }