@prosekit/core 0.8.7 → 0.9.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/core",
   "type": "module",
-  "version": "0.8.7",
+  "version": "0.9.0",
   "private": false,
   "description": "Core features for ProseKit",
   "author": {
@@ -40,24 +40,22 @@
     "src"
   ],
   "dependencies": {
-    "@ocavue/utils": "^0.8.1",
+    "@ocavue/utils": "^1.2.0",
     "clsx": "^2.1.1",
-    "just-clone": "^6.2.0",
-    "just-map-values": "^3.2.0",
     "orderedmap": "^2.1.1",
     "prosemirror-splittable": "^0.1.1",
-    "type-fest": "^5.2.0",
-    "@prosekit/pm": "^0.1.14"
+    "type-fest": "^5.3.1",
+    "@prosekit/pm": "^0.1.15"
   },
   "devDependencies": {
     "@types/diffable-html": "^5.0.2",
     "diffable-html": "^6.0.1",
-    "tsdown": "^0.16.5",
+    "tsdown": "^0.17.0",
     "typescript": "~5.9.3",
-    "vitest": "^4.0.10",
+    "vitest": "^4.0.15",
     "vitest-browser-commands": "^0.2.0",
-    "@prosekit/config-tsdown": "0.0.0",
-    "@prosekit/config-vitest": "0.0.0"
+    "@prosekit/config-vitest": "0.0.0",
+    "@prosekit/config-tsdown": "0.0.0"
   },
   "publishConfig": {
     "dev": {}

package/src/commands/select-all.ts

@@ -1,7 +1,5 @@
-import {
-  AllSelection,
-  type Command,
-} from '@prosekit/pm/state'
+import { selectAll as selectAllCommand } from '@prosekit/pm/commands'
+import type { Command } from '@prosekit/pm/state'
 
 /**
  * Returns a command that selects the whole document.
@@ -9,8 +7,5 @@ import {
  * @public
  */
 export function selectAll(): Command {
-  return (state, dispatch) => {
-    dispatch?.(state.tr.setSelection(new AllSelection(state.doc)))
-    return true
-  }
+  return selectAllCommand
 }

package/src/commands/select-block.spec.ts

@@ -0,0 +1,83 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+
+import { selectBlock } from './select-block'
+
+describe('selectBlock', () => {
+  it('should expand the text selection to cover the start of the paragraph', () => {
+    const { editor, n, getSelectionString } = setup()
+    editor.set(n.doc(n.paragraph('Hello <a>world<b>')))
+    expect(getSelectionString()).toMatchInlineSnapshot(`"<paragraph("world")>"`)
+    editor.exec(selectBlock())
+    expect(getSelectionString()).toMatchInlineSnapshot(`"<paragraph("Hello world")>"`)
+  })
+
+  it('should expand the text selection to cover the end of the paragraph', () => {
+    const { editor, n, getSelectionString } = setup()
+    editor.set(n.doc(n.paragraph('<a>Hello<b> world')))
+    expect(getSelectionString()).toMatchInlineSnapshot(`"<paragraph("Hello")>"`)
+    editor.exec(selectBlock())
+    expect(getSelectionString()).toMatchInlineSnapshot(`"<paragraph("Hello world")>"`)
+  })
+
+  it('should expand the text selection to include other marks', () => {
+    const { editor, n, m, getSelectionString } = setup()
+    editor.set(n.doc(n.paragraph(
+      m.bold('Bold'),
+      ' ',
+      m.italic('Italic<a>'),
+      ' ',
+      m.bold('Bold'),
+    )))
+    expect(getSelectionString()).toMatchInlineSnapshot(`"<>"`)
+    editor.exec(selectBlock())
+    expect(getSelectionString()).toMatchInlineSnapshot(`"<paragraph(bold("Bold"), " ", italic("Italic"), " ", bold("Bold"))>"`)
+  })
+
+  it('should expand the text selection to include multiple blocks', () => {
+    const { editor, n, getSelectionString } = setup()
+    editor.set(n.doc(
+      n.paragraph('Hello<a>'),
+      n.paragraph('World'),
+      n.paragraph('<b>!'),
+    ))
+    expect(getSelectionString()).toMatchInlineSnapshot(`"<paragraph, paragraph("World"), paragraph>"`)
+    editor.exec(selectBlock())
+    expect(getSelectionString()).toMatchInlineSnapshot(`"<paragraph("Hello"), paragraph("World"), paragraph("!")>"`)
+  })
+
+  it('is able to expand the text selection pointing to different depths', () => {
+    const { editor, n, getSelectionString } = setup()
+    editor.set(n.doc(
+      n.paragraph('Hello<a>'),
+      n.blockquote([
+        n.paragraph('Item 1'),
+        n.blockquote([
+          n.paragraph('Sub<b> item 1.1'),
+        ]),
+      ]),
+      n.blockquote([
+        n.paragraph('Item 2'),
+      ]),
+    ))
+    expect(getSelectionString()).toMatchInlineSnapshot(`"<paragraph, blockquote(paragraph("Item 1"), blockquote(paragraph("Sub")))>"`)
+    editor.exec(selectBlock())
+    expect(getSelectionString()).toMatchInlineSnapshot(`"<paragraph("Hello"), blockquote(paragraph("Item 1"), blockquote(paragraph("Sub item 1.1")))>"`)
+  })
+})
+
+function setup() {
+  const { editor, n, m } = setupTest()
+
+  const getSelectionString = () => {
+    const fragment = editor.state.selection.content().content
+    return fragment.toString()
+  }
+
+  return { editor, n, m, getSelectionString }
+}

package/src/commands/select-block.ts

@@ -0,0 +1,59 @@
+import {
+  TextSelection,
+  type Command,
+} from '@prosekit/pm/state'
+
+import { isTextSelection } from '../utils/type-assertion'
+
+// Based on https://github.com/ProseMirror/prosemirror-commands/blob/1.7.1/src/commands.ts#L507-L521
+function getTextblockEndpoint(selection: TextSelection, side: number): number | undefined {
+  const $pos = side < 0 ? selection.$from : selection.$to
+  let depth = $pos.depth
+  while ($pos.node(depth).isInline) {
+    if (!depth) {
+      return
+    }
+    depth--
+  }
+  if (!$pos.node(depth).isTextblock) {
+    return
+  }
+  return side < 0 ? $pos.start(depth) : $pos.end(depth)
+}
+
+/**
+ * @internal
+ */
+export const selectBlockCommand: Command = (state, dispatch) => {
+  const { selection } = state
+  if (!isTextSelection(selection)) {
+    return false
+  }
+
+  const expectedFrom = getTextblockEndpoint(selection, -1)
+  const expectedTo = getTextblockEndpoint(selection, 1)
+  if (expectedFrom == null || expectedTo == null) {
+    return false
+  }
+
+  if (selection.from <= expectedFrom && selection.to >= expectedTo) {
+    return false
+  }
+
+  if (dispatch) {
+    const newSelection = TextSelection.create(state.doc, expectedFrom, expectedTo)
+    dispatch(state.tr.setSelection(newSelection))
+  }
+  return true
+}
+
+/**
+ * Returns a command to expand the text selection to cover the current block
+ * node. If the text selection spans multiple blocks, it will select all
+ * blocks in the selection.
+ *
+ * @public
+ */
+export function selectBlock(): Command {
+  return selectBlockCommand
+}

package/src/commands/wrap.ts

@@ -16,11 +16,6 @@ export interface WrapOptions {
    */
   type: NodeType | string
 
-  /**
-   * @deprecated Use `nodeSpec` instead.
-   */
-  nodeType?: NodeType
-
   /**
    * Optional attributes to apply to the node.
    */
@@ -40,7 +35,7 @@ export function wrap(options: WrapOptions): Command {
     const range = $from.blockRange($to)
     if (!range) return false
 
-    const nodeType = getNodeType(state.schema, options.nodeType || options.type)
+    const nodeType = getNodeType(state.schema, options.type)
     const wrapping = findWrapping(range, nodeType, options.attrs)
     if (!wrapping) return false
 

package/src/editor/action.ts

@@ -1,3 +1,4 @@
+import { mapValues } from '@ocavue/utils'
 import type {
   Attrs,
   Mark,
@@ -7,7 +8,6 @@ import type {
   Schema,
 } from '@prosekit/pm/model'
 import type { EditorState } from '@prosekit/pm/state'
-import mapValues from 'just-map-values'
 
 import { ProseKitError } from '../error'
 import type { AnyAttrs } from '../types/attrs'
@@ -79,16 +79,6 @@ export interface MarkAction<Attrs extends AnyAttrs = AnyAttrs> {
   isActive: (attrs?: Attrs) => boolean
 }
 
-/**
- * @deprecated Use type {@link NodeAction} instead.
- */
-export type NodeBuilder = NodeAction
-
-/**
- * @deprecated Use type {@link MarkAction} instead.
- */
-export type MarkBuilder = MarkAction
-
 /**
  * @internal
  */

package/src/editor/editor.ts

@@ -1,3 +1,4 @@
+import { isDeepEqual } from '@ocavue/utils'
 import type {
   ProseMirrorNode,
   Schema,
@@ -40,7 +41,6 @@ import type {
   SelectionJSON,
 } from '../types/model'
 import { assert } from '../utils/assert'
-import { deepEquals } from '../utils/deep-equals'
 import {
   getEditorContentDoc,
   getEditorSelection,
@@ -70,25 +70,9 @@ export interface EditorOptions<E extends Extension> {
 
   /**
    * The starting document to use when creating the editor. It can be a
-   * ProseMirror node JSON object, a HTML string, or a HTML element instance.
+   * ProseMirror node JSON object, an HTML string, or a DOM element instance.
    */
-  defaultContent?: NodeJSON | string | HTMLElement
-
-  /**
-   * A JSON object representing the starting document to use when creating the
-   * editor.
-   *
-   * @deprecated Use `defaultContent` instead.
-   */
-  defaultDoc?: NodeJSON
-
-  /**
-   * A HTML element or a HTML string representing the starting document to use
-   * when creating the editor.
-   *
-   * @deprecated Use `defaultContent` instead.
-   */
-  defaultHTML?: string | HTMLElement
+  defaultContent?: NodeJSON | string | Element
 
   /**
    * A JSON object representing the starting selection to use when creating the
@@ -108,7 +92,7 @@ export interface getDocHTMLOptions extends DOMDocumentOptions {}
 export function setupEditorExtension<E extends Extension>(
   options: EditorOptions<E>,
 ): E {
-  if (options.defaultContent || options.defaultDoc || options.defaultHTML) {
+  if (options.defaultContent) {
     return union(
       options.extension,
       defineDefaultState(options),
@@ -176,7 +160,7 @@ export class EditorInstance {
     return this.getState().doc
   }
 
-  private getProp<PropName extends keyof EditorProps>(propName: PropName): EditorProps[PropName] | undefined {
+  private getProp<PropName extends keyof EditorProps>(propName: PropName): Partial<EditorProps>[PropName] {
     return this.view?.someProp(propName) ?? this.directEditorProps[propName]
   }
 
@@ -197,7 +181,7 @@ export class EditorInstance {
   }
 
   public setContent(
-    content: NodeJSON | string | HTMLElement | ProseMirrorNode,
+    content: NodeJSON | string | Element | ProseMirrorNode,
     selection?: SelectionJSON | Selection | 'start' | 'end',
   ): void {
     const doc = getEditorContentDoc(this.schema, content)
@@ -226,7 +210,7 @@ export class EditorInstance {
   }
 
   /**
-   * Return a HTML string representing the editor's current document.
+   * Return an HTML string representing the editor's current document.
    */
   public getDocHTML = (options?: getDocHTMLOptions): string => {
     const serializer = this.getProp('clipboardSerializer')
@@ -264,14 +248,14 @@ export class EditorInstance {
     const newPayload = this.tree.getRootOutput()
     const newPlugins = [...(newPayload?.state?.plugins ?? [])]
 
-    if (!deepEquals(oldPlugins, newPlugins)) {
+    if (!isDeepEqual(oldPlugins, newPlugins)) {
       const state = view.state.reconfigure({ plugins: newPlugins })
       view.updateState(state)
     }
 
     if (
       newPayload?.commands
-      && !deepEquals(oldPayload?.commands, newPayload?.commands)
+      && !isDeepEqual(oldPayload?.commands, newPayload?.commands)
     ) {
       const commands = newPayload.commands
       const names = Object.keys(commands)
@@ -306,6 +290,9 @@ export class EditorInstance {
 
   public mount(place: HTMLElement): void {
     if (this.view) {
+      // If the editor is already mounted to the same DOM element, do nothing
+      if (this.view.dom === place) return
+      // If the editor is already mounted to a different element, throw an error
       throw new ProseKitError('Editor is already mounted')
     }
     this.view = new EditorView({ mount: place }, this.directEditorProps)
@@ -374,7 +361,6 @@ export class EditorInstance {
       return this.canExec(command)
     }
 
-    action.canApply = canExec
     action.canExec = canExec
 
     this.commands[name] = action as CommandAction
@@ -437,12 +423,14 @@ export class Editor<E extends Extension = any> {
   }
 
   /**
-   * Mount the editor to the given HTML element.
-   * Pass `null` or `undefined` to unmount the editor.
+   * Mount the editor to the given HTML element. Pass `null` or `undefined` to
+   * unmount the editor. When an element is passed, this method returns a
+   * function to unmount the editor.
    */
-  mount = (place: HTMLElement | null | undefined): void => {
+  mount = (place: HTMLElement | null | undefined): void | VoidFunction => {
     if (place) {
       this.instance.mount(place)
+      return this.unmount
     } else {
       this.instance.unmount()
     }
@@ -496,7 +484,7 @@ export class Editor<E extends Extension = any> {
    *   - A ProseMirror node instance
    *   - A ProseMirror node JSON object
    *   - An HTML string
-   *   - An HTML element instance
+   *   - A DOM element instance
    * @param selection - Optional. Specifies the new selection. It can be one of the following:
    *   - A ProseMirror selection instance
    *   - A ProseMirror selection JSON object
@@ -504,7 +492,7 @@ export class Editor<E extends Extension = any> {
    *   - The string "end" (to set selection at the end)
    */
   setContent = (
-    content: ProseMirrorNode | NodeJSON | string | HTMLElement,
+    content: ProseMirrorNode | NodeJSON | string | Element,
     selection?: SelectionJSON | Selection | 'start' | 'end',
   ): void => {
     return this.instance.setContent(content, selection)
@@ -518,7 +506,7 @@ export class Editor<E extends Extension = any> {
   }
 
   /**
-   * Return a HTML string representing the editor's current document.
+   * Return an HTML string representing the editor's current document.
    */
   public getDocHTML = (options?: getDocHTMLOptions): string => {
     return this.instance.getDocHTML(options)

package/src/extensions/command.ts

@@ -23,6 +23,7 @@ import {
   type RemoveNodeOptions,
 } from '../commands/remove-node'
 import { selectAll } from '../commands/select-all'
+import { selectBlock } from '../commands/select-block'
 import {
   setBlockType,
   type SetBlockTypeOptions,
@@ -78,6 +79,7 @@ export type BaseCommandsExtension = Extension<{
     setNodeAttrs: [options: SetNodeAttrsOptions]
     insertDefaultBlock: [options?: InsertDefaultBlockOptions]
     selectAll: []
+    selectBlock: []
     addMark: [options: AddMarkOptions]
     removeMark: [options: RemoveMarkOptions]
     unsetBlockType: [options?: UnsetBlockTypeOptions]
@@ -110,6 +112,8 @@ export function defineBaseCommands(): BaseCommandsExtension {
 
     selectAll,
 
+    selectBlock,
+
     addMark,
 
     removeMark,

package/src/extensions/default-state.spec.ts

@@ -27,10 +27,6 @@ describe('defineDefaultState', () => {
       return editor.state.doc.toString()
     }
 
-    expect(run({ defaultDoc: docJSON })).toContain('docJSON')
-    expect(run({ defaultHTML: docHTMLString })).toContain('docHTMLString')
-    expect(run({ defaultHTML: docHTMLElement })).toContain('docHTMLElement')
-
     expect(run({ defaultContent: docJSON })).toContain('docJSON')
     expect(run({ defaultContent: docHTMLString })).toContain('docHTMLString')
     expect(run({ defaultContent: docHTMLElement })).toContain('docHTMLElement')

package/src/extensions/default-state.ts

@@ -18,25 +18,9 @@ import { getEditorContentJSON } from '../utils/editor-content'
 export interface DefaultStateOptions {
   /**
    * The starting document to use when creating the editor. It can be a
-   * ProseMirror node JSON object, a HTML string, or a HTML element instance.
+   * ProseMirror node JSON object, an HTML string, or a DOM element instance.
    */
-  defaultContent?: NodeJSON | string | HTMLElement
-
-  /**
-   * A JSON object representing the starting document to use when creating the
-   * editor.
-   *
-   * @deprecated Use `defaultContent` instead.
-   */
-  defaultDoc?: NodeJSON
-
-  /**
-   * A HTML element or a HTML string representing the starting document to use
-   * when creating the editor.
-   *
-   * @deprecated Use `defaultContent` instead.
-   */
-  defaultHTML?: string | HTMLElement
+  defaultContent?: NodeJSON | string | Element
 
   /**
    * A JSON object representing the starting selection to use when creating the
@@ -55,16 +39,12 @@ export interface DefaultStateOptions {
 export function defineDefaultState({
   defaultSelection,
   defaultContent,
-  defaultDoc,
-  defaultHTML,
 }: DefaultStateOptions): PlainExtension {
-  const defaultDocContent = defaultContent || defaultDoc || defaultHTML
-
   return defineFacetPayload(stateFacet, [
     ({ schema }) => {
       const config: EditorStateConfig = {}
-      if (defaultDocContent) {
-        const json = getEditorContentJSON(schema, defaultDocContent)
+      if (defaultContent) {
+        const json = getEditorContentJSON(schema, defaultContent)
         config.doc = schema.nodeFromJSON(json)
         if (defaultSelection) {
           config.selection = Selection.fromJSON(config.doc, defaultSelection)

package/src/extensions/events/dom-event.ts

@@ -85,10 +85,7 @@ const domEventFacet: Facet<DOMEventPayload, PluginPayload> = defineFacet(
             hasNewEvent = true
             const [setHandlers, combinedHandler] = combineEventHandlers<DOMEventHandler>()
             setHandlersMap[event] = setHandlers
-            const e: DOMEventHandler = (view, eventObject) => {
-              return combinedHandler(view, eventObject)
-            }
-            combinedHandlerMap[event] = e
+            combinedHandlerMap[event] = combinedHandler
           }
         }
 

package/src/extensions/events/editor-event.ts

@@ -1,3 +1,4 @@
+import type { ObjectEntries } from '@ocavue/utils'
 import type {
   Node,
   Slice,
@@ -14,7 +15,6 @@ import {
 } from '../../facets/facet'
 import { defineFacetPayload } from '../../facets/facet-extension'
 import type { PlainExtension } from '../../types/extension'
-import type { ObjectEntries } from '../../types/object-entries'
 import { groupEntries } from '../../utils/array-grouping'
 import { combineEventHandlers } from '../../utils/combine-event-handlers'
 import {

package/src/extensions/history.ts

@@ -17,7 +17,7 @@ import { definePlugin } from './plugin'
 
 const keymap: Keymap = {
   'Mod-z': undo,
-  'Shift-Mod-z': redo,
+  'Mod-Z': redo,
 }
 
 if (!isApple) {

package/src/extensions/keymap-base.spec.ts

@@ -0,0 +1,98 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+import { keyboard } from 'vitest-browser-commands/playwright'
+
+import { union } from '../editor/union'
+import type { TestEditor } from '../test'
+import {
+  defineDoc,
+  defineParagraph,
+  defineText,
+  setupTestFromExtension,
+} from '../testing'
+import type { SelectionJSON } from '../types/model'
+
+import { defineBaseKeymap } from './keymap-base'
+
+describe('Mod-a', () => {
+  it('can select the block for the first Mod-a press', async () => {
+    const { editor, n } = setupTestFromExtension(union(
+      defineDoc(),
+      defineText(),
+      defineParagraph(),
+      defineBaseKeymap(),
+    ))
+
+    editor.set(n.doc(n.paragraph('Fo<a>o<b>'), n.paragraph('Bar')))
+    await keyboard.press('ControlOrMeta+a')
+    expect(inspectSelection(editor)).toMatchInlineSnapshot(`"text: <paragraph("Foo")>"`)
+    await keyboard.press('ControlOrMeta+a')
+    expect(inspectSelection(editor)).toMatchInlineSnapshot(`"all: <paragraph("Foo"), paragraph("Bar")>"`)
+  })
+
+  it('can select the entire document if the current textblock is already selected', async () => {
+    const { editor, n } = setupTestFromExtension(union(
+      defineDoc(),
+      defineText(),
+      defineParagraph(),
+      defineBaseKeymap(),
+    ))
+
+    editor.set(n.doc(n.paragraph('<a>Foo<b>'), n.paragraph('Bar')))
+    expect(inspectSelection(editor)).toMatchInlineSnapshot(`"text: <paragraph("Foo")>"`)
+    await keyboard.press('ControlOrMeta+a')
+    expect(inspectSelection(editor)).toMatchInlineSnapshot(`"all: <paragraph("Foo"), paragraph("Bar")>"`)
+  })
+
+  it('can select the entire document if multiple textblocks are already selected', async () => {
+    const { editor, n } = setupTestFromExtension(union(
+      defineDoc(),
+      defineText(),
+      defineParagraph(),
+      defineBaseKeymap(),
+    ))
+
+    editor.set(n.doc(n.paragraph('<a>Foo'), n.paragraph('Bar<b>'), n.paragraph('Baz')))
+    expect(inspectSelection(editor)).toMatchInlineSnapshot(`"text: <paragraph("Foo"), paragraph("Bar")>"`)
+    await keyboard.press('ControlOrMeta+a')
+    expect(inspectSelection(editor)).toMatchInlineSnapshot(`"all: <paragraph("Foo"), paragraph("Bar"), paragraph("Baz")>"`)
+  })
+
+  it('can select the entire document if the current textblock is empty', async () => {
+    const { editor, n } = setupTestFromExtension(union(
+      defineDoc(),
+      defineText(),
+      defineParagraph(),
+      defineBaseKeymap(),
+    ))
+
+    editor.set(n.doc(n.paragraph('Foo'), n.paragraph('<a>'), n.paragraph('Bar')))
+    expect(inspectSelection(editor)).toMatchInlineSnapshot(`"text: <>"`)
+    await keyboard.press('ControlOrMeta+a')
+    expect(inspectSelection(editor)).toMatchInlineSnapshot(`"all: <paragraph("Foo"), paragraph, paragraph("Bar")>"`)
+  })
+
+  it('can select the entire document directly if `preferBlockSelection` is false', async () => {
+    const { editor, n } = setupTestFromExtension(union(
+      defineDoc(),
+      defineText(),
+      defineParagraph(),
+      defineBaseKeymap({ preferBlockSelection: false }),
+    ))
+
+    editor.set(n.doc(n.paragraph('<a>Foo<b>'), n.paragraph('Bar')))
+    expect(inspectSelection(editor)).toMatchInlineSnapshot(`"text: <paragraph("Foo")>"`)
+    await keyboard.press('ControlOrMeta+a')
+    expect(inspectSelection(editor)).toMatchInlineSnapshot(`"all: <paragraph("Foo"), paragraph("Bar")>"`)
+  })
+})
+
+function inspectSelection(editor: TestEditor) {
+  const selection = editor.state.selection
+  const text = selection.content().content.toString()
+  const json = selection.toJSON() as SelectionJSON
+  return `${json.type}: ${text}`
+}