npm - @mpeggroup/mpeg-sdl-editor - Versions diffs - 1.4.2 → 1.4.3 - Mend

@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.

Files changed (29) hide show

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

package/README.md CHANGED Viewed

@@ -32,16 +32,13 @@ Bundle:
 `bun run build`
-**NOTE**: The following tasks use Deno as it excels at these and Bun does not
-currently provide such functionality:
 Format:
-`deno fmt`
+`bunx oxfmt`
 Lint:
-`deno lint src/ tests/`
+`bunx oxlint index.ts src/ tests/`
 ## Functional Tests

package/bun.lock CHANGED Viewed

@@ -9,7 +9,7 @@
         "@codemirror/lint": "6.9.2",
         "@lezer/common": "1.5.0",
         "@lezer/highlight": "1.2.3",
-        "@mpeggroup/mpeg-sdl-parser": "4.1.2",
+        "@mpeggroup/mpeg-sdl-parser": "4.1.4",
         "@types/wicg-file-system-access": "2023.10.7",
         "@uiw/codemirror-theme-vscode": "4.25.10",
         "@uiw/react-codemirror": "4.25.10",
@@ -77,7 +77,7 @@
     "@marijn/find-cluster-break": ["@marijn/find-cluster-break@1.0.2", "", {}, "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="],
-    "@mpeggroup/mpeg-sdl-parser": ["@mpeggroup/mpeg-sdl-parser@4.1.2", "", { "dependencies": { "@codemirror/language": "6.12.3", "@codemirror/state": "6.5.4", "@lezer/common": "1.5.0", "@lezer/generator": "1.8.0", "@lezer/highlight": "1.2.3", "@lezer/lr": "1.4.7", "prettier": "3.8.3" }, "peerDependencies": { "typescript": "6.0.3" } }, "sha512-GKTSu4cSFgpN3Hl7i5be5JIG4PPMemz0ylDGD27Ef6fBKp92yLTk/mYPUI38GR3D1+TR/2WBRNU+gx6Sn9TG2g=="],
+    "@mpeggroup/mpeg-sdl-parser": ["@mpeggroup/mpeg-sdl-parser@4.1.4", "", { "dependencies": { "@codemirror/language": "6.12.3", "@codemirror/state": "6.5.4", "@lezer/common": "1.5.0", "@lezer/generator": "1.8.0", "@lezer/highlight": "1.2.3", "@lezer/lr": "1.4.7", "prettier": "3.8.3" }, "peerDependencies": { "typescript": "6.0.3" } }, "sha512-xrnDQlEtUYIbz1yk1GUdWR1UdAMSawBMziYBgWIfggvuJz0uuZ7elZMug08mMeVv3GkVbX+WYlDtCRcKJgGy9g=="],
     "@oven/bun-darwin-aarch64": ["@oven/bun-darwin-aarch64@1.3.14", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Omj20SuiHBOUjUBIyqtkNjSUIjOtEOJwmbix/ZyFH4BaQ6OZTaaRWIR4TjHVz0yadHgli6lLTiAh1uarnvD49A=="],

package/html/index.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8" />

package/package.json CHANGED Viewed

@@ -1,46 +1,33 @@
 {
   "name": "@mpeggroup/mpeg-sdl-editor",
+  "version": "1.4.3",
   "description": "ISO/IEC 14496-34 Syntactic Description Language (MPEG SDL) web based editor",
-  "homepage": "https://github.com/MPEGGroup/mpeg-sdl-editor#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/MPEGGroup/mpeg-sdl-editor.git"
-  },
-  "license": "MIT",
   "keywords": [
     "bun",
+    "editor",
     "mpeg",
-    "sdl",
     "parser",
-    "editor"
+    "sdl"
   ],
-  "type": "module",
-  "version": "1.4.2",
-  "scripts": {
-    "build": "bun build.ts"
+  "homepage": "https://github.com/MPEGGroup/mpeg-sdl-editor#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MPEGGroup/mpeg-sdl-editor.git"
   },
+  "type": "module",
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "@happy-dom/global-registrator": "20.9.0",
-    "@testing-library/dom": "10.4.1",
-    "@testing-library/react": "16.3.2",
-    "@types/bun": "1.3.14",
-    "bun-plugin-tailwind": "0.1.2",
-    "happy-dom": "20.9.0"
-  },
-  "peerDependencies": {
-    "typescript": "6.0.3",
-    "@types/react": "19.2.15",
-    "@types/react-dom": "19.2.3"
+  "scripts": {
+    "build": "bun build.ts"
   },
   "dependencies": {
     "@codemirror/language": "6.12.1",
     "@codemirror/lint": "6.9.2",
     "@lezer/common": "1.5.0",
     "@lezer/highlight": "1.2.3",
-    "@mpeggroup/mpeg-sdl-parser": "4.1.2",
+    "@mpeggroup/mpeg-sdl-parser": "4.1.4",
     "@types/wicg-file-system-access": "2023.10.7",
     "@uiw/codemirror-theme-vscode": "4.25.10",
     "@uiw/react-codemirror": "4.25.10",
@@ -49,6 +36,19 @@
     "react-dom": "19.2.6",
     "tailwindcss": "4.3.0"
   },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "20.9.0",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "16.3.2",
+    "@types/bun": "1.3.14",
+    "bun-plugin-tailwind": "0.1.2",
+    "happy-dom": "20.9.0"
+  },
+  "peerDependencies": {
+    "@types/react": "19.2.15",
+    "@types/react-dom": "19.2.3",
+    "typescript": "6.0.3"
+  },
   "overrides": {
     "@codemirror/language": "6.12.1",
     "@codemirror/lint": "6.9.2",

package/src/App.tsx CHANGED Viewed

@@ -1,8 +1,4 @@
-import {
-  SemanticError,
-  SemanticWarning,
-  SyntaxError,
-} from "@mpeggroup/mpeg-sdl-parser";
+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";
@@ -36,12 +32,9 @@ function getInitialCodeFromHash(): string | null {
 }
 export function App() {
-  const defaultCode =
-    "// Start typing your SDL here... <Ctrl+Space> for completions\n";
+  const defaultCode = "// Start typing your SDL here... <Ctrl+Space> for completions\n";
-  const [code, setCodeInternal] = useState<string>(
-    () => getInitialCodeFromHash() ?? defaultCode,
-  );
+  const [code, setCodeInternal] = useState<string>(() => getInitialCodeFromHash() ?? defaultCode);
   const setCode = useCallback((newCode: string) => {
     setCodeInternal(newCode);
@@ -62,34 +55,29 @@ export function App() {
   const isMobile = useMobileDetection();
   const [isSettingsShown, setSettingsShown] = useState(false);
   const { rulerWidth, setRulerWidth } = useRulerWidth();
-  const { autoDisplayCompletions, setAutoDisplayCompletions } =
-    useAutoDisplayCompletions();
+  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 { 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 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}`;
+    const url = `${globalThis.location.origin}${globalThis.location.pathname}#c=${encoded}`;
     try {
       await navigator.clipboard.writeText(url);
       showToast("URL copied!");
@@ -98,11 +86,7 @@ export function App() {
     }
   }, [code, showToast]);
-  const {
-    handleSave,
-    handleLoad,
-    handleCopy,
-  } = useFileOperations({
+  const { handleSave, handleLoad, handleCopy } = useFileOperations({
     code,
     setCode,
     showToast,
@@ -113,9 +97,7 @@ export function App() {
   const characterCount = useMemo(() => code.length, [code]);
   const [syntaxErrors, setSyntaxErrors] = useState<SyntaxError[]>([]);
   const [semanticErrors, setSemanticErrors] = useState<SemanticError[]>([]);
-  const [semanticWarnings, setSemanticWarnings] = useState<SemanticWarning[]>(
-    [],
-  );
+  const [semanticWarnings, setSemanticWarnings] = useState<SemanticWarning[]>([]);
   const onSyntaxErrorChange = useCallback((newErrors: SyntaxError[]) => {
     setSyntaxErrors(newErrors);
@@ -125,24 +107,15 @@ export function App() {
     setSemanticErrors(newErrors);
   }, []);
-  const onSemanticWarningChange = useCallback(
-    (newErrors: SemanticWarning[]) => {
-      setSemanticWarnings(newErrors);
-    },
-    [],
-  );
+  const onSemanticWarningChange = useCallback((newErrors: SemanticWarning[]) => {
+    setSemanticWarnings(newErrors);
+  }, []);
-  const syntaxErrorCount = useMemo(() => syntaxErrors.length, [
-    syntaxErrors,
-  ]);
+  const syntaxErrorCount = useMemo(() => syntaxErrors.length, [syntaxErrors]);
-  const semanticErrorCount = useMemo(() => semanticErrors.length, [
-    semanticErrors,
-  ]);
+  const semanticErrorCount = useMemo(() => semanticErrors.length, [semanticErrors]);
-  const semanticWarningCount = useMemo(() => semanticWarnings.length, [
-    semanticWarnings,
-  ]);
+  const semanticWarningCount = useMemo(() => semanticWarnings.length, [semanticWarnings]);
   const { handlePrettify } = usePrettier({
     code,
@@ -251,8 +224,8 @@ export function App() {
               toastState.type === "success"
                 ? "alert-success"
                 : toastState.type === "warning"
-                ? "alert-warning"
-                : "alert-error"
+                  ? "alert-warning"
+                  : "alert-error"
             }`}
           >
             <span>{toastState.message}</span>

package/src/codemirror/ruler.ts CHANGED Viewed

@@ -7,7 +7,7 @@ const baseTheme = EditorView.baseTheme({
 });
 const rulerWidth = Facet.define<number, number>({
-  combine: (values) => values.length ? Math.min(...values) : 10,
+  combine: (values) => (values.length ? Math.min(...values) : 10),
 });
 const showRuler = ViewPlugin.fromClass(
@@ -38,9 +38,7 @@ const showRuler = ViewPlugin.fromClass(
       const defaultCharacterWidth = view.defaultCharacterWidth;
       const gutterWidth = view.contentDOM.getBoundingClientRect().x;
-      this.rulerDiv.style.left = `${
-        gutterWidth + (column * defaultCharacterWidth) + 6
-      }px`;
+      this.rulerDiv.style.left = `${gutterWidth + column * defaultCharacterWidth + 6}px`;
     }
     destroy() {
@@ -50,9 +48,5 @@ const showRuler = ViewPlugin.fromClass(
 );
 export function ruler(column: number): Extension {
-  return [
-    baseTheme,
-    rulerWidth.of(column),
-    showRuler,
-  ];
+  return [baseTheme, rulerWidth.of(column), showRuler];
 }

package/src/components/DesktopPanels.tsx CHANGED Viewed

@@ -44,8 +44,7 @@ export function DesktopPanels({
                   ? "bg-primary-content h-16"
                   : "group-hover:bg-base-content/50 group-hover:h-16"
               }`}
-            >
-            </div>
+            ></div>
           </div>
         </div>
       )}
@@ -53,10 +52,7 @@ export function DesktopPanels({
       {/* Right panel - only show when not collapsed */}
       {isSettingsShown && (
-        <div
-          className="flex flex-col"
-          style={{ width: `${Math.max(100 - splitPercentage, 5)}%` }}
-        >
+        <div className="flex flex-col" style={{ width: `${Math.max(100 - splitPercentage, 5)}%` }}>
           {rightChild}
         </div>
       )}

package/src/components/Editor.tsx CHANGED Viewed

@@ -1,10 +1,4 @@
-import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from "react";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from "react";
 import CodeMirror, { ViewUpdate } from "@uiw/react-codemirror";
 import {
   codeFolding,
@@ -23,11 +17,7 @@ import {
   vscodeLightStyle,
 } from "@uiw/codemirror-theme-vscode";
 import { EditorView } from "@codemirror/view";
-import {
-  SemanticError,
-  SemanticWarning,
-  SyntaxError,
-} from "@mpeggroup/mpeg-sdl-parser";
+import { SemanticError, SemanticWarning, SyntaxError } from "@mpeggroup/mpeg-sdl-parser";
 export { ViewUpdate } from "@codemirror/view";
 import { lintGutter } from "@codemirror/lint";
 import { autocompletion } from "@codemirror/autocomplete";
@@ -72,7 +62,7 @@ function extractThemeStyleAttributes(themeStyle: TagStyle[]) {
     let attributes = "";
     Object.keys(style).forEach((key) => {
-      if ((key !== "tag") && (key !== "class")) {
+      if (key !== "tag" && key !== "class") {
         const value = style[key as keyof typeof style];
         if (typeof value === "string") {
@@ -89,14 +79,14 @@ function extractThemeStyleAttributes(themeStyle: TagStyle[]) {
       style.tag.forEach((tag) => {
         const actualTag = tag as unknown as TagWithNameAndModified;
-        if (actualTag.name && (actualTag.modified.length === 0)) {
+        if (actualTag.name && actualTag.modified.length === 0) {
           styleAttributesByTagName.set(actualTag.name, attributes);
         }
       });
     } else {
       const actualTag = style.tag as unknown as TagWithNameAndModified;
-      if (actualTag.name && (actualTag.modified.length === 0)) {
+      if (actualTag.name && actualTag.modified.length === 0) {
         styleAttributesByTagName.set(actualTag.name, attributes);
       }
     }
@@ -105,21 +95,12 @@ function extractThemeStyleAttributes(themeStyle: TagStyle[]) {
   return styleAttributesByTagName;
 }
-const lightStyleAttributesByTagName = extractThemeStyleAttributes(
-  vscodeLightStyle,
-);
-const darkStyleAttributesByTagName = extractThemeStyleAttributes(
-  vscodeDarkStyle,
-);
+const lightStyleAttributesByTagName = extractThemeStyleAttributes(vscodeLightStyle);
+const darkStyleAttributesByTagName = extractThemeStyleAttributes(vscodeDarkStyle);
-function getStyledCode(
-  sdlLanguageSupport: LanguageSupport,
-  code: string,
-  theme: string,
-): string {
-  const styleAttributesByTagName = theme === "dark"
-    ? darkStyleAttributesByTagName
-    : lightStyleAttributesByTagName;
+function getStyledCode(sdlLanguageSupport: LanguageSupport, code: string, theme: string): string {
+  const styleAttributesByTagName =
+    theme === "dark" ? darkStyleAttributesByTagName : lightStyleAttributesByTagName;
   let richText = "";
@@ -148,7 +129,10 @@ function getStyledCode(
     let span;
     if (spanStyleAttributes) {
-      span = "<span style='" + spanStyleAttributes + "'>" +
+      span =
+        "<span style='" +
+        spanStyleAttributes +
+        "'>" +
         p.innerHTML.replaceAll(" ", "&nbsp;") +
         "</span>";
     } else {
@@ -204,10 +188,7 @@ export const Editor = forwardRef<EditorRef, EditorProps>(
     const sdlLanguageSupport = useMemo(() => sdl(), []);
     // Memoize static extensions that never change
-    const staticExtensions = useMemo(() => [
-      codeFolding(),
-      foldGutter(),
-    ], []);
+    const staticExtensions = useMemo(() => [codeFolding(), foldGutter()], []);
     const rulerExtension = useMemo(() => ruler(rulerWidth), [rulerWidth]);
@@ -216,44 +197,35 @@ export const Editor = forwardRef<EditorRef, EditorProps>(
       [autoDisplayCompletions],
     );
-    const stableOnSyntaxErrorChange = useCallback(
-      (errors: SyntaxError[]) => {
-        onSyntaxErrorChangeRef.current(errors);
-      },
-      [],
-    );
+    const stableOnSyntaxErrorChange = useCallback((errors: SyntaxError[]) => {
+      onSyntaxErrorChangeRef.current(errors);
+    }, []);
-    const stableOnSemanticErrorChange = useCallback(
-      (errors: SemanticError[]) => {
-        onSemanticErrorChangeRef.current(errors);
-      },
-      [],
-    );
+    const stableOnSemanticErrorChange = useCallback((errors: SemanticError[]) => {
+      onSemanticErrorChangeRef.current(errors);
+    }, []);
-    const stableOnSemanticWarningChange = useCallback(
-      (errors: SemanticWarning[]) => {
-        onSemanticWarningChangeRef.current(errors);
-      },
-      [],
-    );
+    const stableOnSemanticWarningChange = useCallback((errors: SemanticWarning[]) => {
+      onSemanticWarningChangeRef.current(errors);
+    }, []);
     // Memoize dynamic extensions that depend on props
     const dynamicExtensions = useMemo(
       () =>
         enableLinting
           ? [
-            // TODO: only include the lint gutter if showSyntaxErrors, showSemanticErrors, or showSemanticWarnings is true
-            lintGutter(),
-            // TODO: pass showSyntaxErrors, showSemanticErrors, showSemanticWarnings to sdlLinter
-            sdlLinter({
-              onSyntaxErrorChange: stableOnSyntaxErrorChange,
-              onSemanticErrorChange: stableOnSemanticErrorChange,
-              onSemanticWarningChange: stableOnSemanticWarningChange,
-              showSyntaxErrors,
-              showSemanticErrors,
-              showSemanticWarnings,
-            }),
-          ]
+              // TODO: only include the lint gutter if showSyntaxErrors, showSemanticErrors, or showSemanticWarnings is true
+              lintGutter(),
+              // TODO: pass showSyntaxErrors, showSemanticErrors, showSemanticWarnings to sdlLinter
+              sdlLinter({
+                onSyntaxErrorChange: stableOnSyntaxErrorChange,
+                onSemanticErrorChange: stableOnSemanticErrorChange,
+                onSemanticWarningChange: stableOnSemanticWarningChange,
+                showSyntaxErrors,
+                showSemanticErrors,
+                showSemanticWarnings,
+              }),
+            ]
           : [],
       [
         enableLinting,
@@ -266,19 +238,22 @@ export const Editor = forwardRef<EditorRef, EditorProps>(
       ],
     );
-    const extensions = useMemo(() => [
-      ...staticExtensions,
-      rulerExtension,
-      autocompletionExtension,
-      sdlLanguageSupport,
-      ...dynamicExtensions,
-    ], [
-      staticExtensions,
-      rulerExtension,
-      autocompletionExtension,
-      sdlLanguageSupport,
-      dynamicExtensions,
-    ]);
+    const extensions = useMemo(
+      () => [
+        ...staticExtensions,
+        rulerExtension,
+        autocompletionExtension,
+        sdlLanguageSupport,
+        ...dynamicExtensions,
+      ],
+      [
+        staticExtensions,
+        rulerExtension,
+        autocompletionExtension,
+        sdlLanguageSupport,
+        dynamicExtensions,
+      ],
+    );
     // Memoize imperative methods
     const expandAll = useCallback(() => {
@@ -308,41 +283,51 @@ export const Editor = forwardRef<EditorRef, EditorProps>(
     }, []);
     // Expose methods via ref
-    useImperativeHandle(ref, () => ({
-      expandAll,
-      collapseAll,
-      getStyledCode: () => {
-        return getStyledCode(sdlLanguageSupport, code, theme);
+    useImperativeHandle(
+      ref,
+      () => ({
+        expandAll,
+        collapseAll,
+        getStyledCode: () => {
+          return getStyledCode(sdlLanguageSupport, code, theme);
+        },
+      }),
+      [expandAll, collapseAll, sdlLanguageSupport, code, theme],
+    );
+    const onInternalCodeChange = useCallback(
+      (newCode: string) => {
+        onCodeChange(newCode);
       },
-    }), [expandAll, collapseAll, sdlLanguageSupport, code, theme]);
-    const onInternalCodeChange = useCallback((newCode: string) => {
-      onCodeChange(newCode);
-    }, [onCodeChange]);
-    const onViewUpdate = useCallback((viewUpdate: ViewUpdate) => {
-      if (viewUpdate.state) {
-        const state = viewUpdate.state;
-        const selection = state.selection.main;
-        if (selection) {
-          const head = selection.head;
-          const line = state.doc.lineAt(head);
-          const lineNumber = line.number;
-          const columnNumber = head - line.from + 1;
-          // Only update if position actually changed
-          if (
-            lastCursorPosition.current.line !== lineNumber ||
-            lastCursorPosition.current.col !== columnNumber
-          ) {
-            const newPosition = { line: lineNumber, col: columnNumber };
-            lastCursorPosition.current = newPosition;
-            onCursorChange(newPosition);
+      [onCodeChange],
+    );
+    const onViewUpdate = useCallback(
+      (viewUpdate: ViewUpdate) => {
+        if (viewUpdate.state) {
+          const state = viewUpdate.state;
+          const selection = state.selection.main;
+          if (selection) {
+            const head = selection.head;
+            const line = state.doc.lineAt(head);
+            const lineNumber = line.number;
+            const columnNumber = head - line.from + 1;
+            // Only update if position actually changed
+            if (
+              lastCursorPosition.current.line !== lineNumber ||
+              lastCursorPosition.current.col !== columnNumber
+            ) {
+              const newPosition = { line: lineNumber, col: columnNumber };
+              lastCursorPosition.current = newPosition;
+              onCursorChange(newPosition);
+            }
           }
         }
-      }
-    }, [onCursorChange]);
+      },
+      [onCursorChange],
+    );
     return (
       <div className="h-full w-full">

package/src/components/MobileDrawer.tsx CHANGED Viewed

@@ -8,9 +8,12 @@ interface MobileDrawerProps {
   children: React.ReactNode;
 }
-export function MobileDrawer(
-  { theme, isSettingsShown, onToggleSettings, children }: MobileDrawerProps,
-) {
+export function MobileDrawer({
+  theme,
+  isSettingsShown,
+  onToggleSettings,
+  children,
+}: MobileDrawerProps) {
   return (
     <>
       {isSettingsShown && (
@@ -32,12 +35,7 @@ export function MobileDrawer(
           }`}
           title="Close settings"
         >
-          <svg
-            className="w-6 h-6"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               strokeLinecap="round"
               strokeLinejoin="round"
@@ -47,9 +45,7 @@ export function MobileDrawer(
           </svg>
         </button>
         <div className="h-full p-4 pt-4 overflow-hidden">
-          <div className="overflow-y-auto h-full">
-            {children}
-          </div>
+          <div className="overflow-y-auto h-full">{children}</div>
         </div>
       </div>
     </>