@prosekit/extensions 0.11.3 → 0.11.5

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

package/src/horizontal-rule/index.ts

@@ -0,0 +1,14 @@
+export {
+  defineHorizontalRule,
+  type HorizontalRuleExtension,
+} from './horizontal-rule'
+export {
+  defineHorizontalRuleCommands,
+  insertHorizontalRule,
+  type HorizontalRuleCommandsExtension,
+} from './horizontal-rule-commands'
+export { defineHorizontalRuleInputRule } from './horizontal-rule-input-rule'
+export {
+  defineHorizontalRuleSpec,
+  type HorizontalRuleSpecExtension,
+} from './horizontal-rule-spec'

package/src/image/image-commands.ts

@@ -0,0 +1,27 @@
+import {
+  defineCommands,
+  insertNode,
+  type Extension,
+} from '@prosekit/core'
+
+import type { ImageAttrs } from './image-spec'
+
+/**
+ * @internal
+ */
+export type ImageCommandsExtension = Extension<{
+  Commands: {
+    insertImage: [attrs?: ImageAttrs]
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineImageCommands(): ImageCommandsExtension {
+  return defineCommands({
+    insertImage: (attrs?: ImageAttrs) => {
+      return insertNode({ type: 'image', attrs })
+    },
+  })
+}

package/src/image/image-spec.ts

@@ -0,0 +1,72 @@
+import {
+  defineNodeSpec,
+  type Extension,
+} from '@prosekit/core'
+
+/**
+ * @public
+ */
+export interface ImageAttrs {
+  src?: string | null
+  width?: number | null
+  height?: number | null
+}
+
+/**
+ * @internal
+ */
+export type ImageSpecExtension = Extension<{
+  Nodes: {
+    image: ImageAttrs
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineImageSpec(): ImageSpecExtension {
+  return defineNodeSpec({
+    name: 'image',
+    attrs: {
+      src: { default: null, validate: 'string|null' },
+      width: { default: null, validate: 'number|null' },
+      height: { default: null, validate: 'number|null' },
+    },
+    group: 'block',
+    defining: true,
+    draggable: true,
+    parseDOM: [
+      {
+        tag: 'img[src]',
+        getAttrs: (element): ImageAttrs => {
+          if (typeof element === 'string') {
+            return { src: null }
+          }
+
+          const src = element.getAttribute('src') || null
+
+          let width: number | null = null
+          let height: number | null = null
+
+          const rect = element.getBoundingClientRect()
+          if (rect.width > 0 && rect.height > 0) {
+            width = rect.width
+            height = rect.height
+          } else if (
+            element instanceof HTMLImageElement
+            && element.naturalWidth > 0
+            && element.naturalHeight > 0
+          ) {
+            width = element.naturalWidth
+            height = element.naturalHeight
+          }
+          return { src, width, height }
+        },
+      },
+    ],
+    toDOM(node) {
+      const attrs = node.attrs as ImageAttrs
+      return ['img', attrs]
+    },
+  })
+}

package/src/image/image.ts

@@ -0,0 +1,25 @@
+import {
+  union,
+  type Union,
+} from '@prosekit/core'
+
+import {
+  defineImageCommands,
+  type ImageCommandsExtension,
+} from './image-commands'
+import {
+  defineImageSpec,
+  type ImageSpecExtension,
+} from './image-spec'
+
+/**
+ * @internal
+ */
+export type ImageExtension = Union<[ImageSpecExtension, ImageCommandsExtension]>
+
+/**
+ * @public
+ */
+export function defineImage(): ImageExtension {
+  return union(defineImageSpec(), defineImageCommands())
+}

package/src/image/index.ts

@@ -0,0 +1,13 @@
+export {
+  defineImage,
+  type ImageExtension,
+} from './image'
+export {
+  defineImageCommands,
+  type ImageCommandsExtension,
+} from './image-commands'
+export {
+  defineImageSpec,
+  type ImageAttrs,
+  type ImageSpecExtension,
+} from './image-spec'

package/src/index.ts

@@ -0,0 +1 @@
+export {}