@prosekit/extensions 0.14.2 → 0.16.0-beta.0

package/dist/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../src/table/table-commands/exit-table.ts","../src/table/table-commands/insert-table.ts","../src/table/table-utils.ts","../src/table/table-commands/select-table-cell.ts","../src/table/table-commands/select-table-column.ts","../src/table/table-commands/select-table-row.ts","../src/table/table-commands/select-table.ts","../src/table/table-commands.ts","../src/table/table-drop-indicator.ts","../src/table/table-plugins.ts","../src/table/table-spec.ts","../src/table/table.ts"],"sourcesContent":["import { defaultBlockAt } from '@prosekit/core'\nimport { TextSelection } from '@prosekit/pm/state'\nimport type { Command } from '@prosekit/pm/state'\nimport type { TableRole } from 'prosemirror-tables'\n\n/**\n * When the selection is in a table node, create a default block after the table\n * table, and move the cursor there.\n *\n * @public\n */\nexport const exitTable: Command = (state, dispatch) => {\n  const { $head, $anchor } = state.selection\n\n  if (!$head.sameParent($anchor)) {\n    return false\n  }\n\n  let tableStart = -1\n  let tableDepth = -1\n  for (let depth = $head.depth; depth >= 0; depth--) {\n    const node = $head.node(depth)\n    if ((node.type.spec.tableRole as TableRole) === 'table') {\n      tableStart = $head.before(depth)\n      tableDepth = depth\n    }\n  }\n\n  if (tableStart < 0 || tableDepth <= 0) {\n    return false\n  }\n\n  const above = $head.node(tableDepth - 1)\n  const after = $head.indexAfter(tableDepth - 1)\n  const type = defaultBlockAt(above.contentMatchAt(after))\n  const node = type?.createAndFill()\n\n  if (!type || !node || !above.canReplaceWith(after, after, type)) {\n    return false\n  }\n\n  if (dispatch) {\n    const pos = $head.after(tableDepth)\n    const tr = state.tr.replaceWith(pos, pos, node)\n    tr.setSelection(TextSelection.near(tr.doc.resolve(pos), 1))\n    dispatch(tr.scrollIntoView())\n  }\n  return true\n}\n","import { getNodeType, insertNode } from '@prosekit/core'\nimport type { Schema } from '@prosekit/pm/model'\nimport type { Command } from '@prosekit/pm/state'\n\nfunction createEmptyTable(\n  schema: Schema,\n  row: number,\n  col: number,\n  header: boolean,\n) {\n  const tableType = getNodeType(schema, 'table')\n  const tableRowType = getNodeType(schema, 'tableRow')\n  const tableCellType = getNodeType(schema, 'tableCell')\n  const tableHeaderCellType = getNodeType(schema, 'tableHeaderCell')\n\n  if (header) {\n    const headerCell = tableHeaderCellType.createAndFill()!\n    const headerCells = repeat(headerCell, col)\n    const headerRow = tableRowType.createAndFill(null, headerCells)!\n\n    const bodyCell = tableCellType.createAndFill()!\n    const bodyCells = repeat(bodyCell, col)\n    const bodyRow = tableRowType.createAndFill(null, bodyCells)!\n    const bodyRows = repeat(bodyRow, row - 1)\n\n    return tableType.createAndFill(null, [headerRow, ...bodyRows])!\n  } else {\n    const bodyCell = tableCellType.createAndFill()!\n    const bodyCells = repeat(bodyCell, col)\n    const bodyRow = tableRowType.createAndFill(null, bodyCells)!\n    const bodyRows = repeat(bodyRow, row)\n\n    return tableType.createAndFill(null, bodyRows)!\n  }\n}\n\nfunction repeat<T>(node: T, length: number): T[] {\n  return Array<T>(length).fill(node)\n}\n\n/**\n * @public\n */\nexport interface InsertTableOptions {\n  /**\n   * The number of rows in the table.\n   */\n  row: number\n\n  /**\n   * The number of columns in the table.\n   */\n  col: number\n\n  /**\n   * Whether the table has a header row.\n   *\n   * @default false\n   */\n  header?: boolean\n}\n\n/**\n * Insert a table node with the given number of rows and columns, and optionally\n * a header row.\n *\n * @param options\n *\n * @public\n */\nexport function insertTable(options: InsertTableOptions): Command {\n  return (state, dispatch, view) => {\n    const { row, col, header = false } = options\n    const table = createEmptyTable(state.schema, row, col, header)\n    return insertNode({ node: table })(state, dispatch, view)\n  }\n}\n","import { CellSelection, findCellPos, findCellRange, findTable } from 'prosemirror-tables'\n\nexport { findCellPos, findCellRange, findTable }\n\n/**\n * Checks if the given object is a `CellSelection` instance.\n *\n * @public\n */\nexport function isCellSelection(value: unknown): value is CellSelection {\n  return value instanceof CellSelection\n}\n","import type { Command } from '@prosekit/pm/state'\nimport { CellSelection } from 'prosemirror-tables'\n\nimport { findCellPos } from '../table-utils.ts'\n\n/**\n * @public\n */\nexport interface SelectTableCellOptions {\n  /**\n   * A hit position of the table cell to select from. By default, the selection\n   * anchor will be used.\n   */\n  pos?: number\n}\n\n/**\n * @public\n */\nexport function selectTableCell(options?: SelectTableCellOptions): Command {\n  return (state, dispatch) => {\n    const $cellPos = findCellPos(\n      state.doc,\n      options?.pos ?? state.selection.anchor,\n    )\n    if (!$cellPos) {\n      return false\n    }\n    if (dispatch) {\n      const selection = new CellSelection($cellPos)\n      dispatch(state.tr.setSelection(selection))\n    }\n    return true\n  }\n}\n","import type { Command } from '@prosekit/pm/state'\nimport { CellSelection } from 'prosemirror-tables'\n\nimport { findCellRange } from '../table-utils.ts'\n\n/**\n * @public\n */\nexport interface SelectTableColumnOptions {\n  /**\n   * A hit position of the table cell to select from. By default, the selection\n   * anchor will be used.\n   */\n  anchor?: number\n\n  /**\n   * A hit position of the table cell to select to. By default, the selection\n   * head will be used.\n   */\n  head?: number\n}\n\n/**\n * @public\n */\nexport function selectTableColumn(options?: SelectTableColumnOptions): Command {\n  return (state, dispatch) => {\n    const range = findCellRange(state.selection, options?.anchor, options?.head)\n    if (!range) {\n      return false\n    }\n    if (dispatch) {\n      const [$anchorCell, $headCell] = range\n      const selection = CellSelection.colSelection($anchorCell, $headCell)\n      dispatch(state.tr.setSelection(selection))\n    }\n    return true\n  }\n}\n","import type { Command } from '@prosekit/pm/state'\nimport { CellSelection } from 'prosemirror-tables'\n\nimport { findCellRange } from '../table-utils.ts'\n\n/**\n * @public\n */\nexport interface SelectTableRowOptions {\n  /**\n   * A hit position of the table cell to select from. By default, the selection\n   * anchor will be used.\n   */\n  anchor?: number\n\n  /**\n   * A hit position of the table cell to select to. By default, the selection\n   * head will be used.\n   */\n  head?: number\n}\n\n/**\n * @public\n */\nexport function selectTableRow(options?: SelectTableRowOptions): Command {\n  return (state, dispatch) => {\n    const range = findCellRange(state.selection, options?.anchor, options?.head)\n    if (!range) {\n      return false\n    }\n    if (dispatch) {\n      const [$anchorCell, $headCell] = range\n      const selection = CellSelection.rowSelection($anchorCell, $headCell)\n      dispatch(state.tr.setSelection(selection))\n    }\n    return true\n  }\n}\n","import type { Command } from '@prosekit/pm/state'\nimport { CellSelection, TableMap } from 'prosemirror-tables'\n\nimport { findTable } from '../table-utils.ts'\n\n/**\n * @public\n */\nexport interface SelectTableOptions {\n  /**\n   * A hit position of the table to select from. By default, the selection\n   * anchor will be used.\n   */\n  pos?: number\n}\n\n/**\n * @public\n */\nexport function selectTable(options?: SelectTableOptions): Command {\n  return (state, dispatch) => {\n    const $pos = options?.pos\n      ? state.doc.resolve(options.pos)\n      : state.selection.$anchor\n    const table = findTable($pos)\n    if (!table) {\n      return false\n    }\n    const map = TableMap.get(table.node)\n    if (map.map.length === 0) {\n      return false\n    }\n    if (dispatch) {\n      let tr = state.tr\n      const firstCellPosInTable = map.map[0]\n      const lastCellPosInTable = map.map[map.map.length - 1]\n      const firstCellPos = table.pos + firstCellPosInTable + 1\n      const lastCellPos = table.pos + lastCellPosInTable + 1\n      const $firstCellPos = tr.doc.resolve(firstCellPos)\n      const $lastCellPos = tr.doc.resolve(lastCellPos)\n      const selection = new CellSelection($firstCellPos, $lastCellPos)\n      tr = tr.setSelection(selection)\n      dispatch?.(tr)\n    }\n    return true\n  }\n}\n","import { defineCommands, type Extension } from '@prosekit/core'\nimport {\n  addColumnAfter,\n  addColumnBefore,\n  addRowAfter,\n  addRowBefore,\n  deleteColumn,\n  deleteRow,\n  deleteTable,\n  mergeCells,\n  splitCell,\n} from 'prosemirror-tables'\n\nimport { deleteCellSelection } from './table-commands/delete-cell-selection.ts'\nimport { exitTable } from './table-commands/exit-table.ts'\nimport { insertTable, type InsertTableOptions } from './table-commands/insert-table.ts'\nimport { moveTableColumn, type MoveTableColumnOptions } from './table-commands/move-table-column.ts'\nimport { moveTableRow, type MoveTableRowOptions } from './table-commands/move-table-row.ts'\nimport { selectTableCell, type SelectTableCellOptions } from './table-commands/select-table-cell.ts'\nimport { selectTableColumn, type SelectTableColumnOptions } from './table-commands/select-table-column.ts'\nimport { selectTableRow, type SelectTableRowOptions } from './table-commands/select-table-row.ts'\nimport { selectTable, type SelectTableOptions } from './table-commands/select-table.ts'\n\n/**\n * @internal\n */\nexport type TableCommandsExtension = Extension<{\n  Commands: {\n    insertTable: [options: InsertTableOptions]\n    exitTable: []\n\n    selectTable: [options?: SelectTableOptions]\n    selectTableCell: [options?: SelectTableCellOptions]\n    selectTableColumn: [options?: SelectTableColumnOptions]\n    selectTableRow: [options?: SelectTableRowOptions]\n\n    addTableColumnBefore: []\n    addTableColumnAfter: []\n    addTableRowAbove: []\n    addTableRowBelow: []\n\n    deleteTable: []\n    deleteTableColumn: []\n    deleteTableRow: []\n    deleteCellSelection: []\n\n    mergeTableCells: []\n    splitTableCell: []\n\n    moveTableRow: [options: MoveTableRowOptions]\n    moveTableColumn: [options: MoveTableColumnOptions]\n  }\n}>\n\n/**\n * Adds commands for working with `table` nodes.\n *\n * @public\n */\nexport function defineTableCommands(): TableCommandsExtension {\n  return defineCommands({\n    insertTable,\n    exitTable: () => exitTable,\n\n    selectTable,\n    selectTableCell,\n    selectTableColumn,\n    selectTableRow,\n\n    addTableColumnBefore: () => addColumnBefore,\n    addTableColumnAfter: () => addColumnAfter,\n    addTableRowAbove: () => addRowBefore,\n    addTableRowBelow: () => addRowAfter,\n\n    deleteTable: () => deleteTable,\n    deleteTableColumn: () => deleteColumn,\n    deleteTableRow: () => deleteRow,\n    deleteCellSelection: () => deleteCellSelection,\n\n    mergeTableCells: () => mergeCells,\n    splitTableCell: () => splitCell,\n\n    moveTableRow,\n    moveTableColumn,\n  })\n}\n","import type { PlainExtension } from '@prosekit/core'\n\nimport type { DragEventHandler } from '../drop-indicator/index.ts'\nimport { defineDropIndicator } from '../drop-indicator/index.ts'\n\n/**\n * Hides the drop indicator when dragging a table column or row by using the\n * table handle.\n *\n * @internal\n */\nexport function defineTableDropIndicator(): PlainExtension {\n  return defineDropIndicator({\n    onDrag,\n  })\n}\n\nconst matchMap = new WeakMap<DataTransfer, boolean>()\n\nconst onDrag: DragEventHandler = ({ event }): boolean => {\n  const dataTransfer = event.dataTransfer\n  if (!dataTransfer) return true\n\n  let match: boolean\n\n  if (matchMap.has(dataTransfer)) {\n    match = matchMap.get(dataTransfer)!\n  } else {\n    // On Safari, accessing `dataTransfer.types` is more than 10x slower than in\n    // Chrome. This becomes a bottleneck when `onDrag` is called frequently, so\n    // we cache the result in a WeakMap.\n    const types = dataTransfer.types\n    match = types.includes('application/x-prosekit-table-handle-drag')\n    matchMap.set(dataTransfer, match)\n  }\n\n  // Don't show the drop indicator when the drag event has\n  // \"application/x-prosekit-table-handle-drag\" type.\n  return !match\n}\n","import { definePlugin, type PlainExtension } from '@prosekit/core'\nimport { columnResizing, tableEditing } from 'prosemirror-tables'\n\n/**\n * @public\n */\nexport function defineTablePlugins(): PlainExtension {\n  return definePlugin([tableEditing(), columnResizing()])\n}\n","import { defineNodeSpec, type Extension } from '@prosekit/core'\nimport type { AttributeSpec, Attrs } from '@prosekit/pm/model'\nimport { tableNodes } from 'prosemirror-tables'\n\nconst cellContent = 'block+'\n\n/**\n * @public\n */\nexport interface CellAttrs {\n  colspan?: number\n  rowspan?: number\n  colwidth?: number[] | null\n}\n\nconst cellAttrs = {\n  colspan: { default: 1 },\n  rowspan: { default: 1 },\n  colwidth: { default: null },\n} satisfies Record<string, AttributeSpec>\n\n/**\n * @internal\n */\nexport type TableSpecExtension = Extension<{\n  Nodes: {\n    table: Attrs\n  }\n}>\n\nconst specs = tableNodes({\n  tableGroup: 'block',\n  cellContent,\n  cellAttributes: {},\n})\n\n/**\n * @internal\n */\nexport function defineTableSpec(): TableSpecExtension {\n  return defineNodeSpec({\n    ...specs['table'],\n    content: 'tableRow+',\n    name: 'table',\n  })\n}\n\n/**\n * @internal\n */\nexport type TableRowSpecExtension = Extension<{\n  Nodes: {\n    tableRow: Attrs\n  }\n}>\n\n/**\n * @internal\n */\nexport function defineTableRowSpec(): TableRowSpecExtension {\n  return defineNodeSpec({\n    ...specs['table_row'],\n    content: '(tableCell | tableHeaderCell)*',\n    name: 'tableRow',\n  })\n}\n\n/**\n * @internal\n */\nexport type TableCellSpecExtension = Extension<{\n  Nodes: {\n    tableCell: CellAttrs\n  }\n}>\n\n/**\n * @internal\n */\nexport function defineTableCellSpec(): TableCellSpecExtension {\n  return defineNodeSpec({\n    ...specs['table_cell'],\n    name: 'tableCell',\n    attrs: cellAttrs,\n  })\n}\n\n/**\n * @internal\n */\nexport type TableHeaderCellSpecExtension = Extension<{\n  Nodes: {\n    tableHeaderCell: CellAttrs\n  }\n}>\n\nexport function defineTableHeaderCellSpec(): TableHeaderCellSpecExtension {\n  return defineNodeSpec({\n    ...specs['table_header'],\n    name: 'tableHeaderCell',\n    attrs: cellAttrs,\n  })\n}\n","import { union, type Union } from '@prosekit/core'\n\nimport { defineTableCommands, type TableCommandsExtension } from './table-commands.ts'\nimport { defineTableDropIndicator } from './table-drop-indicator.ts'\nimport { defineTablePlugins } from './table-plugins.ts'\nimport {\n  defineTableCellSpec,\n  defineTableHeaderCellSpec,\n  defineTableRowSpec,\n  defineTableSpec,\n  type TableCellSpecExtension,\n  type TableHeaderCellSpecExtension,\n  type TableRowSpecExtension,\n  type TableSpecExtension,\n} from './table-spec.ts'\n\n/**\n * @internal\n */\nexport type TableExtension = Union<\n  [\n    TableSpecExtension,\n    TableRowSpecExtension,\n    TableCellSpecExtension,\n    TableHeaderCellSpecExtension,\n    TableCommandsExtension,\n  ]\n>\n\n/**\n * @public\n */\nexport function defineTable(): TableExtension {\n  return union(\n    defineTableSpec(),\n    defineTableRowSpec(),\n    defineTableCellSpec(),\n    defineTableHeaderCellSpec(),\n    defineTablePlugins(),\n    defineTableCommands(),\n    defineTableDropIndicator(),\n  )\n}\n"],"mappings":"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"}

package/dist/virtual-selection/style.css

@@ -1,8 +1,5 @@
 .prosekit-virtual-selection {
-  border-radius: 2px;
   background-color: #8888884d;
+  border-radius: 2px;
   box-shadow: 0 0 0 2px #8888884d;
 }
-
-
-/*# sourceMappingURL=style.css.map*/

package/dist/yjs/style.css

@@ -1,34 +1,28 @@
 .ProseMirror .ProseMirror-yjs-cursor {
-  position: absolute;
-  height: 1em;
-  border-left: black;
-  border-left-width: 2px;
-  border-left-style: solid;
-  border-color: orange;
   word-break: normal;
   pointer-events: none;
+  border-color: orange;
+  border-left-style: solid;
+  border-left-width: 2px;
+  height: 1em;
+  position: absolute;
 }
 
 .ProseMirror .ProseMirror-yjs-cursor > div {
-  position: relative;
-  top: -1.05em;
-  padding-right: 2px;
+  color: #fff;
+  user-select: none;
+  background-color: #fa8100;
   padding-left: 2px;
-  background-color: rgb(250, 129, 0);
-  color: white;
+  padding-right: 2px;
+  font-family: serif;
+  font-size: 13px;
   font-style: normal;
   font-weight: normal;
-  font-size: 13px;
   line-height: normal;
-  font-family: serif;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+  position: relative;
+  top: -1.05em;
 }
+
 .ProseMirror > .ProseMirror-yjs-cursor:first-child {
   margin-top: 16px;
 }
-
-
-/*# sourceMappingURL=style.css.map*/

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/extensions",
   "type": "module",
-  "version": "0.14.2",
+  "version": "0.16.0-beta.0",
   "private": false,
   "description": "A collection of common extensions for ProseKit",
   "author": {
@@ -146,6 +146,13 @@
       "types": "./dist/prosekit-extensions-mod-click-prevention.d.ts",
       "default": "./dist/prosekit-extensions-mod-click-prevention.js"
     },
+    "./page": {
+      "types": "./dist/prosekit-extensions-page.d.ts",
+      "default": "./dist/prosekit-extensions-page.js"
+    },
+    "./page/style.css": {
+      "default": "./dist/page/style.css"
+    },
     "./paragraph": {
       "types": "./dist/prosekit-extensions-paragraph.d.ts",
       "default": "./dist/prosekit-extensions-paragraph.js"
@@ -219,19 +226,20 @@
     "src"
   ],
   "dependencies": {
-    "@ocavue/utils": "^1.5.0",
+    "@ocavue/utils": "^1.6.0",
     "prosemirror-changeset": "^2.4.0",
     "prosemirror-drop-indicator": "^0.1.3",
     "prosemirror-dropcursor": "^1.8.2",
     "prosemirror-enter-rules": "^0.1.5",
     "prosemirror-flat-list": "^0.5.8",
-    "prosemirror-gapcursor": "^1.4.0",
-    "prosemirror-highlight": "^0.15.0",
+    "prosemirror-gapcursor": "^1.4.1",
+    "prosemirror-highlight": "^0.15.1",
     "prosemirror-math": "^0.2.2",
     "prosemirror-search": "^1.1.0",
     "prosemirror-tables": "^1.8.5",
-    "shiki": "^3.22.0",
-    "@prosekit/core": "^0.10.0",
+    "server-dom-shim": "^1.1.0",
+    "shiki": "^3.22.0 || ^4.0.0",
+    "@prosekit/core": "^0.12.0-beta.0",
     "@prosekit/pm": "^0.1.15"
   },
   "peerDependencies": {
@@ -257,8 +265,8 @@
   "devDependencies": {
     "diffable-html-snapshot": "^0.2.0",
     "just-pick": "^4.2.0",
-    "katex": "^0.16.28",
-    "loro-crdt": "^1.10.6",
+    "katex": "^0.16.40",
+    "loro-crdt": "^1.10.8",
     "loro-prosemirror": "^0.4.3",
     "rehype-parse": "^9.0.1",
     "rehype-remark": "^10.0.1",
@@ -266,17 +274,17 @@
     "remark-html": "^16.0.1",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
-    "tsdown": "^0.20.3",
-    "type-fest": "^5.4.4",
+    "tsdown": "^0.21.4",
+    "type-fest": "^5.5.0",
     "typescript": "~5.9.3",
     "unified": "^11.0.5",
-    "vitest": "^4.1.0-beta.4",
+    "vitest": "^4.1.1",
     "vitest-browser-commands": "^0.2.0",
     "y-prosemirror": "^1.3.7",
-    "yjs": "^13.6.29",
+    "yjs": "^13.6.30",
+    "@prosekit/config-ts": "0.0.0",
     "@prosekit/config-tsdown": "0.0.0",
-    "@prosekit/config-vitest": "0.0.0",
-    "@prosekit/config-ts": "0.0.0"
+    "@prosekit/config-vitest": "0.0.0"
   },
   "publishConfig": {
     "dev": {}
@@ -314,6 +322,8 @@
       "prosekit-extensions-math": "./src/math/index.ts",
       "prosekit-extensions-mention": "./src/mention/index.ts",
       "prosekit-extensions-mod-click-prevention": "./src/mod-click-prevention/index.ts",
+      "prosekit-extensions-page": "./src/page/index.ts",
+      "page/style": "./src/page/style.css",
       "prosekit-extensions-paragraph": "./src/paragraph/index.ts",
       "prosekit-extensions-paste-rule": "./src/paste-rule/index.ts",
       "prosekit-extensions-placeholder": "./src/placeholder/index.ts",
@@ -422,6 +432,9 @@
       "mod-click-prevention": [
         "./dist/prosekit-extensions-mod-click-prevention.d.ts"
       ],
+      "page": [
+        "./dist/prosekit-extensions-page.d.ts"
+      ],
       "paragraph": [
         "./dist/prosekit-extensions-paragraph.d.ts"
       ],

package/src/horizontal-rule/horizontal-rule-commands.ts

@@ -15,7 +15,8 @@ const insertHorizontalRuleCommand: Command = (state, dispatch): boolean => {
   const type = getNodeType(schema, 'horizontalRule')
   const node = type.createChecked()
   const pos = tr.selection.anchor
-  tr.replaceRange(pos, pos, new Slice(Fragment.from(node), 0, 0))
+  const slice = new Slice(Fragment.from(node), 0, 0)
+  tr.replaceRange(pos, pos, slice).scrollIntoView()
   dispatch(tr)
   return true
 }

package/src/loro/loro.ts

@@ -1,4 +1,5 @@
-import { Priority, union, withPriority, type PlainExtension, type Union } from '@prosekit/core'
+import type { Priority } from '@prosekit/core'
+import { union, withPriority, type PlainExtension, type Union } from '@prosekit/core'
 import type {
   CursorAwareness,
   CursorEphemeralStore,
@@ -65,6 +66,6 @@ export function defineLoro(options: LoroOptions): LoroExtension {
       defineLoroUndoPlugin({ ...undo, doc }),
       defineLoroSyncPlugin({ ...sync, doc }),
     ]),
-    Priority.high,
+    3 satisfies typeof Priority.high,
   )
 }

package/src/page/index.ts

@@ -0,0 +1,5 @@
+export { definePageBreakCommands, insertPageBreak, type PageBreakCommandsExtension } from './page-break-commands.ts'
+export { definePageBreakKeymap, type PageBreakKeymapExtension } from './page-break-keymap.ts'
+export { definePageBreakSpec, type PageBreakSpecExtension } from './page-break-spec.ts'
+export { definePageBreak, type PageBreakExtension } from './page-break.ts'
+export { definePageRendering, type PageRenderingExtension, type PageRenderingOptions } from './page-rendering.ts'

package/src/page/page-break-commands.spec.ts

@@ -0,0 +1,61 @@
+import { union } from '@prosekit/core'
+import { describe, expect, it } from 'vitest'
+
+import { defineDoc } from '../doc/index.ts'
+import { defineHardBreak } from '../hard-break/index.ts'
+import { defineHorizontalRule } from '../horizontal-rule/index.ts'
+import { defineParagraph } from '../paragraph/index.ts'
+import { setupTestFromExtension } from '../testing/index.ts'
+import { defineText } from '../text/index.ts'
+
+import { definePageBreak } from './page-break.ts'
+
+function setup() {
+  const extension = union(
+    defineDoc(),
+    defineText(),
+    defineParagraph(),
+    defineHorizontalRule(),
+    defineHardBreak(),
+    definePageBreak(),
+  )
+  return setupTestFromExtension(extension)
+}
+
+describe('insertPageBreak', () => {
+  it('should insert a page break in an empty paragraph', () => {
+    const { editor, n } = setup()
+    editor.set(n.doc(n.paragraph('<a>')))
+    editor.commands.insertPageBreak()
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.pageBreak()).toJSON(),
+    )
+  })
+
+  it('should insert a page break after text', () => {
+    const { editor, n } = setup()
+    editor.set(n.doc(n.paragraph('hello<a>')))
+    editor.commands.insertPageBreak()
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.paragraph('hello'), n.pageBreak()).toJSON(),
+    )
+  })
+
+  it('should insert a page break before text', () => {
+    const { editor, n } = setup()
+    editor.set(n.doc(n.paragraph('<a>hello')))
+    editor.commands.insertPageBreak()
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.pageBreak(), n.paragraph('hello')).toJSON(),
+    )
+  })
+
+  it('should insert a page break between text', () => {
+    const { editor, n } = setup()
+    editor.set(n.doc(n.paragraph('hel<a>lo')))
+    editor.commands.insertPageBreak()
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.paragraph('hel'), n.pageBreak(), n.paragraph('lo')).toJSON(),
+    )
+  })
+})

package/src/page/page-break-commands.ts

@@ -0,0 +1,41 @@
+import { defineCommands, getNodeType, type Extension } from '@prosekit/core'
+import { Fragment, Slice } from '@prosekit/pm/model'
+import type { Command } from '@prosekit/pm/state'
+
+/**
+ * @internal
+ */
+export type PageBreakCommandsExtension = Extension<{
+  Commands: {
+    insertPageBreak: []
+  }
+}>
+
+const insertPageBreakCommand: Command = (state, dispatch): boolean => {
+  if (!dispatch) return true
+
+  const { schema, tr } = state
+  const type = getNodeType(schema, 'pageBreak')
+  const node = type.createChecked()
+  const pos = tr.selection.anchor
+  const slice = new Slice(Fragment.from(node), 0, 0)
+  tr.replaceRange(pos, pos, slice).scrollIntoView()
+  dispatch(tr)
+  return true
+}
+
+/**
+ * @internal
+ */
+export function insertPageBreak(): Command {
+  return insertPageBreakCommand
+}
+
+/**
+ * @internal
+ */
+export function definePageBreakCommands(): PageBreakCommandsExtension {
+  return defineCommands({
+    insertPageBreak: insertPageBreak,
+  })
+}

package/src/page/page-break-keymap.ts

@@ -0,0 +1,17 @@
+import { defineKeymap, type PlainExtension } from '@prosekit/core'
+
+import { insertPageBreak } from './page-break-commands.ts'
+
+/**
+ * @internal
+ */
+export type PageBreakKeymapExtension = PlainExtension
+
+/**
+ * @internal
+ */
+export function definePageBreakKeymap(): PageBreakKeymapExtension {
+  return defineKeymap({
+    'Mod-Enter': insertPageBreak(),
+  })
+}

package/src/page/page-break-spec.ts

@@ -0,0 +1,33 @@
+import { defineNodeSpec, type Extension } from '@prosekit/core'
+import type { Attrs } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export type PageBreakSpecExtension = Extension<{
+  Nodes: {
+    pageBreak: Attrs
+  }
+}>
+
+/**
+ * @internal
+ */
+export function definePageBreakSpec(): PageBreakSpecExtension {
+  return defineNodeSpec({
+    name: 'pageBreak',
+    group: 'block',
+    selectable: true,
+    parseDOM: [{ tag: 'div.prosekit-page-break' }],
+    toDOM() {
+      return ['div', { class: 'prosekit-horizontal-rule prosekit-page-break' }, ['hr']]
+    },
+    pageBreak: true,
+  })
+}
+
+declare module '@prosekit/pm/model' {
+  interface NodeSpec {
+    pageBreak?: boolean | undefined
+  }
+}

package/src/page/page-break.ts

@@ -0,0 +1,23 @@
+import { union, type Union } from '@prosekit/core'
+
+import { definePageBreakCommands, type PageBreakCommandsExtension } from './page-break-commands.ts'
+import { definePageBreakKeymap, type PageBreakKeymapExtension } from './page-break-keymap.ts'
+import { definePageBreakSpec, type PageBreakSpecExtension } from './page-break-spec.ts'
+
+/**
+ * @internal
+ */
+export type PageBreakExtension = Union<
+  [PageBreakSpecExtension, PageBreakCommandsExtension, PageBreakKeymapExtension]
+>
+
+/**
+ * @public
+ */
+export function definePageBreak(): PageBreakExtension {
+  return union(
+    definePageBreakSpec(),
+    definePageBreakCommands(),
+    definePageBreakKeymap(),
+  )
+}

package/src/page/page-element.ts

@@ -0,0 +1,246 @@
+import { once } from '@ocavue/utils'
+import { customElements, HTMLElement } from 'server-dom-shim'
+
+/**
+ * @internal
+ */
+export const PAGE_CHUNK_TAG_NAME = 'pm-page-chunk'
+
+/**
+ * @internal
+ */
+export const registerPageChunkElement: VoidFunction = /* @__PURE__ */ once(() => {
+  if (typeof window === 'undefined' || customElements.get(PAGE_CHUNK_TAG_NAME)) return
+  customElements.define(PAGE_CHUNK_TAG_NAME, PageChunkElement)
+})
+
+class PageChunkElement extends HTMLElement {
+  static observedAttributes = [
+    'data-group',
+    'data-break',
+    'data-h',
+    'data-mt',
+    'data-mb',
+
+    // Only the first chunk of the whole document has this attribute.
+    'data-size',
+  ]
+
+  // Data attributes set by external code
+  #group: string = ''
+  #forceNextBreak: boolean = false
+  #pageHeight: number = 0
+  #pageMarginTop: number = 0
+  #pageMarginBottom: number = 0
+  #size: number | undefined = undefined
+
+  // Internal states
+  #updateRequested: boolean = false
+  #contentBoxHeight: number = 0
+
+  // Rendering states
+  #isHead: boolean = false
+  #isTail: boolean = false
+  #paddingTop: number = 0
+  #paddingBottom: number = 0
+
+  // Pending rendering states
+  #isHeadPending: boolean = false
+  #isTailPending: boolean = false
+  #paddingTopPending: number = 0
+  #paddingBottomPending: number = 0
+
+  connectedCallback() {
+    this.#parseDataAttributes()
+
+    if (this.#isLeader()) {
+      this.#isHeadPending = true
+    }
+
+    this.#render()
+
+    // Get the initial content box height when the resize observer is not started yet. Notice that
+    // `this.clientHeight` is an integer while the content box height can be a float, so this is not
+    // accurate but should be good enough for the first render.
+    this.#contentBoxHeight = this.clientHeight - this.#paddingTop - this.#paddingBottom
+
+    observeElement(this)
+
+    this.#requestUpdate()
+  }
+
+  disconnectedCallback() {
+    unobserveElement(this)
+  }
+
+  attributeChangedCallback(_: string, oldValue: string | null, newValue: string | null) {
+    if (oldValue === newValue) return
+    this.#parseDataAttributes()
+    this.#requestUpdate()
+  }
+
+  #parseDataAttributes() {
+    this.#group = this.getAttribute('data-group') || ''
+    this.#forceNextBreak = this.hasAttribute('data-break')
+    this.#pageHeight = this.#parseFloatAttribute('data-h')
+    this.#pageMarginTop = this.#parseFloatAttribute('data-mt')
+    this.#pageMarginBottom = this.#parseFloatAttribute('data-mb')
+
+    const sizeAttr = this.getAttribute('data-size')
+    this.#size = sizeAttr ? Number.parseInt(sizeAttr, 10) : undefined
+  }
+
+  #parseFloatAttribute(name: string): number {
+    const value = this.getAttribute(name)
+    return value != null ? Number.parseFloat(value) : 0
+  }
+
+  #isLeader() {
+    return this.#size != null
+  }
+
+  #render() {
+    if (this.#paddingTop !== this.#paddingTopPending || this.#paddingBottom !== this.#paddingBottomPending) {
+      Object.assign(this.style, {
+        paddingTop: `${this.#paddingTop = this.#paddingTopPending}px`,
+        paddingBottom: `${this.#paddingBottom = this.#paddingBottomPending}px`,
+      })
+    }
+    if (this.#isHead !== this.#isHeadPending) {
+      this.toggleAttribute('data-page-head', this.#isHead = this.#isHeadPending)
+    }
+    if (this.#isTail !== this.#isTailPending) {
+      this.toggleAttribute('data-page-tail', this.#isTail = this.#isTailPending)
+    }
+  }
+
+  setHeight(height: number) {
+    // Avoid potential float number precision issues
+    if (Math.abs(this.#contentBoxHeight - height) < 0.1) {
+      return
+    }
+    this.#contentBoxHeight = height
+    this.#requestUpdate()
+  }
+
+  /**
+   * Schedules a batched page layout recalculation.
+   *
+   * Any chunk can call this method, but the actual layout work (#updateAll)
+   * always runs on the leader chunk, because it needs to iterate over every
+   * chunk in order to compute page breaks.
+   *
+   * Two nested microtasks are used to batch updates:
+   *
+   *   Microtask 1 – Delegation: non-leader chunks forward the request to the
+   *   leader chunk, so multiple chunks changing in the same tick only trigger
+   *   one layout pass.
+   *
+   *   Microtask 2 – Execution: the leader chunk defers #updateAll to a second
+   *   microtask so that any other attribute / resize changes that were queued
+   *   in the same tick (and forwarded during microtask 1) are already reflected
+   *   before the layout is recalculated.
+   *
+   * The #updateRequested flag acts as a deduplication guard so that rapid
+   * successive calls (e.g. multiple attributes changing at once) result in at
+   * most one scheduled pass per chunk.
+   */
+  #requestUpdate() {
+    if (this.#updateRequested) {
+      return
+    }
+
+    this.#updateRequested = true
+    queueMicrotask(() => {
+      if (!this.#isLeader()) {
+        this.#updateRequested = false
+        const leader = findLeaderChunk(this, this.#group)
+        if (!leader) return
+        leader.#requestUpdate()
+        return
+      }
+      queueMicrotask(() => {
+        this.#updateRequested = false
+        this.#updateAll()
+      })
+    })
+  }
+
+  #updateAll() {
+    if (!this.isConnected) {
+      return
+    }
+
+    const elements = findAllChunks(this, this.#group)
+    const count = elements.length
+    if (count === 0) return
+
+    const pageHeight = this.#pageHeight
+    const pageMarginTop = this.#pageMarginTop
+    const maxContentHeight = pageHeight - pageMarginTop - this.#pageMarginBottom
+
+    let currentContentHeight = 0
+    let forceNextBreak = false
+
+    for (let i = 0; i < count; i++) {
+      const element = elements[i]
+      const h = element.#contentBoxHeight
+      const isHead = forceNextBreak || i === 0 || (currentContentHeight + h > maxContentHeight)
+
+      forceNextBreak = element.#forceNextBreak
+
+      if (isHead && i > 0) {
+        const prev = elements[i - 1]
+        prev.#paddingBottomPending = Math.max(0, pageHeight - pageMarginTop - currentContentHeight)
+        prev.#isTailPending = true
+        currentContentHeight = h
+      } else {
+        currentContentHeight += h
+      }
+
+      element.#paddingTopPending = isHead ? pageMarginTop : 0
+      element.#paddingBottomPending = 0
+      element.#isTailPending = false
+      element.#isHeadPending = isHead
+    }
+
+    const last = elements[count - 1]
+    last.#paddingBottomPending = Math.max(0, pageHeight - pageMarginTop - currentContentHeight)
+    last.#isTailPending = true
+
+    for (const element of elements) {
+      element.#render()
+    }
+  }
+}
+
+function handleResize(entries: ResizeObserverEntry[]) {
+  for (const entry of entries) {
+    const contentBoxHeight = entry.contentBoxSize?.[0]?.blockSize ?? entry.contentRect.height
+    const element = entry.target as PageChunkElement
+    element.setHeight(contentBoxHeight)
+  }
+}
+
+const getResizeObserver = /* @__PURE__ */ once(() => {
+  return new ResizeObserver(handleResize)
+})
+
+function observeElement(element: PageChunkElement) {
+  getResizeObserver().observe(element)
+}
+
+function unobserveElement(element: PageChunkElement) {
+  getResizeObserver().unobserve(element)
+}
+
+function findLeaderChunk(element: HTMLElement, group: string): PageChunkElement | null | undefined {
+  const root = element.closest('.ProseMirror')
+  return root?.querySelector<PageChunkElement>(`${PAGE_CHUNK_TAG_NAME}[data-group="${group}"][data-size]`)
+}
+
+function findAllChunks(element: HTMLElement, group: string): PageChunkElement[] {
+  const root = element.closest('.ProseMirror')
+  const elements = root?.querySelectorAll<PageChunkElement>(`${PAGE_CHUNK_TAG_NAME}[data-group="${group}"]`)
+  return Array.from(elements || [])
+}