mirrors/loro
1
0
Fork 0
mirror of https://github.com/loro-dev/loro.git synced 2025-01-23 05:24:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: refine apply delta doc

Browse source
This commit is contained in:
Zixuan Chen 2024-01-22 16:00:32 +08:00
parent e304af05f4
commit af893d2431
No known key found for this signature in database
2 changed files with 27 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
crates/loro-wasm/src/lib.rs
View file

@ -1283,15 +1283,15 @@ impl LoroText {
/// Change the state of this text by delta. /// Change the state of this text by delta.
/// ///
/// If a delta item is insert, it should include all the attributes of the inserted text. /// If a delta item is `insert`, it should include all the attributes of the inserted text.
/// Loro's rich text CRDT may make the inserted text inherit some styles when you use /// Loro's rich text CRDT may make the inserted text inherit some styles when you use
/// `insert` method directly. However, when you use `applyDelta`, if there are some attributes /// `insert` method directly. However, when you use `applyDelta` if some attributes are
/// inherit from CRDT but not included in the delta, they will be removed. /// inherited from CRDT but not included in the delta, they will be removed.
/// ///
/// Another special property of `applyDelta` is if you format an attribute for ranges out of /// Another special property of `applyDelta` is if you format an attribute for ranges out of
/// the text length, Loro will insert new lines to fill the gap first. It's useful when you /// the text length, Loro will insert new lines to fill the gap first. It's useful when you
/// build the binding between Loro and rich text editors like Quill, which might assume there /// build the binding between Loro and rich text editors like Quill, which might assume there
/// are always a newline at the end of the text implicitly. /// is always a newline at the end of the text implicitly.
/// ///
/// @example /// @example
/// ```ts /// ```ts

31
loro-js/tests/richtext.test.ts
View file

@ -109,21 +109,36 @@ describe("richtext", () => {
}); });
it("apply delta", async () => { it("apply delta", async () => {
const doc = new Loro(); const doc1 = new Loro();
const text = doc.getText("text"); doc1.configTextStyle({
link: { expand: "none" },
bold: { expand: "after" },
})
const text1 = doc1.getText("text");
const doc2 = new Loro(); const doc2 = new Loro();
doc2.configTextStyle({
link: { expand: "none" },
bold: { expand: "after" },
})
const text2 = doc2.getText("text"); const text2 = doc2.getText("text");
text.subscribe(doc, (event) => { text1.subscribe(doc1, (event) => {
const e = event.diff as TextDiff; const e = event.diff as TextDiff;
text2.applyDelta(e.diff); text2.applyDelta(e.diff);
}); });
text.insert(0, "foo"); text1.insert(0, "foo");
text.mark({ start: 0, end: 3 }, "link", true); text1.mark({ start: 0, end: 3 }, "link", true);
doc.commit(); doc1.commit();
text.insert(3, "baz"); await new Promise((r) => setTimeout(r, 1));
doc.commit(); expect(text2.toDelta()).toStrictEqual(text1.toDelta());
text1.insert(3, "baz");
doc1.commit();
await new Promise((r) => setTimeout(r, 1)); await new Promise((r) => setTimeout(r, 1));
expect(text2.toDelta()).toStrictEqual([{ insert: 'foo', attributes: { link: true } }, { insert: 'baz' }]); expect(text2.toDelta()).toStrictEqual([{ insert: 'foo', attributes: { link: true } }, { insert: 'baz' }]);
expect(text2.toDelta()).toStrictEqual(text1.toDelta());
text1.mark({ start: 2, end: 5 }, "bold", true);
doc1.commit();
await new Promise((r) => setTimeout(r, 1));
expect(text2.toDelta()).toStrictEqual(text1.toDelta());
}) })
it("custom richtext type", async () => { it("custom richtext type", async () => {