@prosekit/extensions 0.11.4 → 0.11.6

package/src/gap-cursor/style.css

@@ -0,0 +1,25 @@
+.ProseMirror-gapcursor {
+  display: none;
+  position: relative;
+  pointer-events: none;
+}
+
+.ProseMirror-gapcursor:after {
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid currentColor;
+  content: "";
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}

package/src/hard-break/hard-break-commands.ts

@@ -0,0 +1,31 @@
+import {
+  defineCommands,
+  insertNode,
+  type Extension,
+} from '@prosekit/core'
+import type { Command } from '@prosekit/pm/state'
+
+/**
+ * @internal
+ */
+export type HardBreakCommandsExtension = Extension<{
+  Commands: {
+    insertHardBreak: []
+  }
+}>
+
+/**
+ * @internal
+ */
+export function insertHardBreak(): Command {
+  return insertNode({ type: 'hardBreak' })
+}
+
+/**
+ * @internal
+ */
+export function defineHardBreakCommands(): HardBreakCommandsExtension {
+  return defineCommands({
+    insertHardBreak: insertHardBreak,
+  })
+}

package/src/hard-break/hard-break-keymap.spec.ts

@@ -0,0 +1,45 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+import {
+  inputText,
+  pressKey,
+} from '../testing/keyboard'
+
+describe('defineHardBreakKeymap', () => {
+  it('should insert hard break', async () => {
+    const { editor, n } = setupTest()
+
+    const doc1 = n.doc(n.p('foo<a>bar'))
+    const doc2 = n.doc(n.p('foo', n.hardBreak(), 'bar'))
+
+    editor.set(doc1)
+    expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
+    await pressKey('Shift-Enter')
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+
+    editor.set(doc1)
+    expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
+    await pressKey('Mod-Enter')
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+  })
+
+  it('can continue to type after a hard break', async () => {
+    const { editor, n } = setupTest()
+
+    const doc1 = n.doc(n.p('foo<a>bar'))
+    const doc2 = n.doc(n.p('foo', n.hardBreak(), 'bar'))
+    const doc3 = n.doc(n.p('foo', n.hardBreak(), 'bazbar'))
+
+    editor.set(doc1)
+    expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
+    await pressKey('Shift-Enter')
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+    await inputText('baz')
+    expect(editor.state.doc.toJSON()).toEqual(doc3.toJSON())
+  })
+})

package/src/hard-break/hard-break-keymap.ts

@@ -0,0 +1,16 @@
+import {
+  defineKeymap,
+  type PlainExtension,
+} from '@prosekit/core'
+
+import { insertHardBreak } from './hard-break-commands'
+
+/**
+ * @internal
+ */
+export function defineHardBreakKeymap(): PlainExtension {
+  return defineKeymap({
+    'Mod-Enter': insertHardBreak(),
+    'Shift-Enter': insertHardBreak(),
+  })
+}

package/src/hard-break/hard-break-spec.ts

@@ -0,0 +1,31 @@
+import {
+  defineNodeSpec,
+  type Extension,
+} from '@prosekit/core'
+import type { Attrs } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export type HardBreakSpecExtension = Extension<{
+  Nodes: {
+    hardBreak: Attrs
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineHardBreakSpec(): HardBreakSpecExtension {
+  return defineNodeSpec({
+    name: 'hardBreak',
+    inline: true,
+    selectable: false,
+    leafText: () => '\n',
+    group: 'inline',
+    parseDOM: [{ tag: 'br' }],
+    toDOM() {
+      return ['br']
+    },
+  })
+}

package/src/hard-break/hard-break.ts

@@ -0,0 +1,32 @@
+import {
+  union,
+  type Union,
+} from '@prosekit/core'
+
+import {
+  defineHardBreakCommands,
+  type HardBreakCommandsExtension,
+} from './hard-break-commands'
+import { defineHardBreakKeymap } from './hard-break-keymap'
+import {
+  defineHardBreakSpec,
+  type HardBreakSpecExtension,
+} from './hard-break-spec'
+
+/**
+ * @internal
+ */
+export type HardBreakExtension = Union<
+  [HardBreakSpecExtension, HardBreakCommandsExtension]
+>
+
+/**
+ * @public
+ */
+export function defineHardBreak(): HardBreakExtension {
+  return union(
+    defineHardBreakSpec(),
+    defineHardBreakKeymap(),
+    defineHardBreakCommands(),
+  )
+}

package/src/hard-break/index.ts

@@ -0,0 +1,13 @@
+export {
+  defineHardBreak,
+  type HardBreakExtension,
+} from './hard-break'
+export {
+  defineHardBreakCommands,
+  type HardBreakCommandsExtension,
+} from './hard-break-commands'
+export { defineHardBreakKeymap } from './hard-break-keymap'
+export {
+  defineHardBreakSpec,
+  type HardBreakSpecExtension,
+} from './hard-break-spec'

package/src/heading/heading-commands.ts

@@ -0,0 +1,37 @@
+import {
+  defineCommands,
+  insertNode,
+  setBlockType,
+  toggleNode,
+  type Extension,
+} from '@prosekit/core'
+
+import type { HeadingAttrs } from './heading-types'
+
+/**
+ * @internal
+ */
+export type HeadingCommandsExtension = Extension<{
+  Commands: {
+    setHeading: [attrs?: HeadingAttrs | undefined]
+    insertHeading: [attrs?: HeadingAttrs | undefined]
+    toggleHeading: [attrs?: HeadingAttrs | undefined]
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineHeadingCommands(): HeadingCommandsExtension {
+  return defineCommands({
+    setHeading: (attrs?: HeadingAttrs) => {
+      return setBlockType({ type: 'heading', attrs })
+    },
+    insertHeading: (attrs?: HeadingAttrs) => {
+      return insertNode({ type: 'heading', attrs })
+    },
+    toggleHeading: (attrs?: HeadingAttrs) => {
+      return toggleNode({ type: 'heading', attrs })
+    },
+  })
+}

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

@@ -0,0 +1,22 @@
+import type { PlainExtension } from '@prosekit/core'
+
+import { defineTextBlockInputRule } from '../input-rule'
+
+import type { HeadingAttrs } from './heading-types'
+
+/**
+ * Converts the text block to a heading when `#` is typed at the start of a new
+ * line followed by a space.
+ *
+ * @internal
+ */
+export function defineHeadingInputRule(): PlainExtension {
+  return defineTextBlockInputRule({
+    regex: /^(#{1,6})\s$/,
+    type: 'heading',
+    attrs: (match) => {
+      const level: number = match[1]?.length ?? 1
+      return { level } satisfies HeadingAttrs
+    },
+  })
+}

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

@@ -0,0 +1,53 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+import { pressKey } from '../testing/keyboard'
+
+describe('defineHeadingKeymap', () => {
+  it('should toggle heading', async () => {
+    const { editor, n } = setupTest()
+
+    const doc = n.doc(n.p('<a>Foo'), n.p('Bar'))
+    const docH1 = n.doc(n.h1('Foo'), n.p('Bar'))
+    const docH3 = n.doc(n.h3('Foo'), n.p('Bar'))
+
+    editor.set(doc)
+    expect(editor.state.doc.toJSON()).toEqual(doc.toJSON())
+    await pressKey('mod-alt-1')
+    expect(editor.state.doc.toJSON()).toEqual(docH1.toJSON())
+    await pressKey('mod-alt-1')
+    expect(editor.state.doc.toJSON()).toEqual(doc.toJSON())
+    await pressKey('mod-alt-3')
+    expect(editor.state.doc.toJSON()).toEqual(docH3.toJSON())
+    await pressKey('mod-alt-1')
+    expect(editor.state.doc.toJSON()).toEqual(docH1.toJSON())
+  })
+
+  it('should unset heading by pressing Backspace', async () => {
+    const { editor, n } = setupTest()
+
+    const doc1 = n.doc(n.h1('<a>'))
+    const doc2 = n.doc(n.p('<a>'))
+
+    editor.set(doc1)
+    expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
+    await pressKey('Backspace')
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+  })
+
+  it('should unset heading by pressing Backspace around text', async () => {
+    const { editor, n } = setupTest()
+
+    const doc1 = n.doc(n.h1('Foo'), n.h1('<a>Bar'))
+    const doc2 = n.doc(n.h1('Foo'), n.p('<a>Bar'))
+
+    editor.set(doc1)
+    expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
+    await pressKey('Backspace')
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+  })
+})

package/src/heading/heading-keymap.ts

@@ -0,0 +1,40 @@
+import {
+  defineKeymap,
+  isAtBlockStart,
+  toggleNode,
+  unsetBlockType,
+  withSkipCodeBlock,
+  type PlainExtension,
+} from '@prosekit/core'
+import type { Command } from '@prosekit/pm/state'
+
+function toggleHeadingKeybinding(level: number): Command {
+  return withSkipCodeBlock(toggleNode({ type: 'heading', attrs: { level } }))
+}
+
+/**
+ * Set the block type to default (usually `paragraph`) when pressing Backspace at
+ * the start of a heading block.
+ */
+const backspaceUnsetHeading: Command = (state, dispatch, view) => {
+  const $pos = isAtBlockStart(state, view)
+  if ($pos?.parent.type.name === 'heading') {
+    return unsetBlockType()(state, dispatch, view)
+  }
+  return false
+}
+
+/**
+ * @internal
+ */
+export function defineHeadingKeymap(): PlainExtension {
+  return defineKeymap({
+    'mod-alt-1': toggleHeadingKeybinding(1),
+    'mod-alt-2': toggleHeadingKeybinding(2),
+    'mod-alt-3': toggleHeadingKeybinding(3),
+    'mod-alt-4': toggleHeadingKeybinding(4),
+    'mod-alt-5': toggleHeadingKeybinding(5),
+    'mod-alt-6': toggleHeadingKeybinding(6),
+    'Backspace': backspaceUnsetHeading,
+  })
+}

package/src/heading/heading-spec.ts

@@ -0,0 +1,39 @@
+import {
+  defineNodeSpec,
+  type Extension,
+} from '@prosekit/core'
+
+import type { HeadingAttrs } from './heading-types'
+
+/**
+ * @internal
+ */
+export type HeadingSpecExtension = Extension<{
+  Nodes: {
+    heading: HeadingAttrs
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineHeadingSpec(): HeadingSpecExtension {
+  return defineNodeSpec({
+    name: 'heading',
+    attrs: { level: { default: 1, validate: 'number' } },
+    content: 'inline*',
+    group: 'block',
+    defining: true,
+    parseDOM: [
+      { tag: 'h1', attrs: { level: 1 } },
+      { tag: 'h2', attrs: { level: 2 } },
+      { tag: 'h3', attrs: { level: 3 } },
+      { tag: 'h4', attrs: { level: 4 } },
+      { tag: 'h5', attrs: { level: 5 } },
+      { tag: 'h6', attrs: { level: 6 } },
+    ],
+    toDOM(node) {
+      return [`h${node.attrs.level}`, 0]
+    },
+  })
+}

package/src/heading/heading-types.ts

@@ -0,0 +1,3 @@
+export interface HeadingAttrs {
+  level: number
+}

package/src/heading/heading.ts

@@ -0,0 +1,34 @@
+import {
+  union,
+  type Union,
+} from '@prosekit/core'
+
+import {
+  defineHeadingCommands,
+  type HeadingCommandsExtension,
+} from './heading-commands'
+import { defineHeadingInputRule } from './heading-input-rule'
+import { defineHeadingKeymap } from './heading-keymap'
+import {
+  defineHeadingSpec,
+  type HeadingSpecExtension,
+} from './heading-spec'
+
+/**
+ * @internal
+ */
+export type HeadingExtension = Union<
+  [HeadingSpecExtension, HeadingCommandsExtension]
+>
+
+/**
+ * @public
+ */
+export function defineHeading(): HeadingExtension {
+  return union(
+    defineHeadingSpec(),
+    defineHeadingInputRule(),
+    defineHeadingKeymap(),
+    defineHeadingCommands(),
+  )
+}

package/src/heading/index.ts

@@ -0,0 +1,15 @@
+export {
+  defineHeading,
+  type HeadingExtension,
+} from './heading'
+export {
+  defineHeadingCommands,
+  type HeadingCommandsExtension,
+} from './heading-commands'
+export { defineHeadingInputRule } from './heading-input-rule'
+export { defineHeadingKeymap } from './heading-keymap'
+export {
+  defineHeadingSpec,
+  type HeadingSpecExtension,
+} from './heading-spec'
+export type { HeadingAttrs } from './heading-types'

package/src/horizontal-rule/horizontal-rule-commands.spec.ts

@@ -0,0 +1,61 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+
+describe('insertHorizontalRule', () => {
+  const { editor, n } = setupTest()
+
+  it('should insert a horizontal rule in an empty paragraph', () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    editor.commands.insertHorizontalRule()
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.horizontalRule()).toJSON(),
+    )
+  })
+
+  it('should insert a horizontal rule after some text', () => {
+    const doc = n.doc(n.p('123<a>'))
+    editor.set(doc)
+
+    editor.commands.insertHorizontalRule()
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p('123'), n.horizontalRule()).toJSON(),
+    )
+  })
+
+  it('should insert a horizontal rule before some text', () => {
+    const doc = n.doc(n.p('<a>123'))
+    editor.set(doc)
+
+    editor.commands.insertHorizontalRule()
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.horizontalRule(), n.p('123')).toJSON(),
+    )
+  })
+
+  it('should insert a horizontal rule between some text', () => {
+    const doc = n.doc(n.p('123<a>456'))
+    editor.set(doc)
+
+    editor.commands.insertHorizontalRule()
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p('123'), n.horizontalRule(), n.p('456')).toJSON(),
+    )
+  })
+
+  it('should keep the selected text', () => {
+    const doc = n.doc(n.p('123<a>4<b>56'))
+    editor.set(doc)
+
+    editor.commands.insertHorizontalRule()
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p('123'), n.horizontalRule(), n.p('456')).toJSON(),
+    )
+  })
+})

package/src/horizontal-rule/horizontal-rule-commands.ts

@@ -0,0 +1,37 @@
+import {
+  defineCommands,
+  getNodeType,
+  type Extension,
+} from '@prosekit/core'
+import {
+  Fragment,
+  Slice,
+} from '@prosekit/pm/model'
+import type { Command } from '@prosekit/pm/state'
+
+export type HorizontalRuleCommandsExtension = Extension<{
+  Commands: {
+    insertHorizontalRule: []
+  }
+}>
+
+/**
+ * Returns a command that inserts a horizontal rule at the current selection.
+ */
+export function insertHorizontalRule(): Command {
+  return (state, dispatch) => {
+    if (!dispatch) return true
+
+    const { schema, tr } = state
+    const type = getNodeType(schema, 'horizontalRule')
+    const node = type.createChecked()
+    const pos = tr.selection.anchor
+    tr.replaceRange(pos, pos, new Slice(Fragment.from(node), 0, 0))
+    dispatch(tr)
+    return true
+  }
+}
+
+export function defineHorizontalRuleCommands(): HorizontalRuleCommandsExtension {
+  return defineCommands({ insertHorizontalRule })
+}

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

@@ -0,0 +1,61 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+import { inputText } from '../testing/keyboard'
+
+describe('defineHorizontalRuleInputRule', () => {
+  const { editor, n } = setupTest()
+  it('should insert a horizontal rule when typing "---" in an empty paragraph', async () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    await inputText('---')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.horizontalRule(), n.p()).toJSON(),
+    )
+
+    await inputText('x')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.horizontalRule(), n.p('x')).toJSON(),
+    )
+  })
+
+  it('should insert a horizontal rule when typing "---"  before some text', async () => {
+    const doc = n.doc(n.p('<a>123'))
+    editor.set(doc)
+
+    await inputText('---')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.horizontalRule(), n.p('123')).toJSON(),
+    )
+
+    await inputText('x')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.horizontalRule(), n.p('x123')).toJSON(),
+    )
+  })
+
+  it('should not insert a horizontal rule when typing "---"  after some text', async () => {
+    const doc = n.doc(n.p('123<a>'))
+    editor.set(doc)
+
+    await inputText('---')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p('123---')).toJSON(),
+    )
+  })
+
+  it('should not insert a horizontal rule inside a code block', async () => {
+    const doc = n.doc(n.codeBlock('<a>'))
+    editor.set(doc)
+
+    await inputText('---')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.codeBlock('---')).toJSON(),
+    )
+  })
+})

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

@@ -0,0 +1,26 @@
+import {
+  getNodeType,
+  union,
+  type PlainExtension,
+} from '@prosekit/core'
+import { InputRule } from '@prosekit/pm/inputrules'
+
+import { defineInputRule } from '../input-rule'
+
+/**
+ * @public
+ */
+export function defineHorizontalRuleInputRule(): PlainExtension {
+  return union(
+    defineInputRule(
+      new InputRule(/^---$/, (state, match, start, end) => {
+        const { schema } = state
+        const { tr } = state
+        const type = getNodeType(schema, 'horizontalRule')
+        const node = type.createChecked()
+        tr.delete(start, end).insert(start - 1, node)
+        return tr.scrollIntoView()
+      }),
+    ),
+  )
+}

package/src/horizontal-rule/horizontal-rule-spec.ts

@@ -0,0 +1,21 @@
+import {
+  defineNodeSpec,
+  type Extension,
+} from '@prosekit/core'
+import type { Attrs } from '@prosekit/pm/model'
+
+export type HorizontalRuleSpecExtension = Extension<{
+  Nodes: {
+    horizontalRule: Attrs
+  }
+}>
+
+export function defineHorizontalRuleSpec(): HorizontalRuleSpecExtension {
+  return defineNodeSpec({
+    name: 'horizontalRule',
+    group: 'block',
+    parseDOM: [{ tag: 'hr' }],
+    // Wrap the `<hr>` in a `<div>` so that we can make it taller and easier to click.
+    toDOM: () => ['div', { class: 'prosekit-horizontal-rule' }, ['hr']],
+  })
+}

package/src/horizontal-rule/horizontal-rule.ts

@@ -0,0 +1,29 @@
+import {
+  union,
+  type Union,
+} from '@prosekit/core'
+
+import {
+  defineHorizontalRuleCommands,
+  type HorizontalRuleCommandsExtension,
+} from './horizontal-rule-commands'
+import { defineHorizontalRuleInputRule } from './horizontal-rule-input-rule'
+import {
+  defineHorizontalRuleSpec,
+  type HorizontalRuleSpecExtension,
+} from './horizontal-rule-spec'
+
+export type HorizontalRuleExtension = Union<
+  [HorizontalRuleSpecExtension, HorizontalRuleCommandsExtension]
+>
+
+/**
+ * @public
+ */
+export function defineHorizontalRule(): HorizontalRuleExtension {
+  return union(
+    defineHorizontalRuleSpec(),
+    defineHorizontalRuleInputRule(),
+    defineHorizontalRuleCommands(),
+  )
+}