open-index/open-npm huggingface dataset:
npm package: @replit/clui-input
Description: A utility library for building CLI style interfaces with autocomplete
Author: moudy@repl.it
Latest version: 0.0.18

# CLUI Input

`@replit/clui-input` implementes the logic for mapping text input to suggestions and a potential `run` function.

```jsx
import input from '@replit/clui-input';

const rootCommand = {
  commands: {
    open: {
      commands: {
        sesame: {
          run: (args) => {
            /* do something */
          },
        },
      },
    },
  },
};

const update = input({
  command: rootCommand,
  onUpdate: (updates) => {
    /* Update #1: `updates.options` will be
     * [
     *   {
     *     "value": "open",
     *     "inputValue": "open",
     *     "searchValue": "o",
     *     "cursorTarget": 4
     *   }
     * ]
     */

    /* Update #2: `updates.options` will be
     * [
     *   {
     *     "value": "sesame",
     *     "inputValue": "open sesame",
     *     "searchValue": "s",
     *     "cursorTarget": 12
     *   }
     * ]
     */
  },
});

/* Update #1 */
update({ value: 'o', index: 1 });

/* Update #2 */
update({ value: 'open s', index: 6 });
```

When the input matches a command with a `run` function, the `onUpdate` callback will include a reference to it.

```jsx
const update = input({
  command: rootCommand,
  onUpdate: (updates) => {
    // call or store reference to `updates.run` based on user interaction
  },
});

update({ value: 'open sesame', index: 6 });
```

`@replit/clui-input` a framework agnostic primitive that can be wrapped by more specific framework or application code (like a react hook). If using react you will most likey want to keep the result of `onUpdate` in a state object. For managing dropdown selection UX I highly recommend [downshift](https://github.com/downshift-js/downshift).
npm package: @replit/codemirror-css-color-picker
Description: Enables a color picker input next to css colors
Author: Faris Masad
Latest version: 6.3.0

# CodeMirror Color Picker

<span><a href="https://replit.com/@util/Codemirror-CSS-color-picker" title="Run on Replit badge"><img src="https://replit.com/badge/github/replit/Codemirror-CSS-color-picker" alt="Run on Replit badge" /></a></span>
<span><a href="https://www.npmjs.com/package/@replit/codemirror-css-color-picker" title="NPM version badge"><img src="https://img.shields.io/npm/v/@replit/codemirror-css-color-picker?color=blue" alt="NPM version badge" /></a></span>

A CodeMirror extension that adds a color picker input next to CSS color values.

![preview](https://replit.com/cdn-cgi/image/width=3840,quality=80/https://storage.googleapis.com/replit/images/1632627522442_46320608eaa3f0c58bebd5fe4a10efc2.gif)

### Usage

```ts
import { basicSetup } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { css } from '@codemirror/lang-css';
import { colorPicker, wrapperClassName } from '@replit/codemirror-css-color-picker';

new EditorView({
  parent: document.querySelector('#editor'),
  state: EditorState.create({
    doc: '.wow {\n  color: #fff;\n}',
    extensions: [
      basicSetup,
      css(),
      colorPicker,
      EditorView.theme({
        [`.${wrapperClassName}`]: {
          outlineColor: 'transparent',
        },
      }),
    ],
  }),
});
```

### Todos

- Investigate solutions for alpha values. `input[type="color"]` doesn't support alpha values, we could show another number input next to it for the alpha value.
npm package: @replit/codemirror-emacs
Description: Emacs keybindings for CodeMirror 6
Latest version: 6.1.0

# Emacs keybindings for CM6

<span><a href="https://replit.com/@util/codemirror-emacs" title="Run on Replit badge"><img src="https://replit.com/badge/github/replit/codemirror-emacs" alt="Run on Replit badge" /></a></span>
<span><a href="https://www.npmjs.com/package/@replit/codemirror-emacs" title="NPM version badge"><img src="https://img.shields.io/npm/v/@replit/codemirror-emacs?color=blue" alt="NPM version badge" /></a></span>

## Installation

`npm i @replit/codemirror-emacs`

## Usage

```js
import { basicSetup, EditorView } from 'codemirror';
import { emacs } from "@replit/codemirror-emacs"

new EditorView({
  doc: "",
  extensions: [
    // make sure emacs is included before other keymaps
    emacs(), 
    // include the default keymap and all other keymaps you want to use in insert mode
    basicSetup, 
  ],
  parent: document.querySelector('#editor'),
})
```
npm package: @replit/codemirror-interact
Description: Interact with custom values
Author: tga
Latest version: 6.3.1

# CodeMirror Interact

<span><a href="https://replit.com/@util/codemirror-interact" title="Run on Replit badge"><img src="https://replit.com/badge/github/replit/codemirror-interact" alt="Run on Replit badge" /></a></span>
<span><a href="https://www.npmjs.com/package/@replit/codemirror-interact" title="NPM version badge"><img src="https://img.shields.io/npm/v/@replit/codemirror-interact?color=blue" alt="NPM version badge" /></a></span>

A CodeMirror extension that lets you interact with different values (clicking, dragging, etc).

https://user-images.githubusercontent.com/9929523/147966613-270cdece-564f-4906-b6e8-b48975a0d9e2.mp4

[demo](https://replit.com/@util/codemirror-interact)

### Usage

```ts
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import interact from '@replit/codemirror-interact';

// hold Alt and drag / click values
new EditorView({
  state: EditorState.create({
    doc: 'const num = 123',
    extensions: [
      interact({
        rules: [
          // a rule for a number dragger
          {
            // the regexp matching the value
            regexp: /-?\b\d+\.?\d*\b/g,
            // set cursor to "ew-resize" on hover
            cursor: "ew-resize",
            // change number value based on mouse X movement on drag
            onDrag: (text, setText, e) => {
              const newVal = Number(text) + e.movementX;
              if (isNaN(newVal)) return;
              setText(newVal.toString());
            },
          }
        ],
      }),
    ],
  }),
  parent: document.querySelector('#editor'),
});
npm package: @replit/codemirror-lang-csharp
Description: A C# mode for CodeMirror 6
Author: Alan Forshaw
Latest version: 6.2.0

# CodeMirror C# Language Support

A CodeMirror extension that provides C# syntax highlighting and language support.


### Usage

```ts
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { csharp } from "@replit/codemirror-lang-csharp";
import { basicSetup } from 'codemirror';

new EditorView({
  state: EditorState.create({
    doc: `
using System;
namespace Test
{
  class Program
  {
    public static void Main(string[] args)
    {
      Console.WriteLine("Hello, world!");
    }
  }
}
`,
    extensions: [basicSetup, csharp()],
  }),
  parent: document.querySelector('#editor'),
});
```
npm package: @replit/codemirror-lang-nix
Description: A Nix mode for CodeMirror 6
Author: Connor Brewster
Latest version: 6.0.1

# CodeMirror Nix Mode

[![Run on Repl.it](https://replit.com/badge/github/replit/codemirror-lang-nix)](https://replit.com/@util/codemirror-lang-nix)
<span class="badge-npmversion"><a href="https://npmjs.org/package/@replit/codemirror-lang-nix" title="View this project on NPM"><img src="https://img.shields.io/npm/v/@replit/codemirror-lang-nix.svg" alt="NPM version" /></a></span>

A codemirror extension that adds Nix syntax highlighting and language features.

![example of Nix syntax highlighting](public/nix.png)

### Usage

```typescript
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { nix } from "@replit/codemirror-lang-nix";
import { basicSetup } from 'codemirror';

new EditorView({
  state: EditorState.create({
    doc: `{ pkgs ? import <nixpkgs> {} }: pkgs.mkShell { buildInputs = [ pkgs.nodejs ]; }`,
    extensions: [basicSetup, nix()],
  }),
  parent: document.querySelector('#editor'),
});
```
npm package: @replit/codemirror-lang-solidity
Description: Solidity language support for CM6
Author: Sergei Chestakov
Latest version: 6.0.2

# CodeMirror Solidity Language Support

<span><a href="https://replit.com/@util/codemirror-lang-solidity" title="Run on Replit badge"><img src="https://replit.com/badge/github/replit/codemirror-indentation-markers" alt="Run on Replit badge" /></a></span>
<span><a href="https://www.npmjs.com/package/@replit/codemirror-lang-solidity" title="NPM version badge"><img src="https://img.shields.io/npm/v/@replit/codemirror-lang-solidity?color=blue" alt="NPM version badge" /></a></span>

A CodeMirror extension that provides Solidity syntax highlighting and language support.

![Screenshot](public/cm-solidity-support.png)

### Usage

```ts
import { basicSetup } from 'codemirror';
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { solidity } from '@replit/codemirror-lang-solidity';

const doc = `
pragma solidity ^0.8.10;

contract EtherWallet {
    address payable public owner;

    constructor() {
        owner = payable(msg.sender);
    }

    receive() external payable {}

    function withdraw(uint _amount) external {
        require(msg.sender == owner, "caller is not owner");
        payable(msg.sender).transfer(_amount);
    }

    function getBalance() external view returns (uint) {
        return address(this).balance;
    }
}
`

new EditorView({
  state: EditorState.create({
    doc,
    extensions: [
      basicSetup,
      solidity,
    ],
  }),
  parent: document.querySelector('#editor'),
});
```
npm package: @replit/codemirror-lang-svelte
Description: Svelte language support for CodeMirror 6
Author: Brian Pool
Latest version: 6.0.0

# CodeMirror Svelte Mode

This is a CodeMirror 6 extension that adds support for Svelte.

### Usage

```typescript
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { svelte } from "@replit/codemirror-lang-svelte";
import { basicSetup } from 'codemirror';

new EditorView({
  state: EditorState.create({
    doc: `<script>let a = "hello world";</script> <div>{a}</div>`,
    extensions: [basicSetup, svelte()],
  }),
  parent: document.querySelector('#editor'),
});
```
npm package: @replit/codemirror-minimap
Description: <div style="display:flex">     <span style="margin-right:4px">         <a href="https://replit.com/github/replit/codemirror-minimap" title="Run on Replit badge"><img src="https://replit.com/badge/github/replit/codemirror-minimap" alt="Run on Replit badge"
Author: Brady Madden
Latest version: 0.5.2

# Minimap for Codemirror 6

<div style="display:flex">
    <span style="margin-right:4px">
        <a href="https://replit.com/github/replit/codemirror-minimap" title="Run on Replit badge"><img src="https://replit.com/badge/github/replit/codemirror-minimap" alt="Run on Replit badge" /></a>
    </span>
    <span>
        <a href="https://www.npmjs.com/package/@replit/codemirror-minimap" title="NPM version badge"><img src="https://img.shields.io/npm/v/@replit/codemirror-minimap?style=flat&color=orange" height="32" alt="NPM version badge" /></a>
    </span>
</div>
<br />
<div style="display:flex">
    <img height="275" alt="image" src="https://github.com/replit/codemirror-minimap/assets/16962017/cb2f33a2-726f-4395-a8bd-8d219a74b1e6">
    <img height="275" alt="image" src="https://github.com/replit/codemirror-minimap/assets/16962017/3b148589-0883-4eb0-8b26-584909cb0900">
</div>
<br />


## Installation

```
bun i @replit/codemirror-minimap
```

## Usage

```typescript
import { basicSetup, EditorView } from 'codemirror';
import { showMinimap } from "@replit/codemirror-minimap"

let create = (v: EditorView) => {
  const dom = document.createElement('div');
  return { dom }
}

let view = new EditorView({
  doc: "",
  extensions: [
    basicSetup,
    showMinimap.compute(['doc'], (state) => {
      return {
        create,
        /* optional */
        displayText: 'blocks',
        showOverlay: 'always',
        gutters: [ { 1: '#00FF00', 2: '#00FF00' } ],
      }
    }),
  ],
  parent: document.querySelector('#editor'),
})
```

## Configuration Options

The minimap extension exposes a few configuration options:

**`displayText`**: customize how the editor text is displayed:

```typescript
/**
 * displayText?: "blocks" | "characters";
 * Defaults to "characters"
 */
{
  displayText: 'blocks'
}
```

**`eventHandlers`**: attach event handlers to the minimap container element

```typescript
/**
 * eventHandlers?: {[event in keyof DOMEventMap]?: EventHandler<event>}
 */
{
  eventHandlers: {
    'contextmenu': (e) => onContextMenu(e)
  }
}
```

**`showOverlay`**: customize when the overlay showing the current viewport is visible

```typescript
/**
 * showOverlay?: "always" | "mouse-over";
 * Defaults to "always"
 */
{
  showOverlay: 'mouse-over'
}
```

**`gutters`**: display a gutter on the left side of the minimap at specific lines

```typescript
/**
 * gutters?: Array<Record<number, string>>
 * Where `number` is line number, and `string` is a color
 */
{
  gutters: [ { 1: '#00FF00', 2: 'green', 3: 'rgb(0, 100, 50)' } ]
}
```

## Build and Publish

To build from source:

```
bun build
```

To publish a new version to NPM registry:

```
npm publish
```
npm package: @replit/codemirror-vim
Description: Vim keybindings for CodeMirror 6
Author: Yunchi Luo
Latest version: 6.3.0

# Vim keybindings for CM6

<span><a href="https://replit.com/@util/codemirror-vim" title="Run on Replit badge"><img src="https://replit.com/badge/github/replit/codemirror-vim" alt="Run on Replit badge" /></a></span>
<span><a href="https://www.npmjs.com/package/@replit/codemirror-vim" title="NPM version badge"><img src="https://img.shields.io/npm/v/@replit/codemirror-vim?color=blue" alt="NPM version badge" /></a></span>

## Installation

```sh
npm i @replit/codemirror-vim
```

## Usage

```js
import { basicSetup, EditorView } from 'codemirror';
import { vim } from "@replit/codemirror-vim"

let view = new EditorView({
  doc: "",
  extensions: [
    // make sure vim is included before other keymaps
    vim(), 
    // include the default keymap and all other keymaps you want to use in insert mode
    basicSetup, 
  ],
  parent: document.querySelector('#editor'),
})
```
> **Note**:
> if you are not using `basicSetup`, make sure you include the [drawSelection](https://codemirror.net/docs/ref/#view.drawSelection) plugin to correctly render the selection in visual mode.

## Usage of cm5 vim extension api

The same api that could be used in previous version of codemirror https://codemirror.net/doc/manual.html#vimapi, can be used with this plugin too, just replace the old editor instance with `view.cm` in your code

```js
import {Vim, getCM} from "@replit/codemirror-vim"

let cm = getCM(view)
// use cm to access the old cm5 api
Vim.exitInsertMode(cm)
Vim.handleKey(cm, "<Esc>")
```

### Define additional ex commands
```js
Vim.defineEx('write', 'w', function() {
    // save the file
});
```

### Map keys
```js
Vim.map("jj", "<Esc>", "insert"); // in insert mode
Vim.map("Y", "y$"); // in normal mode
```

### Unmap keys

```js
Vim.unmap("jj", "insert");
```

### Add custom key

```js
  defaultKeymap.push({ keys: 'gq', type: 'operator', operator: 'hardWrap' });
  Vim.defineOperator("hardWrap", function(cm, operatorArgs, ranges, oldAnchor, newHead) {
    // make changes and return new cursor position
  });
```

## Credits

This plugin was originally authored by [@mightyguava](https://github.com/mightyguava) (Yunchi Luo) as part of [CodeMirror](https://github.com/codemirror/dev), before being extracted and maintained here.
npm package: @replit/codemirror-vscode-keymap
Description: VSCode keyboard shortcuts for Codemirror 6
Author: Faris Masad
Latest version: 6.0.2

# CodeMirror VSCode Keymap

<span><a href="https://replit.com/@util/CodeMirror-VSCode-Keymap" title="Run on Replit badge"><img src="https://replit.com/badge/github/replit/codemirror-indentation-markers" alt="Run on Replit badge" /></a></span>
<span><a href="https://www.npmjs.com/package/@replit/codemirror-vscode-keymap" title="NPM version badge"><img src="https://img.shields.io/npm/v/@replit/codemirror-vscode-keymap?color=blue" alt="NPM version badge" /></a></span>

Ports VSCode's keyboard shortcuts to CodeMirror 6.

This keymap includes shortcuts for all the official extension and replaces codemirror default keymaps:
- autocomplete (make sure to set `defaultKeymap: false` when enabling this plugin)
- closebrackets
- commands
- comment
- fold
- history
- lint
- search

The keymap is based on the following:
- [Windows](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)
- [Mac](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)
- [Linux](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf)

### Usage
```ts
import { EditorView, keymap } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { javascript } from '@codemirror/lang-javascript';
import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";

const doc = `
function wow() {
  function hello() {
    console.log({
      lol: 1
    })
  }
}
`

new EditorView({
  state: EditorState.create({
    doc,
    extensions: [keymap.of(vscodeKeymap), javascript()],
  }),
  parent: document.querySelector('#editor'),
});
```

### Missing features
- Scroll Line Down	Ctrl+Down
- Scroll Line Up	Ctrl+Up
- Scroll Page Down	Alt+PageDown
- Scroll Page Up	Alt+PageUp