a proof of concept realtime collaborative text editor using atproto as a sync server
jake.tngl.io/y-pds/
Refactor a bit
+18
-10
+6
-2
app.js
+6
-2
app.js
···
122
122
123
123
async componentDidMount() {
124
124
const session = await getSession(this.props.did, { allowStale: false });
125
-
const rpc = client(session);
126
125
127
126
const ydoc = new Y.Doc();
128
127
const yxml = ydoc.getXmlFragment("prosemirror");
129
128
130
-
this.provider = new YPdsProvider(ydoc, this.props.atUri, { rpc, did: this.props.did });
129
+
this.provider = new YPdsProvider({
130
+
ydoc,
131
+
client: client(session),
132
+
atUri: this.props.atUri,
133
+
did: this.props.did,
134
+
});
131
135
132
136
const state = EditorState.create({
133
137
schema,
+12
-8
y-pds.js
+12
-8
y-pds.js
···
2
2
import * as Y from "yjs";
3
3
import { Awareness, encodeAwarenessUpdate, applyAwarenessUpdate } from "y-protocols/awareness";
4
4
5
-
export const DOC_COLLECTION = "jake.tngl.io.ypds.doc";
6
-
export const UPDATE_COLLECTION = "jake.tngl.io.ypds.update";
7
-
export const AWARENESS_COLLECTION = "jake.tngl.io.ypds.awareness";
5
+
export const DOC_COLLECTION = "jake.tngl.ypds.doc";
6
+
export const UPDATE_COLLECTION = "jake.tngl.ypds.update";
7
+
export const AWARENESS_COLLECTION = "jake.tngl.ypds.awareness";
8
8
9
9
const encode = (/** @type {Uint8Array} */ update) => btoa(String.fromCharCode(...update));
10
10
const decode = (/** @type {string} */ b64) => Uint8Array.from(atob(b64), c => c.charCodeAt(0));
···
107
107
#destroyed = false;
108
108
109
109
/**
110
-
* @param {Y.Doc} ydoc
111
-
* @param {string} atUri at://ownerDid/collection/rkey
112
-
* @param {{ rpc: Client, did: string, awareness?: Awareness, jetstream?: string }} options
110
+
* @param {object} options
111
+
* @param {Y.Doc} options.ydoc
112
+
* @param {Client} options.client
113
+
* @param {string} options.atUri
114
+
* @param {string} options.did
115
+
* @param {Awareness} [options.awareness]
116
+
* @param {string} [options.jetstream]
113
117
*/
114
-
constructor(ydoc, atUri, { rpc, did, awareness, jetstream }) {
115
-
this.#clients.set(did, rpc);
118
+
constructor({ ydoc, client, atUri, did, awareness, jetstream }) {
119
+
this.#clients.set(did, client);
116
120
this.#ydoc = ydoc;
117
121
118
122
const [ownerDid, , rkey] = atUri.slice("at://".length).split("/");