vzcode 2.2.0 → 2.3.0

package/src/client/useFileCRUD.ts

@@ -1,228 +0,0 @@
-import { useCallback } from 'react';
-import { FileTreePath } from '../types';
-import { VizFileId, VizContent } from '@vizhub/viz-types';
-import { randomId } from '../randomId';
-import { EditorCache } from './useEditorCache';
-import { getFileExtension } from './utils/fileExtension';
-import { getLanguageExtension } from './CodeEditor/getOrCreateEditor';
-import { editorCacheKey } from './useEditorCache';
-
-// CRUD operations for files and directories
-// CRUD = Create, Read, Update, Delete
-export const useFileCRUD = ({
-  submitOperation,
-  closeTabs,
-  openTab,
-  editorCache,
-  content,
-}: {
-  submitOperation: (
-    operation: (document: VizContent) => VizContent,
-  ) => void;
-  closeTabs: (idsToDelete: Array<VizFileId>) => void;
-  openTab: ({
-    fileId,
-    isTransient,
-  }: {
-    fileId: VizFileId;
-    isTransient: boolean;
-  }) => void;
-  editorCache: EditorCache;
-  content: VizContent;
-}) => {
-  // Create a new file
-  const createFile = useCallback(
-    (name: string, text = '') => {
-      if (name) {
-        const fileId: VizFileId = randomId();
-        submitOperation((document: VizContent) => ({
-          ...document,
-          files: {
-            ...document.files,
-            [fileId]: { name, text },
-          },
-        }));
-        // When a new file is created, open it in a new tab
-        // and focus the editor on it.
-        openTab({ fileId, isTransient: false });
-      }
-    },
-    [submitOperation],
-  );
-
-  const createDirectory = useCallback(
-    (name: string, text = null) => {
-      if (name) {
-        name += '/';
-        const fileId: VizFileId = randomId();
-        submitOperation((document: VizContent) => ({
-          ...document,
-          files: {
-            ...document.files,
-            [fileId]: { name, text },
-          },
-        }));
-      }
-    },
-    [submitOperation],
-  );
-
-  // Called when a file in the sidebar is renamed.
-  const renameFile = useCallback(
-    (fileId: VizFileId, newName: string) => {
-      submitOperation((document: VizContent) => ({
-        ...document,
-        files: {
-          ...document.files,
-          [fileId]: {
-            ...document.files[fileId],
-            name:
-              document.files[fileId].name.substring(
-                0,
-                document.files[fileId].name.lastIndexOf(
-                  '/',
-                ) + 1,
-              ) + newName,
-          },
-        },
-      }));
-
-      const oldName = content.files[fileId].name;
-      const oldExtension = getFileExtension(oldName);
-
-      const newExtension = getFileExtension(newName);
-
-      const didExtensionChange =
-        newExtension !== oldExtension;
-      if (didExtensionChange) {
-        // Update the language compartment of the corresponding CodeMirror editor
-        // with the new language, based on the new extension, only if it changed.
-        // Search through all cached editors for this file ID
-        for (const [
-          cacheKey,
-          cachedEditor,
-        ] of editorCache.entries()) {
-          // Check if this cache entry is for the current file
-          if (cacheKey.startsWith(fileId + '|')) {
-            if (
-              cachedEditor &&
-              cachedEditor.languageCompartment
-            ) {
-              const newLanguageExtension =
-                getLanguageExtension(newExtension);
-
-              // Reconfigure the language compartment with the new language extension
-              cachedEditor.editor.dispatch({
-                effects:
-                  cachedEditor.languageCompartment.reconfigure(
-                    newLanguageExtension
-                      ? [newLanguageExtension]
-                      : [],
-                  ),
-              });
-              // Continue to update all instances of this file in different panes
-            }
-          }
-        }
-      }
-    },
-    [submitOperation],
-  );
-
-  // Renames a directory
-  const renameDirectory = useCallback(
-    (
-      path: FileTreePath,
-      oldName: string,
-      newName: string,
-    ) => {
-      submitOperation((document: VizContent) => {
-        const updatedFiles = Object.keys(
-          document.files,
-        ).reduce((acc, key) => {
-          const file = document.files[key];
-          const fileName = file.name;
-          //See if it's actually in directory
-          if (fileName.includes(path + '/')) {
-            //Create New Name for System
-            const pathPart = fileName.substring(
-              0,
-              fileName.indexOf(path) + path.length,
-            );
-            const oldNamePos =
-              pathPart.lastIndexOf(oldName);
-            const fileNewName =
-              fileName.substring(0, oldNamePos) +
-              newName +
-              fileName.substring(
-                oldNamePos + oldName.length,
-              );
-            //Return with new names
-            acc[key] = { ...file, name: fileNewName };
-          } else {
-            acc[key] = file;
-          }
-          return acc;
-        }, {});
-
-        return { ...document, files: updatedFiles };
-      });
-    },
-    [submitOperation],
-  );
-
-  // Deletes a file
-  const deleteFile = useCallback(
-    (fileId: VizFileId) => {
-      closeTabs([fileId]);
-      submitOperation((document) => {
-        const updatedFiles = { ...document.files };
-        delete updatedFiles[fileId];
-        return { ...document, files: updatedFiles };
-      });
-    },
-    [submitOperation, closeTabs],
-  );
-
-  // Deletes a directory and all files within it
-  const deleteDirectory = useCallback(
-    (path: FileTreePath) => {
-      const tabsToClose: Array<VizFileId> = [];
-      submitOperation((document: VizContent) => {
-        const updatedFiles = { ...document.files };
-        for (const key in updatedFiles) {
-          if (updatedFiles[key].name.includes(path + '/')) {
-            tabsToClose.push(key);
-            delete updatedFiles[key];
-          }
-        }
-        return { ...document, files: updatedFiles };
-      });
-      closeTabs(tabsToClose);
-    },
-    [submitOperation, closeTabs],
-  );
-
-  // Deletes all files
-  const deleteAllFiles = useCallback(() => {
-    const tabsToClose: Array<VizFileId> = [];
-    submitOperation((document: VizContent) => {
-      // Collect all file IDs for closing tabs
-      for (const fileId in document.files) {
-        tabsToClose.push(fileId);
-      }
-      return { ...document, files: {} };
-    });
-    closeTabs(tabsToClose);
-  }, [submitOperation, closeTabs]);
-
-  return {
-    createFile,
-    renameFile,
-    deleteFile,
-    createDirectory,
-    renameDirectory,
-    deleteDirectory,
-    deleteAllFiles,
-  };
-};

package/src/client/useKeyboardShortcuts.ts

@@ -1,451 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { shouldTriggerRun } from './shouldTriggerRun';
-import { syntaxTree } from '@codemirror/language';
-import { SyntaxNode, SyntaxNodeRef } from '@lezer/common';
-import { EditorView } from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
-import { VizFileId } from '@vizhub/viz-types';
-import { PaneId } from '../types';
-import { editorCacheKey } from './useEditorCache';
-
-/*
-  The following is a helpful resource for the following Code Mirror Syntax Tree methods below
-  https://lezer.codemirror.net/docs/ref/#common
-*/
-
-// Store the element in the current editor DOM to highlight, indicating a potential jump to definition is possible
-let activeJumpingElement: HTMLSpanElement = null;
-
-// Store the syntax node representing the destination within the syntax tree
-let definingNode: SyntaxNode = null;
-
-// Example nesting types for the specific language to find level in the syntax tree
-const nestingTypes = new Set<string>([
-  'FunctionDeclaration',
-  'ClassDeclaration',
-  'MethodDeclaration',
-  'Block',
-  'IfStatement',
-  'ForStatement',
-  'WhileStatement',
-  'SwitchStatement',
-  'TryStatement',
-  'CatchClause',
-  'WithStatement',
-  'ArrowFunction',
-  'ImportGroup',
-]);
-
-// Example declaration types for the specific language to find definitions in the syntax tree
-const declarationTypes = new Set<string>([
-  'VariableDeclaration',
-  'FunctionDeclaration',
-  'ClassDeclaration',
-  'MethodDeclaration',
-  'PropertyDeclaration',
-  'ImportDeclaration',
-  'ExportDeclaration',
-  'CallExpression',
-  'ArrayPattern',
-  'ObjectPattern',
-  'PatternProperty',
-  'ArgList',
-  'TypeArgList',
-  'ParamList',
-  'ForOfSpec',
-]);
-
-function getIdentifierContext(
-  identifier: SyntaxNode,
-): number {
-  let current: SyntaxNode = identifier;
-  let levels: number = 0;
-
-  // Traverse up the tree to find the total depth, only counting valid nesting types
-  while (current && current.type) {
-    const parentType: string = current.type.name;
-
-    if (nestingTypes.has(parentType)) {
-      levels++;
-    }
-
-    current = current.parent;
-  }
-
-  return levels;
-}
-
-function jumpToDefinition(
-  editor: EditorView,
-  node: SyntaxNode,
-): SyntaxNode {
-  const state: EditorState = editor.state;
-  const definitions: Array<{
-    identifier: SyntaxNode;
-    context: number;
-  }> = [];
-
-  // From an identifier in the syntax tree, fetch the name and context to find closest defining syntax node
-  const identifier: SyntaxNode = node;
-  const identifierName: string = state.doc.sliceString(
-    identifier.from,
-    identifier.to,
-  );
-  const context: number = getIdentifierContext(identifier);
-
-  if (identifier) {
-    syntaxTree(state).iterate({
-      enter(tree: SyntaxNodeRef) {
-        // Traverse syntax tree to find positions of respective identifier definitions within context
-        if (
-          declarationTypes.has(tree.name) ||
-          nestingTypes.has(tree.name)
-        ) {
-          const parent: SyntaxNode = tree.node;
-
-          // Fetch a host of potential identifiers in an attempt to find the defining syntax node
-          const children: Array<SyntaxNode> = [
-            ...parent.getChildren('VariableDefinition'),
-            ...parent.getChildren('PropertyDefinition'),
-            ...parent.getChildren('PropertyName'),
-            ...parent.getChildren('Identifier'),
-          ];
-
-          children.forEach((child: SyntaxNode) => {
-            const name: string = state.doc.sliceString(
-              child.from,
-              child.to,
-            );
-
-            // Ensure no jump to self by comparing syntax node id's
-            if (
-              name === identifierName &&
-              child.type.id !== identifier.type.id
-            ) {
-              definitions.push({
-                identifier: child,
-                context: getIdentifierContext(child),
-              });
-            }
-          });
-        }
-      },
-    });
-
-    if (definitions.length > 0) {
-      // Sort definitions by their context in the syntax tree
-      definitions.sort((a, b) => a.context - b.context);
-
-      let closestDefinition: SyntaxNode =
-        definitions[0].identifier;
-
-      for (let i = definitions.length - 1; i >= 0; i--) {
-        if (definitions[i].context <= context) {
-          closestDefinition = definitions[i].identifier;
-          break;
-        }
-      }
-
-      return closestDefinition;
-    }
-
-    return null;
-  }
-}
-
-// Sidebar keyboard shortcuts in form Ctrl + Shift + <key>
-const sideBarKeyBoardMap = {
-  E: 'files-icon',
-  F: 'search-icon',
-  K: 'shortcut-icon',
-  B: 'bug-icon',
-  S: 'settings-icon',
-  N: 'new-file-icon',
-  D: 'new-directory-icon',
-  A: 'auto-focus-icon',
-};
-
-// This module implements the keyboard shortcuts
-// for the VZCode editor.
-// These include:
-// * Alt-w: Close the current tab
-// * Alt-n: Open the create file modal
-// * Alt-PageUp: Change the active tab to the previous one
-// * Alt-PageDown: Change the active tab to the next one
-// * Ctrl-s or Shift-Enter: Run the code and format it with Prettier
-// * Ctrl-Click: Jump to closest definition for a potential identifier
-export const useKeyboardShortcuts = ({
-  closeTabs,
-  activeFileId,
-  activePaneId,
-  handleOpenCreateFileModal,
-  setActiveFileLeft,
-  setActiveFileRight,
-  toggleSearchFocused,
-  runPrettierRef,
-  runCodeRef,
-  sidebarRef,
-  editorCache,
-  codeEditorRef,
-}: {
-  closeTabs: (fileIds: VizFileId[]) => void;
-  activeFileId: VizFileId | null;
-  activePaneId: PaneId;
-  handleOpenCreateFileModal: () => void;
-  setActiveFileLeft: () => void;
-  setActiveFileRight: () => void;
-  toggleSearchFocused: () => void;
-  runPrettierRef: React.MutableRefObject<() => void>;
-  runCodeRef: React.MutableRefObject<() => void>;
-  sidebarRef: React.RefObject<HTMLDivElement>;
-  editorCache: Map<string, { editor: EditorView }>;
-  codeEditorRef: React.RefObject<HTMLDivElement>;
-}) => {
-  useEffect(() => {
-    // This key is needed to look up the current editor in the editor cache.
-    const cacheKey = editorCacheKey(
-      activeFileId,
-      activePaneId,
-    );
-
-    const handleKeyPress = (event: KeyboardEvent) => {
-      if (shouldTriggerRun(event)) {
-        event.preventDefault();
-
-        // Run Prettier
-        const runPrettier = runPrettierRef.current;
-        if (runPrettier !== null) {
-          runPrettier();
-        }
-
-        // Run the code
-        const runCode = runCodeRef.current;
-
-        if (runCode !== null) {
-          runCode();
-        }
-        return;
-      }
-
-      if (event.ctrlKey && event.shiftKey) {
-        // Handle keyboard shortcuts related to the side bar icons
-        document
-          .getElementById(sideBarKeyBoardMap[event.key])
-          ?.click();
-
-        // Ensure the search input is always focused
-        if (event.key === 'F') {
-          toggleSearchFocused();
-        }
-      } else if (event.ctrlKey && event.key === ',') {
-        document
-          .getElementById(sideBarKeyBoardMap['S'])
-          ?.click();
-      }
-
-      if (event.ctrlKey === true) {
-        // On holding CTRL key, search for a potential definition jump using mouse location
-        document.addEventListener(
-          'mouseover',
-          handleMouseOver,
-        );
-      }
-
-      if (event.altKey === true) {
-        // Alt-w: Close the current tab
-        if (event.key === 'w') {
-          // TODO clean this up so we can remove `activeFileId`
-          // as a dependency
-          // TODO closeActiveTab()
-          if (activeFileId) {
-            closeTabs([activeFileId]);
-          }
-          return;
-        }
-
-        // Alt-n: Open the create file modal
-        if (event.key === 'n') {
-          handleOpenCreateFileModal();
-          return;
-        }
-
-        // Alt-PageUp: Change the active tab to the previous one
-        if (event.key === 'PageUp') {
-          setActiveFileLeft();
-          return;
-        }
-
-        // Alt-PageDown: Change the active tab to the next one
-        if (event.key === 'PageDown') {
-          setActiveFileRight();
-          return;
-        }
-
-        if (event.key === '1') {
-          if (sidebarRef.current) {
-            sidebarRef.current.focus();
-          }
-        }
-
-        if (event.key === '2') {
-          if (codeEditorRef.current) {
-            codeEditorRef.current.focus();
-          }
-        }
-      }
-    };
-
-    const resetActiveJumpingElement = (): void => {
-      if (activeJumpingElement) {
-        activeJumpingElement.style.cursor = 'initial';
-        activeJumpingElement.style.textDecoration = 'none';
-        activeJumpingElement = definingNode = null;
-      }
-
-      document.removeEventListener(
-        'mouseover',
-        handleMouseOver,
-      );
-      document.removeEventListener(
-        'mousedown',
-        jumpToDefinitionHandler,
-      );
-    };
-
-    const jumpToDefinitionHandler = (
-      event: MouseEvent,
-    ): void => {
-      // Ensure the current destination node is defined
-      // and current cursor position matches highlighted element
-      if (
-        !definingNode ||
-        (event.target as HTMLSpanElement) !==
-          activeJumpingElement
-      ) {
-        return;
-      }
-
-      // Don't crash if no active file
-      if (!activeFileId) {
-        return;
-      }
-
-      // Move current cursor and center view in the editor to destination node
-
-      const editor: EditorView =
-        editorCache.get(cacheKey).editor;
-      const closestDefinition: SyntaxNode = definingNode;
-
-      editor.dispatch({
-        selection: {
-          anchor: closestDefinition.from,
-          head: closestDefinition.to,
-        },
-        scrollIntoView: true,
-        effects: EditorView.scrollIntoView(
-          closestDefinition.from,
-          {
-            y: 'center',
-          },
-        ),
-      });
-
-      resetActiveJumpingElement();
-    };
-
-    const handleKeyRelease = (event: KeyboardEvent) => {
-      // On releasing CTRL key, reset all active definition jumping elements and listeners
-      if (!event.ctrlKey) {
-        resetActiveJumpingElement();
-      }
-    };
-
-    const handleMouseOver = (event: MouseEvent) => {
-      if (!activeFileId) {
-        return;
-      }
-
-      const editor: EditorView =
-        editorCache.get(cacheKey).editor;
-      const tree = syntaxTree(editor.state);
-      const element = event.target as HTMLSpanElement;
-
-      // Ensure the identifier element can be found and is within the current editor DOM
-      if (
-        element == null ||
-        !editor.dom.contains(element)
-      ) {
-        return;
-      }
-
-      let position: number;
-      try {
-        position = editor.posAtDOM(element);
-      } catch (error) {
-        // Element is not within the current editor's document
-        return;
-      }
-      const identifier: SyntaxNode = tree.resolveInner(
-        position,
-        1,
-      );
-
-      // All valid identifiers must be span elements to find a potential defining jump in editor
-      if (
-        identifier &&
-        element instanceof HTMLSpanElement
-      ) {
-        const potentialJump: SyntaxNode = jumpToDefinition(
-          editor,
-          identifier,
-        );
-
-        // Only allowing to jump to other definition nodes
-        if (
-          potentialJump &&
-          identifier.type.id !== potentialJump.type.id
-        ) {
-          if (activeJumpingElement) {
-            activeJumpingElement.style.cursor = 'initial';
-            activeJumpingElement.style.textDecoration =
-              'none';
-          }
-
-          activeJumpingElement = element;
-          definingNode = potentialJump;
-
-          activeJumpingElement.style.cursor = 'pointer';
-          activeJumpingElement.style.textDecoration =
-            'underline';
-
-          // CTRL + Click: Jump to relative definition, which is removed on CTRL key release
-          document.addEventListener(
-            'mousedown',
-            jumpToDefinitionHandler,
-            { once: true },
-          );
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyPress);
-    document.addEventListener('keyup', handleKeyRelease);
-
-    return () => {
-      document.removeEventListener(
-        'keydown',
-        handleKeyPress,
-      );
-      document.removeEventListener(
-        'keyup',
-        handleKeyRelease,
-      );
-    };
-  }, [
-    handleOpenCreateFileModal,
-    closeTabs,
-    activeFileId,
-    setActiveFileLeft,
-    setActiveFileRight,
-  ]);
-};