@prosekit/extensions 0.12.2 → 0.14.0

package/src/table/table-spec.spec.ts

@@ -1,21 +1,12 @@
 import { union } from '@prosekit/core'
 import pick from 'just-pick'
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { describe, expect, it } from 'vitest'
 
 import { defineDoc } from '../doc'
 import { defineParagraph } from '../paragraph'
 import { defineText } from '../text'
 
-import {
-  defineTableCellSpec,
-  defineTableHeaderCellSpec,
-  defineTableRowSpec,
-  defineTableSpec,
-} from './table-spec'
+import { defineTableCellSpec, defineTableHeaderCellSpec, defineTableRowSpec, defineTableSpec } from './table-spec'
 
 describe('table spec', () => {
   it('should be defined', () => {

package/src/table/table-spec.ts

@@ -1,11 +1,5 @@
-import {
-  defineNodeSpec,
-  type Extension,
-} from '@prosekit/core'
-import type {
-  AttributeSpec,
-  Attrs,
-} from '@prosekit/pm/model'
+import { defineNodeSpec, type Extension } from '@prosekit/core'
+import type { AttributeSpec, Attrs } from '@prosekit/pm/model'
 import { tableNodes } from 'prosemirror-tables'
 
 const cellContent = 'block+'

package/src/table/table-utils.ts

@@ -1,10 +1,6 @@
-import { CellSelection } from 'prosemirror-tables'
+import { CellSelection, findCellPos, findCellRange, findTable } from 'prosemirror-tables'
 
-export {
-  findCellPos,
-  findCellRange,
-  findTable,
-} from 'prosemirror-tables'
+export { findCellPos, findCellRange, findTable }
 
 /**
  * Checks if the given object is a `CellSelection` instance.

package/src/table/table.ts

@@ -1,12 +1,6 @@
-import {
-  union,
-  type Union,
-} from '@prosekit/core'
+import { union, type Union } from '@prosekit/core'
 
-import {
-  defineTableCommands,
-  type TableCommandsExtension,
-} from './table-commands'
+import { defineTableCommands, type TableCommandsExtension } from './table-commands'
 import { defineTableDropIndicator } from './table-drop-indicator'
 import { defineTablePlugins } from './table-plugins'
 import {

package/src/table/test-utils.ts

@@ -1,7 +1,4 @@
-import type {
-  Command,
-  Selection,
-} from '@prosekit/pm/state'
+import type { Command, Selection } from '@prosekit/pm/state'
 import { CellSelection } from 'prosemirror-tables'
 
 import { isCellSelection } from './table-utils'

package/src/testing/clipboard.ts

@@ -1,6 +1,5 @@
 import type { EditorView } from '@prosekit/pm/view'
-
-import { formatHTML } from './format-html'
+import { formatHTML } from 'diffable-html-snapshot'
 
 async function readBlobFromClipboard(mimeType: string): Promise<Blob | undefined> {
   const clipboardItems = await navigator.clipboard.read()

package/src/testing/index.ts

@@ -10,11 +10,10 @@ import {
   type ExtractNodeActions,
   type NodeChild,
 } from '@prosekit/core'
-import {
-  createTestEditor,
-  type TestEditor,
-} from '@prosekit/core/test'
+import { createTestEditor, type TestEditor } from '@prosekit/core/test'
+import { keyboard } from 'vitest-browser-commands/playwright'
 
+import { defineBackgroundColor } from '../background-color'
 import { defineBlockquote } from '../blockquote'
 import { defineBold } from '../bold'
 import { defineCode } from '../code'
@@ -26,22 +25,16 @@ import { defineHorizontalRule } from '../horizontal-rule'
 import { defineImage } from '../image'
 import { defineItalic } from '../italic'
 import { defineLink } from '../link'
-import {
-  defineList,
-  type ListAttrs,
-} from '../list'
+import { defineList, type ListAttrs } from '../list'
 import { defineParagraph } from '../paragraph'
 import { defineStrike } from '../strike'
 import { defineTable } from '../table'
 import type { CellAttrs } from '../table/table-spec'
 import { defineText } from '../text'
+import { defineTextColor } from '../text-color'
 import { defineUnderline } from '../underline'
 
-import {
-  readHtmlTextFromClipboard,
-  readPlainTextFromClipboard,
-} from './clipboard'
-import { pressKey } from './keyboard'
+import { readHtmlTextFromClipboard, readPlainTextFromClipboard } from './clipboard'
 
 /**
  * @internal
@@ -61,6 +54,8 @@ export function defineTestExtension() {
     defineUnderline(),
     defineStrike(),
     defineCode(),
+    defineTextColor(),
+    defineBackgroundColor(),
     defineLink(),
     defineImage(),
     defineParagraph(),
@@ -124,7 +119,7 @@ export function setupTest() {
 
   const copy = async () => {
     editor.view.dom.focus()
-    await pressKey('mod-C')
+    await keyboard.press('ControlOrMeta+C')
     const html = await readHtmlTextFromClipboard()
     const plain = await readPlainTextFromClipboard()
     return { html, plain }

package/src/testing/keyboard.ts

@@ -1,35 +1,5 @@
-import { isApple } from '@prosekit/core'
 import { userEvent } from 'vitest/browser'
 
-/**
- * @example
- *
- * ```ts
- * await pressKey('mod-1')
- * await pressKey('Backspace')
- * ```
- *
- * @internal
- */
-export async function pressKey(input: string): Promise<void> {
-  const keys = input.split('-').map((key) => {
-    if (key.toLowerCase() === 'mod') {
-      return isApple ? 'Meta' : 'Control'
-    }
-    return key
-  })
-  const seq: string[] = []
-  for (const key of keys) {
-    // Press key without releasing it
-    seq.push('{' + key + '>}')
-  }
-  for (const key of keys.toReversed()) {
-    // Release a previously pressed key
-    seq.push('{/' + key + '}')
-  }
-  return await userEvent.keyboard(seq.join(''))
-}
-
 export async function inputText(input: string): Promise<void> {
   return await userEvent.keyboard(input)
 }

package/src/text/index.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'
 
 /**

package/src/text-align/index.ts

@@ -2,7 +2,7 @@ import {
   defineCommands,
   defineKeymap,
   defineNodeAttr,
-  setNodeAttrs,
+  setNodeAttrsBetween,
   union,
   type Extension,
   type PlainExtension,
@@ -74,7 +74,7 @@ export function setTextAlign({
   types: string[]
   value: string | null
 }): Command {
-  return setNodeAttrs({ type: types, attrs: { textAlign: value } })
+  return setNodeAttrsBetween({ type: types, attrs: { textAlign: value } })
 }
 
 /**
@@ -102,10 +102,10 @@ export function defineTextAlignCommands(
  */
 export function defineTextAlignKeymap(types: string[]): PlainExtension {
   return defineKeymap({
-    'mod-shift-l': setTextAlign({ types, value: 'left' }),
-    'mod-shift-e': setTextAlign({ types, value: 'center' }),
-    'mod-shift-r': setTextAlign({ types, value: 'right' }),
-    'mod-shift-j': setTextAlign({ types, value: 'justify' }),
+    'Mod-L': setTextAlign({ types, value: 'left' }),
+    'Mod-E': setTextAlign({ types, value: 'center' }),
+    'Mod-R': setTextAlign({ types, value: 'right' }),
+    'Mod-J': setTextAlign({ types, value: 'justify' }),
   })
 }
 

package/src/text-color/index.ts

@@ -0,0 +1,3 @@
+export { defineTextColor, type TextColorExtension } from './text-color'
+export { addTextColor, defineTextColorCommands, removeTextColor, type TextColorCommandsExtension } from './text-color-commands'
+export { defineTextColorSpec, type TextColorAttrs, type TextColorSpecExtension } from './text-color-spec'

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

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+
+import { setupTest } from '../testing'
+
+describe('addTextColor', () => {
+  it('can add 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.textColor({ color: 'red' }, 'world')),
+    )
+
+    editor.set(doc1)
+    editor.commands.addTextColor({ color: 'red' })
+    expect(editor.getDocJSON()).toEqual(doc2.toJSON())
+  })
+
+  it('can override existing color', () => {
+    const { editor, n, m } = setupTest()
+
+    const doc1 = n.doc(
+      n.p(
+        'A',
+        m.textColor({ color: 'red' }, 'B<a>C'),
+        m.textColor({ color: 'red' }, 'DE'),
+        'F<b>G',
+      ),
+    )
+    const doc2 = n.doc(
+      n.p(
+        'A',
+        m.textColor({ color: 'red' }, 'B'),
+        m.textColor({ color: 'blue' }, 'CDEF'),
+        'G',
+      ),
+    )
+
+    editor.set(doc1)
+    editor.commands.addTextColor({ color: 'blue' })
+    expect(editor.getDocJSON()).toEqual(doc2.toJSON())
+  })
+})
+
+describe('removeColor', () => {
+  it('can remove color from text', () => {
+    const { editor, n, m } = setupTest()
+
+    const doc1 = n.doc(
+      n.p(
+        'A',
+        m.textColor({ color: 'red' }, 'B<a>C'),
+        m.textColor({ color: 'blue' }, 'DE'),
+        'F<b>G',
+      ),
+    )
+    const doc2 = n.doc(
+      n.p(
+        'A',
+        m.textColor({ color: 'red' }, 'B'),
+        'CDEFG',
+      ),
+    )
+
+    editor.set(doc1)
+    editor.commands.removeTextColor()
+    expect(editor.getDocJSON()).toEqual(doc2.toJSON())
+  })
+})

package/src/text-color/text-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 { TextColorAttrs } from './text-color-spec'
+
+/**
+ * @internal
+ */
+export function addTextColor(attrs: TextColorAttrs): Command {
+  return addMark({ type: 'textColor', attrs })
+}
+
+/**
+ * @internal
+ */
+export function removeTextColor(): Command {
+  return removeMark({ type: 'textColor' })
+}
+
+/**
+ * @internal
+ */
+export type TextColorCommandsExtension = Extension<{
+  Commands: {
+    addTextColor: [attrs: TextColorAttrs]
+    removeTextColor: []
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineTextColorCommands(): TextColorCommandsExtension {
+  return defineCommands({ addTextColor, removeTextColor })
+}

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

@@ -0,0 +1,297 @@
+import { formatHTML } from 'diffable-html-snapshot'
+import { describe, expect, it } from 'vitest'
+
+import { setupTest } from '../testing'
+
+describe('defineTextColorSpec', () => {
+  it('should render color as inline span with style attribute', () => {
+    const { editor, n, m } = setupTest()
+
+    const doc = n.doc(
+      n.p(
+        'Default',
+        m.textColor({ color: '#0000ff' }, 'hex'),
+        m.textColor({ color: 'blue' }, 'named'),
+        m.textColor({ color: 'rgb(0, 0, 255)' }, 'rgb'),
+        m.textColor({ color: 'rgba(0 0 255 / 0.5)' }, 'rgba'),
+        m.textColor({ color: 'hsl(240 100% 50% / 0.5)' }, 'hsl'),
+        m.textColor({ color: 'var(--color-variable)' }, 'variable'),
+      ),
+    )
+    editor.set(doc)
+    expect(formatHTML(editor.view.dom.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <p>
+        Default
+        <span
+          data-text-color="#0000ff"
+          style="color: rgb(0, 0, 255);"
+        >
+          hex
+        </span>
+        <span
+          data-text-color="blue"
+          style="color: blue;"
+        >
+          named
+        </span>
+        <span
+          data-text-color="rgb(0, 0, 255)"
+          style="color: rgb(0, 0, 255);"
+        >
+          rgb
+        </span>
+        <span
+          data-text-color="rgba(0 0 255 / 0.5)"
+          style="color: rgba(0, 0, 255, 0.5);"
+        >
+          rgba
+        </span>
+        <span
+          data-text-color="hsl(240 100% 50% / 0.5)"
+          style="color: rgba(0, 0, 255, 0.5);"
+        >
+          hsl
+        </span>
+        <span
+          data-text-color="var(--color-variable)"
+          style="color: var(--color-variable);"
+        >
+          variable
+        </span>
+      </p>
+      "
+    `,
+    )
+  })
+
+  it('should parse color from style attribute', () => {
+    const { editor } = setupTest()
+
+    const html = `<p><span style="color: #0000ff;">text</span></p>`
+    editor.setContent(html)
+    expect(editor.state.doc.firstChild?.firstChild?.toJSON()).toMatchInlineSnapshot(`
+      {
+        "marks": [
+          {
+            "attrs": {
+              "color": "rgb(0, 0, 255)",
+            },
+            "type": "textColor",
+          },
+        ],
+        "text": "text",
+        "type": "text",
+      }
+    `)
+  })
+
+  it('should parse color from data-text-color attribute', () => {
+    const { editor } = setupTest()
+
+    const html = `<p><span data-text-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": "textColor",
+          },
+        ],
+        "text": "text",
+        "type": "text",
+      }
+    `)
+  })
+
+  it('should prioritize data-text-color attribute over style attribute', () => {
+    const { editor } = setupTest()
+
+    const html = `<p><span style="color: blue;" data-text-color="red">This should be red</span></p>`
+    editor.setContent(html)
+    expect(editor.state.doc.firstChild?.firstChild?.toJSON()).toMatchInlineSnapshot(`
+      {
+        "marks": [
+          {
+            "attrs": {
+              "color": "red",
+            },
+            "type": "textColor",
+          },
+        ],
+        "text": "This should be red",
+        "type": "text",
+      }
+    `)
+  })
+
+  it('can handle non-span inline elements', () => {
+    const { editor } = setupTest()
+
+    const html = `<p>`
+      + `<i><span style="color: red;">This should be red and italic</span></i>`
+      + `<span style="color: green;"><i>This should be green and italic</i></span>`
+      + `<b style="color: blue;">This should be blue and bold</b>`
+      + `</p>`
+    editor.setContent(html)
+    expect(editor.state.doc.firstChild?.toJSON()).toMatchInlineSnapshot(`
+      {
+        "content": [
+          {
+            "marks": [
+              {
+                "attrs": {
+                  "color": "red",
+                },
+                "type": "textColor",
+              },
+              {
+                "type": "italic",
+              },
+            ],
+            "text": "This should be red and italic",
+            "type": "text",
+          },
+          {
+            "marks": [
+              {
+                "attrs": {
+                  "color": "green",
+                },
+                "type": "textColor",
+              },
+              {
+                "type": "italic",
+              },
+            ],
+            "text": "This should be green and italic",
+            "type": "text",
+          },
+          {
+            "marks": [
+              {
+                "attrs": {
+                  "color": "blue",
+                },
+                "type": "textColor",
+              },
+              {
+                "type": "bold",
+              },
+            ],
+            "text": "This should be blue and bold",
+            "type": "text",
+          },
+        ],
+        "type": "paragraph",
+      }
+    `)
+  })
+
+  it('should ignore empty attributes', () => {
+    const { editor } = setupTest()
+
+    const html = `<p><span data-text-color="" style="color: ;">This should be plain text</span></p>`
+    editor.setContent(html)
+    expect(editor.state.doc.firstChild?.firstChild?.toJSON()).toMatchInlineSnapshot(`
+      {
+        "text": "This should be plain text",
+        "type": "text",
+      }
+    `)
+  })
+
+  it('should ignore inherit attributes', () => {
+    const { editor } = setupTest()
+
+    const html = `<p><span data-text-color="inherit" style="color: inherit;">This should be plain text</span></p>`
+    editor.setContent(html)
+    expect(editor.state.doc.firstChild?.firstChild?.toJSON()).toMatchInlineSnapshot(`
+      {
+        "text": "This should be plain text",
+        "type": "text",
+      }
+    `)
+  })
+
+  it('can handle block elements', () => {
+    const { editor } = setupTest()
+
+    const html = `<blockquote style="color: red;">`
+      + `<p>This should be red</p>`
+      + `<blockquote style="color: blue;">`
+      + `<p>This should be blue</p>`
+      + `</blockquote>`
+      + `<p>This should be red again</p>`
+      + `</blockquote>`
+
+    editor.setContent(html)
+    expect(editor.state.doc.firstChild?.toJSON()).toMatchInlineSnapshot(`
+      {
+        "content": [
+          {
+            "content": [
+              {
+                "marks": [
+                  {
+                    "attrs": {
+                      "color": "red",
+                    },
+                    "type": "textColor",
+                  },
+                ],
+                "text": "This should be red",
+                "type": "text",
+              },
+            ],
+            "type": "paragraph",
+          },
+          {
+            "content": [
+              {
+                "content": [
+                  {
+                    "marks": [
+                      {
+                        "attrs": {
+                          "color": "blue",
+                        },
+                        "type": "textColor",
+                      },
+                    ],
+                    "text": "This should be blue",
+                    "type": "text",
+                  },
+                ],
+                "type": "paragraph",
+              },
+            ],
+            "type": "blockquote",
+          },
+          {
+            "content": [
+              {
+                "marks": [
+                  {
+                    "attrs": {
+                      "color": "red",
+                    },
+                    "type": "textColor",
+                  },
+                ],
+                "text": "This should be red again",
+                "type": "text",
+              },
+            ],
+            "type": "paragraph",
+          },
+        ],
+        "type": "blockquote",
+      }
+    `)
+  })
+})

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

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