From af893d24317e4df05ac67427c08bcfdf80e3d082 Mon Sep 17 00:00:00 2001
From: Zixuan Chen <remch183@outlook.com>
Date: Mon, 22 Jan 2024 16:00:32 +0800
Subject: [PATCH] docs: refine apply delta doc

---
 crates/loro-wasm/src/lib.rs    |  8 ++++----
 loro-js/tests/richtext.test.ts | 31 +++++++++++++++++++++++--------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/crates/loro-wasm/src/lib.rs b/crates/loro-wasm/src/lib.rs
index 9408b610..8cf080dc 100644
--- a/crates/loro-wasm/src/lib.rs
+++ b/crates/loro-wasm/src/lib.rs
@@ -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
diff --git a/loro-js/tests/richtext.test.ts b/loro-js/tests/richtext.test.ts
index 6bdf25f5..d016b521 100644
--- a/loro-js/tests/richtext.test.ts
+++ b/loro-js/tests/richtext.test.ts
@@ -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 () => {