fix(editor): y reactive deep watch (#9818)

Closes: [BS-2193](https://linear.app/affine-design/issue/BS-2193/fix-deep-watcher-of-reactive-yjs-data)

blocksuite/affine/components/src/rich-text/inline/presets/nodes/latex-node/latex-node.ts

@@ -12,7 +12,7 @@ import {
   ZERO_WIDTH_NON_JOINER,
   ZERO_WIDTH_SPACE,
 } from '@blocksuite/inline';
-import { effect, signal } from '@preact/signals-core';
+import { signal } from '@preact/signals-core';
 import katex from 'katex';
 import { css, html, render } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -88,6 +88,8 @@ export class AffineLatexNode extends SignalWatcher(
 
   readonly latex$ = signal('');
 
+  readonly latexEditorSignal = signal('');
+
   get deltaLatex() {
     return this.delta.attributes?.latex as string;
   }
@@ -100,11 +102,11 @@ export class AffineLatexNode extends SignalWatcher(
     const result = super.connectedCallback();
 
     this.latex$.value = this.deltaLatex;
+    this.latexEditorSignal.value = this.deltaLatex;
 
     this.disposables.add(
-      effect(() => {
-        const latex = this.latex$.value;
-
+      this.latex$.subscribe(latex => {
+        this.latexEditorSignal.value = latex;
         if (latex !== this.deltaLatex) {
           this.editor.formatText(
             {
@@ -116,7 +118,11 @@ export class AffineLatexNode extends SignalWatcher(
             }
           );
         }
+      })
+    );
 
+    this.disposables.add(
+      this.latexEditorSignal.subscribe(latex => {
         this.updateComplete
           .then(() => {
             const latexContainer = this.latexContainer;
@@ -187,7 +193,7 @@ export class AffineLatexNode extends SignalWatcher(
     const portal = createLitPortal({
       template: html`<latex-editor-menu
         .std=${this.std}
-        .latexSignal=${this.latex$}
+        .latexSignal=${this.latexEditorSignal}
         .abortController=${this._editorAbortController}
       ></latex-editor-menu>`,
       container: blockComponent.host,
@@ -210,6 +216,20 @@ export class AffineLatexNode extends SignalWatcher(
       'abort',
       () => {
         portal.remove();
+        const latex = this.latexEditorSignal.peek();
+        this.latex$.value = latex;
+
+        if (latex !== this.deltaLatex) {
+          this.editor.formatText(
+            {
+              index: this.startOffset,
+              length: this.endOffset - this.startOffset,
+            },
+            {
+              latex,
+            }
+          );
+        }
       },
       { once: true }
     );