vzcode 2.2.0 → 2.3.0

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

@@ -1,174 +0,0 @@
-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

@@ -1,79 +0,0 @@
-// 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

@@ -1,44 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,143 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,25 +0,0 @@
-// 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

@@ -1,73 +0,0 @@
-// 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,
-  //   ]),
-])();