@tiptap/core 3.0.0-next.1 → 3.0.0-next.3

package/src/PasteRule.ts

@@ -1,8 +1,10 @@
+import { Fragment, Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { EditorState, Plugin } from '@tiptap/pm/state'
 
 import { CommandManager } from './CommandManager.js'
 import { Editor } from './Editor.js'
 import { createChainableState } from './helpers/createChainableState.js'
+import { getHTMLFromFragment } from './helpers/getHTMLFromFragment.js'
 import {
   CanCommands,
   ChainedCommands,
@@ -14,45 +16,47 @@ import { isNumber } from './utilities/isNumber.js'
 import { isRegExp } from './utilities/isRegExp.js'
 
 export type PasteRuleMatch = {
-  index: number
-  text: string
-  replaceWith?: string
-  match?: RegExpMatchArray
-  data?: Record<string, any>
-}
+  index: number;
+  text: string;
+  replaceWith?: string;
+  match?: RegExpMatchArray;
+  data?: Record<string, any>;
+};
 
-export type PasteRuleFinder = RegExp | ((text: string, event?: ClipboardEvent | null) => PasteRuleMatch[] | null | undefined)
+export type PasteRuleFinder =
+  | RegExp
+  | ((text: string, event?: ClipboardEvent | null) => PasteRuleMatch[] | null | undefined);
 
 /**
  * Paste rules are used to react to pasted content.
- * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
  */
 export class PasteRule {
   find: PasteRuleFinder
 
   handler: (props: {
-    state: EditorState
-    range: Range
-    match: ExtendedRegExpMatchArray
-    commands: SingleCommands
-    chain: () => ChainedCommands
-    can: () => CanCommands
-    pasteEvent: ClipboardEvent | null
-    dropEvent: DragEvent | null
+    state: EditorState;
+    range: Range;
+    match: ExtendedRegExpMatchArray;
+    commands: SingleCommands;
+    chain: () => ChainedCommands;
+    can: () => CanCommands;
+    pasteEvent: ClipboardEvent | null;
+    dropEvent: DragEvent | null;
   }) => void | null
 
   constructor(config: {
-    find: PasteRuleFinder
+    find: PasteRuleFinder;
     handler: (props: {
-      can: () => CanCommands
-      chain: () => ChainedCommands
-      commands: SingleCommands
-      dropEvent: DragEvent | null
-      match: ExtendedRegExpMatchArray
-      pasteEvent: ClipboardEvent | null
-      range: Range
-      state: EditorState
-    }) => void | null
+      can: () => CanCommands;
+      chain: () => ChainedCommands;
+      commands: SingleCommands;
+      dropEvent: DragEvent | null;
+      match: ExtendedRegExpMatchArray;
+      pasteEvent: ClipboardEvent | null;
+      range: Range;
+      state: EditorState;
+    }) => void | null;
   }) {
     this.find = config.find
     this.handler = config.handler
@@ -96,13 +100,13 @@ const pasteRuleMatcherHandler = (
 }
 
 function run(config: {
-  editor: Editor
-  state: EditorState
-  from: number
-  to: number
-  rule: PasteRule
-  pasteEvent: ClipboardEvent | null
-  dropEvent: DragEvent | null
+  editor: Editor;
+  state: EditorState;
+  from: number;
+  to: number;
+  rule: PasteRule;
+  pasteEvent: ClipboardEvent | null;
+  dropEvent: DragEvent | null;
 }): boolean {
   const {
     editor, state, from, to, rule, pasteEvent, dropEvent,
@@ -158,6 +162,9 @@ function run(config: {
   return success
 }
 
+// When dragging across editors, must get another editor instance to delete selection content.
+let tiptapDragFromOtherEditor: Editor | null = null
+
 const createClipboardPasteEvent = (text: string) => {
   const event = new ClipboardEvent('paste', {
     clipboardData: new DataTransfer(),
@@ -179,7 +186,13 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
   let isPastedFromProseMirror = false
   let isDroppedFromProseMirror = false
   let pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null
-  let dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+  let dropEvent: DragEvent | null
+
+  try {
+    dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+  } catch (e) {
+    dropEvent = null
+  }
 
   const processEvent = ({
     state,
@@ -188,11 +201,11 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
     rule,
     pasteEvt,
   }: {
-    state: EditorState
-    from: number
-    to: { b: number }
-    rule: PasteRule
-    pasteEvt: ClipboardEvent | null
+    state: EditorState;
+    from: number;
+    to: { b: number };
+    rule: PasteRule;
+    pasteEvt: ClipboardEvent | null;
   }) => {
     const tr = state.tr
     const chainableState = createChainableState({
@@ -214,7 +227,11 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
       return
     }
 
-    dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+    try {
+      dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+    } catch (e) {
+      dropEvent = null
+    }
     pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null
 
     return tr
@@ -228,13 +245,25 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
           dragSourceElement = view.dom.parentElement?.contains(event.target as Element)
             ? view.dom.parentElement
             : null
+
+          if (dragSourceElement) {
+            tiptapDragFromOtherEditor = editor
+          }
+        }
+
+        const handleDragend = () => {
+          if (tiptapDragFromOtherEditor) {
+            tiptapDragFromOtherEditor = null
+          }
         }
 
         window.addEventListener('dragstart', handleDragstart)
+        window.addEventListener('dragend', handleDragend)
 
         return {
           destroy() {
             window.removeEventListener('dragstart', handleDragstart)
+            window.removeEventListener('dragend', handleDragend)
           },
         }
       },
@@ -245,6 +274,20 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
             isDroppedFromProseMirror = dragSourceElement === view.dom.parentElement
             dropEvent = event as DragEvent
 
+            if (!isDroppedFromProseMirror) {
+              const dragFromOtherEditor = tiptapDragFromOtherEditor
+
+              if (dragFromOtherEditor) {
+                // setTimeout to avoid the wrong content after drop, timeout arg can't be empty or 0
+                setTimeout(() => {
+                  const selection = dragFromOtherEditor.state.selection
+
+                  if (selection) {
+                    dragFromOtherEditor.commands.deleteRange({ from: selection.from, to: selection.to })
+                  }
+                }, 10)
+              }
+            }
             return false
           },
 
@@ -266,7 +309,9 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
         const isDrop = transaction.getMeta('uiEvent') === 'drop' && !isDroppedFromProseMirror
 
         // if PasteRule is triggered by insertContent()
-        const simulatedPasteMeta = transaction.getMeta('applyPasteRules')
+        const simulatedPasteMeta = transaction.getMeta('applyPasteRules') as
+          | undefined
+          | { from: number; text: string | ProseMirrorNode | Fragment }
         const isSimulatedPaste = !!simulatedPasteMeta
 
         if (!isPaste && !isDrop && !isSimulatedPaste) {
@@ -275,8 +320,17 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
 
         // Handle simulated paste
         if (isSimulatedPaste) {
-          const { from, text } = simulatedPasteMeta
+          let { text } = simulatedPasteMeta
+
+          if (typeof text === 'string') {
+            text = text as string
+          } else {
+            text = getHTMLFromFragment(Fragment.from(text), state.schema)
+          }
+
+          const { from } = simulatedPasteMeta
           const to = from + text.length
+
           const pasteEvt = createClipboardPasteEvent(text)
 
           return processEvent({

package/src/commands/focus.ts

@@ -1,7 +1,6 @@
 import { isTextSelection } from '../helpers/isTextSelection.js'
 import { resolveFocusPosition } from '../helpers/resolveFocusPosition.js'
 import { FocusPosition, RawCommands } from '../types.js'
-import { isiOS } from '../utilities/isiOS.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -43,11 +42,7 @@ export const focus: RawCommands['focus'] = (position = null, options = {}) => ({
   }
 
   const delayedFocus = () => {
-    // focus within `requestAnimationFrame` breaks focus on iOS
-    // so we have to call this
-    if (isiOS()) {
-      (view.dom as HTMLElement).focus()
-    }
+    (view.dom as HTMLElement).focus()
 
     // For React we have to focus asynchronously. Otherwise wild things happen.
     // see: https://github.com/ueberdosis/tiptap/issues/1520

package/src/commands/insertContent.ts

@@ -1,4 +1,4 @@
-import { ParseOptions } from '@tiptap/pm/model'
+import { Fragment, Node as ProseMirrorNode, ParseOptions } from '@tiptap/pm/model'
 
 import { Content, RawCommands } from '../types.js'
 
@@ -14,7 +14,7 @@ declare module '@tiptap/core' {
         /**
          * The ProseMirror content to insert.
          */
-        value: Content,
+        value: Content | ProseMirrorNode | Fragment,
 
         /**
          * Optional options
@@ -23,17 +23,17 @@ declare module '@tiptap/core' {
           /**
            * Options for parsing the content.
            */
-          parseOptions?: ParseOptions
+          parseOptions?: ParseOptions;
 
           /**
            * Whether to update the selection after inserting the content.
            */
-          updateSelection?: boolean
-          applyInputRules?: boolean
-          applyPasteRules?: boolean
-        },
-      ) => ReturnType
-    }
+          updateSelection?: boolean;
+          applyInputRules?: boolean;
+          applyPasteRules?: boolean;
+        }
+      ) => ReturnType;
+    };
   }
 }
 

package/src/commands/insertContentAt.ts

@@ -20,7 +20,7 @@ declare module '@tiptap/core' {
         /**
          * The ProseMirror content to insert.
          */
-        value: Content,
+        value: Content | ProseMirrorNode | Fragment,
 
         /**
          * Optional options
@@ -63,7 +63,7 @@ const isFragment = (nodeOrFragment: ProseMirrorNode | Fragment): nodeOrFragment
 export const insertContentAt: RawCommands['insertContentAt'] = (position, value, options) => ({ tr, dispatch, editor }) => {
   if (dispatch) {
     options = {
-      parseOptions: {},
+      parseOptions: editor.options.parseOptions,
       updateSelection: true,
       applyInputRules: false,
       applyPasteRules: false,
@@ -71,6 +71,7 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
     }
 
     let content: Fragment | ProseMirrorNode
+    const { selection } = editor.state
 
     try {
       content = createNodeFromContent(value, editor.schema, {
@@ -85,7 +86,9 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
         editor,
         error: e as Error,
         disableCollaboration: () => {
-          console.error('[tiptap error]: Unable to disable collaboration at this point in time')
+          if (editor.storage.collaboration) {
+            editor.storage.collaboration.isDisabled = true
+          }
         },
       })
       return false
@@ -130,6 +133,16 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
       // otherwise if it is an array, we have to join it
       if (Array.isArray(value)) {
         newContent = value.map(v => v.text || '').join('')
+      } else if (value instanceof Fragment) {
+        let text = ''
+
+        value.forEach(node => {
+          if (node.text) {
+            text += node.text
+          }
+        })
+
+        newContent = text
       } else if (typeof value === 'object' && !!value && !!value.text) {
         newContent = value.text
       } else {
@@ -140,6 +153,13 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
     } else {
       newContent = content
 
+      const fromSelectionAtStart = selection.$from.parentOffset === 0
+      const isTextSelection = selection.$from.node().isText || selection.$from.node().isTextblock
+
+      if (fromSelectionAtStart && isTextSelection) {
+        from = Math.max(0, from - 1)
+      }
+
       tr.replaceWith(from, to, newContent)
     }
 

package/src/commands/selectAll.ts

@@ -1,3 +1,5 @@
+import { AllSelection } from '@tiptap/pm/state'
+
 import { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
@@ -12,9 +14,12 @@ declare module '@tiptap/core' {
   }
 }
 
-export const selectAll: RawCommands['selectAll'] = () => ({ tr, commands }) => {
-  return commands.setTextSelection({
-    from: 0,
-    to: tr.doc.content.size,
-  })
+export const selectAll: RawCommands['selectAll'] = () => ({ tr, dispatch }) => {
+  if (dispatch) {
+    const selection = new AllSelection(tr.doc)
+
+    tr.setSelection(selection)
+  }
+
+  return true
 }

package/src/commands/setContent.ts

@@ -1,4 +1,4 @@
-import { ParseOptions } from '@tiptap/pm/model'
+import { Fragment, Node as ProseMirrorNode, ParseOptions } from '@tiptap/pm/model'
 
 import { createDocument } from '../helpers/createDocument.js'
 import { Content, RawCommands } from '../types.js'
@@ -17,7 +17,7 @@ declare module '@tiptap/core' {
         /**
          * The new content.
          */
-        content: Content,
+        content: Content | Fragment | ProseMirrorNode,
 
         /**
          * Whether to emit an update event.
@@ -37,10 +37,10 @@ declare module '@tiptap/core' {
           /**
            * Whether to throw an error if the content is invalid.
            */
-           errorOnInvalidContent?: boolean
-        },
-      ) => ReturnType
-    }
+          errorOnInvalidContent?: boolean;
+        }
+      ) => ReturnType;
+    };
   }
 }
 
@@ -66,12 +66,8 @@ export const setContent: RawCommands['setContent'] = (content, emitUpdate = fals
     tr.setMeta('preventUpdate', !emitUpdate)
   }
 
-  return commands.insertContentAt(
-    { from: 0, to: doc.content.size },
-    content,
-    {
-      parseOptions,
-      errorOnInvalidContent: options.errorOnInvalidContent ?? editor.options.enableContentCheck,
-    },
-  )
+  return commands.insertContentAt({ from: 0, to: doc.content.size }, content, {
+    parseOptions,
+    errorOnInvalidContent: options.errorOnInvalidContent ?? editor.options.enableContentCheck,
+  })
 }

package/src/commands/setNode.ts

@@ -21,6 +21,13 @@ declare module '@tiptap/core' {
 export const setNode: RawCommands['setNode'] = (typeOrName, attributes = {}) => ({ state, dispatch, chain }) => {
   const type = getNodeType(typeOrName, state.schema)
 
+  let attributesToCopy: Record<string, any> | undefined
+
+  if (state.selection.$anchor.sameParent(state.selection.$head)) {
+    // only copy attributes if the selection is pointing to a node of the same type
+    attributesToCopy = state.selection.$anchor.parent.attrs
+  }
+
   // TODO: use a fallback like insertContent?
   if (!type.isTextblock) {
     console.warn('[tiptap warn]: Currently "setNode()" only supports text block nodes.')
@@ -32,7 +39,7 @@ export const setNode: RawCommands['setNode'] = (typeOrName, attributes = {}) =>
     chain()
     // try to convert node to default node if needed
       .command(({ commands }) => {
-        const canSetBlock = setBlockType(type, attributes)(state)
+        const canSetBlock = setBlockType(type, { ...attributesToCopy, ...attributes })(state)
 
         if (canSetBlock) {
           return true
@@ -41,7 +48,7 @@ export const setNode: RawCommands['setNode'] = (typeOrName, attributes = {}) =>
         return commands.clearNodes()
       })
       .command(({ state: updatedState }) => {
-        return setBlockType(type, attributes)(updatedState, dispatch)
+        return setBlockType(type, { ...attributesToCopy, ...attributes })(updatedState, dispatch)
       })
       .run()
   )

package/src/commands/toggleNode.ts

@@ -28,9 +28,18 @@ export const toggleNode: RawCommands['toggleNode'] = (typeOrName, toggleTypeOrNa
   const toggleType = getNodeType(toggleTypeOrName, state.schema)
   const isActive = isNodeActive(state, type, attributes)
 
+  let attributesToCopy: Record<string, any> | undefined
+
+  if (state.selection.$anchor.sameParent(state.selection.$head)) {
+    // only copy attributes if the selection is pointing to a node of the same type
+    attributesToCopy = state.selection.$anchor.parent.attrs
+  }
+
   if (isActive) {
-    return commands.setNode(toggleType)
+    return commands.setNode(toggleType, attributesToCopy)
   }
 
-  return commands.setNode(type, attributes)
+  // If the node is not active, we want to set the new node type with the given attributes
+  // Copying over the attributes from the current node if the selection is pointing to a node of the same type
+  return commands.setNode(type, { ...attributesToCopy, ...attributes })
 }

package/src/commands/updateAttributes.ts

@@ -1,4 +1,7 @@
-import { MarkType, NodeType } from '@tiptap/pm/model'
+import {
+  Mark, MarkType, Node, NodeType,
+} from '@tiptap/pm/model'
+import { SelectionRange } from '@tiptap/pm/state'
 
 import { getMarkType } from '../helpers/getMarkType.js'
 import { getNodeType } from '../helpers/getNodeType.js'
@@ -30,6 +33,7 @@ declare module '@tiptap/core' {
 }
 
 export const updateAttributes: RawCommands['updateAttributes'] = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => {
+
   let nodeType: NodeType | null = null
   let markType: MarkType | null = null
 
@@ -51,24 +55,80 @@ export const updateAttributes: RawCommands['updateAttributes'] = (typeOrName, at
   }
 
   if (dispatch) {
-    tr.selection.ranges.forEach(range => {
+    tr.selection.ranges.forEach((range: SelectionRange) => {
+
       const from = range.$from.pos
       const to = range.$to.pos
 
-      state.doc.nodesBetween(from, to, (node, pos) => {
-        if (nodeType && nodeType === node.type) {
-          tr.setNodeMarkup(pos, undefined, {
-            ...node.attrs,
+      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) {
+            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) {
+
+            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 (lastNode) {
+
+        if (lastPos !== undefined) {
+          tr.setNodeMarkup(lastPos, undefined, {
+            ...lastNode.attrs,
             ...attributes,
           })
         }
 
-        if (markType && node.marks.length) {
-          node.marks.forEach(mark => {
-            if (markType === mark.type) {
-              const trimmedFrom = Math.max(pos, from)
-              const trimmedTo = Math.min(pos + node.nodeSize, to)
+        if (markType && lastNode.marks.length) {
+          lastNode.marks.forEach((mark: Mark) => {
 
+            if (markType === mark.type) {
               tr.addMark(
                 trimmedFrom,
                 trimmedTo,
@@ -80,7 +140,7 @@ export const updateAttributes: RawCommands['updateAttributes'] = (typeOrName, at
             }
           })
         }
-      })
+      }
     })
   }
 

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

@@ -1,6 +1,8 @@
 export { ClipboardTextSerializer } from './clipboardTextSerializer.js'
 export { Commands } from './commands.js'
+export { Drop } from './drop.js'
 export { Editable } from './editable.js'
 export { FocusEvents } 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'
 
@@ -106,7 +107,9 @@ export const Keymap = Extension.create({
           const docChanges = transactions.some(transaction => transaction.docChanged)
             && !oldState.doc.eq(newState.doc)
 
-          if (!docChanges) {
+          const ignoreTr = transactions.some(transaction => transaction.getMeta('preventClearDocument'))
+
+          if (!docChanges || ignoreTr) {
             return
           }
 
@@ -119,7 +122,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