@prosekit/extensions 0.12.2 → 0.13.0

package/src/autocomplete/autocomplete.spec.ts

@@ -8,15 +8,13 @@ import {
   it,
   vi,
 } from 'vitest'
+import { keyboard } from 'vitest-browser-commands/playwright'
 
 import {
   defineTestExtension,
   setupTestFromExtension,
 } from '../testing'
-import {
-  inputText,
-  pressKey,
-} from '../testing/keyboard'
+import { inputText } from '../testing/keyboard'
 
 import { defineAutocomplete } from './autocomplete'
 import {
@@ -26,10 +24,20 @@ import {
 } 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 +46,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 +108,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 +144,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 +155,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

@@ -9,6 +9,14 @@ import {
 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/blockquote/blockquote-keymap.spec.ts

@@ -3,9 +3,9 @@ import {
   expect,
   it,
 } from 'vitest'
+import { keyboard } from 'vitest-browser-commands/playwright'
 
 import { setupTest } from '../testing'
-import { pressKey } from '../testing/keyboard'
 
 describe('blockquote keymap', () => {
   it('should wrap paragraph into blockquote with shortcut', async () => {
@@ -14,7 +14,7 @@ describe('blockquote keymap', () => {
     const doc1 = n.doc(n.p('hel<a>lo'))
     editor.set(doc1)
 
-    await pressKey('mod-shift-b')
+    await keyboard.press('ControlOrMeta+Shift+B')
 
     const doc2 = n.doc(n.blockquote(n.p('hello')))
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
@@ -25,7 +25,7 @@ describe('blockquote keymap', () => {
     const doc1 = n.doc(n.blockquote(n.p('hello')))
     editor.set(doc1)
 
-    await pressKey('mod-shift-b')
+    await keyboard.press('ControlOrMeta+Shift+B')
 
     const doc2 = n.doc(n.p('hello'))
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
@@ -37,7 +37,7 @@ describe('blockquote keymap', () => {
 
     editor.set(doc1)
 
-    await pressKey('Backspace')
+    await keyboard.press('Backspace')
 
     const doc2 = n.doc(n.p('hello'))
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())

package/src/blockquote/blockquote-keymap.ts

@@ -25,7 +25,7 @@ function backspaceUnsetBlockquote(): Command {
  */
 export function defineBlockquoteKeymap(): PlainExtension {
   return defineKeymap({
-    'mod-shift-b': toggleBlockquoteKeybinding(),
+    'Mod-B': toggleBlockquoteKeybinding(),
     'Backspace': backspaceUnsetBlockquote(),
   })
 }

package/src/commit/index.ts

@@ -250,7 +250,7 @@ function defineCommitDecoration(commit: Commit): PlainExtension {
  */
 function defineCommitViewer(commit: Commit): PlainExtension {
   return union(
-    defineDefaultState({ defaultDoc: commit.doc }),
+    defineDefaultState({ defaultContent: commit.doc }),
     defineCommitDecoration(commit),
   )
 }

package/src/hard-break/hard-break-keymap.spec.ts

@@ -3,12 +3,10 @@ import {
   expect,
   it,
 } from 'vitest'
+import { keyboard } from 'vitest-browser-commands/playwright'
 
 import { setupTest } from '../testing'
-import {
-  inputText,
-  pressKey,
-} from '../testing/keyboard'
+import { inputText } from '../testing/keyboard'
 
 describe('defineHardBreakKeymap', () => {
   it('should insert hard break', async () => {
@@ -19,12 +17,12 @@ describe('defineHardBreakKeymap', () => {
 
     editor.set(doc1)
     expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
-    await pressKey('Shift-Enter')
+    await keyboard.press('Shift+Enter')
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
 
     editor.set(doc1)
     expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
-    await pressKey('Mod-Enter')
+    await keyboard.press('ControlOrMeta+Enter')
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
   })
 
@@ -37,7 +35,7 @@ describe('defineHardBreakKeymap', () => {
 
     editor.set(doc1)
     expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
-    await pressKey('Shift-Enter')
+    await keyboard.press('Shift+Enter')
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
     await inputText('baz')
     expect(editor.state.doc.toJSON()).toEqual(doc3.toJSON())

package/src/heading/heading-keymap.spec.ts

@@ -3,9 +3,9 @@ import {
   expect,
   it,
 } from 'vitest'
+import { keyboard } from 'vitest-browser-commands/playwright'
 
 import { setupTest } from '../testing'
-import { pressKey } from '../testing/keyboard'
 
 describe('defineHeadingKeymap', () => {
   it('should toggle heading', async () => {
@@ -17,13 +17,13 @@ describe('defineHeadingKeymap', () => {
 
     editor.set(doc)
     expect(editor.state.doc.toJSON()).toEqual(doc.toJSON())
-    await pressKey('mod-alt-1')
+    await keyboard.press('ControlOrMeta+Alt+1')
     expect(editor.state.doc.toJSON()).toEqual(docH1.toJSON())
-    await pressKey('mod-alt-1')
+    await keyboard.press('ControlOrMeta+Alt+1')
     expect(editor.state.doc.toJSON()).toEqual(doc.toJSON())
-    await pressKey('mod-alt-3')
+    await keyboard.press('ControlOrMeta+Alt+3')
     expect(editor.state.doc.toJSON()).toEqual(docH3.toJSON())
-    await pressKey('mod-alt-1')
+    await keyboard.press('ControlOrMeta+Alt+1')
     expect(editor.state.doc.toJSON()).toEqual(docH1.toJSON())
   })
 
@@ -35,7 +35,7 @@ describe('defineHeadingKeymap', () => {
 
     editor.set(doc1)
     expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
-    await pressKey('Backspace')
+    await keyboard.press('Backspace')
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
   })
 
@@ -47,7 +47,7 @@ describe('defineHeadingKeymap', () => {
 
     editor.set(doc1)
     expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
-    await pressKey('Backspace')
+    await keyboard.press('Backspace')
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
   })
 })

package/src/heading/heading-keymap.ts

@@ -29,12 +29,12 @@ const backspaceUnsetHeading: Command = (state, dispatch, view) => {
  */
 export function defineHeadingKeymap(): PlainExtension {
   return defineKeymap({
-    'mod-alt-1': toggleHeadingKeybinding(1),
-    'mod-alt-2': toggleHeadingKeybinding(2),
-    'mod-alt-3': toggleHeadingKeybinding(3),
-    'mod-alt-4': toggleHeadingKeybinding(4),
-    'mod-alt-5': toggleHeadingKeybinding(5),
-    'mod-alt-6': toggleHeadingKeybinding(6),
+    'Mod-Alt-1': toggleHeadingKeybinding(1),
+    'Mod-Alt-2': toggleHeadingKeybinding(2),
+    'Mod-Alt-3': toggleHeadingKeybinding(3),
+    'Mod-Alt-4': toggleHeadingKeybinding(4),
+    'Mod-Alt-5': toggleHeadingKeybinding(5),
+    'Mod-Alt-6': toggleHeadingKeybinding(6),
     'Backspace': backspaceUnsetHeading,
   })
 }

package/src/link/index.spec.ts

@@ -3,9 +3,10 @@ import {
   expect,
   it,
 } from 'vitest'
-import { userEvent } from 'vitest/browser'
+import { keyboard } from 'vitest-browser-commands/playwright'
 
 import { setupTest } from '../testing'
+import { inputText } from '../testing/keyboard'
 
 describe('defineLinkCommands', () => {
   const { editor, n, m } = setupTest()
@@ -46,11 +47,11 @@ describe('defineLinkCommands', () => {
 describe('defineLinkInputRule', () => {
   it('should insert a link after pressing Space', async () => {
     const { editor } = setupTest()
-    await userEvent.keyboard('https://example.com')
+    await inputText('https://example.com')
     expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
       `"doc(paragraph("https://example.com"))"`,
     )
-    await userEvent.keyboard(' ')
+    await inputText(' ')
     expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
       `"doc(paragraph(link("https://example.com"), " "))"`,
     )
@@ -58,15 +59,15 @@ describe('defineLinkInputRule', () => {
 
   it('should handle a link before a period', async () => {
     const { editor } = setupTest()
-    await userEvent.keyboard('https://example.com')
+    await inputText('https://example.com')
     expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
       `"doc(paragraph("https://example.com"))"`,
     )
-    await userEvent.keyboard('.')
+    await inputText('.')
     expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
       `"doc(paragraph("https://example.com."))"`,
     )
-    await userEvent.keyboard(' ')
+    await inputText(' ')
     expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
       `"doc(paragraph(link("https://example.com"), ". "))"`,
     )
@@ -76,11 +77,11 @@ describe('defineLinkInputRule', () => {
 describe('defineLinkEnterRule', () => {
   it('should insert a link after pressing Enter', async () => {
     const { editor } = setupTest()
-    await userEvent.keyboard('https://example.com')
+    await inputText('https://example.com')
     expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
       `"doc(paragraph("https://example.com"))"`,
     )
-    await userEvent.keyboard('{Enter}')
+    await keyboard.press('Enter')
     expect(editor.view.state.doc.toString()).toMatchInlineSnapshot(
       `"doc(paragraph(link("https://example.com")), paragraph)"`,
     )

package/src/list/list-keymap.spec.ts

@@ -3,9 +3,9 @@ import {
   expect,
   it,
 } from 'vitest'
+import { keyboard } from 'vitest-browser-commands/playwright'
 
 import { setupTest } from '../testing'
-import { pressKey } from '../testing/keyboard'
 
 describe('keymap', () => {
   const { editor, n } = setupTest()
@@ -26,14 +26,14 @@ describe('keymap', () => {
     )
     editor.set(doc1)
 
-    await pressKey('mod-]')
+    await keyboard.press('ControlOrMeta+]')
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
-    await pressKey('mod-[')
+    await keyboard.press('ControlOrMeta+[')
     expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
 
-    await pressKey('Tab')
+    await keyboard.press('Tab')
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
-    await pressKey('Shift-Tab')
+    await keyboard.press('Shift+Tab')
     expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
   })
 })

package/src/list/style.css

@@ -14,17 +14,17 @@
 
   & > .list-marker {
     position: absolute;
-    left: 0;
     width: 1.5em;
     width: 1lh;
     height: 1.5em;
     height: 1lh;
+    inset-inline-start: 0;
     text-align: center;
   }
 
   & > .list-content {
-    margin-left: 1.5em;
-    margin-left: 1lh;
+    margin-inline-start: 1.5em;
+    margin-inline-start: 1lh;
   }
 
   &[data-list-kind="bullet"] > .list-marker,
@@ -64,8 +64,8 @@
 
     &::before {
       position: absolute;
-      right: calc(100% - 1.5em);
-      right: calc(100% - 1lh);
+      inset-inline-end: calc(100% - 1.5em);
+      inset-inline-end: calc(100% - 1lh);
       content: counter(prosemirror-flat-list-counter, decimal) ". ";
       font-variant-numeric: tabular-nums;
     }

package/src/loro/loro-cursor-plugin.ts

@@ -2,27 +2,37 @@ import {
   definePlugin,
   type PlainExtension,
 } from '@prosekit/core'
+import type { Plugin } from '@prosekit/pm/state'
 import type {
-  EditorState,
-  Selection,
-} from '@prosekit/pm/state'
-import type { DecorationAttrs } from '@prosekit/pm/view'
-import type { PeerID } from 'loro-crdt'
+  CursorAwareness,
+  CursorEphemeralStore,
+  CursorPluginOptions,
+} from 'loro-prosemirror'
 import {
   LoroCursorPlugin,
-  type CursorAwareness,
+  LoroEphemeralCursorPlugin,
 } from 'loro-prosemirror'
 
-export interface LoroCursorOptions {
-  awareness: CursorAwareness
-  getSelection?: (state: EditorState) => Selection
-  createCursor?: (user: PeerID) => Element
-  createSelection?: (user: PeerID) => DecorationAttrs
+export interface LoroCursorOptions extends CursorPluginOptions {
+  awareness?: CursorAwareness
+  presence?: CursorEphemeralStore
 }
 
 export function defineLoroCursorPlugin(
   options: LoroCursorOptions,
 ): PlainExtension {
-  const { awareness, ...rest } = options
-  return definePlugin(LoroCursorPlugin(awareness, rest))
+  return definePlugin(createLoroCursorPlugin(options))
+}
+
+function createLoroCursorPlugin(options: LoroCursorOptions): Plugin {
+  const { awareness, presence, ...rest } = options
+  if (awareness && presence) {
+    throw new Error('Only one of awareness and presence can be provided')
+  } else if (awareness) {
+    return LoroCursorPlugin(awareness, rest)
+  } else if (presence) {
+    return LoroEphemeralCursorPlugin(presence, rest)
+  } else {
+    throw new Error('Either awareness or presence must be provided')
+  }
 }