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

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

package/src/extensions/paste.ts

@@ -0,0 +1,26 @@
+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/helpers/createDocument.ts

@@ -1,4 +1,6 @@
-import { Node as ProseMirrorNode, ParseOptions, Schema } from '@tiptap/pm/model'
+import {
+  Fragment, Node as ProseMirrorNode, ParseOptions, Schema,
+} from '@tiptap/pm/model'
 
 import { Content } from '../types.js'
 import { createNodeFromContent } from './createNodeFromContent.js'
@@ -11,7 +13,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

@@ -23,10 +23,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 +48,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 })

package/src/helpers/getAttributesFromExtensions.ts

@@ -1,4 +1,4 @@
-import { MarkConfig, NodeConfig } from '../index.js'
+import type { MarkConfig, NodeConfig } from '../index.js'
 import {
   AnyConfig,
   Attribute,

package/src/helpers/getMarkRange.ts

@@ -9,7 +9,14 @@ function findMarkInSet(
   attributes: Record<string, any> = {},
 ): ProseMirrorMark | undefined {
   return marks.find(item => {
-    return item.type === type && objectIncludes(item.attrs, attributes)
+    return (
+      item.type === type
+      && objectIncludes(
+        // Only check equality for the attributes that are provided
+        Object.fromEntries(Object.keys(attributes).map(k => [k, item.attrs[k]])),
+        attributes,
+      )
+    )
   })
 }
 
@@ -21,25 +28,44 @@ function isMarkInSet(
   return !!findMarkInSet(marks, type, attributes)
 }
 
+/**
+ * Get the range of a mark at a resolved position.
+ */
 export function getMarkRange(
+  /**
+   * The position to get the mark range for.
+   */
   $pos: ResolvedPos,
+  /**
+   * The mark type to get the range for.
+   */
   type: MarkType,
-  attributes: Record<string, any> = {},
+  /**
+   * The attributes to match against.
+   * If not provided, only the first mark at the position will be matched.
+   */
+  attributes?: Record<string, any>,
 ): Range | void {
   if (!$pos || !type) {
     return
   }
-
   let start = $pos.parent.childAfter($pos.parentOffset)
 
-  if ($pos.parentOffset === start.offset && start.offset !== 0) {
+  // If the cursor is at the start of a text node that does not have the mark, look backward
+  if (!start.node || !start.node.marks.some(mark => mark.type === type)) {
     start = $pos.parent.childBefore($pos.parentOffset)
   }
 
-  if (!start.node) {
+  // If there is no text node with the mark even backward, return undefined
+  if (!start.node || !start.node.marks.some(mark => mark.type === type)) {
     return
   }
 
+  // Default to only matching against the first mark's attributes
+  attributes = attributes || start.node.marks[0]?.attrs
+
+  // We now know that the cursor is either at the start, middle or end of a text node with the specified mark
+  // so we can look it up on the targeted mark
   const mark = findMarkInSet([...start.node.marks], type, attributes)
 
   if (!mark) {
@@ -51,9 +77,10 @@ export function getMarkRange(
   let endIndex = startIndex + 1
   let endPos = startPos + start.node.nodeSize
 
-  findMarkInSet([...start.node.marks], type, attributes)
-
-  while (startIndex > 0 && mark.isInSet($pos.parent.child(startIndex - 1).marks)) {
+  while (
+    startIndex > 0
+    && isMarkInSet([...$pos.parent.child(startIndex - 1).marks], type, attributes)
+  ) {
     startIndex -= 1
     startPos -= $pos.parent.child(startIndex).nodeSize
   }

package/src/helpers/getMarksBetween.ts

@@ -12,7 +12,7 @@ export function getMarksBetween(from: number, to: number, doc: ProseMirrorNode):
       .resolve(from)
       .marks()
       .forEach(mark => {
-        const $pos = doc.resolve(from - 1)
+        const $pos = doc.resolve(from)
         const range = getMarkRange($pos, mark.type)
 
         if (!range) {

package/src/helpers/getRenderedAttributes.ts

@@ -8,6 +8,9 @@ export function getRenderedAttributes(
   extensionAttributes: ExtensionAttribute[],
 ): Record<string, any> {
   return extensionAttributes
+    .filter(
+      attribute => attribute.type === nodeOrMark.type.name,
+    )
     .filter(item => item.attribute.rendered)
     .map(item => {
       if (!item.attribute.renderHTML) {

package/src/helpers/getSchemaByResolvedExtensions.ts

@@ -2,7 +2,7 @@ import {
   MarkSpec, NodeSpec, Schema, TagParseRule,
 } from '@tiptap/pm/model'
 
-import { Editor, MarkConfig, NodeConfig } from '../index.js'
+import type { Editor, MarkConfig, NodeConfig } from '../index.js'
 import { AnyConfig, Extensions } from '../types.js'
 import { callOrReturn } from '../utilities/callOrReturn.js'
 import { isEmptyObject } from '../utilities/isEmptyObject.js'
@@ -78,6 +78,7 @@ export function getSchemaByResolvedExtensions(extensions: Extensions, editor?: E
         ),
         code: callOrReturn(getExtensionField<NodeConfig['code']>(extension, 'code', context)),
         whitespace: callOrReturn(getExtensionField<NodeConfig['whitespace']>(extension, 'whitespace', context)),
+        linebreakReplacement: callOrReturn(getExtensionField<NodeConfig['linebreakReplacement']>(extension, 'linebreakReplacement', context)),
         defining: callOrReturn(
           getExtensionField<NodeConfig['defining']>(extension, 'defining', context),
         ),
@@ -147,7 +148,7 @@ export function getSchemaByResolvedExtensions(extensions: Extensions, editor?: E
 
         return {
           ...fields,
-          ...(extendMarkSchema ? extendMarkSchema(extension) : {}),
+          ...(extendMarkSchema ? extendMarkSchema(extension as any) : {}),
         }
       }, {})
 

package/src/helpers/isList.ts

@@ -1,5 +1,5 @@
 import { getExtensionField } from '../helpers/getExtensionField.js'
-import { NodeConfig } from '../index.js'
+import type { NodeConfig } from '../index.js'
 import { Extensions } from '../types.js'
 import { callOrReturn } from '../utilities/callOrReturn.js'
 import { splitExtensions } from './splitExtensions.js'

package/src/helpers/isNodeEmpty.ts

@@ -1,40 +1,61 @@
 import { Node as ProseMirrorNode } from '@tiptap/pm/model'
 
 /**
- * Returns true if the given node is empty.
- * When `checkChildren` is true (default), it will also check if all children are empty.
+ * Returns true if the given prosemirror node is empty.
  */
 export function isNodeEmpty(
   node: ProseMirrorNode,
-  { checkChildren }: { checkChildren: boolean } = { checkChildren: true },
+  {
+    checkChildren = true,
+    ignoreWhitespace = false,
+  }: {
+    /**
+     * When true (default), it will also check if all children are empty.
+     */
+    checkChildren?: boolean;
+    /**
+     * When true, it will ignore whitespace when checking for emptiness.
+     */
+    ignoreWhitespace?: boolean;
+  } = {},
 ): boolean {
+  if (ignoreWhitespace) {
+    if (node.type.name === 'hardBreak') {
+      // Hard breaks are considered empty
+      return true
+    }
+    if (node.isText) {
+      return /^\s*$/m.test(node.text ?? '')
+    }
+  }
+
   if (node.isText) {
     return !node.text
   }
 
-  if (node.content.childCount === 0) {
-    return true
+  if (node.isAtom || node.isLeaf) {
+    return false
   }
 
-  if (node.isLeaf) {
-    return false
+  if (node.content.childCount === 0) {
+    return true
   }
 
   if (checkChildren) {
-    let hasSameContent = true
+    let isContentEmpty = true
 
     node.content.forEach(childNode => {
-      if (hasSameContent === false) {
+      if (isContentEmpty === false) {
         // Exit early for perf
         return
       }
 
-      if (!isNodeEmpty(childNode)) {
-        hasSameContent = false
+      if (!isNodeEmpty(childNode, { ignoreWhitespace, checkChildren })) {
+        isContentEmpty = false
       }
     })
 
-    return hasSameContent
+    return isContentEmpty
   }
 
   return false

package/src/inputRules/markInputRule.ts

@@ -8,7 +8,7 @@ import { callOrReturn } from '../utilities/callOrReturn.js'
 /**
  * Build an input rule that adds a mark when the
  * matched text is typed into it.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export function markInputRule(config: {
   find: InputRuleFinder

package/src/inputRules/nodeInputRule.ts

@@ -7,7 +7,7 @@ import { callOrReturn } from '../utilities/callOrReturn.js'
 /**
  * Build an input rule that adds a node when the
  * matched text is typed into it.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export function nodeInputRule(config: {
   /**

package/src/inputRules/textInputRule.ts

@@ -3,7 +3,7 @@ import { InputRule, InputRuleFinder } from '../InputRule.js'
 /**
  * Build an input rule that replaces text when the
  * matched text is typed into it.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export function textInputRule(config: {
   find: InputRuleFinder,

package/src/inputRules/textblockTypeInputRule.ts

@@ -9,7 +9,7 @@ import { callOrReturn } from '../utilities/callOrReturn.js'
  * matched text is typed into it. When using a regular expresion you’ll
  * probably want the regexp to start with `^`, so that the pattern can
  * only occur at the start of a textblock.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export function textblockTypeInputRule(config: {
   find: InputRuleFinder

package/src/inputRules/wrappingInputRule.ts

@@ -19,7 +19,7 @@ import { callOrReturn } from '../utilities/callOrReturn.js'
  * 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.
- * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
  */
 export function wrappingInputRule(config: {
   find: InputRuleFinder,

package/src/pasteRules/markPasteRule.ts

@@ -8,7 +8,7 @@ import { callOrReturn } from '../utilities/callOrReturn.js'
 /**
  * Build an paste rule that adds a mark when the
  * matched text is pasted into it.
- * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
  */
 export function markPasteRule(config: {
   find: PasteRuleFinder

package/src/pasteRules/nodePasteRule.ts

@@ -1,13 +1,13 @@
 import { NodeType } from '@tiptap/pm/model'
 
 import { PasteRule, PasteRuleFinder } from '../PasteRule.js'
-import { ExtendedRegExpMatchArray } from '../types.js'
+import { ExtendedRegExpMatchArray, JSONContent } from '../types.js'
 import { callOrReturn } from '../utilities/index.js'
 
 /**
  * Build an paste rule that adds a node when the
  * matched text is pasted into it.
- * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
  */
 export function nodePasteRule(config: {
   find: PasteRuleFinder
@@ -17,6 +17,11 @@ export function nodePasteRule(config: {
     | ((match: ExtendedRegExpMatchArray, event: ClipboardEvent) => Record<string, any>)
     | false
     | null
+  getContent?:
+    | JSONContent[]
+    | ((attrs: Record<string, any>) => JSONContent[])
+    | false
+    | null
 }) {
   return new PasteRule({
     find: config.find,
@@ -24,16 +29,20 @@ export function nodePasteRule(config: {
       match, chain, range, pasteEvent,
     }) {
       const attributes = callOrReturn(config.getAttributes, undefined, match, pasteEvent)
+      const content = callOrReturn(config.getContent, undefined, attributes)
 
       if (attributes === false || attributes === null) {
         return null
       }
 
+      const node = { type: config.type.name, attrs: attributes } as JSONContent
+
+      if (content) {
+        node.content = content
+      }
+
       if (match.input) {
-        chain().deleteRange(range).insertContentAt(range.from, {
-          type: config.type.name,
-          attrs: attributes,
-        })
+        chain().deleteRange(range).insertContentAt(range.from, node)
       }
     },
   })

package/src/pasteRules/textPasteRule.ts

@@ -3,7 +3,7 @@ import { PasteRule, PasteRuleFinder } from '../PasteRule.js'
 /**
  * Build an paste rule that replaces text when the
  * matched text is pasted into it.
- * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
  */
 export function textPasteRule(config: {
   find: PasteRuleFinder,

package/src/style.ts

@@ -27,8 +27,8 @@ img.ProseMirror-separator {
   display: inline !important;
   border: none !important;
   margin: 0 !important;
-  width: 1px !important;
-  height: 1px !important;
+  width: 0 !important;
+  height: 0 !important;
 }
 
 .ProseMirror-gapcursor {