vzcode 0.23.0 → 0.25.0

package/src/client/themes/vizhubTheme/colors.ts

@@ -0,0 +1,80 @@
+// import { hcl } from 'd3-color';
+
+// This module defines all the colors for the VizHub theme.
+// Ported from the CodeMirror 5 theme defined here:
+// https://github.com/vizhub-core/vizhub-legacy/blob/01cadfb78a2611df32f981b1fd8136b70447de9e/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/themes/vizHub.js
+
+// This is how the colors were generated:
+// const sidebarDark = hcl('#3d4b65');
+// const sidebarLight = hcl('#5b677d');
+// const luminaceDifference = sidebarLight.l - sidebarDark.l;
+// const backgroundLuminance =
+//   sidebarDark.l - luminaceDifference * 1.1;
+// const luminance = 90;
+// export const backgroundColor = hcl(
+//   sidebarDark.h,
+//   sidebarDark.c,
+//   backgroundLuminance,
+// ).formatHex();
+// export const light = hcl(0, 0, luminance).formatHex();
+// export const dark = hcl(
+//   sidebarDark.h,
+//   sidebarDark.c,
+//   80,
+// ).formatHex();
+// console.log(
+//   JSON.stringify(
+//     {
+//       backgroundColor,
+//       light,
+//       dark,
+//     },
+//     null,
+//     2,
+//   ),
+// );
+
+// These are inlined from the above code, but the code is kept around for future reference.
+export const backgroundColor = '#202e46';
+export const light = '#e2e2e2';
+export const dark = '#b9c7e6';
+
+export const lineNumbers = 'rgba(255,255,255,0.2)';
+export const lineNumbersActive = 'rgba(255,255,255,0.5)';
+export const selectionBackground = '#000';
+export const selectionBackgroundMatch = 'rgba(0,0,0,0.4)';
+export const lineHighlight = 'rgba(0,0,0,0.1)';
+export const caretColor = 'white';
+
+// Compute 6 colors that are evenly spaced in terms of hue
+// Keeping this code around for future reference
+// const rotation = 0.397;
+// const numColors = 6;
+// const highlightColors = Array.from(
+//   { length: numColors },
+//   (_, i) => {
+//     let t = (i / numColors + rotation) % 1;
+//     return hcl(t * 360, saturation, luminance).formatHex();
+//   },
+// );
+// console.log(JSON.stringify(highlightColors));
+
+// We inline the colors here, but the code above is how they were generated.
+const highlightColors = [
+  '#77fd8c',
+  '#00ffff',
+  '#66ecff',
+  '#ffb9ff',
+  '#ffabb3',
+  '#ffdb56',
+];
+
+export const MINT = highlightColors[0];
+export const AQUA = highlightColors[1];
+export const SKY = highlightColors[2];
+export const LAVENDER = highlightColors[3];
+export const SALMON = highlightColors[4];
+export const GOLDENROD = highlightColors[5];
+
+// Red that's not too bright, for errors
+export const PANIC = '#ff2222';

package/src/client/themes/vizhubTheme/index.ts

@@ -0,0 +1,166 @@
+// A CodeMirror 6 theme for the VizHub syntax highlighting colors.
+
+// Inspired by https://github.com/uiwjs/react-codemirror/blob/master/themes/vscode/src/index.ts
+
+import { tags as t } from '@lezer/highlight';
+import {
+  createTheme,
+  CreateThemeOptions,
+} from '@uiw/codemirror-themes';
+
+import {
+  // Colors for various things outside the code itself
+  backgroundColor,
+  lineHighlight,
+  light,
+  dark,
+  lineNumbers,
+  lineNumbersActive,
+  selectionBackground,
+  selectionBackgroundMatch,
+  caretColor,
+
+  // Syntax highlighting colors
+  MINT,
+  AQUA,
+  SKY,
+  LAVENDER,
+  SALMON,
+  GOLDENROD,
+  PANIC,
+} from './colors';
+
+const defaultSettingsVizhubTheme: CreateThemeOptions['settings'] =
+  {
+    background: backgroundColor,
+    foreground: light,
+    caret: caretColor,
+    selection: selectionBackground,
+    selectionMatch: selectionBackgroundMatch,
+    lineHighlight,
+    gutterBackground: backgroundColor,
+    gutterForeground: lineNumbers,
+    gutterActiveForeground: lineNumbersActive,
+  };
+
+function vizhubThemeInit(
+  options?: Partial<CreateThemeOptions>,
+) {
+  const {
+    theme = 'dark',
+    settings = {},
+    styles = [],
+  } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      ...defaultSettingsVizhubTheme,
+      ...settings,
+    },
+    styles: [
+      {
+        tag: [
+          t.keyword,
+          t.operatorKeyword,
+          t.modifier,
+          t.color,
+          t.constant(t.name),
+          t.standard(t.name),
+          t.standard(t.tagName),
+          t.special(t.brace),
+          t.atom,
+          t.bool,
+          t.special(t.variableName),
+        ],
+        color: MINT,
+      },
+      {
+        tag: [t.controlKeyword, t.moduleKeyword],
+        color: MINT,
+      },
+      {
+        tag: [
+          t.name,
+          t.deleted,
+          t.character,
+          t.macroName,
+
+          t.variableName,
+          t.labelName,
+          t.definition(t.name),
+        ],
+        color: AQUA,
+      },
+      {
+        tag: [t.propertyName],
+        color: GOLDENROD,
+      },
+      {
+        tag: t.heading,
+        fontWeight: 'bold',
+        color: SKY,
+      },
+      {
+        tag: [
+          t.typeName,
+          t.className,
+          t.tagName,
+          t.number,
+          t.changed,
+          t.annotation,
+          t.self,
+          t.namespace,
+        ],
+        color: AQUA,
+      },
+      {
+        tag: [
+          t.function(t.variableName),
+          t.function(t.propertyName),
+        ],
+        color: AQUA,
+      },
+      { tag: [t.number], color: SALMON },
+      {
+        tag: [
+          t.operator,
+          t.punctuation,
+          t.separator,
+          t.url,
+          t.escape,
+          t.regexp,
+        ],
+        color: light,
+      },
+      {
+        tag: [t.regexp],
+        color: LAVENDER,
+      },
+      {
+        tag: [t.special(t.string), t.string, t.inserted],
+        color: LAVENDER,
+      },
+      {
+        tag: [t.processingInstruction],
+        color: AQUA,
+      },
+      { tag: [t.angleBracket], color: AQUA },
+      { tag: t.strong, fontWeight: 'bold' },
+      { tag: t.emphasis, fontStyle: 'italic' },
+      {
+        tag: t.strikethrough,
+        textDecoration: 'line-through',
+      },
+      { tag: [t.meta, t.comment], color: dark },
+      {
+        tag: t.link,
+        color: GOLDENROD,
+        textDecoration: 'underline',
+      },
+      { tag: t.invalid, color: PANIC },
+      ...styles,
+    ],
+  });
+}
+
+export const vizhubTheme = vizhubThemeInit();

package/src/client/usePrettier/index.ts

@@ -4,7 +4,7 @@ import {
   ShareDBDoc,
   VZCodeContent,
 } from '../../types';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 // The time in milliseconds by which auto-saving is debounced.
 const autoPrettierDebounceTimeMS = 1200;
@@ -31,6 +31,14 @@ export const usePrettier = (
   // since the last Prettier run.
   const dirtyFiles: Set<FileId> = new Set<FileId>();
 
+  // State to hold the error from Prettier
+  // `null` means no errors
+  // If this is a string, it's the
+  // error message from Prettier.
+  const [prettierError, setPrettierError] = useState<
+    string | null
+  >(null);
+
   // A ref to keep track of whether an op is being applied.
   // This is used to prevent Prettier from running
   // when the op is coming from Prettier itself.
@@ -46,9 +54,18 @@ export const usePrettier = (
     const handleMessage = (event) => {
       const { fileId, error, fileTextPrettified } =
         event.data;
+
+      // Handle syntax errors
       if (error) {
-        console.log(error);
+        // If there's an error, set the error state
+        setPrettierError(error);
+
+        // Return early as there is no text change to apply.
         return;
+      } else {
+        // Make sure the error overlay goes away
+        // when Prettier runs successfully with no errors.
+        setPrettierError(null);
       }
 
       isApplyingOpRef.current = true;
@@ -159,19 +176,20 @@ export const usePrettier = (
         } else {
           // console.log('ignoring op from remote', op, isLocal);
         }
-
-        // In the event that the component unmounts,
-        return () => {
-          // Remove the event listener
-          prettierWorker.removeEventListener(
-            'message',
-            handleMessage,
-          );
-
-          // Clear the timeout
-          clearTimeout(debounceTimeout);
-        };
       },
     );
+
+    // In the event that the component unmounts,
+    return () => {
+      // Remove the event listener
+      prettierWorker.removeEventListener(
+        'message',
+        handleMessage,
+      );
+
+      // Clear the timeout
+      clearTimeout(debounceTimeout);
+    };
   }, [shareDBDoc]);
+  return { prettierError }; // Return the errors for use in other files
 };

package/src/client/usePrettier/worker.ts

@@ -90,7 +90,7 @@ onmessage = async ({
   } catch (error) {
     postMessage({
       fileId,
-      error,
+      error: error.toString(),
     });
   }
 };