Merge pull request #35 from githubnext/aw/add-codemirror-interact

feat: code block - add number dragging
githubnext · Apr 5, 2022 · c6d4dcc · c6d4dcc
2 parents 7fcfe45 + e595bdd
commit c6d4dcc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -315,6 +315,7 @@
     "@primer/components": "^31.1.0",
     "@react-three/drei": "^7.20.5",
     "@react-three/fiber": "^7.0.19",
+    "@replit/codemirror-interact": "^0.19.2",
     "@tensorflow-models/universal-sentence-encoder": "^1.3.3",
     "@tensorflow/tfjs": "^3.14.0",
     "@types/d3": "^7.1.0",

diff --git a/src/blocks/file-blocks/code/index.tsx b/src/blocks/file-blocks/code/index.tsx
@@ -26,6 +26,7 @@ import { defaultHighlightStyle } from "@codemirror/highlight";
 import { lintKeymap } from "@codemirror/lint";
 import { LanguageDescription } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
+import interact from "@replit/codemirror-interact";
 
 const languageConf = new Compartment();
 
@@ -48,6 +49,20 @@ const extensions = [
   rectangularSelection(),
   highlightActiveLine(),
   highlightSelectionMatches(),
+  interact({
+    rules: [
+      // dragging numbers
+      {
+        regexp: /-?\b\d+\.?\d*\b/g,
+        cursor: "ew-resize",
+        onDrag: (text, setText, e) => {
+          const newVal = Number(text) + e.movementX;
+          if (isNaN(newVal)) return;
+          setText(newVal.toString());
+        },
+      },
+    ],
+  }),
   keymap.of([
     ...closeBracketsKeymap,
     ...defaultKeymap,

diff --git a/yarn.lock b/yarn.lock
@@ -1528,6 +1528,11 @@
     utility-types "^3.10.0"
     zustand "^3.5.1"
 
+"@replit/codemirror-interact@^0.19.2":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@replit/codemirror-interact/-/codemirror-interact-0.19.2.tgz#4ce3075e749e070e1bf9c42bd91e8f8b0263e3e6"
+  integrity sha512-pDNZHkA0uhXB89ctPZ4wMubuP/nYc1oF2ebEtvM8yfkVns1iq1Y/MMIMWrESdL2OfWhhFtZksZVhkoNHuNbJWw==
+
 "@rollup/pluginutils@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.0.tgz#a14bbd058fdbba0a5647143b16ed0d86fb60bd08"