1import yorkie, { DocEventType, Indexable, OperationInfo } from '@yorkie-js/sdk';
2import ColorHash from 'color-hash';
3import Quill, { Delta, type Op } from 'quill';
4import QuillCursors from 'quill-cursors';
5import 'quill/dist/quill.snow.css';
6import { network } from './network';
7import './style.css';
8import { YorkieDoc, YorkiePresence } from './type';
9import { displayLog, displayPeers } from './utils';
10
11type TextValueType = {
12  attributes?: Indexable;
13  content?: string;
14};
15
16const peersElem = document.getElementById('peers')!;
17const documentElem = document.getElementById('document')!;
18const documentTextElem = document.getElementById('document-text')!;
19const networkStatusElem = document.getElementById('network-status')!;
20const colorHash = new ColorHash();
21const documentKey = `vanilla-quill-${new Date()
22  .toISOString()
23  .substring(0, 10)
24  .replace(/-/g, '')}`;
25
26function toDeltaOperation<T extends TextValueType>(textValue: T): Op {
27  const { embed, ...restAttributes } = textValue.attributes ?? {};
28  if (embed) {
29    return { insert: JSON.parse(embed.toString()), attributes: restAttributes };
30  }
31
32  return {
33    insert: textValue.content || '',
34    attributes: textValue.attributes,
35  };
36}
37
38async function main() {
39  // 01-1. create client with RPCAddr then activate it.
40  const client = new yorkie.Client({
41    rpcAddr: import.meta.env.VITE_YORKIE_API_ADDR,
42    apiKey: import.meta.env.VITE_YORKIE_API_KEY,
43  });
44  await client.activate();
45
46  // 02-1. create a document then attach it into the client.
47  const doc = new yorkie.Document<YorkieDoc, YorkiePresence>(documentKey, {
48    enableDevtools: true,
49  });
50  doc.subscribe('connection', (event) => {
51    network.statusListener(networkStatusElem)(event);
52  });
53  doc.subscribe('presence', (event) => {
54    if (event.type !== DocEventType.PresenceChanged) {
55      displayPeers(peersElem, doc.getPresences(), client.getID()!);
56    }
57  });
58
59  await client.attach(doc, {
60    initialPresence: {
61      username: client.getID()!.slice(-2),
62      color: colorHash.hex(client.getID()!.slice(-2)),
63      selection: undefined,
64    },
65  });
66
67  doc.update((root) => {
68    if (!root.content) {
69      root.content = new yorkie.Text();
70      root.content.edit(0, 0, '\n');
71    }
72  }, 'create content if not exists');
73
74  // 02-2. subscribe document event.
75  doc.subscribe((event) => {
76    if (event.type === 'snapshot') {
77      // The text is replaced to snapshot and must be re-synced.
78      syncText();
79    }
80    displayLog(documentElem, documentTextElem, doc);
81  });
82
83  doc.subscribe('$.content', (event) => {
84    if (event.type === 'remote-change') {
85      handleOperations(event.value.operations);
86    }
87    updateAllCursors();
88  });
89  doc.subscribe('others', (event) => {
90    if (event.type === DocEventType.Unwatched) {
91      cursors.removeCursor(event.value.clientID);
92    } else if (event.type === DocEventType.PresenceChanged) {
93      updateCursor(event.value);
94    }
95  });
96
97  function updateCursor(user: { clientID: string; presence: YorkiePresence }) {
98    const { clientID, presence } = user;
99    if (clientID === client.getID()) return;
100    // TODO(chacha912): After resolving the presence initialization issue(#608),
101    // remove the following check.
102    if (!presence) return;
103
104    const { username, color, selection } = presence;
105    if (!selection) return;
106    const range = doc.getRoot().content.posRangeToIndexRange(selection);
107    cursors.createCursor(clientID, username, color);
108    cursors.moveCursor(clientID, {
109      index: range[0],
110      length: range[1] - range[0],
111    });
112  }
113
114  function updateAllCursors() {
115    for (const user of doc.getPresences()) {
116      updateCursor(user);
117    }
118  }
119
120  await client.sync();
121
122  // 03. create an instance of Quill
123  Quill.register('modules/cursors', QuillCursors);
124  const quill = new Quill('#editor', {
125    modules: {
126      toolbar: [
127        ['bold', 'italic', 'underline', 'strike'],
128        ['blockquote', 'code-block'],
129        [{ header: 1 }, { header: 2 }],
130        [{ list: 'ordered' }, { list: 'bullet' }],
131        [{ script: 'sub' }, { script: 'super' }],
132        [{ indent: '-1' }, { indent: '+1' }],
133        [{ direction: 'rtl' }],
134        [{ size: ['small', false, 'large', 'huge'] }],
135        [{ header: [1, 2, 3, 4, 5, 6, false] }],
136        [{ color: [] }, { background: [] }],
137        [{ font: [] }],
138        [{ align: [] }],
139        ['image', 'video'],
140        ['clean'],
141      ],
142      cursors: true,
143    },
144    theme: 'snow',
145  });
146  const cursors = quill.getModule('cursors') as QuillCursors;
147
148  // 04. bind the document with the Quill.
149  // 04-1. Quill to Document.
150  quill
151    .on('text-change', (delta, _, source) => {
152      if (source === 'api' || !delta.ops) {
153        return;
154      }
155
156      let from = 0,
157        to = 0;
158      console.log(`%c quill: ${JSON.stringify(delta.ops)}`, 'color: green');
159      for (const op of delta.ops) {
160        if (op.attributes !== undefined || op.insert !== undefined) {
161          if (op.retain !== undefined && typeof op.retain === 'number') {
162            to = from + op.retain;
163          }
164          console.log(
165            `%c local: ${from}-${to}: ${op.insert} ${
166              op.attributes ? JSON.stringify(op.attributes) : '{}'
167            }`,
168            'color: green',
169          );
170
171          doc.update((root, presence) => {
172            let range;
173            if (op.attributes !== undefined && op.insert === undefined) {
174              root.content.setStyle(from, to, op.attributes as Indexable);
175            } else if (op.insert !== undefined) {
176              if (to < from) {
177                to = from;
178              }
179
180              if (typeof op.insert === 'object') {
181                range = root.content.edit(from, to, ' ', {
182                  embed: JSON.stringify(op.insert),
183                  ...op.attributes,
184                });
185              } else {
186                range = root.content.edit(
187                  from,
188                  to,
189                  op.insert,
190                  op.attributes as Indexable,
191                );
192              }
193              from =
194                to + (typeof op.insert === 'string' ? op.insert.length : 1);
195            }
196
197            if (range) {
198              presence.set({
199                selection: root.content.indexRangeToPosRange(range),
200              });
201            }
202          }, `update style by ${client.getID()}`);
203        } else if (op.delete !== undefined) {
204          to = from + op.delete;
205          console.log(`%c local: ${from}-${to}: ''`, 'color: green');
206
207          doc.update((root, presence) => {
208            const range = root.content.edit(from, to, '');
209            if (range) {
210              presence.set({
211                selection: root.content.indexRangeToPosRange(range),
212              });
213            }
214          }, `update content by ${client.getID()}`);
215        } else if (op.retain !== undefined && typeof op.retain === 'number') {
216          from = to + op.retain;
217          to = from;
218        }
219      }
220    })
221    .on('selection-change', (range, _, source) => {
222      if (!range) {
223        return;
224      }
225
226      // NOTE(chacha912): If the selection in the Quill editor does not match the range computed by yorkie,
227      // additional updates are necessary. This condition addresses situations where Quill's selection behaves
228      // differently, such as when inserting text before a range selection made by another user, causing
229      // the second character onwards to be included in the selection.
230      if (source === 'api') {
231        const { selection } = doc.getMyPresence();
232        if (selection) {
233          const [from, to] = doc
234            .getRoot()
235            .content.posRangeToIndexRange(selection);
236          const { index, length } = range;
237          if (from === index && to === index + length) {
238            return;
239          }
240        }
241      }
242
243      doc.update((root, presence) => {
244        presence.set({
245          selection: root.content.indexRangeToPosRange([
246            range.index,
247            range.index + range.length,
248          ]),
249        });
250      }, `update selection by ${client.getID()}`);
251    });
252
253  // 04-2. document to Quill(remote).
254  function handleOperations(ops: Array<OperationInfo>) {
255    const deltaOperations = [];
256    let prevTo = 0;
257    for (const op of ops) {
258      if (op.type === 'edit') {
259        const from = op.from;
260        const to = op.to;
261        const retainFrom = from - prevTo;
262        const retainTo = to - from;
263
264        const { insert, attributes } = toDeltaOperation(op.value!);
265        console.log(`%c remote: ${from}-${to}: ${insert}`, 'color: skyblue');
266
267        if (retainFrom) {
268          deltaOperations.push({ retain: retainFrom });
269        }
270        if (retainTo) {
271          deltaOperations.push({ delete: retainTo });
272        }
273        if (insert) {
274          const op: Op = { insert };
275          if (attributes) {
276            op.attributes = attributes;
277          }
278          deltaOperations.push(op);
279        }
280        prevTo = to;
281      } else if (op.type === 'style') {
282        const from = op.from;
283        const to = op.to;
284        const retainFrom = from - prevTo;
285        const retainTo = to - from;
286        const { attributes } = toDeltaOperation(op.value!);
287        console.log(
288          `%c remote: ${from}-${to}: ${JSON.stringify(attributes)}`,
289          'color: skyblue',
290        );
291
292        if (retainFrom) {
293          deltaOperations.push({ retain: retainFrom });
294        }
295        if (attributes) {
296          const op: Op = { attributes };
297          if (retainTo) {
298            op.retain = retainTo;
299          }
300
301          deltaOperations.push(op);
302        }
303        prevTo = to;
304      }
305    }
306
307    if (deltaOperations.length) {
308      console.log(
309        `%c to quill: ${JSON.stringify(deltaOperations)}`,
310        'color: green',
311      );
312      const delta = new Delta(deltaOperations);
313      quill.updateContents(delta, 'api');
314    }
315  }
316
317  // 05. synchronize text of document and Quill.
318  function syncText() {
319    const text = doc.getRoot().content;
320
321    const delta = new Delta(
322      text.values().map((value) => toDeltaOperation(value)),
323    );
324    quill.setContents(delta, 'api');
325  }
326
327  syncText();
328  updateAllCursors();
329  displayLog(documentElem, documentTextElem, doc);
330}
331
332main();