SirBlob/typst-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Add realtime Yjs collaboration for cloud-linked files

Browse Source 
Claude-Session: https://claude.ai/code/session_01PoLmSR1pFVyHf8i5b1rNWk
This commit is contained in:
SirBlob
2026-07-21 15:55:46 -04:00
parent 566bf1a6cb
commit a16edeb876
9 changed files with 290 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bun.lock
+18
View File
@@ -11,6 +11,7 @@
"@codemirror/legacy-modes": "^6.5.3",
"@codemirror/lint": "^6.9.7",
"@codemirror/lsp-client": "^6.2.5",
"@codemirror/merge": "^6.12.2",
"@codemirror/state": "^6.7.1",
"@codemirror/view": "^6.43.6",
"@iconify/svelte": "^5.2.2",
@@ -21,6 +22,9 @@
"@tauri-apps/plugin-opener": "^2.5.4",
"codemirror": "^6.0.2",
"codemirror-lang-typst": "^0.4.0",
"y-codemirror.next": "^0.3.5",
"y-websocket": "^3.0.0",
"yjs": "^13.6.31",
},
"devDependencies": {
"@sveltejs/adapter-static": "^3.0.10",
@@ -51,6 +55,8 @@
"@codemirror/lsp-client": ["@codemirror/[email protected]", "", { "dependencies": { "@codemirror/autocomplete": "^6.20.0", "@codemirror/language": "^6.11.0", "@codemirror/lint": "^6.8.5", "@codemirror/state": "^6.5.2", "@codemirror/view": "^6.37.0", "@lezer/highlight": "^1.2.1", "marked": "^15.0.12", "vscode-languageserver-protocol": "^3.17.5" } }, "sha512-1EqhGRmCZOV7Me+rRuwwkTuvkNoD4Nz6UcE1yx5gdwTVTLD4D9xIy48MJc0LeBQGFLn/HNRW/pHmet4EAEkJFQ=="],
"@codemirror/merge": ["@codemirror/[email protected]", "", { "dependencies": { "@codemirror/language": "^6.0.0", "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.17.0", "@lezer/highlight": "^1.0.0", "style-mod": "^4.1.0" } }, "sha512-V8JvyAPjHbPupqP7BeMcsdsYCbyPij74jxIbaIJDORI+VZzW44zFmon8bF+oxGWvOKhcRmkiUMXd8MxHr3YA2w=="],
"@codemirror/search": ["@codemirror/[email protected]", "", { "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.37.0", "crelt": "^1.0.5" } }, "sha512-uMe5UO6PamJtSHrXhhHOzSX3ReWtiJrva6GnPMwSOrZtiExb5X5eExhr2OUZQVvdxPsKpY3Ro2mFbQadpPWmHA=="],
"@codemirror/state": ["@codemirror/[email protected]", "", { "dependencies": { "@marijn/find-cluster-break": "^1.0.0" } }, "sha512-9QzNDgE4EYDnAHfrTlR2lwiPciiOymLtwKK+8yHQzCc7GXhAP9xdEbEJFy2IWB1j9UGUl9BsgMmTo/ImA02T7A=="],
@@ -341,10 +347,14 @@
"is-reference": ["[email protected]", "", { "dependencies": { "@types/estree": "^1.0.6" } }, "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw=="],
"isomorphic.js": ["[email protected]", "", {}, "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw=="],
"jiti": ["[email protected]", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="],
"kleur": ["[email protected]", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
"lib0": ["[email protected]", "", { "dependencies": { "isomorphic.js": "^0.2.4" }, "bin": { "0serve": "bin/0serve.js", "0gentesthtml": "bin/gentesthtml.js", "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js" } }, "sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw=="],
"lightningcss": ["[email protected]", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
"lightningcss-android-arm64": ["[email protected]", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
@@ -435,6 +445,14 @@
"w3c-keyname": ["[email protected]", "", {}, "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="],
"y-codemirror.next": ["[email protected]", "", { "dependencies": { "lib0": "^0.2.42" }, "peerDependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", "yjs": "^13.5.6" } }, "sha512-VluNu3e5HfEXybnypnsGwKAj+fKLd4iAnR7JuX1Sfyydmn1jCBS5wwEL/uS04Ch2ib0DnMAOF6ZRR/8kK3wyGw=="],
"y-protocols": ["[email protected]", "", { "dependencies": { "lib0": "^0.2.85" }, "peerDependencies": { "yjs": "^13.0.0" } }, "sha512-YSVsLoXxO67J6eE/nV4AtFtT3QEotZf5sK5BHxFBXso7VDUT3Tx07IfA6hsu5Q5OmBdMkQVmFZ9QOA7fikWvnw=="],
"y-websocket": ["[email protected]", "", { "dependencies": { "lib0": "^0.2.102", "y-protocols": "^1.0.5" }, "peerDependencies": { "yjs": "^13.5.6" } }, "sha512-mUHy7AzkOZ834T/7piqtlA8Yk6AchqKqcrCXjKW8J1w2lPtRDjz8W5/CvXz9higKAHgKRKqpI3T33YkRFLkPtg=="],
"yjs": ["[email protected]", "", { "dependencies": { "lib0": "^0.2.99" } }, "sha512-Eq+5BRfbeGyqGVrTJL3bEcr8gKkxPuyuoHmAwpk52fDb8kOVMrfVSTRPd6yiGgX5Fskb96qCRjzjbRjrL4YEnw=="],
"zimmerframe": ["[email protected]", "", {}, "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ=="],
"@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/[email protected]", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" }, "bundled": true }, "sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA=="],
package.json
+5 -1
View File
@@ -20,6 +20,7 @@
"@codemirror/legacy-modes": "^6.5.3",
"@codemirror/lint": "^6.9.7",
"@codemirror/lsp-client": "^6.2.5",
"@codemirror/merge": "^6.12.2",
"@codemirror/state": "^6.7.1",
"@codemirror/view": "^6.43.6",
"@iconify/svelte": "^5.2.2",
@@ -29,7 +30,10 @@
"@tauri-apps/plugin-dialog": "^2.7.2",
"@tauri-apps/plugin-opener": "^2.5.4",
"codemirror": "^6.0.2",
"codemirror-lang-typst": "^0.4.0"
"codemirror-lang-typst": "^0.4.0",
"y-codemirror.next": "^0.3.5",
"y-websocket": "^3.0.0",
"yjs": "^13.6.31"
},
"devDependencies": {
"@sveltejs/adapter-static": "^3.0.10",
src-tauri/src/lib.rs
+27
View File
@@ -1062,6 +1062,32 @@ fn cloud_sync_document(
sync::sync_document(&server_url, &token, &app, &store, &path)
}
#[tauri::command]
fn cloud_room_id(
app: AppHandle,
store: State<'_, Store>,
path: String,
file: String,
) -> Result<Option<String>, String> {
if let Some(link) = store.document_link(&path)? {
return Ok(Some(link.document_id));
}
let meta = store.meta(&path)?;
let Some(cloud_project_id) = meta.cloud_project_id else {
return Ok(None);
};
let (server_url, token) = cloud_credentials(&app, &store)?;
let manifest = sync::get_manifest(&server_url, &token, &cloud_project_id)?;
Ok(manifest
.files
.into_iter()
.find(|entry| entry.path == file)
.map(|entry| format!("project:{}:{}", cloud_project_id, entry.id)))
}
#[tauri::command]
fn cloud_resolve_document(
app: AppHandle,
@@ -1425,6 +1451,7 @@ pub fn run() {
cloud_download_document,
cloud_delete_document,
cloud_sync_document,
cloud_room_id,
cloud_resolve_document,
cloud_document_link,
cloud_linked_documents,
src-tauri/src/sync.rs
+1
View File
@@ -241,6 +241,7 @@ pub fn move_cloud_project(
#[derive(Deserialize)]
pub struct ManifestEntry {
pub id: String,
pub path: String,
pub hash: String,
}
src/lib/components/ConflictModal.svelte
+46
View File
@@ -1,5 +1,9 @@
<script lang="ts">
import { onDestroy } from "svelte";
import Icon from "@iconify/svelte";
import { EditorView } from "@codemirror/view";
import { EditorState } from "@codemirror/state";
import { MergeView } from "@codemirror/merge";
import Modal from "./Modal.svelte";
import type { Conflict, Resolution } from "$lib/ts/api";
@@ -25,6 +29,37 @@
const current = $derived(conflicts[index]);
let diffHost: HTMLDivElement | undefined = $state();
let mergeView: MergeView | null = null;
function readOnlyState(doc: string) {
return EditorState.create({
doc,
extensions: [EditorView.editable.of(false), EditorView.lineWrapping],
});
}
$effect(() => {
const conflict = current;
mergeView?.destroy();
mergeView = null;
if (!diffHost || !conflict || conflict.binary) return;
mergeView = new MergeView({
a: readOnlyState(conflict.local_text),
b: readOnlyState(conflict.remote_text),
parent: diffHost,
gutter: true,
highlightChanges: true,
collapseUnchanged: {},
});
});
onDestroy(() => {
mergeView?.destroy();
});
function choose(option: "merged" | "local" | "remote") {
mode[index] = option;
choices[index] =
@@ -97,6 +132,17 @@
</p>
</div>
{:else}
<div class="flex flex-col gap-1">
<div class="flex justify-between text-[10px] text-[var(--color-ink-muted)]">
<span>This device</span>
<span>Cloud</span>
</div>
<div
class="scroll-thin h-64 w-full overflow-auto rounded-md border border-[var(--color-line)] text-xs"
bind:this={diffHost}
></div>
</div>
<div class="flex items-center gap-1.5">
{#each [["merged", "Merged"], ["local", "This device"], ["remote", "Cloud"]] as [option, label]}
<button
src/lib/components/Editor.svelte
+33 -1
View File
@@ -28,6 +28,9 @@
} from "@codemirror/autocomplete";
import { lintGutter, setDiagnostics } from "@codemirror/lint";
import { LSPClient, languageServerExtensions } from "@codemirror/lsp-client";
import { yCollab } from "y-codemirror.next";
import type { Awareness } from "y-protocols/awareness";
import type * as Y from "yjs";
import { typstCompletions } from "$lib/ts/completions";
import { editorTheme } from "$lib/ts/editor-theme";
@@ -41,6 +44,7 @@
targetPath: string;
enableLsp?: boolean;
diagnostics?: Diagnostic[];
collab?: { text: Y.Text; awareness: Awareness } | null;
onchange: (value: string) => void;
onsave: () => void;
onlspstatus?: (status: "off" | "starting" | "on" | "unavailable") => void;
@@ -53,6 +57,7 @@
targetPath,
enableLsp = true,
diagnostics = [],
collab = null,
onchange,
onsave,
onlspstatus,
@@ -65,6 +70,7 @@
const languageSlot = new Compartment();
const lspSlot = new Compartment();
const themeSlot = new Compartment();
const collabSlot = new Compartment();
const bridge = new LspBridge();
let client: LSPClient | null = null;
@@ -158,6 +164,7 @@
languageSlot.of(isToml ? StreamLanguage.define(toml) : []),
lspSlot.of([]),
themeSlot.of(editorTheme(app.theme === "dark")),
collabSlot.of([]),
...(isToml
? []
: [autocompletion({ override: [typstCompletions] })]),
@@ -209,9 +216,34 @@
});
}
let boundCollab: { text: Y.Text; awareness: Awareness } | null = null;
$effect(() => {
const next = collab;
if (next === boundCollab) return;
laterDispatch((current) => {
if (next) {
current.dispatch({
changes: {
from: 0,
to: current.state.doc.length,
insert: next.text.toString(),
},
effects: collabSlot.reconfigure([
yCollab(next.text, next.awareness),
]),
});
} else {
current.dispatch({ effects: collabSlot.reconfigure([]) });
}
boundCollab = next;
});
});
$effect(() => {
const next = content;
if (!view) return;
if (!view || collab) return;
if (view.state.doc.toString() === next) return;
laterDispatch((current) => {
src/lib/ts/api.ts
+3
View File
@@ -404,6 +404,9 @@ export const cloudNewDocument = (title: string, folderId?: string | null) =>
export const cloudSyncDocument = (path: string) =>
invoke<SyncReport>("cloud_sync_document", { path });
export const cloudRoomId = (path: string, file: string) =>
invoke<string | null>("cloud_room_id", { path, file });
export const cloudResolveDocument = (
path: string,
content: string,
src/lib/ts/state.svelte.ts
+119 -1
View File
@@ -1,5 +1,10 @@
import { listen } from "@tauri-apps/api/event";
import * as api from "./api";
import {
openCollabSession,
closeCollabSession,
type CollabSession,
} from "./yjs-client";
import type {
Account,
BrowseEntry,
@@ -67,6 +72,10 @@ interface AppState {
download: DownloadProgress | null;
syncing: boolean;
conflicts: Conflict[];
collab: CollabSession | null;
collabIntent: boolean;
collabStatus: "connecting" | "connected" | "offline" | null;
collabConflict: Conflict | null;
status: string;
error: string;
theme: "light" | "dark";
@@ -111,6 +120,10 @@ export const app = $state<AppState>({
download: null,
syncing: false,
conflicts: [],
collab: null,
collabIntent: false,
collabStatus: null,
collabConflict: null,
status: "",
error: "",
theme: "light",
@@ -382,6 +395,7 @@ function handleDeviceEvent(event: DeviceEvent) {
event.document_id === linkedDocument);
if (matchesOpenTarget) {
if (app.collabIntent) return;
autoSync();
} else if (app.scope === "cloud") {
refreshCloud();
@@ -587,10 +601,19 @@ export async function openTarget(path: string) {
}
}
function stopCollab() {
closeCollabSession(app.collab);
app.collab = null;
app.collabIntent = false;
app.collabStatus = null;
app.collabConflict = null;
}
export async function closeTarget() {
cancelScheduledCompile();
cancelAutosave();
if (app.dirty) await saveActiveFile();
stopCollab();
app.view = "files";
app.target = null;
app.activePath = null;
@@ -617,6 +640,7 @@ export async function openFile(file: string) {
cancelAutosave();
if (app.dirty && app.activePath) await saveActiveFile();
stopCollab();
try {
const payload = await api.readTargetFile(app.target.path, file);
@@ -624,11 +648,100 @@ export async function openFile(file: string) {
app.editorContent = payload.is_text ? payload.content : "";
app.dirty = false;
if (payload.is_text) await compile();
if (payload.is_text) await tryOpenCollab(file, app.editorContent);
} catch (error) {
setError(error);
}
}
function bindCollabSession(session: CollabSession) {
app.collab = session;
app.collabStatus = session.provider.wsconnected ? "connected" : "connecting";
session.provider.on("status", (event: { status: string }) => {
app.collabStatus =
event.status === "connected"
? "connected"
: event.status === "connecting"
? "connecting"
: "offline";
});
}
async function tryOpenCollab(file: string, diskContent: string) {
if (!app.target || !app.settings?.device_token) return;
let roomId: string | null;
try {
roomId = await api.cloudRoomId(app.target.path, file);
} catch {
roomId = null;
}
if (!roomId) return;
app.collabIntent = true;
app.collabStatus = "connecting";
const session = openCollabSession(
app.settings.server_url,
app.settings.device_token,
roomId,
);
const synced = await new Promise<boolean>((resolve) => {
session.provider.once("synced", (isSynced: boolean) => resolve(isSynced));
}).catch(() => false);
if (app.activePath !== file) {
closeCollabSession(session);
return;
}
if (!synced) {
bindCollabSession(session);
return;
}
const remoteText = session.text.toString();
if (remoteText !== diskContent) {
app.collabConflict = {
path: file,
local_text: diskContent,
remote_text: remoteText,
merged_text: remoteText,
server_hash: "",
auto_merged: false,
binary: false,
};
pendingCollabSession = session;
return;
}
bindCollabSession(session);
}
let pendingCollabSession: CollabSession | null = null;
export function resolveCollabConflict(content: string) {
const session = pendingCollabSession;
pendingCollabSession = null;
app.collabConflict = null;
if (!session) return;
const ytext = session.text;
ytext.doc?.transact(() => {
ytext.delete(0, ytext.length);
ytext.insert(0, content);
});
bindCollabSession(session);
}
export function cancelCollabConflict() {
closeCollabSession(pendingCollabSession);
pendingCollabSession = null;
app.collabConflict = null;
}
export async function saveActiveFile() {
if (!app.target || !app.activePath) return;
try {
@@ -711,9 +824,14 @@ export function cancelScheduledCompile() {
let autosaveTimer: ReturnType<typeof setTimeout> | null = null;
const COLLAB_AUTOSAVE_SECONDS = 5;
export function scheduleAutosave() {
const seconds = app.settings?.autosave_seconds ?? 0;
if (autosaveTimer) clearTimeout(autosaveTimer);
const seconds = app.collabIntent
? Math.min(app.settings?.autosave_seconds || COLLAB_AUTOSAVE_SECONDS, COLLAB_AUTOSAVE_SECONDS)
: (app.settings?.autosave_seconds ?? 0);
if (seconds <= 0) return;
autosaveTimer = setTimeout(() => {
src/lib/ts/yjs-client.ts
+38
View File
@@ -0,0 +1,38 @@
import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";
export interface CollabSession {
doc: Y.Doc;
text: Y.Text;
provider: WebsocketProvider;
}
function wsUrl(serverUrl: string) {
return serverUrl
.replace(/^https:/, "wss:")
.replace(/^http:/, "ws:")
.replace(/\/$/, "");
}
export function openCollabSession(
serverUrl: string,
deviceToken: string,
roomId: string,
): CollabSession {
const doc = new Y.Doc();
const text = doc.getText("typst");
const provider = new WebsocketProvider(`${wsUrl(serverUrl)}/yjs`, roomId, doc, {
params: { token: deviceToken },
disableBc: true,
});
return { doc, text, provider };
}
export function closeCollabSession(session: CollabSession | null) {
if (!session) return;
session.provider.disconnect();
session.provider.destroy();
session.doc.destroy();
}