@mpeggroup/mpeg-sdl-editor 1.3.1

package/src/App.tsx

@@ -0,0 +1,266 @@
+import {
+  SemanticError,
+  SemanticWarning,
+  SyntaxError,
+} from "@mpeggroup/mpeg-sdl-parser";
+import { Editor } from "./components/Editor.tsx";
+import type { EditorRef } from "./components/Editor.tsx";
+import { Navbar } from "./components/Navbar.tsx";
+import { SubNav } from "./components/SubNav.tsx";
+import { Settings } from "./components/Settings.tsx";
+import { StatusBar } from "./components/StatusBar.tsx";
+import { ResizableLayout } from "./components/ResizableLayout.tsx";
+import { useToast } from "./hooks/useToast.ts";
+import { useFileOperations } from "./hooks/useFileOperations.ts";
+import { useTheme } from "./hooks/useTheme.ts";
+import { usePrettier } from "./hooks/usePrettier.ts";
+import { useRulerWidth } from "./hooks/useRulerWidth.ts";
+import { useAutoDisplayCompletions } from "./hooks/useAutoDisplayCompletions.ts";
+import { useEnableLinting } from "./hooks/useEnableLinting.ts";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useMobileDetection } from "./hooks/useMobileDetection.ts";
+import { useShowSyntaxErrors } from "./hooks/useShowSyntaxErrors.ts";
+import { useShowSemanticErrors } from "./hooks/useShowSymanticErrors.ts";
+import { useShowSemanticWarnings } from "./hooks/useShowSemanticWarnings.ts";
+
+function getInitialCodeFromHash(): string | null {
+  const hash = globalThis.location.hash;
+  if (hash.startsWith("#c=")) {
+    try {
+      return atob(hash.slice(3));
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+
+export function App() {
+  const defaultCode =
+    "// Start typing your SDL here... <Ctrl+Space> for completions\n";
+
+  const [code, setCodeInternal] = useState<string>(
+    () => getInitialCodeFromHash() ?? defaultCode,
+  );
+
+  const setCode = useCallback((newCode: string) => {
+    setCodeInternal(newCode);
+  }, []);
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hashCode = getInitialCodeFromHash();
+      if (hashCode !== null) {
+        setCode(hashCode);
+      }
+    };
+    globalThis.addEventListener("hashchange", handleHashChange);
+    return () => globalThis.removeEventListener("hashchange", handleHashChange);
+  }, []);
+  const [toastState, showToast] = useToast();
+  const { theme, toggleTheme } = useTheme();
+  const isMobile = useMobileDetection();
+  const [isSettingsShown, setSettingsShown] = useState(false);
+  const { rulerWidth, setRulerWidth } = useRulerWidth();
+  const { autoDisplayCompletions, setAutoDisplayCompletions } =
+    useAutoDisplayCompletions();
+  const { enableLinting, setEnableLinting } = useEnableLinting();
+  const { showSyntaxErrors, setShowSyntaxErrors } = useShowSyntaxErrors();
+  const { showSemanticErrors, setShowSemanticErrors } = useShowSemanticErrors();
+  const { showSemanticWarnings, setShowSemanticWarnings } =
+    useShowSemanticWarnings();
+  const [cursorPosition, setCursorPosition] = useState<
+    { line: number; col: number }
+  >({ line: 1, col: 1 });
+  const editorRef = useRef<EditorRef>(null);
+
+  const onCursorChange = useCallback(
+    (position: { line: number; col: number }) => {
+      setCursorPosition((prev) => {
+        // Only update if position actually changed
+        if (prev.line !== position.line || prev.col !== position.col) {
+          return position;
+        }
+        return prev;
+      });
+    },
+    [],
+  );
+  const handleShare = useCallback(async () => {
+    const encoded = btoa(code);
+    const url =
+      `${globalThis.location.origin}${globalThis.location.pathname}#c=${encoded}`;
+    try {
+      await navigator.clipboard.writeText(url);
+      showToast("URL copied!");
+    } catch {
+      showToast("Failed to copy URL", "error");
+    }
+  }, [code, showToast]);
+
+  const {
+    handleSave,
+    handleLoad,
+    handleCopy,
+  } = useFileOperations({
+    code,
+    setCode,
+    showToast,
+    editorRef,
+  });
+
+  const lineCount = useMemo(() => code.split("\n").length, [code]);
+  const characterCount = useMemo(() => code.length, [code]);
+  const [syntaxErrors, setSyntaxErrors] = useState<SyntaxError[]>([]);
+  const [semanticErrors, setSemanticErrors] = useState<SemanticError[]>([]);
+  const [semanticWarnings, setSemanticWarnings] = useState<SemanticWarning[]>(
+    [],
+  );
+
+  const onSyntaxErrorChange = useCallback((newErrors: SyntaxError[]) => {
+    setSyntaxErrors(newErrors);
+  }, []);
+
+  const onSemanticErrorChange = useCallback((newErrors: SemanticError[]) => {
+    setSemanticErrors(newErrors);
+  }, []);
+
+  const onSemanticWarningChange = useCallback(
+    (newErrors: SemanticWarning[]) => {
+      setSemanticWarnings(newErrors);
+    },
+    [],
+  );
+
+  const syntaxErrorCount = useMemo(() => syntaxErrors.length, [
+    syntaxErrors,
+  ]);
+
+  const semanticErrorCount = useMemo(() => semanticErrors.length, [
+    semanticErrors,
+  ]);
+
+  const semanticWarningCount = useMemo(() => semanticWarnings.length, [
+    semanticWarnings,
+  ]);
+
+  const { handlePrettify } = usePrettier({
+    code,
+    setCode,
+    showToast,
+    rulerWidth,
+  });
+
+  const toggleSettings = useCallback(() => {
+    setSettingsShown((prev) => !prev);
+  }, []);
+
+  const handleExpandAll = useCallback(() => {
+    if (editorRef.current) {
+      editorRef.current.expandAll();
+    }
+  }, []);
+
+  const handleCollapseAll = useCallback(() => {
+    if (editorRef.current) {
+      editorRef.current.collapseAll();
+    }
+  }, []);
+
+  return (
+    <div className="flex flex-col h-screen">
+      <Navbar
+        theme={theme}
+        onCopy={handleCopy}
+        onSave={handleSave}
+        onLoad={handleLoad}
+        onShare={handleShare}
+        onToggleSettings={toggleSettings}
+        isSettingsShown={isSettingsShown}
+      />
+      <div className="grow overflow-hidden" data-testid="main-content">
+        <ResizableLayout
+          theme={theme}
+          isSettingsShown={isSettingsShown}
+          isMobile={isMobile}
+          onToggleSettings={toggleSettings}
+        >
+          <div className="flex flex-col h-full">
+            <SubNav
+              theme={theme}
+              onPrettify={handlePrettify}
+              onExpandAll={handleExpandAll}
+              onCollapseAll={handleCollapseAll}
+            />
+            <div className="grow overflow-auto">
+              <Editor
+                ref={editorRef}
+                code={code}
+                onCodeChange={setCode}
+                onCursorChange={onCursorChange}
+                onSyntaxErrorChange={onSyntaxErrorChange}
+                onSemanticErrorChange={onSemanticErrorChange}
+                onSemanticWarningChange={onSemanticWarningChange}
+                theme={theme}
+                rulerWidth={rulerWidth}
+                autoDisplayCompletions={autoDisplayCompletions}
+                enableLinting={enableLinting}
+                showSyntaxErrors={showSyntaxErrors}
+                showSemanticErrors={showSemanticErrors}
+                showSemanticWarnings={showSemanticWarnings}
+              />
+            </div>
+            <StatusBar
+              lineCount={lineCount}
+              characterCount={characterCount}
+              syntaxErrorCount={syntaxErrorCount}
+              semanticErrorCount={semanticErrorCount}
+              semanticWarningCount={semanticWarningCount}
+              cursorPosition={cursorPosition}
+              enableLinting={enableLinting}
+              showSyntaxErrors={showSyntaxErrors}
+              showSemanticErrors={showSemanticErrors}
+              showSemanticWarnings={showSemanticWarnings}
+            />
+          </div>
+
+          <div className="h-full md:p-2 md:pl-0">
+            <Settings
+              theme={theme}
+              onToggleTheme={toggleTheme}
+              rulerWidth={rulerWidth}
+              onRulerWidthChange={setRulerWidth}
+              autoDisplayCompletions={autoDisplayCompletions}
+              onAutoDisplayCompletionsChange={setAutoDisplayCompletions}
+              enableLinting={enableLinting}
+              onEnableLintingChange={setEnableLinting}
+              showSyntaxErrors={showSyntaxErrors}
+              onShowSyntaxErrorsChange={setShowSyntaxErrors}
+              showSemanticErrors={showSemanticErrors}
+              onShowSemanticErrorsChange={setShowSemanticErrors}
+              showSemanticWarnings={showSemanticWarnings}
+              onShowSemanticWarningsChange={setShowSemanticWarnings}
+            />
+          </div>
+        </ResizableLayout>
+      </div>
+      {toastState && (
+        <div className="toast toast-top toast-end mt-14">
+          <div
+            className={`alert ${
+              toastState.type === "success"
+                ? "alert-success"
+                : toastState.type === "warning"
+                ? "alert-warning"
+                : "alert-error"
+            }`}
+          >
+            <span>{toastState.message}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default App;

package/src/assets/mpeg.svg

@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  id="Layer_1"
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1"
+  viewBox="0 0 1800 500"
+>
+  <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  -->
+  <defs>
+    <style>.st0 {
+      fill: #08a6e0;
+    }
+
+    .st1 {
+      fill: #006fa9;
+    }
+
+    .st2 {
+      fill: #0071bb;
+    }
+
+    .st3 {
+      fill: #002a53;
+    }</style>
+  </defs>
+  <path
+    class="st3"
+    d="M421.2,445.7c0,6.2-5,11.2-11.2,11.2s-11.2-5-11.2-11.2,5-11.2,11.2-11.2,11.2,5,11.2,11.2"
+  />
+  <g>
+    <rect class="st2" x="292.5" y="348.4" width="39.2" height="39.2" />
+    <rect class="st1" x="292.5" y="230.9" width="39.2" height="39.2" />
+    <rect class="st2" x="292.5" y="113.4" width="39.2" height="39.2" />
+    <path
+      class="st2"
+      d="M292.5,74.2h39.2v-19.6c0-10.8-8.8-19.6-19.6-19.6s-19.6,8.8-19.6,19.6v19.6Z"
+    />
+    <path
+      class="st2"
+      d="M463.1,348.4h0c10.8,0,19.6-8.8,19.6-19.6v-19.6h-39.2v19.6c0,10.8,8.8,19.6,19.6,19.6"
+    />
+    <rect class="st2" x="443.6" y="191.7" width="39.2" height="39.2" />
+    <path
+      class="st1"
+      d="M443.6,152.6h39.2v-19.6c0-10.8-8.8-19.6-19.6-19.6s-19.6,8.8-19.6,19.6v19.6Z"
+    />
+    <rect class="st2" x="342.8" y="270.1" width="39.2" height="39.2" />
+    <rect class="st2" x="342.8" y="152.6" width="39.2" height="39.2" />
+    <rect class="st2" x="393.2" y="211.3" width="39.2" height="39.2" />
+    <path
+      class="st2"
+      d="M393.2,133h39.2v-19.6c0-10.8-8.8-19.6-19.6-19.6s-19.6,8.8-19.6,19.6v19.6Z"
+    />
+    <rect class="st3" x="292.5" y="309.2" width="39.2" height="39.2" />
+    <rect class="st3" x="292.5" y="191.7" width="39.2" height="39.2" />
+    <rect class="st3" x="292.5" y="74.2" width="39.2" height="39.2" />
+    <rect class="st3" x="443.6" y="270.1" width="39.2" height="39.2" />
+    <rect class="st3" x="443.6" y="152.6" width="39.2" height="39.2" />
+    <path
+      class="st3"
+      d="M362.4,387.6h0c10.8,0,19.6-8.8,19.6-19.6v-19.6h-39.2v19.6c0,10.8,8.8,19.6,19.6,19.6"
+    />
+    <rect class="st3" x="342.8" y="230.9" width="39.2" height="39.2" />
+    <rect class="st3" x="393.2" y="172.1" width="39.2" height="39.2" />
+    <rect class="st2" x="393.2" y="289.6" width="39.2" height="39.2" />
+    <rect class="st3" x="393.2" y="250.5" width="39.2" height="39.2" />
+    <rect class="st3" x="342.8" y="113.4" width="39.2" height="39.2" />
+    <path
+      class="st0"
+      d="M312.1,426.7h0c10.8,0,19.6-8.8,19.6-19.6v-19.6h-39.2v19.6c0,10.8,8.8,19.6,19.6,19.6"
+    />
+    <rect class="st0" x="292.5" y="270.1" width="39.2" height="39.2" />
+    <rect class="st0" x="292.5" y="152.6" width="39.2" height="39.2" />
+    <rect class="st0" x="443.6" y="230.9" width="39.2" height="39.2" />
+    <rect class="st0" x="342.8" y="309.2" width="39.2" height="39.2" />
+    <path
+      class="st3"
+      d="M563.9,270.1h0c10.8,0,19.6-8.8,19.6-19.6v-19.6h-39.2v19.6c0,10.8,8.8,19.6,19.6,19.6"
+    />
+    <path
+      class="st2"
+      d="M544.3,230.9h39.2v-19.6c0-10.8-8.8-19.6-19.6-19.6s-19.6,8.8-19.6,19.6v19.6Z"
+    />
+    <g>
+      <rect class="st2" x="493.9" y="230.9" width="39.2" height="39.2" />
+      <path
+        class="st3"
+        d="M513.5,152.6h0c-10.8,0-19.6,8.8-19.6,19.6v19.6h39.2v-19.6c0-10.8-8.8-19.6-19.6-19.6"
+      />
+      <path
+        class="st3"
+        d="M533.1,270.1h-39.2v19.6c0,10.8,8.8,19.6,19.6,19.6s19.6-8.8,19.6-19.6v-19.6Z"
+      />
+      <rect class="st0" x="493.9" y="191.7" width="39.2" height="39.2" />
+    </g>
+    <rect class="st0" x="342.8" y="191.7" width="39.2" height="39.2" />
+    <path
+      class="st3"
+      d="M412.8,368h0c10.8,0,19.6-8.8,19.6-19.6v-19.6h-39.2v19.6c0,10.8,8.8,19.6,19.6,19.6"
+    />
+    <rect class="st0" x="393.2" y="133" width="39.2" height="39.2" />
+    <path
+      class="st0"
+      d="M342.8,113.4h39.2v-19.6c0-10.8-8.8-19.6-19.6-19.6s-19.6,8.8-19.6,19.6v19.6Z"
+    />
+    <path
+      class="st3"
+      d="M482.7,88.2c0,10.8-8.8,19.6-19.6,19.6s-19.6-8.8-19.6-19.6,8.8-19.6,19.6-19.6,19.6,8.8,19.6,19.6"
+    />
+    <path
+      class="st1"
+      d="M432.4,398.1c0,10.8-8.8,19.6-19.6,19.6s-19.6-8.8-19.6-19.6,8.8-19.6,19.6-19.6,19.6,8.8,19.6,19.6"
+    />
+    <path
+      class="st0"
+      d="M521.9,85.4c0,6.2-5,11.2-11.2,11.2s-11.2-5-11.2-11.2,5-11.2,11.2-11.2,11.2,5,11.2,11.2"
+    />
+    <path
+      class="st1"
+      d="M505.1,49c0,7.7-6.3,14-14,14s-14-6.3-14-14,6.3-14,14-14,14,6.3,14,14"
+    />
+    <path
+      class="st0"
+      d="M465.9,426.1c0,7.7-6.3,14-14,14s-14-6.3-14-14,6.3-14,14-14,14,6.3,14,14"
+    />
+    <path
+      class="st2"
+      d="M1297.6,143.3h0c0,10.3-8.4,18.7-18.7,18.7h-106.3v37.1h87.5c10.3,0,18.7,8.4,18.7,18.7s-8.4,18.7-18.7,18.7h-87.5v41.9h106.3c10.3,0,18.7,8.4,18.7,18.7s-8.4,18.7-18.7,18.7h-143.7V124.5h143.7c10.3,0,18.7,8.4,18.7,18.7"
+    />
+    <path
+      class="st2"
+      d="M1464.5,162h-69.5c-20.7,0-37.5,16.8-37.5,37.5v41.5c0,20.7,16.8,37.5,37.5,37.5h35.1c22,0,39.8-17.8,39.8-39.8v-2h-37.5c-10.3,0-18.7-8.4-18.7-18.7s8.4-18.7,18.7-18.7h74.9v39.5c0,42.7-34.6,77.3-77.3,77.3h-35.1c-41.4,0-74.9-33.6-74.9-74.9v-41.5c0-41.4,33.6-74.9,74.9-74.9h69.5c10.3,0,18.7,8.4,18.7,18.7s-8.4,18.7-18.7,18.7"
+    />
+    <path
+      class="st2"
+      d="M660.2,199.5v97.7c0,10.3-8.4,18.7-18.7,18.7s-18.7-8.4-18.7-18.7v-97.7c0-41.4,33.6-74.9,74.9-74.9s43.7,6.2,56.2,18.7c12.5-12.5,31.2-18.7,56.2-18.7,41.4,0,75,33.6,75,74.9v97.7c0,10.3-8.4,18.7-18.7,18.7s-18.7-8.4-18.7-18.7v-97.7c0-20.7-16.7-37.5-37.4-37.5-25,0-37.5,12.5-37.5,37.5v97.7c0,10.3-8.4,18.7-18.7,18.7s-18.7-8.4-18.7-18.7v-97.7c0-25-12.5-37.5-37.5-37.5-20.7,0-37.4,16.8-37.4,37.5"
+    />
+    <path
+      class="st2"
+      d="M1029.1,124.5c50.4,0,75.3,25.4,74.9,76.2-.3,40.9-34,73.7-74.9,73.7h-74.9v22.8c0,10.3-8.4,18.7-18.7,18.7s-18.7-8.4-18.7-18.7V124.5h112.4ZM1066.6,199.5c0-25-12.5-37.5-37.5-37.5h-74.9v74.9h74.9c25,0,37.5-12.5,37.5-37.5"
+    />
+  </g>
+</svg>

package/src/codemirror/ruler.ts

@@ -0,0 +1,58 @@
+import { type Extension, Facet } from "@codemirror/state";
+import { EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view";
+
+const baseTheme = EditorView.baseTheme({
+  "&light .cm-ruler": { borderRight: "1px dotted black", opacity: 0.2 },
+  "&dark .cm-ruler": { borderRight: "1px dotted white", opacity: 0.2 },
+});
+
+const rulerWidth = Facet.define<number, number>({
+  combine: (values) => values.length ? Math.min(...values) : 10,
+});
+
+const showRuler = ViewPlugin.fromClass(
+  class {
+    rulerDiv: HTMLDivElement;
+    currentColumn: number;
+
+    constructor(view: EditorView) {
+      this.currentColumn = view.state.facet(rulerWidth);
+
+      this.rulerDiv = view.dom.appendChild(document.createElement("div"));
+      this.rulerDiv.classList.add("cm-ruler");
+      this.rulerDiv.style.cssText =
+        "position: absolute; top: 0; height: 100%; width: 1px; pointer-events: none; overflow: hidden;";
+
+      this.updateRulePosition(view, this.currentColumn);
+    }
+
+    update(update: ViewUpdate) {
+      const newColumn = update.state.facet(rulerWidth);
+      if (update.geometryChanged || newColumn !== this.currentColumn) {
+        this.currentColumn = newColumn;
+        this.updateRulePosition(update.view, newColumn);
+      }
+    }
+
+    updateRulePosition(view: EditorView, column: number) {
+      const defaultCharacterWidth = view.defaultCharacterWidth;
+      const gutterWidth = view.contentDOM.getBoundingClientRect().x;
+
+      this.rulerDiv.style.left = `${
+        gutterWidth + (column * defaultCharacterWidth) + 6
+      }px`;
+    }
+
+    destroy() {
+      this.rulerDiv.remove();
+    }
+  },
+);
+
+export function ruler(column: number): Extension {
+  return [
+    baseTheme,
+    rulerWidth.of(column),
+    showRuler,
+  ];
+}

package/src/components/DesktopPanels.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+
+interface DesktopPanelsProps {
+  leftChild: React.ReactNode;
+  rightChild: React.ReactNode;
+  splitPercentage: number;
+  isSettingsShown: boolean;
+  isDragging: boolean;
+  onMouseDown: (e: React.MouseEvent) => void;
+}
+
+export function DesktopPanels({
+  leftChild,
+  rightChild,
+  splitPercentage,
+  isSettingsShown,
+  isDragging,
+  onMouseDown,
+}: DesktopPanelsProps) {
+  return (
+    <>
+      {/* Left panel */}
+      <div
+        className="flex flex-col"
+        style={{ width: !isSettingsShown ? "100%" : `${splitPercentage}%` }}
+      >
+        {leftChild}
+      </div>
+
+      {/* Divider - only show when panel is not collapsed */}
+
+      {isSettingsShown && (
+        <div
+          className={`w-1 bg-base-300 hover:bg-primary/50 cursor-col-resize transition-all duration-150 ${
+            isDragging ? "bg-primary/70 w-1.5" : ""
+          } relative group`}
+          onMouseDown={onMouseDown}
+          title="Drag to resize panels"
+        >
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div
+              className={`w-0.5 h-12 bg-base-content/30 rounded-full transition-all ${
+                isDragging
+                  ? "bg-primary-content h-16"
+                  : "group-hover:bg-base-content/50 group-hover:h-16"
+              }`}
+            >
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Right panel - only show when not collapsed */}
+
+      {isSettingsShown && (
+        <div
+          className="flex flex-col"
+          style={{ width: `${Math.max(100 - splitPercentage, 5)}%` }}
+        >
+          {rightChild}
+        </div>
+      )}
+    </>
+  );
+}