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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "3.0.0-next.3",
+  "version": "3.0.0-next.4",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -18,7 +18,10 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
@@ -31,7 +34,7 @@
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/pm": "^3.0.0-next.3"
+    "@tiptap/pm": "^3.0.0-next.4"
   },
   "peerDependencies": {
     "@tiptap/pm": "^3.0.0-next.1"
@@ -43,6 +46,7 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
   }
-}
+}

package/src/CommandManager.ts

@@ -2,9 +2,7 @@ import { EditorState, Transaction } from '@tiptap/pm/state'
 
 import { Editor } from './Editor.js'
 import { createChainableState } from './helpers/createChainableState.js'
-import {
-  AnyCommands, CanCommands, ChainedCommands, CommandProps, SingleCommands,
-} from './types.js'
+import { AnyCommands, CanCommands, ChainedCommands, CommandProps, SingleCommands } from './types.js'
 
 export class CommandManager {
   editor: Editor
@@ -66,12 +64,7 @@ export class CommandManager {
     const tr = startTr || state.tr
 
     const run = () => {
-      if (
-        !hasStartTransaction
-        && shouldDispatch
-        && !tr.getMeta('preventDispatch')
-        && !this.hasCustomState
-      ) {
+      if (!hasStartTransaction && shouldDispatch && !tr.getMeta('preventDispatch') && !this.hasCustomState) {
         view.dispatch(tr)
       }
 

package/src/Editor.ts

@@ -1,19 +1,19 @@
-import {
-  MarkType,
-  Node as ProseMirrorNode,
-  NodeType,
-  Schema,
-} from '@tiptap/pm/model'
-import {
-  EditorState, Plugin, PluginKey, Transaction,
-} from '@tiptap/pm/state'
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import { MarkType, Node as ProseMirrorNode, NodeType, Schema } from '@tiptap/pm/model'
+import { EditorState, Plugin, PluginKey, Transaction } from '@tiptap/pm/state'
 import { EditorView } from '@tiptap/pm/view'
 
 import { CommandManager } from './CommandManager.js'
 import { EventEmitter } from './EventEmitter.js'
 import { ExtensionManager } from './ExtensionManager.js'
 import {
-  ClipboardTextSerializer, Commands, Drop, Editable, FocusEvents, Keymap, Paste,
+  ClipboardTextSerializer,
+  Commands,
+  Drop,
+  Editable,
+  FocusEvents,
+  Keymap,
+  Paste,
   Tabindex,
 } from './extensions/index.js'
 import { createDocument } from './helpers/createDocument.js'
@@ -29,11 +29,13 @@ import { style } from './style.js'
 import {
   CanCommands,
   ChainedCommands,
+  DocumentType,
   EditorEvents,
   EditorOptions,
-  JSONContent,
+  NodeType as TNodeType,
   SingleCommands,
   TextSerializer,
+  TextType as TTextType,
 } from './types.js'
 import { createStyleTag } from './utilities/createStyleTag.js'
 import { isFunction } from './utilities/isFunction.js'
@@ -93,7 +95,9 @@ export class Editor extends EventEmitter<EditorEvents> {
     onFocus: () => null,
     onBlur: () => null,
     onDestroy: () => null,
-    onContentError: ({ error }) => { throw error },
+    onContentError: ({ error }) => {
+      throw error
+    },
     onPaste: () => null,
     onDrop: () => null,
   }
@@ -196,7 +200,7 @@ export class Editor extends EventEmitter<EditorEvents> {
     this.setOptions({ editable })
 
     if (emitUpdate) {
-      this.emit('update', { editor: this, transaction: this.state.tr })
+      this.emit('update', { editor: this, transaction: this.state.tr, appendedTransactions: [] })
     }
   }
 
@@ -245,15 +249,17 @@ export class Editor extends EventEmitter<EditorEvents> {
    * @param nameOrPluginKeyToRemove The plugins name
    * @returns The new editor state or undefined if the editor is destroyed
    */
-  public unregisterPlugin(nameOrPluginKeyToRemove: string | PluginKey | (string | PluginKey)[]): EditorState | undefined {
+  public unregisterPlugin(
+    nameOrPluginKeyToRemove: string | PluginKey | (string | PluginKey)[],
+  ): EditorState | undefined {
     if (this.isDestroyed) {
       return undefined
     }
 
     const prevPlugins = this.state.plugins
-    let plugins = prevPlugins;
+    let plugins = prevPlugins
 
-    ([] as (string | PluginKey)[]).concat(nameOrPluginKeyToRemove).forEach(nameOrPluginKey => {
+    ;([] as (string | PluginKey)[]).concat(nameOrPluginKeyToRemove).forEach(nameOrPluginKey => {
       // @ts-ignore
       const name = typeof nameOrPluginKey === 'string' ? `${nameOrPluginKey}$` : nameOrPluginKey.key
 
@@ -279,24 +285,27 @@ export class Editor extends EventEmitter<EditorEvents> {
    * Creates an extension manager.
    */
   private createExtensionManager(): void {
-
-    const coreExtensions = this.options.enableCoreExtensions ? [
-      Editable,
-      ClipboardTextSerializer.configure({
-        blockSeparator: this.options.coreExtensionOptions?.clipboardTextSerializer?.blockSeparator,
-      }),
-      Commands,
-      FocusEvents,
-      Keymap,
-      Tabindex,
-      Drop,
-      Paste,
-    ].filter(ext => {
-      if (typeof this.options.enableCoreExtensions === 'object') {
-        return this.options.enableCoreExtensions[ext.name as keyof typeof this.options.enableCoreExtensions] !== false
-      }
-      return true
-    }) : []
+    const coreExtensions = this.options.enableCoreExtensions
+      ? [
+          Editable,
+          ClipboardTextSerializer.configure({
+            blockSeparator: this.options.coreExtensionOptions?.clipboardTextSerializer?.blockSeparator,
+          }),
+          Commands,
+          FocusEvents,
+          Keymap,
+          Tabindex,
+          Drop,
+          Paste,
+        ].filter(ext => {
+          if (typeof this.options.enableCoreExtensions === 'object') {
+            return (
+              this.options.enableCoreExtensions[ext.name as keyof typeof this.options.enableCoreExtensions] !== false
+            )
+          }
+          return true
+        })
+      : []
     const allExtensions = [...coreExtensions, ...this.options.extensions].filter(extension => {
       return ['extension', 'node', 'mark'].includes(extension?.type)
     })
@@ -327,14 +336,14 @@ export class Editor extends EventEmitter<EditorEvents> {
     let doc: ProseMirrorNode
 
     try {
-      doc = createDocument(
-        this.options.content,
-        this.schema,
-        this.options.parseOptions,
-        { errorOnInvalidContent: this.options.enableContentCheck },
-      )
+      doc = createDocument(this.options.content, this.schema, this.options.parseOptions, {
+        errorOnInvalidContent: this.options.enableContentCheck,
+      })
     } catch (e) {
-      if (!(e instanceof Error) || !['[tiptap error]: Invalid JSON content', '[tiptap error]: Invalid HTML content'].includes(e.message)) {
+      if (
+        !(e instanceof Error) ||
+        !['[tiptap error]: Invalid JSON content', '[tiptap error]: Invalid HTML content'].includes(e.message)
+      ) {
         // Not the content error we were expecting
         throw e
       }
@@ -354,12 +363,9 @@ export class Editor extends EventEmitter<EditorEvents> {
       })
 
       // Content is invalid, but attempt to create it anyway, stripping out the invalid parts
-      doc = createDocument(
-        this.options.content,
-        this.schema,
-        this.options.parseOptions,
-        { errorOnInvalidContent: false },
-      )
+      doc = createDocument(this.options.content, this.schema, this.options.parseOptions, {
+        errorOnInvalidContent: false,
+      })
     }
     const selection = resolveFocusPosition(doc, this.options.autofocus)
 
@@ -420,7 +426,7 @@ export class Editor extends EventEmitter<EditorEvents> {
 
   private capturedTransaction: Transaction | null = null
 
-  public captureTransaction(fn: Function) {
+  public captureTransaction(fn: () => void) {
     this.isCapturingTransaction = true
     fn()
     this.isCapturingTransaction = false
@@ -456,18 +462,30 @@ export class Editor extends EventEmitter<EditorEvents> {
       return
     }
 
-    const state = this.state.apply(transaction)
+    // Apply transaction and get resulting state and transactions
+    const { state, transactions } = this.state.applyTransaction(transaction)
     const selectionHasChanged = !this.state.selection.eq(state.selection)
+    const rootTrWasApplied = transactions.includes(transaction)
+    const prevState = this.state
 
     this.emit('beforeTransaction', {
       editor: this,
       transaction,
       nextState: state,
     })
+
+    // If transaction was filtered out, we can return early
+    if (!rootTrWasApplied) {
+      return
+    }
+
     this.view.updateState(state)
+
+    // Emit transaction event with appended transactions info
     this.emit('transaction', {
       editor: this,
       transaction,
+      appendedTransactions: transactions.slice(1),
     })
 
     if (selectionHasChanged) {
@@ -477,14 +495,17 @@ export class Editor extends EventEmitter<EditorEvents> {
       })
     }
 
-    const focus = transaction.getMeta('focus')
-    const blur = transaction.getMeta('blur')
+    // Only emit the latest between focus and blur events
+    const mostRecentFocusTr = transactions.findLast(tr => tr.getMeta('focus') || tr.getMeta('blur'))
+    const focus = mostRecentFocusTr?.getMeta('focus')
+    const blur = mostRecentFocusTr?.getMeta('blur')
 
     if (focus) {
       this.emit('focus', {
         editor: this,
         event: focus.event,
-        transaction,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        transaction: mostRecentFocusTr!,
       })
     }
 
@@ -492,17 +513,24 @@ export class Editor extends EventEmitter<EditorEvents> {
       this.emit('blur', {
         editor: this,
         event: blur.event,
-        transaction,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        transaction: mostRecentFocusTr!,
       })
     }
 
-    if (!transaction.docChanged || transaction.getMeta('preventUpdate')) {
+    // Compare states for update event
+    if (
+      transaction.getMeta('preventUpdate') ||
+      !transactions.some(tr => tr.docChanged) ||
+      prevState.doc.eq(state.doc)
+    ) {
       return
     }
 
     this.emit('update', {
       editor: this,
       transaction,
+      appendedTransactions: transactions.slice(1),
     })
   }
 
@@ -532,7 +560,10 @@ export class Editor extends EventEmitter<EditorEvents> {
   /**
    * Get the document as JSON.
    */
-  public getJSON(): JSONContent {
+  public getJSON(): DocumentType<
+    Record<string, any> | undefined,
+    TNodeType<string, undefined | Record<string, any>, any, (TNodeType | TTextType)[]>[]
+  > {
     return this.state.doc.toJSON()
   }
 
@@ -546,10 +577,7 @@ export class Editor extends EventEmitter<EditorEvents> {
   /**
    * Get the document as text.
    */
-  public getText(options?: {
-    blockSeparator?: string
-    textSerializers?: Record<string, TextSerializer>
-  }): string {
+  public getText(options?: { blockSeparator?: string; textSerializers?: Record<string, TextSerializer> }): string {
     const { blockSeparator = '\n\n', textSerializers = {} } = options || {}
 
     return getText(this.state.doc, {
@@ -568,19 +596,6 @@ export class Editor extends EventEmitter<EditorEvents> {
     return isNodeEmpty(this.state.doc)
   }
 
-  /**
-   * Get the number of characters for the current document.
-   *
-   * @deprecated
-   */
-  public getCharacterCount(): number {
-    console.warn(
-      '[tiptap warn]: "editor.getCharacterCount()" is deprecated. Please use "editor.storage.characterCount.characters()" instead.',
-    )
-
-    return this.state.doc.content.size - 2
-  }
-
   /**
    * Destroy the editor.
    */

package/src/EventEmitter.ts

@@ -1,16 +1,13 @@
 type StringKeyOf<T> = Extract<keyof T, string>
-type CallbackType<
-  T extends Record<string, any>,
-  EventName extends StringKeyOf<T>,
-> = T[EventName] extends any[] ? T[EventName] : [T[EventName]]
-type CallbackFunction<
-  T extends Record<string, any>,
-  EventName extends StringKeyOf<T>,
-> = (...props: CallbackType<T, EventName>) => any
+type CallbackType<T extends Record<string, any>, EventName extends StringKeyOf<T>> = T[EventName] extends any[]
+  ? T[EventName]
+  : [T[EventName]]
+type CallbackFunction<T extends Record<string, any>, EventName extends StringKeyOf<T>> = (
+  ...props: CallbackType<T, EventName>
+) => any
 
 export class EventEmitter<T extends Record<string, any>> {
-
-  private callbacks: { [key: string]: Function[] } = {}
+  private callbacks: { [key: string]: Array<(...args: any[]) => void> } = {}
 
   public on<EventName extends StringKeyOf<T>>(event: EventName, fn: CallbackFunction<T, EventName>): this {
     if (!this.callbacks[event]) {

package/src/Extension.ts

@@ -7,14 +7,7 @@ import { InputRule } from './InputRule.js'
 import { Mark } from './Mark.js'
 import { Node } from './Node.js'
 import { PasteRule } from './PasteRule.js'
-import {
-  AnyConfig,
-  Extensions,
-  GlobalAttributes,
-  KeyboardShortcutCommand,
-  ParentConfig,
-  RawCommands,
-} from './types.js'
+import { AnyConfig, Extensions, GlobalAttributes, KeyboardShortcutCommand, ParentConfig, RawCommands } from './types.js'
 import { callOrReturn } from './utilities/callOrReturn.js'
 import { mergeDeep } from './utilities/mergeDeep.js'
 
@@ -443,12 +436,13 @@ export class Extension<Options = any, Storage = any> {
       )
     }
 
-    this.storage = callOrReturn(
-      getExtensionField<AnyConfig['addStorage']>(this, 'addStorage', {
-        name: this.name,
-        options: this.options,
-      }),
-    ) || {}
+    this.storage =
+      callOrReturn(
+        getExtensionField<AnyConfig['addStorage']>(this, 'addStorage', {
+          name: this.name,
+          options: this.options,
+        }),
+      ) || {}
   }
 
   static create<O = any, S = any>(config: Partial<ExtensionConfig<O, S>> = {}) {

package/src/ExtensionManager.ts

@@ -4,21 +4,25 @@ import { Plugin } from '@tiptap/pm/state'
 import { NodeViewConstructor } from '@tiptap/pm/view'
 
 import type { Editor } from './Editor.js'
-import { getAttributesFromExtensions } from './helpers/getAttributesFromExtensions.js'
-import { getExtensionField } from './helpers/getExtensionField.js'
-import { getNodeType } from './helpers/getNodeType.js'
-import { getRenderedAttributes } from './helpers/getRenderedAttributes.js'
-import { getSchemaByResolvedExtensions } from './helpers/getSchemaByResolvedExtensions.js'
-import { getSchemaTypeByName } from './helpers/getSchemaTypeByName.js'
-import { isExtensionRulesEnabled } from './helpers/isExtensionRulesEnabled.js'
-import { splitExtensions } from './helpers/splitExtensions.js'
+import {
+  flattenExtensions,
+  getAttributesFromExtensions,
+  getExtensionField,
+  getNodeType,
+  getRenderedAttributes,
+  getSchemaByResolvedExtensions,
+  getSchemaTypeByName,
+  isExtensionRulesEnabled,
+  resolveExtensions,
+  sortExtensions,
+  splitExtensions,
+} from './helpers/index.js'
 import type { NodeConfig } from './index.js'
 import { InputRule, inputRulesPlugin } from './InputRule.js'
 import { Mark } from './Mark.js'
 import { PasteRule, pasteRulesPlugin } from './PasteRule.js'
 import { AnyConfig, Extensions, RawCommands } from './types.js'
 import { callOrReturn } from './utilities/callOrReturn.js'
-import { findDuplicates } from './utilities/findDuplicates.js'
 
 export class ExtensionManager {
   editor: Editor
@@ -31,87 +35,16 @@ export class ExtensionManager {
 
   constructor(extensions: Extensions, editor: Editor) {
     this.editor = editor
-    this.extensions = ExtensionManager.resolve(extensions)
+    this.extensions = resolveExtensions(extensions)
     this.schema = getSchemaByResolvedExtensions(this.extensions, editor)
     this.setupExtensions()
   }
 
-  /**
-   * Returns a flattened and sorted extension list while
-   * also checking for duplicated extensions and warns the user.
-   * @param extensions An array of Tiptap extensions
-   * @returns An flattened and sorted array of Tiptap extensions
-   */
-  static resolve(extensions: Extensions): Extensions {
-    const resolvedExtensions = ExtensionManager.sort(ExtensionManager.flatten(extensions))
-    const duplicatedNames = findDuplicates(resolvedExtensions.map(extension => extension.name))
-
-    if (duplicatedNames.length) {
-      console.warn(
-        `[tiptap warn]: Duplicate extension names found: [${duplicatedNames
-          .map(item => `'${item}'`)
-          .join(', ')}]. This can lead to issues.`,
-      )
-    }
-
-    return resolvedExtensions
-  }
-
-  /**
-   * 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
-   */
-  static flatten(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,
-          )
+  static resolve = resolveExtensions
 
-          if (addExtensions) {
-            return [extension, ...this.flatten(addExtensions())]
-          }
+  static sort = sortExtensions
 
-          return extension
-        })
-        // `Infinity` will break TypeScript so we set a number that is probably high enough
-        .flat(10)
-    )
-  }
-
-  /**
-   * Sort extensions by priority.
-   * @param extensions An array of Tiptap extensions
-   * @returns A sorted array of Tiptap extensions by priority
-   */
-  static sort(extensions: Extensions): Extensions {
-    const defaultPriority = 100
-
-    return extensions.sort((a, b) => {
-      const priorityA = getExtensionField<AnyConfig['priority']>(a, 'priority') || defaultPriority
-      const priorityB = getExtensionField<AnyConfig['priority']>(b, 'priority') || defaultPriority
-
-      if (priorityA > priorityB) {
-        return -1
-      }
-
-      if (priorityA < priorityB) {
-        return 1
-      }
-
-      return 0
-    })
-  }
+  static flatten = flattenExtensions
 
   /**
    * Get all commands from the extensions.
@@ -127,11 +60,7 @@ export class ExtensionManager {
         type: getSchemaTypeByName(extension.name, this.schema),
       }
 
-      const addCommands = getExtensionField<AnyConfig['addCommands']>(
-        extension,
-        'addCommands',
-        context,
-      )
+      const addCommands = getExtensionField<AnyConfig['addCommands']>(extension, 'addCommands', context)
 
       if (!addCommands) {
         return commands
@@ -156,7 +85,7 @@ export class ExtensionManager {
     // so it feels more natural to run plugins at the end of an array first.
     // That’s why we have to reverse the `extensions` array and sort again
     // based on the `priority` option.
-    const extensions = ExtensionManager.sort([...this.extensions].reverse())
+    const extensions = sortExtensions([...this.extensions].reverse())
 
     const inputRules: InputRule[] = []
     const pasteRules: PasteRule[] = []
@@ -200,21 +129,13 @@ export class ExtensionManager {
 
         plugins.push(keyMapPlugin)
 
-        const addInputRules = getExtensionField<AnyConfig['addInputRules']>(
-          extension,
-          'addInputRules',
-          context,
-        )
+        const addInputRules = getExtensionField<AnyConfig['addInputRules']>(extension, 'addInputRules', context)
 
         if (isExtensionRulesEnabled(extension, editor.options.enableInputRules) && addInputRules) {
           inputRules.push(...addInputRules())
         }
 
-        const addPasteRules = getExtensionField<AnyConfig['addPasteRules']>(
-          extension,
-          'addPasteRules',
-          context,
-        )
+        const addPasteRules = getExtensionField<AnyConfig['addPasteRules']>(extension, 'addPasteRules', context)
 
         if (isExtensionRulesEnabled(extension, editor.options.enablePasteRules) && addPasteRules) {
           pasteRules.push(...addPasteRules())
@@ -269,9 +190,7 @@ export class ExtensionManager {
       nodeExtensions
         .filter(extension => !!getExtensionField(extension, 'addNodeView'))
         .map(extension => {
-          const extensionAttributes = this.attributes.filter(
-            attribute => attribute.type === extension.name,
-          )
+          const extensionAttributes = this.attributes.filter(attribute => attribute.type === extension.name)
           const context = {
             name: extension.name,
             options: extension.options,
@@ -279,23 +198,13 @@ export class ExtensionManager {
             editor,
             type: getNodeType(extension.name, this.schema),
           }
-          const addNodeView = getExtensionField<NodeConfig['addNodeView']>(
-            extension,
-            'addNodeView',
-            context,
-          )
+          const addNodeView = getExtensionField<NodeConfig['addNodeView']>(extension, 'addNodeView', context)
 
           if (!addNodeView) {
             return []
           }
 
-          const nodeview: NodeViewConstructor = (
-            node,
-            view,
-            getPos,
-            decorations,
-            innerDecorations,
-          ) => {
+          const nodeview: NodeViewConstructor = (node, view, getPos, decorations, innerDecorations) => {
             const HTMLAttributes = getRenderedAttributes(node, extensionAttributes)
 
             return addNodeView()({
@@ -342,11 +251,7 @@ export class ExtensionManager {
         }
       }
 
-      const onBeforeCreate = getExtensionField<AnyConfig['onBeforeCreate']>(
-        extension,
-        'onBeforeCreate',
-        context,
-      )
+      const onBeforeCreate = getExtensionField<AnyConfig['onBeforeCreate']>(extension, 'onBeforeCreate', context)
       const onCreate = getExtensionField<AnyConfig['onCreate']>(extension, 'onCreate', context)
       const onUpdate = getExtensionField<AnyConfig['onUpdate']>(extension, 'onUpdate', context)
       const onSelectionUpdate = getExtensionField<AnyConfig['onSelectionUpdate']>(
@@ -354,11 +259,7 @@ export class ExtensionManager {
         'onSelectionUpdate',
         context,
       )
-      const onTransaction = getExtensionField<AnyConfig['onTransaction']>(
-        extension,
-        'onTransaction',
-        context,
-      )
+      const onTransaction = getExtensionField<AnyConfig['onTransaction']>(extension, 'onTransaction', context)
       const onFocus = getExtensionField<AnyConfig['onFocus']>(extension, 'onFocus', context)
       const onBlur = getExtensionField<AnyConfig['onBlur']>(extension, 'onBlur', context)
       const onDestroy = getExtensionField<AnyConfig['onDestroy']>(extension, 'onDestroy', context)