yjs · mosquitochang · Jan 29, 2024
diff --git a/README.md b/README.md
@@ -57,9 +57,15 @@ You can use the following CSS classes to style remote cursor selections:
 See [demo/index.html](demo/index.html) for example styles. Additionally, you can enable per-user styling (e.g.: different colors per user). The recommended approach for this is to listen to `awareness.on("update", () => ...));` and inject custom styles for every available clientId. You can use the following classnames for this:
 
 - `yRemoteSelection-${clientId}`
-- `yRemoteSelectionHead-${clientId`
+- `yRemoteSelectionHead-${clientId}`
 
 (where `${clientId}` is the Yjs clientId of the specific user).
+
+For multi-selection styling, use these classnames for the primary and secondary selections:
+
+- `yRemoteSelection-primary`, `yRemoteSelectionHead-primary`
+- `yRemoteSelection-secondary`, `yRemoteSelectionHead-secondary`
+
 ### License
 
 [The MIT License](./LICENSE) © Kevin Jahns
diff --git a/demo/index.html b/demo/index.html
@@ -12,6 +12,9 @@
         .yRemoteSelection {
             background-color: rgb(250, 129, 0, .5)
         }
+        .yRemoteSelection-secondary {
+            background-color: rgb(250, 129, 0, .3)
+        }
         .yRemoteSelectionHead {
             position: absolute;
             border-left: orange solid 2px;
@@ -20,6 +23,11 @@
             height: 100%;
             box-sizing: border-box;
         }
+        .yRemoteSelectionHead-secondary {
+            border-left: rgba(255, 166, 0, 0.7) solid 2px;
+            border-top: rgba(255, 166, 0, 0.7) solid 2px;
+            border-bottom: rgba(255, 166, 0, 0.7) solid 2px;
+        }
         .yRemoteSelectionHead::after {
             position: absolute;
             content: ' ';
@@ -28,6 +36,9 @@
             left: -4px;
             top: -5px;
         }
+        .yRemoteSelectionHead-secondary::after {
+            border: 3px solid rgba(255, 166, 0, 0.7);
+        }
     </style>
 </head>
 <body>

diff --git a/src/y-monaco.js b/src/y-monaco.js
@@ -22,16 +22,16 @@ class RelativeSelection {
  * @param {monaco.editor.ITextModel} monacoModel
  * @param {Y.Text} type
  */
-const createRelativeSelection = (editor, monacoModel, type) => {
-  const sel = editor.getSelection()
-  if (sel !== null) {
+const createRelativeSelections = (editor, monacoModel, type) => {
+  const selections = editor.getSelections()
+  if (!selections || !selections.length) return []
+  return selections.map((sel) => {
     const startPos = sel.getStartPosition()
     const endPos = sel.getEndPosition()
     const start = Y.createRelativePositionFromTypeIndex(type, monacoModel.getOffsetAt(startPos))
     const end = Y.createRelativePositionFromTypeIndex(type, monacoModel.getOffsetAt(endPos))
     return new RelativeSelection(start, end, sel.getDirection())
-  }
-  return null
+  })
 }
 
 /**
@@ -53,6 +53,69 @@ const createMonacoSelectionFromRelativeSelection = (editor, type, relSel, doc) =
   return null
 }
 
+/**
+ * @param {monaco.editor.ITextModel} monacoModel
+ * @param {monaco.Selection} selection
+ * @param {Y.Text} ytext
+ */
+const createSelectionAnchorAndHead = (monacoModel, selection, ytext) => {
+  let anchor = monacoModel.getOffsetAt(selection.getStartPosition())
+  let head = monacoModel.getOffsetAt(selection.getEndPosition())
+  if (selection.getDirection() === monaco.SelectionDirection.RTL) {
+    const tmp = anchor
+    anchor = head
+    head = tmp
+  }
+  return {
+    anchor: Y.createRelativePositionFromTypeIndex(ytext, anchor),
+    head: Y.createRelativePositionFromTypeIndex(ytext, head),
+  }
+}
+
+/**
+ * @param {monaco.editor.ITextModel} monacoModel
+ * @param {number} clientID
+ * @param {Boolean} isSecondarySelection
+ * @param {Y.RelativePosition} anchor
+ * @param {Y.RelativePosition} head
+ * @param {Y.Doc} doc
+ * @param {Y.Text} ytext
+ * @returns {null|monaco.editor.IModelDeltaDecoration}
+ */
+const createRemoteSelectionDecoration = (monacoModel, clientID, isSecondarySelection, anchor, head, doc, ytext) => {
+  const anchorAbs = Y.createAbsolutePositionFromRelativePosition(anchor, doc)
+  const headAbs = Y.createAbsolutePositionFromRelativePosition(head, doc)
+  if (anchorAbs !== null && headAbs !== null && anchorAbs.type === ytext && headAbs.type === ytext) {
+    let start, end, afterContentClassName, beforeContentClassName
+    if (anchorAbs.index < headAbs.index) {
+      start = monacoModel.getPositionAt(anchorAbs.index)
+      end = monacoModel.getPositionAt(headAbs.index)
+      afterContentClassName = `yRemoteSelectionHead yRemoteSelectionHead-${clientID} ${
+        isSecondarySelection ? 'yRemoteSelectionHead-secondary' : 'yRemoteSelectionHead-primary'
+      }`
+      beforeContentClassName = null
+    } else {
+      start = monacoModel.getPositionAt(headAbs.index)
+      end = monacoModel.getPositionAt(anchorAbs.index)
+      afterContentClassName = null
+      beforeContentClassName = `yRemoteSelectionHead yRemoteSelectionHead-${clientID} ${
+        isSecondarySelection ? 'yRemoteSelectionHead-secondary' : 'yRemoteSelectionHead-primary'
+      }`
+    }
+    return {
+      range: new monaco.Range(start.lineNumber, start.column, end.lineNumber, end.column),
+      options: {
+        className: `yRemoteSelection yRemoteSelection-${clientID} ${
+          isSecondarySelection ? 'yRemoteSelection-secondary' : 'yRemoteSelection-primary'
+        }`,
+        afterContentClassName,
+        beforeContentClassName,
+      },
+    }
+  }
+  return null
+}
+
 export class MonacoBinding {
   /**
    * @param {Y.Text} ytext
@@ -67,17 +130,17 @@ export class MonacoBinding {
     this.editors = editors
     this.mux = createMutex()
     /**
-     * @type {Map<monaco.editor.IStandaloneCodeEditor, RelativeSelection>}
+     * @type {Map<monaco.editor.IStandaloneCodeEditor, RelativeSelection[]>}
      */
     this._savedSelections = new Map()
     this._beforeTransaction = () => {
       this.mux(() => {
         this._savedSelections = new Map()
         editors.forEach(editor => {
           if (editor.getModel() === monacoModel) {
-            const rsel = createRelativeSelection(editor, monacoModel, ytext)
-            if (rsel !== null) {
-              this._savedSelections.set(editor, rsel)
+            const relativeSelections = createRelativeSelections(editor, monacoModel, ytext)
+            if (relativeSelections.length) {
+              this._savedSelections.set(editor, relativeSelections)
             }
           }
         })
@@ -96,30 +159,34 @@ export class MonacoBinding {
           const newDecorations = []
           awareness.getStates().forEach((state, clientID) => {
             if (clientID !== this.doc.clientID && state.selection != null && state.selection.anchor != null && state.selection.head != null) {
-              const anchorAbs = Y.createAbsolutePositionFromRelativePosition(state.selection.anchor, this.doc)
-              const headAbs = Y.createAbsolutePositionFromRelativePosition(state.selection.head, this.doc)
-              if (anchorAbs !== null && headAbs !== null && anchorAbs.type === ytext && headAbs.type === ytext) {
-                let start, end, afterContentClassName, beforeContentClassName
-                if (anchorAbs.index < headAbs.index) {
-                  start = monacoModel.getPositionAt(anchorAbs.index)
-                  end = monacoModel.getPositionAt(headAbs.index)
-                  afterContentClassName = 'yRemoteSelectionHead yRemoteSelectionHead-' + clientID
-                  beforeContentClassName = null
-                } else {
-                  start = monacoModel.getPositionAt(headAbs.index)
-                  end = monacoModel.getPositionAt(anchorAbs.index)
-                  afterContentClassName = null
-                  beforeContentClassName = 'yRemoteSelectionHead yRemoteSelectionHead-' + clientID
-                }
-                newDecorations.push({
-                  range: new monaco.Range(start.lineNumber, start.column, end.lineNumber, end.column),
-                  options: {
-                    className: 'yRemoteSelection yRemoteSelection-' + clientID,
-                    afterContentClassName,
-                    beforeContentClassName
-                  }
+              const decoration = createRemoteSelectionDecoration(
+                monacoModel,
+                clientID,
+                false,
+                state.selection.anchor,
+                state.selection.head,
+                this.doc,
+                ytext
+              )
+              if(decoration) newDecorations.push(decoration)
+
+              /**
+               * @type {Array<{anchor: Y.RelativePosition, head: Y.RelativePosition}>}
+               */
+              const secondarySelections = state.secondarySelections
+              secondarySelections &&
+                secondarySelections.forEach((secondarySelection) => {
+                  const decoration = createRemoteSelectionDecoration(
+                    monacoModel,
+                    clientID,
+                    true,
+                    secondarySelection.anchor,
+                    secondarySelection.head,
+                    this.doc,
+                    ytext
+                  )
+                  if(decoration) newDecorations.push(decoration)
                 })
-              }
             }
           })
           this._decorations.set(editor, editor.deltaDecorations(currentDecorations, newDecorations))
@@ -153,11 +220,16 @@ export class MonacoBinding {
             throw error.unexpectedCase()
           }
         })
-        this._savedSelections.forEach((rsel, editor) => {
-          const sel = createMonacoSelectionFromRelativeSelection(editor, ytext, rsel, this.doc)
-          if (sel !== null) {
-            editor.setSelection(sel)
-          }
+        this._savedSelections.forEach((relativeSelections, editor) => {
+          /**
+           * @type {Array<monaco.Selection>}
+           */
+          const selections = []
+          relativeSelections.forEach((relativeSelection) => {
+            const selection = createMonacoSelectionFromRelativeSelection(editor, ytext, relativeSelection, this.doc)
+            if(selection) selections.push(selection)
+          })
+          editor.setSelections(selections)
         })
       })
       this._rerenderDecorations()
@@ -185,23 +257,24 @@ export class MonacoBinding {
     })
     if (awareness) {
       editors.forEach(editor => {
-        editor.onDidChangeCursorSelection(() => {
+        editor.onDidChangeCursorSelection((e) => {
           if (editor.getModel() === monacoModel) {
-            const sel = editor.getSelection()
-            if (sel === null) {
+            if (e.selection === null) {
+              awareness.setLocalStateField('selection', null)
               return
             }
-            let anchor = monacoModel.getOffsetAt(sel.getStartPosition())
-            let head = monacoModel.getOffsetAt(sel.getEndPosition())
-            if (sel.getDirection() === monaco.SelectionDirection.RTL) {
-              const tmp = anchor
-              anchor = head
-              head = tmp
+            awareness.setLocalStateField('selection', createSelectionAnchorAndHead(monacoModel, e.selection, ytext))
+
+            if (e.secondarySelections && e.secondarySelections.length) {
+              awareness.setLocalStateField(
+                'secondarySelections',
+                e.secondarySelections.map((secondarySelection) =>
+                  createSelectionAnchorAndHead(monacoModel, secondarySelection, ytext)
+                )
+              )
+            } else {
+              awareness.setLocalStateField('secondarySelections', [])
             }
-            awareness.setLocalStateField('selection', {
-              anchor: Y.createRelativePositionFromTypeIndex(ytext, anchor),
-              head: Y.createRelativePositionFromTypeIndex(ytext, head)
-            })
           }
         })
         awareness.on('change', this._rerenderDecorations)