Some Fixes

code/client/src/editor/components/cursor/Cursor.tsx

@@ -1,16 +1,19 @@
 import { ReactNode } from 'react';
+import { InlineStyle } from '../../../../../shared/types/styles';
 
 type CursorProps = {
   children: ReactNode;
   color: string;
+  styles: InlineStyle[];
 };
 
-function Cursor({ children, color }: CursorProps) {
+function Cursor({ children, color, styles }: CursorProps) {
+  const width = styles.includes('bold') ? '2px' : '1px';
   return (
     <span
       style={{
         zIndex: -1,
-        outline: `1px solid ${color}`,
+        outline: `${width} solid ${color}`,
       }}
     >
       {children}

code/client/src/editor/crdt/fugue.ts

@@ -243,7 +243,7 @@ export class Fugue {
   }
 
   /**
-   * Traverses the tree until the given separator is found
+   * Traverses the tree until the given separator is found by cursor position
    * @param separator
    * @param line
    * @param column
@@ -254,14 +254,13 @@ export class Fugue {
     { line, column }: Cursor,
     reverse: boolean = false
   ): IterableIterator<FugueNode[]> {
-    const nodes: FugueNode[] = [];
     const selection = reverse
-      ? { start: { line, column: 0 }, end: { line: line, column: column } }
-      : { start: { line, column: column }, end: { line: line, column: Infinity } };
+      ? { start: { line, column: 0 }, end: { line, column } }
+      : { start: { line, column }, end: { line, column: Infinity } };
 
-    const iterator = this.traverseBySelection(selection);
-    const list = Array.from(iterator);
-    const elements = reverse ? list.reverse() : list;
+    const nodesInSelection = Array.from(this.traverseBySelection(selection));
+    const elements = reverse ? nodesInSelection.reverse() : nodesInSelection;
+    const nodes: FugueNode[] = [];
     for (const node of elements) {
       if (node.value === separator && last(nodes)?.value !== separator) {
         yield nodes;

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

@@ -47,8 +47,8 @@ export default (fugue: Fugue, communication: Communication): InputDomainOperatio
     communication.emitChunked('operation', operations);
   }
 
-  function updateSelection(range: BaseSelection) {
-    communication.emit('cursorChange', range);
+  function updateSelection(range: BaseSelection, styles: InlineStyle[]) {
+    communication.emit('cursorChange', { range, styles });
   }
 
   return {

code/client/src/editor/domain/document/input/types.ts

@@ -18,4 +18,4 @@ export type DeleteCharacterHandler = (cursor: Cursor) => void;
 export type DeleteSelectionHandler = (selection: Selection) => void;
 export type DeleteWordHandler = (cursor: Cursor, reverse: boolean) => void;
 export type PasteTextHandler = (start: Cursor, text: string[], lineNodes: string[]) => void;
-export type UpdateSelectionHandler = (range: BaseSelection) => void;
+export type UpdateSelectionHandler = (range: BaseSelection, styles: InlineStyle[]) => void;

code/client/src/editor/domain/document/markdown/operations.ts

@@ -25,7 +25,7 @@ export default (fugue: Fugue, communication: Communication): MarkdownDomainOpera
 
     // delete trigger nodes
     if (deleteTriggerNodes) {
-      const cursor = { line, column: line === 0 ? 0 : 1 };
+      const cursor = { line, column: 0 };
       const triggerNodes: FugueNode[] = fugue.traverseBySeparator(' ', cursor, false).next().value;
       const deleteOperations = triggerNodes.map(node => fugue.deleteLocalById(node.id)).flat();
       operations.push(...deleteOperations);

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

@@ -11,7 +11,11 @@ const CustomEditor = {
 
   toggleMark(editor: Editor, mark: string) {
     const isActive = CustomEditor.isMarkActive(editor, mark);
-    Editor.addMark(editor, mark, !isActive);
+    if (isActive) {
+      Editor.removeMark(editor, mark);
+    } else {
+      Editor.addMark(editor, mark, true);
+    }
     return !isActive;
   },
 

code/client/src/editor/slate/handlers/input/inputHandlers.ts

@@ -99,7 +99,7 @@ export default (editor: Editor, domainOperations: InputDomainOperations, onForma
    * Deletes the character after the cursor
    */
   function onDelete({ line, column }: Cursor) {
-    const cursor = { line, column: column + 1 };
+    const cursor = { line, column };
     domainOperations.deleteCharacter(cursor);
   }
 
@@ -143,7 +143,8 @@ export default (editor: Editor, domainOperations: InputDomainOperations, onForma
    * Handles cursor selection
    */
   function onSelectionChange() {
-    domainOperations.updateSelection(editor.selection);
+    const styles = CustomEditor.getMarks(editor) as InlineStyle[];
+    domainOperations.updateSelection(editor.selection, styles);
   }
 
   return { onInput, onPaste, onCut, onSelectionChange, onShortcut };

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

@@ -2,11 +2,13 @@ import { Range } from 'slate';
 import { useState } from 'react';
 import useSocketListeners from '@socket/useSocketListeners';
 import { Communication } from '@editor/domain/communication';
+import { InlineStyle } from '@notespace/shared/types/styles';
 
 export type CursorData = {
   id: string;
   range: Range | null;
   color: string;
+  styles: InlineStyle[];
 };
 
 export function useCursors(communication: Communication) {

code/client/src/editor/slate/plugins/markdown/rendering/renderers.tsx

@@ -35,9 +35,9 @@ export const getLeafRenderer = (leaf: CustomText, children: ReactNode) => {
     children = renderer(children);
   }
   if (leaf.cursor) {
-    const { color, id, range } = leaf.cursor;
+    const { color, id, range, styles } = leaf.cursor;
     if (Range.isCollapsed(range!)) {
-      children = <Cursor color={color} key={id} children={children} />;
+      children = <Cursor color={color} styles={styles} key={id} children={children} />;
     } else {
       children = <Selection color={color} children={children} />;
     }

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

@@ -19,6 +19,7 @@ export function toSlate(fugue: Fugue): Descendant[] {
 
   for (const node of fugue.traverseTree()) {
     if (!node.value) continue;
+
     // create a text node with the given styles
     const textNode: CustomText = {
       text: node.value as string,
@@ -28,16 +29,20 @@ export function toSlate(fugue: Fugue): Descendant[] {
       strikethrough: node.styles.includes('strikethrough'),
       code: node.styles.includes('code'),
     };
-    // new line
+
+    // new line - create a new paragraph
     if (node.value === '\n') {
       const lineStyle = fugue.getBlockStyle(lineCounter++);
       descendants.push(descendant(lineStyle, ''));
       lastStyles = [];
       continue;
     }
+
     const lastDescendant = last(descendants);
-    if (!isEqual(lastStyles, node.styles)) lastDescendant.children.push(textNode);
-    else {
+    if (!isEqual(lastStyles, node.styles.filter(Boolean))) {
+      lastDescendant.children.push(textNode);
+    } else {
+      // merge text nodes with the same styles
       const lastTextNode = last(lastDescendant.children) as CustomText;
       lastTextNode.text += textNode.text;
     }

code/client/src/socket/socket.ts

@@ -23,5 +23,5 @@ socket.emitChunked = (event: string, data: any[], chunkSize: number = CHUNK_DATA
     }
   };
   socket.emit(event, chunks[chunkIndex++]);
-  socket.on('ack', () => onAcknowledge);
+  socket.on('ack', onAcknowledge);
 };

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

@@ -1,4 +1,10 @@
 import { Socket } from 'socket.io';
+import { InlineStyle } from '@notespace/shared/types/styles';
+
+type CursorData = {
+  range: any;
+  styles: InlineStyle[];
+};
 
 const cursorColorsMap = new Map<string, string>();
 
@@ -17,9 +23,9 @@ function deleteCursor(socket: Socket) {
   socket.broadcast.emit('cursorChange', { id: socket.id });
 }
 
-function updateCursor(socket: Socket, range: any) {
+function updateCursor(socket: Socket, data: CursorData) {
   const color = getColor(socket);
-  socket.broadcast.emit('cursorChange', { range, id: socket.id, color });
+  socket.broadcast.emit('cursorChange', { ...data, id: socket.id, color });
 }
 
 function getColor(socket: Socket) {

code/shared/types/styles.ts

@@ -30,7 +30,6 @@ export function getStyleType(type: string): "block" | "inline" {
   for (const [, value] of Object.entries(BlockStyles)) {
     if (value === type) return "block";
   }
-
   for (const [, value] of Object.entries(InlineStyles)) {
     if (value === type) return "inline";
   }