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

package/src/commands/wrapInList.ts

@@ -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

@@ -16,9 +16,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)
 
@@ -27,9 +25,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 } 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,
@@ -104,8 +109,11 @@ 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'))
 

package/src/extensions/paste.ts

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

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

@@ -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

@@ -5,10 +5,7 @@ import { EditorState, Transaction } from '@tiptap/pm/state'
  * @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,4 @@
-import {
-  Fragment, 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'

package/src/helpers/createNodeFromContent.ts

@@ -1,10 +1,4 @@
-import {
-  DOMParser,
-  Fragment,
-  Node as ProseMirrorNode,
-  ParseOptions,
-  Schema,
-} from '@tiptap/pm/model'
+import { DOMParser, Fragment, Node as ProseMirrorNode, ParseOptions, Schema } from '@tiptap/pm/model'
 
 import { Content } from '../types.js'
 import { elementFromString } from '../utilities/elementFromString.js'
@@ -67,7 +61,6 @@ export function createNodeFromContent(
   }
 
   if (isTextContent) {
-
     // Check for invalid content
     if (options.errorOnInvalidContent) {
       let hasInvalidContent = false
@@ -106,7 +99,9 @@ export function createNodeFromContent(
       }
 
       if (options.errorOnInvalidContent && hasInvalidContent) {
-        throw new Error('[tiptap error]: Invalid HTML content', { cause: new Error(`Invalid element found: ${invalidContent}`) })
+        throw new Error('[tiptap error]: Invalid HTML content', {
+          cause: new Error(`Invalid element found: ${invalidContent}`),
+        })
       }
     }
 
@@ -117,7 +112,6 @@ export function createNodeFromContent(
     }
 
     return parser.parse(elementFromString(content), options.parseOptions)
-
   }
 
   return createNodeFromContent('', schema, options)

package/src/helpers/findChildrenInRange.ts

@@ -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

@@ -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/flattenExtensions.ts

@@ -0,0 +1,30 @@
+import { AnyConfig, Extensions } from '../types.js'
+import { getExtensionField } from './getExtensionField.js'
+
+/**
+ * Create a flattened array of extensions by traversing the `addExtensions` field.
+ * @param extensions An array of Tiptap extensions
+ * @returns A flattened array of Tiptap extensions
+ */
+export function flattenExtensions(extensions: Extensions): Extensions {
+  return (
+    extensions
+      .map(extension => {
+        const context = {
+          name: extension.name,
+          options: extension.options,
+          storage: extension.storage,
+        }
+
+        const addExtensions = getExtensionField<AnyConfig['addExtensions']>(extension, 'addExtensions', context)
+
+        if (addExtensions) {
+          return [extension, ...flattenExtensions(addExtensions())]
+        }
+
+        return extension
+      })
+      // `Infinity` will break TypeScript so we set a number that is probably high enough
+      .flat(10)
+  )
+}

package/src/helpers/getAttributes.ts

@@ -11,10 +11,7 @@ import { getSchemaTypeNameByName } from './getSchemaTypeNameByName.js'
  * @param typeOrName The node or mark type or name
  * @returns The attributes of the node or mark or an empty object
  */
-export function getAttributes(
-  state: EditorState,
-  typeOrName: string | NodeType | MarkType,
-): Record<string, any> {
+export function getAttributes(state: EditorState, typeOrName: string | NodeType | MarkType): Record<string, any> {
   const schemaType = getSchemaTypeNameByName(
     typeof typeOrName === 'string' ? typeOrName : typeOrName.name,
     state.schema,

package/src/helpers/getAttributesFromExtensions.ts

@@ -1,11 +1,5 @@
 import type { MarkConfig, NodeConfig } from '../index.js'
-import {
-  AnyConfig,
-  Attribute,
-  Attributes,
-  ExtensionAttribute,
-  Extensions,
-} from '../types.js'
+import { AnyConfig, Attribute, Attributes, ExtensionAttribute, Extensions } from '../types.js'
 import { getExtensionField } from './getExtensionField.js'
 import { splitExtensions } from './splitExtensions.js'
 
@@ -17,8 +11,9 @@ export function getAttributesFromExtensions(extensions: Extensions): ExtensionAt
   const extensionAttributes: ExtensionAttribute[] = []
   const { nodeExtensions, markExtensions } = splitExtensions(extensions)
   const nodeAndMarkExtensions = [...nodeExtensions, ...markExtensions]
-  const defaultAttribute: Required<Attribute> = {
+  const defaultAttribute: Required<Omit<Attribute, 'validate'>> & Pick<Attribute, 'validate'> = {
     default: null,
+    validate: undefined,
     rendered: true,
     renderHTML: null,
     parseHTML: null,
@@ -48,18 +43,16 @@ export function getAttributesFromExtensions(extensions: Extensions): ExtensionAt
 
     globalAttributes.forEach(globalAttribute => {
       globalAttribute.types.forEach(type => {
-        Object
-          .entries(globalAttribute.attributes)
-          .forEach(([name, attribute]) => {
-            extensionAttributes.push({
-              type,
-              name,
-              attribute: {
-                ...defaultAttribute,
-                ...attribute,
-              },
-            })
+        Object.entries(globalAttribute.attributes).forEach(([name, attribute]) => {
+          extensionAttributes.push({
+            type,
+            name,
+            attribute: {
+              ...defaultAttribute,
+              ...attribute,
+            },
           })
+        })
       })
     })
   })
@@ -84,28 +77,26 @@ export function getAttributesFromExtensions(extensions: Extensions): ExtensionAt
     // TODO: remove `as Attributes`
     const attributes = addAttributes() as Attributes
 
-    Object
-      .entries(attributes)
-      .forEach(([name, attribute]) => {
-        const mergedAttr = {
-          ...defaultAttribute,
-          ...attribute,
-        }
+    Object.entries(attributes).forEach(([name, attribute]) => {
+      const mergedAttr = {
+        ...defaultAttribute,
+        ...attribute,
+      }
 
-        if (typeof mergedAttr?.default === 'function') {
-          mergedAttr.default = mergedAttr.default()
-        }
+      if (typeof mergedAttr?.default === 'function') {
+        mergedAttr.default = mergedAttr.default()
+      }
 
-        if (mergedAttr?.isRequired && mergedAttr?.default === undefined) {
-          delete mergedAttr.default
-        }
+      if (mergedAttr?.isRequired && mergedAttr?.default === undefined) {
+        delete mergedAttr.default
+      }
 
-        extensionAttributes.push({
-          type: extension.name,
-          name,
-          attribute: mergedAttr,
-        })
+      extensionAttributes.push({
+        type: extension.name,
+        name,
+        attribute: mergedAttr,
       })
+    })
   })
 
   return extensionAttributes

package/src/helpers/getChangedRanges.ts

@@ -4,8 +4,8 @@ import { Range } from '../types.js'
 import { removeDuplicates } from '../utilities/removeDuplicates.js'
 
 export type ChangedRange = {
-  oldRange: Range,
-  newRange: Range,
+  oldRange: Range
+  newRange: Range
 }
 
 /**
@@ -18,15 +18,17 @@ function simplifyChangedRanges(changes: ChangedRange[]): ChangedRange[] {
   return uniqueChanges.length === 1
     ? uniqueChanges
     : uniqueChanges.filter((change, index) => {
-      const rest = uniqueChanges.filter((_, i) => i !== index)
+        const rest = uniqueChanges.filter((_, i) => i !== index)
 
-      return !rest.some(otherChange => {
-        return change.oldRange.from >= otherChange.oldRange.from
-          && change.oldRange.to <= otherChange.oldRange.to
-          && change.newRange.from >= otherChange.newRange.from
-          && change.newRange.to <= otherChange.newRange.to
+        return !rest.some(otherChange => {
+          return (
+            change.oldRange.from >= otherChange.oldRange.from &&
+            change.oldRange.to <= otherChange.oldRange.to &&
+            change.newRange.from >= otherChange.newRange.from &&
+            change.newRange.to <= otherChange.newRange.to
+          )
+        })
       })
-    })
 }
 
 /**
@@ -45,8 +47,8 @@ export function getChangedRanges(transform: Transform): ChangedRange[] {
     // @ts-ignore
     if (!stepMap.ranges.length) {
       const { from, to } = steps[index] as Step & {
-        from?: number,
-        to?: number,
+        from?: number
+        to?: number
       }
 
       if (from === undefined || to === undefined) {

package/src/helpers/getExtensionField.ts

@@ -1,3 +1,6 @@
+import { ExtensionConfig } from '../Extension.js'
+import { MarkConfig } from '../Mark.js'
+import { NodeConfig } from '../Node.js'
 import { AnyExtension, MaybeThisParameterType, RemoveThis } from '../types.js'
 
 /**
@@ -7,26 +10,23 @@ import { AnyExtension, MaybeThisParameterType, RemoveThis } from '../types.js'
  * @param context The context object that should be passed as `this` into the function
  * @returns The field value
  */
-export function getExtensionField<T = any>(
-  extension: AnyExtension,
-  field: string,
+export function getExtensionField<T = any, E extends AnyExtension = any>(
+  extension: E,
+  field: keyof ExtensionConfig | keyof MarkConfig | keyof NodeConfig,
   context?: Omit<MaybeThisParameterType<T>, 'parent'>,
 ): RemoveThis<T> {
-
-  if (extension.config[field] === undefined && extension.parent) {
+  if (extension.config[field as keyof typeof extension.config] === undefined && extension.parent) {
     return getExtensionField(extension.parent, field, context)
   }
 
-  if (typeof extension.config[field] === 'function') {
-    const value = extension.config[field].bind({
+  if (typeof extension.config[field as keyof typeof extension.config] === 'function') {
+    const value = (extension.config[field as keyof typeof extension.config] as any).bind({
       ...context,
-      parent: extension.parent
-        ? getExtensionField(extension.parent, field, context)
-        : null,
+      parent: extension.parent ? getExtensionField(extension.parent, field, context) : null,
     })
 
     return value
   }
 
-  return extension.config[field]
+  return extension.config[field as keyof typeof extension.config] as RemoveThis<T>
 }

package/src/helpers/getMarkAttributes.ts

@@ -3,10 +3,7 @@ import { EditorState } from '@tiptap/pm/state'
 
 import { getMarkType } from './getMarkType.js'
 
-export function getMarkAttributes(
-  state: EditorState,
-  typeOrName: string | MarkType,
-): Record<string, any> {
+export function getMarkAttributes(state: EditorState, typeOrName: string | MarkType): Record<string, any> {
   const type = getMarkType(typeOrName, state.schema)
   const { from, to, empty } = state.selection
   const marks: Mark[] = []