Code cleanup

code/client/package.json

@@ -19,17 +19,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.18",
     "@notespace/shared": "file:..\\shared",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
-    "react-router-dom": "^6.23.0",
-    "@mui/material": "^5.15.16",
     "@testing-library/jest-dom": "^6.4.5",
     "dotenv": "^16.4.5",
     "eslint-plugin-playwright": "^1.6.0",
     "lodash": "^4.17.21",
     "msw": "^2.2.14",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "react-router-dom": "^6.23.0",
     "slate": "^0.103.0",
     "slate-history": "^0.100.0",
     "slate-react": "^0.102.0",

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

@@ -1,10 +1,10 @@
-import { type Id } from '@notespace/shared/src/document/types/nodes';
 import { BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
-import { FugueTree } from '@notespace/shared/src/document/FugueTree';
+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 { Id } from '@notespace/shared/src/document/types/types';
 import {
   BlockStyleOperation,
   DeleteOperation,
@@ -85,16 +85,21 @@ export class Fugue {
    */
   private getInsertOperation({ line, column }: Cursor, { value, styles }: NodeInsert) {
     const id = { sender: this.replicaId, counter: this.counter++ };
-    let operation: InsertOperation;
 
     const leftOrigin = this.getNodeByCursor({ line, column })!;
 
-    if (isEmpty(leftOrigin.rightChildren)) {
-      operation = { type: 'insert', id, value, parent: leftOrigin.id, side: 'R', styles };
-    } else {
-      const rightOrigin = this.tree.getLeftmostDescendant(leftOrigin.rightChildren[0]);
-      operation = { type: 'insert', id, value, parent: rightOrigin.id, side: 'L', styles };
-    }
+    const operation: InsertOperation = {
+      type: 'insert',
+      id,
+      value,
+      parent: (isEmpty(leftOrigin.rightChildren)
+        ? leftOrigin
+        : this.tree.getLeftmostDescendant(leftOrigin.rightChildren[0])
+      ).id,
+      side: isEmpty(leftOrigin.rightChildren) ? 'R' : 'L',
+      styles,
+    };
+
     if (value === '\n') operation.line = line;
     return operation;
   }
@@ -249,7 +254,7 @@ export class Fugue {
 
   /**
    * Traverses the tree by the given selection
-   * @param selection
+   * @param selection - the selection from which to traverse, in format ]start, end]
    * @param returnDeleted
    */
   *traverseBySelection(selection: Selection, returnDeleted: boolean = false): IterableIterator<FugueNode> {
@@ -260,9 +265,7 @@ export class Fugue {
 
     const lineRootNode = this.tree.getLineRoot(start.line);
 
-    const root = lineRootNode || this.tree.root; // used when reversing a selection that starts at the beginning of a line
-
-    for (const node of this.tree.traverse(root, returnDeleted)) {
+    for (const node of this.tree.traverse(lineRootNode, returnDeleted)) {
       // start condition
       if (lineCounter === start.line && columnCounter === start.column) inBounds = true;
 

code/shared/src/document/FugueTree.ts → code/client/src/domain/editor/fugue/FugueTree.ts

@@ -1,7 +1,9 @@
-import { Id, Node, Nodes } from "./types/nodes";
-import { BlockStyle, InlineStyle } from "./types/styles";
-import { rootNode, treeNode } from "./utils";
-import { RootNode, NodeType } from "./types/nodes";
+import { Node, Nodes } from '@domain/editor/fugue/nodes';
+import { BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
+import { Id } from '@notespace/shared/src/document/types/types';
+import { rootNode, treeNode } from '@domain/editor/fugue/utils';
+
+import { RootNode, NodeType } from '@domain/editor/fugue/nodes';
 
 export class FugueTree<T> {
   /* Holds the root node of the tree.
@@ -18,7 +20,7 @@ export class FugueTree<T> {
 
   constructor() {
     this._root = rootNode();
-    this._nodes.set("root", [this._root]);
+    this._nodes.set('root', [this._root]);
   }
 
   /**
@@ -29,13 +31,7 @@ export class FugueTree<T> {
    * @param side the side of the parent node where this node is located
    * @param styles the styles of the node
    */
-  addNode(
-    id: Id,
-    value: T,
-    parent: Id | null,
-    side: "L" | "R",
-    styles?: InlineStyle[] | BlockStyle[],
-  ) {
+  addNode(id: Id, value: T, parent: Id | null, side: 'L' | 'R', styles?: InlineStyle[] | BlockStyle[]) {
     // create node
     const node = treeNode(id, value, parent, side, 0, styles as InlineStyle[]);
     this._addNode(node);
@@ -49,14 +45,8 @@ export class FugueTree<T> {
    * @param side
    * @param styles
    */
-  addLineRoot(
-    line: number,
-    id: Id,
-    parent: Id,
-    side: "L" | "R",
-    styles?: InlineStyle[],
-  ) {
-    const node = treeNode(id, "\n", parent, side, 0, styles) as Node<T>;
+  addLineRoot(line: number, id: Id, parent: Id, side: 'L' | 'R', styles?: InlineStyle[]) {
+    const node = treeNode(id, '\n', parent, side, 0, styles) as Node<T>;
 
     this._root.value.splice(line, 0, node);
 
@@ -88,8 +78,7 @@ export class FugueTree<T> {
    */
   private insertChild({ id, parent, side }: Node<T>) {
     const parentNode = this.getById(parent!);
-    const siblings =
-      side === "L" ? parentNode.leftChildren : parentNode.rightChildren;
+    const siblings = side === 'L' ? parentNode.leftChildren : parentNode.rightChildren;
     let i = 0;
     while (i < siblings.length) if (!(id.sender > siblings[i++].sender)) break;
 
@@ -103,8 +92,7 @@ export class FugueTree<T> {
   deleteNode(id: Id) {
     const node = this.getById(id);
 
-    if (node.value === "\n")
-      this._root.value = this._root.value.filter((n) => n.id !== id);
+    if (node.value === '\n') this._root.value = this._root.value.filter(n => n.id !== id);
 
     if (!node.isDeleted) node.isDeleted = true;
   }
@@ -124,11 +112,7 @@ export class FugueTree<T> {
    * @param delta the amount by which to update the depths.
    */
   private updateDepths(node: NodeType<T>, delta: number) {
-    for (
-      let anc: NodeType<T> | null = node;
-      anc !== null;
-      anc = anc.parent && this.getById(anc.parent)
-    ) {
+    for (let anc: NodeType<T> | null = node; anc !== null; anc = anc.parent && this.getById(anc.parent)) {
       anc.depth += delta;
     }
   }
@@ -145,7 +129,7 @@ export class FugueTree<T> {
       const node = bySender[id.counter];
       if (node) return node;
     }
-    throw new Error("Unknown ID: " + JSON.stringify(id));
+    throw new Error('Unknown ID: ' + JSON.stringify(id));
   }
 
   getLineRoot(line: number): NodeType<T> {
@@ -159,7 +143,7 @@ export class FugueTree<T> {
   clear() {
     this._root = rootNode();
     this._nodes.clear();
-    this._nodes.set("root", [this._root]);
+    this._nodes.set('root', [this._root]);
   }
 
   /**
@@ -206,26 +190,19 @@ export class FugueTree<T> {
    * @param returnDeleted
    * @returns an iterator over the nodes in the subtree.
    */
-  *traverse(
-    root: NodeType<T>,
-    returnDeleted: boolean = false,
-  ): IterableIterator<NodeType<T>> {
+  *traverse(root: NodeType<T>, returnDeleted: boolean = false): IterableIterator<NodeType<T>> {
     let current = root;
-    const stack: { side: "L" | "R"; childIndex: number }[] = [
-      { side: "L", childIndex: 0 },
-    ];
+    const stack: { side: 'L' | 'R'; childIndex: number }[] = [{ side: 'L', childIndex: 0 }];
     while (true) {
       const top = stack[stack.length - 1];
       if (!top) return;
-      const children =
-        top.side === "L" ? current.leftChildren : current.rightChildren;
+      const children = top.side === 'L' ? current.leftChildren : current.rightChildren;
       if (top.childIndex === children.length) {
         // We are done with the children on top.side.
-        if (top.side === "L") {
+        if (top.side === 'L') {
           // Visit node then move to right children. If the node is deleted, skip it if returnDeleted is false.
-          if (current.id !== root.id && (returnDeleted || !current.isDeleted))
-            yield current;
-          top.side = "R";
+          if (current.id !== root.id && (returnDeleted || !current.isDeleted)) yield current;
+          top.side = 'R';
           top.childIndex = 0;
           continue;
         }
@@ -241,15 +218,15 @@ export class FugueTree<T> {
       if (child.depth > 0) {
         // Traverse child.
         current = child;
-        stack.push({ side: "L", childIndex: 0 });
+        stack.push({ side: 'L', childIndex: 0 });
       }
     }
   }
 
   toString() {
     return Array.from(this.traverse(this._root))
-      .map((node) => node.value)
-      .join("");
+      .map(node => node.value)
+      .join('');
   }
 
   get root(): RootNode<T> {

code/shared/src/document/types/nodes.ts → code/client/src/domain/editor/fugue/nodes.ts

@@ -1,9 +1,5 @@
-import { Style } from "./styles";
-
-export type Id = {
-  sender: string;
-  counter: number;
-};
+import { Style } from '@notespace/shared/src/document/types/styles';
+import { Id } from '@notespace/shared/src/document/types/types';
 
 /**
  * A node in the tree.
@@ -22,7 +18,7 @@ export type Node<T> = {
   value: T;
   isDeleted: boolean;
   parent: Id | null;
-  side: "L" | "R";
+  side: 'L' | 'R';
   leftChildren: Id[];
   rightChildren: Id[];
   depth: number;

code/client/src/domain/editor/fugue/types.d.ts

@@ -1,5 +1,5 @@
 import { type InlineStyle } from '@notespace/shared/src/document/types/styles';
-import { NodeType } from '@notespace/shared/src/document/types/nodes';
+import { NodeType } from '@domain/editor/fugue/nodes';
 
 export type NodeInsert = {
   value: string;

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Fugue } from '@domain/editor/fugue/fugue';
+import { Fugue } from '@domain/editor/fugue/Fugue';
 
 const useFugue = () => useMemo(() => new Fugue(), []);
 

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

@@ -1,5 +1,8 @@
 import { range } from 'lodash';
 import { InlineStyle } from '@notespace/shared/src/document/types/styles';
+import { RootNode } from '@domain/editor/fugue/nodes';
+import { Id } from '@notespace/shared/src/document/types/types';
+import { Node } from '@domain/editor/fugue/nodes';
 
 const BASE64CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
 const DEFAULT_REPLICA_ID_LENGTH = 10;
@@ -25,3 +28,38 @@ export function generateReplicaId() {
  * @returns the insert node
  */
 export const nodeInsert = (value: string, styles: InlineStyle[]) => ({ value, styles });
+
+export function rootNode<T>(): RootNode<T> {
+  return {
+    id: { sender: 'root', counter: 0 },
+    value: [],
+    isDeleted: true,
+    parent: null,
+    side: 'R',
+    leftChildren: [],
+    rightChildren: [],
+    depth: 0,
+    styles: [],
+  };
+}
+
+export function treeNode<T>(
+  id: Id,
+  value: T,
+  parent: Id | null,
+  side: 'L' | 'R',
+  depth: number,
+  styles: InlineStyle[] = []
+): Node<T> {
+  return {
+    id,
+    value,
+    parent,
+    side,
+    isDeleted: false,
+    leftChildren: [],
+    rightChildren: [],
+    depth,
+    styles,
+  };
+}

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

@@ -1,4 +1,4 @@
-import { Fugue } from '@domain/editor/fugue/fugue';
+import { Fugue } from '@domain/editor/fugue/Fugue';
 import { FugueDomainOperations } from '@domain/editor/operations/fugue/types';
 import { Operation } from '@notespace/shared/src/document/types/operations';
 

code/client/src/domain/editor/operations/history/operations.ts

@@ -1,4 +1,4 @@
-import { Fugue } from '@domain/editor/fugue/fugue';
+import { Fugue } from '@domain/editor/fugue/Fugue';
 import {
   ApplyHistory,
   HistoryDomainOperations,
@@ -16,6 +16,7 @@ import { Communication } from '@services/communication/communication';
 import { BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
 import { getStyleType } from '@notespace/shared/src/document/types/styles';
 import { Text, Element } from 'slate';
+import { ReviveOperation } from '@notespace/shared/src/document/types/operations';
 
 export default (fugue: Fugue, { socket }: Communication): HistoryDomainOperations => {
   const applyHistoryOperation: ApplyHistory = (operations: HistoryOperation[]) => {
@@ -71,9 +72,25 @@ export default (fugue: Fugue, { socket }: Communication): HistoryDomainOperation
   /**
    * Inserts a node
    * @param selection
+   * @param lineOperation
    * @param node
    */
-  function insertNode({ selection, node }: InsertNodeOperation) {
+  function insertNode({ selection, lineOperation, node }: InsertNodeOperation) {
+    // Whole line operation
+    if (lineOperation) {
+      // Revive line's root node
+      if (!Element.isElement(node)) return;
+      const reviveOperations: ReviveOperation[] = [fugue.reviveLocalByCursor(selection.start) as ReviveOperation];
+      const styles = Object.keys(node).filter(key => key !== 'text');
+      const styleOperations = styles.map(style => {
+        const styleType = getStyleType(style);
+        return styleType === 'block'
+          ? fugue.updateBlockStyleLocal(selection.start.line, style as BlockStyle)
+          : fugue.updateInlineStyleLocal(selection, style as InlineStyle, true);
+      });
+      return [...reviveOperations, styleOperations];
+    }
+
     const styles = Object.keys(node).filter(key => key !== 'text');
     if (!Text.isText(node)) return;
 

code/client/src/domain/editor/operations/history/types.d.ts

@@ -57,6 +57,7 @@ export type RemoveTextOperation = {
 export type InsertNodeOperation = {
   type: BaseInsertNodeOperation['type'];
   node: Node;
+  lineOperation: boolean;
   selection: Selection;
 };
 
@@ -69,6 +70,7 @@ export type InsertNodeOperation = {
 export type RemoveNodeOperation = {
   type: BaseRemoveNodeOperation['type'];
   node: Node;
+  lineOperation: boolean;
   selection: Selection;
 };
 

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

@@ -1,5 +1,5 @@
 import { BaseSelection } from 'slate';
-import { Fugue } from '@domain/editor/fugue/fugue';
+import { Fugue } from '@domain/editor/fugue/Fugue';
 import { InputDomainOperations } from '@domain/editor/operations/input/types';
 import { Cursor, Selection } from '@domain/editor/cursor';
 import { nodeInsert } from '@domain/editor/fugue/utils';