fix(editor): latex wrong config (#12578)

Closes: BS-2782

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

- **New Features**
  - Added KaTeX as a dependency to improve LaTeX rendering support.
  - KaTeX styles are now applied globally for consistent math formatting.

- **Refactor**
  - Updated LaTeX rendering to use inline math mode and removed MathML output.

- **Tests**
  - Enhanced inline LaTeX tests with snapshot-based verification for consistent rendering.
  - Added new snapshot files capturing expected LaTeX rendering outputs for various scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/latex/src/latex-block.ts

@@ -58,7 +58,6 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
           try {
             katex.render(latex, katexContainer, {
               displayMode: true,
-              output: 'mathml',
             });
           } catch {
             katexContainer.replaceChildren();

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

@@ -139,8 +139,7 @@ export class AffineLatexNode extends SignalWatcher(
             } else {
               try {
                 katex.render(latex, latexContainer, {
-                  displayMode: true,
-                  output: 'mathml',
+                  displayMode: false,
                 });
               } catch {
                 latexContainer.replaceChildren();

packages/frontend/core/package.json

@@ -63,6 +63,7 @@
     "is-svg": "^6.0.0",
     "jotai": "^2.10.3",
     "jotai-scope": "^0.7.2",
+    "katex": "^0.16.11",
     "lib0": "^0.2.99",
     "lit": "^3.2.1",
     "lodash-es": "^4.17.21",

packages/frontend/core/src/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import 'katex/dist/katex.min.css';
+
 import { useConfirmModal, useLitPortalFactory } from '@affine/component';
 import {
   type EdgelessEditor,

tests/blocksuite/e2e/latex/inline.spec.ts

@@ -27,7 +27,7 @@ import {
 import { ZERO_WIDTH_FOR_EMPTY_LINE } from '../utils/inline-editor.js';
 import { test } from '../utils/playwright.js';
 
-test('add inline latex at the start of line', async ({ page }) => {
+test('add inline latex at the start of line', async ({ page }, testInfo) => {
   await enterPlaygroundRoom(page);
   await initEmptyParagraphState(page);
   await focusRichText(page);
@@ -47,18 +47,15 @@ test('add inline latex at the start of line', async ({ page }) => {
   );
   await type(page, 'E=mc^2');
   expect(await latexEditorLine.innerText()).toBe('E=mc^2');
-  expect(await latexElement.locator('.katex').innerHTML()).toBe(
-    '<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">E=mc^2</annotation></semantics></math>'
-  );
+  const innerHTML = await latexElement.locator('.katex').innerHTML();
+  expect(innerHTML).toMatchSnapshot(`${testInfo.title}.html`);
 
   await pressEnter(page);
   expect(await latexEditorLine.isVisible()).not.toBeTruthy();
-  expect(await latexElement.locator('.katex').innerHTML()).toBe(
-    '<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">E=mc^2</annotation></semantics></math>'
-  );
+  expect(await latexElement.locator('.katex').innerHTML()).toBe(innerHTML);
 });
 
-test('add inline latex in the middle of text', async ({ page }) => {
+test('add inline latex in the middle of text', async ({ page }, testInfo) => {
   await enterPlaygroundRoom(page);
   await initEmptyParagraphState(page);
   await focusRichText(page);
@@ -80,18 +77,16 @@ test('add inline latex in the middle of text', async ({ page }) => {
   );
   await type(page, 'E=mc^2');
   expect(await latexEditorLine.innerText()).toBe('E=mc^2');
-  expect(await latexElement.locator('.katex').innerHTML()).toBe(
-    '<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">E=mc^2</annotation></semantics></math>'
-  );
+
+  const innerHTML = await latexElement.locator('.katex').innerHTML();
+  expect(innerHTML).toMatchSnapshot(`${testInfo.title}.html`);
 
   await pressEnter(page);
   expect(await latexEditorLine.isVisible()).not.toBeTruthy();
-  expect(await latexElement.locator('.katex').innerHTML()).toBe(
-    '<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">E=mc^2</annotation></semantics></math>'
-  );
+  expect(await latexElement.locator('.katex').innerHTML()).toBe(innerHTML);
 });
 
-test('update inline latex by clicking the node', async ({ page }) => {
+test('update inline latex by clicking the node', async ({ page }, testInfo) => {
   await enterPlaygroundRoom(page);
   await initEmptyParagraphState(page);
   await focusRichText(page);
@@ -123,9 +118,9 @@ test('update inline latex by clicking the node', async ({ page }) => {
   await type(page, String.raw`g & h & i`);
   await pressShiftEnter(page);
   await type(page, String.raw`\end{array}`);
-  expect(await latexElement.locator('.katex').innerHTML()).toBe(
-    '<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mtable rowspacing="0.66em" columnalign="center center center" columnlines="dashed dashed" columnspacing="1em" rowlines="none none dashed"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>a</mi></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>b</mi></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>c</mi></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mi>h</mi><mi>l</mi><mi>i</mi><mi>n</mi><mi>e</mi><mi>d</mi></mrow></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>e</mi></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>f</mi></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>g</mi></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>h</mi></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>i</mi></mstyle></mtd></mtr></mtable><annotation encoding="application/x-tex">\\def\\arraystretch{1.5}\n\\begin{array}{c:c:c}\na &amp; b &amp; c \\\\ \\\\ hline\nd &amp; e &amp; f \\\\\n\\hdashline\ng &amp; h &amp; i\n\\end{array}</annotation></semantics></math>'
-  );
+
+  const innerHTML = await latexElement.locator('.katex').innerHTML();
+  expect(innerHTML).toMatchSnapshot(`${testInfo.title}.html`);
 
   // click outside to hide the editor
   await page.click('affine-editor-container');
@@ -217,7 +212,7 @@ test('latex editor', async ({ page }) => {
   );
 });
 
-test('add inline latex using slash menu', async ({ page }) => {
+test('add inline latex using slash menu', async ({ page }, testInfo) => {
   await enterPlaygroundRoom(page);
   await initEmptyParagraphState(page);
   await focusRichText(page);
@@ -237,15 +232,12 @@ test('add inline latex using slash menu', async ({ page }) => {
   );
   await type(page, 'E=mc^2');
   expect(await latexEditorLine.innerText()).toBe('E=mc^2');
-  expect(await latexElement.locator('.katex').innerHTML()).toBe(
-    '<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">E=mc^2</annotation></semantics></math>'
-  );
+  const innerHTML = await latexElement.locator('.katex').innerHTML();
+  expect(innerHTML).toMatchSnapshot(`${testInfo.title}.html`);
 
   await pressEnter(page);
   expect(await latexEditorLine.isVisible()).not.toBeTruthy();
-  expect(await latexElement.locator('.katex').innerHTML()).toBe(
-    '<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">E=mc^2</annotation></semantics></math>'
-  );
+  expect(await latexElement.locator('.katex').innerHTML()).toBe(innerHTML);
 });
 
 test('add inline latex using markdown shortcut', async ({ page }) => {

tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-at-the-start-of-line.html

@@ -0,0 +1 @@
+<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">E=mc^2</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 0.6833em;"></span><span class="mord mathnormal" style="margin-right: 0.0576em;">E</span><span class="mspace" style="margin-right: 0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right: 0.2778em;"></span></span><span class="base"><span class="strut" style="height: 0.8141em;"></span><span class="mord mathnormal">m</span><span class="mord"><span class="mord mathnormal">c</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.8141em;"><span class="" style="top: -3.063em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span>

tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-in-the-middle-of-text.html

@@ -0,0 +1 @@
+<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">E=mc^2</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 0.6833em;"></span><span class="mord mathnormal" style="margin-right: 0.0576em;">E</span><span class="mspace" style="margin-right: 0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right: 0.2778em;"></span></span><span class="base"><span class="strut" style="height: 0.8141em;"></span><span class="mord mathnormal">m</span><span class="mord"><span class="mord mathnormal">c</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.8141em;"><span class="" style="top: -3.063em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span>

tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-using-slash-menu.html

@@ -0,0 +1 @@
+<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">E=mc^2</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 0.6833em;"></span><span class="mord mathnormal" style="margin-right: 0.0576em;">E</span><span class="mspace" style="margin-right: 0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right: 0.2778em;"></span></span><span class="base"><span class="strut" style="height: 0.8141em;"></span><span class="mord mathnormal">m</span><span class="mord"><span class="mord mathnormal">c</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.8141em;"><span class="" style="top: -3.063em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span>

tests/blocksuite/snapshots/latex/inline.spec.ts/update-inline-latex-by-clicking-the-node.html

@@ -0,0 +1,7 @@
+<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mtable rowspacing="0.66em" columnalign="center center center" columnlines="dashed dashed" columnspacing="1em" rowlines="none none dashed"><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>a</mi></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>b</mi></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>c</mi></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mrow><mi>h</mi><mi>l</mi><mi>i</mi><mi>n</mi><mi>e</mi><mi>d</mi></mrow></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>e</mi></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>f</mi></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>g</mi></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>h</mi></mstyle></mtd><mtd><mstyle scriptlevel="0" displaystyle="false"><mi>i</mi></mstyle></mtd></mtr></mtable><annotation encoding="application/x-tex">\def\arraystretch{1.5}
+\begin{array}{c:c:c}
+a &amp; b &amp; c \\ \\ hline
+d &amp; e &amp; f \\
+\hdashline
+g &amp; h &amp; i
+\end{array}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 7.2em; vertical-align: -3.35em;"></span><span class="mord"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 3.85em;"><span class="" style="top: -5.85em;"><span class="pstrut" style="height: 5.85em;"></span><span class="mtable"><span class="arraycolsep" style="width: 0.5em;"></span><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 3.85em;"><span class="" style="top: -5.85em;"><span class="pstrut" style="height: 3.26em;"></span><span class="mord"><span class="mord mathnormal">a</span></span></span><span class="" style="top: -4.05em;"><span class="pstrut" style="height: 3.26em;"></span><span class="mord"></span></span><span class="" style="top: -2.25em;"><span class="pstrut" style="height: 3.26em;"></span><span class="mord"><span class="mord mathnormal">h</span><span class="mord mathnormal" style="margin-right: 0.0197em;">l</span><span class="mord mathnormal">in</span><span class="mord mathnormal">e</span><span class="mord mathnormal">d</span></span></span><span class="" style="top: -0.45em;"><span class="pstrut" style="height: 3.26em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right: 0.0359em;">g</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 3.35em;"><span class=""></span></span></span></span></span><span class="arraycolsep" style="width: 0.5em;"></span><span class="vertical-separator" style="height: 7.2em; border-right-width: 0.04em; border-right-style: dashed; margin: 0px -0.02em; vertical-align: -3.35em;"></span><span class="arraycolsep" style="width: 0.5em;"></span><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 3.85em;"><span class="" style="top: -5.85em;"><span class="pstrut" style="height: 3.26em;"></span><span class="mord"><span class="mord mathnormal">b</span></span></span><span class="" style="top: -2.25em;"><span class="pstrut" style="height: 3.26em;"></span><span class="mord"><span class="mord mathnormal">e</span></span></span><span class="" style="top: -0.45em;"><span class="pstrut" style="height: 3.26em;"></span><span class="mord"><span class="mord mathnormal">h</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 3.35em;"><span class=""></span></span></span></span></span><span class="arraycolsep" style="width: 0.5em;"></span><span class="vertical-separator" style="height: 7.2em; border-right-width: 0.04em; border-right-style: dashed; margin: 0px -0.02em; vertical-align: -3.35em;"></span><span class="arraycolsep" style="width: 0.5em;"></span><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 3.85em;"><span class="" style="top: -5.85em;"><span class="pstrut" style="height: 3.26em;"></span><span class="mord"><span class="mord mathnormal">c</span></span></span><span class="" style="top: -2.25em;"><span class="pstrut" style="height: 3.26em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right: 0.1076em;">f</span></span></span><span class="" style="top: -0.45em;"><span class="pstrut" style="height: 3.26em;"></span><span class="mord"><span class="mord mathnormal">i</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 3.35em;"><span class=""></span></span></span></span></span><span class="arraycolsep" style="width: 0.5em;"></span></span></span><span class="" style="top: -4.3em;"><span class="pstrut" style="height: 5.85em;"></span><span class="hdashline" style="border-bottom-width: 0.04em;"></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 3.35em;"><span class=""></span></span></span></span></span></span></span>

yarn.lock

@@ -455,6 +455,7 @@ __metadata:
     is-svg: "npm:^6.0.0"
     jotai: "npm:^2.10.3"
     jotai-scope: "npm:^0.7.2"
+    katex: "npm:^0.16.11"
     lib0: "npm:^0.2.99"
     lit: "npm:^3.2.1"
     lodash-es: "npm:^4.17.21"