@tiptap/core 3.0.0-next.0 → 3.0.0-next.2

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

@@ -1,3 +1,5 @@
+import type { Plugin, PluginKey } from '@tiptap/pm/state'
+
 import { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
@@ -9,7 +11,7 @@ declare module '@tiptap/core' {
        * @param value The value to store.
        * @example editor.commands.setMeta('foo', 'bar')
        */
-      setMeta: (key: string, value: any) => ReturnType,
+      setMeta: (key: string | Plugin | PluginKey, value: any) => ReturnType,
     }
   }
 }

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

@@ -14,14 +14,15 @@ declare module '@tiptap/core' {
       /**
        * Splits one list item into two list items.
        * @param typeOrName The type or name of the node.
+       * @param overrideAttrs The attributes to ensure on the new node.
        * @example editor.commands.splitListItem('listItem')
        */
-      splitListItem: (typeOrName: string | NodeType) => ReturnType
+      splitListItem: (typeOrName: string | NodeType, overrideAttrs?: Record<string, any>) => ReturnType
     }
   }
 }
 
-export const splitListItem: RawCommands['splitListItem'] = typeOrName => ({
+export const splitListItem: RawCommands['splitListItem'] = (typeOrName, overrideAttrs = {}) => ({
   tr, state, dispatch, editor,
 }) => {
   const type = getNodeType(typeOrName, state.schema)
@@ -70,11 +71,14 @@ export const splitListItem: RawCommands['splitListItem'] = typeOrName => ({
         const depthAfter = $from.indexAfter(-1) < $from.node(-2).childCount ? 1 : $from.indexAfter(-2) < $from.node(-3).childCount ? 2 : 3
 
       // Add a second list item with an empty default start node
-      const newNextTypeAttributes = getSplittedAttributes(
-        extensionAttributes,
-        $from.node().type.name,
-        $from.node().attrs,
-      )
+      const newNextTypeAttributes = {
+        ...getSplittedAttributes(
+          extensionAttributes,
+          $from.node().type.name,
+          $from.node().attrs,
+        ),
+        ...overrideAttrs,
+      }
       const nextType = type.contentMatch.defaultType?.createAndFill(newNextTypeAttributes) || undefined
 
       wrap = wrap.append(Fragment.from(type.createAndFill(null, nextType) || undefined))
@@ -107,16 +111,22 @@ export const splitListItem: RawCommands['splitListItem'] = typeOrName => ({
 
   const nextType = $to.pos === $from.end() ? grandParent.contentMatchAt(0).defaultType : null
 
-  const newTypeAttributes = getSplittedAttributes(
-    extensionAttributes,
-    grandParent.type.name,
-    grandParent.attrs,
-  )
-  const newNextTypeAttributes = getSplittedAttributes(
-    extensionAttributes,
-    $from.node().type.name,
-    $from.node().attrs,
-  )
+  const newTypeAttributes = {
+    ...getSplittedAttributes(
+      extensionAttributes,
+      grandParent.type.name,
+      grandParent.attrs,
+    ),
+    ...overrideAttrs,
+  }
+  const newNextTypeAttributes = {
+    ...getSplittedAttributes(
+      extensionAttributes,
+      $from.node().type.name,
+      $from.node().attrs,
+    ),
+    ...overrideAttrs,
+  }
 
   tr.delete($from.pos, $to.pos)
 

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 })
 }