vzcode 2.3.0 → 2.4.0

package/src/client/tabsSearchParameters.ts

@@ -0,0 +1,137 @@
+import { TabState } from '../types';
+import { VizFileId, VizContent } from '@vizhub/viz-types';
+
+// The delimiter used to separate file names in the `tabs` parameter.
+// We need a character that is both URL-safe (does not get escaped in URLs)
+// and is not typically found in file names, especially for JavaScript and CSS files.
+//
+// The following characters are not URL-safe as they get converted to escaped sequences in URLs,
+// leading to less readable URLs:
+// - `+` becomes `%2B`
+// - `|` becomes `%7C`
+// - `;` becomes `%3B`
+// - `:` becomes `%3A`
+// - `,` becomes `%2C`
+// - `!` becomes `%21`
+// - `/` becomes `%2F`
+//
+// The following characters, while URL-safe, are commonly used in file names,
+// hence using them could lead to conflicts or misinterpretation:
+// - `.` commonly used as a dot separator in file names and extensions
+// - ` ` (space) often found in file names but can lead to issues in URLs
+// - `-` (hyphen) frequently used in file and folder names for readability
+// - `_` (underscore) also commonly used in file and folder names
+//
+// Considering the above constraints, we need a character that is both URL-safe
+// and not typically used in file names. The following character meets these criteria:
+// - `~` is URL-safe (remains unescaped in URLs) and is not a standard character
+//   in file names for JavaScript and CSS files, making it a suitable choice for a delimiter.
+export const delimiter = '~';
+
+// Gets the file id of a file with the given name.
+// Returns null if not found.
+const getFileId = (
+  content: VizContent,
+  fileName: string,
+): string | null => {
+  if (content && content.files) {
+    for (const fileId of Object.keys(content.files)) {
+      const file = content.files[fileId];
+      if (file.name === fileName) {
+        return fileId;
+      }
+    }
+  }
+  return null;
+};
+
+// Gets the file name of a file with the given id,
+// guard against failure cases.
+// Returns null if not found.
+const getFileName = (
+  content: VizContent,
+  fileId: string,
+): string | null => {
+  if (content && content.files) {
+    const file = content.files[fileId];
+    if (file) {
+      return file.name;
+    }
+  }
+  return null;
+};
+
+// An object representing the search parameters.
+export type TabStateParams = {
+  file?: string;
+  tabs?: string;
+};
+
+// Decodes the tab list and active file from the search parameters.
+export const decodeTabs = ({
+  tabStateParams,
+  content,
+}: {
+  tabStateParams: TabStateParams;
+  content: VizContent;
+}): {
+  tabList: Array<TabState>;
+  activeFileId: VizFileId;
+} => {
+  const { file, tabs } = tabStateParams;
+  const tabList: TabState[] = [];
+
+  // Decode active file
+  const activeFileId = getFileId(content, file);
+
+  // Decode tab list
+  if (tabs) {
+    tabs.split(delimiter).forEach((fileName) => {
+      const fileId = getFileId(content, fileName);
+      if (fileId) {
+        tabList.push({ fileId });
+      }
+    });
+  } else if (activeFileId) {
+    // If there's only an active file without a tab list
+    tabList.push({ fileId: activeFileId });
+  }
+
+  return { tabList, activeFileId };
+};
+
+// Encodes the tab list and active file into the search parameters.
+export const encodeTabs = ({
+  tabList,
+  activeFileId,
+  content,
+}: {
+  tabList: Array<TabState>;
+  activeFileId: VizFileId | null;
+  content: VizContent;
+}): TabStateParams => {
+  // Get the file name of the active file
+  const activeFileName = getFileName(content, activeFileId);
+
+  const params: TabStateParams = {};
+
+  // If that's missing, no need to proceed (should never happen).
+  if (activeFileName) {
+    // In any case we set the `file` parameter.
+    params.file = activeFileName;
+
+    // We only need to encode the `tabs` parameter
+    // if there's more than one tab.
+    if (tabList.length > 1) {
+      // Set tab list
+      const tabs = tabList
+        .map((tabstate: TabState) =>
+          getFileName(content, tabstate.fileId),
+        )
+        .join(delimiter);
+      params.tabs = tabs;
+    }
+  }
+
+  return params;
+};

package/src/client/themes/index.ts

@@ -0,0 +1,7 @@
+export {
+  themes,
+  defaultTheme,
+  themeOptionsByLabel,
+} from './themes';
+export type { ThemeLabel, ThemeOption } from './themes';
+export { useDynamicTheme } from './useDynamicTheme';

package/src/client/themes/themes.ts

@@ -0,0 +1,77 @@
+import { oneDark } from '@codemirror/theme-one-dark';
+
+import { vizhubTheme } from './vizhubTheme';
+import {
+  okaidia,
+  abcdef,
+  dracula,
+  eclipse,
+  githubDark,
+  material,
+  nord,
+  xcodeLight,
+} from './uiwImports';
+
+// CodeMirror themes
+export type ThemeLabel =
+  | 'abcdef'
+  | 'dracula'
+  | 'eclipse'
+  | 'material'
+  | 'nord'
+  | 'oneDark'
+  | 'okaidia'
+  | 'github'
+  | 'xcode'
+  | 'vizhub';
+
+export type ThemeOption = {
+  value: any;
+  label: ThemeLabel;
+};
+// add light theme brackets to eclipse theme
+// const modifiedEclipse = {
+//   ...eclipse,
+//   '.rainbow-bracket-red > span': {
+//     color: 'white',
+//   },
+//   '.rainbow-bracket-orange > span': {
+//     //yellow
+//     color: '#FFFFB2',
+//   },
+//   '.rainbow-bracket-yellow > span': {
+//     // orange
+//     color: '#FFB2DA',
+//   },
+//   '.rainbow-bracket-green > span': {
+//     // green
+//     color: '#B2FFB2',
+//   }
+// };
+export const themes: Array<ThemeOption> = [
+  { value: abcdef, label: 'abcdef' },
+  { value: dracula, label: 'dracula' },
+  { value: eclipse, label: 'eclipse' },
+  { value: material, label: 'material' },
+  { value: nord, label: 'nord' },
+  { value: oneDark, label: 'oneDark' },
+  { value: okaidia, label: 'okaidia' },
+  { value: githubDark, label: 'github' },
+  { value: xcodeLight, label: 'xcode' },
+  { value: vizhubTheme, label: 'vizhub' },
+];
+
+// Map theme labels to theme values
+export const themeOptionsByLabel: Record<
+  ThemeLabel,
+  ThemeOption
+> = themes.reduce(
+  (acc, themeOption: ThemeOption) => {
+    acc[themeOption.label] = themeOption;
+    return acc;
+  },
+  {} as Record<ThemeLabel, any>,
+);
+
+// The default theme
+export const defaultTheme: ThemeLabel = 'vizhub';

package/src/client/themes/uiwImports.ts

@@ -0,0 +1,32 @@
+// These import are wreaking havoc with the build process
+// and causing app deployments to fail.
+// The upstream library is not configured properly in NPM.
+// See:
+// https://github.com/uiwjs/react-codemirror/issues/680
+// https://github.com/scalar/scalar/issues/4222
+// As a workaround, we need to explicitly target the ESM
+// distribution of the library, which is not used by default
+// because there is no "type": "module" field in the package.json
+// of any of these `@uiw/codemirror-theme-*` packages.
+
+import { okaidia } from '@uiw/codemirror-theme-okaidia';
+import { abcdef } from '@uiw/codemirror-theme-abcdef';
+import { dracula } from '@uiw/codemirror-theme-dracula';
+import { eclipse } from '@uiw/codemirror-theme-eclipse';
+import { githubDark } from '@uiw/codemirror-theme-github';
+import { material } from '@uiw/codemirror-theme-material';
+import { nord } from '@uiw/codemirror-theme-nord';
+import { xcodeLight } from '@uiw/codemirror-theme-xcode';
+import { createTheme } from '@uiw/codemirror-themes';
+
+export {
+  okaidia,
+  abcdef,
+  dracula,
+  eclipse,
+  githubDark,
+  material,
+  nord,
+  xcodeLight,
+  createTheme,
+};

package/src/client/themes/useDynamicTheme.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+import { EditorCache } from '../useEditorCache';
+import { ThemeLabel, themeOptionsByLabel } from './themes';
+
+export const useDynamicTheme = (
+  editorCache: EditorCache,
+  theme: ThemeLabel,
+) => {
+  const isFirstRun = useRef(true);
+  useEffect(() => {
+    // Skip the first run, since the theme is already initialized.
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+    } else {
+      // When the user changes the theme, update the theme of all editors.
+      for (const editorCacheValue of Array.from(
+        editorCache.values(),
+      )) {
+        const { editor, themeCompartment } =
+          editorCacheValue;
+        editor.dispatch({
+          effects: themeCompartment.reconfigure([
+            themeOptionsByLabel[theme].value,
+          ]),
+        });
+      }
+    }
+  }, [theme, editorCache]);
+};

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,193 @@
+// 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 } 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';
+import { EditorView } from 'codemirror';
+
+// Use semi-bold weight for keywords and other important things
+// const boldWeight = 'bold';
+
+// This looks way better as we are pulling in the semi-bold font from Google Fonts
+const boldWeight = '500';
+
+const defaultSettingsVizhubTheme = {
+  background: backgroundColor,
+  foreground: light,
+  caret: caretColor,
+  selection: selectionBackground,
+  selectionMatch: selectionBackgroundMatch,
+  lineHighlight,
+  gutterBackground: backgroundColor,
+  gutterForeground: lineNumbers,
+  gutterActiveForeground: lineNumbersActive,
+};
+
+function vizhubThemeInit(options?: Partial<any>) {
+  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: boldWeight,
+          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: boldWeight },
+        { 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 },
+        // {
+        //   class: 'cm-nonmatchingBracket',
+        //   // color: "rede",
+        //   backgroundColor: 'red', // Optional: set background color for matching brackets
+        // },
+        // {
+        //   tag: t.nonmatchingBracket,
+        //   color: nonMatchingBracketColor,
+        //   backgroundColor: 'transparent', // Optional: set background color for non-matching brackets
+        // },
+        ...styles,
+      ],
+    }),
+    // Theme matching and non-matching brackets.
+    EditorView.theme(
+      {
+        '&.cm-focused .cm-matchingBracket': {
+          backgroundColor: 'transparent',
+          outline: '1px solid #888888',
+        },
+        '&.cm-focused .cm-nonmatchingBracket': {
+          backgroundColor: 'transparent',
+          outline: '1px solid #ff2222',
+        },
+      },
+      { dark: true },
+    ),
+  ];
+}
+
+export const vizhubTheme = vizhubThemeInit();