From f5f959692a6eb8ec6d0ffa5f8f18887df19d21bc Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Wed, 28 May 2025 02:23:45 +0000 Subject: [PATCH] fix(editor): latex wrong config (#12578) Closes: BS-2782 ## 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. --- .../affine/blocks/latex/src/latex-block.ts | 1 - .../latex/src/latex-node/latex-node.ts | 3 +- packages/frontend/core/package.json | 1 + .../block-suite-editor/lit-adaper.tsx | 3 ++ tests/blocksuite/e2e/latex/inline.spec.ts | 42 ++++++++----------- ...add-inline-latex-at-the-start-of-line.html | 1 + ...dd-inline-latex-in-the-middle-of-text.html | 1 + .../add-inline-latex-using-slash-menu.html | 1 + ...ate-inline-latex-by-clicking-the-node.html | 7 ++++ yarn.lock | 1 + 10 files changed, 33 insertions(+), 28 deletions(-) create mode 100644 tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-at-the-start-of-line.html create mode 100644 tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-in-the-middle-of-text.html create mode 100644 tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-using-slash-menu.html create mode 100644 tests/blocksuite/snapshots/latex/inline.spec.ts/update-inline-latex-by-clicking-the-node.html diff --git a/blocksuite/affine/blocks/latex/src/latex-block.ts b/blocksuite/affine/blocks/latex/src/latex-block.ts index 7fee1a3a4..a5a127587 100644 --- a/blocksuite/affine/blocks/latex/src/latex-block.ts +++ b/blocksuite/affine/blocks/latex/src/latex-block.ts @@ -58,7 +58,6 @@ export class LatexBlockComponent extends CaptionedBlockComponent { +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( - 'E=mc2E=mc^2' - ); + 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( - 'E=mc2E=mc^2' - ); + 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( - 'E=mc2E=mc^2' - ); + + 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( - 'E=mc2E=mc^2' - ); + 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( - 'abchlinedefghi\\def\\arraystretch{1.5}\n\\begin{array}{c:c:c}\na & b & c \\\\ \\\\ hline\nd & e & f \\\\\n\\hdashline\ng & h & i\n\\end{array}' - ); + + 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( - 'E=mc2E=mc^2' - ); + 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( - 'E=mc2E=mc^2' - ); + expect(await latexElement.locator('.katex').innerHTML()).toBe(innerHTML); }); test('add inline latex using markdown shortcut', async ({ page }) => { diff --git a/tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-at-the-start-of-line.html b/tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-at-the-start-of-line.html new file mode 100644 index 000000000..da48a0fa8 --- /dev/null +++ b/tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-at-the-start-of-line.html @@ -0,0 +1 @@ +E=mc2E=mc^2 \ No newline at end of file diff --git a/tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-in-the-middle-of-text.html b/tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-in-the-middle-of-text.html new file mode 100644 index 000000000..da48a0fa8 --- /dev/null +++ b/tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-in-the-middle-of-text.html @@ -0,0 +1 @@ +E=mc2E=mc^2 \ No newline at end of file diff --git a/tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-using-slash-menu.html b/tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-using-slash-menu.html new file mode 100644 index 000000000..da48a0fa8 --- /dev/null +++ b/tests/blocksuite/snapshots/latex/inline.spec.ts/add-inline-latex-using-slash-menu.html @@ -0,0 +1 @@ +E=mc2E=mc^2 \ No newline at end of file diff --git a/tests/blocksuite/snapshots/latex/inline.spec.ts/update-inline-latex-by-clicking-the-node.html b/tests/blocksuite/snapshots/latex/inline.spec.ts/update-inline-latex-by-clicking-the-node.html new file mode 100644 index 000000000..6f469c2e5 --- /dev/null +++ b/tests/blocksuite/snapshots/latex/inline.spec.ts/update-inline-latex-by-clicking-the-node.html @@ -0,0 +1,7 @@ +abchlinedefghi\def\arraystretch{1.5} +\begin{array}{c:c:c} +a & b & c \\ \\ hline +d & e & f \\ +\hdashline +g & h & i +\end{array} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index a0b4df9c4..8da93be73 100644 --- a/yarn.lock +++ b/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"