@prosekit/core 0.8.3 → 0.8.4

package/src/commands/toggle-mark.ts

@@ -0,0 +1,65 @@
+import { toggleMark as baseToggleMark } from '@prosekit/pm/commands'
+import type {
+  Attrs,
+  MarkType,
+} from '@prosekit/pm/model'
+import type { Command } from '@prosekit/pm/state'
+
+import type { CommandCreator } from '../types/extension-command'
+import { getMarkType } from '../utils/get-mark-type'
+
+/**
+ * @public
+ */
+export interface ToggleMarkOptions {
+  /**
+   * The mark type to toggle.
+   */
+  type: string | MarkType
+
+  /**
+   * The optional attributes to set on the mark.
+   */
+  attrs?: Attrs | null
+
+  /**
+   * Controls whether, when part of the selected range has the mark
+   * already and part doesn't, the mark is removed (`true`) or added
+   * (`false`).
+   *
+   * @default false
+   */
+  removeWhenPresent?: boolean
+
+  /**
+   * Whether the command should act on the content of inline nodes marked as
+   * [atoms](https://prosemirror.net/docs/ref/#model.NodeSpec.atom) that are
+   * completely covered by a selection range.
+   *
+   * @default true
+   */
+  enterInlineAtoms?: boolean
+}
+
+/**
+ * Returns a command that toggles the given mark with the given attributes.
+ *
+ * @param options
+ *
+ * @public
+ */
+export function toggleMark({
+  type,
+  attrs,
+  removeWhenPresent = false,
+  enterInlineAtoms = true,
+}: ToggleMarkOptions): Command {
+  return (state, dispatch, view) => {
+    return baseToggleMark(getMarkType(state.schema, type), attrs, {
+      removeWhenPresent,
+      enterInlineAtoms,
+    })(state, dispatch, view)
+  }
+}
+
+toggleMark satisfies CommandCreator

package/src/commands/toggle-node.ts

@@ -0,0 +1,47 @@
+import { setBlockType } from '@prosekit/pm/commands'
+import type {
+  Attrs,
+  NodeType,
+} from '@prosekit/pm/model'
+import type { Command } from '@prosekit/pm/state'
+
+import { getNodeType } from '../utils/get-node-type'
+import { isNodeActive } from '../utils/is-node-active'
+
+/**
+ * @public
+ */
+export interface ToggleNodeOptions {
+  /**
+   * The type of the node to toggle.
+   */
+  type: string | NodeType
+
+  /**
+   * The attributes of the node to toggle.
+   */
+  attrs?: Attrs | null
+}
+
+/**
+ * Returns a command that set the selected textblocks to the given node type
+ * with the given attributes.
+ *
+ * @param options
+ *
+ * @public
+ */
+export function toggleNode({ type, attrs }: ToggleNodeOptions): Command {
+  return (state, dispatch, view) => {
+    if (isNodeActive(state, type, attrs)) {
+      const defaultType = state.schema.topNodeType.contentMatch.defaultType
+      if (!defaultType) {
+        return false
+      }
+      return setBlockType(defaultType)(state, dispatch, view)
+    } else {
+      const nodeType = getNodeType(state.schema, type)
+      return setBlockType(nodeType, attrs)(state, dispatch, view)
+    }
+  }
+}

package/src/commands/toggle-wrap.spec.ts

@@ -0,0 +1,35 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+
+describe('toggle-wrap', () => {
+  it('adds the node wrapping the selection', () => {
+    const { editor, n } = setupTest()
+
+    const doc1 = n.doc(n.paragraph('<a>hello'))
+    const doc2 = n.doc(n.blockquote(n.paragraph('<a>hello')))
+
+    editor.set(doc1)
+    expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
+
+    editor.commands.toggleWrap({ type: 'blockquote' })
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+  })
+
+  it('lift the wrapped node', () => {
+    const { editor, n } = setupTest()
+
+    const doc1 = n.doc(n.blockquote(n.paragraph('<a>hello')))
+    const doc2 = n.doc(n.paragraph('<a>hello'))
+
+    editor.set(doc1)
+    expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
+
+    editor.commands.toggleWrap({ type: 'paragraph' })
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+  })
+})

package/src/commands/toggle-wrap.ts

@@ -0,0 +1,42 @@
+import { lift } from '@prosekit/pm/commands'
+import type {
+  Attrs,
+  NodeType,
+} from '@prosekit/pm/model'
+import type { Command } from '@prosekit/pm/state'
+
+import { isNodeActive } from '../utils/is-node-active'
+
+import { wrap } from './wrap'
+
+export interface ToggleWrapOptions {
+  /**
+   * The type of the node to toggle.
+   */
+  type: string | NodeType
+
+  /**
+   * The attributes of the node to toggle.
+   */
+  attrs?: Attrs | null
+}
+
+/**
+ * Toggle between wrapping an inactive node with the provided node type, and
+ * lifting it up into its parent.
+ *
+ * @param options
+ *
+ * @public
+ */
+export function toggleWrap(options: ToggleWrapOptions): Command {
+  const { type, attrs } = options
+
+  return (state, dispatch) => {
+    if (isNodeActive(state, type, attrs)) {
+      return lift(state, dispatch)
+    }
+
+    return wrap({ type, attrs })(state, dispatch)
+  }
+}

package/src/commands/unset-block-type.spec.ts

@@ -0,0 +1,49 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+
+describe('unsetBlockType', () => {
+  it('can unset a single block', () => {
+    const { editor, n } = setupTest()
+
+    const doc1 = n.doc(n.heading('<a>1'), n.heading('2'))
+    const doc2 = n.doc(n.paragraph('<a>1'), n.heading('2'))
+
+    editor.set(doc1)
+    expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
+
+    editor.commands.unsetBlockType()
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+  })
+
+  it('can unset multiple blocks', () => {
+    const { editor, n } = setupTest()
+
+    const doc1 = n.doc(
+      n.heading('0'),
+      n.heading('<a>1'),
+      n.heading('2'),
+      n.heading('<b>3'),
+      n.heading('4'),
+      n.heading('5'),
+    )
+    const doc2 = n.doc(
+      n.heading('0'),
+      n.paragraph('<a>1'),
+      n.paragraph('2'),
+      n.paragraph('<b>3'),
+      n.heading('4'),
+      n.heading('5'),
+    )
+
+    editor.set(doc1)
+    expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
+
+    editor.commands.unsetBlockType()
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+  })
+})

package/src/commands/unset-block-type.ts

@@ -0,0 +1,84 @@
+import {
+  Fragment,
+  Slice,
+} from '@prosekit/pm/model'
+import type {
+  Command,
+  Transaction,
+} from '@prosekit/pm/state'
+import { ReplaceAroundStep } from '@prosekit/pm/transform'
+
+import type { CommandCreator } from '../types/extension-command'
+
+/**
+ * @public
+ */
+export interface UnsetBlockTypeOptions {
+  /**
+   * The start position of the document. By default it will be the start position of current selection.
+   */
+  from?: number
+
+  /**
+   * The end position of the document. By default it will be the end position of current selection.
+   */
+  to?: number
+}
+
+/**
+ * Returns a command that set the type of all textblocks between the given range
+ * to the default type (usually `paragraph`).
+ *
+ * @public
+ */
+export function unsetBlockType(options?: UnsetBlockTypeOptions): Command {
+  return (state, dispatch) => {
+    const from = options?.from ?? state.selection.from
+    const to = options?.to ?? state.selection.to
+    if (from > to) return false
+
+    const tr = state.tr
+    if (unsetTextBlockType(tr, from, to)) {
+      dispatch?.(tr)
+      return true
+    }
+    return false
+  }
+}
+
+function unsetTextBlockType(
+  tr: Transaction,
+  from: number,
+  to: number,
+): boolean {
+  const mapFrom = tr.steps.length
+  tr.doc.nodesBetween(from, to, (node, pos, parent, index): boolean => {
+    if (!parent || !node.isTextblock) return true
+
+    const defaultType = parent.contentMatchAt(index).defaultType
+    if (
+      defaultType
+      && defaultType.isTextblock
+      && node.type !== defaultType
+      && defaultType.validContent(node.content)
+    ) {
+      const mapping = tr.mapping.slice(mapFrom)
+      const start = mapping.map(pos, 1)
+      const end = mapping.map(pos + node.nodeSize, 1)
+      const step = new ReplaceAroundStep(
+        start,
+        end,
+        start + 1,
+        end - 1,
+        new Slice(Fragment.from(defaultType.create()), 0, 0),
+        1,
+        true,
+      )
+      tr.step(step)
+    }
+    return false
+  })
+  return tr.steps.length > mapFrom
+}
+
+unsetBlockType satisfies CommandCreator

package/src/commands/unset-mark.spec.ts

@@ -0,0 +1,35 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+
+describe('unsetMark', () => {
+  it('can unset marks', () => {
+    const { editor, m, n } = setupTest()
+
+    const doc1 = n.doc(
+      n.paragraph(
+        '<a>',
+        '1',
+        m.bold('2'),
+        m.italic('3'),
+        '<b>',
+        m.italic('4'),
+        m.italic('5'),
+      ),
+    )
+
+    const doc2 = n.doc(
+      n.paragraph('<a>', '123', '<b>', m.italic('4'), m.italic('5')),
+    )
+
+    editor.set(doc1)
+    expect(editor.state.doc.toJSON()).toEqual(doc1.toJSON())
+
+    editor.commands.unsetMark()
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+  })
+})

package/src/commands/unset-mark.ts

@@ -0,0 +1,38 @@
+import type { Command } from '@prosekit/pm/state'
+
+import type { CommandCreator } from '../types/extension-command'
+
+/**
+ * @public
+ *
+ * Options for {@link unsetMark}.
+ */
+export interface UnsetMarkOptions {
+  /**
+   * The start position of the document. By default it will be the start position of current selection.
+   */
+  from?: number
+
+  /**
+   * The end position of the document. By default it will be the end position of current selection.
+   */
+  to?: number
+}
+
+/**
+ * Returns a command that removes all marks.
+ *
+ * @public
+ */
+export function unsetMark(options?: UnsetMarkOptions): Command {
+  return (state, dispatch) => {
+    const from = options?.from ?? state.selection.from
+    const to = options?.to ?? state.selection.to
+    if (from > to) return false
+
+    dispatch?.(state.tr.removeMark(from, to))
+    return true
+  }
+}
+
+unsetMark satisfies CommandCreator

package/src/commands/wrap.ts

@@ -0,0 +1,50 @@
+import type {
+  Attrs,
+  NodeType,
+} from '@prosekit/pm/model'
+import type { Command } from '@prosekit/pm/state'
+import { findWrapping } from '@prosekit/pm/transform'
+
+import { getNodeType } from '../utils/get-node-type'
+
+/**
+ * @public
+ */
+export interface WrapOptions {
+  /**
+   * The node type to wrap the selected textblock with.
+   */
+  type: NodeType | string
+
+  /**
+   * @deprecated Use `nodeSpec` instead.
+   */
+  nodeType?: NodeType
+
+  /**
+   * Optional attributes to apply to the node.
+   */
+  attrs?: Attrs | null
+}
+
+/**
+ * Returns a command that wraps the selected textblock with the given node type.
+ *
+ * @param options
+ *
+ * @public
+ */
+export function wrap(options: WrapOptions): Command {
+  return (state, dispatch) => {
+    const { $from, $to } = state.selection
+    const range = $from.blockRange($to)
+    if (!range) return false
+
+    const nodeType = getNodeType(state.schema, options.nodeType || options.type)
+    const wrapping = findWrapping(range, nodeType, options.attrs)
+    if (!wrapping) return false
+
+    dispatch?.(state.tr.wrap(range, wrapping))
+    return true
+  }
+}

package/src/editor/action.spec.ts

@@ -0,0 +1,143 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+import { jsonFromNode } from '../utils/parse'
+
+import type { NodeChild } from './action'
+
+describe('NodeAction', () => {
+  const { editor, n } = setupTest()
+
+  it('can apply node', () => {
+    expect(n.heading('foo').toJSON()).toEqual({
+      type: 'heading',
+      content: [{ text: 'foo', type: 'text' }],
+    })
+  })
+
+  it('can apply node with attrs', () => {
+    expect(n.codeBlock({ language: 'javascript' }, 'foo').toJSON()).toEqual({
+      type: 'codeBlock',
+      attrs: { language: 'javascript' },
+      content: [{ text: 'foo', type: 'text' }],
+    })
+  })
+
+  it('can check node activity', () => {
+    editor.set(n.doc(n.heading('<a>foo<b>')))
+    expect(editor.nodes.heading.isActive()).toBe(true)
+    expect(editor.nodes.paragraph.isActive()).toBe(false)
+  })
+})
+
+describe('MarkAction', () => {
+  const { editor, m, n } = setupTest()
+
+  it('can apply mark', () => {
+    expect(n.p(m.bold('foo')).toJSON()).toEqual({
+      type: 'paragraph',
+      content: [{ marks: [{ type: 'bold' }], text: 'foo', type: 'text' }],
+    })
+  })
+
+  it('can apply mark with attrs', () => {
+    expect(
+      n.p(m.link({ href: 'https://example.com', target: '_blank', rel: 'noopener' }, 'foo')).toJSON(),
+    ).toEqual({
+      type: 'paragraph',
+      content: [
+        {
+          marks: [{ type: 'link', attrs: { href: 'https://example.com', target: '_blank', rel: 'noopener' } }],
+          text: 'foo',
+          type: 'text',
+        },
+      ],
+    })
+  })
+
+  it('can apply multiple marks', () => {
+    const json = jsonFromNode(n.p(m.bold(m.italic('foo'))))
+    const marks = json.content?.[0].marks?.map((mark) => mark.type)
+    expect(marks?.sort()).toEqual(['bold', 'italic'])
+  })
+
+  it('can apply the same mark multiple times', () => {
+    const href1 = 'https://example.com/1'
+    const href2 = 'https://example.com/2'
+    const link1 = (node: NodeChild) => m.link({ href: href1 }, node)
+    const link2 = (node: NodeChild) => m.link({ href: href2, target: '_blank', rel: 'noopener' }, node)
+
+    expect(n.p(link1('foo')).toJSON()).toEqual({
+      type: 'paragraph',
+      content: [
+        {
+          type: 'text',
+          text: 'foo',
+          marks: [{ attrs: { href: href1, target: null, rel: null }, type: 'link' }],
+        },
+      ],
+    })
+
+    expect(n.p(link2(link1('foo'))).toJSON()).toEqual({
+      type: 'paragraph',
+      content: [
+        {
+          type: 'text',
+          text: 'foo',
+          marks: [{ attrs: { href: href2, target: '_blank', rel: 'noopener' }, type: 'link' }],
+        },
+      ],
+    })
+
+    expect(n.p(link2(link2(link2('foo')))).toJSON()).toEqual({
+      type: 'paragraph',
+      content: [
+        {
+          type: 'text',
+          text: 'foo',
+          marks: [{ attrs: { href: href2, target: '_blank', rel: 'noopener' }, type: 'link' }],
+        },
+      ],
+    })
+  })
+
+  it('can check mark activity', () => {
+    editor.set(n.doc(n.p('<a>foo<b>')))
+    expect(editor.marks.bold.isActive()).toBe(false)
+    expect(editor.marks.italic.isActive()).toBe(false)
+
+    editor.set(n.doc(n.p('<a>', m.bold('foo'), '<b>')))
+    expect(editor.marks.bold.isActive()).toBe(true)
+    expect(editor.marks.italic.isActive()).toBe(false)
+  })
+
+  it('can check mark activity for cross-paragraph selection', () => {
+    editor.set(n.doc(n.p('<a>', m.bold('foo')), n.p(m.bold('foo'), '<b>')))
+
+    expect(editor.marks.bold.isActive()).toBe(true)
+    expect(editor.marks.italic.isActive()).toBe(false)
+  })
+
+  it('should not set isActive to true when only part of the text is marked', () => {
+    editor.set(n.doc(n.p('<a>', 'foo', m.bold('bar'), 'baz', '<b>')))
+    expect(editor.marks.bold.isActive()).toBe(false)
+
+    editor.set(n.doc(n.p('<a>', m.bold('foo'), 'bar', '<b>')))
+    expect(editor.marks.bold.isActive()).toBe(false)
+
+    editor.set(n.doc(n.p('<a>', 'foo', m.bold('bar'), '<b>')))
+    expect(editor.marks.bold.isActive()).toBe(false)
+
+    editor.set(n.doc(n.p('<a>', m.bold('foo', 'bar'), '<b>')))
+    expect(editor.marks.bold.isActive()).toBe(true)
+  })
+
+  it('should not set isActive to true when multiple empty paragraphs are selected', () => {
+    editor.set(n.doc(n.p('<a>'), n.p(''), n.p('<b>')))
+    expect(editor.marks.bold.isActive()).toBe(false)
+  })
+})