It does not work in [email protected]

[huiruo]

It is not effective in [email protected] (insert mode cannot be enabled), but it is effective in version 0.49.0 and can be used normally

[caoccao]

I'm having the same issue with [email protected].

[brijeshb42]

I have deployed latest monaco-editor version 0.51.0 on the playground and it works there. Can you check ?

[caoccao]

Hi @brijeshb42 , thank you for the help. I just realized the issue might also be related to the react version. Here is the package.json for your reference.

  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@fontsource/roboto": "^5.1.0",
    "@monaco-editor/react": "^4.6.0",
    "@mui/icons-material": "^6.1.0",
    "@mui/material": "^6.1.0",
    "@tauri-apps/api": ">=2.0.0",
    "@tauri-apps/plugin-cli": "~2",
    "@tauri-apps/plugin-clipboard-manager": "^2.0.0",
    "@tauri-apps/plugin-dialog": "~2",
    "@tauri-apps/plugin-shell": ">=2.0.0",
    "monaco-editor": "0.49.0",
    "monaco-vim": "^0.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-draggable": "^4.4.6",
    "uuid": "^10.0.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": ">=2.0.0",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@types/uuid": "^10.0.0",
    "@vitejs/plugin-react": "^4.2.1",
    "typescript": "^5.6.3",
    "vite": "^5.4.8"
  }

I suspect the react version might be too high. Could you help verify that? The repo of my project using monaco-vim is here. It's a tauri app. You may run the following commands to build it, after setting up the tauri dev env.

pnpm install
pnpm tauri dev

You may also refer to the workflows for detail.

Thank you!

[brijeshb42]

monaco-vim has nothing to do with React. If you think react is the issue, please provide a repo or codesandbox with minimal reproduction. Otherwise it seems to be an issue with your setup.

[caoccao]

I wonder as @monaco-editor/react is used, it might bring some side effects. The setup doesn't seem to be wrong to me because in the repo I provided "monaco-editor": "0.49.0" works with a minor defect (the cursor is not changed to a block in the normal mode), but "monaco-editor": "0.51.0" only works in the normal mode as @huiruo reported. The only change is as follows.

- "monaco-editor": "0.49.0"
+ "monaco-editor": "0.51.0"

[caoccao]

I just created a repo react-monaco-vim to reproduce the issue.

It directly comes from a boilerplate template eruptionjs/core with the following changes.

• Add Material UI v6
• Add Monaco v0.49.0
• Add Monaco Vim v0.4.1

Please run the following commands to have a test.

pnpm install
pnpm dev

As I early mentioned, with Monaco v0.49.0, the Vim mode is usable, but the cursor is not a block in the normal mode.

Once Monaco is upgraded to v0.51.0 or v0.52.0, the Vim mode is broken because it never enters the insert mode.

I sincerely appreciate the effort you will be spending on the troubleshooting.

[nobane]

Comment out these lines as a workaround to restore insert mode:

diff --git a/src/cm/keymap_vim.js b/src/cm/keymap_vim.js
index a8f9115..0052cb9 100644
--- a/src/cm/keymap_vim.js
+++ b/src/cm/keymap_vim.js
@@ -3447,9 +3447,9 @@ var Vim = function () {
       }
     },
     enterInsertMode: function (cm, actionArgs, vim) {
-      if (cm.getOption("readOnly")) {
-        return;
-      }
+      // if (cm.getOption("readOnly")) {
+      //   return;
+      // }
       vim.insertMode = true;
       vim.insertModeRepeat = (actionArgs && actionArgs.repeat) || 1;
       var insertAt = actionArgs ? actionArgs.insertAt : null;

[nobane]

Workaround fix for the normal mode cursor styling:

--- a/src/cm_adapter.js
+++ b/src/cm_adapter.js
@@ -875,6 +875,7 @@ class CMAdapter {
     this.editor.updateOptions({
       cursorWidth: config.fontInfo.typicalFullwidthCharacterWidth,
       cursorBlinking: "solid",
+      cursorStyle: "block",
     });
   }
 
@@ -884,6 +885,7 @@ class CMAdapter {
     this.editor.updateOptions({
       cursorWidth: this.initialCursorWidth || 0,
       cursorBlinking: "blink",
+      cursorStyle: "line",
     });
   }

[brijeshb42]

Please try with v0.4.2 and re-open if there's an issue.

[caoccao]

Hi @brijeshb42 , thank you for the fix. I just updated the demo repo.

1. The cursor in normal mode is block now with monaco-vim v0.4.2 and monaco-editor v0.49.0.
2. The issue that insert mode cannot be activated remains with monaco-editor v0.51.0 and monaco-editor v0.52.0.

It would be great that you could pull the demo repo for a test. Thank you.

[geyang]

@caoccao might want to open a new issue to bump this up.