@prosekit/extensions 0.13.0 → 0.14.0

package/src/image/image-commands/upload-image.spec.ts

@@ -0,0 +1,245 @@
+import { sleep } from '@ocavue/utils'
+import { findNode, findNodes } from '@prosekit/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { Uploader } from '../../file'
+import { setupTest } from '../../testing'
+import type { ImageAttrs } from '../image-spec'
+
+import { replaceImageURL, uploadImage, type ImageUploadErrorHandler } from './upload-image'
+
+describe('uploadImage', () => {
+  it('should insert image at current selection by default', async () => {
+    const { editor, n, mockUploader, file, findImage } = setup()
+    const doc = n.doc(n.paragraph('hello'))
+    editor.set(doc)
+    editor.view.dispatch(editor.state.tr.setSelection(editor.state.selection))
+
+    const command = uploadImage({ uploader: mockUploader, file })
+    expect(editor.exec(command)).toBe(true)
+
+    expect(findImage().attrs.src).toMatch(/^blob:/)
+    await sleep(0)
+    expect(findImage().attrs.src).toBe('https://example.com/uploaded.png')
+  })
+
+  it('should insert image at specified position', async () => {
+    const { editor, n, mockUploader, file, findImage } = setup()
+    const doc = n.doc(
+      /*0*/
+      n.paragraph(/*1*/ 'hello' /*6*/),
+      /*7*/
+      n.paragraph(/*8*/ 'world' /*13*/),
+      /*14*/
+    )
+    editor.set(doc)
+
+    const imagePos = 7
+    const command = uploadImage({ uploader: mockUploader, file, pos: imagePos })
+    expect(editor.exec(command)).toBe(true)
+
+    expect(findImage().attrs.src).toMatch(/^blob:/)
+    await sleep(0)
+    expect(findImage().attrs.src).toBe('https://example.com/uploaded.png')
+  })
+
+  it('should replace existing image when replace=true', async () => {
+    const { editor, n, mockUploader, file, findImageURLs } = setup()
+    const doc = n.doc(
+      /*0*/
+      n.paragraph(/*1*/ 'hello' /*6*/),
+      /*7*/
+      n.image({ src: 'https://example.com/old.png' }),
+      /*8*/
+      n.paragraph(/*9*/ 'world' /*14*/),
+      /*15*/
+    )
+    editor.set(doc)
+    expect(findImageURLs()).toEqual(['https://example.com/old.png'])
+
+    const imagePos = 7
+    const command = uploadImage({
+      uploader: mockUploader,
+      file,
+      pos: imagePos,
+      replace: true,
+    })
+    expect(editor.exec(command)).toBe(true)
+
+    await sleep(0)
+    expect(findImageURLs()).toEqual(['https://example.com/uploaded.png'])
+  })
+
+  it('should not replace existing image when replace=false', async () => {
+    const { editor, n, mockUploader, file, findImageURLs } = setup()
+    const doc = n.doc(
+      /*0*/
+      n.paragraph(/*1*/ 'hello' /*6*/),
+      /*7*/
+      n.image({ src: 'https://example.com/old.png' }),
+      /*8*/
+      n.paragraph(/*9*/ 'world' /*14*/),
+      /*15*/
+    )
+    editor.set(doc)
+    expect(findImageURLs()).toEqual(['https://example.com/old.png'])
+
+    const imagePos = 7
+    const command = uploadImage({
+      uploader: mockUploader,
+      file,
+      pos: imagePos,
+      replace: false,
+    })
+    expect(editor.exec(command)).toBe(true)
+    await sleep(0)
+    expect(findImageURLs()).toEqual(['https://example.com/uploaded.png', 'https://example.com/old.png'])
+  })
+
+  it('should insert image when replace=true but position has non-image node', async () => {
+    const { editor, n, mockUploader, file, findImageURLs } = setup()
+    const doc = n.doc(
+      /*0*/
+      n.paragraph(/*1*/ 'hello' /*6*/),
+      /*7*/
+      n.paragraph(/*8*/ 'world' /*13*/),
+      /*14*/
+    )
+    editor.set(doc)
+
+    const command = uploadImage({
+      uploader: mockUploader,
+      file,
+      pos: 11,
+      replace: true,
+    })
+    expect(editor.exec(command)).toBe(true)
+    expect(editor.state.doc.child(0).type.name).toBe('paragraph')
+    expect(editor.state.doc.child(1).type.name).toBe('paragraph')
+    expect(editor.state.doc.child(2).type.name).toBe('image')
+    await sleep(0)
+    expect(findImageURLs()).toEqual(['https://example.com/uploaded.png'])
+  })
+
+  it('should call onError when upload fails', async () => {
+    const { editor, n, file } = setup()
+    const error = new Error('Upload failed')
+    const failingUploader: Uploader<string> = vi.fn().mockRejectedValue(error)
+    const onError = vi.fn<ImageUploadErrorHandler>()
+
+    const doc = n.doc(n.paragraph('hello'))
+    editor.set(doc)
+
+    const command = uploadImage({
+      uploader: failingUploader,
+      file,
+      onError,
+    })
+    editor.exec(command)
+
+    await sleep(0)
+    expect(onError).toHaveBeenCalledOnce()
+    const callArg = onError.mock.calls[0][0]
+    expect(callArg.file).toBe(file)
+    expect(callArg.uploadTask).toBeDefined()
+    expect((callArg.error as Error).cause).toBe(error)
+  })
+})
+
+describe('replaceImageURL', () => {
+  it('should replace single image URL', () => {
+    const { editor, n, findImage } = setup()
+    const doc = n.doc(
+      n.paragraph('hello'),
+      n.image({ src: 'blob:old-url' }),
+      n.paragraph('world'),
+    )
+    editor.set(doc)
+
+    replaceImageURL(editor.view, 'blob:old-url', 'https://example.com/new.png')
+
+    expect(findImage().attrs.src).toBe('https://example.com/new.png')
+  })
+
+  it('should replace multiple image URLs', () => {
+    const { editor, n, findImageURLs } = setup()
+    const doc = n.doc(
+      n.paragraph('hello'),
+      n.image({ src: 'blob:old-url' }),
+      n.paragraph('middle'),
+      n.image({ src: 'blob:old-url' }),
+      n.paragraph('world'),
+    )
+    editor.set(doc)
+
+    replaceImageURL(editor.view, 'blob:old-url', 'https://example.com/new.png')
+
+    expect(findImageURLs()).toEqual(['https://example.com/new.png', 'https://example.com/new.png'])
+  })
+
+  it('should not replace images with different URLs', () => {
+    const { editor, n, findImageURLs } = setup()
+    const doc = n.doc(
+      n.paragraph('hello'),
+      n.image({ src: 'blob:old-url' }),
+      n.image({ src: 'blob:different-url' }),
+      n.paragraph('world'),
+    )
+    editor.set(doc)
+
+    replaceImageURL(editor.view, 'blob:old-url', 'https://example.com/new.png')
+
+    expect(findImageURLs()).toEqual(['https://example.com/new.png', 'blob:different-url'])
+  })
+
+  it('should do nothing when no images match', () => {
+    const { editor, n } = setup()
+    const doc = n.doc(
+      n.paragraph('hello'),
+      n.image({ src: 'blob:different-url' }),
+      n.paragraph('world'),
+    )
+    editor.set(doc)
+
+    const initialState = editor.state
+
+    replaceImageURL(editor.view, 'blob:non-existent', 'https://example.com/new.png')
+
+    expect(editor.state).toBe(initialState)
+  })
+})
+
+function isImage(node: ProseMirrorNode) {
+  return node.type.name === 'image'
+}
+
+function setup() {
+  const { editor, n } = setupTest()
+  const mockUploader = vi.fn().mockResolvedValue('https://example.com/uploaded.png')
+  const file = new File(['test'], 'test.png', { type: 'image/png' })
+
+  const findImage = (): {
+    pos: number
+    attrs: ImageAttrs
+    node: ProseMirrorNode
+  } => {
+    const found = findNode(editor.state.doc, isImage)
+    if (!found) {
+      throw new Error('Image not found')
+    }
+    const { pos, node } = found
+    const attrs = node.attrs as ImageAttrs
+    return { pos, attrs, node }
+  }
+
+  const findImages = () => {
+    return findNodes(editor.state.doc, isImage)
+  }
+
+  const findImageURLs = (): string[] => {
+    return findImages().map(({ node }) => (node.attrs as ImageAttrs).src || '')
+  }
+
+  return { editor, n, mockUploader, file, findImage, findImageURLs }
+}

package/src/image/image-commands/upload-image.ts

@@ -1,14 +1,8 @@
-import {
-  insertNode,
-  ProseKitError,
-} from '@prosekit/core'
-import type { Command } from '@prosekit/pm/state'
+import { insertNode, ProseKitError } from '@prosekit/core'
+import type { Command, EditorState, Transaction } from '@prosekit/pm/state'
 import type { EditorView } from '@prosekit/pm/view'
 
-import {
-  UploadTask,
-  type Uploader,
-} from '../../file'
+import { UploadTask, type Uploader } from '../../file'
 import type { ImageAttrs } from '../image-spec'
 
 /**
@@ -31,6 +25,13 @@ export interface UploadImageOptions {
    * image is inserted at the current selection.
    */
   pos?: number
+  /**
+   * If the image should replace the existing image at the given position. This
+   * is only used if `pos` is provided.
+   *
+   * @default false
+   */
+  replace?: boolean
   /**
    * A handler to be called when an error occurs during the upload.
    */
@@ -72,11 +73,16 @@ export type ImageUploadErrorHandler = (options: ImageUploadErrorHandlerOptions)
  *
  * @public
  */
-export function uploadImage({ uploader, file, pos, onError }: UploadImageOptions): Command {
+export function uploadImage({
+  uploader,
+  file,
+  pos,
+  replace = false,
+  onError,
+}: UploadImageOptions): Command {
   return (state, dispatch, view) => {
     const uploadTask = new UploadTask({ file, uploader })
     const objectURL = uploadTask.objectURL
-    const attrs: ImageAttrs = { src: objectURL }
 
     uploadTask.finished
       .then((resultURL) => {
@@ -101,10 +107,39 @@ export function uploadImage({ uploader, file, pos, onError }: UploadImageOptions
         onError?.({ file, error, uploadTask })
       })
 
+    if (replace && pos != null) {
+      if (replaceExistingImageURL(state, pos, objectURL, dispatch)) {
+        return true
+      }
+    }
+
+    const attrs: ImageAttrs = { src: objectURL }
     return insertNode({ type: 'image', attrs, pos })(state, dispatch, view)
   }
 }
 
+function replaceExistingImageURL(
+  state: EditorState,
+  pos: number,
+  imageURL: string,
+  dispatch?: (tr: Transaction) => void,
+): boolean {
+  const node = state.doc.nodeAt(pos)
+  if (!node || node.type.name !== 'image') {
+    return false
+  }
+  const attrs = node.attrs as ImageAttrs
+  if (attrs.src === imageURL) {
+    return true
+  }
+  if (dispatch) {
+    const tr = state.tr
+    tr.setNodeAttribute(pos, 'src', imageURL)
+    dispatch(tr)
+  }
+  return true
+}
+
 /**
  * Replaces the temporary image URL with the final uploaded URL.
  *

package/src/image/image-commands.ts

@@ -1,13 +1,7 @@
-import {
-  defineCommands,
-  type Extension,
-} from '@prosekit/core'
+import { defineCommands, type Extension } from '@prosekit/core'
 
 import { insertImage } from './image-commands/insert-image'
-import {
-  uploadImage,
-  type UploadImageOptions,
-} from './image-commands/upload-image'
+import { uploadImage, type UploadImageOptions } from './image-commands/upload-image'
 import type { ImageAttrs } from './image-spec'
 
 /**

package/src/image/image-spec.ts

@@ -1,7 +1,4 @@
-import {
-  defineNodeSpec,
-  type Extension,
-} from '@prosekit/core'
+import { defineNodeSpec, type Extension } from '@prosekit/core'
 
 /**
  * @public

package/src/image/image-upload-handler.ts

@@ -1,7 +1,4 @@
-import {
-  union,
-  type PlainExtension,
-} from '@prosekit/core'
+import { union, type PlainExtension } from '@prosekit/core'
 
 import {
   defineFileDropHandler,
@@ -13,10 +10,7 @@ import {
   type Uploader,
 } from '../file'
 
-import {
-  uploadImage,
-  type ImageUploadErrorHandler,
-} from './image-commands/upload-image'
+import { uploadImage, type ImageUploadErrorHandler } from './image-commands/upload-image'
 
 /**
  * A predicate to determine if the pasted file should be uploaded and inserted as an image.

package/src/image/image.ts

@@ -1,16 +1,7 @@
-import {
-  union,
-  type Union,
-} from '@prosekit/core'
+import { union, type Union } from '@prosekit/core'
 
-import {
-  defineImageCommands,
-  type ImageCommandsExtension,
-} from './image-commands'
-import {
-  defineImageSpec,
-  type ImageSpecExtension,
-} from './image-spec'
+import { defineImageCommands, type ImageCommandsExtension } from './image-commands'
+import { defineImageSpec, type ImageSpecExtension } from './image-spec'
 
 /**
  * @internal

package/src/image/index.ts

@@ -1,11 +1,5 @@
-export {
-  defineImage,
-  type ImageExtension,
-} from './image'
-export {
-  defineImageCommands,
-  type ImageCommandsExtension,
-} from './image-commands'
+export { defineImage, type ImageExtension } from './image'
+export { defineImageCommands, type ImageCommandsExtension } from './image-commands'
 export { insertImage } from './image-commands/insert-image'
 export {
   replaceImageURL,
@@ -14,11 +8,7 @@ export {
   type ImageUploadErrorHandlerOptions,
   type UploadImageOptions,
 } from './image-commands/upload-image'
-export {
-  defineImageSpec,
-  type ImageAttrs,
-  type ImageSpecExtension,
-} from './image-spec'
+export { defineImageSpec, type ImageAttrs, type ImageSpecExtension } from './image-spec'
 export {
   defineImageUploadHandler,
   type ImageCanDropPredicate,

package/src/input-rule/index.ts

@@ -9,19 +9,8 @@ import {
   type PlainExtension,
   type PluginPayload,
 } from '@prosekit/core'
-import {
-  InputRule,
-  inputRules,
-  textblockTypeInputRule,
-  wrappingInputRule,
-} from '@prosekit/pm/inputrules'
-import type {
-  Attrs,
-  MarkType,
-  NodeType,
-  ProseMirrorNode,
-  Schema,
-} from '@prosekit/pm/model'
+import { InputRule, inputRules, textblockTypeInputRule, wrappingInputRule } from '@prosekit/pm/inputrules'
+import type { Attrs, MarkType, NodeType, ProseMirrorNode, Schema } from '@prosekit/pm/model'
 import type { Plugin } from '@prosekit/pm/state'
 
 /**

package/src/italic/index.ts

@@ -1,14 +1,5 @@
-export {
-  defineItalic,
-  type ItalicExtension,
-} from './italic'
-export {
-  defineItalicCommands,
-  type ItalicCommandsExtension,
-} from './italic-commands'
+export { defineItalic, type ItalicExtension } from './italic'
+export { defineItalicCommands, type ItalicCommandsExtension } from './italic-commands'
 export { defineItalicInputRule } from './italic-input-rule'
 export { defineItalicKeymap } from './italic-keymap'
-export {
-  defineItalicSpec,
-  type ItalicSpecExtension,
-} from './italic-spec'
+export { defineItalicSpec, type ItalicSpecExtension } from './italic-spec'

package/src/italic/italic-commands.spec.ts

@@ -1,13 +1,5 @@
-import {
-  createEditor,
-  defineBaseCommands,
-  union,
-} from '@prosekit/core'
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { createEditor, defineBaseCommands, union } from '@prosekit/core'
+import { describe, expect, it } from 'vitest'
 
 import { defineDoc } from '../doc'
 import { defineParagraph } from '../paragraph'

package/src/italic/italic-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/italic/italic-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/italic/italic-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/italic/italic-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/italic/italic-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/italic/italic.ts

@@ -1,18 +1,9 @@
-import {
-  union,
-  type Union,
-} from '@prosekit/core'
+import { union, type Union } from '@prosekit/core'
 
-import {
-  defineItalicCommands,
-  type ItalicCommandsExtension,
-} from './italic-commands'
+import { defineItalicCommands, type ItalicCommandsExtension } from './italic-commands'
 import { defineItalicInputRule } from './italic-input-rule'
 import { defineItalicKeymap } from './italic-keymap'
-import {
-  defineItalicSpec,
-  type ItalicSpecExtension,
-} from './italic-spec'
+import { defineItalicSpec, type ItalicSpecExtension } from './italic-spec'
 
 /**
  * @internal

package/src/link/index.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/link/index.ts

@@ -17,11 +17,7 @@ import { defineInputRule } from '../input-rule'
 import { defineMarkRule } from '../mark-rule'
 
 import { defineLinkPasteRule } from './link-paste-rule'
-import {
-  LINK_ENTER_RE,
-  LINK_INPUT_RE,
-  LINK_MARK_RE,
-} from './link-regex'
+import { LINK_ENTER_RE, LINK_INPUT_RE, LINK_MARK_RE } from './link-regex'
 import type { LinkAttrs } from './link-types'
 
 export { defineLinkPasteRule }

package/src/link/link-paste-rule.spec.ts

@@ -1,14 +1,7 @@
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { describe, expect, it } from 'vitest'
 
 import { setupTest } from '../testing'
-import {
-  pasteHTML,
-  pasteText,
-} from '../testing/clipboard'
+import { pasteHTML, pasteText } from '../testing/clipboard'
 
 describe('defineLinkPasteRule', () => {
   const { editor, n, m } = setupTest()

package/src/link/link-regex.spec.ts

@@ -1,8 +1,4 @@
-import {
-  describe,
-  expect,
-  it,
-} from 'vitest'
+import { describe, expect, it } from 'vitest'
 
 import { LINK_MARK_RE } from './link-regex'
 

package/src/list/index.ts

@@ -6,20 +6,11 @@ export type {
   UnwrapListOptions,
   WrapInListGetAttrs,
 } from 'prosemirror-flat-list'
-export {
-  defineList,
-  type ListExtension,
-} from './list'
-export {
-  defineListCommands,
-  type ListCommandsExtension,
-} from './list-commands'
+export { defineList, type ListExtension } from './list'
+export { defineListCommands, type ListCommandsExtension } from './list-commands'
 export { defineListInputRules } from './list-input-rules'
 export { defineListKeymap } from './list-keymap'
 export { defineListPlugins } from './list-plugins'
 export { defineListSerializer } from './list-serializer'
-export {
-  defineListSpec,
-  type ListSpecExtension,
-} from './list-spec'
+export { defineListSpec, type ListSpecExtension } from './list-spec'
 export type { ListAttrs } from './list-types'

package/src/list/list-commands.ts

@@ -1,8 +1,4 @@
-import {
-  defineCommands,
-  insertNode,
-  type Extension,
-} from '@prosekit/core'
+import { defineCommands, insertNode, type Extension } from '@prosekit/core'
 import type { Command } from '@prosekit/pm/state'
 import {
   createDedentListCommand as dedentList,

package/src/list/list-input-rules.ts

@@ -1,7 +1,4 @@
-import {
-  union,
-  type Extension,
-} from '@prosekit/core'
+import { union, type Extension } from '@prosekit/core'
 import { listInputRules } from 'prosemirror-flat-list'
 
 import { defineInputRule } from '../input-rule'

package/src/list/list-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'