@prosekit/extensions 0.13.0 → 0.14.0

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,8 +1,4 @@
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { keyboard } from 'vitest-browser-commands/playwright'
 
 import { setupTest } from '../testing'

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'
 

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'

package/src/code-block/code-block-commands.ts

@@ -1,11 +1,4 @@
-import {
-  defineCommands,
-  insertNode,
-  setBlockType,
-  setNodeAttrs,
-  toggleNode,
-  type Extension,
-} from '@prosekit/core'
+import { defineCommands, insertNode, setBlockType, setNodeAttrs, toggleNode, type Extension } from '@prosekit/core'
 
 import type { CodeBlockAttrs } from './code-block-types'
 

package/src/code-block/code-block-highlight.ts

@@ -1,11 +1,5 @@
-import {
-  definePlugin,
-  type Extension,
-} from '@prosekit/core'
-import {
-  createHighlightPlugin,
-  type Parser,
-} from 'prosemirror-highlight'
+import { definePlugin, type Extension } from '@prosekit/core'
+import { createHighlightPlugin, type Parser } from 'prosemirror-highlight'
 
 /**
  * @public

package/src/code-block/code-block-keymap.ts

@@ -1,12 +1,5 @@
-import {
-  defaultBlockAt,
-  defineKeymap,
-  type PlainExtension,
-} from '@prosekit/core'
-import {
-  TextSelection,
-  type Command,
-} from '@prosekit/pm/state'
+import { defaultBlockAt, defineKeymap, type PlainExtension } from '@prosekit/core'
+import { TextSelection, type Command } from '@prosekit/pm/state'
 
 /**
  * Defines the keymap for code blocks.

package/src/code-block/code-block-shiki.ts

@@ -2,10 +2,7 @@ import type { Extension } from '@prosekit/core'
 import type { SpecialLanguage } from 'shiki'
 
 import { defineCodeBlockHighlight } from './code-block-highlight'
-import type {
-  ShikiBundledLanguage,
-  ShikiBundledTheme,
-} from './shiki-bundle'
+import type { ShikiBundledLanguage, ShikiBundledTheme } from './shiki-bundle'
 import type { ShikiHighlighterOptions } from './shiki-highlighter-chunk'
 import { createLazyParser } from './shiki-parser'
 

package/src/code-block/code-block-spec.spec.ts

@@ -1,16 +1,9 @@
 import { jsonFromHTML } from '@prosekit/core'
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { formatHTML } from 'diffable-html-snapshot'
+import { describe, expect, it } from 'vitest'
 
 import { setupTest } from '../testing'
-import { formatHTML } from '../testing/format-html'
-import {
-  htmlFromMarkdown,
-  markdownFromHTML,
-} from '../testing/markdown'
+import { htmlFromMarkdown, markdownFromHTML } from '../testing/markdown'
 
 describe('defineCodeBlockSpec', () => {
   it('can parse and serialize code blocks', () => {
@@ -152,7 +145,7 @@ describe('defineCodeBlockSpec', () => {
     editor.set(n.doc(n.codeBlock({ language: 'javascript' }, '123')))
     const html = editor.getDocHTML()
     expect(html).toMatchInlineSnapshot(`"<div><pre data-language="javascript"><code class="language-javascript">123</code></pre></div>"`)
-    let markdown = markdownFromHTML(html)
+    const markdown = markdownFromHTML(html)
     expect(markdown).toMatchInlineSnapshot(`
       "\`\`\`javascript
       123

package/src/code-block/code-block-spec.ts

@@ -1,7 +1,4 @@
-import {
-  defineNodeSpec,
-  type Extension,
-} from '@prosekit/core'
+import { defineNodeSpec, type Extension } from '@prosekit/core'
 
 import type { CodeBlockAttrs } from './code-block-types'
 

package/src/code-block/code-block.ts

@@ -1,21 +1,9 @@
-import {
-  union,
-  type Union,
-} from '@prosekit/core'
+import { union, type Union } from '@prosekit/core'
 
-import {
-  defineCodeBlockCommands,
-  type CodeBlockCommandsExtension,
-} from './code-block-commands'
-import {
-  defineCodeBlockEnterRule,
-  defineCodeBlockInputRule,
-} from './code-block-input-rule'
+import { defineCodeBlockCommands, type CodeBlockCommandsExtension } from './code-block-commands'
+import { defineCodeBlockEnterRule, defineCodeBlockInputRule } from './code-block-input-rule'
 import { defineCodeBlockKeymap } from './code-block-keymap'
-import {
-  defineCodeBlockSpec,
-  type CodeBlockSpecExtension,
-} from './code-block-spec'
+import { defineCodeBlockSpec, type CodeBlockSpecExtension } from './code-block-spec'
 
 /**
  * @internal

package/src/code-block/index.ts

@@ -1,26 +1,10 @@
-export {
-  defineCodeBlock,
-  type CodeBlockExtension,
-} from './code-block'
-export {
-  defineCodeBlockCommands,
-  type CodeBlockCommandsExtension,
-} from './code-block-commands'
-export {
-  defineCodeBlockHighlight,
-  type CodeBlockHighlightOptions,
-  type HighlightParser,
-} from './code-block-highlight'
-export {
-  defineCodeBlockEnterRule,
-  defineCodeBlockInputRule,
-} from './code-block-input-rule'
+export { defineCodeBlock, type CodeBlockExtension } from './code-block'
+export { defineCodeBlockCommands, type CodeBlockCommandsExtension } from './code-block-commands'
+export { defineCodeBlockHighlight, type CodeBlockHighlightOptions, type HighlightParser } from './code-block-highlight'
+export { defineCodeBlockEnterRule, defineCodeBlockInputRule } from './code-block-input-rule'
 export { defineCodeBlockKeymap } from './code-block-keymap'
 export { defineCodeBlockShiki } from './code-block-shiki'
-export {
-  defineCodeBlockSpec,
-  type CodeBlockSpecExtension,
-} from './code-block-spec'
+export { defineCodeBlockSpec, type CodeBlockSpecExtension } from './code-block-spec'
 export type { CodeBlockAttrs } from './code-block-types'
 export {
   shikiBundledLanguagesInfo,

package/src/code-block/shiki-highlighter-chunk.ts

@@ -1,10 +1,4 @@
-import type {
-  BundledHighlighterOptions,
-  BundledLanguage,
-  BundledTheme,
-  Highlighter,
-  SpecialLanguage,
-} from 'shiki'
+import type { BundledHighlighterOptions, BundledLanguage, BundledTheme, Highlighter, SpecialLanguage } from 'shiki'
 import { createHighlighter } from 'shiki/bundle/full'
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
 

package/src/code-block/shiki-highlighter.ts

@@ -1,7 +1,4 @@
-import type {
-  HighlighterOptions,
-  HighlighterResult,
-} from './shiki-highlighter-chunk'
+import type { HighlighterOptions, HighlighterResult } from './shiki-highlighter-chunk'
 
 let loaded: ((options: HighlighterOptions) => HighlighterResult) | undefined
 

package/src/code-block/shiki-parser.ts

@@ -2,10 +2,7 @@ import type { Parser } from 'prosemirror-highlight'
 import { createParser } from 'prosemirror-highlight/shiki'
 
 import type { ShikiBundledLanguage } from './shiki-bundle'
-import {
-  createOrGetHighlighter,
-  type HighlighterOptions,
-} from './shiki-highlighter'
+import { createOrGetHighlighter, type HighlighterOptions } from './shiki-highlighter'
 
 /**
  * @internal

package/src/commit/index.ts

@@ -1,33 +1,9 @@
-import {
-  defineDefaultState,
-  definePlugin,
-  jsonFromNode,
-  union,
-  type NodeJSON,
-  type PlainExtension,
-  type StepJSON,
-} from '@prosekit/core'
-import {
-  DOMSerializer,
-  Fragment,
-  Slice,
-  type ProseMirrorNode,
-} from '@prosekit/pm/model'
-import {
-  PluginKey,
-  ProseMirrorPlugin,
-  type Transaction,
-} from '@prosekit/pm/state'
+import { defineDefaultState, definePlugin, jsonFromNode, union, type NodeJSON, type PlainExtension, type StepJSON } from '@prosekit/core'
+import { DOMSerializer, Fragment, Slice, type ProseMirrorNode } from '@prosekit/pm/model'
+import { PluginKey, ProseMirrorPlugin, type Transaction } from '@prosekit/pm/state'
 import { Step } from '@prosekit/pm/transform'
-import {
-  Decoration,
-  DecorationSet,
-  type EditorView,
-} from '@prosekit/pm/view'
-import {
-  ChangeSet,
-  type Change,
-} from 'prosemirror-changeset'
+import { Decoration, DecorationSet, type EditorView } from '@prosekit/pm/view'
+import { ChangeSet, type Change } from 'prosemirror-changeset'
 
 /**
  * A JSON representation of a commit.
@@ -322,9 +298,4 @@ function defineCommitRecorder(commitRecorder: CommitRecorder): PlainExtension {
   )
 }
 
-export {
-  CommitRecorder,
-  defineCommitRecorder,
-  defineCommitViewer,
-  type Commit,
-}
+export { CommitRecorder, defineCommitRecorder, defineCommitViewer, type Commit }

package/src/doc/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/drop-cursor/drop-cursor.ts

@@ -1,7 +1,4 @@
-import {
-  definePlugin,
-  type PlainExtension,
-} from '@prosekit/core'
+import { definePlugin, type PlainExtension } from '@prosekit/core'
 import { dropCursor } from 'prosemirror-dropcursor'
 
 export interface DropCursorOptions {

package/src/drop-cursor/index.ts

@@ -1,5 +1 @@
-export {
-  defineDropCursor,
-  type DropCursorExtension,
-  type DropCursorOptions,
-} from './drop-cursor'
+export { defineDropCursor, type DropCursorExtension, type DropCursorOptions } from './drop-cursor'