@tiptap/core 3.0.0 → 3.0.1

package/src/commands/wrapIn.ts

@@ -1,8 +1,8 @@
 import { wrapIn as originalWrapIn } from '@tiptap/pm/commands'
-import { NodeType } from '@tiptap/pm/model'
+import type { NodeType } from '@tiptap/pm/model'
 
 import { getNodeType } from '../helpers/getNodeType.js'
-import { RawCommands } from '../types.js'
+import type { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -18,8 +18,10 @@ declare module '@tiptap/core' {
   }
 }
 
-export const wrapIn: RawCommands['wrapIn'] = (typeOrName, attributes = {}) => ({ state, dispatch }) => {
-  const type = getNodeType(typeOrName, state.schema)
+export const wrapIn: RawCommands['wrapIn'] =
+  (typeOrName, attributes = {}) =>
+  ({ state, dispatch }) => {
+    const type = getNodeType(typeOrName, state.schema)
 
-  return originalWrapIn(type, attributes)(state, dispatch)
-}
+    return originalWrapIn(type, attributes)(state, dispatch)
+  }

package/src/commands/wrapInList.ts

@@ -1,8 +1,8 @@
-import { NodeType } from '@tiptap/pm/model'
+import type { NodeType } from '@tiptap/pm/model'
 import { wrapInList as originalWrapInList } from '@tiptap/pm/schema-list'
 
 import { getNodeType } from '../helpers/getNodeType.js'
-import { RawCommands } from '../types.js'
+import type { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -18,8 +18,10 @@ declare module '@tiptap/core' {
   }
 }
 
-export const wrapInList: RawCommands['wrapInList'] = (typeOrName, attributes = {}) => ({ state, dispatch }) => {
-  const type = getNodeType(typeOrName, state.schema)
+export const wrapInList: RawCommands['wrapInList'] =
+  (typeOrName, attributes = {}) =>
+  ({ state, dispatch }) => {
+    const type = getNodeType(typeOrName, state.schema)
 
-  return originalWrapInList(type, attributes)(state, dispatch)
-}
+    return originalWrapInList(type, attributes)(state, dispatch)
+  }

package/src/extensions/clipboardTextSerializer.ts

@@ -5,7 +5,7 @@ import { getTextBetween } from '../helpers/getTextBetween.js'
 import { getTextSerializersFromSchema } from '../helpers/getTextSerializersFromSchema.js'
 
 export type ClipboardTextSerializerOptions = {
-  blockSeparator?: string,
+  blockSeparator?: string
 }
 
 export const ClipboardTextSerializer = Extension.create<ClipboardTextSerializerOptions>({
@@ -33,9 +33,7 @@ export const ClipboardTextSerializer = Extension.create<ClipboardTextSerializerO
             const range = { from, to }
 
             return getTextBetween(doc, range, {
-              ...(this.options.blockSeparator !== undefined
-                ? { blockSeparator: this.options.blockSeparator }
-                : {}),
+              ...(this.options.blockSeparator !== undefined ? { blockSeparator: this.options.blockSeparator } : {}),
               textSerializers,
             })
           },

package/src/extensions/delete.ts

@@ -0,0 +1,89 @@
+import { RemoveMarkStep } from '@tiptap/pm/transform'
+
+import { Extension } from '../Extension.js'
+import { combineTransactionSteps, getChangedRanges } from '../helpers/index.js'
+
+/**
+ * This extension allows you to be notified when the user deletes content you are interested in.
+ */
+export const Delete = Extension.create({
+  name: 'delete',
+
+  onUpdate({ transaction, appendedTransactions }) {
+    const callback = () => {
+      if (
+        this.editor.options.coreExtensionOptions?.delete?.filterTransaction?.(transaction) ??
+        transaction.getMeta('y-sync$')
+      ) {
+        return
+      }
+      const nextTransaction = combineTransactionSteps(transaction.before, [transaction, ...appendedTransactions])
+      const changes = getChangedRanges(nextTransaction)
+
+      changes.forEach(change => {
+        if (
+          nextTransaction.mapping.mapResult(change.oldRange.from).deletedAfter &&
+          nextTransaction.mapping.mapResult(change.oldRange.to).deletedBefore
+        ) {
+          nextTransaction.before.nodesBetween(change.oldRange.from, change.oldRange.to, (node, from) => {
+            const to = from + node.nodeSize - 2
+            const isFullyWithinRange = change.oldRange.from <= from && to <= change.oldRange.to
+
+            this.editor.emit('delete', {
+              type: 'node',
+              node,
+              from,
+              to,
+              newFrom: nextTransaction.mapping.map(from),
+              newTo: nextTransaction.mapping.map(to),
+              deletedRange: change.oldRange,
+              newRange: change.newRange,
+              partial: !isFullyWithinRange,
+              editor: this.editor,
+              transaction,
+              combinedTransform: nextTransaction,
+            })
+          })
+        }
+      })
+
+      const mapping = nextTransaction.mapping
+      nextTransaction.steps.forEach((step, index) => {
+        if (step instanceof RemoveMarkStep) {
+          const newStart = mapping.slice(index).map(step.from, -1)
+          const newEnd = mapping.slice(index).map(step.to)
+          const oldStart = mapping.invert().map(newStart, -1)
+          const oldEnd = mapping.invert().map(newEnd)
+
+          const foundBeforeMark = nextTransaction.doc.nodeAt(newStart - 1)?.marks.some(mark => mark.eq(step.mark))
+          const foundAfterMark = nextTransaction.doc.nodeAt(newEnd)?.marks.some(mark => mark.eq(step.mark))
+
+          this.editor.emit('delete', {
+            type: 'mark',
+            mark: step.mark,
+            from: step.from,
+            to: step.to,
+            deletedRange: {
+              from: oldStart,
+              to: oldEnd,
+            },
+            newRange: {
+              from: newStart,
+              to: newEnd,
+            },
+            partial: Boolean(foundAfterMark || foundBeforeMark),
+            editor: this.editor,
+            transaction,
+            combinedTransform: nextTransaction,
+          })
+        }
+      })
+    }
+
+    if (this.editor.options.coreExtensionOptions?.delete?.async ?? true) {
+      setTimeout(callback, 0)
+    } else {
+      callback()
+    }
+  },
+})

package/src/extensions/drop.ts

@@ -0,0 +1,26 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+import { Extension } from '../Extension.js'
+
+export const Drop = Extension.create({
+  name: 'drop',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('tiptapDrop'),
+
+        props: {
+          handleDrop: (_, e, slice, moved) => {
+            this.editor.emit('drop', {
+              editor: this.editor,
+              event: e,
+              slice,
+              moved,
+            })
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/extensions/focusEvents.ts

@@ -2,6 +2,8 @@ import { Plugin, PluginKey } from '@tiptap/pm/state'
 
 import { Extension } from '../Extension.js'
 
+export const focusEventsPluginKey = new PluginKey('focusEvents')
+
 export const FocusEvents = Extension.create({
   name: 'focusEvents',
 
@@ -10,15 +12,13 @@ export const FocusEvents = Extension.create({
 
     return [
       new Plugin({
-        key: new PluginKey('focusEvents'),
+        key: focusEventsPluginKey,
         props: {
           handleDOMEvents: {
             focus: (view, event: Event) => {
               editor.isFocused = true
 
-              const transaction = editor.state.tr
-                .setMeta('focus', { event })
-                .setMeta('addToHistory', false)
+              const transaction = editor.state.tr.setMeta('focus', { event }).setMeta('addToHistory', false)
 
               view.dispatch(transaction)
 
@@ -27,9 +27,7 @@ export const FocusEvents = Extension.create({
             blur: (view, event: Event) => {
               editor.isFocused = false
 
-              const transaction = editor.state.tr
-                .setMeta('blur', { event })
-                .setMeta('addToHistory', false)
+              const transaction = editor.state.tr.setMeta('blur', { event }).setMeta('addToHistory', false)
 
               view.dispatch(transaction)
 

package/src/extensions/index.ts

@@ -1,6 +1,9 @@
 export { ClipboardTextSerializer } from './clipboardTextSerializer.js'
 export { Commands } from './commands.js'
+export { Delete } from './delete.js'
+export { Drop } from './drop.js'
 export { Editable } from './editable.js'
-export { FocusEvents } from './focusEvents.js'
+export { FocusEvents, focusEventsPluginKey } from './focusEvents.js'
 export { Keymap } from './keymap.js'
+export { Paste } from './paste.js'
 export { Tabindex } from './tabindex.js'

package/src/extensions/keymap.ts

@@ -3,6 +3,7 @@ import { Plugin, PluginKey, Selection } from '@tiptap/pm/state'
 import { CommandManager } from '../CommandManager.js'
 import { Extension } from '../Extension.js'
 import { createChainableState } from '../helpers/createChainableState.js'
+import { isNodeEmpty } from '../helpers/isNodeEmpty.js'
 import { isiOS } from '../utilities/isiOS.js'
 import { isMacOS } from '../utilities/isMacOS.js'
 
@@ -10,54 +11,59 @@ export const Keymap = Extension.create({
   name: 'keymap',
 
   addKeyboardShortcuts() {
-    const handleBackspace = () => this.editor.commands.first(({ commands }) => [
-      () => commands.undoInputRule(),
-
-      // maybe convert first text block node to default node
-      () => commands.command(({ tr }) => {
-        const { selection, doc } = tr
-        const { empty, $anchor } = selection
-        const { pos, parent } = $anchor
-        const $parentPos = $anchor.parent.isTextblock && pos > 0 ? tr.doc.resolve(pos - 1) : $anchor
-        const parentIsIsolating = $parentPos.parent.type.spec.isolating
-
-        const parentPos = $anchor.pos - $anchor.parentOffset
-
-        const isAtStart = (parentIsIsolating && $parentPos.parent.childCount === 1)
-          ? parentPos === $anchor.pos
-          : Selection.atStart(doc).from === pos
-
-        if (
-          !empty
-          || !parent.type.isTextblock
-          || parent.textContent.length
-          || !isAtStart
-          || (isAtStart && $anchor.parent.type.name === 'paragraph') // prevent clearNodes when no nodes to clear, otherwise history stack is appended
-        ) {
-          return false
-        }
-
-        return commands.clearNodes()
-      }),
-
-      () => commands.deleteSelection(),
-      () => commands.joinBackward(),
-      () => commands.selectNodeBackward(),
-    ])
-
-    const handleDelete = () => this.editor.commands.first(({ commands }) => [
-      () => commands.deleteSelection(),
-      () => commands.deleteCurrentNode(),
-      () => commands.joinForward(),
-      () => commands.selectNodeForward(),
-    ])
-
-    const handleEnter = () => this.editor.commands.first(({ commands }) => [
-      () => commands.newlineInCode(),
-      () => commands.createParagraphNear(),
-      () => commands.liftEmptyBlock(),
-      () => commands.splitBlock(),
-    ])
+    const handleBackspace = () =>
+      this.editor.commands.first(({ commands }) => [
+        () => commands.undoInputRule(),
+
+        // maybe convert first text block node to default node
+        () =>
+          commands.command(({ tr }) => {
+            const { selection, doc } = tr
+            const { empty, $anchor } = selection
+            const { pos, parent } = $anchor
+            const $parentPos = $anchor.parent.isTextblock && pos > 0 ? tr.doc.resolve(pos - 1) : $anchor
+            const parentIsIsolating = $parentPos.parent.type.spec.isolating
+
+            const parentPos = $anchor.pos - $anchor.parentOffset
+
+            const isAtStart =
+              parentIsIsolating && $parentPos.parent.childCount === 1
+                ? parentPos === $anchor.pos
+                : Selection.atStart(doc).from === pos
+
+            if (
+              !empty ||
+              !parent.type.isTextblock ||
+              parent.textContent.length ||
+              !isAtStart ||
+              (isAtStart && $anchor.parent.type.name === 'paragraph') // prevent clearNodes when no nodes to clear, otherwise history stack is appended
+            ) {
+              return false
+            }
+
+            return commands.clearNodes()
+          }),
+
+        () => commands.deleteSelection(),
+        () => commands.joinBackward(),
+        () => commands.selectNodeBackward(),
+      ])
+
+    const handleDelete = () =>
+      this.editor.commands.first(({ commands }) => [
+        () => commands.deleteSelection(),
+        () => commands.deleteCurrentNode(),
+        () => commands.joinForward(),
+        () => commands.selectNodeForward(),
+      ])
+
+    const handleEnter = () =>
+      this.editor.commands.first(({ commands }) => [
+        () => commands.newlineInCode(),
+        () => commands.createParagraphNear(),
+        () => commands.liftEmptyBlock(),
+        () => commands.splitBlock(),
+      ])
 
     const baseKeymap = {
       Enter: handleEnter,
@@ -103,10 +109,15 @@ export const Keymap = Extension.create({
       new Plugin({
         key: new PluginKey('clearDocument'),
         appendTransaction: (transactions, oldState, newState) => {
-          const docChanges = transactions.some(transaction => transaction.docChanged)
-            && !oldState.doc.eq(newState.doc)
+          if (transactions.some(tr => tr.getMeta('composition'))) {
+            return
+          }
+
+          const docChanges = transactions.some(transaction => transaction.docChanged) && !oldState.doc.eq(newState.doc)
+
+          const ignoreTr = transactions.some(transaction => transaction.getMeta('preventClearDocument'))
 
-          if (!docChanges) {
+          if (!docChanges || ignoreTr) {
             return
           }
 
@@ -119,7 +130,7 @@ export const Keymap = Extension.create({
             return
           }
 
-          const isEmpty = newState.doc.textBetween(0, newState.doc.content.size, ' ', ' ').length === 0
+          const isEmpty = isNodeEmpty(newState.doc)
 
           if (!isEmpty) {
             return

package/src/extensions/paste.ts

@@ -0,0 +1,25 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+import { Extension } from '../Extension.js'
+
+export const Paste = Extension.create({
+  name: 'paste',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('tiptapPaste'),
+
+        props: {
+          handlePaste: (_view, e, slice) => {
+            this.editor.emit('paste', {
+              editor: this.editor,
+              event: e,
+              slice,
+            })
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/extensions/tabindex.ts

@@ -10,7 +10,7 @@ export const Tabindex = Extension.create({
       new Plugin({
         key: new PluginKey('tabindex'),
         props: {
-          attributes: (): { [name: string]: string; } => (this.editor.isEditable ? { tabindex: '0' } : {}),
+          attributes: (): { [name: string]: string } => (this.editor.isEditable ? { tabindex: '0' } : {}),
         },
       }),
     ]

package/src/helpers/combineTransactionSteps.ts

@@ -1,5 +1,5 @@
-import { Node as ProseMirrorNode } from '@tiptap/pm/model'
-import { Transaction } from '@tiptap/pm/state'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import type { Transaction } from '@tiptap/pm/state'
 import { Transform } from '@tiptap/pm/transform'
 
 /**
@@ -8,10 +8,7 @@ import { Transform } from '@tiptap/pm/transform'
  * @param transactions The transactions to combine
  * @returns A new `Transform` with all steps of the passed transactions
  */
-export function combineTransactionSteps(
-  oldDoc: ProseMirrorNode,
-  transactions: Transaction[],
-): Transform {
+export function combineTransactionSteps(oldDoc: ProseMirrorNode, transactions: Transaction[]): Transform {
   const transform = new Transform(oldDoc)
 
   transactions.forEach(transaction => {

package/src/helpers/createChainableState.ts

@@ -1,14 +1,11 @@
-import { EditorState, Transaction } from '@tiptap/pm/state'
+import type { EditorState, Transaction } from '@tiptap/pm/state'
 
 /**
  * Takes a Transaction & Editor State and turns it into a chainable state object
  * @param config The transaction and state to create the chainable state from
  * @returns A chainable Editor state object
  */
-export function createChainableState(config: {
-  transaction: Transaction
-  state: EditorState
-}): EditorState {
+export function createChainableState(config: { transaction: Transaction; state: EditorState }): EditorState {
   const { state, transaction } = config
   let { selection } = transaction
   let { doc } = transaction

package/src/helpers/createDocument.ts

@@ -1,6 +1,6 @@
-import { Node as ProseMirrorNode, ParseOptions, Schema } from '@tiptap/pm/model'
+import type { Fragment, Node as ProseMirrorNode, ParseOptions, Schema } from '@tiptap/pm/model'
 
-import { Content } from '../types.js'
+import type { Content } from '../types.js'
 import { createNodeFromContent } from './createNodeFromContent.js'
 
 /**
@@ -11,7 +11,7 @@ import { createNodeFromContent } from './createNodeFromContent.js'
  * @returns The created Prosemirror document node
  */
 export function createDocument(
-  content: Content,
+  content: Content | ProseMirrorNode | Fragment,
   schema: Schema,
   parseOptions: ParseOptions = {},
   options: { errorOnInvalidContent?: boolean } = {},

package/src/helpers/createNodeFromContent.ts

@@ -1,12 +1,7 @@
-import {
-  DOMParser,
-  Fragment,
-  Node as ProseMirrorNode,
-  ParseOptions,
-  Schema,
-} from '@tiptap/pm/model'
-
-import { Content } from '../types.js'
+import type { ParseOptions } from '@tiptap/pm/model'
+import { DOMParser, Fragment, Node as ProseMirrorNode, Schema } from '@tiptap/pm/model'
+
+import type { Content } from '../types.js'
 import { elementFromString } from '../utilities/elementFromString.js'
 
 export type CreateNodeFromContentOptions = {
@@ -23,10 +18,13 @@ export type CreateNodeFromContentOptions = {
  * @returns The created Prosemirror node or fragment
  */
 export function createNodeFromContent(
-  content: Content,
+  content: Content | ProseMirrorNode | Fragment,
   schema: Schema,
   options?: CreateNodeFromContentOptions,
 ): ProseMirrorNode | Fragment {
+  if (content instanceof ProseMirrorNode || content instanceof Fragment) {
+    return content
+  }
   options = {
     slice: true,
     parseOptions: {},
@@ -45,7 +43,13 @@ export function createNodeFromContent(
         return Fragment.fromArray(content.map(item => schema.nodeFromJSON(item)))
       }
 
-      return schema.nodeFromJSON(content)
+      const node = schema.nodeFromJSON(content)
+
+      if (options.errorOnInvalidContent) {
+        node.check()
+      }
+
+      return node
     } catch (error) {
       if (options.errorOnInvalidContent) {
         throw new Error('[tiptap error]: Invalid JSON content', { cause: error as Error })
@@ -58,13 +62,13 @@ export function createNodeFromContent(
   }
 
   if (isTextContent) {
-    let schemaToUse = schema
-    let hasInvalidContent = false
-    let invalidContent = ''
-
-    // Only ever check for invalid content if we're supposed to throw an error
+    // Check for invalid content
     if (options.errorOnInvalidContent) {
-      schemaToUse = new Schema({
+      let hasInvalidContent = false
+      let invalidContent = ''
+
+      // A copy of the current schema with a catch-all node at the end
+      const contentCheckSchema = new Schema({
         topNode: schema.spec.topNode,
         marks: schema.spec.marks,
         // Prosemirror's schemas are executed such that: the last to execute, matches last
@@ -88,19 +92,27 @@ export function createNodeFromContent(
           },
         }),
       })
-    }
 
-    const parser = DOMParser.fromSchema(schemaToUse)
+      if (options.slice) {
+        DOMParser.fromSchema(contentCheckSchema).parseSlice(elementFromString(content), options.parseOptions)
+      } else {
+        DOMParser.fromSchema(contentCheckSchema).parse(elementFromString(content), options.parseOptions)
+      }
+
+      if (options.errorOnInvalidContent && hasInvalidContent) {
+        throw new Error('[tiptap error]: Invalid HTML content', {
+          cause: new Error(`Invalid element found: ${invalidContent}`),
+        })
+      }
+    }
 
-    const response = options.slice
-      ? parser.parseSlice(elementFromString(content), options.parseOptions).content
-      : parser.parse(elementFromString(content), options.parseOptions)
+    const parser = DOMParser.fromSchema(schema)
 
-    if (options.errorOnInvalidContent && hasInvalidContent) {
-      throw new Error('[tiptap error]: Invalid HTML content', { cause: new Error(`Invalid element found: ${invalidContent}`) })
+    if (options.slice) {
+      return parser.parseSlice(elementFromString(content), options.parseOptions).content
     }
 
-    return response
+    return parser.parse(elementFromString(content), options.parseOptions)
   }
 
   return createNodeFromContent('', schema, options)

package/src/helpers/defaultBlockAt.ts

@@ -1,4 +1,4 @@
-import { ContentMatch, NodeType } from '@tiptap/pm/model'
+import type { ContentMatch, NodeType } from '@tiptap/pm/model'
 
 /**
  * Gets the default block type at a given match

package/src/helpers/findChildren.ts

@@ -1,6 +1,6 @@
-import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
 
-import { NodeWithPos, Predicate } from '../types.js'
+import type { NodeWithPos, Predicate } from '../types.js'
 
 /**
  * Find children inside a Prosemirror node that match a predicate.

package/src/helpers/findChildrenInRange.ts

@@ -1,6 +1,6 @@
-import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
 
-import { NodeWithPos, Predicate, Range } from '../types.js'
+import type { NodeWithPos, Predicate, Range } from '../types.js'
 
 /**
  * Same as `findChildren` but searches only within a `range`.
@@ -9,11 +9,7 @@ import { NodeWithPos, Predicate, Range } from '../types.js'
  * @param predicate The predicate to match
  * @returns An array of nodes with their positions
  */
-export function findChildrenInRange(
-  node: ProseMirrorNode,
-  range: Range,
-  predicate: Predicate,
-): NodeWithPos[] {
+export function findChildrenInRange(node: ProseMirrorNode, range: Range, predicate: Predicate): NodeWithPos[] {
   const nodesWithPos: NodeWithPos[] = []
 
   // if (range.from === range.to) {

package/src/helpers/findParentNode.ts

@@ -1,6 +1,6 @@
-import { Selection } from '@tiptap/pm/state'
+import type { Selection } from '@tiptap/pm/state'
 
-import { Predicate } from '../types.js'
+import type { Predicate } from '../types.js'
 import { findParentNodeClosestToPos } from './findParentNodeClosestToPos.js'
 
 /**
@@ -11,6 +11,8 @@ import { findParentNodeClosestToPos } from './findParentNodeClosestToPos.js'
  * findParentNode(node => node.type.name === 'paragraph')
  * ```
  */
-export function findParentNode(predicate: Predicate) {
+export function findParentNode(
+  predicate: Predicate,
+): (selection: Selection) => ReturnType<typeof findParentNodeClosestToPos> {
   return (selection: Selection) => findParentNodeClosestToPos(selection.$from, predicate)
 }

package/src/helpers/findParentNodeClosestToPos.ts

@@ -1,6 +1,6 @@
-import { Node as ProseMirrorNode, ResolvedPos } from '@tiptap/pm/model'
+import type { Node as ProseMirrorNode, ResolvedPos } from '@tiptap/pm/model'
 
-import { Predicate } from '../types.js'
+import type { Predicate } from '../types.js'
 
 /**
  * Finds the closest parent node to a resolved position that matches a predicate.