snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

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

@@ -0,0 +1,62 @@
+import { expect } from '@playwright/test';
+
+import {
+  enterPlaygroundRoom,
+  focusRichText,
+  getPageSnapshot,
+  initEmptyParagraphState,
+  type,
+} from '../utils/actions/index.js';
+import { test } from '../utils/playwright.js';
+
+test('add latex block using slash menu', async ({ page }, testInfo) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+    `${testInfo.title}_init.json`
+  );
+
+  await type(page, '/eq\naaa');
+
+  expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+    `${testInfo.title}_finial.json`
+  );
+});
+
+test('add latex block using markdown shortcut with space', async ({
+  page,
+}, testInfo) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+    `${testInfo.title}_init.json`
+  );
+
+  await type(page, '$$$$ aaa');
+
+  expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+    `${testInfo.title}_finial.json`
+  );
+});
+
+test('add latex block using markdown shortcut with enter', async ({
+  page,
+}, testInfo) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+    `${testInfo.title}_init.json`
+  );
+
+  await type(page, '$$$$\naaa');
+
+  expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+    `${testInfo.title}_finial.json`
+  );
+});

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

@@ -0,0 +1,441 @@
+import { expect } from '@playwright/test';
+
+import {
+  dragBetweenIndices,
+  enterPlaygroundRoom,
+  focusRichText,
+  initEmptyParagraphState,
+  waitNextFrame,
+} from '../utils/actions/index.js';
+import {
+  cutByKeyboard,
+  pasteByKeyboard,
+  pressArrowLeft,
+  pressArrowRight,
+  pressArrowUp,
+  pressBackspace,
+  pressBackspaceWithShortKey,
+  pressEnter,
+  pressShiftEnter,
+  redoByKeyboard,
+  selectAllByKeyboard,
+  type,
+  undoByKeyboard,
+} from '../utils/actions/keyboard.js';
+import {
+  assertRichTextInlineDeltas,
+  assertRichTextInlineRange,
+} from '../utils/asserts.js';
+import { ZERO_WIDTH_FOR_EMPTY_LINE } from '../utils/inline-editor.js';
+import { test } from '../utils/playwright.js';
+import { getFormatBar } from '../utils/query.js';
+
+test('add inline latex at the start of line', async ({ page }, testInfo) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  const latexEditorLine = page.locator('latex-editor-menu v-line div');
+  const latexElement = page.locator(
+    'affine-paragraph rich-text affine-latex-node'
+  );
+
+  expect(await latexEditorLine.isVisible()).not.toBeTruthy();
+  expect(await latexElement.isVisible()).not.toBeTruthy();
+  await type(page, '$$ ');
+  expect(await latexEditorLine.isVisible()).toBeTruthy();
+  expect(await latexElement.isVisible()).toBeTruthy();
+  expect(await latexElement.locator('.placeholder').innerText()).toBe(
+    'Equation'
+  );
+  await type(page, 'E=mc^2');
+  expect(await latexEditorLine.innerText()).toBe('E=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(innerHTML);
+});
+
+test('add inline latex in the middle of text', async ({ page }, testInfo) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  const latexEditorLine = page.locator('latex-editor-menu v-line div');
+  const latexElement = page.locator(
+    'affine-paragraph rich-text affine-latex-node'
+  );
+
+  expect(await latexEditorLine.isVisible()).not.toBeTruthy();
+  expect(await latexElement.isVisible()).not.toBeTruthy();
+  await type(page, 'aaaa');
+  await pressArrowLeft(page, 2);
+  await type(page, '$$ ');
+  expect(await latexEditorLine.isVisible()).toBeTruthy();
+  expect(await latexElement.isVisible()).toBeTruthy();
+  expect(await latexElement.locator('.placeholder').innerText()).toBe(
+    'Equation'
+  );
+  await type(page, 'E=mc^2');
+  expect(await latexEditorLine.innerText()).toBe('E=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(innerHTML);
+});
+
+test('update inline latex by clicking the node', async ({ page }, testInfo) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  const latexEditorLine = page.locator('latex-editor-menu v-line div');
+  const latexElement = page.locator(
+    'affine-paragraph rich-text affine-latex-node'
+  );
+
+  expect(await latexEditorLine.isVisible()).not.toBeTruthy();
+  await type(page, '$$ ');
+  expect(await latexEditorLine.isVisible()).toBeTruthy();
+  await type(page, 'E=mc^2');
+  await pressEnter(page);
+  expect(await latexEditorLine.isVisible()).not.toBeTruthy();
+  await latexElement.click();
+  expect(await latexEditorLine.isVisible()).toBeTruthy();
+  await pressBackspace(page, 6);
+  await type(page, String.raw`\def\arraystretch{1.5}`);
+  await pressShiftEnter(page);
+  await type(page, String.raw`\begin{array}{c:c:c}`);
+  await pressShiftEnter(page);
+  await type(page, String.raw`a & b & c \\ \\ hline`);
+  await pressShiftEnter(page);
+  await type(page, String.raw`d & e & f \\`);
+  await pressShiftEnter(page);
+  await type(page, String.raw`\hdashline`);
+  await pressShiftEnter(page);
+  await type(page, String.raw`g & h & i`);
+  await pressShiftEnter(page);
+  await type(page, String.raw`\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');
+  expect(await latexEditorLine.isVisible()).not.toBeTruthy();
+});
+
+test('latex editor', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  const latexEditorLine = page.locator('latex-editor-menu v-line div');
+  const latexElement = page.locator(
+    'affine-paragraph rich-text affine-latex-node'
+  );
+
+  expect(await latexEditorLine.isVisible()).not.toBeTruthy();
+  await type(page, '$$ ');
+  expect(await latexEditorLine.isVisible()).toBeTruthy();
+  // test cursor movement works as expected
+  // https://github.com/toeverything/blocksuite/pull/8368
+  await type(page, 'ababababababababababababababababababababababababab');
+  expect(await latexEditorLine.innerText()).toBe(
+    'ababababababababababababababababababababababababab'
+  );
+  // click outside to hide the editor
+  expect(await latexEditorLine.isVisible()).toBeTruthy();
+  await page.mouse.click(130, 130);
+  expect(await latexEditorLine.isVisible()).not.toBeTruthy();
+  await latexElement.click();
+  expect(await latexEditorLine.isVisible()).toBeTruthy();
+  expect(await latexEditorLine.innerText()).toBe(
+    'ababababababababababababababababababababababababab'
+  );
+
+  await pressBackspaceWithShortKey(page, 2);
+  expect(await latexEditorLine.innerText()).toBe(ZERO_WIDTH_FOR_EMPTY_LINE);
+  await undoByKeyboard(page);
+  expect(await latexEditorLine.innerText()).toBe(
+    'ababababababababababababababababababababababababab'
+  );
+  await redoByKeyboard(page);
+  expect(await latexEditorLine.innerText()).toBe(ZERO_WIDTH_FOR_EMPTY_LINE);
+  await undoByKeyboard(page);
+  expect(await latexEditorLine.innerText()).toBe(
+    'ababababababababababababababababababababababababab'
+  );
+
+  // undo-redo
+  await pressArrowLeft(page, 5);
+  await page.keyboard.down('Shift');
+  await pressArrowUp(page);
+  await pressArrowRight(page);
+  await page.keyboard.up('Shift');
+  /**
+   * abababababababababab|ababab
+   * abababababababababa|babab
+   */
+  await cutByKeyboard(page);
+  expect(await latexEditorLine.innerText()).toBe('ababababababababababababab');
+  /**
+   * abababababababababab|babab
+   */
+  await pressArrowRight(page, 2);
+  /**
+   * ababababababababababba|bab
+   */
+  await pasteByKeyboard(page);
+  expect(await latexEditorLine.innerText()).toBe(
+    'ababababababababababababababababababababababababab'
+  );
+
+  await selectAllByKeyboard(page);
+  await pressBackspace(page);
+  expect(await latexEditorLine.innerText()).toBe(ZERO_WIDTH_FOR_EMPTY_LINE);
+
+  // highlight
+  await type(
+    page,
+    String.raw`a+\left(\vcenter{\hbox{$\frac{\frac a b}c$}}\right)`
+  );
+  expect(
+    (await latexEditorLine.locator('latex-editor-unit').innerHTML()).replace(
+      /lit\$\d+\$/g,
+      'lit$test$'
+    )
+  ).toBe(
+    '\x3C!----><span>\x3C!--?lit$test$-->\x3C!----><v-text style="color:#000000;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->a+</span></v-text>\x3C!---->\x3C!----><v-text style="color:#795E26;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->\\left</span></v-text>\x3C!---->\x3C!----><v-text style="color:#000000;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->(</span></v-text>\x3C!---->\x3C!----><v-text style="color:#795E26;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->\\vcenter</span></v-text>\x3C!---->\x3C!----><v-text style="color:#000000;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->{</span></v-text>\x3C!---->\x3C!----><v-text style="color:#795E26;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->\\hbox</span></v-text>\x3C!---->\x3C!----><v-text style="color:#000000;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->{</span></v-text>\x3C!---->\x3C!----><v-text style="color:#267F99;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->$</span></v-text>\x3C!---->\x3C!----><v-text style="color:#267F99;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->\\frac{\\frac a b}c</span></v-text>\x3C!---->\x3C!----><v-text style="color:#267F99;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->$</span></v-text>\x3C!---->\x3C!----><v-text style="color:#000000;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->}}</span></v-text>\x3C!---->\x3C!----><v-text style="color:#795E26;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->\\right</span></v-text>\x3C!---->\x3C!----><v-text style="color:#000000;">\x3C!----><span data-v-text="true" style="word-break:break-word;text-wrap:wrap;white-space-collapse:break-spaces;">\x3C!--?lit$test$-->)</span></v-text>\x3C!----></span>'
+  );
+});
+
+test('add inline latex using slash menu', async ({ page }, testInfo) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  const latexEditorLine = page.locator('latex-editor-menu v-line div');
+  const latexElement = page.locator(
+    'affine-paragraph rich-text affine-latex-node'
+  );
+
+  expect(await latexEditorLine.isVisible()).not.toBeTruthy();
+  expect(await latexElement.isVisible()).not.toBeTruthy();
+  await type(page, '/ieq\n');
+  expect(await latexEditorLine.isVisible()).toBeTruthy();
+  expect(await latexElement.isVisible()).toBeTruthy();
+  expect(await latexElement.locator('.placeholder').innerText()).toBe(
+    'Equation'
+  );
+  await type(page, 'E=mc^2');
+  expect(await latexEditorLine.innerText()).toBe('E=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(innerHTML);
+});
+
+test('should preserve distinct latex values when converting selections in reverse order', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  await type(page, 'a+b test a^2 test');
+
+  await dragBetweenIndices(page, [0, 9], [0, 12]);
+  const { formatBar } = getFormatBar(page);
+  await expect(formatBar).toBeVisible();
+  await formatBar.getByRole('button', { name: 'Inline equation' }).click();
+  await waitNextFrame(page);
+
+  await assertRichTextInlineDeltas(page, [
+    {
+      insert: 'a+b test ',
+    },
+    {
+      insert: ' ',
+      attributes: {
+        latex: 'a^2',
+      },
+    },
+    {
+      insert: ' test',
+    },
+  ]);
+
+  await dragBetweenIndices(page, [0, 0], [0, 3]);
+  await expect(formatBar).toBeVisible();
+  await formatBar.getByRole('button', { name: 'Inline equation' }).click();
+  await waitNextFrame(page);
+
+  await assertRichTextInlineDeltas(page, [
+    {
+      insert: ' ',
+      attributes: {
+        latex: 'a+b',
+      },
+    },
+    {
+      insert: ' test ',
+    },
+    {
+      insert: ' ',
+      attributes: {
+        latex: 'a^2',
+      },
+    },
+    {
+      insert: ' test',
+    },
+  ]);
+});
+
+test('add inline latex using markdown shortcut', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  // toggle by space or enter
+  await type(page, 'aa$$bb$$ cc$$dd$$\n');
+  await assertRichTextInlineDeltas(page, [
+    {
+      insert: 'aa',
+    },
+    {
+      insert: ' ',
+      attributes: {
+        latex: 'bb',
+      },
+    },
+    {
+      insert: 'cc',
+    },
+    {
+      insert: ' ',
+      attributes: {
+        latex: 'dd',
+      },
+    },
+  ]);
+
+  await pressArrowUp(page);
+  await pressArrowRight(page, 3);
+  await pressBackspace(page);
+  await assertRichTextInlineDeltas(page, [
+    {
+      insert: 'aacc',
+    },
+    {
+      insert: ' ',
+      attributes: {
+        latex: 'dd',
+      },
+    },
+  ]);
+});
+
+test('undo-redo when add inline latex using markdown shortcut', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  await type(page, 'aa$$bb$$ ');
+  await assertRichTextInlineDeltas(page, [
+    {
+      insert: 'aa',
+    },
+    {
+      insert: ' ',
+      attributes: {
+        latex: 'bb',
+      },
+    },
+  ]);
+  await assertRichTextInlineRange(page, 0, 3, 0);
+
+  await undoByKeyboard(page);
+  await assertRichTextInlineDeltas(page, [
+    {
+      insert: 'aa$$bb$$ ',
+    },
+  ]);
+  await assertRichTextInlineRange(page, 0, 9, 0);
+
+  await redoByKeyboard(page);
+  await assertRichTextInlineDeltas(page, [
+    {
+      insert: 'aa',
+    },
+    {
+      insert: ' ',
+      attributes: {
+        latex: 'bb',
+      },
+    },
+  ]);
+  await assertRichTextInlineRange(page, 0, 3, 0);
+});
+
+test('auto focus after add inline latex using markdown shortcut', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  await type(page, 'aa$$ bbb\ncc');
+  await assertRichTextInlineDeltas(page, [
+    {
+      insert: 'aa',
+    },
+    {
+      insert: ' ',
+      attributes: {
+        latex: 'bbb',
+      },
+    },
+    {
+      insert: 'cc',
+    },
+  ]);
+
+  await undoByKeyboard(page);
+  await assertRichTextInlineDeltas(page, [
+    {
+      insert: 'aa',
+    },
+    {
+      insert: ' ',
+      attributes: {
+        latex: 'bbb',
+      },
+    },
+  ]);
+  await redoByKeyboard(page);
+  await assertRichTextInlineDeltas(page, [
+    {
+      insert: 'aa',
+    },
+    {
+      insert: ' ',
+      attributes: {
+        latex: 'bbb',
+      },
+    },
+    {
+      insert: 'cc',
+    },
+  ]);
+});