Merge pull request #28 from NoteSpaceTeam/canitworkdunno

Branch merge into main

code/client/src/config.ts

@@ -1,4 +1,4 @@
-const SERVER_URL = 'https://notespace-0es7.onrender.com';
+const SERVER_URL = 'http://localhost:8080';
 
 export default {
   SERVER_URL,

code/client/src/domain/editor/connectors/Connectors.ts

@@ -0,0 +1,40 @@
+import { MarkdownConnector } from '@domain/editor/connectors/markdown/types';
+import { ServiceConnector } from '@domain/editor/connectors/service/connector';
+import { InputConnector } from '@domain/editor/connectors/input/types';
+import { HistoryConnector } from '@domain/editor/connectors/history/types';
+import { Fugue } from '@domain/editor/fugue/Fugue';
+import { Communication } from '@services/communication/communication';
+import inputConnector from '@domain/editor/connectors/input/connector';
+import markdownConnector from '@domain/editor/connectors/markdown/connector';
+import historyConnector from '@domain/editor/connectors/history/connector';
+import serviceConnector from '@domain/editor/connectors/service/connector';
+
+export class Connectors {
+  private readonly inputConnector: InputConnector;
+  private readonly markdownConnector: MarkdownConnector;
+  private readonly historyConnector: HistoryConnector;
+  private readonly serviceConnector: ServiceConnector;
+
+  constructor(fugue: Fugue, communication: Communication) {
+    this.serviceConnector = serviceConnector(fugue, communication);
+    this.inputConnector = inputConnector(fugue, this.serviceConnector);
+    this.markdownConnector = markdownConnector(fugue, this.serviceConnector);
+    this.historyConnector = historyConnector(fugue, this.serviceConnector);
+  }
+
+  get input(): InputConnector {
+    return this.inputConnector;
+  }
+
+  get markdown(): MarkdownConnector {
+    return this.markdownConnector;
+  }
+
+  get history(): HistoryConnector {
+    return this.historyConnector;
+  }
+
+  get service(): ServiceConnector {
+    return this.serviceConnector;
+  }
+}

code/client/src/domain/editor/fugue/operations/history/operations.ts → code/client/src/domain/editor/connectors/history/connector.ts

@@ -1,7 +1,11 @@
+import { Element, Text } from 'slate';
 import { Fugue } from '@domain/editor/fugue/Fugue';
+import { ReviveOperation } from '@notespace/shared/src/document/types/operations';
+import { BlockStyle, getStyleType, InlineStyle } from '@notespace/shared/src/document/types/styles';
+import { ServiceConnector } from '@domain/editor/connectors/service/connector';
 import {
   ApplyHistory,
-  HistoryDomainOperations,
+  HistoryConnector,
   HistoryOperation,
   InsertNodeOperation,
   InsertTextOperation,
@@ -11,22 +15,18 @@ import {
   SetNodeOperation,
   SplitNodeOperation,
   UnsetNodeOperation,
-} from '@domain/editor/fugue/operations/history/types';
-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';
+} from '@domain/editor/connectors/history/types';
+import { Operation } from '@notespace/shared/src/document/types/operations';
 
-export default (fugue: Fugue, { socket }: Communication): HistoryDomainOperations => {
+export default (fugue: Fugue, servicesConnector: ServiceConnector): HistoryConnector => {
   const applyHistoryOperation: ApplyHistory = (operations: HistoryOperation[]) => {
     const communicationOperations = operations
       .reverse()
       .map(operation => getOperation(operation))
       .flat()
       .filter(operation => operation !== undefined && operation !== null);
 
-    socket.emit('operations', communicationOperations);
+    servicesConnector.emitOperations(communicationOperations as Operation[]);
   };
 
   function getOperation(operation: HistoryOperation) {

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

@@ -0,0 +1,7 @@
+import { HistoryOperation } from '@domain/editor/slate/operations/history/types';
+
+export type HistoryConnector = {
+  applyHistoryOperation: ApplyHistory;
+};
+
+export type ApplyHistory = (operations: HistoryOperation[]) => void;

code/client/src/domain/editor/fugue/operations/input/operations.ts → code/client/src/domain/editor/connectors/input/connector.ts

@@ -1,18 +1,18 @@
-import { BaseSelection } from 'slate';
-import { Fugue } from '@domain/editor/fugue/Fugue';
-import { InputDomainOperations } from '@domain/editor/fugue/operations/input/types';
 import { Cursor, Selection } from '@domain/editor/cursor';
-import { nodeInsert } from '@domain/editor/fugue/utils';
 import { InlineStyle } from '@notespace/shared/src/document/types/styles';
+import { nodeInsert } from '@domain/editor/fugue/utils';
 import { Operation } from '@notespace/shared/src/document/types/operations';
-import { Communication } from '@services/communication/communication';
 import { isEqual } from 'lodash';
+import { BaseSelection } from 'slate';
+import { Fugue } from '@domain/editor/fugue/Fugue';
+import { ServiceConnector } from '@domain/editor/connectors/service/connector';
+import { InputConnector } from '@domain/editor/connectors/input/types';
 
-export default (fugue: Fugue, { socket }: Communication): InputDomainOperations => {
+export default (fugue: Fugue, servicesConnector: ServiceConnector): InputConnector => {
   function insertCharacter(char: string, cursor: Cursor, styles: InlineStyle[] = []) {
     if (char.length !== 1) throw new Error('Invalid character');
     const operations = fugue.insertLocal(cursor, nodeInsert(char, styles));
-    socket.emit('operations', operations);
+    servicesConnector.emitOperations(operations);
   }
 
   function insertLineBreak(cursor: Cursor) {
@@ -22,14 +22,16 @@ export default (fugue: Fugue, { socket }: Communication): InputDomainOperations
       const styleOperation = fugue.updateBlockStyleLocal(cursor.line + 1, style, true);
       operations.push(styleOperation);
     }
-    socket.emit('operations', operations);
+    servicesConnector.emitOperations(operations);
   }
 
   function deleteCharacter(cursor: Cursor) {
     // don't delete line if it's not a paragraph - this is to prevent deleting the block style & line simultaneously
     if (cursor.column === 0 && fugue.getBlockStyle(cursor.line) !== 'paragraph') return;
     const operations = fugue.deleteLocalByCursor(cursor);
-    if (operations) socket.emit('operations', operations);
+    if (operations) {
+      servicesConnector.emitOperations(operations);
+    }
   }
 
   function deleteSelection(selection: Selection) {
@@ -39,25 +41,25 @@ export default (fugue: Fugue, { socket }: Communication): InputDomainOperations
     // if(selection.end.column === 0) selection.end.column += 1;
 
     const operations = fugue.deleteLocal(selection);
-    socket.emit('operations', operations);
+    servicesConnector.emitOperations(operations);
   }
 
   function deleteWord(cursor: Cursor, reverse: boolean) {
     const operations = fugue.deleteWordByCursor(cursor, reverse);
     if (!operations) return;
-    socket.emit('operations', operations);
+    servicesConnector.emitOperations(operations);
   }
 
   function pasteText(start: Cursor, text: string) {
     const chars = text.split('');
     const lineNodes = chars.filter(char => char === '\n');
     const insertOperations: Operation[] = fugue.insertLocal(start, ...text);
     const styleOperations = lineNodes.map(() => fugue.updateBlockStyleLocal(start.line + 1, 'paragraph', true));
-    socket.emit('operations', [...styleOperations, ...insertOperations]);
+    servicesConnector.emitOperations([...styleOperations, ...insertOperations]);
   }
 
   function updateSelection(range: BaseSelection, styles: InlineStyle[]) {
-    socket.emit('cursorChange', { range, styles });
+    servicesConnector.emitCursorChange({ range, styles });
   }
 
   return {

code/client/src/domain/editor/fugue/operations/input/types.d.ts → code/client/src/domain/editor/connectors/input/types.d.ts

@@ -1,8 +1,8 @@
-import { InlineStyle } from '@notespace/shared/src/document/types/styles';
 import { Cursor, Selection } from '@domain/editor/cursor';
+import { InlineStyle } from '@notespace/shared/src/document/types/styles';
 import { BaseSelection } from 'slate';
 
-export type InputDomainOperations = {
+export type InputConnector = {
   insertCharacter: InsertCharacterHandler;
   insertLineBreak: InsertLineBreakHandler;
   deleteCharacter: DeleteCharacterHandler;

code/client/src/domain/editor/fugue/operations/markdown/operations.ts → code/client/src/domain/editor/connectors/markdown/connector.ts

@@ -1,20 +1,15 @@
-import { Fugue } from '@domain/editor/fugue/Fugue';
 import { BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
 import { Selection } from '@domain/editor/cursor';
-import { MarkdownDomainOperations } from '@domain/editor/fugue/operations/markdown/types';
-import { deleteAroundSelection } from '@domain/editor/fugue/operations/markdown/utils';
-import { Communication } from '@services/communication/communication';
+import { Fugue } from '@domain/editor/fugue/Fugue';
 import { Operation } from '@notespace/shared/src/document/types/operations';
 import { isSelectionEmpty } from '@domain/editor/slate/utils/selection';
 import { isEqual } from 'lodash';
 import { Id } from '@notespace/shared/src/document/types/types';
+import { deleteAroundSelection } from '@domain/editor/connectors/markdown/utils';
+import { ServiceConnector } from '@domain/editor/connectors/service/connector';
+import { MarkdownConnector } from '@domain/editor/connectors/markdown/types';
 
-/**
- * Handlers for markdown operations
- * @param fugue
- * @param communication
- */
-export default (fugue: Fugue, { socket }: Communication): MarkdownDomainOperations => {
+export default (fugue: Fugue, serviceConnector: ServiceConnector): MarkdownConnector => {
   /**
    * Applies a block style to the editor, and emits the operation to the server.
    * @param style
@@ -38,7 +33,7 @@ export default (fugue: Fugue, { socket }: Communication): MarkdownDomainOperatio
     operations.push(styleOperation);
 
     // emit operations
-    socket.emit('operations', operations);
+    serviceConnector.emitOperations(operations);
   }
 
   /**
@@ -65,7 +60,7 @@ export default (fugue: Fugue, { socket }: Communication): MarkdownDomainOperatio
     operations.push(...styleOperations);
 
     // emit operations
-    socket.emit('operations', operations);
+    serviceConnector.emitOperations(operations);
   }
 
   function deleteBlockStyles(selection: Selection) {
@@ -76,7 +71,7 @@ export default (fugue: Fugue, { socket }: Communication): MarkdownDomainOperatio
     if (inStartOfLine || isMultiLine) {
       const newSelection = start.column !== 0 ? { start: { line: start.line + 1, column: 0 }, end } : selection;
       const operations = fugue.updateBlockStylesLocalBySelection('paragraph', newSelection);
-      socket.emit('operations', operations);
+      serviceConnector.emitOperations(operations);
     }
   }
 

code/client/src/domain/editor/fugue/operations/markdown/types.d.ts → code/client/src/domain/editor/connectors/markdown/types.d.ts

@@ -1,7 +1,7 @@
 import { BlockStyle, InlineStyle } from '@notespace/shared/src/document/types/styles';
 import { Selection } from '@domain/editor/cursor';
 
-export type MarkdownDomainOperations = {
+export type MarkdownConnector = {
   applyBlockStyle: ApplyBlockStyle;
   applyInlineStyle: ApplyInlineStyle;
   deleteBlockStyles: DeleteBlockStyles;

code/client/src/domain/editor/connectors/service/connector.ts

@@ -0,0 +1,48 @@
+import { Communication } from '@services/communication/communication';
+import { Fugue } from '@domain/editor/fugue/Fugue';
+import { Operation } from '@notespace/shared/src/document/types/operations';
+import { InlineStyle } from '@notespace/shared/src/document/types/styles';
+import { BaseSelection } from 'slate';
+import { SocketEventHandlers } from '@services/communication/socket/socketCommunication';
+
+export type ServiceConnector = {
+  communication: Communication;
+  applyFugueOperations: (operations: Operation[]) => void;
+  emitOperations: (operations: Operation[]) => void;
+  emitCursorChange({ range, styles }: { range: BaseSelection; styles: InlineStyle[] }): void;
+  on(name: string, handler: (...args: any[]) => void): void;
+  getEvents(): SocketEventHandlers;
+};
+
+export default (fugue: Fugue, communication: Communication): ServiceConnector => {
+  const events: SocketEventHandlers = {};
+
+  function applyFugueOperations(operations: Operation[]) {
+    fugue.applyOperations(operations);
+  }
+
+  function emitOperations(operations: Operation[]) {
+    communication.socket.emit('operations', operations);
+  }
+
+  function emitCursorChange({ range, styles }: { range: BaseSelection; styles: InlineStyle[] }) {
+    communication.socket.emit('cursorChange', { range, styles });
+  }
+
+  function on(name: string, handler: (...args: any[]) => void) {
+    events[name] = handler;
+  }
+
+  function getEvents() {
+    return events;
+  }
+
+  return {
+    communication,
+    applyFugueOperations,
+    emitOperations,
+    emitCursorChange,
+    on,
+    getEvents,
+  };
+};

code/client/src/domain/editor/connectors/useConnectors.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { Connectors } from '@domain/editor/connectors/Connectors';
+import { Fugue } from '@domain/editor/fugue/Fugue';
+import { Communication } from '@services/communication/communication';
+
+export default function (fugue: Fugue, communication: Communication) {
+  return useMemo(() => new Connectors(fugue, communication), [communication, fugue]);
+}

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

@@ -171,13 +171,12 @@ export class Fugue {
   reviveLocal(selection: Selection): ReviveOperation[] {
     const nodes = Array.from(this.traverseBySelection(selection, true));
     return nodes.map(node => {
-        if (node.value === '\n') {
-          selection.start.line++;
-          selection.start.column = 0;
-        }
-        else selection.start.column++;
+      if (node.value === '\n') {
+        selection.start.line++;
+        selection.start.column = 0;
+      } else selection.start.column++;
 
-      return this.reviveNode(node.id, selection.start)
+      return this.reviveNode(node.id, selection.start);
     });
   }
 
@@ -195,7 +194,7 @@ export class Fugue {
    * @param id
    * @param cursor
    */
-  reviveNode(id: Id, cursor : Cursor): ReviveOperation {
+  reviveNode(id: Id, cursor: Cursor): ReviveOperation {
     this.tree.reviveNode(id);
     return { type: 'revive', id, cursor };
   }

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

@@ -1,28 +1,21 @@
 import { type Editor } from 'slate';
-import inputHandlers from '@domain/editor/slate/operations/input/operations';
-import { Fugue } from '@domain/editor/fugue/Fugue';
-import inputDomainOperations from '@domain/editor/fugue/operations/input/operations';
-import markdownDomainOperations from '@domain/editor/fugue/operations/markdown/operations';
-import { Communication } from '@services/communication/communication';
-import markdownHandlers from '@domain/editor/slate/operations/markdown/operations';
+import inputHandlers from '@domain/editor/slate/operations/input';
+import markdownHandlers from '@domain/editor/slate/operations/markdown';
+import { InputConnector } from '@domain/editor/connectors/input/types';
+import { MarkdownConnector } from '@domain/editor/connectors/markdown/types';
 
 /**
  * Handles input events
  * @param editor
- * @param syncEditor
- * @param fugue
- * @param communication
+ * @param inputConnector
+ * @param markdownConnector
  */
-function getEventHandlers(editor: Editor, fugue: Fugue, communication: Communication) {
-  // domain operations
-  const markdownOperations = markdownDomainOperations(fugue, communication);
-  const inputOperations = inputDomainOperations(fugue, communication);
-
+function getEventHandlers(editor: Editor, inputConnector: InputConnector, markdownConnector: MarkdownConnector) {
   // event handlers
-  const { onFormat } = markdownHandlers(editor, markdownOperations);
+  const { onFormat } = markdownHandlers(editor, markdownConnector);
   const { onInput, onCut, onPaste, onSelectionChange, onBlur, onShortcut } = inputHandlers(
     editor,
-    inputOperations,
+    inputConnector,
     onFormat
   );