Bug Fixes

code/client/src/domain/editor/fugue/Fugue.ts

@@ -3,7 +3,7 @@ import { FugueTree } from '@domain/editor/fugue/FugueTree';
 import { generateReplicaId, nodeInsert } from './utils';
 import { type FugueNode, type NodeInsert } from '@domain/editor/fugue/types';
 import { Cursor, Selection } from '@domain/editor/cursor';
-import {isEmpty, last, range} from 'lodash';
+import { isEmpty, last, range } from 'lodash';
 import { Id } from '@notespace/shared/src/document/types/types';
 import {
   BlockStyleOperation,
@@ -256,13 +256,12 @@ export class Fugue {
    */
   *traverseBySelection(selection: Selection, returnDeleted: boolean = false): IterableIterator<FugueNode> {
     const { start, end } = selection;
-    let lineCounter = start.line,
+    let lineCounter = 0, // start.line
       columnCounter = 0,
       inBounds = false;
+    // const lineRootNode = this.tree.getLineRoot(start.line);
 
-    const lineRootNode = this.tree.getLineRoot(start.line === 0 ? 0 : start.line - 1);
-
-    for (const node of this.tree.traverse(lineRootNode, returnDeleted)) {
+    for (const node of this.tree.traverse(this.tree.root, returnDeleted)) {
       // start condition
       if (lineCounter === start.line && columnCounter === start.column) inBounds = true;
 

code/client/src/domain/editor/fugue/useFugue.ts

@@ -1,6 +1,11 @@
 import { useMemo } from 'react';
 import { Fugue } from '@domain/editor/fugue/Fugue';
+import { useParams } from 'react-router-dom';
 
-const useFugue = () => useMemo(() => new Fugue(), []);
+function useFugue() {
+  const { id } = useParams();
+  // reset fugue when navigating between documents
+  return useMemo(() => new Fugue(), [id]); // eslint-disable-line
+}
 
 export default useFugue;

code/client/src/domain/editor/slate/operations/getEventHandlers.ts

@@ -13,11 +13,7 @@ import markdownHandlers from '@domain/editor/slate/operations/markdown/operation
  * @param fugue
  * @param communication
  */
-function getEventHandlers(
-    editor: Editor,
-    fugue: Fugue,
-    communication: Communication
-) {
+function getEventHandlers(editor: Editor, fugue: Fugue, communication: Communication) {
   // domain operations
   const markdownOperations = markdownDomainOperations(fugue, communication);
   const inputOperations = inputDomainOperations(fugue, communication);

code/client/src/domain/editor/slate/operations/input/operations.ts

@@ -14,11 +14,7 @@ const hotkeys: Record<string, string> = {
   u: 'underline',
 };
 
-export default (
-    editor: Editor,
-    domainOperations: InputDomainOperations,
-    onFormat: (mark: InlineStyle) => void) => {
-
+export default (editor: Editor, domainOperations: InputDomainOperations, onFormat: (mark: InlineStyle) => void) => {
   function onInput(e: InputEvent) {
     const key = getKeyFromInputEvent(e);
     if (!key) return;
@@ -90,7 +86,7 @@ export default (
    */
   const onEnter = (cursor: Cursor) => {
     domainOperations.insertLineBreak(cursor);
-  }
+  };
 
   /**
    * Handles backspace key press
@@ -107,21 +103,21 @@ export default (
    */
   const onDelete = ({ line, column }: Cursor) => {
     domainOperations.deleteCharacter({ line, column });
-  }
+  };
 
   /**
    * Handles ctrl + backspace
    */
   const onCtrlBackspace = (cursor: Cursor) => {
     domainOperations.deleteWord(cursor, true);
-  }
+  };
 
   /**
    * Handles ctrl + delete
    */
   const onCtrlDelete = (cursor: Cursor) => {
     domainOperations.deleteWord(cursor, false);
-  }
+  };
 
   /**
    * Handles paste events

code/client/src/domain/workspaces/tree/useWorkspaceTree.ts

@@ -11,69 +11,78 @@ function useWorkspaceTree() {
   }
 
   function addNode(node: Resource) {
-    const newNodes = { ...nodes };
-    const parentNode = newNodes[node.parent];
-    if (!parentNode) throw new Error('Invalid parent id: ' + node.parent);
-    newNodes[node.id] = node;
-    newNodes[node.parent] = { ...parentNode, children: [...parentNode.children, node.id] };
-    setNodes(newNodes);
+    setNodes(prevNodes => {
+      const newNodes = { ...prevNodes };
+      const parentNode = newNodes[node.parent];
+      if (!parentNode) throw new Error('Invalid parent id: ' + node.parent);
+      newNodes[node.id] = node;
+      newNodes[node.parent] = { ...parentNode, children: [...parentNode.children, node.id] };
+      return newNodes;
+    });
   }
 
   function removeNode(id: string) {
-    const node = nodes[id];
-    if (!node) throw new Error('Invalid id: ' + id);
-    const { parent } = node;
-    const parentNode = nodes[parent];
+    setNodes(prevNodes => {
+      const node = prevNodes[id];
+      if (!node) throw new Error('Invalid id: ' + id);
+      const { parent } = node;
+      const parentNode = prevNodes[parent];
 
-    if (!parentNode) throw new Error('Invalid parent id: ' + parent);
-    const newNodes = { ...nodes };
+      if (!parentNode) throw new Error('Invalid parent id: ' + parent);
+      const newNodes = { ...prevNodes };
 
-    const deleteDescendants = (node: Resource) => {
-      node.children.forEach(childId => {
-        const childNode = newNodes[childId];
-        if (childNode) {
-          deleteDescendants(childNode);
-        }
-      });
-      delete newNodes[node.id];
-    };
+      const deleteDescendants = (node: Resource) => {
+        node.children.forEach(childId => {
+          const childNode = newNodes[childId];
+          if (childNode) {
+            deleteDescendants(childNode);
+          }
+        });
+        delete newNodes[node.id];
+      };
 
-    // delete node and its descendants recursively
-    deleteDescendants(node);
+      // delete node and its descendants recursively
+      deleteDescendants(node);
 
-    // remove the node from its parent's children array
-    const index = parentNode.children.indexOf(id);
-    if (index !== -1) parentNode.children.splice(index, 1);
+      // remove the node from its parent's children array
+      const index = parentNode.children.indexOf(id);
+      if (index !== -1) parentNode.children.splice(index, 1);
 
-    newNodes[parent] = parentNode;
-    setNodes(newNodes);
+      newNodes[parent] = parentNode;
+      return newNodes;
+    });
   }
 
   function updateNode(id: string, name: string) {
-    const node = nodes[id];
-    if (!node) throw new Error('Invalid id: ' + id);
-    nodes[id] = { ...node, name };
-    setNodes({ ...nodes });
+    setNodes(prevNodes => {
+      const node = prevNodes[id];
+      if (!node) throw new Error('Invalid id: ' + id);
+      prevNodes[id] = { ...node, name };
+      return { ...prevNodes };
+    });
   }
 
   function moveNode(id: string, newParent: string) {
-    const node = nodes[id];
-    if (!node) throw new Error('Invalid id: ' + id);
-    const { parent } = node;
-    const parentNode = nodes[parent];
+    setNodes(prevNodes => {
+      const newNodes = { ...prevNodes };
+      const node = newNodes[id];
+      if (!node) throw new Error('Invalid id: ' + id);
+      const { parent } = node;
+      const parentNode = newNodes[parent];
 
-    if (parentNode) {
-      const index = parentNode.children.indexOf(node.id);
-      if (index !== -1) parentNode.children.splice(index, 1);
-      nodes[parent] = parentNode;
-    }
-    const newParentNode = nodes[newParent];
-    if (!newParentNode) throw new Error('Invalid parent id: ' + newParent);
-    newParentNode.children.push(node.id);
-    node.parent = newParent;
-    nodes[id] = node;
-    nodes[newParent] = newParentNode;
-    setNodes({ ...nodes });
+      if (parentNode) {
+        const index = parentNode.children.indexOf(node.id);
+        if (index !== -1) parentNode.children.splice(index, 1);
+        newNodes[parent] = parentNode;
+      }
+      const newParentNode = newNodes[newParent];
+      if (!newParentNode) throw new Error('Invalid parent id: ' + newParent);
+      newParentNode.children.push(node.id);
+      node.parent = newParent;
+      newNodes[id] = node;
+      newNodes[newParent] = newParentNode;
+      return newNodes;
+    });
   }
 
   function isDescendant(parentId: string, nodeId: string): boolean {

code/client/src/domain/workspaces/useResources.ts

@@ -3,11 +3,25 @@ import useResourceService from '@services/resource/useResourceService';
 import useSocketListeners from '@services/communication/socket/useSocketListeners';
 import { useCommunication } from '@ui/contexts/communication/useCommunication';
 import useWorkspaceTree from '@domain/workspaces/tree/useWorkspaceTree';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import useError from '@ui/contexts/error/useError';
 
 function useResources() {
   const service = useResourceService();
   const { socket } = useCommunication();
   const tree = useWorkspaceTree();
+  const { wid } = useParams();
+  const [documentId, setDocumentId] = useState<string>();
+  const navigate = useNavigate();
+  const { publishError } = useError();
+
+  // this is wrong, TODO: fix this
+  useEffect(() => {
+    const id = window.location.href.split('/').pop();
+    console.log(id);
+    setDocumentId(id);
+  }, []);
 
   function setResources(resources: Resource[]) {
     tree.setTree(resources);
@@ -23,6 +37,10 @@ function useResources() {
 
   function onDeleteResource(id: string) {
     tree.removeNode(id);
+    if (documentId === id) {
+      navigate(`/workspaces/${wid}`);
+      publishError(Error('Document was deleted'));
+    }
   }
 
   async function deleteResource(id: string) {

code/client/src/ui/pages/document/Document.tsx

@@ -45,7 +45,7 @@ function Document() {
   }, [fugue]);
 
   useEffect(() => {
-    console.log("Loading document");
+    console.log('Loading document');
   }, []);
 
   if (!loaded) return null;

code/client/src/ui/pages/document/components/editor/Editor.tsx

@@ -18,7 +18,7 @@ import getEventHandlers from '@domain/editor/slate/operations/getEventHandlers';
 import getFugueOperations from '@domain/editor/fugue/operations/fugue/operations';
 import './Editor.scss';
 import { useCallback, useEffect } from 'react';
-import {isEqual} from "lodash";
+import { isEqual } from 'lodash';
 
 type SlateEditorProps = {
   title: string;
@@ -35,26 +35,32 @@ function Editor({ title, fugue, communication }: SlateEditorProps) {
   const { renderElement, renderLeaf } = useRenderers(editor, fugue, communication);
   const decorate = useDecorate(editor, cursors);
 
-  const updateEditor = useCallback((newValue: Descendant[]) => {
-    setEditor(prevState => {
-      prevState.children = newValue;
-      return prevState
-    });
-  },[setEditor]);
+  const updateEditor = useCallback(
+    (newValue: Descendant[]) => {
+      setEditor(prevState => {
+        prevState.children = newValue;
+        return prevState;
+      });
+    },
+    [setEditor]
+  );
 
-  const syncEditor = useCallback((slate ?: Descendant[]) => {
-    console.log("Syncing editor")
-    if(slate) {
-      updateEditor(slate);
-      return;
-    }
-    updateEditor(toSlate(fugue));
-  }, [fugue, updateEditor]);
+  const syncEditor = useCallback(
+    (slate?: Descendant[]) => {
+      console.log('Syncing editor');
+      if (slate) {
+        updateEditor(slate);
+        return;
+      }
+      updateEditor(toSlate(fugue));
+    },
+    [fugue, updateEditor]
+  );
 
   const { onInput, onShortcut, onCut, onPaste, onSelectionChange, onFormat, onBlur } = getEventHandlers(
-      editor,
-      fugue,
-      communication
+    editor,
+    fugue,
+    communication
   );
 
   useEffect(() => {
@@ -65,36 +71,40 @@ function Editor({ title, fugue, communication }: SlateEditorProps) {
   useEvents(fugueOperations, communication, syncEditor);
 
   return (
-      <div className="editor">
-        <div className="container">
-          <Slate editor={editor} onChange={() => {
+    <div className="editor">
+      <div className="container">
+        <Slate
+          editor={editor}
+          onChange={() => {
             const slate = toSlate(fugue);
-            if(!isEqual(slate, editor.children)) { // Prevents overwriting the editor with the same value
+            if (!isEqual(slate, editor.children)) {
+              // Prevents overwriting the editor with the same value
               syncEditor(slate);
             }
             onSelectionChange();
-          }} initialValue={initialValue}
-          >
-            <Title title={title} placeholder="Untitled" communication={communication} />
-            <Toolbar onApplyMark={onFormat} />
-            <Editable
-                className="editable"
-                data-testid={'editor'}
-                placeholder={'Start writing...'}
-                spellCheck={false}
-                renderElement={renderElement}
-                renderLeaf={renderLeaf}
-                decorate={decorate}
-                onDragStart={e => e.preventDefault()}
-                onDOMBeforeInput={onInput}
-                onCut={onCut}
-                onPaste={e => onPaste(e.nativeEvent)}
-                onKeyDown={e => onShortcut(e.nativeEvent)}
-                onBlur={onBlur}
-            />
-          </Slate>
-        </div>
+          }}
+          initialValue={initialValue}
+        >
+          <Title title={title} placeholder="Untitled" communication={communication} />
+          <Toolbar onApplyMark={onFormat} />
+          <Editable
+            className="editable"
+            data-testid={'editor'}
+            placeholder={'Start writing...'}
+            spellCheck={false}
+            renderElement={renderElement}
+            renderLeaf={renderLeaf}
+            decorate={decorate}
+            onDragStart={e => e.preventDefault()}
+            onDOMBeforeInput={onInput}
+            onCut={onCut}
+            onPaste={e => onPaste(e.nativeEvent)}
+            onKeyDown={e => onShortcut(e.nativeEvent)}
+            onBlur={onBlur}
+          />
+        </Slate>
       </div>
+    </div>
   );
 }