feat: divide stage1 and stage2 render

packages/blocky-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blocky-core",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "The core of the blocky editor",
   "main": "dist/index.js",
   "module": "dist/index.js",

packages/blocky-core/src/data/change.ts

@@ -328,6 +328,7 @@ export interface FinalizedChangeset {
   afterCursor?: CursorState | null;
   forceUpdate: boolean;
   options: ChangesetApplyOptions;
+  needsRender?: boolean;
 }
 
 /**

packages/blocky-core/src/data/state.ts

@@ -49,7 +49,24 @@ export interface CursorStateUpdateEvent {
 
 export class State implements ChangesetStateLogger {
   readonly beforeChangesetApply: Subject<FinalizedChangeset> = new Subject();
-  readonly changesetApplied: Subject<FinalizedChangeset> = new Subject();
+
+  get changesetApplied() {
+    return this.changesetApplied$;
+  }
+
+  /**
+   * Important jobs need to put in the first stage
+   * - Update the editor
+   * - Data sync
+   */
+  readonly changesetApplied$: Subject<FinalizedChangeset> = new Subject();
+
+  /**
+   * Secondary jobs:
+   * - Update toolbar
+   * - Plugins
+   */
+  readonly changesetApplied2$: Subject<FinalizedChangeset> = new Subject();
   readonly versionHistory = new VersionHistory();
   readonly cursorStateChanged: Subject<CursorStateUpdateEvent> = new Subject();
   #appliedVersion: number;
@@ -140,8 +157,11 @@ export class State implements ChangesetStateLogger {
     }
 
     this.#appliedVersion = changeset.version;
-    this.changesetApplied.next(changeset);
+    this.changesetApplied$.next(changeset);
     this.versionHistory.insert(changeset);
+
+    this.changesetApplied2$.next(changeset);
+
     return true;
   }
 

packages/blocky-core/src/view/editor.ts

@@ -267,6 +267,9 @@ export class Editor {
     this.state.changesetApplied
       .pipe(takeUntil(this.dispose$))
       .subscribe(this.#handleChangesetApplied);
+    this.state.changesetApplied2$
+      .pipe(takeUntil(this.dispose$))
+      .subscribe(this.#handleChangesetApplied2);
     this.state.blockWillDelete
       .pipe(takeUntil(this.dispose$))
       .subscribe((blockElement: BlockDataElement) => {
@@ -1083,6 +1086,7 @@ export class Editor {
     const { options } = changeset;
     const isThisUser = changeset.userId === this.controller.userId;
     const needsRender = options.updateView || changeset.forceUpdate;
+    changeset.needsRender = needsRender;
     if (needsRender) {
       this.render(() => {
         if (!isThisUser) {
@@ -1101,11 +1105,15 @@ export class Editor {
         }
       });
     }
+  };
 
+  #handleChangesetApplied2 = (changeset: FinalizedChangeset) => {
+    // we need to make the state.changesetApplied finished
+    // there should be some data sync jobs
     this.#emitStagedInput();
     this.#refreshSearch();
 
-    if (!needsRender) {
+    if (!changeset.needsRender) {
       this.controller.__emitNextTicks();
     }
   };