codemirror-interact

KO | EN

gitlite — search

#react #ai #go #android #deep-learning #docker #java #awesome #awesome-list #vue #pytorch #ios #mcp #open-source

codemirror-interact

(★ 125)

No description available.

codemirror-interact Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# CodeMirror Interact

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

codemirror-interact

codemirror-interact Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

codemirror-interact

codemirror-interact Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README