From single player to multiplayer - Building realtime collaborative text editing experiences with Dart

Superlist uses SuperEditor, a modular rich text editor for Flutter, to enable our users to do powerful task management in the context of rich text documents.

SuperEditor has everything we need to create that experience. But as we’re in a connected world, editing shouldn’t be done in isolation.

So how do we turn an editing toolkit like SuperEditor, that has no “multi-player” capabilities into a full collaborative experience? SuperEditor doesn’t have an opinion on how documents should be serialized, and as such, it doesn't have built-in support for collaborative editing or conflict resolution.

But collaboration is a must have, not nice to have. What gives? In this talk, we’re going over how we made SuperEditor work for real time collaboration, while still keeping SuperEditor unopinionated.

Transcript

1. From single player to multiplayer Building realtime collaborative text editing experiences with Flutter
2. From single player to multiplayer Building realtime collaborative text editing experiences with Dart
3. Who are you? • iiro with two i’s • Started a blog about Flutter in 2017 called flutter.rocks ◦ Now called just “iiro.dev” • Fluttering professionally for more than 5 years: ◦ 2017-2018: Codemate/Rebel App Studio ◦ 2018-2021: Frontend Lead at Reflectly ◦ Now Principal Engineer at Superlist
4. Superlist • “The next generation productivity tool for individuals and teams.” • superlist.com/open-source ◦ SuperEditor ◦ SuperNativeExtensions - full-featured clipboard, drag and drop ◦ SuperAudio • superlist.com/careers ◦ We’re looking for Flutter developers!
5. This is not a tutorial, this is a companion talk
6. Let me “Cher” my screen
7. Let me “Cher” my screen
8. Did the demo work? Video on Desktop, fly restart on Terminal, wifi?
9. That was not Superlist
10. How we ended up here
11. Project “document mode”
14. How do we do this? Just go to pub.dev and import `package:document_mode`?
15. SuperEditor
17. We had a working POC in 4 days.
19. Documents had to be shareable.
20. “Poor mans” document collaboration • Firebase Cloud Messaging to broadcast changes to everyone • Send the whole document each time when even one character changes ◦ Debounced, of course • “Last write wins”
21. “Last write wins is good enough for now.”
22. But it wasn’t.
23. Client B stops typing. Debouncing kicks in. Whatever Client A was previously doing is replaced..
24. Problems with “last write wins” • Pretty okay when people don’t type at the same time. Completely unusable when two or more people type at the same time • Problems: ◦ My cursor jumping around when other users edit the document ◦ I lose a lot of progress quite often due to other users overriding my changes ◦ Oftentimes, User A and User B ended in different states • It’s not nice to send the entire document instead of sending just the changes • There’s got to be a better way?
25. The vision also evolved a bit
27. Being able to collaborate is expected today. It’s not “nice to have”, it’s a must have.
28. SuperEditor does not take a stance on collaboration.
29. Baking collaboration functionality into SuperEditor would be too disruptive.
30. It would also make it opinionated.
31. But we needed collaboration now.
33. Here’s how it went down.
34. Operational Transformation vs. Conflict-Free Replicated Datatypes
35. OT vs. CRDTs
36. We went with Operational Transformation.
37. How to implement it?
38. Answer: research papers.
40. After reading that, all became quite clear.
41. Just kidding.
44. Playing with a full end-to-end example helps. A lot.
45. Parts of successful OT implementation
46. Parts of successful OT implementation (for us)
47. Part 1: Quill Delta format This part you can switch if you like, but it makes things really, really, really so much simpler.
49. import 'package:quill_delta/quill_delta.dart' ; final justASample = Delta() ..retain(5) ..insert('hello') ..delete(5); Is the same as: final justASample = [ {'retain': 5}, {'insert': 'hello'}, {'delete': 5}, ]; A Quill Delta is just a list of Map structures expressible as JSON
50. Document Deltas
51. Document Deltas only contain “insert” operations. Nothing else.
52. final document = Delta() ..insert('Hello world!\n') ..insert('This is a paragraph.\n') ..insert('This is also a paragraph!\n') ..insert({'image': 'brent_rambo.gif'}); Babby’s first Document Delta
53. final document = Delta() // Paragraph with bold and italic text attributes. ..insert('It was a ') ..insert('bold', {'bold': true}) ..insert(' and ') ..insert('italic', {'italic': true}) ..insert(' night!\n') // An image embed with an alt text attribute. ..insert( {'image': 'brent_rambo.gif' }, { 'alt_text': 'Brent Rambo approving of something he sees on the computer screen.' }, ); Quill Delta format - Document Deltas - Attributes
54. final document = Delta() ..insert('It was a ') ..insert( 'bold and italic', { 'bold': true, 'italic': true, } ) ..insert(' night!\n'); You can have multiple attributes on the same piece of text
55. “No right way to do attributes, not even bold or italics”
56. final document = Delta() ..insert('It was a very ') ..insert('colorful', {'with_unicorn_pooping_rainbows': true}) ..insert(' night!\n'); Quill Delta format - Document Deltas - Attributes
57. How do we change a document?
58. Change Deltas
59. Documents are Deltas. Changes are Deltas.
60. Change Deltas can contain “insert”, “retain”, and “delete” operations. Documents only contain inserts.
61. final change = Delta() // Skip the first 6 characters in the document. ..retain(6) // Insert the text "people" at current position. ..insert('people') // At the current position, which is after // the word "people", delete the next 5 // characters. ..delete(5); Quill Delta format - Change Deltas
62. final change = Delta() // Skip the first 6 characters in the document. ..retain(6) // Insert the text "people" at current position. ..insert('people') // At the current position, which is after // the word "people", delete the next 5 // characters. ..delete(5); Quill Delta format - Change Deltas
63. final change = Delta() // Skip the first 6 characters in the document. ..retain(6) // Insert the text "people" at current position. ..insert('people') // At the current position, which is after // the word "people", delete the next 5 // characters. ..delete(5); Quill Delta format - Change Deltas
64. final change = Delta() // Skip the first 6 characters in the document. ..retain(6) // Insert the text "people" at current position. ..insert('people') // At the current position, which is after // the word "people", delete the next 5 // characters. ..delete(5); Quill Delta format - Change Deltas
65. Change Deltas don’t know what document they’re operating on.
66. Changing Documents with Delta.compose()
67. final a = Delta()..insert('Hello world!\n'); Delta.compose() What if we want to change this into “Hello people!” instead?
68. Take a Document Delta and Compose a Change Delta on it.
69. final a = Delta()..insert('Hello world!\n'); final change = Delta() // Skip the first 6 characters in the document. ..retain(6) // Insert the text "people" at current position. ..insert('people') // Delete the next 5 characters. ..delete(5); // Delta()..insert('Hello people!\n'). final b = a.compose(change); Delta.compose() - changing “Hello world!” to “Hello people!”
70. final a = Delta()..insert('Hello world!\n'); final change = Delta() // Skip the first 6 characters in the document. ..retain(6) // Insert the text "people" at current position. ..insert('people') // Delete the next 5 characters. ..delete(5); // Delta()..insert('Hello people!\n'). final b = a.compose(change); Delta.compose() - changing “Hello world!” to “Hello people!”
71. final a = Delta()..insert('Hello world!\n'); final change = Delta() // Skip the first 6 characters in the document. ..retain(6) // Insert the text "people" at current position. ..insert('people') // Delete the next 5 characters. ..delete(5); // Delta()..insert('Hello people!\n'). final b = a.compose(change); Delta.compose() - changing “Hello world!” to “Hello people!”
72. final a = Delta()..insert('Hello world!\n'); final change = Delta() // Skip the first 6 characters in the document. ..retain(6) // Insert the text "people" at current position. ..insert('people') // Delete the next 5 characters. ..delete(5); // Delta()..insert('Hello people!\n'). final b = a.compose(change); Delta.compose() - changing “Hello world!” to “Hello people!”
73. Part 2: Sync logic
74. A simple example.
75. A simple example.
76. It’s complicated to explain. But I’ll try.
77. Client A Client B Version: 0 (empty) Version: 0 Version: 0
78. Client A Client B Version: 0 (empty) Version: 0 Version: 0
79. Client A Client B Version: 0 (empty) Version: 0 Version: 0 ver: 0 ins(“abc”)
80. Client A Client B Version: 0 (empty) Version: 0 Version: 0 ver: 0 ins(“abc”) Delta() .compose(Delta()..insert(“abc”))
81. Client A Client B Version: 1 ins(“abc”) Version: 1 Version: 0
82. Client A Client B Version: 1 ins(“abc”) Version: 1 Version: 0
83. Client A Client B Version: 1 ins(“abc”) Version: 1 Version: 0
84. Client B has a bad connection
85. Client A Client B Version: 1 ins(“abc”) Version: 1 Version: 0
86. Client A Client B Version: 1 ins(“abc”) Version: 1 Version: 0
87. Client A Client B Version: 1 ins(“abc”) Version: 1 Version: 0 ver: 0 ins(“123”)
88. Client A Client B Version: 1 ins(“abc”) Version: 1 Version: 0 ver: 0 ins(“123”) ver: 0 ins(“abc”)
89. Client A Client B Version: 1 ins(“abc”) Version: 1 Version: 0 ver: 0 ins(“123”) ver: 0 ins(“abc”) compose()
90. Client A Client B Version: 1 ins(“abc”) Version: 1 Version: 1 ver: 0 ins(“123”)
91. Client A Client B Version: 1 ins(“abc”) Version: 1 ver: 0 ins(“123”) ?????? Version: 1
92. Client A Client B Version: 1 ins(“abc”) Version: 1 Version: 0 ver: 0 ins(“123”) ??????
93. The incoming change is operating on an older version of the document.
94. Solution: Server transforms the change so that it’s operating on the latest document.
95. Delta.transform()
96. Can be used to bring an out of date change up to date.
97. If “a” reached the server first, how to make sure that “b” is up to date? final a = Delta()..insert('abc'); final b = Delta()..insert('123'); // Delta()..retain(3)..insert('123') final bTransformed = a.transform(b, true);
98. If “a” reached the server first, how to make sure that “b” is up to date? final a = Delta()..insert('abc'); final b = Delta()..insert('123'); // Delta()..retain(3)..insert('123') final bTransformed = a.transform(b, true);
99. (It’s actually more complicated than that)
100. // All the changes that have been applied to the server document. final serverChanges = [ Delta()..insert('abc'), ]; // The change that Client B wants to make. Targeting old // version of the document where the whole document was empty. final oldClientBChange = Delta()..insert('123'); // The Client B change can be brought up to date by transforming // it with the server changes. // // Result: Delta()..retain(3)..insert('123') final newClientBChange = serverChanges.fold<Delta>( oldClientBChange, (previous, current) => previous.transform(current , true), );
101. Server always stores every change that happens to the document.
102. (It’s actually even more complicated than that)
103. Client A Client B Version: 1 Contents: “abc” Version: 1 Version: 1 ver: 0 ins(“123”)
104. Client A Client B Version: 1 Contents: “abc” Version: 1 Version: 1 ver: 0 ins(“123”)
105. Client A Client B Version: 1 Contents: “abc” Version: 1 ver: 0 ins(“123”) Delta.transform() magic Version: 1
106. Client A Client B Version: 1 Contents: “abc” Version: 1 ver: 0 ins(“123”) Version: 1
107. Client A Client B Version: 1 Contents: “abc” Version: 1 ver: 0 ins(“123”) Version: 2
108. Client A Client B Version: 1 Contents: “abc” Version: 1 ver: 0 ins(“123”) Version: 2
109. Client A Client B Version: 1 Contents: “abc” Version: 1 ver: 0 ins(“123”) Version: 2
110. Client A Client B Version: 1 Contents: “abc” Version: 1 ver: 0 ins(“123”) Version: 2
111. Client A Client B Version: 1 Contents: “abc” Version: 1 ver: 1 ret(3), ins(“123”) Version: 2
112. Client A Client B Version: 1 Contents: “abc” Version: 1 ver: 1 ret(3), ins(“123”) Version: 2
113. Client A Client B Version: 1 Contents: “abc” Version: 1 ver: 1 ret(3), ins(“123”) Version: 2 (Delta()..insert(“abc”)) .compose( Delta() ..retain(3) ..insert(“abc”) )
114. Client A Client B Version: 2 Contents: “abc123” Version: 1 Version: 2
115. Client A Client B Version: 2 Contents: “abc123” Version: 1 Version: 2
116. Client A Client B Version: 2 Contents: “abc123” Version: 1 ver: 1 ret(3), ins(“123”) Version: 2
117. Client A Client B Version: 2 Contents: “abc123” Version: 1 ver: 1 ret(3), ins(“123”) Version: 2 compose()
118. Client A Client B Version: 2 Contents: “abc123” Version: 2 Version: 2
119. Client A Client B Version: 2 Contents: “abc123” Version: 2 Version: 2
120. That was just one of the million cases how the sync logic solves problems
121. The server logic must be insanely complicated, right?
122. class Server { Delta contents = Delta(); var version = 0; final changes = <Delta>[]; void update({required int clientVersion, required Delta clientChange}) { // Check how far behind client is. final changeCount = version - clientVersion; // Transform the client change with server changes. final transformedChange = changes .sublist(changes.length - changeCount) .fold<Delta>( clientChange, (previous, current) => current.transform(previous, true), ); contents = contents.compose(transformedChange); version++; changes.add(transformedChange); } }
123. class Server { Delta contents = Delta(); var version = 0; final changes = <Delta>[]; void update({required int clientVersion, required Delta clientChange}) { // Check how far behind client is. final changeCount = version - clientVersion; // Transform the client change with server changes. final transformedChange = changes .sublist(changes.length - changeCount) .fold<Delta>( clientChange, (previous, current) => current.transform(previous, true), ); contents = contents.compose(transformedChange); version++; changes.add(transformedChange); } }
124. class Server { Delta contents = Delta(); var version = 0; final changes = <Delta>[]; void update({required int clientVersion , required Delta clientChange}) { // Check how far behind client is. final changeCount = version - clientVersion ; // Transform the client change with server changes. final transformedChange = changes .sublist(changes.length - changeCount) .fold<Delta>( clientChange, (previous, current) => current.transform(previous, true), ); contents = contents.compose(transformedChange); version++; changes.add(transformedChange); } }
125. class Server { Delta contents = Delta(); var version = 0; final changes = <Delta>[]; void update({required int clientVersion , required Delta clientChange}) { // Check how far behind client is. final changeCount = version - clientVersion; // Transform the client change with server changes. final transformedChange = changes .sublist(changes.length - changeCount) .fold<Delta>( clientChange , (previous, current) => current.transform(previous , true), ); contents = contents.compose(transformedChange); version++; changes.add(transformedChange); } }
126. class Server { Delta contents = Delta(); var version = 0; final changes = <Delta>[]; void update({required int clientVersion , required Delta clientChange}) { // Check how far behind client is. final changeCount = version - clientVersion; // Transform the client change with server changes. final transformedChange = changes .sublist(changes.length - changeCount) .fold<Delta>( clientChange, (previous, current) => current.transform(previous, true), ); contents = contents.compose(transformedChange) ; version++; changes.add(transformedChange) ; } }
127. class Server { Delta contents = Delta(); var version = 0; final changes = <Delta>[]; void update({required int clientVersion , required Delta clientChange}) { // Check how far behind client is. final changeCount = version - clientVersion; // Transform the client change with server changes. final transformedChange = changes .sublist(changes.length - changeCount) .fold<Delta>( clientChange, (previous, current) => current.transform(previous, true), ); contents = contents.compose(transformedChange); version++; changes.add(transformedChange) ; } }
128. class Server { Delta contents = Delta(); var version = 0; final changes = <Delta>[]; void update({required int clientVersion , required Delta clientChange}) { // Check how far behind client is. final changeCount = version - clientVersion ; // Transform the client change with server changes. final transformedChange = changes .sublist(changes.length - changeCount) .fold<Delta>( clientChange , (previous, current) => current.transform(previous , true), ); contents = contents.compose(transformedChange) ; version++; changes.add(transformedChange) ; } }
129. (Omitted - the server broadcasting changes with WebSockets)
130. Caveats • The code is simplified • We actually use Elixir for our backend • This code does not have error handling • It also doesn’t prevent clients from corrupting documents ◦ Might sometimes happen, but shouldn’t if everything is implement correctly ◦ Still a good idea to prevent corruptions on the server!
131. Sync logic: frontend
132. DocumentSyncEngine - Contains the client-side conflict resolution and sync logic
133. class DocumentSyncEngine { DocumentSyncEngine(this._documentChannel); final DocumentChannel _documentChannel; int? _version; Delta? _currentDocument; void openDocument({required String documentId}) { … } void onLocalDocumentChanged (Delta document) { … } }
134. Opening a document
135. void openDocument({required String documentId}) { _documentChannel.join( documentId: _documentId, onDocumentOpened: _handleRemoteDocumentOpened , onDocumentUpdated: _handleRemoteDocumentChanged , ); } DocumentSyncEngine.openDocument()
136. When the server connection is established
137. void _handleRemoteDocumentOpened (int version, Delta contents) { _version = version; _currentDocument = contents; _updateEditor(contents); } When the server connection is initially established
138. When a user edits the document
139. void onLocalDocumentChanged (Delta newDocument) { final change = _currentDocument !.diff(newDocument) ; if (change.isNotEmpty) { _currentDocument = _currentDocument !.compose(change) ; await _documentChannel .sendUpdate( documentId: _documentId, version: _version, change: change, ); _version = version! + 1; } } When a user edits the document
140. void onLocalDocumentChanged (Delta newDocument) { final change = _currentDocument !.diff(newDocument) ; if (change.isNotEmpty) { _currentDocument = _currentDocument!.compose(change); await _documentChannel.sendUpdate( documentId: _documentId, version: _version, change: change, ); _version = version! + 1; } } When a user edits the document
141. Delta.diff()
142. final a = Delta()..insert( 'Hello world! \n'); Delta.diff() ? final b = Delta()..insert( 'Hello people! \n'); to this: What’s the most minimal change from this:
143. final a = Delta()..insert( 'Hello world! \n'); final b = Delta()..insert( 'Hello people! \n'); // Delta() // ..retain(6) // ..insert('people') // ..delete(5); final change = a.diff(b); Delta.diff()
144. final a = Delta()..insert( 'Hello world! \n'); final b = Delta()..insert( 'Hello people! \n'); // Delta() // ..retain(6) // ..insert('people') // ..delete(5); final change = a.diff(b) ; Delta.diff()
145. final a = Delta()..insert( 'Hello world! \n'); final b = Delta()..insert( 'Hello people! \n'); // Delta() // ..retain(6) // ..insert('people') // ..delete(5); final change = a.diff(b) ; // Will be exactly the same as "b". a.compose(change) ; Delta.diff()
146. final a = Delta()..insert( 'Hello world! \n'); final b = Delta()..insert( 'Hello people! \n'); // Delta() // ..retain(6) // ..insert('people') // ..delete(5); final change = a.diff(b) ; // Will be exactly the same as "b". a.compose(change) ; Delta.diff()
147. Back to the example
148. void onLocalDocumentChanged (Delta newDocument) { final change = _currentDocument !.diff(newDocument) ; if (change.isNotEmpty) { _currentDocument = _currentDocument!.compose(change); await _documentChannel.sendUpdate( documentId: _documentId, version: _version, change: change, ); _version = version! + 1; } } When a user edits the document
149. void onLocalDocumentChanged (Delta newDocument) { final change = _currentDocument!.diff(newDocument); if (change.isNotEmpty) { _currentDocument = _currentDocument !.compose(change) ; await _documentChannel .sendUpdate( documentId: _documentId, version: _version, change: change, ); _version = version! + 1; } } When a user edits the document
150. void onLocalDocumentChanged (Delta newDocument) { final change = _currentDocument!.diff(newDocument); if (change.isNotEmpty) { _currentDocument = _currentDocument !.compose(change) ; await _documentChannel.sendUpdate( documentId: _documentId, version: _version, change: change, ); _version = version! + 1; } } When a user edits the document
151. void onLocalDocumentChanged (Delta newDocument) { final change = _currentDocument!.diff(newDocument); if (change.isNotEmpty) { _currentDocument = _currentDocument!.compose(change); await _documentChannel .sendUpdate( documentId: _documentId, version: _version, change: change, ); _version = version! + 1; } } When a user edits the document
152. void onLocalDocumentChanged (Delta newDocument) { final change = _currentDocument!.diff(newDocument); if (change.isNotEmpty) { _currentDocument = _currentDocument!.compose(change); await _documentChannel.sendUpdate( documentId: _documentId, version: _version, change: change, ); _version = version! + 1; } } When a user edits the document
153. (it’s a bit more involved)
154. Future<void> _pushLocalUpdate (Delta change) async { if (_changesBeingCurrentlyPushed != null) { _queuedChanges ??= Delta(); _queuedChanges = _queuedChanges !.compose(change) ; } else { final version = _version; _version = version! + 1; _changesBeingCurrentlyPushed = change; await _documentChannel .sendUpdate(documentId: _documentId , version: version , change: change) ; _changesBeingCurrentlyPushed = null; if (_queuedChanges != null) { _pushLocalUpdate( _queuedChanges !); _queuedChanges = null; } } }
155. (It’s even more involved)
156. When another user edits the document
157. void _handleRemoteDocumentChanged (int version, Delta change) { _currentDocument = _currentDocument!.compose(change); _version = _version! + 1; _updateEditor(_currentDocument!, change); } When another user edits the document
158. (It’s more complicated than that)
159. void _handleRemoteDocumentChanged (int version , Delta change) { var remoteDelta = Delta.from(change); if (_changesBeingCurrentlyPushed != null) { remoteDelta = _changesBeingCurrentlyPushed !.transform(remoteDelta , false); if (_queuedChanges != null) { final remotePending = _queuedChanges !.transform(remoteDelta , false); _queuedChanges = remoteDelta.transform( _queuedChanges !, true); remoteDelta = remotePending ; } } _currentDocument = _currentDocument !.compose(remoteDelta) ; _version = _version! + 1; _updateEditor (_currentDocument !, remoteDelta) ; }
160. (It’s even more complicated than that)
161. Data flows consistently and we know how to resolve conflicts.
162. All done?
163. Nope. There’s one more thing.
164. Part 3: Transforming document selections
165. Scenario A: Without selection transformation 😡😡😡 GIF: Right client has collapsed selection after “f”, left client adds 4 x’s at the start. Selection stays collapsed at offset 6.
166. Scenario B: Without selection transformation 😡😡😡 GIF: Right client has selected the entire document, left client adds 4 x’s in the middle. The selection stays the same - start: 0, end: 6.
167. We need selection transformation
168. Delta.transformPosition()
169. “Here’s an outdated offset. Give me the updated offset based on the change that happened.”
170. // We have a collapsed selection after the letter "f". const oldSelection = DocumentSelection (start: 6, end: 6); // Server notifies us that some other user inserts 4 x's // at the start of the document. final remoteChange = Delta()..insert('xxxx'); // With the `.transformPosition()` utility method, we update our // selection to match the new document after composing `remoteChange`. final newSelection = DocumentSelection( start: remoteChange.transformPosition(oldSelection.start), end: remoteChange.transformPosition(oldSelection.end), ); // Tell the editor to update the selection. // // It will still be collapsed and after the letter "f", but new // position will be 10 instead 6. _updateEditorSelection(newSelection);
171. // We have a collapsed selection after the letter "f". const oldSelection = DocumentSelection(start: 6, end: 6); // Server notifies us that some other user inserts 4 x's // at the start of the document. final remoteChange = Delta()..insert('xxxx'); // With the `.transformPosition()` utility method, we update our // selection to match the new document after composing `remoteChange`. final newSelection = DocumentSelection( start: remoteChange.transformPosition(oldSelection.start), end: remoteChange.transformPosition(oldSelection.end), ); // Tell the editor to update the selection. // // It will still be collapsed and after the letter "f", but new // position will be 10 instead 6. _updateEditorSelection(newSelection);
172. // We have a collapsed selection after the letter "f". const oldSelection = DocumentSelection(start: 6, end: 6); // Server notifies us that some other user inserts 4 x's // at the start of the document. final remoteChange = Delta()..insert('xxxx'); // With the `.transformPosition()` utility method, we update our // selection to match the new document after composing `remoteChange`. final newSelection = DocumentSelection ( start: remoteChange.transformPosition(oldSelection. start), end: remoteChange.transformPosition(oldSelection. end), ); // Tell the editor to update the selection. // // It will still be collapsed and after the letter "f", but new // position will be 10 instead 6. _updateEditorSelection(newSelection);
173. // We have a collapsed selection after the letter "f". const oldSelection = DocumentSelection(start: 6, end: 6); // Server notifies us that some other user inserts 4 x's // at the start of the document. final remoteChange = Delta()..insert('xxxx'); // With the `.transformPosition()` utility method, we update our // selection to match the new document after composing `remoteChange`. final newSelection = DocumentSelection( start: remoteChange.transformPosition(oldSelection.start), end: remoteChange.transformPosition(oldSelection.end), ); // Tell the editor to update the selection. // // It will still be collapsed and after the letter "f", but new // position will be 10 instead 6. _updateEditorSelection(newSelection) ;
174. Scenario A: With selection transformation 😊😊😊 GIF: Right client has collapsed selection after “f”, left client adds 4 x’s at the start. Selection moves by one with each “x” added/removed before it.
175. Remember Scenario B?
176. // We have selected every letter in the document "abcdef". const oldSelection = DocumentSelection (start: 0, end: 6); // Server notifies us that some other user inserts 4 x's // at the middle of the document, between "c" and "d". final remoteChange = Delta() ..retain(3) ..insert('xxxx'); // With the `.transformPosition()` utility method, we update our // selection to match the new document after composing `remoteChange`. final newSelection = DocumentSelection( start: remoteChange.transformPosition(oldSelection.start), end: remoteChange.transformPosition(oldSelection.end), ); // Tell the editor to update the selection. It will still contain the whole // document - start position will stay at 0, but end position will now be 6 // instead of 10. _updateEditorSelection(newSelection);
177. // We have selected every letter in the document "abcdef". const oldSelection = DocumentSelection(start: 0, end: 6); // Server notifies us that some other user inserts 4 x's // at the middle of the document, between "c" and "d". final remoteChange = Delta() ..retain(3) ..insert('xxxx'); // With the `.transformPosition()` utility method, we update our // selection to match the new document after composing `remoteChange`. final newSelection = DocumentSelection( start: remoteChange.transformPosition(oldSelection.start), end: remoteChange.transformPosition(oldSelection.end), ); // Tell the editor to update the selection. It will still contain the whole // document - start position will stay at 0, but end position will now be 10 // instead of 6. _updateEditorSelection(newSelection) ;
178. Scenario B: With selection transformation 😊😊😊 GIF: Right client has selected the entire document, left client adds 4 x’s in the middle. The start of the selection stays 0, end is shifted each time an “x” is added/removed.
179. Undo/redo
180. final history = SimpleLocalDocumentHistory(initialDocument: Delta()); history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')); // Delta()..retain(3)..delete(1) history.undo(); // Delta()..retain(3)..insert('X') history.redo();
181. final history = SimpleLocalDocumentHistory(initialDocument: Delta()); history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')); // Delta()..retain(3)..delete(1) history.undo(); // Delta()..retain(3)..insert('X') history.redo();
182. final history = SimpleLocalDocumentHistory(initialDocument: Delta()); history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')); // Delta()..retain(3)..delete(1) history.undo(); // Delta()..retain(3)..insert('X') history.redo();
183. final history = SimpleLocalDocumentHistory(initialDocument: Delta()); history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')); // Delta()..retain(3)..delete(1) history.undo(); // Delta()..retain(3)..insert('X') history.redo();
184. final history = SimpleLocalDocumentHistory(initialDocument: Delta()); history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')); // Delta()..retain(3)..delete(1) history.undo(); // Delta()..retain(3)..insert('X') history.redo();
185. Implementation
186. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({ required Delta initialDocument}) : _document = initialDocument ; final _undoStack = <Delta>[]; final _redoStack = <Delta>[]; Delta _document; Delta composeLocalChange(Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
187. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[] ; final _redoStack = <Delta>[] ; Delta _document; Delta composeLocalChange(Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
188. Recording changes done by the user
189. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[]; final _redoStack = <Delta>[]; Delta _document; Delta composeLocalChange (Delta change) { _undoStack.add(change.invert( _document)); _redoStack.clear(); _document = _document.compose(change) ; return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
190. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[] ; final _redoStack = <Delta>[]; Delta _document; Delta composeLocalChange (Delta change) { _undoStack.add(change.invert( _document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
191. Wait a minute - what “inverted change”?
192. Delta.invert() - “what would be the exact opposite of this change”?
193. final document = Delta() ..insert('Hello world!\n'); final change = Delta() ..retain(6) ..insert('people') ..delete(5); // Delta() // ..retain(6) // ..insert('world') // ..delete(6); final invertedChange = change.invert(document);
194. final document = Delta() ..insert('Hello world!\n'); final change = Delta() ..retain(6) ..insert('people') ..delete(5); // Delta() // ..retain(6) // ..insert('world') // ..delete(6); final invertedChange = change.invert(document);
195. final document = Delta() ..insert('Hello world!\n'); final change = Delta() ..retain(6) ..insert('people') ..delete(5); // Delta() // ..retain(6) // ..insert('world') // ..delete(6); final invertedChange = change.invert(document);
196. final document = Delta() ..insert('Hello world!\n'); final change = Delta() ..retain(6) ..insert('people') ..delete(5); // Delta() // ..retain(6) // ..insert('world') // ..delete(6); final invertedChange = change.invert(document);
197. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[] ; final _redoStack = <Delta>[]; Delta _document; Delta composeLocalChange (Delta change) { _undoStack.add(change.invert( _document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
198. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[]; final _redoStack = <Delta>[] ; Delta _document; Delta composeLocalChange (Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
199. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[]; final _redoStack = <Delta>[]; Delta _document; Delta composeLocalChange (Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change) ; return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
200. Undoing a change
201. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[]; final _redoStack = <Delta>[]; Delta _document; Delta composeLocalChange(Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast() ; _redoStack.add(change.invert( _document)); _document = _document.compose(change) ; return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
202. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[] ; final _redoStack = <Delta>[]; Delta _document; Delta composeLocalChange(Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast() ; _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
203. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[]; final _redoStack = <Delta>[] ; Delta _document; Delta composeLocalChange(Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert( _document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
204. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[]; final _redoStack = <Delta>[]; Delta _document; Delta composeLocalChange(Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change) ; return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
205. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[]; final _redoStack = <Delta>[]; Delta _document ; Delta composeLocalChange(Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change) ; return _document; } Delta undo() { final change = _undoStack.removeLast() ; _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
206. Redo is pretty much the same
207. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[]; final _redoStack = <Delta>[]; Delta _document; Delta composeLocalChange(Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast() ; _undoStack.add(change.invert( _document)); _document = _document.compose(change) ; return change; } }
208. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[]; final _redoStack = <Delta>[] ; Delta _document; Delta composeLocalChange(Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast() ; _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
209. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[] ; final _redoStack = <Delta>[]; Delta _document; Delta composeLocalChange(Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert( _document)); _document = _document.compose(change); return change; } }
210. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[]; final _redoStack = <Delta>[]; Delta _document; Delta composeLocalChange(Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast(); _undoStack.add(change.invert(_document)); _document = _document.compose(change) ; return change; } }
211. class SimpleLocalDocumentHistory { SimpleLocalDocumentHistory({required Delta initialDocument}) : _document = initialDocument; final _undoStack = <Delta>[]; final _redoStack = <Delta>[]; Delta _document; Delta composeLocalChange(Delta change) { _undoStack.add(change.invert(_document)); _redoStack.clear(); _document = _document.compose(change); return _document; } Delta undo() { final change = _undoStack.removeLast(); _redoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } Delta redo() { final change = _redoStack.removeLast() ; _undoStack.add(change.invert(_document)); _document = _document.compose(change); return change; } }
212. There’s one missing piece if this is supposed to work in multiplayer collaborative app…
213. What if I have changes in my undo/redo history and some other user edits the document?
214. My undo/redo history will be operating on outdated document.
215. history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')); // Other user deletes "a", making document into "bcX" // Delta()..retain(3)..delete(1) // OUTDATED: Will delete nothing history.undo(); // Delta()..retain(3)..insert('X') // OUTDATED: Will try to insert outside of document history.redo();
216. history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')); // Other user deletes "a", making document into "bcX" // Delta()..retain(3)..delete(1) // OUTDATED: Will delete nothing history.undo(); // Delta()..retain(3)..insert('X') // OUTDATED: Will try to insert outside of document history.redo();
217. history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')); // Other user deletes "a", making document into "bcX" // Delta()..retain(3)..delete(1) // OUTDATED: Will delete nothing history.undo(); // Delta()..retain(3)..insert('X') // OUTDATED: Will try to insert outside of document history.redo();
218. history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')); // Other user deletes "a", making document into "bcX" // Delta()..retain(3)..delete(1) // OUTDATED: Will delete nothing history.undo(); // Delta()..retain(3)..insert('X') // OUTDATED: Will try to insert outside of document history.redo();
219. We need to tell the LocalDocumentHistory about remote changes too
220. history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')) // Other user deletes "a", making document into "bcX" ..composeRemoteChange( Delta()..delete(1)); // Delta()..retain(2)..delete(1) history.undo(); // Delta()..retain(2)..insert('X') history.redo();
221. history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')) // Other user deletes "a", making document into "bcX" ..composeRemoteChange( Delta()..delete(1)); // Delta()..retain(2)..delete(1) history.undo(); // Delta()..retain(2)..insert('X') history.redo();
222. history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')) // Other user deletes "a", making document into "bcX" ..composeRemoteChange( Delta()..delete(1)); // Delta()..retain(2)..delete(1) history.undo(); // Delta()..retain(2)..insert('X') history.redo();
223. history // Insert "abc", making the document into "abc". ..composeLocalChange(Delta()..insert('abc')) // Insert "X" after "abc", making the document into "abcX". ..composeLocalChange(Delta()..retain(3)..insert('X')) // Other user deletes "a", making document into "bcX" ..composeRemoteChange( Delta()..delete(1)); // Delta()..retain(2)..delete(1) history.undo(); // Delta()..retain(2)..insert('X') history.redo();
224. How are the undo and redo stacks transformed?
225. class SimpleLocalDocumentHistory { ... Delta composeRemoteChange (Delta delta) { _transformHistory( _undoStack, delta); _transformHistory( _redoStack, delta); _document = _document.compose(delta) ; return _document; } void _transformHistory (List<Delta> history , Delta delta) { var acc = delta ; for (var i = history. length - 1; i >= 0; i--) { final change = history[i] ; final transformedChange = acc.transform(change , true); acc = change.transform(acc , false); history[i] = transformedChange ; } } }
226. And that’s undo/redo.
227. Caveats • Unlimited history • Changes are super fine-grained • See the example project for a more realistic implementation
228. All done!
229. But what about SuperEditor?
231. How it plays together with SuperEditor
232. class SuperEditorDocumentToQuillDeltaConverter { /// Converts a SuperEditor [Document] into a Quill [Delta] document. Delta editorDocumentToDelta(Document document); /// Converts a document [delta] to a SuperEditor [Document]. Document deltaToEditorDocument(Delta delta); } SuperEditor to Quill Deltas and back
233. class SuperEditorDocumentSelectionTransformer { DocumentSelection transform({DocumentSelection oldSelection , Delta delta}) { // Convert SuperEditor Document positions to Quill positions (integers). // Then call delta.transformPosition() on them. // Finally, convert these integers to a new SuperEditor DocumentSelection // that reflects the new selection. } } SuperEditorDocumentSelectionTransformer
234. Tying it together
235. final _converter = EditorDocumentToQuillDeltaConverter (); final _selectionTransformer = DocumentSelectionTransformer (); void handleRemoteDocumentChanged (Delta document , Delta change) { final newDocument = _converter.deltaToEditorDocument(document) ; _documentEditor .executeCommand( EditorCommandFunction ((document, documentTransaction) { // Replace document contents with the nodes from the new document. _replaceDocumentNodes( oldDocument, newDocument); // Transform "my selection" so that my cursor stays after the same // character even though other users add content before it. _documentComposer .selection = _selectionTransformer .transform( oldDocument: oldDocument, newDocument: newDocument , oldSelection: _documentComposer .selection!, delta: change, ); }), ); }
236. final _converter = EditorDocumentToQuillDeltaConverter (); final _selectionTransformer = DocumentSelectionTransformer (); void handleRemoteDocumentChanged(Delta document, Delta change) { final newDocument = _converter.deltaToEditorDocument(document); _documentEditor.executeCommand( EditorCommandFunction((document, documentTransaction) { // Replace document contents with the nodes from the new document. _replaceDocumentNodes(oldDocument, newDocument); // Transform "my selection" so that my cursor stays after the same // character even though other users add content before it. _documentComposer.selection = _selectionTransformer.transform( oldDocument: oldDocument, newDocument: newDocument, oldSelection: _documentComposer.selection!, delta: change, ); }), ); }
237. final _converter = EditorDocumentToQuillDeltaConverter(); final _selectionTransformer = DocumentSelectionTransformer(); void handleRemoteDocumentChanged (Delta document , Delta change) { final newDocument = _converter.deltaToEditorDocument(document); _documentEditor.executeCommand( EditorCommandFunction((document, documentTransaction) { // Replace document contents with the nodes from the new document. _replaceDocumentNodes(oldDocument, newDocument); // Transform "my selection" so that my cursor stays after the same // character even though other users add content before it. _documentComposer.selection = _selectionTransformer.transform( oldDocument: oldDocument, newDocument: newDocument, oldSelection: _documentComposer.selection!, delta: change, ); }), ); }
238. final _converter = EditorDocumentToQuillDeltaConverter (); final _selectionTransformer = DocumentSelectionTransformer(); void handleRemoteDocumentChanged (Delta document , Delta change) { final newDocument = _converter.deltaToEditorDocument(document) ; _documentEditor.executeCommand( EditorCommandFunction((document, documentTransaction) { // Replace document contents with the nodes from the new document. _replaceDocumentNodes(oldDocument, newDocument); // Transform "my selection" so that my cursor stays after the same // character even though other users add content before it. _documentComposer.selection = _selectionTransformer.transform( oldDocument: oldDocument, newDocument: newDocument, oldSelection: _documentComposer.selection!, delta: change, ); }), ); }
239. final _converter = EditorDocumentToQuillDeltaConverter(); final _selectionTransformer = DocumentSelectionTransformer(); void handleRemoteDocumentChanged (Delta document , Delta change) { final newDocument = _converter.deltaToEditorDocument(document) ; _documentEditor .executeCommand( EditorCommandFunction ((document, documentTransaction) { // Replace document contents with the nodes from the new document. _replaceDocumentNodes(oldDocument, newDocument); // Transform "my selection" so that my cursor stays after the same // character even though other users add content before it. _documentComposer.selection = _selectionTransformer.transform( oldDocument: oldDocument, newDocument: newDocument, oldSelection: _documentComposer.selection!, delta: change, ); }), ); }
240. final _converter = EditorDocumentToQuillDeltaConverter (); final _selectionTransformer = DocumentSelectionTransformer(); void handleRemoteDocumentChanged (Delta document , Delta change) { final newDocument = _converter.deltaToEditorDocument(document) ; _documentEditor.executeCommand( EditorCommandFunction((document, documentTransaction) { // Replace document contents with the nodes from the new document. _replaceDocumentNodes( oldDocument, newDocument); // Transform "my selection" so that my cursor stays after the same // character even though other users add content before it. _documentComposer.selection = _selectionTransformer.transform( oldDocument: oldDocument, newDocument: newDocument, oldSelection: _documentComposer.selection!, delta: change, ); }), ); }
241. final _converter = EditorDocumentToQuillDeltaConverter(); final _selectionTransformer = DocumentSelectionTransformer (); void handleRemoteDocumentChanged (Delta document , Delta change) { final newDocument = _converter.deltaToEditorDocument(document); _documentEditor.executeCommand( EditorCommandFunction((document, documentTransaction) { // Replace document contents with the nodes from the new document. _replaceDocumentNodes(oldDocument, newDocument); // Transform "my selection" so that my cursor stays after the same // character even though other users add content before it. _documentComposer .selection = _selectionTransformer .transform( oldDocument: oldDocument, newDocument: newDocument , oldSelection: _documentComposer .selection!, delta: change, ); }), ); }
242. Did the demo work? Video on Desktop, fly restart on Terminal, wifi?
243. Challenges • Corrupted documents • Debugging and testing on two computers • Error logging - we need to obfuscate user documents - shuffle characters around randomly? ◦ Applying obfuscated changes should result in an obfuscated document
244. Further optimizations • Grouping outgoing changes • Local persistence • Offline • MutableDeltaDocument instead of diffing?
245. Thanks! • @SuperlistHQ on Twitter, superlist.com • I’m @koorankka on Twitter, blog at iiro.dev. Will publish slides & source code on Twitter. • github.com/roughike/super_editor_collaboration_sample for demo app • superlist.com/open-source • superlist.com/careers ◦ We’re looking for Flutter developers!