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

package/src/commands/clearContent.ts

@@ -5,16 +5,21 @@ declare module '@tiptap/core' {
     clearContent: {
       /**
        * Clear the whole document.
-       * @param emitUpdate Whether to emit an update event.
        * @example editor.commands.clearContent()
        */
-      clearContent: (emitUpdate?: boolean) => ReturnType
+      clearContent: (
+        /**
+         * Whether to emit an update event.
+         * @default true
+         */
+        emitUpdate?: boolean,
+      ) => ReturnType
     }
   }
 }
 
 export const clearContent: RawCommands['clearContent'] =
-  (emitUpdate = false) =>
+  (emitUpdate = true) =>
   ({ commands }) => {
-    return commands.setContent('', emitUpdate)
+    return commands.setContent('', { emitUpdate })
   }

package/src/commands/focus.ts

@@ -1,6 +1,8 @@
 import { isTextSelection } from '../helpers/isTextSelection.js'
 import { resolveFocusPosition } from '../helpers/resolveFocusPosition.js'
 import { FocusPosition, RawCommands } from '../types.js'
+import { isAndroid } from '../utilities/isAndroid.js'
+import { isiOS } from '../utilities/isiOS.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -39,7 +41,11 @@ export const focus: RawCommands['focus'] =
     }
 
     const delayedFocus = () => {
-      ;(view.dom as HTMLElement).focus()
+      // focus within `requestAnimationFrame` breaks focus on iOS and Android
+      // so we have to call this
+      if (isiOS() || isAndroid()) {
+        ;(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/insertContentAt.ts

@@ -88,8 +88,12 @@ export const insertContentAt: RawCommands['insertContentAt'] =
           editor,
           error: e as Error,
           disableCollaboration: () => {
-            if (editor.storage.collaboration) {
-              editor.storage.collaboration.isDisabled = true
+            if (
+              'collaboration' in editor.storage &&
+              typeof editor.storage.collaboration === 'object' &&
+              editor.storage.collaboration
+            ) {
+              ;(editor.storage.collaboration as any).isDisabled = true
             }
           },
         })

package/src/commands/setContent.ts

@@ -19,25 +19,26 @@ declare module '@tiptap/core' {
          */
         content: Content | Fragment | ProseMirrorNode,
 
-        /**
-         * Whether to emit an update event.
-         * @default false
-         */
-        emitUpdate?: boolean,
-
-        /**
-         * Options for parsing the content.
-         * @default {}
-         */
-        parseOptions?: ParseOptions,
         /**
          * Options for `setContent`.
          */
         options?: {
+          /**
+           * Options for parsing the content.
+           * @default {}
+           */
+          parseOptions?: ParseOptions
+
           /**
            * Whether to throw an error if the content is invalid.
            */
           errorOnInvalidContent?: boolean
+
+          /**
+           * Whether to emit an update event.
+           * @default true
+           */
+          emitUpdate?: boolean
         },
       ) => ReturnType
     }
@@ -45,7 +46,7 @@ declare module '@tiptap/core' {
 }
 
 export const setContent: RawCommands['setContent'] =
-  (content, emitUpdate = false, parseOptions = {}, options = {}) =>
+  (content, { errorOnInvalidContent, emitUpdate = true, parseOptions = {} } = {}) =>
   ({ editor, tr, dispatch, commands }) => {
     const { doc } = tr
 
@@ -53,7 +54,7 @@ export const setContent: RawCommands['setContent'] =
     // TODO remove this in the next major version
     if (parseOptions.preserveWhitespace !== 'full') {
       const document = createDocument(content, editor.schema, parseOptions, {
-        errorOnInvalidContent: options.errorOnInvalidContent ?? editor.options.enableContentCheck,
+        errorOnInvalidContent: errorOnInvalidContent ?? editor.options.enableContentCheck,
       })
 
       if (dispatch) {
@@ -68,6 +69,6 @@ export const setContent: RawCommands['setContent'] =
 
     return commands.insertContentAt({ from: 0, to: doc.content.size }, content, {
       parseOptions,
-      errorOnInvalidContent: options.errorOnInvalidContent ?? editor.options.enableContentCheck,
+      errorOnInvalidContent: errorOnInvalidContent ?? editor.options.enableContentCheck,
     })
   }

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

@@ -109,6 +109,10 @@ export const Keymap = Extension.create({
       new Plugin({
         key: new PluginKey('clearDocument'),
         appendTransaction: (transactions, oldState, newState) => {
+          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/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,17 +10,17 @@ 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,
     })
@@ -25,5 +28,5 @@ export function getExtensionField<T = any>(
     return value
   }
 
-  return extension.config[field]
+  return extension.config[field as keyof typeof extension.config] as RemoveThis<T>
 }

package/src/index.ts

@@ -5,7 +5,9 @@ export * as extensions from './extensions/index.js'
 export * from './helpers/index.js'
 export * from './InputRule.js'
 export * from './inputRules/index.js'
+export { createElement, Fragment, createElement as h } from './jsx-runtime.js'
 export * from './Mark.js'
+export * from './MarkView.js'
 export * from './Node.js'
 export * from './NodePos.js'
 export * from './NodeView.js'
@@ -19,10 +21,4 @@ export * from './utilities/index.js'
 export interface Commands<ReturnType = any> {}
 
 // eslint-disable-next-line
-export interface ExtensionConfig<Options = any, Storage = any> {}
-
-// eslint-disable-next-line
-export interface NodeConfig<Options = any, Storage = any> {}
-
-// eslint-disable-next-line
-export interface MarkConfig<Options = any, Storage = any> {}
+export interface Storage {}

package/src/jsx-runtime.ts

@@ -0,0 +1,64 @@
+export type Attributes = Record<string, any>
+
+export type DOMOutputSpecElement = 0 | Attributes | DOMOutputSpecArray
+/**
+ * Better describes the output of a `renderHTML` function in prosemirror
+ * @see https://prosemirror.net/docs/ref/#model.DOMOutputSpec
+ */
+export type DOMOutputSpecArray =
+  | [string]
+  | [string, Attributes]
+  | [string, 0]
+  | [string, Attributes, 0]
+  | [string, Attributes, DOMOutputSpecArray | 0]
+  | [string, DOMOutputSpecArray]
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    // @ts-ignore - conflict with React typings
+    type Element = [string, ...any[]]
+    // @ts-ignore - conflict with React typings
+    interface IntrinsicElements {
+      // @ts-ignore - conflict with React typings
+      [key: string]: any
+    }
+  }
+}
+
+export type JSXRenderer = (
+  tag: 'slot' | string | ((props?: Attributes) => DOMOutputSpecArray | DOMOutputSpecElement),
+  props?: Attributes,
+  ...children: JSXRenderer[]
+) => DOMOutputSpecArray | DOMOutputSpecElement
+
+export function Fragment(props: { children: JSXRenderer[] }) {
+  return props.children
+}
+
+export const h: JSXRenderer = (tag, attributes) => {
+  // Treat the slot tag as the Prosemirror hole to render content into
+  if (tag === 'slot') {
+    return 0
+  }
+
+  // If the tag is a function, call it with the props
+  if (tag instanceof Function) {
+    return tag(attributes)
+  }
+
+  const { children, ...rest } = attributes ?? {}
+
+  if (tag === 'svg') {
+    throw new Error('SVG elements are not supported in the JSX syntax, use the array syntax instead')
+  }
+
+  // Otherwise, return the tag, attributes, and children
+  return [tag, rest, children]
+}
+
+// See
+// https://esbuild.github.io/api/#jsx-import-source
+// https://www.typescriptlang.org/tsconfig/#jsxImportSource
+
+export { h as createElement, h as jsx, h as jsxDEV, h as jsxs }