mirrors/loro
1
0
Fork 0
mirror of https://github.com/loro-dev/loro.git synced 2025-01-22 21:07:43 +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.
///
/// 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
/// `insert` method directly. However, when you use `applyDelta`, if there are some attributes
/// inherit from CRDT but not included in the delta, they will be removed.
/// `insert` method directly. However, when you use `applyDelta` if some attributes are
/// 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
/// 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
/// are always a newline at the end of the text implicitly.
/// is always a newline at the end of the text implicitly.
///
/// @example
/// ```ts

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

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