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/blocks/note/src/commands/block-type.ts

@@ -121,6 +121,38 @@ export const updateBlockType: Command<
     }
     return next({ updatedBlocks: [newModel] });
   };
+  const transformToLatex: Command<{}, { updatedBlocks: BlockModel[] }> = (
+    _,
+    next
+  ) => {
+    if (flavour !== 'affine:latex') return;
+
+    const newModels: BlockModel[] = [];
+    blockModels.forEach(model => {
+      if (
+        !matchModels(model, [
+          ParagraphBlockModel,
+          ListBlockModel,
+          CodeBlockModel,
+        ])
+      ) {
+        return;
+      }
+
+      const latex = model.text?.toString() ?? '';
+      const newId = transformModel(model, 'affine:latex', { latex });
+      if (!newId) {
+        return;
+      }
+      const newModel = doc.getModelById(newId);
+      if (newModel) {
+        newModels.push(newModel);
+      }
+    });
+
+    if (newModels.length === 0) return;
+    return next({ updatedBlocks: newModels });
+  };
 
   const focusText: Command<{ updatedBlocks: BlockModel[] }> = (ctx, next) => {
     const { updatedBlocks } = ctx;
@@ -185,6 +217,27 @@ export const updateBlockType: Command<
     });
     return next();
   };
+  const selectBlocks: Command<{ updatedBlocks: BlockModel[] }> = (
+    ctx,
+    next
+  ) => {
+    const { updatedBlocks } = ctx;
+    if (!updatedBlocks || updatedBlocks.length === 0) {
+      return false;
+    }
+
+    requestAnimationFrame(() => {
+      host.selection.setGroup(
+        'note',
+        updatedBlocks.map(model =>
+          host.selection.create(BlockSelection, {
+            blockId: model.id,
+          })
+        )
+      );
+    });
+    return next();
+  };
 
   const [result, resultCtx] = std.command
     .chain()
@@ -196,6 +249,7 @@ export const updateBlockType: Command<
     .try<{ updatedBlocks: BlockModel[] }>(chain => [
       chain.pipe(mergeToCode),
       chain.pipe(appendDivider),
+      chain.pipe(transformToLatex),
       chain.pipe((_, next) => {
         const newModels: BlockModel[] = [];
         blockModels.forEach(model => {
@@ -227,6 +281,14 @@ export const updateBlockType: Command<
     ])
     // focus
     .try(chain => [
+      chain
+        .pipe((_, next) => {
+          if (flavour === 'affine:latex') {
+            return next();
+          }
+          return false;
+        })
+        .pipe(selectBlocks),
       chain.pipe((_, next) => {
         if (['affine:code', 'affine:divider'].includes(flavour)) {
           return next();

blocksuite/affine/blocks/root/package.json

@@ -30,6 +30,7 @@
     "@blocksuite/affine-gfx-pointer": "workspace:*",
     "@blocksuite/affine-gfx-shape": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
+    "@blocksuite/affine-inline-latex": "workspace:*",
     "@blocksuite/affine-inline-preset": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",

blocksuite/affine/blocks/root/src/configs/toolbar.ts

@@ -15,6 +15,7 @@ import {
 import type { HighlightType } from '@blocksuite/affine-components/highlight-dropdown-menu';
 import { toast } from '@blocksuite/affine-components/toast';
 import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
+import { insertInlineLatex } from '@blocksuite/affine-inline-latex';
 import {
   deleteTextCommand,
   formatBlockCommand,
@@ -61,6 +62,7 @@ import {
   DeleteIcon,
   DuplicateIcon,
   LinkedPageIcon,
+  TeXIcon,
 } from '@blocksuite/icons/lit';
 import {
   type BlockComponent,
@@ -199,9 +201,9 @@ const alignActionGroup = {
 const inlineTextActionGroup = {
   id: 'b.inline-text',
   when: ({ chain }) => isFormatSupported(chain).run()[0],
-  actions: textFormatConfigs.map(
+  actions: textFormatConfigs.flatMap(
     ({ id, name, action, activeWhen, icon }, score) => {
-      return {
+      const textAction: ToolbarAction = {
         id,
         icon,
         score,
@@ -209,6 +211,28 @@ const inlineTextActionGroup = {
         run: ({ host }) => action(host),
         active: ({ host }) => activeWhen(host),
       };
+
+      if (id !== 'underline') {
+        return [textAction];
+      }
+
+      return [
+        textAction,
+        {
+          id: 'inline-latex',
+          icon: TeXIcon(),
+          score: score + 0.5,
+          tooltip: 'Inline Equation',
+          run: ({ host }) => {
+            host.std.command
+              .chain()
+              .pipe(getTextSelectionCommand)
+              .pipe(insertInlineLatex)
+              .run();
+          },
+          active: () => false,
+        },
+      ];
     }
   ),
 } as const satisfies ToolbarActionGroup;

blocksuite/affine/blocks/root/tsconfig.json

@@ -27,6 +27,7 @@
     { "path": "../../gfx/pointer" },
     { "path": "../../gfx/shape" },
     { "path": "../../gfx/text" },
+    { "path": "../../inlines/latex" },
     { "path": "../../inlines/preset" },
     { "path": "../../model" },
     { "path": "../../rich-text" },