# @replit/codemirror-interact

> Interact with custom values

Latest version **6.3.1** (published 2024-03-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @replit/codemirror-interact
pnpm add @replit/codemirror-interact
yarn add @replit/codemirror-interact
bun add @replit/codemirror-interact
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.3.1 |
| Published | 2024-03-26 |
| First published | 2022-01-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 29.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tga |
| Maintainers | james-addison-replit, replitdstewart, ryanweingast, harryatreplit, theflowingsky, jonesit-replit, szymon_k, cdmistman, jackyzha0, jamesaustinreplit, lopezhoracio, bradymaddenreplit, ryantm, alexisreplit, ink404, brianpool, tobyho, brenoafb, masad-frost, lincolnreplit, stkenned, replitmatt, cbrewster, ltazmin_replit, moudy, schestakov, lhchavez, slmjkdbtl, lunaroyster |

## Links

- npm: https://www.npmjs.com/package/@replit/codemirror-interact
- npm.io page: https://npm.io/package/@replit/codemirror-interact

## Dependencies (1)

- [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.2.1

## Recent versions

- 6.3.1 (latest) — 2024-03-26
- 6.3.0 — 2023-08-23
- 6.1.0 — 2023-03-04
- 6.0.4 — 2023-03-03
- 6.0.3 — 2023-03-03
- 6.0.2 — 2022-08-25
- 6.0.1 — 2022-06-23
- 6.0.0 — 2022-06-23
- 0.20.0 — 2022-04-22
- 0.19.2 — 2022-01-05
- 0.19.1 — 2022-01-03
- 0.19.0 — 2022-01-03

## README

# 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'),
});

---
_Source: https://npm.io/package/@replit/codemirror-interact · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._