https://github.com/replit/codemirror-interact

https://github.com/replit/codemirror-interact

Last synced: 10 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/replit/codemirror-interact
• Owner: replit
• Created: 2021-12-20T21:28:06.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-06-19T17:15:52.000Z (over 1 year ago)
• Last Synced: 2025-04-13T09:12:35.177Z (10 months ago)
• Language: TypeScript
• Homepage: https://replit.com/@util/codemirror-interact
• Size: 248 KB
• Stars: 118
• Watchers: 37
• Forks: 5
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

});