@prosekit/extensions 0.12.2 → 0.14.0

package/src/italic/italic-input-rule.spec.ts

@@ -1,8 +1,4 @@
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { describe, expect, it } from 'vitest'
 
 import { setupTest } from '../testing'
 import { inputText } from '../testing/keyboard'

package/src/italic/italic-input-rule.ts

@@ -1,7 +1,4 @@
-import {
-  canUseRegexLookbehind,
-  type PlainExtension,
-} from '@prosekit/core'
+import { canUseRegexLookbehind, type PlainExtension } from '@prosekit/core'
 
 import { defineMarkInputRule } from '../input-rule'
 

package/src/italic/italic-keymap.ts

@@ -1,8 +1,4 @@
-import {
-  defineKeymap,
-  toggleMark,
-  type PlainExtension,
-} from '@prosekit/core'
+import { defineKeymap, toggleMark, type PlainExtension } from '@prosekit/core'
 
 /**
  * @internal

package/src/italic/italic-spec.ts

@@ -1,7 +1,4 @@
-import {
-  defineMarkSpec,
-  type Extension,
-} from '@prosekit/core'
+import { defineMarkSpec, type Extension } from '@prosekit/core'
 import type { Attrs } from '@prosekit/pm/model'
 
 /**

package/src/italic/italic.ts

@@ -1,18 +1,9 @@
-import {
-  union,
-  type Union,
-} from '@prosekit/core'
+import { union, type Union } from '@prosekit/core'
 
-import {
-  defineItalicCommands,
-  type ItalicCommandsExtension,
-} from './italic-commands'
+import { defineItalicCommands, type ItalicCommandsExtension } from './italic-commands'
 import { defineItalicInputRule } from './italic-input-rule'
 import { defineItalicKeymap } from './italic-keymap'
-import {
-  defineItalicSpec,
-  type ItalicSpecExtension,
-} from './italic-spec'
+import { defineItalicSpec, type ItalicSpecExtension } from './italic-spec'
 
 /**
  * @internal

package/src/link/index.spec.ts

@@ -1,11 +1,8 @@
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
-import { userEvent } from 'vitest/browser'
+import { describe, expect, it } from 'vitest'
+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 +43,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 +55,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 +73,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/link/index.ts

@@ -17,11 +17,7 @@ import { defineInputRule } from '../input-rule'
 import { defineMarkRule } from '../mark-rule'
 
 import { defineLinkPasteRule } from './link-paste-rule'
-import {
-  LINK_ENTER_RE,
-  LINK_INPUT_RE,
-  LINK_MARK_RE,
-} from './link-regex'
+import { LINK_ENTER_RE, LINK_INPUT_RE, LINK_MARK_RE } from './link-regex'
 import type { LinkAttrs } from './link-types'
 
 export { defineLinkPasteRule }

package/src/link/link-paste-rule.spec.ts

@@ -1,14 +1,7 @@
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { describe, expect, it } from 'vitest'
 
 import { setupTest } from '../testing'
-import {
-  pasteHTML,
-  pasteText,
-} from '../testing/clipboard'
+import { pasteHTML, pasteText } from '../testing/clipboard'
 
 describe('defineLinkPasteRule', () => {
   const { editor, n, m } = setupTest()

package/src/link/link-regex.spec.ts

@@ -1,8 +1,4 @@
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { describe, expect, it } from 'vitest'
 
 import { LINK_MARK_RE } from './link-regex'
 

package/src/list/index.ts

@@ -6,20 +6,11 @@ export type {
   UnwrapListOptions,
   WrapInListGetAttrs,
 } from 'prosemirror-flat-list'
-export {
-  defineList,
-  type ListExtension,
-} from './list'
-export {
-  defineListCommands,
-  type ListCommandsExtension,
-} from './list-commands'
+export { defineList, type ListExtension } from './list'
+export { defineListCommands, type ListCommandsExtension } from './list-commands'
 export { defineListInputRules } from './list-input-rules'
 export { defineListKeymap } from './list-keymap'
 export { defineListPlugins } from './list-plugins'
 export { defineListSerializer } from './list-serializer'
-export {
-  defineListSpec,
-  type ListSpecExtension,
-} from './list-spec'
+export { defineListSpec, type ListSpecExtension } from './list-spec'
 export type { ListAttrs } from './list-types'

package/src/list/list-commands.ts

@@ -1,8 +1,4 @@
-import {
-  defineCommands,
-  insertNode,
-  type Extension,
-} from '@prosekit/core'
+import { defineCommands, insertNode, type Extension } from '@prosekit/core'
 import type { Command } from '@prosekit/pm/state'
 import {
   createDedentListCommand as dedentList,

package/src/list/list-input-rules.ts

@@ -1,7 +1,4 @@
-import {
-  union,
-  type Extension,
-} from '@prosekit/core'
+import { union, type Extension } from '@prosekit/core'
 import { listInputRules } from 'prosemirror-flat-list'
 
 import { defineInputRule } from '../input-rule'

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

@@ -1,11 +1,7 @@
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { describe, 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 +22,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/list-keymap.ts

@@ -1,11 +1,5 @@
-import {
-  defineKeymap,
-  type PlainExtension,
-} from '@prosekit/core'
-import {
-  chainCommands,
-  deleteSelection,
-} from '@prosekit/pm/commands'
+import { defineKeymap, type PlainExtension } from '@prosekit/core'
+import { chainCommands, deleteSelection } from '@prosekit/pm/commands'
 import {
   createDedentListCommand,
   createIndentListCommand,

package/src/list/list-plugins.ts

@@ -1,7 +1,4 @@
-import {
-  definePlugin,
-  type PlainExtension,
-} from '@prosekit/core'
+import { definePlugin, type PlainExtension } from '@prosekit/core'
 import { Plugin } from '@prosekit/pm/state'
 import {
   createListEventPlugin,

package/src/list/list-serializer.ts

@@ -1,13 +1,6 @@
 import { isElementLike } from '@ocavue/utils'
-import {
-  defineClipboardSerializer,
-  type PlainExtension,
-} from '@prosekit/core'
-import {
-  findCheckboxInListItem,
-  joinListElements,
-  listToDOM,
-} from 'prosemirror-flat-list'
+import { defineClipboardSerializer, type PlainExtension } from '@prosekit/core'
+import { findCheckboxInListItem, joinListElements, listToDOM } from 'prosemirror-flat-list'
 
 /**
  * @internal

package/src/list/list-spec.ts

@@ -1,16 +1,6 @@
-import {
-  defineNodeSpec,
-  type Extension,
-} from '@prosekit/core'
-import type {
-  DOMOutputSpec,
-  ProseMirrorNode,
-} from '@prosekit/pm/model'
-import {
-  createListSpec,
-  listToDOM,
-  type ListAttributes,
-} from 'prosemirror-flat-list'
+import { defineNodeSpec, type Extension } from '@prosekit/core'
+import type { DOMOutputSpec, ProseMirrorNode } from '@prosekit/pm/model'
+import { createListSpec, listToDOM, type ListAttributes } from 'prosemirror-flat-list'
 
 import type { ListAttrs } from './list-types'
 

package/src/list/list.spec.ts

@@ -1,23 +1,12 @@
-import {
-  createEditor,
-  nodeFromHTML,
-  union,
-} from '@prosekit/core'
+import { createEditor, nodeFromHTML, union } from '@prosekit/core'
 import type { ProseMirrorNode } from '@prosekit/pm/model'
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { formatHTML } from 'diffable-html-snapshot'
+import { describe, expect, it } from 'vitest'
 
 import { defineDoc } from '../doc'
 import { defineParagraph } from '../paragraph'
 import { setupTest } from '../testing'
-import { formatHTML } from '../testing/format-html'
-import {
-  htmlFromMarkdown,
-  markdownFromHTML,
-} from '../testing/markdown'
+import { htmlFromMarkdown, markdownFromHTML } from '../testing/markdown'
 import { defineText } from '../text'
 
 import { defineList } from './index'
@@ -118,13 +107,13 @@ describe('defineList', () => {
       <ul data-pm-slice="0 0 []">
         <li
           class="prosemirror-flat-list"
-          data-list-kind="task"
           data-list-checked
+          data-list-kind="task"
         >
           <p>
             <input
-              type="checkbox"
               checked
+              type="checkbox"
             >
             Checked 1
           </p>
@@ -182,13 +171,13 @@ describe('defineList', () => {
         <ul>
           <li
             class="prosemirror-flat-list"
-            data-list-kind="task"
             data-list-checked
+            data-list-kind="task"
           >
             <p>
               <input
-                type="checkbox"
                 checked
+                type="checkbox"
               >
               Checked
             </p>
@@ -237,9 +226,9 @@ describe('defineList', () => {
         <li class="task-list-item">
           <p>
             <input
-              type="checkbox"
               checked
               disabled
+              type="checkbox"
             >
             Checked
           </p>
@@ -247,8 +236,8 @@ describe('defineList', () => {
         <li class="task-list-item">
           <p>
             <input
-              type="checkbox"
               disabled
+              type="checkbox"
             >
             Unchecked
           </p>

package/src/list/list.ts

@@ -1,21 +1,12 @@
-import {
-  union,
-  type Union,
-} from '@prosekit/core'
+import { union, type Union } from '@prosekit/core'
 
-import {
-  defineListCommands,
-  type ListCommandsExtension,
-} from './list-commands'
+import { defineListCommands, type ListCommandsExtension } from './list-commands'
 import { defineListDropIndicator } from './list-drop-indicator'
 import { defineListInputRules } from './list-input-rules'
 import { defineListKeymap } from './list-keymap'
 import { defineListPlugins } from './list-plugins'
 import { defineListSerializer } from './list-serializer'
-import {
-  defineListSpec,
-  type ListSpecExtension,
-} from './list-spec'
+import { defineListSpec, type ListSpecExtension } from './list-spec'
 
 /**
  * @internal

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/index.ts

@@ -1,17 +1,7 @@
-export type {
-  LoroSyncPluginProps,
-  LoroUndoPluginProps,
-} from 'loro-prosemirror'
-export {
-  defineLoro,
-  type LoroExtension,
-  type LoroOptions,
-} from './loro'
+export type { LoroSyncPluginProps, LoroUndoPluginProps } from 'loro-prosemirror'
+export { defineLoro, type LoroExtension, type LoroOptions } from './loro'
 export { defineLoroCommands } from './loro-commands'
-export {
-  defineLoroCursorPlugin,
-  type LoroCursorOptions,
-} from './loro-cursor-plugin'
+export { defineLoroCursorPlugin, type LoroCursorOptions } from './loro-cursor-plugin'
 export { defineLoroKeymap } from './loro-keymap'
 export { defineLoroSyncPlugin } from './loro-sync-plugin'
 export { defineLoroUndoPlugin } from './loro-undo-plugin'

package/src/loro/loro-commands.ts

@@ -1,11 +1,5 @@
-import {
-  defineCommands,
-  type Extension,
-} from '@prosekit/core'
-import {
-  redo,
-  undo,
-} from 'loro-prosemirror'
+import { defineCommands, type Extension } from '@prosekit/core'
+import { redo, undo } from 'loro-prosemirror'
 
 const commands = {
   undo: () => undo,

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

@@ -1,28 +1,28 @@
-import {
-  definePlugin,
-  type PlainExtension,
-} from '@prosekit/core'
-import type {
-  EditorState,
-  Selection,
-} from '@prosekit/pm/state'
-import type { DecorationAttrs } from '@prosekit/pm/view'
-import type { PeerID } from 'loro-crdt'
-import {
-  LoroCursorPlugin,
-  type CursorAwareness,
-} from 'loro-prosemirror'
+import { definePlugin, type PlainExtension } from '@prosekit/core'
+import type { Plugin } from '@prosekit/pm/state'
+import type { CursorAwareness, CursorEphemeralStore, CursorPluginOptions } from 'loro-prosemirror'
+import { LoroCursorPlugin, 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')
+  }
 }

package/src/loro/loro-keymap.ts

@@ -1,17 +1,9 @@
-import {
-  defineKeymap,
-  isApple,
-  type Keymap,
-  type PlainExtension,
-} from '@prosekit/core'
-import {
-  redo,
-  undo,
-} from 'loro-prosemirror'
+import { defineKeymap, isApple, type Keymap, type PlainExtension } from '@prosekit/core'
+import { redo, undo } from 'loro-prosemirror'
 
 const keymap: Keymap = {
   'Mod-z': undo,
-  'Shift-Mod-z': redo,
+  'Mod-Z': redo,
 }
 
 if (!isApple) {

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

@@ -1,11 +1,5 @@
-import {
-  definePlugin,
-  type PlainExtension,
-} from '@prosekit/core'
-import {
-  LoroSyncPlugin,
-  type LoroSyncPluginProps,
-} from 'loro-prosemirror'
+import { definePlugin, type PlainExtension } from '@prosekit/core'
+import { LoroSyncPlugin, type LoroSyncPluginProps } from 'loro-prosemirror'
 
 export function defineLoroSyncPlugin(
   options: LoroSyncPluginProps,

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

@@ -1,11 +1,5 @@
-import {
-  definePlugin,
-  type PlainExtension,
-} from '@prosekit/core'
-import {
-  LoroUndoPlugin,
-  type LoroUndoPluginProps,
-} from 'loro-prosemirror'
+import { definePlugin, type PlainExtension } from '@prosekit/core'
+import { LoroUndoPlugin, type LoroUndoPluginProps } from 'loro-prosemirror'
 
 export function defineLoroUndoPlugin(options: LoroUndoPluginProps): PlainExtension {
   return definePlugin(LoroUndoPlugin(options))

package/src/loro/loro.ts

@@ -1,25 +1,15 @@
-import {
-  Priority,
-  union,
-  withPriority,
-  type PlainExtension,
-  type Union,
-} from '@prosekit/core'
+import { Priority, union, withPriority, type PlainExtension, type Union } from '@prosekit/core'
 import type {
   CursorAwareness,
+  CursorEphemeralStore,
+  CursorPluginOptions,
   LoroDocType,
   LoroSyncPluginProps,
   LoroUndoPluginProps,
 } from 'loro-prosemirror'
 
-import {
-  defineLoroCommands,
-  type LoroCommandsExtension,
-} from './loro-commands'
-import {
-  defineLoroCursorPlugin,
-  type LoroCursorOptions,
-} from './loro-cursor-plugin'
+import { defineLoroCommands, type LoroCommandsExtension } from './loro-commands'
+import { defineLoroCursorPlugin } from './loro-cursor-plugin'
 import { defineLoroKeymap } from './loro-keymap'
 import { defineLoroSyncPlugin } from './loro-sync-plugin'
 import { defineLoroUndoPlugin } from './loro-undo-plugin'
@@ -31,9 +21,14 @@ export interface LoroOptions {
   doc: LoroDocType
 
   /**
-   * The Awareness instance.
+   * The (legacy) Awareness instance. One of `awareness` or `presence` must be provided.
    */
-  awareness: CursorAwareness
+  awareness?: CursorAwareness
+
+  /**
+   * The CursorEphemeralStore instance. One of `awareness` or `presence` must be provided.
+   */
+  presence?: CursorEphemeralStore
 
   /**
    * Extra options for `LoroSyncPlugin`.
@@ -46,9 +41,9 @@ export interface LoroOptions {
   undo?: Omit<LoroUndoPluginProps, 'doc'>
 
   /**
-   * Extra options for `LoroCursorPlugin`.
+   * Extra options for `LoroCursorPlugin` or `LoroEphemeralCursorPlugin`.
    */
-  cursor?: Omit<LoroCursorOptions, 'awareness'>
+  cursor?: CursorPluginOptions
 }
 
 /**
@@ -60,13 +55,13 @@ export type LoroExtension = Union<[LoroCommandsExtension, PlainExtension]>
  * @public
  */
 export function defineLoro(options: LoroOptions): LoroExtension {
-  const { doc, awareness, sync, undo, cursor } = options
+  const { doc, awareness, presence, sync, undo, cursor } = options
 
   return withPriority(
     union([
       defineLoroKeymap(),
       defineLoroCommands(),
-      defineLoroCursorPlugin({ ...cursor, awareness }),
+      defineLoroCursorPlugin({ ...cursor, awareness, presence }),
       defineLoroUndoPlugin({ ...undo, doc }),
       defineLoroSyncPlugin({ ...sync, doc }),
     ]),