Minor Changes

code/client/src/editor/slate/SlateEditor.tsx

@@ -2,7 +2,7 @@ import { Editable, Slate, withReact } from 'slate-react';
 import useInputHandlers from '@editor/slate/hooks/useInputHandlers';
 import useEvents from '@editor/hooks/useEvents';
 import useRenderers from '@editor/slate/hooks/useRenderers';
-import Toolbar from '@editor/slate/toolbar/Toolbar';
+import Toolbar from '@editor/components/toolbar/Toolbar';
 import EditorTitle from '@editor/components/EditorTitle';
 import { withHistory } from 'slate-history';
 import useEditor from '@editor/slate/hooks/useEditor';

code/client/src/editor/slate/hooks/useInputHandlers.ts

@@ -24,7 +24,6 @@ const hotkeys: Record<string, string> = {
  */
 function useInputHandlers(editor: Editor) {
   const fugue: Fugue = Fugue.getInstance();
-  // adds undo and redo functionality
   const { undo, redo } = useHistory(editor);
 
   /**
@@ -119,8 +118,7 @@ function useInputHandlers(editor: Editor) {
   function onEnter(cursor: Cursor) {
     fugue.insertLocal(cursor, '\n');
     const type = editor.children[cursor.line].type as BlockStyle;
-    if (isMultiBlock(type))
-      fugue.updateBlockStyleLocal(type, cursor.line + 1);
+    if (isMultiBlock(type)) fugue.updateBlockStyleLocal(type, cursor.line + 1);
   }
 
   /**
@@ -135,9 +133,7 @@ function useInputHandlers(editor: Editor) {
 
     // Reset block style - same line if only one line selected else only the last line
     if (start.column === 0 || start.line !== end.line) {
-      const newSelection = start.line !== end.line
-        ? { start: { line: start.line + 1, column: 0 }, end }
-        : selection;
+      const newSelection = start.line !== end.line ? { start: { line: start.line + 1, column: 0 }, end } : selection;
       fugue.updateBlockStylesLocalBySelection('paragraph', newSelection);
     }
   }

code/client/src/editor/slate/hooks/useRenderers.tsx

@@ -8,7 +8,7 @@ import { getElementRenderer, getLeafRenderer } from '@editor/slate/plugins/markd
 function useRenderers() {
   const renderElement = useCallback((props: RenderElementProps) => getElementRenderer(props.element.type, props), []);
 
-  const renderLeaf = useCallback (
+  const renderLeaf = useCallback(
     ({ attributes, children, leaf }: RenderLeafProps) => <span {...attributes}>{getLeafRenderer(leaf, children)}</span>,
     []
   );

code/client/src/editor/slate/plugins/markdown/editorOperations.ts

@@ -123,7 +123,7 @@ const insertBreak = (editor: Editor): void => {
   }
 
   // if selection was at the end of the block, unwrap the block
-  if(!Point.equals(end, Range.end(selection))) return;
+  if (!Point.equals(end, Range.end(selection))) return;
   Transforms.unwrapNodes(editor, {
     match: (n: CustomElement) => editor.isInline(n),
     mode: 'all',
@@ -140,7 +140,7 @@ const insertBreak = (editor: Editor): void => {
  */
 const deleteBackward = (editor: Editor, deleteBackward: DeleteBackwardFunction, ...args: [TextUnit]) => {
   const { selection } = editor;
-  if(!selection || !Range.isCollapsed(selection)) return;
+  if (!selection || !Range.isCollapsed(selection)) return;
   const match = editor.above({
     match: (n: CustomElement) => editor.isBlock(n),
   });

code/client/src/editor/slate/utils/domEvents.ts

@@ -10,7 +10,7 @@ const inputEventsKeys: Record<string, string> = {
 } as const;
 
 export const getKeyFromInputEvent = (e: InputEvent) =>
-  (e.inputType === 'insertText') ? e.data : inputEventsKeys[e.inputType];
+  e.inputType === 'insertText' ? e.data : inputEventsKeys[e.inputType];
 
 export function getClipboardEvent(e: InputEvent): ClipboardEvent {
   const dataTransfer = new DataTransfer();

code/client/src/editor/slate/utils/selection.ts

@@ -29,9 +29,10 @@ export function getSelection(editor: Editor): Selection {
  * @param start
  * @param end
  */
-const pointsToSelection = (editor: Editor, start: Point, end: Point): Selection => (
-   { start: pointToCursor(editor, start), end: pointToCursor(editor, end), }
-)
+const pointsToSelection = (editor: Editor, start: Point, end: Point): Selection => ({
+  start: pointToCursor(editor, start),
+  end: pointToCursor(editor, end),
+});
 
 /**
  * Converts a slate point to a cursor
@@ -63,6 +64,7 @@ export function getSelectionByRange(editor: Editor, range: Range, offset: number
   return selection;
 }
 
-export const getSelectionBySlate = (path: Path, offset: number): Selection => (
-  { start: { line: path[0], column: offset }, end: { line: path[0], column: offset } }
-)
+export const getSelectionBySlate = (path: Path, offset: number): Selection => ({
+  start: { line: path[0], column: offset },
+  end: { line: path[0], column: offset },
+});

code/client/src/editor/slate/utils/slate.ts

@@ -32,7 +32,7 @@ export function fugueToSlate(): Descendant[] {
     };
     // new line
     if (node.value === '\n') {
-      const lineStyle = root.styles[lineCounter++] as BlockStyle || 'paragraph';
+      const lineStyle = (root.styles[lineCounter++] as BlockStyle) || 'paragraph';
       descendants.push(descendant(lineStyle, ''));
       lastStyles = node.styles as InlineStyle[];
       continue;

code/client/src/socket/socket.ts

@@ -4,7 +4,11 @@ import { chunkData } from '@editor/crdt/utils';
 
 export const socket = io(config.SOCKET_SERVER_URL);
 
-export const emitChunked = (event: string, data: any, chunkSize : number) =>
-  chunkData(data, chunkSize).forEach((chunk) => socket.emit(event, chunk));
+declare module 'socket.io-client' {
+  interface Socket {
+    emitChunked: (event: string, data: any, chunkSize: number) => void;
+  }
+}
 
-export const singleEmit = (event: string, data: any) => socket.emit(event, data);
+socket.emitChunked = (event: string, data: any, chunkSize: number) =>
+  chunkData(data, chunkSize).forEach(chunk => socket.emit(event, chunk));

code/server/src/controllers/ws/document/onOperation.ts

@@ -6,22 +6,18 @@ function onOperation(service: DocumentService) {
   return (socket: Socket, operations: Operation[]) => {
     for (const operation of operations) {
       switch (operation.type) {
-        case 'insert': {
+        case 'insert':
           service.insertCharacter(operation);
           break;
-        }
-        case 'delete': {
+        case 'delete':
           service.deleteCharacter(operation);
           break;
-        }
-        case 'inline-style': {
+        case 'inline-style':
           service.updateInlineStyle(operation);
           break;
-        }
-        case 'block-style': {
+        case 'block-style':
           service.updateBlockStyle(operation);
           break;
-        }
         default:
           throw new Error('Invalid operation type');
       }

code/server/src/services/documentService.ts

@@ -16,22 +16,18 @@ export default function DocumentService(database: DocumentDatabase): DocumentSer
   }
 
   function insertCharacter(operation: InsertOperation) {
-    if (operation.type !== 'insert') throw new Error('Invalid operation type');
     database.insertCharacter(operation);
   }
 
   function deleteCharacter(operation: DeleteOperation) {
-    if (operation.type !== 'delete') throw new Error('Invalid operation type');
     database.deleteCharacter(operation);
   }
 
   function updateInlineStyle(operation: InlineStyleOperation) {
-    if (operation.type !== 'inline-style') throw new Error('Invalid operation type');
     database.updateInlineStyle(operation);
   }
 
   function updateBlockStyle(operation: BlockStyleOperation) {
-    if (operation.type !== 'block-style') throw new Error('Invalid operation type');
     database.updateBlockStyle(operation);
   }