feat(editor): improve latex editing support (#14924)

## Summary
- support converting selected text into inline LaTeX equations
- support turning text blocks into LaTeX equation blocks
- add equation entries to editor toolbars while keeping inline equation
with text formatting actions

## Tests
- yarn tsc -b blocksuite/affine/inlines/latex/tsconfig.json
blocksuite/affine/blocks/note/tsconfig.json
blocksuite/affine/blocks/root/tsconfig.json
blocksuite/affine/rich-text/tsconfig.json
blocksuite/affine/widgets/keyboard-toolbar/tsconfig.json --pretty false
- git diff --check origin/canary...HEAD

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Equation block support with conversion from existing blocks.
  * Inline LaTeX insertion added to the inline formatting toolbar.
* Equation action added to the keyboard toolbar; Equation blocks
searchable via math/equation/latex aliases.

* **Improvements**
* Inline LaTeX editor opens and syncs more reliably; selection/convert
flow preserves distinct LaTeX values when converting in reverse order.

* **Tests**
  * New e2e tests for inline LaTeX conversions and value preservation.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/toeverything/AFFiNE/pull/14924)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/inlines/latex/src/command.ts

@@ -2,14 +2,48 @@ import {
   DocModeProvider,
   TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
+import type { AffineInlineEditor } from '@blocksuite/affine-shared/types';
 import type { Command, TextSelection } from '@blocksuite/std';
+import type { InlineRange } from '@blocksuite/std/inline';
+
+function openInlineLatexEditor(
+  inlineEditor: AffineInlineEditor,
+  index: number
+) {
+  inlineEditor
+    .waitForUpdate()
+    .then(async () => {
+      await inlineEditor.waitForUpdate();
+
+      const textPoint = inlineEditor.getTextPoint(index);
+      if (!textPoint) return;
+      const [text] = textPoint;
+      const latexNode = text.parentElement?.closest('affine-latex-node');
+      if (!latexNode) return;
+      latexNode.toggleEditor();
+    })
+    .catch(console.error);
+}
+
+function getSingleBlockInlineRange(
+  textSelection: TextSelection
+): InlineRange | null {
+  if (textSelection.to) {
+    return null;
+  }
+
+  return {
+    index: textSelection.from.index,
+    length: textSelection.from.length,
+  };
+}
 
 export const insertInlineLatex: Command<{
   currentTextSelection?: TextSelection;
   textSelection?: TextSelection;
 }> = (ctx, next) => {
   const textSelection = ctx.textSelection ?? ctx.currentTextSelection;
-  if (!textSelection || !textSelection.isCollapsed()) return;
+  if (!textSelection) return;
 
   const blockComponent = ctx.std.view.getBlock(textSelection.from.blockId);
   if (!blockComponent) return;
@@ -20,24 +54,19 @@ export const insertInlineLatex: Command<{
   const inlineEditor = richText.inlineEditor;
   if (!inlineEditor) return;
 
-  inlineEditor.insertText(
-    {
-      index: textSelection.from.index,
-      length: 0,
-    },
-    ' '
-  );
-  inlineEditor.formatText(
-    {
-      index: textSelection.from.index,
-      length: 1,
-    },
-    {
-      latex: '',
-    }
-  );
+  const inlineRange = getSingleBlockInlineRange(textSelection);
+  if (!inlineRange) return;
+
+  const latex = textSelection.isCollapsed()
+    ? ''
+    : inlineEditor.yTextString.slice(
+        inlineRange.index,
+        inlineRange.index + inlineRange.length
+      );
+
+  inlineEditor.insertText(inlineRange, ' ', { latex });
   inlineEditor.setInlineRange({
-    index: textSelection.from.index,
+    index: inlineRange.index,
     length: 1,
   });
 
@@ -56,19 +85,9 @@ export const insertInlineLatex: Command<{
     control: 'create inline equation',
   });
 
-  inlineEditor
-    .waitForUpdate()
-    .then(async () => {
-      await inlineEditor.waitForUpdate();
-
-      const textPoint = inlineEditor.getTextPoint(textSelection.from.index + 1);
-      if (!textPoint) return;
-      const [text] = textPoint;
-      const latexNode = text.parentElement?.closest('affine-latex-node');
-      if (!latexNode) return;
-      latexNode.toggleEditor();
-    })
-    .catch(console.error);
+  if (textSelection.isCollapsed()) {
+    openInlineLatexEditor(inlineEditor, inlineRange.index + 1);
+  }
 
   next();
 };

blocksuite/affine/inlines/latex/src/latex-node/latex-node.ts

@@ -15,7 +15,7 @@ import {
 import type { DeltaInsert } from '@blocksuite/store';
 import { signal } from '@preact/signals-core';
 import katex from 'katex';
-import { css, html, render } from 'lit';
+import { css, html, type PropertyValues, render } from 'lit';
 import { property } from 'lit/decorators.js';
 
 export class AffineLatexNode extends SignalWatcher(
@@ -85,6 +85,8 @@ export class AffineLatexNode extends SignalWatcher(
 
   private _editorAbortController: AbortController | null = null;
 
+  private _isEditorOpen = false;
+
   readonly latex$ = signal('');
 
   readonly latexEditorSignal = signal('');
@@ -174,6 +176,22 @@ export class AffineLatexNode extends SignalWatcher(
     return result;
   }
 
+  protected override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (!changedProperties.has('delta') || this._isEditorOpen) {
+      return;
+    }
+
+    const latex = this.deltaLatex;
+    if (this.latex$.peek() !== latex) {
+      this.latex$.value = latex;
+    }
+    if (this.latexEditorSignal.peek() !== latex) {
+      this.latexEditorSignal.value = latex;
+    }
+  }
+
   override render() {
     return html`<span class="affine-latex" data-selected=${this.selected}
       ><div class="latex-container"></div>
@@ -212,9 +230,11 @@ export class AffineLatexNode extends SignalWatcher(
       },
     });
 
+    this._isEditorOpen = true;
     this._editorAbortController.signal.addEventListener(
       'abort',
       () => {
+        this._isEditorOpen = false;
         portal.remove();
         const latex = this.latexEditorSignal.peek();
         this.latex$.value = latex;