@prosekit/extensions 0.12.2 → 0.14.0

package/src/autocomplete/autocomplete.spec.ts

@@ -1,35 +1,28 @@
-import {
-  canUseRegexLookbehind,
-  union,
-} from '@prosekit/core'
-import {
-  describe,
-  expect,
-  it,
-  vi,
-} from 'vitest'
-
-import {
-  defineTestExtension,
-  setupTestFromExtension,
-} from '../testing'
-import {
-  inputText,
-  pressKey,
-} from '../testing/keyboard'
+import { canUseRegexLookbehind, union } from '@prosekit/core'
+import { describe, expect, it, vi } from 'vitest'
+import { keyboard } from 'vitest-browser-commands/playwright'
+
+import { defineTestExtension, setupTestFromExtension } from '../testing'
+import { inputText } from '../testing/keyboard'
 
 import { defineAutocomplete } from './autocomplete'
-import {
-  AutocompleteRule,
-  type MatchHandler,
-  type MatchHandlerOptions,
-} from './autocomplete-rule'
+import { AutocompleteRule, type MatchHandler, type MatchHandlerOptions } from './autocomplete-rule'
 
 function setupSlashMenu() {
-  const regex = canUseRegexLookbehind() ? /(?<!\S)\/(|\S.*)$/u : /\/(|\S.*)$/u
+  const regex = canUseRegexLookbehind() ? /(?<!\S)\/(\S.*)?$/u : /\/(\S.*)?$/u
+
+  let matching: MatchHandlerOptions | null = null
 
-  const onEnter = vi.fn<MatchHandler>()
-  const onLeave = vi.fn<VoidFunction>()
+  const onEnter = vi.fn<MatchHandler>((options) => {
+    matching = options
+  })
+  const onLeave = vi.fn<VoidFunction>(() => {
+    if (matching) {
+      matching = null
+    } else {
+      throw new Error('onLeave should not be called when there is no matching')
+    }
+  })
 
   const rule = new AutocompleteRule({ regex, onEnter, onLeave })
   const extension = union(defineTestExtension(), defineAutocomplete(rule))
@@ -38,16 +31,34 @@ function setupSlashMenu() {
   const doc = n.doc(n.paragraph('<a>'))
   editor.set(doc)
 
-  const getOnEnterOptions = (): MatchHandlerOptions => {
-    const parameters = onEnter.mock.calls.at(-1)
-    const options = parameters?.[0]
-    if (!options) {
-      throw new Error('No onEnter options found')
+  const isMatching = (): boolean => {
+    return !!matching
+  }
+
+  const getMatching = (): MatchHandlerOptions => {
+    if (!matching) {
+      throw new Error('No matching found')
     }
-    return options
+    return matching
   }
 
-  return { editor, n, m, onEnter, onLeave, getOnEnterOptions }
+  const getMatchingText = (): string => {
+    return getMatching().match[0]
+  }
+
+  const showSelection = (): string => {
+    const { selection, doc } = editor.state
+    const textBackward = doc.textBetween(0, selection.from, '\n')
+    const textSelected = doc.textBetween(selection.from, selection.to, '\n')
+    const textForward = doc.textBetween(selection.to, doc.content.size, '\n')
+    if (selection.empty) {
+      return textBackward + '<cursor>' + textForward
+    } else {
+      return textBackward + '<selection>' + textSelected + '<selection>' + textForward
+    }
+  }
+
+  return { editor, n, m, onEnter, onLeave, getMatching, isMatching, getMatchingText, showSelection }
 }
 
 describe('defineAutocomplete', () => {
@@ -82,27 +93,27 @@ describe('defineAutocomplete', () => {
     expect(onLeave).toHaveBeenCalledTimes(0)
 
     // Slash menu should not be triggered when typing "/ "
-    await pressKey('Space')
+    await keyboard.press('Space')
     expect(onEnter).toHaveBeenCalledTimes(1)
     expect(onLeave).toHaveBeenCalledTimes(1)
   })
 
   it('can delete the matched text', async () => {
-    const { editor, onEnter, getOnEnterOptions } = setupSlashMenu()
+    const { editor, onEnter, getMatching } = setupSlashMenu()
 
     expect(onEnter).not.toHaveBeenCalled()
 
     await inputText('/')
     expect(onEnter).toHaveBeenCalledTimes(1)
 
-    const options = getOnEnterOptions()
+    const options = getMatching()
     expect(editor.state.doc.textContent).toBe('/')
     options.deleteMatch()
     expect(editor.state.doc.textContent).toBe('')
   })
 
-  it('can ignore the match', async () => {
-    const { editor, onEnter, onLeave, getOnEnterOptions } = setupSlashMenu()
+  it('can ignore the match by calling `ignoreMatch`', async () => {
+    const { editor, onEnter, onLeave, getMatching } = setupSlashMenu()
 
     expect(onEnter).not.toHaveBeenCalled()
 
@@ -118,7 +129,7 @@ describe('defineAutocomplete', () => {
     expect(editor.state.doc.textContent).toBe('/a')
 
     // Call `ignoreMatch` to dismiss the match
-    const options = getOnEnterOptions()
+    const options = getMatching()
     options.ignoreMatch()
     expect(onEnter).toHaveBeenCalledTimes(2)
     expect(onLeave).toHaveBeenCalledTimes(1)
@@ -129,4 +140,197 @@ describe('defineAutocomplete', () => {
     expect(onLeave).toHaveBeenCalledTimes(1)
     expect(editor.state.doc.textContent).toBe('/aa')
   })
+
+  it('can dismiss the match by deleting the matched text', async () => {
+    const { isMatching, showSelection } = setupSlashMenu()
+
+    expect(showSelection()).toMatchInlineSnapshot(`"<cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await inputText('/')
+    expect(showSelection()).toMatchInlineSnapshot(`"/<cursor>"`)
+    expect(isMatching()).toBe(true)
+
+    await keyboard.press('Backspace')
+    expect(showSelection()).toMatchInlineSnapshot(`"<cursor>"`)
+    expect(isMatching()).toBe(false)
+  })
+
+  it('can recover the match after dismissing from Backspace', async () => {
+    const { isMatching, showSelection } = setupSlashMenu()
+
+    expect(showSelection()).toMatchInlineSnapshot(`"<cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await inputText('/')
+    expect(showSelection()).toMatchInlineSnapshot(`"/<cursor>"`)
+    expect(isMatching()).toBe(true)
+
+    await keyboard.press('Backspace')
+    expect(showSelection()).toMatchInlineSnapshot(`"<cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await inputText('/')
+    expect(showSelection()).toMatchInlineSnapshot(`"/<cursor>"`)
+    expect(isMatching()).toBe(true)
+  })
+
+  it('can recover the match after dismissing from onLeave', async () => {
+    const { isMatching, showSelection, getMatching } = setupSlashMenu()
+
+    expect(showSelection()).toMatchInlineSnapshot(`"<cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await inputText('/')
+    expect(showSelection()).toMatchInlineSnapshot(`"/<cursor>"`)
+    expect(isMatching()).toBe(true)
+
+    const matching = getMatching()
+    expect(matching).toBeTruthy()
+    matching?.ignoreMatch()
+    expect(showSelection()).toMatchInlineSnapshot(`"/<cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await keyboard.press('Backspace')
+    expect(showSelection()).toMatchInlineSnapshot(`"<cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await inputText('/')
+    expect(showSelection()).toMatchInlineSnapshot(`"/<cursor>"`)
+    expect(isMatching()).toBe(true)
+  })
+
+  it('can start a new match after dismissing the previous match', async () => {
+    const { isMatching, showSelection, getMatching, getMatchingText } = setupSlashMenu()
+
+    expect(showSelection()).toMatchInlineSnapshot(`"<cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await inputText('a /b')
+    expect(showSelection()).toMatchInlineSnapshot(`"a /b<cursor>"`)
+    expect(isMatching()).toBe(true)
+
+    getMatching().ignoreMatch()
+    expect(showSelection()).toMatchInlineSnapshot(`"a /b<cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await keyboard.press('Space')
+    expect(showSelection()).toMatchInlineSnapshot(`"a /b <cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await inputText('/')
+    expect(showSelection()).toMatchInlineSnapshot(`"a /b /<cursor>"`)
+    expect(isMatching()).toBe(true)
+    expect(getMatchingText()).toBe('/')
+
+    await inputText('c')
+    expect(showSelection()).toMatchInlineSnapshot(`"a /b /c<cursor>"`)
+    expect(isMatching()).toBe(true)
+    expect(getMatchingText()).toBe('/c')
+  })
+
+  it('can dismiss the match by creating a new paragraph', async () => {
+    const { isMatching, showSelection } = setupSlashMenu()
+
+    expect(showSelection()).toMatchInlineSnapshot(`"<cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await inputText('/')
+    expect(showSelection()).toMatchInlineSnapshot(`"/<cursor>"`)
+    expect(isMatching()).toBe(true)
+
+    await keyboard.press('Enter')
+    expect(showSelection()).toMatchInlineSnapshot(`
+      "/
+      <cursor>"
+    `)
+    expect(isMatching()).toBe(false)
+  })
+
+  it('can keep the match when selecting the text', async () => {
+    const { isMatching, showSelection } = setupSlashMenu()
+
+    expect(showSelection()).toMatchInlineSnapshot(`"<cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await inputText('/page')
+    expect(showSelection()).toMatchInlineSnapshot(`"/page<cursor>"`)
+    expect(isMatching()).toBe(true)
+
+    await keyboard.down('Shift')
+    await keyboard.press('ArrowLeft')
+    await keyboard.press('ArrowLeft')
+    await keyboard.up('Shift')
+    expect(showSelection()).toMatchInlineSnapshot(`"/pa<selection>ge<selection>"`)
+    expect(isMatching()).toBe(true)
+  })
+
+  it('can ignore the match by moving the text cursor outside of the match', async () => {
+    const { onEnter, isMatching, getMatchingText, showSelection } = setupSlashMenu()
+
+    expect(onEnter).not.toHaveBeenCalled()
+
+    expect(showSelection()).toMatchInlineSnapshot(`"<cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await inputText('a ')
+    expect(showSelection()).toMatchInlineSnapshot(`"a <cursor>"`)
+    expect(isMatching()).toBe(false)
+
+    await inputText('/')
+    expect(showSelection()).toMatchInlineSnapshot(`"a /<cursor>"`)
+    expect(isMatching()).toBe(true)
+    expect(getMatchingText()).toBe('/')
+
+    await inputText('b')
+    expect(showSelection()).toMatchInlineSnapshot(`"a /b<cursor>"`)
+    expect(isMatching()).toBe(true)
+    expect(getMatchingText()).toBe('/b')
+
+    await keyboard.press('ArrowLeft')
+    expect(showSelection()).toMatchInlineSnapshot(`"a /<cursor>b"`)
+    expect(isMatching()).toBe(true)
+    expect(getMatchingText()).toBe('/b')
+
+    await keyboard.press('ArrowLeft')
+    expect(showSelection()).toMatchInlineSnapshot(`"a <cursor>/b"`)
+    expect(isMatching()).toBe(true)
+    expect(getMatchingText()).toBe('/b')
+
+    await keyboard.press('ArrowLeft')
+    expect(showSelection()).toMatchInlineSnapshot(`"a<cursor> /b"`)
+    expect(isMatching()).toBe(false)
+
+    await keyboard.press('ArrowRight')
+    expect(showSelection()).toMatchInlineSnapshot(`"a <cursor>/b"`)
+    expect(isMatching()).toBe(false)
+
+    await keyboard.press('ArrowRight')
+    expect(showSelection()).toMatchInlineSnapshot(`"a /<cursor>b"`)
+    expect(isMatching()).toBe(false)
+
+    await keyboard.press('Backspace')
+    await keyboard.press('Backspace')
+    expect(showSelection()).toMatchInlineSnapshot(`"a<cursor>b"`)
+    expect(isMatching()).toBe(false)
+
+    await inputText(' /')
+    expect(showSelection()).toMatchInlineSnapshot(`"a /<cursor>b"`)
+    expect(isMatching()).toBe(true)
+    expect(getMatchingText()).toBe('/')
+
+    await inputText('c')
+    expect(showSelection()).toMatchInlineSnapshot(`"a /c<cursor>b"`)
+    expect(isMatching()).toBe(true)
+    expect(getMatchingText()).toBe('/c')
+
+    await inputText('d')
+    expect(showSelection()).toMatchInlineSnapshot(`"a /cd<cursor>b"`)
+    expect(isMatching()).toBe(true)
+    expect(getMatchingText()).toBe('/cd')
+
+    await keyboard.press('ArrowRight')
+    expect(showSelection()).toMatchInlineSnapshot(`"a /cdb<cursor>"`)
+    expect(isMatching()).toBe(false)
+  })
 })

package/src/autocomplete/autocomplete.ts

@@ -1,14 +1,16 @@
-import {
-  defineFacet,
-  defineFacetPayload,
-  pluginFacet,
-  type Extension,
-  type PluginPayload,
-} from '@prosekit/core'
+import { defineFacet, defineFacetPayload, pluginFacet, type Extension, type PluginPayload } from '@prosekit/core'
 
 import { createAutocompletePlugin } from './autocomplete-plugin'
 import type { AutocompleteRule } from './autocomplete-rule'
 
+/**
+ * Defines an autocomplete extension that executes logic when the text before
+ * the cursor matches the given regular expression.
+ *
+ * When a match is found, an inline decoration is applied to the matched text
+ * with the class `prosekit-autocomplete-match` and a `data-autocomplete-match-text`
+ * attribute containing the full matched string.
+ */
 export function defineAutocomplete(rule: AutocompleteRule): Extension {
   return defineFacetPayload(autocompleteFacet, [rule])
 }

package/src/background-color/background-color-commands.spec.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+
+import { setupTest } from '../testing'
+
+describe('addBackgroundColor', () => {
+  it('can add background color to text', () => {
+    const { editor, n, m } = setupTest()
+
+    const doc1 = n.doc(
+      n.p('Hello <a>world<b>'),
+    )
+    const doc2 = n.doc(
+      n.p('Hello ', m.backgroundColor({ color: 'red' }, 'world')),
+    )
+
+    editor.set(doc1)
+    editor.commands.addBackgroundColor({ color: 'red' })
+    expect(editor.getDocJSON()).toEqual(doc2.toJSON())
+  })
+
+  it('can override existing background color', () => {
+    const { editor, n, m } = setupTest()
+
+    const doc1 = n.doc(
+      n.p(
+        'A',
+        m.backgroundColor({ color: 'red' }, 'B<a>C'),
+        m.backgroundColor({ color: 'red' }, 'DE'),
+        'F<b>G',
+      ),
+    )
+    const doc2 = n.doc(
+      n.p(
+        'A',
+        m.backgroundColor({ color: 'red' }, 'B'),
+        m.backgroundColor({ color: 'blue' }, 'CDEF'),
+        'G',
+      ),
+    )
+
+    editor.set(doc1)
+    editor.commands.addBackgroundColor({ color: 'blue' })
+    expect(editor.getDocJSON()).toEqual(doc2.toJSON())
+  })
+})
+
+describe('removeBackgroundColor', () => {
+  it('can remove background color from text', () => {
+    const { editor, n, m } = setupTest()
+
+    const doc1 = n.doc(
+      n.p(
+        'A',
+        m.backgroundColor({ color: 'red' }, 'B<a>C'),
+        m.backgroundColor({ color: 'blue' }, 'DE'),
+        'F<b>G',
+      ),
+    )
+    const doc2 = n.doc(
+      n.p(
+        'A',
+        m.backgroundColor({ color: 'red' }, 'B'),
+        'CDEFG',
+      ),
+    )
+
+    editor.set(doc1)
+    editor.commands.removeBackgroundColor()
+    expect(editor.getDocJSON()).toEqual(doc2.toJSON())
+  })
+})

package/src/background-color/background-color-commands.ts

@@ -0,0 +1,35 @@
+import { addMark, defineCommands, removeMark, type Extension } from '@prosekit/core'
+import type { Command } from '@prosekit/pm/state'
+
+import type { BackgroundColorAttrs } from './background-color-spec'
+
+/**
+ * @internal
+ */
+export function addBackgroundColor(attrs: BackgroundColorAttrs): Command {
+  return addMark({ type: 'backgroundColor', attrs })
+}
+
+/**
+ * @internal
+ */
+export function removeBackgroundColor(): Command {
+  return removeMark({ type: 'backgroundColor' })
+}
+
+/**
+ * @internal
+ */
+export type BackgroundColorCommandsExtension = Extension<{
+  Commands: {
+    addBackgroundColor: [attrs: BackgroundColorAttrs]
+    removeBackgroundColor: []
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineBackgroundColorCommands(): BackgroundColorCommandsExtension {
+  return defineCommands({ addBackgroundColor, removeBackgroundColor })
+}