feat: 🎸 add on api for crepe (#1622)

* feat: 🎸 add `on` api for crepe

✅ Closes: #1620

* test: add e2e

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: Saul-Mirone

Diff for: e2e/shim.d.ts

@@ -4,6 +4,7 @@
 import type { Editor } from '@milkdown/core'
 import type { EditorView } from '@milkdown/prose/view'
 import type { Telemetry } from '@milkdown/ctx'
+import type { Crepe } from '@milkdown/crepe'
 
 declare global {
   var __milkdown__: Editor
@@ -14,13 +15,8 @@ declare global {
 
   var __inspect__: () => Telemetry[]
 
-  namespace Cypress {
-    interface Chainable {
-      paste: (payload: Record<string, unknown>) => Chainable<void>
-      isMarkdown: (markdown: string) => Chainable<void>
-      markdownFixture: (path: string) => Chainable<void>
-    }
-  }
+  var __beforeCrepeCreate__: (crepe: Crepe) => void
+  var __afterCrepeCreated__: (crepe: Crepe) => void
 
   var commands: {
     toggleStrong?: () => void

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

@@ -8,6 +8,12 @@ setup(async () => {
   const crepe = new Crepe({
     root: '#app',
   })
+  if (globalThis.__beforeCrepeCreate__) {
+    globalThis.__beforeCrepeCreate__(crepe)
+  }
   await crepe.create()
+  if (globalThis.__afterCrepeCreated__) {
+    globalThis.__afterCrepeCreated__(crepe)
+  }
   return crepe.editor
 })

Diff for: e2e/tests/crepe/listener.spec.ts

@@ -0,0 +1,52 @@
+import { expect, test } from '@playwright/test'
+import { focusEditor } from 'tests/misc'
+
+test('listen change before editor is created', async ({ page }) => {
+  await page.addInitScript(() => {
+    window.__beforeCrepeCreate__ = (crepe) => {
+      crepe.on((listener) => {
+        listener.markdownUpdated((_, markdown) => {
+          // oxlint-disable-next-line no-console
+          console.log('markdown', markdown)
+        })
+      })
+    }
+  })
+  await page.goto('/crepe/')
+
+  const messagePromise = page.waitForEvent('console', (msg) => {
+    return msg.text().includes('Hello')
+  })
+
+  await focusEditor(page)
+  await page.keyboard.type('Hello')
+
+  const message = await messagePromise
+  const log: string = await message.args()[1]?.jsonValue()
+  expect(log.trim()).toBe('Hello')
+})
+
+test('listen change after editor is created', async ({ page }) => {
+  await page.addInitScript(() => {
+    window.__afterCrepeCreated__ = (crepe) => {
+      crepe.on((listener) => {
+        listener.markdownUpdated((_, markdown) => {
+          // oxlint-disable-next-line no-console
+          console.log('markdown', markdown)
+        })
+      })
+    }
+  })
+  await page.goto('/crepe/')
+
+  const messagePromise = page.waitForEvent('console', (msg) => {
+    return msg.text().includes('World')
+  })
+
+  await focusEditor(page)
+  await page.keyboard.type('World')
+
+  const message = await messagePromise
+  const log: string = await message.args()[1]?.jsonValue()
+  expect(log.trim()).toBe('World')
+})

Diff for: packages/crepe/src/core/crepe.ts

@@ -1,6 +1,7 @@
 import type { DefaultValue } from '@milkdown/kit/core'
 import {
   Editor,
+  EditorStatus,
   defaultValueCtx,
   editorViewOptionsCtx,
   rootCtx,
@@ -17,6 +18,8 @@ import { trailing } from '@milkdown/kit/plugin/trailing'
 import type { CrepeFeatureConfig } from '../feature'
 import { CrepeFeature, defaultFeatures, loadFeature } from '../feature'
 import { configureFeatures } from './slice'
+import type { ListenerManager } from '@milkdown/kit/plugin/listener'
+import { listener, listenerCtx } from '@milkdown/kit/plugin/listener'
 
 export interface CrepeConfig {
   features?: Partial<Record<CrepeFeature, boolean>>
@@ -62,6 +65,7 @@ export class Crepe {
         }))
       })
       .use(commonmark)
+      .use(listener)
       .use(history)
       .use(indent)
       .use(trailing)
@@ -102,4 +106,19 @@ export class Crepe {
   getMarkdown() {
     return this.#editor.action(getMarkdown())
   }
+
+  on(fn: (api: ListenerManager) => void) {
+    if (this.#editor.status !== EditorStatus.Created) {
+      this.#editor.config((ctx) => {
+        const listener = ctx.get(listenerCtx)
+        fn(listener)
+      })
+      return this
+    }
+    this.#editor.action((ctx) => {
+      const listener = ctx.get(listenerCtx)
+      fn(listener)
+    })
+    return this
+  }
 }

Diff for: storybook/stories/crepe/setup.ts

@@ -2,8 +2,6 @@ import { Crepe } from '@milkdown/crepe'
 import all from '@milkdown/crepe/theme/common/style.css?inline'
 import localStyle from './style.css?inline'
 import type { Extension } from '@codemirror/state'
-import { listener, listenerCtx } from '@milkdown/kit/plugin/listener'
-import { codeToHtml } from 'shiki'
 import { injectMarkdown, wrapInShadow } from '../utils/shadow'
 
 export interface Args {
@@ -109,16 +107,12 @@ export function setup({ args, style, theme }: setupConfig) {
     injectMarkdown(args.defaultValue, markdownContainer)
   }
 
-  crepe.editor
-    .config((ctx) => {
-      const listenerAPI = ctx.get(listenerCtx)
-      listenerAPI.markdownUpdated((_, markdown) => {
+  crepe
+    .on((listener) => {
+      listener.markdownUpdated((_, markdown) => {
         injectMarkdown(markdown, markdownContainer)
       })
     })
-    .use(listener)
-
-  crepe
     .setReadonly(args.readonly)
     .create()
     .then(() => {