@prosekit/extensions 0.11.4 → 0.11.6

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,36 @@
+import {
+  defineCommands,
+  insertNode,
+  type Extension,
+} from '@prosekit/core'
+import type { Command } from '@prosekit/pm/state'
+
+import type { ImageAttrs } from './image-spec'
+
+/**
+ * @internal
+ */
+export type ImageCommandsExtension = Extension<{
+  Commands: {
+    insertImage: [attrs?: ImageAttrs]
+  }
+}>
+
+/**
+ * Returns a command that inserts an image node with the given attributes at the
+ * current selection position.
+ *
+ * @public
+ */
+export function insertImage(attrs?: ImageAttrs): Command {
+  return insertNode({ type: 'image', attrs })
+}
+
+/**
+ * @internal
+ */
+export function defineImageCommands(): ImageCommandsExtension {
+  return defineCommands({
+    insertImage,
+  })
+}

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-upload-handler.ts

@@ -0,0 +1,156 @@
+import {
+  insertNode,
+  ProseKitError,
+  union,
+  type PlainExtension,
+} from '@prosekit/core'
+import type { EditorView } from '@prosekit/pm/view'
+
+import {
+  defineFileDropHandler,
+  defineFilePasteHandler,
+  UploadTask,
+  type FileDropHandler,
+  type FileDropHandlerOptions,
+  type FilePasteHandler,
+  type FilePasteHandlerOptions,
+  type Uploader,
+} from '../file'
+
+import type { ImageAttrs } from './image-spec'
+
+/**
+ * A predicate to determine if the pasted file should be uploaded and inserted as an image.
+ */
+export type ImageCanPastePredicate = (options: FilePasteHandlerOptions) => boolean
+
+/**
+ * A predicate to determine if the dropped file should be uploaded and inserted as an image.
+ */
+export type ImageCanDropPredicate = (options: FileDropHandlerOptions) => boolean
+
+/**
+ * A handler to be called when an error occurs during the upload.
+ */
+export type ImageUploadErrorHandler = (options: ImageUploadErrorHandlerOptions) => void
+
+/**
+ * Options for the {@link ImageUploadErrorHandler} callback.
+ */
+export interface ImageUploadErrorHandlerOptions {
+  /**
+   * The file that was uploaded.
+   */
+  file: File
+  /**
+   * The error that occurred during the upload.
+   */
+  error: unknown
+  /**
+   * The upload task that was used to upload the file.
+   */
+  uploadTask: UploadTask<string>
+}
+
+/**
+ * Options for {@link defineImageUploadHandler}.
+ */
+export interface ImageUploadHandlerOptions {
+  /**
+   * The uploader used to upload the file. It should return a promise that
+   * resolves to the URL of the uploaded image.
+   */
+  uploader: Uploader<string>
+  /**
+   * A predicate to determine if the pasted file should be uploaded and inserted as an image.
+   * If not provided, it defaults to only allowing paste of files with a content type starting with `image/`.
+   */
+  canPaste?: ImageCanPastePredicate
+  /**
+   * A predicate to determine if the dropped file should be uploaded and inserted as an image.
+   * If not provided, it defaults to only allowing drop of files with a content type starting with `image/`.
+   */
+  canDrop?: ImageCanDropPredicate
+  /**
+   * A handler to be called when an error occurs during the upload.
+   * If not provided, it defaults to logging the error to the console.
+   */
+  onError?: ImageUploadErrorHandler
+}
+
+function defaultCanUpload({ file }: { file: File }): boolean {
+  // Only handle image files by default
+  return file.type.startsWith('image/')
+}
+
+const defaultOnError: ImageUploadErrorHandler = ({ error }) => {
+  console.error('[prosekit] Failed to upload image:', error)
+}
+
+/**
+ * Returns an extension that handles image file uploads when pasting or dropping
+ * images into the editor.
+ *
+ * @param options
+ */
+export function defineImageUploadHandler({
+  uploader,
+  canPaste = defaultCanUpload,
+  canDrop = defaultCanUpload,
+  onError = defaultOnError,
+}: ImageUploadHandlerOptions): PlainExtension {
+  const handleInsert = (view: EditorView, file: File, pos?: number): boolean => {
+    const uploadTask = new UploadTask({ file, uploader })
+    const objectURL = uploadTask.objectURL
+    const attrs: ImageAttrs = { src: objectURL }
+    uploadTask.finished.then((resultURL) => {
+      if (view.isDestroyed) {
+        return
+      } else if (typeof resultURL !== 'string') {
+        const error = new ProseKitError(`Unexpected upload result. Expected a string but got ${typeof resultURL}`)
+        onError({ file, error, uploadTask })
+      } else {
+        replaceImageURL(view, objectURL, resultURL)
+        UploadTask.delete(objectURL)
+      }
+    }).catch((error) => {
+      onError({ file, error, uploadTask })
+    })
+    const command = insertNode({ type: 'image', attrs, pos })
+    return command(view.state, view.dispatch, view)
+  }
+
+  const handlePaste: FilePasteHandler = (options) => {
+    if (!canPaste(options)) return false
+    return handleInsert(options.view, options.file)
+  }
+
+  const handleDrop: FileDropHandler = (options) => {
+    if (!canDrop(options)) return false
+    return handleInsert(options.view, options.file, options.pos)
+  }
+
+  return union(
+    defineFilePasteHandler(handlePaste),
+    defineFileDropHandler(handleDrop),
+  )
+}
+
+function replaceImageURL(view: EditorView, oldURL: string, newURL: string) {
+  const positions: number[] = []
+  view.state.doc.descendants((node, pos) => {
+    if (node.type.name === 'image') {
+      const attrs = node.attrs as ImageAttrs
+      if (attrs.src === oldURL) {
+        positions.push(pos)
+      }
+    }
+  })
+  if (positions.length > 0) {
+    const tr = view.state.tr
+    for (const pos of positions) {
+      tr.setNodeAttribute(pos, 'src', newURL)
+    }
+    view.dispatch(tr)
+  }
+}

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,22 @@
+export {
+  defineImage,
+  type ImageExtension,
+} from './image'
+export {
+  defineImageCommands,
+  insertImage,
+  type ImageCommandsExtension,
+} from './image-commands'
+export {
+  defineImageSpec,
+  type ImageAttrs,
+  type ImageSpecExtension,
+} from './image-spec'
+export {
+  defineImageUploadHandler,
+  type ImageCanDropPredicate,
+  type ImageCanPastePredicate,
+  type ImageUploadErrorHandler,
+  type ImageUploadErrorHandlerOptions,
+  type ImageUploadHandlerOptions,
+} from './image-upload-handler'

package/src/index.ts

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

package/src/input-rule/index.ts

@@ -0,0 +1,237 @@
+import {
+  defineFacet,
+  defineFacetPayload,
+  getMarkType,
+  getNodeType,
+  isMarkAbsent,
+  maybeRun,
+  pluginFacet,
+  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 type { Plugin } from '@prosekit/pm/state'
+
+/**
+ * Defines an input rule extension.
+ *
+ * @param rule - The ProseMirror input rule to add.
+ *
+ * @public
+ */
+export function defineInputRule(rule: InputRule): PlainExtension {
+  return defineInputRuleFacetPayload(() => rule)
+}
+
+/**
+ * Options for {@link defineMarkInputRule}.
+ *
+ * @public
+ */
+export interface MarkInputRuleOptions {
+  /**
+   * The regular expression to match against, which should end with `$` and has
+   * exactly one capture group. All other matched text outside the capture group
+   * will be deleted.
+   */
+  regex: RegExp
+
+  /**
+   * The type of mark to set.
+   */
+  type: string | MarkType
+
+  /**
+   * Attributes to set on the mark.
+   */
+  attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null)
+
+  /**
+   * Whether this rule should fire inside marks marked as [code](https://prosemirror.net/docs/ref/#model.MarkSpec.code).
+   *
+   * @default `false`
+   */
+  inCodeMark?: boolean
+}
+
+/**
+ * @internal
+ */
+export function createMarkInputRule({
+  regex,
+  type,
+  attrs = null,
+  inCodeMark = false,
+}: MarkInputRuleOptions): InputRule {
+  const rule = new InputRule(regex, (state, match, start, end) => {
+    const { tr, schema } = state
+    const [fullText, markText] = match
+
+    if (!markText) {
+      return null
+    }
+
+    const markStart = start + fullText.indexOf(markText)
+    const markEnd = markStart + markText.length
+
+    if (!(start <= markStart && markStart < markEnd && markEnd <= end)) {
+      // Incorrect regex.
+      return null
+    }
+
+    const markType = getMarkType(schema, type)
+    const mark = markType.create(maybeRun(attrs, match))
+
+    if (!isMarkAbsent(tr.doc, markStart, markEnd, markType, attrs)) {
+      // The mark is already active.
+      return null
+    }
+
+    const initialStoredMarks = tr.storedMarks ?? []
+
+    tr.addMark(markStart, markEnd, mark)
+
+    if (markEnd < end) {
+      tr.delete(markEnd, end)
+    }
+    if (start < markStart) {
+      tr.delete(start, markStart)
+    }
+
+    // Make sure not to reactivate any marks which had previously been
+    // deactivated. By keeping track of the initial stored marks we are able to
+    // discard any unintended consequences of deleting text and adding it again.
+    tr.setStoredMarks(initialStoredMarks)
+
+    return tr
+  }, { inCodeMark })
+
+  return rule
+}
+
+/**
+ * Defines an input rule for automatically adding inline marks when a given
+ * pattern is typed.
+ *
+ * @public
+ */
+export function defineMarkInputRule(
+  options: MarkInputRuleOptions,
+): PlainExtension {
+  return defineInputRule(createMarkInputRule(options))
+}
+
+/**
+ * Defines an input rule that changes the type of a textblock when the matched
+ * text is typed into it.
+ *
+ * See also [textblockTypeInputRule](https://prosemirror.net/docs/ref/#inputrules.textblockTypeInputRule)
+ *
+ * @param options
+ *
+ * @public
+ */
+export function defineTextBlockInputRule({
+  regex,
+  type,
+  attrs,
+}: {
+  /**
+   * The regular expression to match against, which should end with `$`. It
+   * usually also starts with `^` to that it is only matched at the start of a
+   * textblock.
+   */
+  regex: RegExp
+
+  /**
+   * The node type to replace the matched text with.
+   */
+  type: string | NodeType
+
+  /**
+   * Attributes to set on the node.
+   */
+  attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null)
+}): PlainExtension {
+  return defineInputRuleFacetPayload(({ schema }): InputRule => {
+    const nodeType = getNodeType(schema, type)
+    return textblockTypeInputRule(regex, nodeType, attrs)
+  })
+}
+
+/**
+ * Defines an input rule for automatically wrapping a textblock when a given
+ * string is typed.
+ *
+ * See also [wrappingInputRule](https://prosemirror.net/docs/ref/#inputrules.wrappingInputRule)
+ *
+ * @param options
+ *
+ * @public
+ */
+export function defineWrappingInputRule({
+  regex,
+  type,
+  attrs,
+  join,
+}: {
+  /**
+   * The regular expression to match against, which should end with `$`. It
+   * usually also starts with `^` to that it is only matched at the start of a
+   * textblock.
+   */
+  regex: RegExp
+
+  /**
+   * The type of node to wrap in.
+   */
+  type: string | NodeType
+
+  /**
+   * Attributes to set on the node.
+   */
+  attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null)
+
+  /**
+   * By default, if there's a node with the same type above the newly wrapped
+   * node, the rule will try to
+   * [join](https://prosemirror.net/docs/ref/#transform.Transform.join) those
+   * two nodes. You can pass a join predicate, which takes a regular expression
+   * match and the node before the wrapped node, and can return a boolean to
+   * indicate whether a join should happen.
+   */
+  join?: (match: RegExpMatchArray, node: ProseMirrorNode) => boolean
+}): PlainExtension {
+  return defineInputRuleFacetPayload(({ schema }): InputRule => {
+    const nodeType = getNodeType(schema, type)
+    return wrappingInputRule(regex, nodeType, attrs, join)
+  })
+}
+
+function defineInputRuleFacetPayload(input: InputRulePayload): PlainExtension {
+  return defineFacetPayload(inputRuleFacet, [input]) as PlainExtension
+}
+
+type InputRulePayload = (context: { schema: Schema }) => InputRule
+
+const inputRuleFacet = defineFacet<InputRulePayload, PluginPayload>({
+  reducer: (inputs: InputRulePayload[]): PluginPayload => {
+    return (context): Plugin[] => {
+      const rules: InputRule[] = inputs.flatMap((callback) => callback(context))
+      return [inputRules({ rules })]
+    }
+  },
+  parent: pluginFacet,
+})

package/src/italic/index.ts

@@ -0,0 +1,14 @@
+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'

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

@@ -0,0 +1,75 @@
+import {
+  createEditor,
+  defineBaseCommands,
+  union,
+} from '@prosekit/core'
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { defineDoc } from '../doc'
+import { defineParagraph } from '../paragraph'
+import { defineText } from '../text'
+
+import { defineItalic } from './index'
+
+describe('command', () => {
+  const extension = union(
+    defineDoc(),
+    defineParagraph(),
+    defineText(),
+    defineItalic(),
+    defineBaseCommands(),
+  )
+  const editor = createEditor({ extension })
+  const div = document.body.appendChild(document.createElement('div'))
+  editor.mount(div)
+
+  describe('toggleItalic', () => {
+    it('can add and remove italic', () => {
+      editor.commands.insertText({ text: 'Hello world' })
+      editor.commands.selectAll()
+      editor.commands.toggleItalic()
+      expect(editor.view.state.doc.toJSON()).toMatchInlineSnapshot(`
+        {
+          "content": [
+            {
+              "content": [
+                {
+                  "marks": [
+                    {
+                      "type": "italic",
+                    },
+                  ],
+                  "text": "Hello world",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "doc",
+        }
+      `)
+      editor.commands.toggleItalic()
+      expect(editor.view.state.doc.toJSON()).toMatchInlineSnapshot(`
+        {
+          "content": [
+            {
+              "content": [
+                {
+                  "text": "Hello world",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "doc",
+        }
+      `)
+    })
+  })
+})

package/src/italic/italic-commands.ts

@@ -0,0 +1,23 @@
+import {
+  defineCommands,
+  toggleMark,
+  type Extension,
+} from '@prosekit/core'
+
+/**
+ * @internal
+ */
+export type ItalicCommandsExtension = Extension<{
+  Commands: {
+    toggleItalic: []
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineItalicCommands(): ItalicCommandsExtension {
+  return defineCommands({
+    toggleItalic: () => toggleMark({ type: 'italic' }),
+  })
+}

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

@@ -0,0 +1,25 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../testing'
+import { inputText } from '../testing/keyboard'
+
+describe('defineItalicInputRule', () => {
+  const { editor, n, m } = setupTest()
+  it('should add italic marks when typing "*"', async () => {
+    const doc = n.doc(n.p('<a>'))
+    editor.set(doc)
+
+    await inputText('*word')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p('*word')).toJSON(),
+    )
+    await inputText('*')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(m.italic('word'))).toJSON(),
+    )
+  })
+})