vzcode 1.19.0 → 1.20.0

package/src/client/VZSettings.tsx

@@ -8,17 +8,66 @@ import React, {
 import { Button, Modal, Form } from './bootstrap';
 import { ThemeLabel, themes } from './themes';
 import { VZCodeContext } from './VZCodeContext';
-import { fonts } from './Fonts/fonts';
-import { toggleRainbowBrackets } from './CodeEditor/rainbowBrackets';
 
-const fontSizes = ['10px','12px','14px','16px', '18px', '20px', '24px'];
+// Font size options for the editor
+const fontSizes = [
+  '10px',
+  '12px',
+  '14px',
+  '16px',
+  '18px',
+  '20px',
+  '24px',
+];
+
+// List of system fonts to be detected for availability
+const systemFonts = [
+  '-apple-system',
+  'BlinkMacSystemFont',
+  'Segoe UI',
+  'Roboto',
+  'Helvetica Neue',
+  'Arial',
+  'sans-serif',
+  'Courier New',
+  'Georgia',
+  'Tahoma',
+  'Verdana',
+  'Times New Roman',
+  'Trebuchet MS',
+  'Comic Sans MS',
+];
+
+// Utility function to detect if a given font is available
+const isFontAvailable = (font: string): boolean => {
+  const testString = 'abcdefghijklmnopqrstuvwxyz0123456789';
+  const testSize = '72px';
+
+  const span = document.createElement('span');
+  span.style.fontSize = testSize;
+  span.style.visibility = 'hidden';
+  span.style.position = 'absolute';
+  span.innerHTML = testString;
+  document.body.appendChild(span);
+
+  const defaultFont = 'monospace';
+  span.style.fontFamily = defaultFont;
+  const defaultWidth = span.offsetWidth;
+
+  span.style.fontFamily = `${font}, ${defaultFont}`;
+  const newWidth = span.offsetWidth;
+
+  document.body.removeChild(span);
+
+  return newWidth !== defaultWidth;
+};
 
 export const VZSettings = ({
   enableUsernameField = true,
 }: {
-  // Feature flag to enable/disable username field
   enableUsernameField?: boolean;
 }) => {
+  // Extracting context values for managing settings state
   const {
     isSettingsOpen,
     closeSettings,
@@ -28,58 +77,24 @@ export const VZSettings = ({
     setUsername,
   } = useContext(VZCodeContext);
 
-  const handleThemeChange = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
-      const selectedTheme = event.target.value as ThemeLabel;
-      setTheme(selectedTheme);
-      localStorage.setItem('vzcodeSelectedTheme', selectedTheme);
-    },
-    [],
-  );
-  
-  useEffect(() => {
-    const savedTheme = localStorage.getItem('vzcodeSelectedTheme') as ThemeLabel | null;
-    if (savedTheme) {
-      setTheme(savedTheme);
-    } else {
-      setTheme('vizhub');
-    }
-  }, [setTheme]);
-  // Initialize font and size from localStorage or defaults
-  // const [selectedFont, setSelectedFont] = useState(
-  //   localStorage.getItem('vzcodeSelectedFont') ||
-  //     'Roboto Mono',
-  // );
-  // const [selectedFontSize, setSelectedFontSize] = useState(
-  //   localStorage.getItem('vzcodeSelectedFontSize') ||
-  //     '16px',
-  // );
+  // State variables for managing font and font size
   const [selectedFont, setSelectedFont] =
     useState('Roboto Mono');
   const [selectedFontSize, setSelectedFontSize] =
     useState('16px');
+  const [availableFonts, setAvailableFonts] = useState<
+    string[]
+  >([]);
 
-  // Initialize rainbowBrackets setting from localStorage or default to 'on'
-  const [rainbowBrackets, setRainbowBrackets] =
-    useState('on');
-
+  // Load saved settings from local storage on initial render
   useEffect(() => {
-    // If we're in the browser,
     if (typeof window !== 'undefined') {
-      const selectedFontFromLocalStorage: string | null =
+      const selectedFontFromLocalStorage =
         window.localStorage.getItem('vzcodeSelectedFont');
-
-      const selectedFontSizeFromLocalStorage:
-        | string
-        | null = window.localStorage.getItem(
-        'vzcodeSelectedFontSize',
-      );
-
-      const rainbowBracketsFromLocalStorage:
-        | string
-        | null = window.localStorage.getItem(
-        'vzcodeRainbowBrackets',
-      );
+      const selectedFontSizeFromLocalStorage =
+        window.localStorage.getItem(
+          'vzcodeSelectedFontSize',
+        );
 
       if (selectedFontFromLocalStorage !== null) {
         setSelectedFont(selectedFontFromLocalStorage);
@@ -89,48 +104,42 @@ export const VZSettings = ({
           selectedFontSizeFromLocalStorage,
         );
       }
-      if (rainbowBracketsFromLocalStorage !== null) {
-        setRainbowBrackets(rainbowBracketsFromLocalStorage);
-      }
-    } else {
-      // If we're not in the browser, use the default initial width.
     }
   }, []);
 
-  // Called when the user selects a different font
-  const handleFontChange = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
-      const newFont = event.target.value;
-      localStorage.setItem('vzcodeSelectedFont', newFont);
-      setSelectedFont(newFont);
-    },
-    [],
-  );
+  // Detect available system fonts and update the state
+  useEffect(() => {
+    const detectFonts = () => {
+      const detectedFonts: string[] = [];
+      for (const font of systemFonts) {
+        if (isFontAvailable(font)) {
+          detectedFonts.push(font);
+          if (process.env.NODE_ENV === 'development') {
+            console.log(`${font} is available`);
+          }
+        } else if (process.env.NODE_ENV === 'development') {
+          console.log(`${font} is not available`);
+        }
+      }
+      setAvailableFonts(detectedFonts);
+    };
 
-  // Called when the user selects a different font size
-  const handleFontSizeChange = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
-      const newSize = event.target.value;
-      localStorage.setItem(
-        'vzcodeSelectedFontSize',
-        newSize,
-      );
-      setSelectedFontSize(newSize);
-    },
-    [],
-  );
+    detectFonts();
+  }, []);
 
-  // Called when the user changes the Rainbow Brackets setting
-  const handleRainbowBracketsChange = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
-      const newSetting = event.target.value;
-      localStorage.setItem('vzcodeRainbowBrackets', newSetting);
-      setRainbowBrackets(newSetting);
-      toggleRainbowBrackets(newSetting === 'on');
-    },
-    [],
-  );
+  // Reset all settings to default values
+  const resetSettings = useCallback(() => {
+    setSelectedFont('Roboto Mono');
+    setSelectedFontSize('16px');
+    setTheme(themes[0].label);
+    if (enableUsernameField) {
+      setUsername('');
+    }
+    localStorage.removeItem('vzcodeSelectedFont');
+    localStorage.removeItem('vzcodeSelectedFontSize');
+  }, [enableUsernameField, setTheme, setUsername]);
 
+  // Update font family in the document's style
   useEffect(() => {
     document.body.style.setProperty(
       '--vzcode-font-family',
@@ -138,6 +147,7 @@ export const VZSettings = ({
     );
   }, [selectedFont]);
 
+  // Update font size in the document's style
   useEffect(() => {
     document.body.style.setProperty(
       '--vzcode-font-size',
@@ -147,11 +157,12 @@ export const VZSettings = ({
 
   const usernameRef = useRef<HTMLInputElement>(null);
 
+  // Handle username input change
   const handleUsernameChange = useCallback(() => {
     setUsername(usernameRef.current?.value || '');
   }, [setUsername]);
 
-  // Function to handle pressing Enter key
+  // Close settings modal on Enter key press
   useEffect(() => {
     if (isSettingsOpen) {
       const handleEnterKey = (event: KeyboardEvent) => {
@@ -203,7 +214,9 @@ export const VZSettings = ({
           <select
             className="form-select"
             value={theme}
-            onChange={handleThemeChange}
+            onChange={(e) =>
+              setTheme(e.target.value as ThemeLabel)
+            }
           >
             {themes.map(({ label }) => (
               <option key={label} value={label}>
@@ -211,37 +224,32 @@ export const VZSettings = ({
               </option>
             ))}
           </select>
-          <Form.Text className="text-muted">
-            Select a color theme for the editor
-          </Form.Text>
         </Form.Group>
 
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Font</Form.Label>
-
           <select
             className="form-select"
-            onChange={handleFontChange}
+            onChange={(e) =>
+              setSelectedFont(e.target.value)
+            }
             value={selectedFont}
           >
-            {fonts.map((font) => (
+            {availableFonts.map((font) => (
               <option key={font} value={font}>
                 {font}
               </option>
             ))}
           </select>
-
-          <Form.Text className="text-muted">
-            Select font for the editor
-          </Form.Text>
         </Form.Group>
 
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Font Size</Form.Label>
-
           <select
             className="form-select"
-            onChange={handleFontSizeChange}
+            onChange={(e) =>
+              setSelectedFontSize(e.target.value)
+            }
             value={selectedFontSize}
           >
             {fontSizes.map((size) => (
@@ -250,29 +258,12 @@ export const VZSettings = ({
               </option>
             ))}
           </select>
-
-          <Form.Text className="text-muted">
-            Select a font size for the editor
-          </Form.Text>
-        </Form.Group>
-        
-        <Form.Group className="mb-3" controlId="formFork">
-          <Form.Label>Rainbow Brackets</Form.Label>
-          <select
-            className="form-select"
-            onChange={handleRainbowBracketsChange}
-            value={rainbowBrackets}
-          >
-            <option value="on">On</option>
-            <option value="off">Off</option>
-          </select>
-          <Form.Text className="text-muted">
-            Toggle Rainbow Brackets
-          </Form.Text>
         </Form.Group>
-
       </Modal.Body>
       <Modal.Footer>
+        <Button variant="secondary" onClick={resetSettings}>
+          Reset to Default
+        </Button>
         <Button variant="primary" onClick={closeSettings}>
           Done
         </Button>

package/src/server/handleAICopilot.js

@@ -38,8 +38,8 @@ if (isCopilotEnabled) {
   openai = new OpenAI(openAIOptions);
 }
 
-export const handleAICopilot =
-  (/*TODO shareDBDoc*/) => async (req, res) => {
+export const handleAICopilot = (/*TODO shareDBDoc*/) =>
+  async (req, res) => {
     // Don't break if the AI is not enabled.
     // This is useful for local development.
     if (!isCopilotEnabled) {