@mpeggroup/mpeg-sdl-editor 1.3.1

package/src/hooks/useRulerWidth.ts

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useState } from "react";
+
+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 {
+  return RULER_WIDTH_OPTIONS.includes(value as RulerWidth);
+}
+
+export function useRulerWidth(defaultWidth: RulerWidth = 80) {
+  const [rulerWidth, setRulerWidthInternal] = useState<RulerWidth>(() => {
+    const stored = localStorage.getItem("rulerWidth");
+    if (stored) {
+      const parsed = Number(stored);
+      if (isValidRulerWidth(parsed)) {
+        return parsed;
+      }
+    }
+    return defaultWidth;
+  });
+
+  useEffect(() => {
+    localStorage.setItem("rulerWidth", String(rulerWidth));
+  }, [rulerWidth]);
+
+  const setRulerWidth = useCallback((width: number) => {
+    if (isValidRulerWidth(width)) {
+      setRulerWidthInternal(width);
+    }
+  }, []);
+
+  return { rulerWidth, setRulerWidth };
+}

package/src/hooks/useShowSemanticWarnings.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useState } from "react";
+
+export function useShowSemanticWarnings(defaultValue: boolean = true) {
+  const [showSemanticWarnings, setShowSemanticWarningsInternal] = useState<
+    boolean
+  >(() => {
+    const stored = localStorage.getItem("showSemanticWarnings");
+    if (stored !== null) {
+      return stored === "true";
+    }
+    return defaultValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem("showSemanticWarnings", String(showSemanticWarnings));
+  }, [showSemanticWarnings]);
+
+  const setShowSemanticWarnings = useCallback((value: boolean) => {
+    setShowSemanticWarningsInternal(value);
+  }, []);
+
+  return { showSemanticWarnings, setShowSemanticWarnings };
+}

package/src/hooks/useShowSymanticErrors.ts

@@ -0,0 +1,23 @@
+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;
+    },
+  );
+
+  useEffect(() => {
+    localStorage.setItem("showSemanticErrors", String(showSemanticErrors));
+  }, [showSemanticErrors]);
+
+  const setShowSemanticErrors = useCallback((value: boolean) => {
+    setShowSemanticErrorsInternal(value);
+  }, []);
+
+  return { showSemanticErrors, setShowSemanticErrors };
+}

package/src/hooks/useShowSyntaxErrors.ts

@@ -0,0 +1,23 @@
+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;
+    },
+  );
+
+  useEffect(() => {
+    localStorage.setItem("showSyntaxErrors", String(showSyntaxErrors));
+  }, [showSyntaxErrors]);
+
+  const setShowSyntaxErrors = useCallback((value: boolean) => {
+    setShowSyntaxErrorsInternal(value);
+  }, []);
+
+  return { showSyntaxErrors, setShowSyntaxErrors };
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export type Theme = "light" | "dark";
+
+export function useTheme(defaultTheme: Theme = "light") {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const storedTheme = localStorage.getItem("theme") as Theme | null;
+    return storedTheme || defaultTheme;
+  });
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+  };
+
+  return { theme, toggleTheme };
+}

package/src/hooks/useToast.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useState } from "react";
+
+export type ToastType = "success" | "warning" | "error";
+export type ShowToastFunction = (
+  message: string,
+  type?: ToastType,
+  duration?: number,
+) => void;
+
+interface ToastState {
+  message: string;
+  type: ToastType;
+}
+
+export function useToast(): [ToastState | null, ShowToastFunction] {
+  const [toastState, setToastState] = useState<ToastState | null>(null);
+  const [toastDuration, setToastDuration] = useState<number>(2000);
+
+  useEffect(() => {
+    if (toastState) {
+      const timer = setTimeout(() => {
+        setToastState(null);
+      }, toastDuration);
+      return () => clearTimeout(timer);
+    }
+  }, [toastState, toastDuration]);
+
+  const showToast = useCallback(
+    (message: string, type: ToastType = "success", duration: number = 2000) => {
+      setToastState({ message, type });
+      setToastDuration(duration);
+    },
+    [],
+  );
+
+  return [toastState, showToast];
+}

package/src/logo/getLogoSvg.ts

@@ -0,0 +1,5 @@
+import mpegSvg from "../assets/mpeg.svg" with { type: "text" };
+
+export function getLogoSvg() {
+  return mpegSvg;
+}

package/src/logo/svg.module.d.ts

@@ -0,0 +1,5 @@
+// This file declares types for SVG imports
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

package/src/main.tsx

@@ -0,0 +1,13 @@
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+
+function start() {
+  const root = createRoot(document.getElementById("root")!);
+  root.render(<App />);
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", start);
+} else {
+  start();
+}

package/src/sdl/sdlComplete.ts

@@ -0,0 +1,86 @@
+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";
+
+function isCommentCompletion(lastNode: SyntaxNode): boolean {
+  return lastNode.type.id === TokenTypeId.Comment;
+}
+
+function isGlobalScopeCompletion(lastNode: SyntaxNode): boolean {
+  // see if the last node is a specification
+  if (lastNode.type.id === TokenTypeId.Specification) {
+    return true;
+  }
+
+  // see if the parent of the last node is a specification
+  const parentNode = lastNode.parent;
+
+  return parentNode?.type.id === TokenTypeId.Specification;
+}
+
+function isBlockScopeCompletion(lastNode: SyntaxNode): boolean {
+  // see if the parent of the last node is a block scoped node
+  const parentNode = lastNode.parent;
+
+  if (!parentNode) {
+    return false;
+  }
+
+  return parentNode.type.prop(foldNodeProp) !== undefined;
+}
+
+function getCompletionResult(
+  completionOptions: string[],
+  from: number,
+): CompletionResult {
+  return {
+    from,
+    options: completionOptions.map((label) => ({ label })),
+    validFor: /^\w*$/,
+  };
+}
+
+function sdlComplete(context: CompletionContext): CompletionResult | null {
+  const parseTree = syntaxTree(context.state);
+  const lastNode = parseTree.resolveInner(context.pos, -1);
+
+  // Don't provide completions within a comment
+  if (isCommentCompletion(lastNode)) {
+    console.error("No completions in comments");
+    return null;
+  }
+
+  // only provide completions at the global scope if completion was explicitly requested
+  if (isGlobalScopeCompletion(lastNode) && !context.explicit) {
+    return null;
+  }
+
+  // only provide completions at the block scope if completion was explicitly requested
+  if (isBlockScopeCompletion(lastNode) && !context.explicit) {
+    return null;
+  }
+
+  const lastText = context.state.sliceDoc(lastNode.from, context.pos);
+  const lastTag = /^\w*$/.exec(lastText);
+
+  const completions = getPotentialSyntacticTokens(lastNode.cursor());
+
+  if (completions && (completions.length > 0)) {
+    return getCompletionResult(
+      completions,
+      lastTag ? lastNode.from + lastTag.index : context.pos,
+    );
+  }
+
+  return null;
+}
+
+export { sdlComplete };

package/src/sdl/sdlLanguage.ts

@@ -0,0 +1,18 @@
+import { createLenientSdlParser } from "@mpeggroup/mpeg-sdl-parser";
+import { LanguageSupport, LRLanguage } from "@codemirror/language";
+import { sdlComplete } from "./sdlComplete.ts";
+
+export const sdlLanguage = LRLanguage.define({
+  parser: createLenientSdlParser(),
+  languageData: {
+    commentTokens: { line: "//" },
+  },
+});
+
+export const sdlCompletion = sdlLanguage.data.of({
+  autocomplete: sdlComplete,
+});
+
+export function sdl(): LanguageSupport {
+  return new LanguageSupport(sdlLanguage, [sdlCompletion]);
+}

package/src/sdl/sdlLinter.ts

@@ -0,0 +1,157 @@
+import { syntaxTree } from "@codemirror/language";
+import {
+  type Diagnostic,
+  forEachDiagnostic,
+  linter,
+  setDiagnostics,
+} from "@codemirror/lint";
+import { type Extension } from "@codemirror/state";
+import { EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view";
+import {
+  buildAst,
+  collateSyntaxErrors,
+  createLenientSdlAnalyser,
+  SdlStringInput,
+  SemanticError,
+  SemanticWarning,
+  Specification,
+  SyntaxError,
+} from "@mpeggroup/mpeg-sdl-parser";
+
+interface SdlLinterOptions {
+  onSyntaxErrorChange: (syntaxErrors: SyntaxError[]) => void;
+  onSemanticErrorChange: (semanticErrors: SemanticError[]) => void;
+  onSemanticWarningChange: (semanticWarnings: SemanticWarning[]) => void;
+  showSyntaxErrors: boolean;
+  showSemanticErrors: boolean;
+  showSemanticWarnings: boolean;
+}
+
+const DEBOUNCE_MS = 100;
+
+export function sdlLinter(options: SdlLinterOptions): Extension {
+  // Dispatch clear then set as two separate transactions so CodeMirror destroys
+  // and recreates the widget DOM node rather than reusing/moving it. Safari's
+  // contenteditable engine silently ignores in-place widget moves, so without
+  // the clear the indicator never visually repositions.
+  function dispatchDiagnostics(view: EditorView, diagnostics: Diagnostic[]) {
+    view.dispatch(setDiagnostics(view.state, []));
+    view.dispatch(setDiagnostics(view.state, diagnostics));
+  }
+
+  function runLint(view: EditorView) {
+    const currentDoc = view.state.doc;
+    try {
+      const diagnostics: Diagnostic[] = [];
+      const sdlParseTree = syntaxTree(view.state);
+      const sdlStringInput = new SdlStringInput(view.state.doc.toString());
+      const syntaxErrors = collateSyntaxErrors(sdlParseTree, sdlStringInput);
+      const specification = buildAst(sdlParseTree, sdlStringInput, true);
+      const analyser = createLenientSdlAnalyser();
+      const analysisResult = analyser.analyse(specification as Specification);
+
+      if (options.showSyntaxErrors) {
+        for (const error of syntaxErrors) {
+          diagnostics.push({
+            from: error.location!.position,
+            to: error.location!.position,
+            severity: "error",
+            message: error.errorMessage,
+          });
+        }
+      }
+      if (options.showSemanticErrors) {
+        for (const error of analysisResult.semanticErrors) {
+          diagnostics.push({
+            from: error.location!.position,
+            to: error.location!.position,
+            severity: "error",
+            message: error.errorMessage,
+          });
+        }
+      }
+      if (options.showSemanticWarnings) {
+        for (const warning of analysisResult.semanticWarnings) {
+          diagnostics.push({
+            from: warning.location!.position,
+            to: warning.location!.position,
+            severity: "warning",
+            message: warning.errorMessage,
+          });
+        }
+      }
+
+      if (options.onSyntaxErrorChange) {
+        options.onSyntaxErrorChange(syntaxErrors);
+      }
+      if (options.onSemanticErrorChange) {
+        options.onSemanticErrorChange(analysisResult.semanticErrors);
+      }
+      if (options.onSemanticWarningChange) {
+        options.onSemanticWarningChange(analysisResult.semanticWarnings);
+      }
+
+      if (view.state.doc === currentDoc) {
+        dispatchDiagnostics(view, diagnostics);
+      }
+    } catch {
+      if (view.state.doc === currentDoc) {
+        view.dispatch(setDiagnostics(view.state, []));
+      }
+    }
+  }
+
+  const rafLintPlugin = ViewPlugin.fromClass(
+    class {
+      private lastChangeAt = 0;
+      private rafId = 0;
+
+      constructor(private readonly view: EditorView) {
+        requestAnimationFrame(() => runLint(this.view));
+      }
+
+      update(update: ViewUpdate) {
+        if (!update.docChanged) {
+          return;
+        }
+
+        // Immediately remap existing diagnostics with positive bias so
+        // insertions AT a zero-width marker push it forward right away.
+        const remapped: Diagnostic[] = [];
+        forEachDiagnostic(update.startState, (d, from, to) => {
+          remapped.push({
+            ...d,
+            from: update.changes.mapPos(from, 1),
+            to: update.changes.mapPos(to, 1),
+          });
+        });
+        const snapDoc = update.state.doc;
+        requestAnimationFrame(() => {
+          if (this.view.state.doc === snapDoc) {
+            dispatchDiagnostics(this.view, remapped);
+          }
+        });
+
+        this.lastChangeAt = Date.now();
+        cancelAnimationFrame(this.rafId);
+        this.rafId = requestAnimationFrame(() => this.tick());
+      }
+
+      private tick() {
+        if (Date.now() - this.lastChangeAt >= DEBOUNCE_MS) {
+          runLint(this.view);
+        } else {
+          this.rafId = requestAnimationFrame(() => this.tick());
+        }
+      }
+
+      destroy() {
+        cancelAnimationFrame(this.rafId);
+      }
+    },
+  );
+
+  // linter(null) registers the diagnostic state field, decorations and theme
+  // without attaching a lint source — we drive everything from rafLintPlugin.
+  return [linter(null), rafLintPlugin];
+}

package/tailwind.config.ts

@@ -0,0 +1,16 @@
+const tailwindConfig: import("tailwindcss").Config & { daisyui?: any } = {
+  content: [
+    "./src/**/*.{html,js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require("daisyui"),
+  ],
+  daisyui: {
+    themes: ["light", "dark"],
+  },
+};
+
+export default tailwindConfig;

package/tests/Editor_test.tsx

@@ -0,0 +1,29 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "@testing-library/react";
+import { Editor } from "../src/components/Editor.tsx";
+
+describe("Editor component", () => {
+  test("renders with initial value", () => {
+    const { getAllByRole } = render(
+      <Editor
+        code="int a;"
+        onCodeChange={() => {}}
+        onCursorChange={() => {}}
+        onSyntaxErrorChange={() => {}}
+        onSemanticErrorChange={() => {}}
+        onSemanticWarningChange={() => {}}
+        theme="light"
+        rulerWidth={80}
+        autoDisplayCompletions
+        enableLinting
+      />,
+    );
+    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;"),
+    );
+    expect(found).toBe(true);
+  });
+});

package/tests/happydom.ts

@@ -0,0 +1,3 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+
+GlobalRegistrator.register();

package/tests/sdlLanguage_test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, test } from "bun:test";
+import { sdlLanguage } from "../src/sdl/sdlLanguage.ts";
+
+describe("sdlLanguage", () => {
+  test("parses valid SDL without error", () => {
+    const parser = sdlLanguage.parser;
+    const input = "computed const int a = 1;";
+    const tree = parser.parse(input);
+
+    // The root node should not be an error
+    expect(tree.type.isError).toBe(false);
+
+    // There should be no error nodes in the tree
+    let hasError = false;
+    tree.iterate({
+      enter: (type) => {
+        if (type.type.isError) hasError = true;
+      },
+    });
+
+    expect(hasError).toBe(false);
+  });
+
+  test("parses invalid SDL with error node", () => {
+    const parser = sdlLanguage.parser;
+    const input = "invalid sdl $";
+    const tree = parser.parse(input);
+
+    // The tree should contain an error node
+    let hasError = false;
+    tree.iterate({
+      enter: (type) => {
+        if (type.type.isError) hasError = true;
+      },
+    });
+
+    expect(hasError).toBe(true);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}