@replit/codemirror-interact
TypeScript icon, indicating that this package has built-in type declarations

6.3.0 • Public • Published

CodeMirror Interact

Run on Replit badge NPM version badge

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

Usage

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

Readme

Keywords

none

Package Sidebar

Install

npm i @replit/codemirror-interact

Weekly Downloads

29,169

Version

6.3.0

License

MIT

Unpacked Size

29.6 kB

Total Files

6

Last publish

Collaborators

  • ryanweingast
  • harryatreplit
  • theflowingsky
  • jonesit-replit
  • szymon_k
  • cdmistman
  • jackyzha0
  • jamesaustinreplit
  • lopezhoracio
  • bradymaddenreplit
  • ryantm
  • alexisreplit
  • ink404
  • brianpool
  • tobyho
  • brenoafb
  • giuseppeatreplit
  • masad-frost
  • lincolnreplit
  • stkenned
  • replitmatt
  • cbrewster
  • ltazmin_replit
  • moudy
  • schestakov
  • lhchavez
  • slmjkdbtl
  • lunaroyster