{"id":13482817,"url":"https://github.com/brijeshb42/monaco-vim","last_synced_at":"2025-05-16T06:08:14.032Z","repository":{"id":41262795,"uuid":"145301455","full_name":"brijeshb42/monaco-vim","owner":"brijeshb42","description":"VIM keybindings for monaco editor","archived":false,"fork":false,"pushed_at":"2024-12-08T10:17:14.000Z","size":1225,"stargazers_count":308,"open_issues_count":28,"forks_count":32,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-12T04:45:27.986Z","etag":null,"topics":["hacktoberfest","keybindings","monaco-editor","vim"],"latest_commit_sha":null,"homepage":"https://editor.bitwiser.in/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brijeshb42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-19T12:32:12.000Z","updated_at":"2025-04-06T18:00:32.000Z","dependencies_parsed_at":"2024-12-24T14:13:20.739Z","dependency_job_id":"778fcb5f-bb10-4b74-be3b-5c81ba53ba60","html_url":"https://github.com/brijeshb42/monaco-vim","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brijeshb42%2Fmonaco-vim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brijeshb42%2Fmonaco-vim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brijeshb42%2Fmonaco-vim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brijeshb42%2Fmonaco-vim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brijeshb42","download_url":"https://codeload.github.com/brijeshb42/monaco-vim/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478193,"owners_count":22077676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","keybindings","monaco-editor","vim"],"created_at":"2024-07-31T17:01:05.786Z","updated_at":"2025-05-16T06:08:09.023Z","avatar_url":"https://github.com/brijeshb42.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","TypeScript"],"sub_categories":[],"readme":"## monaco-vim\n\nVim keybindings for monaco-editor [demo](https://editor-a5ea1.web.app/)\n\n[![npm version](https://badge.fury.io/js/monaco-vim.svg)](https://www.npmjs.com/package/monaco-vim)\n\n### Install\n\n#### Webpack/browserify\n```sh\nnpm install monaco-vim\n```\n\n##### As global\n\nThis package will only work when bundled using webpack/browserify or using AMD. Including globally\nis not possible due to the use of an internal dependency of monaco-editor which is not exposed in\nthe API. Loading 'monaco' globally is also not possible as you'll have to use its `loader.js` file.\nIf you are using that, then there will be no problem. See [AMD](#AMD).\n\n### Usage\n\n```js\nimport { initVimMode } from 'monaco-vim';\n\nconst vimMode = initVimMode(editor, document.getElementById('my-statusbar'))\n```\n\nHere, `editor` is initialized instance of monaco editor and the 2nd argument should be the node where you would like to place/show the VIM status info.\n\nTo remove the attached VIM bindings, call\n\n```js\nvimMode.dispose();\n```\n\n### Handling key presses\n\nIf you would like a particular keypress to not be handled by this extension, add\nyour `onKeyDown` handler before initializing `monaco-vim` and call\n`preventDefault()` on it. `monaco-vim` will ignore such events and won't do\nanything. This can be useful if you want to handle events like running code on\n`CTRL/CMD+Enter` which otherwise would have been eaten up by `monaco-vim`.\n(Available from v0.0.14 onwards).\n\n#### AMD\n\nIf you are following the official guide and integrating the AMD version of `monaco-editor`, you can follow this -\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" \u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003cdiv id=\"container\" style=\"width:800px;height:600px;border:1px solid grey\"\u003e\u003c/div\u003e\n\u003cdiv id=\"status\"\u003e\u003c/div\u003e\n\n\u003cscript src=\"https://unpkg.com/monaco-editor/min/vs/loader.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  require.config({\n    paths: {\n      'vs': 'https://unpkg.com/monaco-editor/min/vs',\n      'monaco-vim': 'https://unpkg.com/monaco-vim/dist/monaco-vim',\n    }\n  });\n  require(['vs/editor/editor.main', 'monaco-vim'], function(a, MonacoVim) {\n    var editor = monaco.editor.create(document.getElementById('container'), {\n      value: [\n        'function x() {',\n        '\\tconsole.log(\"Hello world!\");',\n        '}'\n      ].join('\\n'),\n      language: 'javascript'\n    });\n    var statusNode = document.getElementById('status');\n    var vimMode = MonacoVim.initVimMode(editor, statusNode);\n\n    // remove vim mode by calling\n    // vimMode.dispose();\n  });\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nSee [demo.js](https://github.com/brijeshb42/monaco-vim/tree/master/src/demo.js) for full usage.\n\nIf you would like to customize the statusbar or provide your own implementation, see `initVimMode`'s implementation in [src/index.js](https://github.com/brijeshb42/monaco-vim/tree/master/src/index.js).\n\n### Adding custom key bindings\n\nActual vim implementation can be imported as:\n\n```js\nimport { VimMode } from 'monaco-vim';\n```\n\n#### Defining ex mode command\n\n```js\n// VimMode.Vim.defineEx(name, shorthand, callback);\nVimMode.Vim.defineEx('write', 'w', function() {\n  // your own implementation on what you want to do when :w is pressed\n  localStorage.setItem('editorvalue', editor.getValue());\n});\n```\n\nFor advanced usage, refer [codemirror](https://github.com/codemirror/CodeMirror/issues/2840#issuecomment-58125831).  `CodeMirror.Vim` is available as `VimMode.Vim`;\n\nThis implementaion of VIM is a layer between Codemirror's VIM keybindings and monaco. There may be issues in some of the keybindings, especially those that expect extra input like the Ex commands or search/replace. If you encounter such bugs, create a new [issue](https://github.com/brijeshb42/monaco-vim/issues). PRs to resolve those are welcome too.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrijeshb42%2Fmonaco-vim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrijeshb42%2Fmonaco-vim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrijeshb42%2Fmonaco-vim/lists"}