Skip to content

Commit e76846b

Browse files
brijeshb42brijeshb42
committed
Refactor codebase and add ts support
1 parent f04f539 commit e76846b

19 files changed

+8760
-6416
lines changed

‎.github/workflows/publish.yml‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ on:
33
workflow_dispatch:
44
inputs:
55
sha:
6-
description: 'Commit SHA to release from'
6+
description: "Commit SHA to release from"
77
required: false
88
type: string
99
jobs:
@@ -16,13 +16,15 @@ jobs:
1616
- uses: actions/checkout@v5
1717
with:
1818
ref: ${{ inputs.sha }}
19+
- uses: pnpm/action-setup@v4
1920
- uses: actions/setup-node@v5
2021
with:
2122
node-version: "22"
23+
cache: pnpm
2224
registry-url: "https://registry.npmjs.org"
23-
- name: Update npm
24-
run: npm install -g npm@latest && corepack enable && yarn set version berry
25-
- run: yarn
26-
- run: npm publish --provenance --access public
25+
- run: corepack enable
26+
- run: pnpm install --frozen-lockfile
27+
- run: pnpm run build
28+
- run: pnpm publish --provenance --access public
2729
env:
28-
NODE_OPTIONS: "--openssl-legacy-provider"
30+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.npmignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
.gitignore
22
index.html
33
yarn.lock
4-
webpack.config.js
4+
pnpm-lock.yaml
55
node_modules/
66
local/
77
.babelrc
8+
tsconfig.json
9+
tsdown.config.mts
10+
vite.config.ts

‎.yarnrc.yml‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎README.md‎

Lines changed: 60 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ Vim keybindings for monaco-editor [demo](https://editor-a5ea1.web.app/)
77
### Install
88

99
#### Webpack/browserify
10+
1011
```sh
1112
npm install monaco-vim
1213
```
@@ -21,9 +22,9 @@ If you are using that, then there will be no problem. See [AMD](#AMD).
2122
### Usage
2223

2324
```js
24-
import { initVimMode } from 'monaco-vim';
25+
import { initVimMode } from "monaco-vim";
2526

26-
const vimMode = initVimMode(editor, document.getElementById('my-statusbar'))
27+
const vimMode = initVimMode(editor, document.getElementById("my-statusbar"));
2728
```
2829

2930
Here, `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.
@@ -50,65 +51,83 @@ If you are following the official guide and integrating the AMD version of `mona
5051
```html
5152
<!DOCTYPE html>
5253
<html>
53-
<head>
54+
<head>
5455
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
55-
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
56-
</head>
57-
<body>
58-
59-
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
60-
<div id="status"></div>
61-
62-
<script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
63-
<script>
64-
require.config({
65-
paths: {
66-
'vs': 'https://unpkg.com/monaco-editor/min/vs',
67-
'monaco-vim': 'https://unpkg.com/monaco-vim/dist/monaco-vim',
68-
}
69-
});
70-
require(['vs/editor/editor.main', 'monaco-vim'], function(a, MonacoVim) {
71-
var editor = monaco.editor.create(document.getElementById('container'), {
72-
value: [
73-
'function x() {',
74-
'\tconsole.log("Hello world!");',
75-
'}'
76-
].join('\n'),
77-
language: 'javascript'
78-
});
79-
var statusNode = document.getElementById('status');
80-
var vimMode = MonacoVim.initVimMode(editor, statusNode);
81-
82-
// remove vim mode by calling
83-
// vimMode.dispose();
84-
});
85-
</script>
86-
</body>
56+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
57+
</head>
58+
<body>
59+
<div
60+
id="container"
61+
style="width:800px;height:600px;border:1px solid grey"
62+
></div>
63+
<div id="status"></div>
64+
65+
<script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
66+
<script>
67+
require.config({
68+
paths: {
69+
vs: "https://unpkg.com/monaco-editor/min/vs",
70+
"monaco-vim": "https://unpkg.com/[email protected]/dist/monaco-vim.js",
71+
},
72+
});
73+
require(["vs/editor/editor.main", "monaco-vim"], function (a, MonacoVim) {
74+
var editor = monaco.editor.create(
75+
document.getElementById("container"),
76+
{
77+
value: [
78+
"function x() {",
79+
'\tconsole.log("Hello world!");',
80+
"}",
81+
].join("\n"),
82+
language: "javascript",
83+
}
84+
);
85+
var statusNode = document.getElementById("status");
86+
var vimMode = MonacoVim.initVimMode(editor, statusNode);
87+
88+
// remove vim mode by calling
89+
// vimMode.dispose();
90+
});
91+
</script>
92+
</body>
8793
</html>
8894
```
8995

90-
See [demo.js](https://github.com/brijeshb42/monaco-vim/tree/master/src/demo.js) for full usage.
96+
See [demo.ts](https://github.com/brijeshb42/monaco-vim/tree/master/src/demo.ts) for full usage.
97+
98+
If you would like to customize the statusbar or provide your own implementation, see `initVimMode`'s implementation in [src/index.ts](https://github.com/brijeshb42/monaco-vim/tree/master/src/index.ts).
99+
100+
### Development
91101

92-
If 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).
102+
```sh
103+
pnpm install
104+
pnpm dev
105+
```
106+
107+
The demo runs on Vite at http://localhost:8080. Build the distributable bundle with:
108+
109+
```sh
110+
pnpm build
111+
```
93112

94113
### Adding custom key bindings
95114

96115
Actual vim implementation can be imported as:
97116

98117
```js
99-
import { VimMode } from 'monaco-vim';
118+
import { VimMode } from "monaco-vim";
100119
```
101120

102121
#### Defining ex mode command
103122

104123
```js
105124
// VimMode.Vim.defineEx(name, shorthand, callback);
106-
VimMode.Vim.defineEx('write', 'w', function() {
125+
VimMode.Vim.defineEx("write", "w", function () {
107126
// your own implementation on what you want to do when :w is pressed
108-
localStorage.setItem('editorvalue', editor.getValue());
127+
localStorage.setItem("editorvalue", editor.getValue());
109128
});
110129
```
111130

112-
For advanced usage, refer [codemirror](https://github.com/codemirror/CodeMirror/issues/2840#issuecomment-58125831). `CodeMirror.Vim` is available as `VimMode.Vim`;
131+
For advanced usage, refer [codemirror](https://github.com/codemirror/CodeMirror/issues/2840#issuecomment-58125831). `CodeMirror.Vim` is available as `VimMode.Vim`;
113132

114133
This 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.

‎babel.config.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)