vzcode 2.3.0 → 2.4.0

package/src/client/CodeEditor/InteractiveWidgets/colorsInTextPlugin.ts

@@ -0,0 +1,174 @@
+import { Extension, RangeSet } from '@codemirror/state';
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  WidgetType,
+} from '@codemirror/view';
+import { colorPickerRegex } from './colorPicker';
+
+const colorCircleTheme = EditorView.baseTheme({
+  '.color-circle-parent': {
+    display: 'inline-block',
+    cursor: 'inherit',
+  },
+});
+
+class ColorWidget extends WidgetType {
+  color: string;
+  constructor(color: string) {
+    super();
+    this.color = color;
+  }
+
+  eq(widget: ColorWidget): boolean {
+    return widget.color === this.color;
+  }
+
+  toDOM(): HTMLElement {
+    const parent = document.createElement('div');
+    const size = 20;
+    const innerSize = 14;
+
+    parent.setAttribute(
+      'style',
+      `width:${size}px;height:${size}px;position:relative;`,
+      // Position relative for the hovering tool tip to work
+    );
+    parent.className = 'color-circle-parent';
+    const svg = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'svg',
+    );
+    const colorCircle = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'circle',
+    );
+    colorCircle.setAttributeNS(
+      null,
+      'fill',
+      this.color.replace(/["']/g, ''),
+    );
+    colorCircle.setAttributeNS(null, 'stroke', 'white');
+    colorCircle.setAttributeNS(
+      null,
+      'stroke-width',
+      '0.75',
+    );
+    colorCircle.setAttributeNS(
+      null,
+      'r',
+      '' + innerSize / 2,
+    );
+    colorCircle.setAttributeNS(null, 'cx', '' + size / 2);
+    colorCircle.setAttributeNS(
+      null,
+      'cy',
+      '' + (size / 2 - 1),
+    );
+
+    svg.setAttributeNS(null, 'width', '' + size);
+    svg.setAttributeNS(null, 'height', '' + size);
+
+    svg.appendChild(colorCircle);
+
+    parent.appendChild(svg);
+
+    // Hovering tool tip shortcut for when users hover over color circle
+    const hoveringTooltip = document.createElement('div');
+
+    // Set class for tooltip to use CSS styles
+    hoveringTooltip.className = 'tooltip_hover_circle';
+
+    hoveringTooltip.innerHTML = `<strong>Alt + Click on a hex color</strong><br />
+      <div>Open a color picker to modify the color</div>`;
+
+    parent.appendChild(hoveringTooltip);
+
+    // Timer to prevent constant pop-ups when scrolling through code
+    let hoverTimeout: number;
+
+    // Fade in and fade out effect for when user hovers over the circle
+    // Mouse Event to set y and x of the tool tip pop up to prevent overlap onto circle
+    parent.addEventListener(
+      'mouseenter',
+      (event: MouseEvent) => {
+        hoverTimeout = window.setTimeout(() => {
+          hoveringTooltip.style.top = `${event.clientY - 60}px`;
+          hoveringTooltip.style.left = `${event.clientX}px`;
+          hoveringTooltip.style.opacity = '1';
+        }, 700);
+      },
+    );
+
+    parent.addEventListener('mouseleave', () => {
+      clearTimeout(hoverTimeout);
+      hoveringTooltip.style.opacity = '0';
+    });
+
+    return parent;
+  }
+
+  ignoreEvent() {
+    return false;
+  }
+}
+
+export const colorsInTextPlugin: Extension = [
+  ViewPlugin.fromClass(
+    class {
+      decorations: any;
+      view: EditorView;
+      constructor(view: EditorView) {
+        this.decorations = RangeSet.of([]);
+        this.view = view;
+      }
+    },
+    {
+      decorations: (v) => {
+        const colorInfos = [];
+
+        const lines = v.view.state.doc.iter();
+        let line = lines.next();
+
+        // Offset is the number of characters before the hex
+        // so the circle can be placed properly.
+        let offset = 0;
+        while (!line.done) {
+          if (line.value === '\n') {
+            offset++;
+            line = lines.next();
+            continue;
+          }
+          const hexColorOccurences = line.value.matchAll(
+            colorPickerRegex,
+          );
+          let hexOccurance = hexColorOccurences.next();
+          while (!hexOccurance.done) {
+            const offsetColorInfo = hexOccurance.value;
+            offsetColorInfo.index += offset;
+            colorInfos.push(offsetColorInfo);
+            hexOccurance = hexColorOccurences.next();
+          }
+          offset += line.value.length;
+          line = lines.next();
+        }
+
+        return Decoration.set(
+          colorInfos.map((colorInfo) => {
+            return {
+              // 7 is the length of the hex color string
+              from: colorInfo.index + 7,
+              to: colorInfo.index + 7,
+              value: Decoration.widget({
+                side: -1,
+                widget: new ColorWidget(colorInfo[0]),
+              }),
+            };
+          }),
+        );
+      },
+    },
+  ),
+  colorCircleTheme,
+];

package/src/client/CodeEditor/InteractiveWidgets/highlightWidgets.ts

@@ -0,0 +1,79 @@
+// TODO - This file is not being used.
+// It was an attempt to highlight the interactive widgets in the editor.
+// It is a good idea to keep this file for future reference, as it's
+// pretty close to what we need to implement. It suffers from the following
+// issues:
+// - Hardcoded regexes for interactive widgets - we can pull from the various modules
+// - The highlight is not working properly - it's not un-highlighting
+//   when the Alt key is released. This is likely due to the fact that the
+//   plugin is not being updated when the key is released.
+
+// export const highlightWidgets = ViewPlugin.fromClass(
+//   class {
+//     showHighlight: boolean;
+//     view: EditorView;
+//     constructor(view: EditorView) {
+//       this.showHighlight = false;
+//       this.view = view;
+//     }
+//   },
+//   {
+//     decorations: (v) => {
+//       if (!v.showHighlight) {
+//         return Decoration.none;
+//       }
+
+//       const interactOpportunities = [];
+//       const lines = v.view.state.doc.iter();
+//       let line = lines.next();
+
+//       //Offset is the number of characters before the regex so the highlighting can be placed properly.
+//       let offset = 0;
+//       while (!line.done) {
+//         if (line.value === '\n') {
+//           offset++;
+//           line = lines.next();
+//           continue;
+//         }
+//         const interactiveOccurances = line.value.matchAll(
+//           //The below line contains all of the Regexes for all of the interactive widgets.
+//           /\"\#([0-9]|[A-F]|[a-f]){6}\"|rotate\(-?\d*\.?\d*\)|https?:\/\/[^ "]+|vec2\(-?\b\d+\.?\d*\b\s*(,\s*-?\b\d+\.?\d*\b)?\)|true|false|(?<!\#)-?\b\d+\.?\d*\b|rgb\(.*\)/dg,
+//         );
+//         let interactOccurance =
+//           interactiveOccurances.next();
+//         while (!interactOccurance.done) {
+//           const offsetInteract = interactOccurance.value;
+//           offsetInteract.indices[0][0] += offset;
+//           offsetInteract.indices[0][1] += offset;
+//           interactOpportunities.push(offsetInteract);
+//           interactOccurance = interactiveOccurances.next();
+//         }
+//         offset += line.value.length;
+//         line = lines.next();
+//       }
+//       return Decoration.set(
+//         interactOpportunities.map((opportunity) => {
+//           return {
+//             from: opportunity.indices[0][0],
+//             to: opportunity.indices[0][1],
+//             value: Decoration.mark({
+//               class: 'cm-interact ',
+//             }),
+//           };
+//         }),
+//       );
+//     },
+//     eventHandlers: {
+//       keydown(event, view) {
+//         if (event.key == 'Alt') {
+//           this.showHighlight = true;
+//         }
+//       },
+//       keyup(event, view) {
+//         if (event.key == 'Alt') {
+//           this.showHighlight = false;
+//         }
+//       },
+//     },
+//   },
+// );

package/src/client/CodeEditor/InteractiveWidgets/index.ts

@@ -0,0 +1,44 @@
+import interact, {
+  InteractRule,
+} from '@replit/codemirror-interact';
+import { urlClicker } from './urlClicker';
+import { colorPicker } from './colorPicker';
+import { numberDragger } from './numberDragger';
+import { boolToggler } from './boolToggler';
+import { vec2Slider } from './vec2Slider';
+import { rotateWidget } from './rotateWidget';
+import { markdownCheckboxToggler } from './markdownCheckboxToggler';
+
+// Additional supporting CodeMirror plugins.
+export { colorsInTextPlugin } from './colorsInTextPlugin';
+export { rotationIndicator } from './rotateWidget';
+
+// Interactive code widgets.
+//  * Number dragger
+//  * Boolean toggler
+//  * URL clicker
+//  * color picker
+// Inspired by:
+// https://github.com/replit/codemirror-interact/blob/master/dev/index.ts
+// `onInteract` is called when the user interacts with a widget.
+export const widgets = ({
+  onInteract,
+  customInteractRules,
+}: {
+  onInteract?: () => void;
+  customInteractRules?: Array<InteractRule>;
+}) => {
+  const rules: Array<InteractRule> = [
+    colorPicker(onInteract),
+    numberDragger(onInteract),
+    markdownCheckboxToggler(onInteract),
+    boolToggler(onInteract),
+    vec2Slider(onInteract),
+    rotateWidget(onInteract),
+    urlClicker,
+  ];
+  if (customInteractRules) {
+    rules.push(...customInteractRules);
+  }
+  return interact({ rules });
+};

package/src/client/CodeEditor/InteractiveWidgets/markdownCheckboxToggler.ts

@@ -0,0 +1,12 @@
+import { InteractRule } from '@replit/codemirror-interact';
+
+export const markdownCheckboxToggler = (
+  onInteract?: () => void,
+): InteractRule => ({
+  regexp: /\[[ x]\]/g, // Matches [ ], [x], [X]
+  cursor: 'pointer',
+  onClick: (text, setText) => {
+    setText(text === '[ ]' ? '[x]' : '[ ]');
+    if (onInteract) onInteract();
+  },
+});

package/src/client/CodeEditor/InteractiveWidgets/numberDragger.ts

@@ -0,0 +1,20 @@
+import { InteractRule } from '@replit/codemirror-interact';
+
+const numberDraggerRegex = /(?<!\#)-?\b\d+\.?\d*\b/g;
+
+// a rule for a number dragger
+export const numberDragger = (
+  onInteract?: () => void,
+): InteractRule => ({
+  // the regexp matching the value
+  regexp: numberDraggerRegex,
+  // 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());
+    if (onInteract) onInteract();
+  },
+});

package/src/client/CodeEditor/InteractiveWidgets/rotateWidget.ts

@@ -0,0 +1,143 @@
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  WidgetType,
+} from '@codemirror/view';
+import { InteractRule } from '@replit/codemirror-interact';
+
+let rotationOrigin: { x: number; y: number } = null;
+// Set rotation to the angle between the x-axis and a line
+// from the word "rotate" to the mouse pointer (while dragging).
+// The rotation is in range (-180,180]
+export const rotateWidget = (
+  onInteract?: () => void,
+): InteractRule => ({
+  regexp: /rotate\(-?\d*\.?\d*\)/g,
+  cursor: 'move',
+  onDragStart(text, setText, e) {
+    rotationOrigin = { x: e.clientX, y: e.clientY };
+  },
+
+  onDrag(text, setText, e) {
+    if (rotationOrigin == null) return;
+    const rotationDegree = Math.round(
+      (Math.atan2(
+        rotationOrigin.y - e.clientY,
+        e.clientX - rotationOrigin.x,
+      ) *
+        180) /
+        Math.PI,
+    );
+    //Calculate the angle between the x axis and a line from where the user first clicks to the current location of the mouse.
+    setText(`rotate(${rotationDegree})`);
+    const updateDragEvent = new CustomEvent(
+      'updateRotateDrag',
+      { detail: rotationDegree },
+    );
+
+    document.dispatchEvent(updateDragEvent);
+
+    if (onInteract) onInteract();
+  },
+  onDragEnd() {
+    rotationOrigin = null;
+  },
+});
+
+export const rotationIndicator = ViewPlugin.fromClass(
+  class {
+    view: EditorView;
+    textPosition?: number;
+    rotation: number;
+    constructor(view) {
+      this.view = view;
+      this.textPosition = null;
+      this.rotation = 0;
+
+      document.addEventListener(
+        'updateRotateDrag',
+        (e: CustomEvent) => {
+          this.textPosition = this.view.posAtCoords(
+            rotationOrigin,
+            false,
+          );
+
+          this.rotation = e.detail;
+        },
+      );
+    }
+  },
+  {
+    decorations: (v) => {
+      if (rotationOrigin === null) {
+        return Decoration.none;
+      }
+      return Decoration.set([
+        {
+          from: v.textPosition,
+          to: v.textPosition,
+          value: Decoration.widget({
+            side: -1,
+            widget: new RotationCircle(v.rotation),
+          }),
+        },
+      ]);
+    },
+  },
+);
+
+class RotationCircle extends WidgetType {
+  angle: number;
+  constructor(angle: number) {
+    super();
+    this.angle = angle;
+  }
+
+  toDOM(view: EditorView): HTMLElement {
+    const parent = document.createElement('div');
+
+    parent.setAttribute('style', 'width:20px;height:20px');
+    parent.className = 'color-circle-parent';
+    const svg = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'svg',
+    );
+    const colorCircle = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'circle',
+    );
+    colorCircle.setAttributeNS(null, 'fill', '#808080');
+    colorCircle.setAttributeNS(null, 'r', '5');
+    colorCircle.setAttributeNS(null, 'cx', '5');
+    colorCircle.setAttributeNS(null, 'cy', '5');
+
+    const indicatorLine = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'line',
+    );
+    indicatorLine.setAttributeNS(null, 'x1', '10');
+    indicatorLine.setAttributeNS(null, 'x2', '5');
+    indicatorLine.setAttributeNS(null, 'y1', '5');
+    indicatorLine.setAttributeNS(null, 'y2', '5');
+    indicatorLine.setAttributeNS(null, 'stroke', 'black');
+    indicatorLine.setAttributeNS(
+      null,
+      'transform',
+      `rotate(${360 - this.angle},5,5)`,
+    );
+
+    svg.setAttributeNS(null, 'viewBox', '0 0 10 10');
+    svg.setAttributeNS(null, 'width', '20');
+    svg.setAttributeNS(null, 'height', '20');
+
+    svg.appendChild(colorCircle);
+    svg.appendChild(indicatorLine);
+
+    parent.appendChild(svg);
+    return parent;
+  }
+  ignoreEvent() {
+    return false;
+  }
+}

package/src/client/CodeEditor/InteractiveWidgets/urlClicker.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from 'vitest';
+import { urlClickerRegex } from './urlClicker';
+
+describe('URL regex', () => {
+  test.each([
+    {
+      name: 'standard URL',
+      input:
+        'Visit https://example.com for more information.',
+      expected: ['https://example.com'],
+    },
+    {
+      name: 'URL with single quote at the end',
+      input: "Click here: https://example.com';",
+      expected: ['https://example.com'],
+    },
+    {
+      name: 'multiple URLs',
+      input:
+        'Check out https://site1.com and https://site2.com.',
+      expected: ['https://site1.com', 'https://site2.com'],
+    },
+    {
+      name: 'URL with query parameters',
+      input:
+        'Visit https://example.com?param1=value1&param2=value2.',
+      expected: [
+        'https://example.com?param1=value1&param2=value2',
+      ],
+    },
+    {
+      name: 'URL with parentheses',
+      input:
+        'See the map at https://example.com/maps?location=(123,456).',
+      expected: [
+        'https://example.com/maps?location=(123,456)',
+      ],
+    },
+    {
+      name: 'no URL present',
+      input: 'This text does not contain a URL.',
+      expected: [],
+    },
+  ])('$name', ({ input, expected }) => {
+    const matches = input.match(urlClickerRegex) || [];
+    expect(matches).toEqual(expected);
+  });
+});

package/src/client/CodeEditor/InteractiveWidgets/urlClicker.ts

@@ -0,0 +1,12 @@
+import { InteractRule } from '@replit/codemirror-interact';
+
+export const urlClickerRegex =
+  /https?:\/\/[^\s'")]*([^\s'",;.]|\([^\s'")]*\)|\b)/g;
+
+export const urlClicker: InteractRule = {
+  regexp: urlClickerRegex,
+  cursor: 'pointer',
+  onClick: (text: string) => {
+    window.open(text);
+  },
+};

package/src/client/CodeEditor/InteractiveWidgets/vec2Slider.ts

@@ -0,0 +1,25 @@
+// vec2 slider
+// Inspired by: https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L61
+
+import { InteractRule } from '@replit/codemirror-interact';
+
+export const vec2Slider = (
+  onInteract?: () => void,
+): InteractRule => ({
+  regexp:
+    /vec2\(-?\b\d+\.?\d*\b\s*(,\s*-?\b\d+\.?\d*\b)?\)/g,
+  cursor: 'move',
+
+  onDrag: (text, setText, e) => {
+    const res =
+      /vec2\((?<x>-?\b\d+\.?\d*\b)\s*(,\s*(?<y>-?\b\d+\.?\d*\b))?\)/.exec(
+        text,
+      );
+    const x = Number(res?.groups?.x);
+    let y = Number(res?.groups?.y);
+    if (isNaN(x)) return;
+    if (isNaN(y)) y = x;
+    setText(`vec2(${x + e.movementX}, ${y - e.movementY})`);
+    if (onInteract) onInteract();
+  },
+});

package/src/client/CodeEditor/basicSetup.ts

@@ -0,0 +1,73 @@
+// Customized "basic setup" for CodeMirror.
+// Mainly customized to remove keymaps, for compatibility with
+// codemirror-vscode-keymap.
+//
+// Inspired by
+// https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
+// https://github.com/replit/codemirror-vscode-keymap/blob/master/dev/basicSetupNoKeymap.ts
+import {
+  highlightSpecialChars,
+  drawSelection,
+  highlightActiveLine,
+  dropCursor,
+  rectangularSelection,
+  crosshairCursor,
+  lineNumbers,
+  highlightActiveLineGutter,
+} from '@codemirror/view';
+import { Extension, EditorState } from '@codemirror/state';
+import {
+  defaultHighlightStyle,
+  syntaxHighlighting,
+  indentOnInput,
+  bracketMatching,
+} from '@codemirror/language';
+import { history } from '@codemirror/commands';
+import { highlightSelectionMatches } from '@codemirror/search';
+import {
+  autocompletion,
+  closeBrackets,
+} from '@codemirror/autocomplete';
+
+export const basicSetup: Extension = (() => [
+  lineNumbers(),
+  highlightActiveLineGutter(),
+  highlightSpecialChars(),
+  history(),
+
+  // Not really a fan of foldGutter.
+  // Unclear if it's really useful.
+  // If we ever want to use it, we should
+  // make sure the styling is decent.
+  //   foldGutter(),
+  drawSelection(),
+  dropCursor(),
+  EditorState.allowMultipleSelections.of(true),
+  indentOnInput(),
+  syntaxHighlighting(defaultHighlightStyle, {
+    fallback: true,
+  }),
+  bracketMatching(),
+  closeBrackets(),
+  // We set this to `false` because that is prescribed by
+  // https://github.com/replit/codemirror-vscode-keymap
+  autocompletion({ defaultKeymap: false }),
+
+  rectangularSelection(),
+  crosshairCursor(),
+  highlightActiveLine(),
+  highlightSelectionMatches(),
+
+  // All of these keymaps are disabled because we use
+  // codemirror-vscode-keymap, which provides its own
+  // keymaps for all of these things.
+  //   keymap.of([
+  //     ...closeBracketsKeymap,
+  //     ...defaultKeymap,
+  //     ...searchKeymap,
+  //     ...historyKeymap,
+  //     // ...foldKeymap,
+  //     ...completionKeymap,
+  //     ...lintKeymap,
+  //   ]),
+])();