Cursor is not visible & selected text in editor is not highlighted.

[Jatin]

Describe the bug
I am currently utilizing the most recent iteration of @monaco-editor/react. However, I am encountering an issue concerning the cursor visibility and the lack of highlighted text within the code editor. Despite my attempts to address this problem by searching through Copilot, Stack Overflow, and GitHub issues, I have been unable to find a resolution. Additionally, I have experimented with alternative solutions such as react-monaco-editor and codemirror, yet the issue persists. I have also tried changing browsers and creating entirely new projects, both with and without Tailwind, yet the problem remains unchanged.

To Reproduce

Steps to reproduce the behavior:

import { useState } from "react";
import Axios from "axios";
import Editor from "@monaco-editor/react";

const Terminal = () => {
    const [code, setCode] = useState("");

    const handleSubmit = () => {
        console.log(code);
        Axios({
            url: "<URL>",
            method: "post",
            data: { code: code },
        })
            .then((data) => {
                console.log("Data sent: ", data);
            })
            .catch((err) => {
                console.log("Error occured: ", err);
            });
    };
    const handleEditorMount = (editor) => {
        console.log("Editor mounted");
        editor.focus();
    };

    return (
        <div>
            <Editor
                height="70vh"
                width="100%"
                className="rounded-md"
                defaultLanguage="javascript"
                defaultValue={`// Your code here\n// console.log('Hello World!')`}
                theme="vs-dark"
                value={code}
                onChange={(newCode) => {
                    setCode(newCode);
                }}
                onMount={handleEditorMount}
            />
            <button
                onClick={handleSubmit}
                className="w-full my-2 text-white bg-gradient-to-bl from-slate-500 to-slate-800 py-3 px-4 rounded-md"
            >
                Submit
            </button>
        </div>
    );
};
export default Terminal;

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    box-sizing: border-box;
}

.logoBounce {
    animation-duration: 2s;
    animation-name: roter;
    transition: ease-in-out;
    position: relative;
}

@keyframes roter {
    0% {
        left: -25rem;
        transform: rotate(0deg);
    }
    80% {
        left: 0rem;
        transform: rotate(-45deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

::-webkit-scrollbar {
    display: none;
}

Expected behavior
I expected it to normally show the cursor and Highlight the selected text.

Screenshots

2024-03-25.23-03-39.mp4

Desktop (please complete the following information):

• OS: WIndows 10 Professional (64 Bit)
• Browser: Chrome v: 123.0.6312.58
• Version "@monaco-editor/react": "^4.6.0", "react": "^18.2.0", "react-dom": "^18.2.0"

Additional context

[Suren Atoyan]

This is strange. Someone somewhere overrides the styles of the cursor. Here is the cursor element:

Find this element (you can try $$('.inputarea.monaco-mouse-cursor-text') in your console) and check what overrides the default styles.

[Jatin]

Issue Resolved

After some trial and error, I discovered an unexpected culprit in my global CSS file that was causing issues with cursor invisibility and preventing text from being highlighted when selected. By simply removing it, everything was fixed.

* {
    ...
    overflow-x: hidden;
    ...
}

---

Copilot explanation on it:

Layout calculations: The Monaco Editor needs to calculate the size and position of various elements to display the code correctly. For example, it needs to know where to position the cursor, how to scroll the code when the user moves the cursor off the screen, etc. If a parent element of the editor has overflow-x: hidden, it can cause these calculations to be incorrect. This is because overflow-x: hidden can cause the browser to clip or hide content that extends beyond the edge of the element, which can make the element's size appear smaller than it actually is.