@prosekit/extensions 0.13.0 → 0.14.0

package/dist/table-4oHfV-Ql.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-4oHfV-Ql.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.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.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, TableMap } from 'prosemirror-tables'\n\nimport { findTable } from '../table-utils'\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 type { Command } from '@prosekit/pm/state'\nimport { CellSelection } from 'prosemirror-tables'\n\nimport { findCellPos } from '../table-utils'\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'\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'\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 { 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'\nimport { exitTable } from './table-commands/exit-table'\nimport { insertTable, type InsertTableOptions } from './table-commands/insert-table'\nimport { moveTableColumn, type MoveTableColumnOptions } from './table-commands/move-table-column'\nimport { moveTableRow, type MoveTableRowOptions } from './table-commands/move-table-row'\nimport { selectTable, type SelectTableOptions } from './table-commands/select-table'\nimport { selectTableCell, type SelectTableCellOptions } from './table-commands/select-table-cell'\nimport { selectTableColumn, type SelectTableColumnOptions } from './table-commands/select-table-column'\nimport { selectTableRow, type SelectTableRowOptions } from './table-commands/select-table-row'\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'\nimport { defineDropIndicator } from '../drop-indicator'\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'\nimport { defineTableDropIndicator } from './table-drop-indicator'\nimport { defineTablePlugins } from './table-plugins'\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'\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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/extensions",
   "type": "module",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "private": false,
   "description": "A collection of common extensions for ProseKit",
   "author": {
@@ -34,6 +34,10 @@
       "types": "./dist/prosekit-extensions-autocomplete.d.ts",
       "default": "./dist/prosekit-extensions-autocomplete.js"
     },
+    "./background-color": {
+      "types": "./dist/prosekit-extensions-background-color.d.ts",
+      "default": "./dist/prosekit-extensions-background-color.js"
+    },
     "./blockquote": {
       "types": "./dist/prosekit-extensions-blockquote.d.ts",
       "default": "./dist/prosekit-extensions-blockquote.js"
@@ -183,6 +187,10 @@
       "types": "./dist/prosekit-extensions-text-align.d.ts",
       "default": "./dist/prosekit-extensions-text-align.js"
     },
+    "./text-color": {
+      "types": "./dist/prosekit-extensions-text-color.d.ts",
+      "default": "./dist/prosekit-extensions-text-color.js"
+    },
     "./underline": {
       "types": "./dist/prosekit-extensions-underline.d.ts",
       "default": "./dist/prosekit-extensions-underline.js"
@@ -207,7 +215,7 @@
     "src"
   ],
   "dependencies": {
-    "@ocavue/utils": "^1.2.0",
+    "@ocavue/utils": "^1.4.0",
     "prosemirror-changeset": "^2.3.1",
     "prosemirror-drop-indicator": "^0.1.3",
     "prosemirror-dropcursor": "^1.8.2",
@@ -215,9 +223,9 @@
     "prosemirror-gapcursor": "^1.4.0",
     "prosemirror-highlight": "^0.13.0",
     "prosemirror-search": "^1.1.0",
-    "prosemirror-tables": "^1.8.3",
-    "shiki": "^3.19.0",
-    "@prosekit/core": "^0.9.0",
+    "prosemirror-tables": "^1.8.5",
+    "shiki": "^3.22.0",
+    "@prosekit/core": "^0.10.0",
     "@prosekit/pm": "^0.1.15"
   },
   "peerDependencies": {
@@ -241,26 +249,24 @@
     }
   },
   "devDependencies": {
-    "@types/diffable-html": "^5.0.2",
-    "diffable-html": "^6.0.1",
+    "diffable-html-snapshot": "^0.2.0",
     "just-pick": "^4.2.0",
-    "loro-crdt": "^1.10.2",
-    "loro-prosemirror": "^0.4.1",
+    "loro-crdt": "^1.10.5",
+    "loro-prosemirror": "^0.4.2",
     "rehype-parse": "^9.0.1",
     "rehype-remark": "^10.0.1",
     "remark-gfm": "^4.0.1",
     "remark-html": "^16.0.1",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
-    "tsdown": "^0.17.0",
-    "type-fest": "^5.3.1",
+    "tsdown": "^0.20.1",
+    "type-fest": "^5.4.3",
     "typescript": "~5.9.3",
     "unified": "^11.0.5",
-    "vitest": "^4.0.15",
+    "vitest": "^4.0.18",
     "vitest-browser-commands": "^0.2.0",
     "y-prosemirror": "^1.3.7",
-    "y-protocols": "^1.0.6",
-    "yjs": "^13.6.27",
+    "yjs": "^13.6.29",
     "@prosekit/config-tsdown": "0.0.0",
     "@prosekit/config-vitest": "0.0.0"
   },
@@ -271,6 +277,7 @@
     "entry": {
       "prosekit-extensions": "./src/index.ts",
       "prosekit-extensions-autocomplete": "./src/autocomplete/index.ts",
+      "prosekit-extensions-background-color": "./src/background-color/index.ts",
       "prosekit-extensions-blockquote": "./src/blockquote/index.ts",
       "prosekit-extensions-bold": "./src/bold/index.ts",
       "prosekit-extensions-code": "./src/code/index.ts",
@@ -310,6 +317,7 @@
       "table/style": "./src/table/style.css",
       "prosekit-extensions-text": "./src/text/index.ts",
       "prosekit-extensions-text-align": "./src/text-align/index.ts",
+      "prosekit-extensions-text-color": "./src/text-color/index.ts",
       "prosekit-extensions-underline": "./src/underline/index.ts",
       "prosekit-extensions-virtual-selection": "./src/virtual-selection/index.ts",
       "virtual-selection/style": "./src/virtual-selection/style.css",
@@ -330,6 +338,9 @@
       "autocomplete": [
         "./dist/prosekit-extensions-autocomplete.d.ts"
       ],
+      "background-color": [
+        "./dist/prosekit-extensions-background-color.d.ts"
+      ],
       "blockquote": [
         "./dist/prosekit-extensions-blockquote.d.ts"
       ],
@@ -426,6 +437,9 @@
       "text-align": [
         "./dist/prosekit-extensions-text-align.d.ts"
       ],
+      "text-color": [
+        "./dist/prosekit-extensions-text-color.d.ts"
+      ],
       "underline": [
         "./dist/prosekit-extensions-underline.d.ts"
       ],

package/src/autocomplete/autocomplete-helpers.ts

@@ -1,9 +1,5 @@
 import type { ResolvedPos } from '@prosekit/pm/model'
-import {
-  PluginKey,
-  type EditorState,
-  type Transaction,
-} from '@prosekit/pm/state'
+import { PluginKey, type EditorState, type Transaction } from '@prosekit/pm/state'
 
 import type { AutocompleteRule } from './autocomplete-rule'
 

package/src/autocomplete/autocomplete-plugin.ts

@@ -1,19 +1,9 @@
 import { OBJECT_REPLACEMENT_CHARACTER } from '@prosekit/core'
-import type {
-  ProseMirrorNode,
-  ResolvedPos,
-} from '@prosekit/pm/model'
-import {
-  Plugin,
-  type EditorState,
-  type Transaction,
-} from '@prosekit/pm/state'
+import type { ProseMirrorNode, ResolvedPos } from '@prosekit/pm/model'
+import { Plugin, type EditorState, type Transaction } from '@prosekit/pm/state'
 import type { Mapping } from '@prosekit/pm/transform'
 import type { EditorView } from '@prosekit/pm/view'
-import {
-  Decoration,
-  DecorationSet,
-} from '@prosekit/pm/view'
+import { Decoration, DecorationSet } from '@prosekit/pm/view'
 
 import {
   getPluginState,

package/src/autocomplete/autocomplete.spec.ts

@@ -1,27 +1,12 @@
-import {
-  canUseRegexLookbehind,
-  union,
-} from '@prosekit/core'
-import {
-  describe,
-  expect,
-  it,
-  vi,
-} from 'vitest'
+import { canUseRegexLookbehind, union } from '@prosekit/core'
+import { describe, expect, it, vi } from 'vitest'
 import { keyboard } from 'vitest-browser-commands/playwright'
 
-import {
-  defineTestExtension,
-  setupTestFromExtension,
-} from '../testing'
+import { defineTestExtension, setupTestFromExtension } from '../testing'
 import { inputText } from '../testing/keyboard'
 
 import { defineAutocomplete } from './autocomplete'
-import {
-  AutocompleteRule,
-  type MatchHandler,
-  type MatchHandlerOptions,
-} from './autocomplete-rule'
+import { AutocompleteRule, type MatchHandler, type MatchHandlerOptions } from './autocomplete-rule'
 
 function setupSlashMenu() {
   const regex = canUseRegexLookbehind() ? /(?<!\S)\/(\S.*)?$/u : /\/(\S.*)?$/u

package/src/autocomplete/autocomplete.ts

@@ -1,10 +1,4 @@
-import {
-  defineFacet,
-  defineFacetPayload,
-  pluginFacet,
-  type Extension,
-  type PluginPayload,
-} from '@prosekit/core'
+import { defineFacet, defineFacetPayload, pluginFacet, type Extension, type PluginPayload } from '@prosekit/core'
 
 import { createAutocompletePlugin } from './autocomplete-plugin'
 import type { AutocompleteRule } from './autocomplete-rule'

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

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

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

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

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

@@ -0,0 +1,286 @@
+import { formatHTML } from 'diffable-html-snapshot'
+import { describe, expect, it } from 'vitest'
+
+import { setupTest } from '../testing'
+
+describe('defineBackgroundColorSpec', () => {
+  it('should render background color as inline span with style attribute', () => {
+    const { editor, n, m } = setupTest()
+
+    const doc = n.doc(
+      n.p(
+        'Default',
+        m.backgroundColor({ color: '#0000ff' }, 'hex'),
+        m.backgroundColor({ color: 'blue' }, 'named'),
+        m.backgroundColor({ color: 'rgb(0, 0, 255)' }, 'rgb'),
+        m.backgroundColor({ color: 'rgba(0 0 255 / 0.5)' }, 'rgba'),
+        m.backgroundColor({ color: 'hsl(240 100% 50% / 0.5)' }, 'hsl'),
+        m.backgroundColor({ color: 'var(--color-variable)' }, 'variable'),
+      ),
+    )
+    editor.set(doc)
+    expect(formatHTML(editor.view.dom.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <p>
+        Default
+        <span
+          data-background-color="#0000ff"
+          style="background-color: rgb(0, 0, 255);"
+        >
+          hex
+        </span>
+        <span
+          data-background-color="blue"
+          style="background-color: blue;"
+        >
+          named
+        </span>
+        <span
+          data-background-color="rgb(0, 0, 255)"
+          style="background-color: rgb(0, 0, 255);"
+        >
+          rgb
+        </span>
+        <span
+          data-background-color="rgba(0 0 255 / 0.5)"
+          style="background-color: rgba(0, 0, 255, 0.5);"
+        >
+          rgba
+        </span>
+        <span
+          data-background-color="hsl(240 100% 50% / 0.5)"
+          style="background-color: rgba(0, 0, 255, 0.5);"
+        >
+          hsl
+        </span>
+        <span
+          data-background-color="var(--color-variable)"
+          style="background-color: var(--color-variable);"
+        >
+          variable
+        </span>
+      </p>
+      "
+      `,
+    )
+  })
+
+  it('should parse background color from style attribute', () => {
+    const { editor } = setupTest()
+
+    const html = `<p><span style="background-color: #0000ff;">text</span></p>`
+    editor.setContent(html)
+    expect(editor.state.doc.firstChild?.firstChild?.toJSON()).toMatchInlineSnapshot(`
+      {
+        "marks": [
+          {
+            "attrs": {
+              "color": "rgb(0, 0, 255)",
+            },
+            "type": "backgroundColor",
+          },
+        ],
+        "text": "text",
+        "type": "text",
+      }
+    `)
+  })
+
+  it('should parse background color from data-background-color attribute', () => {
+    const { editor } = setupTest()
+
+    const html = `<p><span data-background-color="rgb(0 0 255 / 0.5)">text</span></p>`
+    editor.setContent(html)
+    expect(editor.state.doc.firstChild?.firstChild?.toJSON()).toMatchInlineSnapshot(`
+      {
+        "marks": [
+          {
+            "attrs": {
+              "color": "rgb(0 0 255 / 0.5)",
+            },
+            "type": "backgroundColor",
+          },
+        ],
+        "text": "text",
+        "type": "text",
+      }
+    `)
+  })
+
+  it('should prioritize data-background-color attribute over style attribute', () => {
+    const { editor } = setupTest()
+
+    const html = `<p><span style="background-color: blue;" data-background-color="red">This should be red</span></p>`
+    editor.setContent(html)
+    expect(editor.state.doc.firstChild?.firstChild?.toJSON()).toMatchInlineSnapshot(`
+      {
+        "marks": [
+          {
+            "attrs": {
+              "color": "red",
+            },
+            "type": "backgroundColor",
+          },
+        ],
+        "text": "This should be red",
+        "type": "text",
+      }
+    `)
+  })
+
+  it('should not parse span with background-color: inherit', () => {
+    const { editor } = setupTest()
+
+    const html = '<p><span style="background-color: inherit">text</span></p>'
+    editor.setContent(html)
+    expect(editor.state.doc.firstChild?.firstChild?.toJSON()).toMatchInlineSnapshot(`
+      {
+        "text": "text",
+        "type": "text",
+      }
+    `)
+
+    const html2 = '<p><span data-background-color="inherit">text</span></p>'
+    editor.setContent(html2)
+    expect(editor.state.doc.firstChild?.firstChild?.toJSON()).toMatchInlineSnapshot(`
+      {
+        "text": "text",
+        "type": "text",
+      }
+    `)
+  })
+
+  it('should preserve both background-color and text-color marks', () => {
+    const { editor, n, m } = setupTest()
+
+    const doc = n.doc(
+      n.p(
+        m.backgroundColor(
+          { color: 'yellow' },
+          m.textColor({ color: 'red' }, 'colored text'),
+        ),
+      ),
+    )
+    editor.set(doc)
+    expect(formatHTML(editor.view.dom.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <p>
+        <span
+          data-background-color="yellow"
+          style="background-color: yellow;"
+        >
+          <span
+            data-text-color="red"
+            style="color: red;"
+          >
+            colored text
+          </span>
+        </span>
+      </p>
+      "
+      `,
+    )
+  })
+
+  it('should preserve background-color mark when parsing HTML with both marks', () => {
+    const { editor } = setupTest()
+
+    const html = '<p>'
+      + '<span style="background-color: yellow;">'
+      + '<span style="color: red;">colored text</span>'
+      + '</span>'
+      + '</p>'
+
+    editor.setContent(html)
+    expect(editor.state.doc.firstChild?.firstChild?.toJSON()).toMatchInlineSnapshot(`
+      {
+        "marks": [
+          {
+            "attrs": {
+              "color": "yellow",
+            },
+            "type": "backgroundColor",
+          },
+          {
+            "attrs": {
+              "color": "red",
+            },
+            "type": "textColor",
+          },
+        ],
+        "text": "colored text",
+        "type": "text",
+      }
+    `)
+  })
+
+  it('should handle background color on partial text selection', () => {
+    const { editor, n, m } = setupTest()
+
+    const doc = n.doc(
+      n.p(
+        'Start ',
+        m.backgroundColor({ color: 'yellow' }, 'highlighted'),
+        ' end',
+      ),
+    )
+    editor.set(doc)
+    expect(formatHTML(editor.view.dom.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <p>
+        Start
+        <span
+          data-background-color="yellow"
+          style="background-color: yellow;"
+        >
+          highlighted
+        </span>
+        end
+      </p>
+      "
+      `,
+    )
+  })
+
+  it('should handle multiple adjacent background colors', () => {
+    const { editor, n, m } = setupTest()
+
+    const doc = n.doc(
+      n.p(
+        m.backgroundColor({ color: 'yellow' }, 'yellow'),
+        m.backgroundColor({ color: 'green' }, 'green'),
+        m.backgroundColor({ color: 'blue' }, 'blue'),
+      ),
+    )
+    editor.set(doc)
+    expect(formatHTML(editor.view.dom.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <p>
+        <span
+          data-background-color="yellow"
+          style="background-color: yellow;"
+        >
+          yellow
+        </span>
+        <span
+          data-background-color="green"
+          style="background-color: green;"
+        >
+          green
+        </span>
+        <span
+          data-background-color="blue"
+          style="background-color: blue;"
+        >
+          blue
+        </span>
+      </p>
+      "
+      `,
+    )
+  })
+})