@prosekit/extensions 0.13.0 → 0.14.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/extensions",
   "type": "module",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "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"
@@ -130,6 +134,10 @@
       "types": "./dist/prosekit-extensions-mark-rule.d.ts",
       "default": "./dist/prosekit-extensions-mark-rule.js"
     },
+    "./math": {
+      "types": "./dist/prosekit-extensions-math.d.ts",
+      "default": "./dist/prosekit-extensions-math.js"
+    },
     "./mention": {
       "types": "./dist/prosekit-extensions-mention.d.ts",
       "default": "./dist/prosekit-extensions-mention.js"
@@ -183,6 +191,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,18 +219,20 @@
     "src"
   ],
   "dependencies": {
-    "@ocavue/utils": "^1.2.0",
-    "prosemirror-changeset": "^2.3.1",
+    "@ocavue/utils": "^1.5.0",
+    "prosemirror-changeset": "^2.4.0",
     "prosemirror-drop-indicator": "^0.1.3",
     "prosemirror-dropcursor": "^1.8.2",
     "prosemirror-flat-list": "^0.5.8",
     "prosemirror-gapcursor": "^1.4.0",
-    "prosemirror-highlight": "^0.13.0",
+    "prosemirror-highlight": "^0.15.0",
     "prosemirror-search": "^1.1.0",
-    "prosemirror-tables": "^1.8.3",
-    "shiki": "^3.19.0",
-    "@prosekit/core": "^0.9.0",
-    "@prosekit/pm": "^0.1.15"
+    "prosemirror-tables": "^1.8.5",
+    "shiki": "^3.22.0",
+    "@prosekit/core": "^0.10.0",
+    "@prosekit/pm": "^0.1.15",
+    "prosemirror-enter-rules": "^0.1.3",
+    "prosemirror-math": "^0.1.0"
   },
   "peerDependencies": {
     "loro-crdt": ">= 1.10.0",
@@ -241,26 +255,25 @@
     }
   },
   "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",
+    "katex": "^0.16.28",
+    "loro-crdt": "^1.10.6",
+    "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.3",
+    "type-fest": "^5.4.4",
     "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 +284,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",
@@ -296,6 +310,7 @@
       "prosekit-extensions-loro": "./src/loro/index.ts",
       "loro/style": "./src/loro/style.css",
       "prosekit-extensions-mark-rule": "./src/mark-rule/index.ts",
+      "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-paragraph": "./src/paragraph/index.ts",
@@ -310,6 +325,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 +346,9 @@
       "autocomplete": [
         "./dist/prosekit-extensions-autocomplete.d.ts"
       ],
+      "background-color": [
+        "./dist/prosekit-extensions-background-color.d.ts"
+      ],
       "blockquote": [
         "./dist/prosekit-extensions-blockquote.d.ts"
       ],
@@ -393,6 +412,9 @@
       "mark-rule": [
         "./dist/prosekit-extensions-mark-rule.d.ts"
       ],
+      "math": [
+        "./dist/prosekit-extensions-math.d.ts"
+      ],
       "mention": [
         "./dist/prosekit-extensions-mention.d.ts"
       ],
@@ -426,6 +448,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>
+      "
+      `,
+    )
+  })
+})

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

@@ -0,0 +1,58 @@
+import { defineMarkSpec, type Extension } from '@prosekit/core'
+
+/**
+ * Attributes for the `backgroundColor` mark.
+ *
+ * @public
+ */
+export interface BackgroundColorAttrs {
+  color: string
+}
+
+/**
+ * @internal
+ */
+export type BackgroundColorSpecExtension = Extension<{
+  Marks: {
+    backgroundColor: BackgroundColorAttrs
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineBackgroundColorSpec(): BackgroundColorSpecExtension {
+  return defineMarkSpec<'backgroundColor', BackgroundColorAttrs>({
+    name: 'backgroundColor',
+    attrs: {
+      color: {
+        validate: 'string',
+      },
+    },
+    parseDOM: [
+      {
+        tag: ':where([style*="background-color:"], [data-background-color])',
+        getAttrs: (node): BackgroundColorAttrs | false => {
+          // When both `data-background-color` and `style="background-color"` are present, we
+          // prioritize the `data-background-color` attribute. This avoids the
+          // browser's default behavior of changing hex colors to rgba in style
+          // attribute.
+          const value = node.getAttribute('data-background-color')
+          if (value && value !== 'inherit') {
+            return { color: value }
+          }
+          const color = node.style.backgroundColor
+          if (color && color !== 'inherit') {
+            return { color }
+          }
+          return false
+        },
+        consuming: false,
+      },
+    ],
+    toDOM(mark) {
+      const color = (mark.attrs as BackgroundColorAttrs).color
+      return ['span', { 'style': `background-color: ${color};`, 'data-background-color': color }, 0]
+    },
+  })
+}