npm - vzcode - Versions diffs - 0.74.0 → 0.76.0 - Mend

vzcode 0.74.0 → 0.76.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/assets/{index-BaaNjNJK.js → index--cETBO9l.js} +13 -13
package/dist/assets/{index-Buql6gU0.css → index-BpuOxvvE.css} +1 -1
package/dist/index.html +2 -2
package/package.json +6 -6
package/src/client/CodeEditor/codemirror-interact.ts +409 -0
package/src/client/CodeEditor/style.scss +1 -0
package/src/client/CodeEditor/widgets.ts +5 -6
package/src/client/VZSidebar/Item.tsx +2 -2
package/src/server/generateAIResponse.js +1 -2

package/dist/index.html CHANGED Viewed

@@ -20,8 +20,8 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-BaaNjNJK.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Buql6gU0.css">
+    <script type="module" crossorigin src="/assets/index--cETBO9l.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BpuOxvvE.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.74.0",
+  "version": "0.76.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -63,7 +63,7 @@
   },
   "homepage": "https://github.com/vizhub-core/vzcode#readme",
   "dependencies": {
-    "@codemirror/autocomplete": "^6.14.0",
+    "@codemirror/autocomplete": "^6.15.0",
     "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-html": "^6.4.8",
     "@codemirror/lang-javascript": "^6.2.2",
@@ -90,7 +90,7 @@
     "@uiw/codemirror-themes": "^4.21.24",
     "body-parser": "^1.20.2",
     "codemirror": "^6.0.1",
-    "codemirror-ot": "^4.3.0",
+    "codemirror-ot": "^4.4.0",
     "color-hash": "^2.0.2",
     "d3-array": "^3.2.4",
     "diff-match-patch": "^1.0.5",
@@ -112,14 +112,14 @@
     "ws": "^8.16.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.21",
+    "@types/react": "^18.2.65",
+    "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",
     "concurrently": "^8.2.2",
     "prettier": "^3.2.5",
     "sass": "^1.71.1",
     "typescript": "^5.4.2",
-    "vite": "^5.1.5",
+    "vite": "^5.1.6",
     "vitest": "^1.3.1"
   }
 }

package/src/client/CodeEditor/codemirror-interact.ts ADDED Viewed

@@ -0,0 +1,409 @@
+// From https://github.com/replit/codemirror-interact/blob/master/src/interact.ts
+// as of March 13, 2024
+// Copied into this repo so that we can leverage the changes in PR
+// https://github.com/replit/codemirror-interact/pull/19
+// TODO move back to using the npm package once the PR is merged
+// TODO: custom style
+// TODO: custom state for each rule?
+import {
+  EditorView,
+  ViewPlugin,
+  PluginValue,
+  Decoration,
+} from '@codemirror/view';
+import {
+  StateEffect,
+  StateField,
+  Facet,
+  MapMode,
+} from '@codemirror/state';
+interface Target {
+  pos: number;
+  text: string;
+  rule: InteractRule;
+}
+export interface InteractRule {
+  regexp: RegExp;
+  cursor?: string;
+  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;
+}
+const interactField = StateField.define<Target | null>({
+  create: () => null,
+  update: (value, tr) => {
+    for (const e of tr.effects) {
+      if (e.is(setInteract)) {
+        return e.value;
+      }
+    }
+    if (!value) {
+      return null;
+    }
+    if (!tr.changes.empty) {
+      const newPos = tr.changes.mapPos(
+        value.pos,
+        -1,
+        MapMode.TrackDel,
+      );
+      const newEnd = tr.changes.mapPos(
+        value.pos + value.text.length,
+        -1,
+        MapMode.TrackDel,
+      );
+      if (newPos === null || newEnd === null) {
+        return null;
+      }
+      // if the text doesn't match anymore, we'll just return null
+      // rather than checking if the rule matches again
+      if (
+        tr.newDoc.sliceString(newPos, newEnd) !== value.text
+      ) {
+        return null;
+      }
+      return { ...value, pos: newPos };
+    }
+    return value;
+  },
+  provide: (field) => [
+    EditorView.decorations.from(field, (target) => {
+      if (!target) {
+        return Decoration.none;
+      }
+      const from = target.pos;
+      const to = target.pos + target.text.length;
+      const className = target.rule.className;
+      return Decoration.set(
+        mark({ className }).range(from, to),
+      );
+    }),
+    EditorView.contentAttributes.from(field, (target) => {
+      if (!target || !target.rule.cursor) {
+        return { style: '' };
+      }
+      return { style: `cursor: ${target.rule.cursor}` };
+    }),
+  ],
+});
+const setInteract = StateEffect.define<Target | null>();
+const mark = (e: { className?: string }) =>
+  Decoration.mark({
+    class: `cm-interact ${e?.className ?? ''}`,
+  });
+const interactTheme = EditorView.theme({
+  '.cm-interact': {
+    background: 'rgba(128, 128, 255, 0.2)',
+    borderRadius: '4px',
+  },
+});
+/**
+ * A rule that defines a type of value and its interaction.
+ *
+ * @example
+ * ```
+ * // a number dragger
+ * interactRule.of({
+ *     // 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());
+ *     },
+ * })
+ * ```
+ */
+export const interactRule = Facet.define<InteractRule>();
+export const interactModKey = Facet.define<ModKey, ModKey>({
+  combine: (values) => values[values.length - 1],
+});
+interface ViewState extends PluginValue {
+  target: Target | null;
+  dragging: boolean;
+  mouseX: number;
+  mouseY: number;
+  getMatch(): Target | null;
+  updateText(target: Target): (text: string) => void;
+  setTarget(target: Target | null): void;
+  isModKeyDown(e: KeyboardEvent | MouseEvent): boolean;
+  startDrag(e: MouseEvent): void;
+  endDrag(): void;
+}
+const interactViewPlugin = ViewPlugin.define<ViewState>(
+  (view) => ({
+    target: null,
+    dragging: false,
+    mouseX: 0,
+    mouseY: 0,
+    // Get current match under cursor from all rules
+    getMatch() {
+      const rules = view.state.facet(interactRule);
+      const pos = view.posAtCoords({
+        x: this.mouseX,
+        y: this.mouseY,
+      });
+      if (!pos) return null;
+      const line = view.state.doc.lineAt(pos);
+      const lpos = pos - line.from;
+      let match = null;
+      for (const rule of rules) {
+        // @ts-ignore
+        for (const m of line.text.matchAll(rule.regexp)) {
+          if (m.index === undefined) continue;
+          const text = m[0];
+          if (!text) continue;
+          const start = m.index;
+          const end = m.index + text.length;
+          if (lpos < start || lpos > end) continue;
+          // If there are overlap matches from different rules, use the smaller one
+          if (!match || text.length < match.text.length) {
+            match = {
+              rule: rule,
+              pos: line.from + start,
+              text: text,
+            };
+          }
+        }
+      }
+      return match;
+    },
+    updateText(target) {
+      return (text) => {
+        view.dispatch({
+          effects: setInteract.of({ ...target, text }),
+          changes: {
+            from: target.pos,
+            to: target.pos + target.text.length,
+            insert: text,
+          },
+        });
+      };
+    },
+    setTarget(target) {
+      this.target = target;
+      view.dispatch({ effects: setInteract.of(target) });
+    },
+    isModKeyDown(e) {
+      const modkey = view.state.facet(interactModKey);
+      const isMac =
+        Boolean(window.navigator) &&
+        window.navigator.userAgent.includes('Macintosh');
+      switch (modkey) {
+        case 'alt':
+          return e.altKey;
+        case 'shift':
+          return e.shiftKey;
+        case 'ctrl':
+          return e.ctrlKey;
+        case 'meta':
+          return e.metaKey;
+        case 'mod':
+          return isMac ? e.metaKey : e.ctrlKey;
+      }
+      throw new Error(`Invalid mod key: ${modkey}`);
+    },
+    update(update) {
+      const target = update.state.field(
+        interactField,
+        false,
+      );
+      // the field isn't mounted
+      if (target === undefined) {
+        return;
+      }
+      if (this.target !== target) {
+        this.target = target;
+        if (target === null) {
+          this.endDrag();
+        }
+      }
+    },
+    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),
+      );
+    },
+  }),
+  {
+    eventHandlers: {
+      mousedown(e, _view) {
+        if (!this.isModKeyDown(e)) return;
+        if (!this.target) return;
+        e.preventDefault();
+        // if (this.target.rule.onClick) {
+        //   this.target.rule.onClick(
+        //     this.target.text,
+        //     this.updateText(this.target),
+        //     e,
+        //   );
+        // }
+        if (this.target.rule.onClick) {
+          this.target.rule.onClick(
+            this.target.text,
+            (text) => {
+              this.target &&
+                this.updateText(this.target)(text);
+            },
+            e,
+          );
+        }
+        if (this.target.rule.onDrag) {
+          this.startDrag(e);
+        }
+      },
+      mousemove(e, _view) {
+        this.mouseX = e.clientX;
+        this.mouseY = e.clientY;
+        if (!this.isModKeyDown(e)) {
+          if (this.target) {
+            this.setTarget(null);
+          }
+          return;
+        }
+        if (this.target && this.dragging) {
+          if (this.target.rule.onDrag) {
+            this.target.rule.onDrag(
+              this.target.text,
+              this.updateText(this.target),
+              e,
+            );
+          }
+        } else {
+          this.setTarget(this.getMatch());
+        }
+      },
+      mouseup(e, _view) {
+        this.endDrag();
+        if (this.target && !this.isModKeyDown(e)) {
+          this.setTarget(null);
+        }
+        if (this.isModKeyDown(e)) {
+          this.setTarget(this.getMatch());
+        }
+      },
+      mouseleave(e, _view) {
+        this.endDrag();
+        if (this.target) {
+          this.setTarget(null);
+        }
+      },
+      // TODO: fix these keybindings
+      // these currently don't do anything because CodeMirror's keybinding
+      // system prevents these events from firing.
+      keydown(e, _view) {
+        if (!this.target && this.isModKeyDown(e)) {
+          this.setTarget(this.getMatch());
+        }
+      },
+      keyup(e, _view) {
+        if (this.target && !this.isModKeyDown(e)) {
+          this.endDrag();
+          this.setTarget(null);
+        }
+      },
+    },
+  },
+);
+type ModKey = 'alt' | 'shift' | 'meta' | 'ctrl' | 'mod';
+interface InteractConfig {
+  rules?: InteractRule[];
+  key?: ModKey;
+}
+const interact = (cfg: InteractConfig = {}) => [
+  interactField,
+  interactTheme,
+  interactViewPlugin,
+  interactModKey.of(cfg.key ?? 'alt'),
+  (cfg.rules ?? []).map((r) => interactRule.of(r)),
+];
+export default interact;

package/src/client/CodeEditor/style.scss CHANGED Viewed

@@ -6,6 +6,7 @@
   .cm-editor {
     flex: 1;
+    width: 100%;
   }
   .cm-scroller {

package/src/client/CodeEditor/widgets.ts CHANGED Viewed

@@ -1,15 +1,14 @@
-import interact from '@replit/codemirror-interact';
+// TODO move back to this way of importing when this PR is merged:
+// https://github.com/replit/codemirror-interact/pull/19/files
+// import interact from '@replit/codemirror-interact';
+import interact from './codemirror-interact';
 import {
   ViewPlugin,
   Decoration,
   WidgetType,
 } from '@codemirror/view';
-import {
-  Annotation,
-  Extension,
-  RangeSet,
-} from '@codemirror/state';
+import { Extension, RangeSet } from '@codemirror/state';
 import { EditorView } from 'codemirror';
 // Interactive code widgets.

package/src/client/VZSidebar/Item.tsx CHANGED Viewed

@@ -149,7 +149,7 @@ export const Item = ({
     >
       <div className="name">
         {isRenaming ? (
-          <React.Fragment>
+          <>
             <i className="file-icon">
               <FileSVG />
             </i>
@@ -163,7 +163,7 @@ export const Item = ({
               onBlur={onBlur}
               onChange={onChange}
             />
-          </React.Fragment>
+          </>
         ) : (
           children
         )}

package/src/server/generateAIResponse.js CHANGED Viewed

@@ -100,10 +100,9 @@ export const generateAIResponse = async ({
     shareDBDoc.submitOp(op, { source: AISourceName });
-    // Wait for 500ms
     if (slowdown) {
       await new Promise((resolve) => {
-        setTimeout(resolve, 1000);
+        setTimeout(resolve, 2000);
       });
     }