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>
Milkdown · Jan 14, 2025 · 18db4dc · 18db4dc
1 parent 2c558d6
commit 18db4dc
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 0 deletions.
diff --git a/e2e/package.json b/e2e/package.json
@@ -18,6 +18,7 @@
     "@codemirror/view": "^6.26.0",
     "@milkdown/core": "workspace:*",
     "@milkdown/ctx": "workspace:*",
+    "@milkdown/crepe": "workspace:*",
     "@milkdown/plugin-automd": "workspace:*",
     "@milkdown/plugin-clipboard": "workspace:*",
     "@milkdown/plugin-cursor": "workspace:*",

diff --git a/e2e/src/crepe/index.html b/e2e/src/crepe/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Crepe</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/crepe/main.ts"></script>
+  </body>
+</html>
diff --git a/e2e/src/crepe/index.ts b/e2e/src/crepe/index.ts
@@ -0,0 +1,4 @@
+export const crepe = {
+  title: 'Crepe',
+  link: '/crepe/',
+}
diff --git a/e2e/src/crepe/main.ts b/e2e/src/crepe/main.ts
@@ -0,0 +1,13 @@
+import { Crepe } from '@milkdown/crepe'
+import '@milkdown/crepe/theme/common/style.css'
+import '@milkdown/crepe/theme/frame.css'
+
+import { setup } from '../utils'
+
+setup(async () => {
+  const crepe = new Crepe({
+    root: '#app',
+  })
+  await crepe.create()
+  return crepe.editor
+})
diff --git a/e2e/src/data.ts b/e2e/src/data.ts
@@ -1,3 +1,4 @@
+import { crepe } from './crepe'
 import { multiEditor } from './multi-editor'
 import { automd } from './plugin-automd'
 import { listener } from './plugin-listener'
@@ -10,4 +11,5 @@ export const cases: { title: string; link: string }[] = [
   multiEditor,
   listener,
   automd,
+  crepe,
 ]
diff --git a/e2e/tests/crepe/latex.spec.ts b/e2e/tests/crepe/latex.spec.ts
@@ -0,0 +1,74 @@
+import { expect, test } from '@playwright/test'
+import { focusEditor, getMarkdown } from 'tests/misc'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/crepe/')
+})
+
+test('latex block preview toggle', async ({ page }) => {
+  await focusEditor(page)
+  await page.keyboard.type('$$')
+  await page.keyboard.press('Enter')
+
+  const codeBlock = page.locator('milkdown-code-block')
+  const codemirror = codeBlock.locator('.codemirror-host')
+  const preview = codeBlock.locator('.preview')
+  const codeTools = codeBlock.locator('.tools')
+  const previewToggleButton = codeTools.locator('.preview-toggle-button')
+
+  await expect(codeBlock).toBeVisible()
+
+  // when code block is empty, preview toggle button is not visible
+  await codeTools.hover()
+  await expect(previewToggleButton).not.toBeVisible()
+
+  await page.keyboard.press('ArrowUp')
+  await page.keyboard.type('E=mc^2')
+
+  await expect(preview).toBeVisible()
+  const markdown = await getMarkdown(page)
+  expect(markdown.trim()).toEqual('$$\nE=mc^2\n$$')
+
+  await codeTools.hover()
+  await expect(previewToggleButton).toBeVisible()
+
+  await expect(codemirror).toBeVisible()
+  await previewToggleButton.click()
+  await expect(codemirror).not.toBeVisible()
+
+  await previewToggleButton.click()
+  await expect(codemirror).toBeVisible()
+})
+
+test('latex inline', async ({ page }) => {
+  await focusEditor(page)
+  await page.keyboard.type('$E=mc^2$')
+
+  const inlineLatex = page.locator('span[data-type="math_inline"]')
+  const inlineLatexInput = page.locator('milkdown-latex-inline-edit')
+  const inlineLatexInputConfirm = inlineLatexInput.locator('button')
+
+  await expect(inlineLatex).toBeVisible()
+
+  let markdown = await getMarkdown(page)
+  expect(markdown.trim()).toEqual('$E=mc^2$')
+
+  await page.keyboard.press('ArrowLeft')
+  await expect(inlineLatexInput).toBeVisible()
+
+  await inlineLatexInput.click()
+  await page.keyboard.press('Backspace')
+  await page.keyboard.type('3')
+  await page.keyboard.press('Enter')
+
+  markdown = await getMarkdown(page)
+  expect(markdown.trim()).toEqual('$E=mc^3$')
+
+  await inlineLatexInput.click()
+  await page.keyboard.press('Backspace')
+  await page.keyboard.type('4')
+  await inlineLatexInputConfirm.click()
+
+  markdown = await getMarkdown(page)
+  expect(markdown.trim()).toEqual('$E=mc^4$')
+})
diff --git a/packages/crepe/src/feature/latex/block-latex.ts b/packages/crepe/src/feature/latex/block-latex.ts
@@ -0,0 +1,25 @@
+import { codeBlockSchema } from '@milkdown/kit/preset/commonmark'
+
+export const blockLatexSchema = codeBlockSchema.extendSchema((prev) => {
+  return (ctx) => {
+    const baseSchema = prev(ctx)
+    return {
+      ...baseSchema,
+      toMarkdown: {
+        match: baseSchema.toMarkdown.match,
+        runner: (state, node) => {
+          const language = node.attrs.language
+          if (language.toLowerCase() === 'latex') {
+            state.addNode(
+              'math',
+              undefined,
+              node.content.firstChild?.text || ''
+            )
+          } else {
+            return baseSchema.toMarkdown.runner(state, node)
+          }
+        },
+      },
+    }
+  }
+})
diff --git a/packages/crepe/src/feature/latex/index.ts b/packages/crepe/src/feature/latex/index.ts
@@ -12,6 +12,7 @@ import { inlineLatexTooltip } from './inline-tooltip/tooltip'
 import { LatexInlineTooltip } from './inline-tooltip/view'
 import { confirmIcon } from '../../icons'
 import { mathBlockInputRule, mathInlineInputRule } from './input-rule'
+import { blockLatexSchema } from './block-latex'
 
 export interface LatexConfig {
   katexOptions: KatexOptions
@@ -59,6 +60,7 @@ export const defineFeature: DefineFeature<LatexFeatureConfig> = (
     .use(inlineLatexTooltip)
     .use(mathInlineInputRule)
     .use(mathBlockInputRule)
+    .use(blockLatexSchema)
 }
 
 function renderLatex(content: string, options?: KatexOptions) {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml