Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-18 14:56:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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 -->
This commit is contained in:
Saul-Mirone
2025-05-28 02:23:45 +00:00
parent 9220b973c7
commit f5f959692a
10 changed files with 33 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
tests/blocksuite/e2e/latex/inline.spec.ts
View File

@@ -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 }) => {