Add API for propagating cursor locations (#61)

frontend/obsidian-plugin/src/views/cursors/get-cursors-from-editor.ts

@@ -0,0 +1,17 @@
+import type { Editor } from "obsidian";
+import { lineAndColumnToPosition } from "../../utils/line-and-column-to-position";
+
+export interface Cursor {
+	id: number;
+	start: number;
+	end: number;
+}
+
+export function getCursorsFromEditor(editor: Editor): Cursor[] {
+	const text = editor.getValue();
+	return editor.listSelections().map(({ anchor, head }, i) => ({
+		id: i,
+		start: lineAndColumnToPosition(text, anchor.line, anchor.ch),
+		end: lineAndColumnToPosition(text, head.line, head.ch)
+	}));
+}

frontend/obsidian-plugin/src/views/cursors/local-cursor-update-listener.ts

@@ -0,0 +1,58 @@
+import type { Workspace } from "obsidian";
+import { EventRef, Editor, MarkdownView, MarkdownFileInfo } from "obsidian";
+import type { Logger, SyncClient } from "sync-client";
+import type { Cursor } from "./get-cursors-from-editor";
+import { getCursorsFromEditor } from "./get-cursors-from-editor";
+
+export class LocalCursorUpdateListener {
+	private static readonly UPDATE_INTERVAL_MS = 50;
+	private readonly eventHandle: NodeJS.Timeout;
+	private lastCursorState: Record<string, Cursor[]> = {};
+
+	public constructor(
+		private readonly client: SyncClient,
+		private readonly workspace: Workspace
+	) {
+		this.eventHandle = setInterval(() => {
+			this.updateAllCursors();
+		}, LocalCursorUpdateListener.UPDATE_INTERVAL_MS);
+	}
+
+	public dispose(): void {
+		clearInterval(this.eventHandle);
+	}
+
+	private updateAllCursors(): void {
+		const currentCursors = this.getAllCursors();
+		if (
+			JSON.stringify(this.lastCursorState) ===
+			JSON.stringify(currentCursors)
+		) {
+			return;
+		}
+		this.lastCursorState = currentCursors;
+		this.client
+			.updateLocalCursors(currentCursors)
+			.catch((error: unknown) => {
+				this.client.logger.error(
+					`Failed to update local cursors: ${error}`
+				);
+			});
+	}
+
+	private getAllCursors(): Record<string, Cursor[]> {
+		const cursors: Record<string, Cursor[]> = {};
+		this.workspace
+			.getLeavesOfType("markdown")
+			.map((leaf) => leaf.view)
+			.filter((view) => view instanceof MarkdownView)
+			.forEach((view) => {
+				const { file } = view;
+				if (!file) {
+					return;
+				}
+				cursors[file.path] = getCursorsFromEditor(view.editor);
+			});
+		return cursors;
+	}
+}

frontend/obsidian-plugin/src/views/cursors/remote-cursor-theme.ts

@@ -0,0 +1,63 @@
+import { EditorView } from "@codemirror/view";
+
+const CARET_WIDTH = 2;
+const DOT_RADIUS = 4;
+
+export const remoteCursorsTheme = EditorView.baseTheme({
+	".selection-caret": {
+		position: "relative"
+	},
+
+	".selection-caret > *": {
+		position: "absolute",
+		backgroundColor: "inherit"
+	},
+
+	".selection-caret > .stick": {
+		left: 0,
+		top: 0,
+		transform: "translateX(-50%)",
+		width: `${CARET_WIDTH}px`,
+		height: "100%",
+		display: "block",
+		borderRadius: `${CARET_WIDTH / 2}px`,
+		animation: "blink-stick 1s steps(1) infinite"
+	},
+
+	"@keyframes blink-stick": {
+		"0%, 100%": { opacity: 1 },
+		"50%": { opacity: 0 }
+	},
+
+	".selection-caret > .dot": {
+		borderRadius: "50%",
+		width: `${DOT_RADIUS * 2}px`,
+		height: `${DOT_RADIUS * 2}px`,
+		top: `-${DOT_RADIUS}px`,
+		left: `-${DOT_RADIUS}px`,
+		transition: "transform .3s ease-in-out",
+		transformOrigin: "bottom center",
+		boxSizing: "border-box"
+	},
+
+	".selection-caret:hover > .dot": {
+		transform: "scale(0)"
+	},
+
+	".selection-caret > .info": {
+		top: "-1.3em",
+		left: `-${CARET_WIDTH / 2}px`,
+		fontSize: "0.9em",
+		userSelect: "none",
+		color: "white",
+		padding: "0 2px",
+		transition: "opacity .3s ease-in-out",
+		opacity: 0,
+		whiteSpace: "nowrap",
+		borderRadius: "3px 3px 3px 0"
+	},
+
+	".selection-caret:hover > .info": {
+		opacity: 1
+	}
+});

frontend/obsidian-plugin/src/views/cursors/remote-cursor-widget.ts

@@ -0,0 +1,46 @@
+import { AnnotationType, Annotation, RangeSet, Range } from "@codemirror/state";
+import {
+	ViewUpdate,
+	ViewPlugin,
+	Decoration,
+	WidgetType
+} from "@codemirror/view";
+
+import type { PluginValue, DecorationSet, EditorView } from "@codemirror/view";
+
+export class RemoteCursorWidget extends WidgetType {
+	public constructor(
+		private readonly color: string,
+		private readonly name: string
+	) {
+		super();
+	}
+
+	public toDOM(editor: EditorView): HTMLElement {
+		return editor.contentDOM.createEl(
+			"span",
+			{
+				cls: "selection-caret",
+				attr: {
+					style: `background-color: ${this.color}; border-color: ${this.color}`
+				}
+			},
+			(span) => {
+				span.createEl("div", {
+					cls: "stick"
+				});
+				span.createEl("div", {
+					cls: "dot"
+				});
+				span.createEl("div", {
+					cls: "info",
+					text: this.name
+				});
+			}
+		);
+	}
+
+	public eq(other: RemoteCursorWidget): boolean {
+		return other.color === this.color && other.name === this.name;
+	}
+}

frontend/obsidian-plugin/src/views/cursors/remote-cursors-plugin.ts

@@ -0,0 +1,134 @@
+import type { Range } from "@codemirror/state";
+import { RangeSet, Annotation, AnnotationType } from "@codemirror/state";
+import { ViewPlugin, Decoration, WidgetType } from "@codemirror/view";
+
+import type {
+	PluginValue,
+	DecorationSet,
+	EditorView,
+	ViewUpdate
+} from "@codemirror/view";
+import { RemoteCursorWidget } from "./remote-cursor-widget";
+import type { ClientCursors, CursorSpan } from "sync-client";
+import type { App } from "obsidian";
+import { MarkdownView } from "obsidian";
+
+let cursors: {
+	name: string;
+	path: string;
+	span: CursorSpan;
+}[] = [];
+
+import { StateEffect } from "@codemirror/state";
+import { getRandomColor } from "src/utils/get-random-color";
+
+const forceUpdate = StateEffect.define();
+
+export class RemoteCursorsPluginValue implements PluginValue {
+	public decorations: DecorationSet = RangeSet.of([]);
+
+	public update(update: ViewUpdate): void {
+		const decorations: Range<Decoration>[] = [];
+
+		cursors.forEach(({ name, span: { start, end } }) => {
+			const color = getRandomColor(name);
+			const startLine = update.view.state.doc.lineAt(start);
+			const endLine = update.view.state.doc.lineAt(end);
+
+			const attributes = {
+				style: `background-color: ${color};`
+			};
+
+			if (startLine.number === endLine.number) {
+				// selected content in a single line.
+				decorations.push({
+					from: start,
+					to: end,
+					value: Decoration.mark({
+						attributes
+					})
+				});
+			} else {
+				// selected content in multiple lines
+				// first, render text-selection in the first line
+				decorations.push({
+					from: start,
+					to: startLine.from + startLine.length,
+					value: Decoration.mark({
+						attributes
+					})
+				});
+
+				// render text-selection in the lines between the first and last line
+				for (let i = startLine.number + 1; i < endLine.number; i++) {
+					const currentLine = update.view.state.doc.line(i);
+					decorations.push({
+						from: currentLine.from,
+						to: currentLine.to,
+						value: Decoration.mark({
+							attributes
+						})
+					});
+				}
+
+				// render text-selection in the last line
+				decorations.push({
+					from: endLine.from,
+					to: end,
+					value: Decoration.mark({
+						attributes
+					})
+				});
+			}
+
+			decorations.push({
+				from: end,
+				to: end,
+				value: Decoration.widget({
+					side: end - start > 0 ? -1 : 1, // the local cursor should be rendered outside the remote selection
+					block: false,
+					widget: new RemoteCursorWidget(color, name)
+				})
+			});
+		});
+
+		this.decorations = Decoration.set(decorations, true);
+	}
+}
+
+export const remoteCursorsPlugin = ViewPlugin.fromClass(
+	RemoteCursorsPluginValue,
+	{
+		decorations: (v) => v.decorations
+	}
+);
+
+export function setCursors(clients: ClientCursors[], app: App): void {
+	cursors = clients.flatMap((client) => {
+		const clientCursors = client.cursors;
+		return Object.keys(clientCursors).flatMap((path) => {
+			const spans = clientCursors[path];
+			return spans
+				? spans.map((span) => ({
+						name: client.userName,
+						path,
+						span
+					}))
+				: [];
+		});
+	});
+
+	app.workspace
+		.getLeavesOfType("markdown")
+		.map((leaf) => leaf.view)
+		.filter((view) => view instanceof MarkdownView)
+		.forEach((view) => {
+			// @ts-expect-error, not typed
+			// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+			const editor = view.editor.cm as EditorView;
+
+			editor.dispatch({
+				effects: [forceUpdate.of(null)]
+			});
+		});
+}

frontend/obsidian-plugin/src/views/history/history-view.ts

@@ -18,8 +18,8 @@ export class HistoryView extends ItemView {
 	>();
 
 	public constructor(
-		leaf: WorkspaceLeaf,
-		private readonly client: SyncClient
+		private readonly client: SyncClient,
+		leaf: WorkspaceLeaf
 	) {
 		super(leaf);
 		this.icon = HistoryView.ICON;

frontend/obsidian-plugin/src/views/status-description/status-description.ts

@@ -11,7 +11,7 @@ export class StatusDescription {
 	private lastRemaining: number | undefined;
 	private lastConnectionState: NetworkConnectionStatus | undefined;
 
-	private statusChangeListeners: (() => void)[] = [];
+	private statusChangeListeners: (() => unknown)[] = [];
 
 	public constructor(private readonly syncClient: SyncClient) {
 		void this.updateConnectionState();