@tiptap/core 2.11.7 → 3.0.0-beta.0

package/src/commands/unsetAllMarks.ts

@@ -1,4 +1,4 @@
-import { RawCommands } from '../types.js'
+import type { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -7,24 +7,26 @@ declare module '@tiptap/core' {
        * Remove all marks in the current selection.
        * @example editor.commands.unsetAllMarks()
        */
-      unsetAllMarks: () => ReturnType,
+      unsetAllMarks: () => ReturnType
     }
   }
 }
 
-export const unsetAllMarks: RawCommands['unsetAllMarks'] = () => ({ tr, dispatch }) => {
-  const { selection } = tr
-  const { empty, ranges } = selection
+export const unsetAllMarks: RawCommands['unsetAllMarks'] =
+  () =>
+  ({ tr, dispatch }) => {
+    const { selection } = tr
+    const { empty, ranges } = selection
 
-  if (empty) {
-    return true
-  }
+    if (empty) {
+      return true
+    }
 
-  if (dispatch) {
-    ranges.forEach(range => {
-      tr.removeMark(range.$from.pos, range.$to.pos)
-    })
-  }
+    if (dispatch) {
+      ranges.forEach(range => {
+        tr.removeMark(range.$from.pos, range.$to.pos)
+      })
+    }
 
-  return true
-}
+    return true
+  }

package/src/commands/unsetMark.ts

@@ -1,8 +1,8 @@
-import { MarkType } from '@tiptap/pm/model'
+import type { MarkType } from '@tiptap/pm/model'
 
 import { getMarkRange } from '../helpers/getMarkRange.js'
 import { getMarkType } from '../helpers/getMarkType.js'
-import { RawCommands } from '../types.js'
+import type { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -30,34 +30,36 @@ declare module '@tiptap/core' {
   }
 }
 
-export const unsetMark: RawCommands['unsetMark'] = (typeOrName, options = {}) => ({ tr, state, dispatch }) => {
-  const { extendEmptyMarkRange = false } = options
-  const { selection } = tr
-  const type = getMarkType(typeOrName, state.schema)
-  const { $from, empty, ranges } = selection
+export const unsetMark: RawCommands['unsetMark'] =
+  (typeOrName, options = {}) =>
+  ({ tr, state, dispatch }) => {
+    const { extendEmptyMarkRange = false } = options
+    const { selection } = tr
+    const type = getMarkType(typeOrName, state.schema)
+    const { $from, empty, ranges } = selection
 
-  if (!dispatch) {
-    return true
-  }
+    if (!dispatch) {
+      return true
+    }
 
-  if (empty && extendEmptyMarkRange) {
-    let { from, to } = selection
-    const attrs = $from.marks().find(mark => mark.type === type)?.attrs
-    const range = getMarkRange($from, type, attrs)
+    if (empty && extendEmptyMarkRange) {
+      let { from, to } = selection
+      const attrs = $from.marks().find(mark => mark.type === type)?.attrs
+      const range = getMarkRange($from, type, attrs)
 
-    if (range) {
-      from = range.from
-      to = range.to
-    }
+      if (range) {
+        from = range.from
+        to = range.to
+      }
 
-    tr.removeMark(from, to, type)
-  } else {
-    ranges.forEach(range => {
-      tr.removeMark(range.$from.pos, range.$to.pos, type)
-    })
-  }
+      tr.removeMark(from, to, type)
+    } else {
+      ranges.forEach(range => {
+        tr.removeMark(range.$from.pos, range.$to.pos, type)
+      })
+    }
 
-  tr.removeStoredMark(type)
+    tr.removeStoredMark(type)
 
-  return true
-}
+    return true
+  }

package/src/commands/updateAttributes.ts

@@ -1,12 +1,10 @@
-import {
-  Mark, MarkType, Node, NodeType,
-} from '@tiptap/pm/model'
-import { SelectionRange } from '@tiptap/pm/state'
+import type { Mark, MarkType, Node, NodeType } from '@tiptap/pm/model'
+import type { SelectionRange } from '@tiptap/pm/state'
 
 import { getMarkType } from '../helpers/getMarkType.js'
 import { getNodeType } from '../helpers/getNodeType.js'
 import { getSchemaTypeNameByName } from '../helpers/getSchemaTypeNameByName.js'
-import { RawCommands } from '../types.js'
+import type { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -32,117 +30,111 @@ declare module '@tiptap/core' {
   }
 }
 
-export const updateAttributes: RawCommands['updateAttributes'] = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
+export const updateAttributes: RawCommands['updateAttributes'] =
+  (typeOrName, attributes = {}) =>
+  ({ tr, state, dispatch }) => {
+    let nodeType: NodeType | null = null
+    let markType: MarkType | null = null
 
-  let nodeType: NodeType | null = null
-  let markType: MarkType | null = null
+    const schemaType = getSchemaTypeNameByName(
+      typeof typeOrName === 'string' ? typeOrName : typeOrName.name,
+      state.schema,
+    )
 
-  const schemaType = getSchemaTypeNameByName(
-    typeof typeOrName === 'string' ? typeOrName : typeOrName.name,
-    state.schema,
-  )
-
-  if (!schemaType) {
-    return false
-  }
-
-  if (schemaType === 'node') {
-    nodeType = getNodeType(typeOrName as NodeType, state.schema)
-  }
-
-  if (schemaType === 'mark') {
-    markType = getMarkType(typeOrName as MarkType, state.schema)
-  }
-
-  if (dispatch) {
-    tr.selection.ranges.forEach((range: SelectionRange) => {
+    if (!schemaType) {
+      return false
+    }
 
-      const from = range.$from.pos
-      const to = range.$to.pos
+    if (schemaType === 'node') {
+      nodeType = getNodeType(typeOrName as NodeType, state.schema)
+    }
 
-      let lastPos: number | undefined
-      let lastNode: Node | undefined
-      let trimmedFrom: number
-      let trimmedTo: number
+    if (schemaType === 'mark') {
+      markType = getMarkType(typeOrName as MarkType, state.schema)
+    }
 
-      if (tr.selection.empty) {
-        state.doc.nodesBetween(from, to, (node: Node, pos: number) => {
+    if (dispatch) {
+      tr.selection.ranges.forEach((range: SelectionRange) => {
+        const from = range.$from.pos
+        const to = range.$to.pos
 
-          if (nodeType && nodeType === node.type) {
-            trimmedFrom = Math.max(pos, from)
-            trimmedTo = Math.min(pos + node.nodeSize, to)
-            lastPos = pos
-            lastNode = node
-          }
-        })
-      } else {
-        state.doc.nodesBetween(from, to, (node: Node, pos: number) => {
-
-          if (pos < from && nodeType && nodeType === node.type) {
-            trimmedFrom = Math.max(pos, from)
-            trimmedTo = Math.min(pos + node.nodeSize, to)
-            lastPos = pos
-            lastNode = node
-          }
-
-          if (pos >= from && pos <= to) {
+        let lastPos: number | undefined
+        let lastNode: Node | undefined
+        let trimmedFrom: number
+        let trimmedTo: number
 
+        if (tr.selection.empty) {
+          state.doc.nodesBetween(from, to, (node: Node, pos: number) => {
             if (nodeType && nodeType === node.type) {
-              tr.setNodeMarkup(pos, undefined, {
-                ...node.attrs,
-                ...attributes,
-              })
+              trimmedFrom = Math.max(pos, from)
+              trimmedTo = Math.min(pos + node.nodeSize, to)
+              lastPos = pos
+              lastNode = node
             }
-
-            if (markType && node.marks.length) {
-              node.marks.forEach((mark: Mark) => {
-
-                if (markType === mark.type) {
-                  const trimmedFrom2 = Math.max(pos, from)
-                  const trimmedTo2 = Math.min(pos + node.nodeSize, to)
-
-                  tr.addMark(
-                    trimmedFrom2,
-                    trimmedTo2,
-                    markType.create({
-                      ...mark.attrs,
-                      ...attributes,
-                    }),
-                  )
-                }
-              })
+          })
+        } else {
+          state.doc.nodesBetween(from, to, (node: Node, pos: number) => {
+            if (pos < from && nodeType && nodeType === node.type) {
+              trimmedFrom = Math.max(pos, from)
+              trimmedTo = Math.min(pos + node.nodeSize, to)
+              lastPos = pos
+              lastNode = node
             }
-          }
-        })
-      }
 
-      if (lastNode) {
-
-        if (lastPos !== undefined) {
-          tr.setNodeMarkup(lastPos, undefined, {
-            ...lastNode.attrs,
-            ...attributes,
+            if (pos >= from && pos <= to) {
+              if (nodeType && nodeType === node.type) {
+                tr.setNodeMarkup(pos, undefined, {
+                  ...node.attrs,
+                  ...attributes,
+                })
+              }
+
+              if (markType && node.marks.length) {
+                node.marks.forEach((mark: Mark) => {
+                  if (markType === mark.type) {
+                    const trimmedFrom2 = Math.max(pos, from)
+                    const trimmedTo2 = Math.min(pos + node.nodeSize, to)
+
+                    tr.addMark(
+                      trimmedFrom2,
+                      trimmedTo2,
+                      markType.create({
+                        ...mark.attrs,
+                        ...attributes,
+                      }),
+                    )
+                  }
+                })
+              }
+            }
           })
         }
 
-        if (markType && lastNode.marks.length) {
-          lastNode.marks.forEach((mark: Mark) => {
+        if (lastNode) {
+          if (lastPos !== undefined) {
+            tr.setNodeMarkup(lastPos, undefined, {
+              ...lastNode.attrs,
+              ...attributes,
+            })
+          }
 
-            if (markType === mark.type) {
-              tr.addMark(
-                trimmedFrom,
-                trimmedTo,
-                markType.create({
-                  ...mark.attrs,
-                  ...attributes,
-                }),
-              )
-            }
-          })
+          if (markType && lastNode.marks.length) {
+            lastNode.marks.forEach((mark: Mark) => {
+              if (markType === mark.type) {
+                tr.addMark(
+                  trimmedFrom,
+                  trimmedTo,
+                  markType.create({
+                    ...mark.attrs,
+                    ...attributes,
+                  }),
+                )
+              }
+            })
+          }
         }
-      }
-    })
-  }
+      })
+    }
 
-  return true
-}
+    return true
+  }

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/focusEvents.ts

@@ -18,9 +18,7 @@ export const FocusEvents = Extension.create({
             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)
 
@@ -29,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,5 +1,6 @@
 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, focusEventsPluginKey } from './focusEvents.js'

package/src/extensions/keymap.ts

@@ -11,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,
@@ -108,8 +113,7 @@ export const Keymap = Extension.create({
             return
           }
 
-          const docChanges = transactions.some(transaction => transaction.docChanged)
-            && !oldState.doc.eq(newState.doc)
+          const docChanges = transactions.some(transaction => transaction.docChanged) && !oldState.doc.eq(newState.doc)
 
           const ignoreTr = transactions.some(transaction => transaction.getMeta('preventClearDocument'))
 

package/src/extensions/paste.ts

@@ -6,7 +6,6 @@ export const Paste = Extension.create({
   name: 'paste',
 
   addProseMirrorPlugins() {
-
     return [
       new Plugin({
         key: new PluginKey('tiptapPaste'),