@prosekit/extensions 0.12.2 → 0.14.0

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]
+    },
+  })
+}

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

@@ -0,0 +1,21 @@
+import { union, type Union } from '@prosekit/core'
+
+import { defineBackgroundColorCommands, type BackgroundColorCommandsExtension } from './background-color-commands'
+import { defineBackgroundColorSpec, type BackgroundColorSpecExtension } from './background-color-spec'
+
+/**
+ * @internal
+ */
+export type BackgroundColorExtension = Union<[BackgroundColorSpecExtension, BackgroundColorCommandsExtension]>
+
+/**
+ * Defines the `backgroundColor` mark and some commands for it.
+ *
+ * @public
+ */
+export function defineBackgroundColor(): BackgroundColorExtension {
+  return union(
+    defineBackgroundColorSpec(),
+    defineBackgroundColorCommands(),
+  )
+}

package/src/background-color/index.ts

@@ -0,0 +1,8 @@
+export { defineBackgroundColor, type BackgroundColorExtension } from './background-color'
+export {
+  addBackgroundColor,
+  defineBackgroundColorCommands,
+  removeBackgroundColor,
+  type BackgroundColorCommandsExtension,
+} from './background-color-commands'
+export { defineBackgroundColorSpec, type BackgroundColorAttrs, type BackgroundColorSpecExtension } from './background-color-spec'

package/src/blockquote/blockquote-commands.ts

@@ -1,10 +1,4 @@
-import {
-  defineCommands,
-  insertNode,
-  toggleWrap,
-  wrap,
-  type Extension,
-} from '@prosekit/core'
+import { defineCommands, insertNode, toggleWrap, wrap, type Extension } from '@prosekit/core'
 
 export type BlockquoteCommandsExtension = Extension<{
   Commands: {

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

@@ -1,11 +1,7 @@
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { describe, expect, it } from 'vitest'
+import { keyboard } from 'vitest-browser-commands/playwright'
 
 import { setupTest } from '../testing'
-import { pressKey } from '../testing/keyboard'
 
 describe('blockquote keymap', () => {
   it('should wrap paragraph into blockquote with shortcut', async () => {
@@ -14,7 +10,7 @@ describe('blockquote keymap', () => {
     const doc1 = n.doc(n.p('hel<a>lo'))
     editor.set(doc1)
 
-    await pressKey('mod-shift-b')
+    await keyboard.press('ControlOrMeta+Shift+B')
 
     const doc2 = n.doc(n.blockquote(n.p('hello')))
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
@@ -25,7 +21,7 @@ describe('blockquote keymap', () => {
     const doc1 = n.doc(n.blockquote(n.p('hello')))
     editor.set(doc1)
 
-    await pressKey('mod-shift-b')
+    await keyboard.press('ControlOrMeta+Shift+B')
 
     const doc2 = n.doc(n.p('hello'))
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
@@ -37,7 +33,7 @@ describe('blockquote keymap', () => {
 
     editor.set(doc1)
 
-    await pressKey('Backspace')
+    await keyboard.press('Backspace')
 
     const doc2 = n.doc(n.p('hello'))
     expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())

package/src/blockquote/blockquote-keymap.ts

@@ -1,9 +1,4 @@
-import {
-  defineKeymap,
-  isAtBlockStart,
-  toggleWrap,
-  type PlainExtension,
-} from '@prosekit/core'
+import { defineKeymap, isAtBlockStart, toggleWrap, type PlainExtension } from '@prosekit/core'
 import { joinBackward } from '@prosekit/pm/commands'
 import type { Command } from '@prosekit/pm/state'
 
@@ -25,7 +20,7 @@ function backspaceUnsetBlockquote(): Command {
  */
 export function defineBlockquoteKeymap(): PlainExtension {
   return defineKeymap({
-    'mod-shift-b': toggleBlockquoteKeybinding(),
+    'Mod-B': toggleBlockquoteKeybinding(),
     'Backspace': backspaceUnsetBlockquote(),
   })
 }

package/src/blockquote/blockquote-spec.ts

@@ -1,7 +1,4 @@
-import {
-  defineNodeSpec,
-  type Extension,
-} from '@prosekit/core'
+import { defineNodeSpec, type Extension } from '@prosekit/core'
 import type { Attrs } from '@prosekit/pm/model'
 
 export type BlockquoteSpecExtension = Extension<{

package/src/blockquote/blockquote.ts

@@ -1,18 +1,9 @@
-import {
-  union,
-  type Union,
-} from '@prosekit/core'
+import { union, type Union } from '@prosekit/core'
 
-import {
-  defineBlockquoteCommands,
-  type BlockquoteCommandsExtension,
-} from './blockquote-commands'
+import { defineBlockquoteCommands, type BlockquoteCommandsExtension } from './blockquote-commands'
 import { defineBlockquoteInputRule } from './blockquote-input-rule'
 import { defineBlockquoteKeymap } from './blockquote-keymap'
-import {
-  defineBlockquoteSpec,
-  type BlockquoteSpecExtension,
-} from './blockquote-spec'
+import { defineBlockquoteSpec, type BlockquoteSpecExtension } from './blockquote-spec'
 
 /**
  * @internal

package/src/blockquote/index.ts

@@ -1,14 +1,5 @@
-export {
-  defineBlockquote,
-  type BlockquoteExtension,
-} from './blockquote'
-export {
-  defineBlockquoteCommands,
-  type BlockquoteCommandsExtension,
-} from './blockquote-commands'
+export { defineBlockquote, type BlockquoteExtension } from './blockquote'
+export { defineBlockquoteCommands, type BlockquoteCommandsExtension } from './blockquote-commands'
 export { defineBlockquoteInputRule } from './blockquote-input-rule'
 export { defineBlockquoteKeymap } from './blockquote-keymap'
-export {
-  defineBlockquoteSpec,
-  type BlockquoteSpecExtension,
-} from './blockquote-spec'
+export { defineBlockquoteSpec, type BlockquoteSpecExtension } from './blockquote-spec'

package/src/bold/bold-commands.ts

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

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

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

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

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

package/src/bold/bold-keymap.ts

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

package/src/bold/bold-spec.ts

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

package/src/bold/bold.ts

@@ -1,18 +1,9 @@
-import {
-  union,
-  type Union,
-} from '@prosekit/core'
+import { union, type Union } from '@prosekit/core'
 
-import {
-  defineBoldCommands,
-  type BoldCommandsExtension,
-} from './bold-commands'
+import { defineBoldCommands, type BoldCommandsExtension } from './bold-commands'
 import { defineBoldInputRule } from './bold-input-rule'
 import { defineBoldKeymap } from './bold-keymap'
-import {
-  defineBoldSpec,
-  type BoldSpecExtension,
-} from './bold-spec'
+import { defineBoldSpec, type BoldSpecExtension } from './bold-spec'
 
 /**
  * @internal

package/src/bold/index.ts

@@ -1,14 +1,5 @@
-export {
-  defineBold,
-  type BoldExtension,
-} from './bold'
-export {
-  defineBoldCommands,
-  type BoldCommandsExtension,
-} from './bold-commands'
+export { defineBold, type BoldExtension } from './bold'
+export { defineBoldCommands, type BoldCommandsExtension } from './bold-commands'
 export { defineBoldInputRule } from './bold-input-rule'
 export { defineBoldKeymap } from './bold-keymap'
-export {
-  defineBoldSpec,
-  type BoldSpecExtension,
-} from './bold-spec'
+export { defineBoldSpec, type BoldSpecExtension } from './bold-spec'

package/src/code/code-commands.ts

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

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

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

package/src/code/code-keymap.ts

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

package/src/code/code-spec.ts

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

package/src/code/code.ts

@@ -1,18 +1,9 @@
-import {
-  union,
-  type Union,
-} from '@prosekit/core'
+import { union, type Union } from '@prosekit/core'
 
-import {
-  defineCodeCommands,
-  type CodeCommandsExtension,
-} from './code-commands'
+import { defineCodeCommands, type CodeCommandsExtension } from './code-commands'
 import { defineCodeInputRule } from './code-input-rule'
 import { defineCodeKeymap } from './code-keymap'
-import {
-  defineCodeSpec,
-  type CodeSpecExtension,
-} from './code-spec'
+import { defineCodeSpec, type CodeSpecExtension } from './code-spec'
 
 /**
  * @internal

package/src/code/index.ts

@@ -1,14 +1,5 @@
-export {
-  defineCode,
-  type CodeExtension,
-} from './code'
-export {
-  defineCodeCommands,
-  type CodeCommandsExtension,
-} from './code-commands'
+export { defineCode, type CodeExtension } from './code'
+export { defineCodeCommands, type CodeCommandsExtension } from './code-commands'
 export { defineCodeInputRule } from './code-input-rule'
 export { defineCodeKeymap } from './code-keymap'
-export {
-  defineCodeSpec,
-  type CodeSpecExtension,
-} from './code-spec'
+export { defineCodeSpec, type CodeSpecExtension } from './code-spec'