Bug: Cursor Issue

[KrishT0]

When I try to click on Monaco editor after some width, the cursor doesn't go. Also, it feels weird when writing from that point. My screen is at zoom level 90%, but this issue gets fixed when I zoom the screen for 100% or more.

Demo

2024-12-23.14-53-57.mp4

Code :

import {
  useState,
  useEffect,
  forwardRef,
  useRef,
  useImperativeHandle,
} from "react";
import Editor from "@monaco-editor/react";
import { useMediaQuery } from "@/hooks/use-media-query";

const MonacoEditorComponent = forwardRef(({ language, defaultCode }, ref) => {
  const [code, setCode] = useState(defaultCode);
  const editorRef = useRef();
  const isSmallScreen = useMediaQuery("(min-width: 500px)");

  useEffect(() => {
    setCode(defaultCode);
  }, [defaultCode]);

  const editorOptions = {
    fontFamily: "JetBrains Mono",
    fontSize: 13,
    fontWeight: 700,
    wordWrap: "on",
    minimap: {
      enabled: isSmallScreen ? true : false,
    },
  };

  const onMount = (editor) => {
    editorRef.current = editor;
    editorRef.current.focus();
  };

  useImperativeHandle(ref, () => ({
    getValue: () => editorRef.current.getValue(),
  }));

  return (
    <Editor
      height="100%"
      defaultLanguage={language}
      language={language}
      theme="vs-dark"
      onMount={onMount}
      value={code}
      onChange={(value) => setCode(value)}
      options={editorOptions}
    />
  );
});

export default MonacoEditorComponent;