Skip to content

Commit 18db4dc

Browse files
Saul-Mironeautofix-ci[bot]
Saul-Mirone
and
autofix-ci[bot]
authored
test: add e2e for latex feature (#1618)
* test: add e2e for latex feature * chore: fix latex to markdown syntax * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 2c558d6 commit 18db4dc

File tree

9 files changed

+135
-0
lines changed

9 files changed

+135
-0
lines changed

Diff for: ‎e2e/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@codemirror/view": "^6.26.0",
1919
"@milkdown/core": "workspace:*",
2020
"@milkdown/ctx": "workspace:*",
21+
"@milkdown/crepe": "workspace:*",
2122
"@milkdown/plugin-automd": "workspace:*",
2223
"@milkdown/plugin-clipboard": "workspace:*",
2324
"@milkdown/plugin-cursor": "workspace:*",

Diff for: ‎e2e/src/crepe/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Crepe</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script type="module" src="/crepe/main.ts"></script>
10+
</body>
11+
</html>

Diff for: ‎e2e/src/crepe/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const crepe = {
2+
title: 'Crepe',
3+
link: '/crepe/',
4+
}

Diff for: ‎e2e/src/crepe/main.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Crepe } from '@milkdown/crepe'
2+
import '@milkdown/crepe/theme/common/style.css'
3+
import '@milkdown/crepe/theme/frame.css'
4+
5+
import { setup } from '../utils'
6+
7+
setup(async () => {
8+
const crepe = new Crepe({
9+
root: '#app',
10+
})
11+
await crepe.create()
12+
return crepe.editor
13+
})

Diff for: ‎e2e/src/data.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { crepe } from './crepe'
12
import { multiEditor } from './multi-editor'
23
import { automd } from './plugin-automd'
34
import { listener } from './plugin-listener'
@@ -10,4 +11,5 @@ export const cases: { title: string; link: string }[] = [
1011
multiEditor,
1112
listener,
1213
automd,
14+
crepe,
1315
]

Diff for: ‎e2e/tests/crepe/latex.spec.ts

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { expect, test } from '@playwright/test'
2+
import { focusEditor, getMarkdown } from 'tests/misc'
3+
4+
test.beforeEach(async ({ page }) => {
5+
await page.goto('/crepe/')
6+
})
7+
8+
test('latex block preview toggle', async ({ page }) => {
9+
await focusEditor(page)
10+
await page.keyboard.type('$$')
11+
await page.keyboard.press('Enter')
12+
13+
const codeBlock = page.locator('milkdown-code-block')
14+
const codemirror = codeBlock.locator('.codemirror-host')
15+
const preview = codeBlock.locator('.preview')
16+
const codeTools = codeBlock.locator('.tools')
17+
const previewToggleButton = codeTools.locator('.preview-toggle-button')
18+
19+
await expect(codeBlock).toBeVisible()
20+
21+
// when code block is empty, preview toggle button is not visible
22+
await codeTools.hover()
23+
await expect(previewToggleButton).not.toBeVisible()
24+
25+
await page.keyboard.press('ArrowUp')
26+
await page.keyboard.type('E=mc^2')
27+
28+
await expect(preview).toBeVisible()
29+
const markdown = await getMarkdown(page)
30+
expect(markdown.trim()).toEqual('$$\nE=mc^2\n$$')
31+
32+
await codeTools.hover()
33+
await expect(previewToggleButton).toBeVisible()
34+
35+
await expect(codemirror).toBeVisible()
36+
await previewToggleButton.click()
37+
await expect(codemirror).not.toBeVisible()
38+
39+
await previewToggleButton.click()
40+
await expect(codemirror).toBeVisible()
41+
})
42+
43+
test('latex inline', async ({ page }) => {
44+
await focusEditor(page)
45+
await page.keyboard.type('$E=mc^2$')
46+
47+
const inlineLatex = page.locator('span[data-type="math_inline"]')
48+
const inlineLatexInput = page.locator('milkdown-latex-inline-edit')
49+
const inlineLatexInputConfirm = inlineLatexInput.locator('button')
50+
51+
await expect(inlineLatex).toBeVisible()
52+
53+
let markdown = await getMarkdown(page)
54+
expect(markdown.trim()).toEqual('$E=mc^2$')
55+
56+
await page.keyboard.press('ArrowLeft')
57+
await expect(inlineLatexInput).toBeVisible()
58+
59+
await inlineLatexInput.click()
60+
await page.keyboard.press('Backspace')
61+
await page.keyboard.type('3')
62+
await page.keyboard.press('Enter')
63+
64+
markdown = await getMarkdown(page)
65+
expect(markdown.trim()).toEqual('$E=mc^3$')
66+
67+
await inlineLatexInput.click()
68+
await page.keyboard.press('Backspace')
69+
await page.keyboard.type('4')
70+
await inlineLatexInputConfirm.click()
71+
72+
markdown = await getMarkdown(page)
73+
expect(markdown.trim()).toEqual('$E=mc^4$')
74+
})

Diff for: ‎packages/crepe/src/feature/latex/block-latex.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { codeBlockSchema } from '@milkdown/kit/preset/commonmark'
2+
3+
export const blockLatexSchema = codeBlockSchema.extendSchema((prev) => {
4+
return (ctx) => {
5+
const baseSchema = prev(ctx)
6+
return {
7+
...baseSchema,
8+
toMarkdown: {
9+
match: baseSchema.toMarkdown.match,
10+
runner: (state, node) => {
11+
const language = node.attrs.language
12+
if (language.toLowerCase() === 'latex') {
13+
state.addNode(
14+
'math',
15+
undefined,
16+
node.content.firstChild?.text || ''
17+
)
18+
} else {
19+
return baseSchema.toMarkdown.runner(state, node)
20+
}
21+
},
22+
},
23+
}
24+
}
25+
})

Diff for: ‎packages/crepe/src/feature/latex/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { inlineLatexTooltip } from './inline-tooltip/tooltip'
1212
import { LatexInlineTooltip } from './inline-tooltip/view'
1313
import { confirmIcon } from '../../icons'
1414
import { mathBlockInputRule, mathInlineInputRule } from './input-rule'
15+
import { blockLatexSchema } from './block-latex'
1516

1617
export interface LatexConfig {
1718
katexOptions: KatexOptions
@@ -59,6 +60,7 @@ export const defineFeature: DefineFeature<LatexFeatureConfig> = (
5960
.use(inlineLatexTooltip)
6061
.use(mathInlineInputRule)
6162
.use(mathBlockInputRule)
63+
.use(blockLatexSchema)
6264
}
6365

6466
function renderLatex(content: string, options?: KatexOptions) {

Diff for: ‎pnpm-lock.yaml

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)