@replit/codemirror-interact - npm Package Compare versions

Comparing version 6.1.0 to 6.3.0

dist/index.d.ts

@@ -13,4 +13,7 @@ import * as _codemirror_state from '@codemirror/state';
     style?: any;
+    className?: string;
     onClick?: (text: string, setText: (t: string) => void, e: MouseEvent) => void;
     onDrag?: (text: string, setText: (t: string) => void, e: MouseEvent) => void;
+    onDragStart?: (text: string, setText: (t: string) => void, e: MouseEvent) => void;
+    onDragEnd?: (text: string, setText: (t: string) => void) => void;
 }
@@ -17,0 +20,0 @@ /**

dist/index.js

@@ -38,3 +38,4 @@ import { EditorView, Decoration, ViewPlugin } from '@codemirror/view';
             const to = target.pos + target.text.length;
-            return Decoration.set(mark.range(from, to));
+            const className = target.rule.className;
+            return Decoration.set(mark({ className }).range(from, to));
         }),
@@ -50,3 +51,8 @@ EditorView.contentAttributes.from(field, (target) => {
 const setInteract = /*@__PURE__*/StateEffect.define();
-const mark = /*@__PURE__*/Decoration.mark({ class: 'cm-interact' });
+const mark = (e) => {
+    var _a;
+    return Decoration.mark({
+        class: `cm-interact ${(_a = e === null || e === void 0 ? void 0 : e.className) !== null && _a !== void 0 ? _a : ''}`
+    });
+};
 const interactTheme = /*@__PURE__*/EditorView.theme({
@@ -157,6 +163,25 @@ '.cm-interact': {
             if (target === null) {
-                this.dragging = false;
+                this.endDrag();
             }
         }
     },
+    startDrag(e) {
+        if (this.dragging)
+            return;
+        if (!this.target)
+            return;
+        this.dragging = true;
+        if (!this.target.rule.onDragStart)
+            return;
+        this.target.rule.onDragStart(this.target.text, this.updateText(this.target), e);
+    },
+    endDrag() {
+        var _a;
+        if (!this.dragging)
+            return;
+        this.dragging = false;
+        if (!((_a = this.target) === null || _a === void 0 ? void 0 : _a.rule.onDragEnd))
+            return;
+        this.target.rule.onDragEnd(this.target.text, this.updateText(this.target));
+    },
 }), {
@@ -167,11 +192,10 @@ eventHandlers: {
                 return;
-            const match = this.getMatch();
-            if (!match)
+            if (!this.target)
                 return;
             e.preventDefault();
-            if (match.rule.onClick) {
-                match.rule.onClick(match.text, this.updateText(match), e);
+            if (this.target.rule.onClick) {
+                this.target.rule.onClick(this.target.text, this.updateText(this.target), e);
             }
-            if (match.rule.onDrag) {
-                this.dragging = true;
+            if (this.target.rule.onDrag) {
+                this.startDrag(e);
             }
@@ -198,3 +222,3 @@ },
         mouseup(e, _view) {
-            this.dragging = false;
+            this.endDrag();
             if (this.target && !this.isModKeyDown(e)) {
@@ -207,4 +231,4 @@ this.setTarget(null);
         },
-        mouseleave(_e, _view) {
-            this.dragging = false;
+        mouseleave(e, _view) {
+            this.endDrag();
             if (this.target) {
@@ -224,2 +248,3 @@ this.setTarget(null);
             if (this.target && !this.isModKeyDown(e)) {
+                this.endDrag();
                 this.setTarget(null);
@@ -226,0 +251,0 @@ }

package.json

 {
   "name": "@replit/codemirror-interact",
   "description": "Interact with custom values",
-  "version": "6.1.0",
+  "version": "6.3.0",
   "license": "MIT",
@@ -38,3 +38,6 @@ "author": {
     "vite": "^3.0.0"
+  },
+  "dependencies": {
+    "@codemirror/state": "^6.2.1"
   }
 }

src/interact.ts

@@ -26,4 +26,7 @@ // TODO: custom style
   style?: any,
+  className?: string,
   onClick?: (text: string, setText: (t: string) => void, e: MouseEvent) => void,
   onDrag?: (text: string, setText: (t: string) => void, e: MouseEvent) => void,
+  onDragStart?: (text: string, setText: (t: string) => void, e: MouseEvent) => void,
+  onDragEnd?: (text: string, setText: (t: string) => void) => void,
 }
@@ -72,4 +75,5 @@
       const to = target.pos + target.text.length;
+      const className = target.rule.className;
 
-      return Decoration.set(mark.range(from, to))
+      return Decoration.set(mark({ className }).range(from, to))
     }),
@@ -88,4 +92,7 @@ EditorView.contentAttributes.from(field, (target) => {
 
-const mark = Decoration.mark({ class: 'cm-interact' });
+const mark = (e: { className?: string }) => Decoration.mark({
+  class: `cm-interact ${e?.className ?? ''}`
+});
 
+
 const interactTheme = EditorView.theme({
@@ -133,2 +140,4 @@ '.cm-interact': {
   isModKeyDown(e: KeyboardEvent | MouseEvent): boolean,
+  startDrag(e: MouseEvent): void,
+  endDrag(): void,
 }
@@ -221,3 +230,3 @@
       if (target === null) {
-        this.dragging = false
+        this.endDrag();
       }
@@ -227,2 +236,17 @@ }
 
+  startDrag(e: MouseEvent) {
+    if (this.dragging) return
+    if (!this.target) return;
+    this.dragging = true
+    if (!this.target.rule.onDragStart) return;
+    this.target.rule.onDragStart(this.target.text, this.updateText(this.target), e);
+  },
+
+  endDrag() {
+    if (!this.dragging) return
+    this.dragging = false
+    if (!this.target?.rule.onDragEnd) return;
+    this.target.rule.onDragEnd(this.target.text, this.updateText(this.target));
+  },
+
 }), {
@@ -232,14 +256,12 @@ eventHandlers: {
       if (!this.isModKeyDown(e)) return;
+      if (!this.target) return;
 
-      const match = this.getMatch();
-      if (!match) return;
-
       e.preventDefault();
 
-      if (match.rule.onClick) {
-        match.rule.onClick(match.text, this.updateText(match), e);
+      if (this.target.rule.onClick) {
+        this.target.rule.onClick(this.target.text, this.updateText(this.target), e);
       };
 
-      if (match.rule.onDrag) {
-        this.dragging = true
+      if (this.target.rule.onDrag) {
+        this.startDrag(e);
       }
@@ -271,3 +293,3 @@ },
     mouseup(e, _view) {
-      this.dragging = false
+      this.endDrag();
 
@@ -283,4 +305,4 @@ if (this.target && !this.isModKeyDown(e)) {
 
-    mouseleave(_e, _view) {
-      this.dragging = false;
+    mouseleave(e, _view) {
+      this.endDrag();
       if (this.target) {
@@ -303,2 +325,3 @@ this.setTarget(null)
       if (this.target && !this.isModKeyDown(e)) {
+        this.endDrag();
         this.setTarget(null)
@@ -305,0 +328,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

29560

increased by9.95%

Lines of code

850

increased by9.54%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Added@codemirror/state@^6.2.1