npm - vzcode - Versions diffs - 1.18.0 → 1.20.0 - Mend

vzcode 1.18.0 → 1.20.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 (15) hide show

package/dist/assets/{index-CSSpCKM0.js → index-DxgQGuCb.js} +101 -101
package/dist/assets/index-w9VAfRwW.js +192 -0
package/dist/assets/{worker-8af7bTHW.js → worker-B9Dbsldy.js} +179 -179
package/dist/index.html +1 -1
package/package.json +38 -38
package/src/client/App/useShareDB.ts +0 -2
package/src/client/CodeEditor/InteractiveWidgets/colorPicker.ts +57 -176
package/src/client/CodeEditor/InteractiveWidgets/colorsInTextPlugin.ts +14 -14
package/src/client/CodeEditor/getOrCreateEditor.ts +22 -10
package/src/client/CodeEditor/style.scss +26 -26
package/src/client/RunCodeWidget/index.tsx +11 -3
package/src/client/VZKeyboardShortcutsDoc.tsx +34 -8
package/src/client/VZSettings.tsx +109 -118
package/src/server/handleAICopilot.js +2 -2
package/dist/assets/index-eifYAxsF.js +0 -181

package/dist/index.html CHANGED Viewed

@@ -20,7 +20,7 @@
       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-eifYAxsF.js"></script>
+    <script type="module" crossorigin src="/assets/index-w9VAfRwW.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-zzK6rRiK.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.18.0",
+  "version": "1.20.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -103,17 +103,17 @@
   },
   "homepage": "https://github.com/vizhub-core/vzcode#readme",
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.3",
+    "@codemirror/autocomplete": "^6.18.4",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-markdown": "^6.3.1",
-    "@codemirror/state": "^6.4.1",
+    "@codemirror/lang-markdown": "^6.3.2",
+    "@codemirror/state": "^6.5.1",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.35.0",
+    "@codemirror/view": "^6.36.2",
     "@lezer/highlight": "^1.2.1",
-    "@livekit/components-react": "^2.6.9",
+    "@livekit/components-react": "^2.7.0",
     "@livekit/components-styles": "^1.1.4",
     "@replit/codemirror-indentation-markers": "^6.5.3",
     "@replit/codemirror-interact": "^6.3.1",
@@ -121,15 +121,15 @@
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@teamwork/websocket-json-stream": "^2.0.0",
     "@typescript/vfs": "^1.6.0",
-    "@uiw/codemirror-theme-abcdef": "^4.23.6",
-    "@uiw/codemirror-theme-dracula": "^4.23.6",
-    "@uiw/codemirror-theme-eclipse": "^4.23.6",
-    "@uiw/codemirror-theme-github": "^4.23.6",
-    "@uiw/codemirror-theme-material": "^4.23.6",
-    "@uiw/codemirror-theme-nord": "^4.23.6",
-    "@uiw/codemirror-theme-okaidia": "^4.23.6",
-    "@uiw/codemirror-theme-xcode": "^4.23.6",
-    "@uiw/codemirror-themes": "^4.23.6",
+    "@uiw/codemirror-theme-abcdef": "^4.23.7",
+    "@uiw/codemirror-theme-dracula": "^4.23.7",
+    "@uiw/codemirror-theme-eclipse": "^4.23.7",
+    "@uiw/codemirror-theme-github": "^4.23.7",
+    "@uiw/codemirror-theme-material": "^4.23.7",
+    "@uiw/codemirror-theme-nord": "^4.23.7",
+    "@uiw/codemirror-theme-okaidia": "^4.23.7",
+    "@uiw/codemirror-theme-xcode": "^4.23.7",
+    "@uiw/codemirror-themes": "^4.23.7",
     "body-parser": "^1.20.3",
     "codemirror": "^6.0.1",
     "codemirror-copilot": "^0.0.7",
@@ -137,40 +137,40 @@
     "color-hash": "^2.0.2",
     "d3-array": "^3.2.4",
     "diff-match-patch": "^1.0.5",
-    "dotenv": "^16.4.5",
-    "express": "^4.21.1",
-    "ignore": "^6.0.2",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.2",
+    "ignore": "^7.0.3",
     "json0-ot-diff": "^1.1.2",
-    "livekit-client": "^2.7.1",
-    "livekit-server-sdk": "^2.9.2",
+    "livekit-client": "^2.8.0",
+    "livekit-server-sdk": "^2.9.7",
     "ngrok": "^4.3.3",
     "open": "^10.1.0",
-    "openai": "^4.73.1",
-    "prettier-plugin-svelte": "^3.3.2",
-    "react": "^18.3.1",
-    "react-bootstrap": "^2.10.6",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^7.0.1",
+    "openai": "^4.78.1",
+    "prettier-plugin-svelte": "^3.3.3",
+    "react": "^19.0.0",
+    "react-bootstrap": "^2.10.7",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.2",
     "sharedb": "^5.1.1",
-    "sharedb-client-browser": "^5.0.3",
-    "uuid": "^11.0.3",
+    "sharedb-client-browser": "^5.1.1",
+    "uuid": "^11.0.5",
     "vizhub-ui": "^3.23.0",
     "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "concurrently": "^9.1.0",
+    "concurrently": "^9.1.2",
     "cross-env": "^7.0.3",
-    "prettier": "^3.4.1",
-    "sass": "^1.81.0",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.2",
-    "vitest": "^2.1.8"
+    "prettier": "^3.4.2",
+    "sass": "^1.83.4",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
+    "vitest": "^3.0.1"
   },
   "optionalDependencies": {
-    "@rollup/rollup-darwin-arm64": "^4.28.0",
-    "@rollup/rollup-win32-x64-msvc": "^4.28.0"
+    "@rollup/rollup-darwin-arm64": "^4.30.1",
+    "@rollup/rollup-win32-x64-msvc": "^4.30.1"
   }
 }

package/src/client/App/useShareDB.ts CHANGED Viewed

@@ -142,8 +142,6 @@ export const useShareDB = ({
   // False for "Saved"
   const pending = usePending(shareDBDoc);
-  console.log('pending ', pending);
   // A convenience function for mutating the ShareDB document
   // based submitting OT ops generated by diffing the JSON.
   const submitOperation =

package/src/client/CodeEditor/InteractiveWidgets/colorPicker.ts CHANGED Viewed

@@ -8,180 +8,61 @@ export const colorPickerRegex = /#[0-9A-Fa-f]{6}/g;
 // Works without quotes to support CSS.
 export const colorPicker = (
   onInteract?: () => void,
-):  InteractRule => {
-  // Create the color picker element when the page loads
-  const sel: HTMLInputElement = document.createElement('input');
-  sel.type = 'color';
-  sel.style.position = 'fixed';
-  sel.style.left = '-9999px'; // Initially off-screen
-  sel.style.top = '-9999px';
-  document.body.appendChild(sel);
-  // Create a close button element to hide the color picker
-  const closeButton: HTMLButtonElement = document.createElement('button');
-  closeButton.innerText = 'X';
-  closeButton.style.position = 'absolute';
-  closeButton.style.width = '20px';
-  closeButton.style.height = '20px';
-  closeButton.style.borderRadius = '50%';
-  closeButton.style.border = 'none';
-  closeButton.style.backgroundColor = '#ff4d4f';
-  closeButton.style.color = 'white';
-  closeButton.style.fontSize = '12px';
-  closeButton.style.display = 'none'; // Initially hidden
-  closeButton.style.cursor = 'pointer';
-  closeButton.style.top = '-10px'; // Adjust position relative to color picker
-  closeButton.style.right = '-10px';
-  sel.parentElement?.appendChild(closeButton); // Add button to the same container
-  // Function to hide the color picker and close button
-  const hideColorPicker = () => {
-    sel.style.left = '-9999px';
-    sel.style.top = '-9999px';
-    closeButton.style.display = 'none';
-  };
-  // Add event listener to the close button to hide color picker
-  closeButton.addEventListener('click', (event) => {
-    event.stopPropagation(); // Prevent click event from bubbling to document
-    hideColorPicker();
-  });
-  // Add event listener for clicks outside the color picker
-  document.addEventListener('click', (event: MouseEvent) => {
-    if (event.target !== sel && event.target !== closeButton) {
-      hideColorPicker();
-    }
-  });
-  // Function to set the text and color
-  const setText = (newText: string) => {
-    console.log('Applying color to the element:', newText);
-    // Assuming you're applying the color to a circle element with id 'colorCircle'
-    const colorCircle = document.getElementById('colorCircle');
-    if (colorCircle) {
-      colorCircle.style.backgroundColor = newText;
-      console.log(`Color applied to colorCircle: ${newText}`);
-    } else {
-      console.log('colorCircle element not found');
-    }
-    // If there is any other text element (like an input or div for displaying hex color), update it too.
-    const hexDisplay = document.getElementById('hexDisplay');
-    if (hexDisplay) {
-      hexDisplay.textContent = newText;
-      console.log(`Hex value applied to hexDisplay: ${newText}`);
-    } else {
-      console.log('hexDisplay element not found');
-    }
-  };
-  return {
-    regexp: colorPickerRegex,
-    cursor: 'pointer',
-    onClick(
-      text: string,
-      setText: (newText: string) => void,
-      event: MouseEvent
-    ) {
-      const startingColor: string = text;
-      // Set the initial value of the color picker
-      console.log('Initial color:', startingColor);
-      sel.value = startingColor.toLowerCase();
-      console.log('Color picker initial value set to:', sel.value);
-      // Position the color picker near the cursor
-      const cursorX = event.clientX;
-      const cursorY = event.clientY;
-      sel.style.left = cursorX + 'px';
-      sel.style.top = cursorY + 'px';
-      // Show and position the close button
-      closeButton.style.display = 'block';
-      closeButton.style.left = `${cursorX + sel.offsetWidth - 15}px`; // Adjust to place in corner
-      closeButton.style.top = `${cursorY - 15}px`;
-      // Update the color selection and setText on change
-      const updateHex = (e: Event) => {
-        const el: HTMLInputElement = e.target as HTMLInputElement;
-        console.log('Hex color value selected:', el.value);
-        if (el.value) {
-          setText(el.value.toUpperCase()); // Use uppercase for consistency
-        }
-        if (onInteract) {
-          console.log('onInteract called');
-          onInteract();
-        }
-        // Update color display directly (for example, changing the background color of an element)
-        const colorDisplay = document.getElementById('colorDisplay');
-        if (colorDisplay) {
-          colorDisplay.style.backgroundColor = el.value;
-          console.log(`colorDisplay updated to: ${el.value}`);
-        } else {
-          console.log('colorDisplay element not found');
-        }
-      };
-      // Add input event listener to handle color selection
-      sel.addEventListener('input', updateHex);
-      // Trigger click event on the color picker to display it
+): InteractRule => ({
+  regexp: colorPickerRegex,
+  cursor: 'pointer',
+  onClick(
+    text: string,
+    setText: (newText: string) => void,
+    event: MouseEvent,
+  ) {
+    const startingColor: string = text;
+    const sel: HTMLInputElement =
+      document.createElement('input');
+    sel.type = 'color';
+    sel.value = startingColor.toLowerCase();
+    // `valueIsUpper` maintains the style of the user's code.
+    // It keeps the case of a-f the same case as the original.
+    const valueIsUpper: boolean =
+      startingColor.toUpperCase() === startingColor;
+    const updateHex = (e: Event) => {
+      const el: HTMLInputElement =
+        e.target as HTMLInputElement;
+      if (el.value) {
+        setText(
+          valueIsUpper ? el.value.toUpperCase() : el.value,
+        );
+      }
+      if (onInteract) onInteract();
+    };
+    sel.addEventListener('input', updateHex);
+    // Position the color input at the mouse cursor
+    sel.style.position = 'absolute';
+    sel.style.left = `${event.clientX}px`;
+    sel.style.top = `${event.clientY}px`;
+    // Make it invisible
+    sel.style.opacity = '0';
+    sel.style.height = '0';
+    sel.style.width = '0';
+    sel.style.border = 'none';
+    sel.style.padding = '0';
+    sel.style.margin = '0';
+    document.body.appendChild(sel);
+    // Click the input after a delay, so that
+    // it gets the correct position
+    setTimeout(() => {
       sel.click();
-    },
-  };
-};
-// TODO get this working
-// rgb color picker
-// Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L71
-//TODO: create color picker for hsl colors
-// {
-//   regexp: /rgb\(.*\)/g,
-//   cursor: 'pointer',
-//   onClick: (text, setText, e) => {
-//     const res =
-//       /rgb\((?<r>\d+)\s*,\s*(?<g>\d+)\s*,\s*(?<b>\d+)\)/.exec(
-//         text,
-//       );
-//     const r = Number(res?.groups?.r);
-//     const g = Number(res?.groups?.g);
-//     const b = Number(res?.groups?.b);
-//     //sel will open the color picker when sel.click is called.
-//     const sel = document.createElement('input');
-//     sel.type = 'color';
-//     if (!isNaN(r + g + b)) sel.value = rgb2Hex(r, g, b);
-//     const updateRGB = (e: Event) => {
-//       const el = e.target as HTMLInputElement;
-//       if (onInteract) onInteract();
-//       if (el.value) {
-//         const [r, g, b] = hex2RGB(el.value);
-//         setText(`rgb(${r}, ${g}, ${b})`);
-//       }
-//       sel.removeEventListener('change', updateRGB);
-//     };
-//     sel.addEventListener('change', updateRGB);
-//     sel.click();
-//   },
-// },
-// // Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L108
-// const hex2RGB = (hex: string): [number, number, number] => {
-//   const v = parseInt(hex.substring(1), 16);
-//   return [(v >> 16) & 255, (v >> 8) & 255, v & 255];
-// };
-// // Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L117
-// const rgb2Hex = (r: number, g: number, b: number): string =>
-//   '#' + r.toString(16) + g.toString(16) + b.toString(16);
+    }, 10);
+    // Remove the input after interaction
+    sel.addEventListener('blur', () => {
+      document.body.removeChild(sel);
+    });
+  },
+});

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

@@ -32,8 +32,8 @@ class ColorWidget extends WidgetType {
     parent.setAttribute(
       'style',
-      `width:${size}px;height:${size}px;position:relative;`,
-      // Position relative for the hovering tool tip to work
+      `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(
@@ -80,12 +80,9 @@ class ColorWidget extends WidgetType {
     // Set class for tooltip to use CSS styles
     hoveringTooltip.className = 'tooltip_hover_circle';
-    hoveringTooltip.innerHTML =
-      `<strong>Alt + Click on a hex color</strong><br />
+    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
@@ -93,13 +90,16 @@ class ColorWidget extends WidgetType {
     // 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(
+      '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);
@@ -108,7 +108,7 @@ class ColorWidget extends WidgetType {
     return parent;
   }
   ignoreEvent() {
     return false;
   }

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

@@ -108,7 +108,8 @@ const getAtPath = (obj, path) => {
 };
 // Extend the EditorCacheValue type to include the compartments and the updateRainbowBrackets method
-interface ExtendedEditorCacheValue extends EditorCacheValue {
+interface ExtendedEditorCacheValue
+  extends EditorCacheValue {
   themeCompartment: Compartment;
   rainbowBracketsCompartment: Compartment;
   updateRainbowBrackets: (enabled: boolean) => void;
@@ -179,7 +180,9 @@ export const getOrCreateEditor = ({
   const cacheKey = editorCacheKey(fileId, paneId);
   if (editorCache.has(cacheKey)) {
-    return editorCache.get(cacheKey) as ExtendedEditorCacheValue;
+    return editorCache.get(
+      cacheKey,
+    ) as ExtendedEditorCacheValue;
   }
   // Cache miss
@@ -194,7 +197,7 @@ export const getOrCreateEditor = ({
   // Create a compartment for the theme so that it can be changed dynamically.
   // Inspired by: https://github.com/craftzdog/cm6-themes/blob/main/example/index.ts
   let themeCompartment = new Compartment();
   // Create a compartment for rainbow brackets so that it can be enabled/disabled dynamically.
   let rainbowBracketsCompartment = new Compartment();
@@ -260,7 +263,7 @@ export const getOrCreateEditor = ({
   // Adds compartment for rainbow brackets with initial toggle state.
   extensions.push(
     rainbowBracketsCompartment.of(
-      rainbowBracketsEnabled ? rainbowBrackets() : []
+      rainbowBracketsEnabled ? rainbowBrackets() : [],
     ),
   );
@@ -420,17 +423,26 @@ export const getOrCreateEditor = ({
     }),
   });
-  const editorCacheValue: ExtendedEditorCacheValue = { editor, themeCompartment, rainbowBracketsCompartment, updateRainbowBrackets: (enabled) => {
-    editor.dispatch({
-      effects: rainbowBracketsCompartment.reconfigure(enabled ? rainbowBrackets() : []),
-    });
-  }};
+  const editorCacheValue: ExtendedEditorCacheValue = {
+    editor,
+    themeCompartment,
+    rainbowBracketsCompartment,
+    updateRainbowBrackets: (enabled) => {
+      editor.dispatch({
+        effects: rainbowBracketsCompartment.reconfigure(
+          enabled ? rainbowBrackets() : [],
+        ),
+      });
+    },
+  };
   // Populate the cache.
   editorCache.set(cacheKey, editorCacheValue);
   // Initialize rainbow brackets based on the toggle state
-  editorCacheValue.updateRainbowBrackets(rainbowBracketsEnabled);
+  editorCacheValue.updateRainbowBrackets(
+    rainbowBracketsEnabled,
+  );
   return editorCacheValue;
 };

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

@@ -70,7 +70,7 @@
   .tooltip_hover_circle div {
     font-size: 12px;
   }
   .cm-panel.cm-search {
     padding: 5px;
     position: relative;
@@ -79,14 +79,14 @@
     color: var(--vh-color-neutral-04);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
   }
   .cm-panels {
     background-color: #333338;
     color: var(--vh-color-neutral-04);
     border: 2px solid var(--vh-color-neutral-02);
     border-radius: 6px;
   }
   .cm-textfield {
     background-color: var(--vh-color-neutral-01);
     color: #efe7dc;
@@ -95,10 +95,10 @@
     border-radius: 6px;
     font-size: 14px;
   }
   .cm-button {
     background-color: var(--vh-color-neutral-01);
-        border: 1px solid #193350;
+    border: 1px solid #193350;
     color: var(--vh-color-neutral-04);
     border: 1px solid var(--vh-color-neutral-04);
     border-radius: 5px;
@@ -107,50 +107,50 @@
     cursor: pointer;
     transition: all 0.3s ease-in-out;
   }
   .cm-button:hover {
     background-color: #50c878;
     color: #ffffff;
     transform: scale(1.1);
   }
   .cm-button:active {
     background-color: #202e46;
     transform: scale(0.95);
   }
   .cm-searchMatch {
     background-color: rgba(255, 255, 0, 0.5);
     border-radius: 2px;
   }
   .cm-searchMatch-selected {
     background-color: rgba(255, 140, 0, 0.5);
     border: 2px solid #ff8800;
     border-radius: 2px;
   }
-  .cm-panel.cm-search [name="close"] {
+  .cm-panel.cm-search [name='close'] {
     position: absolute;
     top: 0;
     right: 4px;
-    background-color: var(--vh-color-neutral-01);
+    background-color: var(--vh-color-neutral-01);
     color: var(--vh-color-neutral-04);
-    border: none;
-    font: inherit;
-    padding: 4px 8px;
+    border: none;
+    font: inherit;
+    padding: 4px 8px;
     margin: 4px;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.3s ease-in-out;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
   }
-  .cm-panel.cm-search [name="close"]:hover {
-    background-color: var(--vh-color-caution-01);
-    color: #ffffff;
+  .cm-panel.cm-search [name='close']:hover {
+    background-color: var(--vh-color-caution-01);
+    color: #ffffff;
   }
-  .cm-panel.cm-search [name="close"]:active {
-    background-color: var(--vh-color-caution-02);
-    transform: scale(0.95);
+  .cm-panel.cm-search [name='close']:active {
+    background-color: var(--vh-color-caution-02);
+    transform: scale(0.95);
   }
-}
+}

package/src/client/RunCodeWidget/index.tsx CHANGED Viewed

@@ -1,4 +1,9 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 import { PlaySVG } from '../Icons';
 import { SplitEditorSVG } from '../Icons/SplitEditorSVG';
 import { VZCodeContext } from '../VZCodeContext';
@@ -17,7 +22,7 @@ export const RunCodeWidget = ({
     </>
   ),
 }: {
-    runCodeWidgetTooltipText?: JSX.Element;
+  runCodeWidgetTooltipText?: JSX.Element;
 }) => {
   const { runCodeRef, runPrettierRef, splitCurrentPane } =
     useContext(VZCodeContext);
@@ -51,7 +56,10 @@ export const RunCodeWidget = ({
   // Add the keyboard event listener for Ctrl+S and Shift+Enter
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.ctrlKey && event.key === 's') || (event.shiftKey && event.key === 'Enter')) {
+      if (
+        (event.ctrlKey && event.key === 's') ||
+        (event.shiftKey && event.key === 'Enter')
+      ) {
         event.preventDefault();
         handleClick();
       }