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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "3.0.0-next.1",
+  "version": "3.0.0-next.3",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -31,7 +31,7 @@
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/pm": "^3.0.0-next.1"
+    "@tiptap/pm": "^3.0.0-next.3"
   },
   "peerDependencies": {
     "@tiptap/pm": "^3.0.0-next.1"

package/src/Editor.ts

@@ -13,7 +13,8 @@ import { CommandManager } from './CommandManager.js'
 import { EventEmitter } from './EventEmitter.js'
 import { ExtensionManager } from './ExtensionManager.js'
 import {
-  ClipboardTextSerializer, Commands, Editable, FocusEvents, Keymap, Tabindex,
+  ClipboardTextSerializer, Commands, Drop, Editable, FocusEvents, Keymap, Paste,
+  Tabindex,
 } from './extensions/index.js'
 import { createDocument } from './helpers/createDocument.js'
 import { getAttributes } from './helpers/getAttributes.js'
@@ -64,6 +65,11 @@ export class Editor extends EventEmitter<EditorEvents> {
 
   public extensionStorage: Record<string, any> = {}
 
+  /**
+   * A unique ID for this editor instance.
+   */
+  public instanceId = Math.random().toString(36).slice(2, 9)
+
   public options: EditorOptions = {
     element: document.createElement('div'),
     content: '',
@@ -88,6 +94,8 @@ export class Editor extends EventEmitter<EditorEvents> {
     onBlur: () => null,
     onDestroy: () => null,
     onContentError: ({ error }) => { throw error },
+    onPaste: () => null,
+    onDrop: () => null,
   }
 
   constructor(options: Partial<EditorOptions> = {}) {
@@ -108,6 +116,8 @@ export class Editor extends EventEmitter<EditorEvents> {
     this.on('focus', this.options.onFocus)
     this.on('blur', this.options.onBlur)
     this.on('destroy', this.options.onDestroy)
+    this.on('drop', ({ event, slice, moved }) => this.options.onDrop(event, slice, moved))
+    this.on('paste', ({ event, slice }) => this.options.onPaste(event, slice))
 
     window.setTimeout(() => {
       if (this.isDestroyed) {
@@ -212,11 +222,12 @@ export class Editor extends EventEmitter<EditorEvents> {
    *
    * @param plugin A ProseMirror plugin
    * @param handlePlugins Control how to merge the plugin into the existing plugins.
+   * @returns The new editor state
    */
   public registerPlugin(
     plugin: Plugin,
     handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[],
-  ): void {
+  ): EditorState {
     const plugins = isFunction(handlePlugins)
       ? handlePlugins(plugin, [...this.state.plugins])
       : [...this.state.plugins, plugin]
@@ -224,27 +235,44 @@ export class Editor extends EventEmitter<EditorEvents> {
     const state = this.state.reconfigure({ plugins })
 
     this.view.updateState(state)
+
+    return state
   }
 
   /**
    * Unregister a ProseMirror plugin.
    *
-   * @param nameOrPluginKey The plugins name
+   * @param nameOrPluginKeyToRemove The plugins name
+   * @returns The new editor state or undefined if the editor is destroyed
    */
-  public unregisterPlugin(nameOrPluginKey: string | PluginKey): void {
+  public unregisterPlugin(nameOrPluginKeyToRemove: string | PluginKey | (string | PluginKey)[]): EditorState | undefined {
     if (this.isDestroyed) {
-      return
+      return undefined
     }
 
-    // @ts-ignore
-    const name = typeof nameOrPluginKey === 'string' ? `${nameOrPluginKey}$` : nameOrPluginKey.key
+    const prevPlugins = this.state.plugins
+    let plugins = prevPlugins;
 
-    const state = this.state.reconfigure({
+    ([] as (string | PluginKey)[]).concat(nameOrPluginKeyToRemove).forEach(nameOrPluginKey => {
       // @ts-ignore
-      plugins: this.state.plugins.filter(plugin => !plugin.key.startsWith(name)),
+      const name = typeof nameOrPluginKey === 'string' ? `${nameOrPluginKey}$` : nameOrPluginKey.key
+
+      // @ts-ignore
+      plugins = prevPlugins.filter(plugin => !plugin.key.startsWith(name))
+    })
+
+    if (prevPlugins.length === plugins.length) {
+      // No plugin was removed, so we don’t need to update the state
+      return undefined
+    }
+
+    const state = this.state.reconfigure({
+      plugins,
     })
 
     this.view.updateState(state)
+
+    return state
   }
 
   /**
@@ -261,7 +289,14 @@ export class Editor extends EventEmitter<EditorEvents> {
       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)
     })
@@ -307,6 +342,9 @@ export class Editor extends EventEmitter<EditorEvents> {
         editor: this,
         error: e as Error,
         disableCollaboration: () => {
+          if (this.storage.collaboration) {
+            this.storage.collaboration.isDisabled = true
+          }
           // To avoid syncing back invalid content, reinitialize the extensions without the collaboration extension
           this.options.extensions = this.options.extensions.filter(extension => extension.name !== 'collaboration')
 
@@ -327,6 +365,11 @@ export class Editor extends EventEmitter<EditorEvents> {
 
     this.view = new EditorView(this.options.element, {
       ...this.options.editorProps,
+      attributes: {
+        // add `role="textbox"` to the editor element
+        role: 'textbox',
+        ...this.options.editorProps?.attributes,
+      },
       dispatchTransaction: this.dispatchTransaction.bind(this),
       state: EditorState.create({
         doc,
@@ -545,6 +588,13 @@ export class Editor extends EventEmitter<EditorEvents> {
     this.emit('destroy')
 
     if (this.view) {
+      // Cleanup our reference to prevent circular references which caused memory leaks
+      // @ts-ignore
+      const dom = this.view.dom as TiptapEditorHTMLElement
+
+      if (dom && dom.editor) {
+        delete dom.editor
+      }
       this.view.destroy()
     }
 

package/src/EventEmitter.ts

@@ -46,6 +46,15 @@ export class EventEmitter<T extends Record<string, any>> {
     return this
   }
 
+  public once<EventName extends StringKeyOf<T>>(event: EventName, fn: CallbackFunction<T, EventName>): this {
+    const onceFn = (...args: CallbackType<T, EventName>) => {
+      this.off(event, onceFn)
+      fn.apply(this, args)
+    }
+
+    return this.on(event, onceFn)
+  }
+
   public removeAllListeners(): void {
     this.callbacks = {}
   }

package/src/ExtensionManager.ts

@@ -1,7 +1,7 @@
 import { keymap } from '@tiptap/pm/keymap'
-import { Node as ProsemirrorNode, Schema } from '@tiptap/pm/model'
+import { Schema } from '@tiptap/pm/model'
 import { Plugin } from '@tiptap/pm/state'
-import { Decoration, EditorView } from '@tiptap/pm/view'
+import { NodeViewConstructor } from '@tiptap/pm/view'
 
 import type { Editor } from './Editor.js'
 import { getAttributesFromExtensions } from './helpers/getAttributesFromExtensions.js'
@@ -261,7 +261,7 @@ export class ExtensionManager {
    * Get all node views from the extensions.
    * @returns An object with all node views where the key is the node name and the value is the node view function
    */
-  get nodeViews() {
+  get nodeViews(): Record<string, NodeViewConstructor> {
     const { editor } = this
     const { nodeExtensions } = splitExtensions(this.extensions)
 
@@ -289,21 +289,26 @@ export class ExtensionManager {
             return []
           }
 
-          const nodeview = (
-            node: ProsemirrorNode,
-            view: EditorView,
-            getPos: (() => number) | boolean,
-            decorations: Decoration[],
+          const nodeview: NodeViewConstructor = (
+            node,
+            view,
+            getPos,
+            decorations,
+            innerDecorations,
           ) => {
             const HTMLAttributes = getRenderedAttributes(node, extensionAttributes)
 
             return addNodeView()({
-              editor,
+              // pass-through
               node,
-              getPos,
+              view,
+              getPos: getPos as () => number,
               decorations,
-              HTMLAttributes,
+              innerDecorations,
+              // tiptap-specific
+              editor,
               extension,
+              HTMLAttributes,
             })
           }
 

package/src/InputRule.ts

@@ -1,8 +1,10 @@
+import { Fragment, Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { EditorState, Plugin, TextSelection } 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 { getTextContentFromNodes } from './helpers/getTextContentFromNodes.js'
 import {
   CanCommands,
@@ -14,37 +16,37 @@ import {
 import { isRegExp } from './utilities/isRegExp.js'
 
 export type InputRuleMatch = {
-  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 InputRuleFinder = RegExp | ((text: string) => InputRuleMatch | null)
+export type InputRuleFinder = RegExp | ((text: string) => InputRuleMatch | null);
 
 export class InputRule {
   find: InputRuleFinder
 
   handler: (props: {
-    state: EditorState
-    range: Range
-    match: ExtendedRegExpMatchArray
-    commands: SingleCommands
-    chain: () => ChainedCommands
-    can: () => CanCommands
+    state: EditorState;
+    range: Range;
+    match: ExtendedRegExpMatchArray;
+    commands: SingleCommands;
+    chain: () => ChainedCommands;
+    can: () => CanCommands;
   }) => void | null
 
   constructor(config: {
-    find: InputRuleFinder
+    find: InputRuleFinder;
     handler: (props: {
-      state: EditorState
-      range: Range
-      match: ExtendedRegExpMatchArray
-      commands: SingleCommands
-      chain: () => ChainedCommands
-      can: () => CanCommands
-    }) => void | null
+      state: EditorState;
+      range: Range;
+      match: ExtendedRegExpMatchArray;
+      commands: SingleCommands;
+      chain: () => ChainedCommands;
+      can: () => CanCommands;
+    }) => void | null;
   }) {
     this.find = config.find
     this.handler = config.handler
@@ -85,12 +87,12 @@ const inputRuleMatcherHandler = (
 }
 
 function run(config: {
-  editor: Editor
-  from: number
-  to: number
-  text: string
-  rules: InputRule[]
-  plugin: Plugin
+  editor: Editor;
+  from: number;
+  to: number;
+  text: string;
+  rules: InputRule[];
+  plugin: Plugin;
 }): boolean {
   const {
     editor, from, to, text, rules, plugin,
@@ -184,7 +186,7 @@ export function inputRulesPlugin(props: { editor: Editor; rules: InputRule[] }):
       init() {
         return null
       },
-      apply(tr, prev) {
+      apply(tr, prev, state) {
         const stored = tr.getMeta(plugin)
 
         if (stored) {
@@ -192,12 +194,25 @@ export function inputRulesPlugin(props: { editor: Editor; rules: InputRule[] }):
         }
 
         // if InputRule is triggered by insertContent()
-        const simulatedInputMeta = tr.getMeta('applyInputRules')
+        const simulatedInputMeta = tr.getMeta('applyInputRules') as
+          | undefined
+          | {
+              from: number;
+              text: string | ProseMirrorNode | Fragment;
+            }
         const isSimulatedInput = !!simulatedInputMeta
 
         if (isSimulatedInput) {
           setTimeout(() => {
-            const { from, text } = simulatedInputMeta
+            let { text } = simulatedInputMeta
+
+            if (typeof text === 'string') {
+              text = text as string
+            } else {
+              text = getHTMLFromFragment(Fragment.from(text), state.schema)
+            }
+
+            const { from } = simulatedInputMeta
             const to = from + text.length
 
             run({

package/src/Node.ts

@@ -595,6 +595,25 @@ declare module '@tiptap/core' {
           editor?: Editor
         }) => NodeSpec['whitespace'])
 
+    /**
+     * Allows a **single** node to be set as linebreak equivalent (e.g. hardBreak).
+     * When converting between block types that have whitespace set to "pre"
+     * and don't support the linebreak node (e.g. codeBlock) and other block types
+     * that do support the linebreak node (e.g. paragraphs) - this node will be used
+     * as the linebreak instead of stripping the newline.
+     *
+     * See [linebreakReplacement](https://prosemirror.net/docs/ref/#model.NodeSpec.linebreakReplacement).
+     */
+    linebreakReplacement?:
+      | NodeSpec['linebreakReplacement']
+      | ((this: {
+          name: string
+          options: Options
+          storage: Storage
+          parent: ParentConfig<NodeConfig<Options, Storage>>['linebreakReplacement']
+          editor?: Editor
+        }) => NodeSpec['linebreakReplacement'])
+
     /**
      * When enabled, enables both
      * [`definingAsContext`](https://prosemirror.net/docs/ref/#model.NodeSpec.definingAsContext) and

package/src/NodePos.ts

@@ -135,8 +135,9 @@ export class NodePos {
 
     this.node.content.forEach((node, offset) => {
       const isBlock = node.isBlock && !node.isTextblock
+      const isNonTextAtom = node.isAtom && !node.isText
 
-      const targetPos = this.pos + offset + 1
+      const targetPos = this.pos + offset + (isNonTextAtom ? 0 : 1)
       const $pos = this.resolvedPos.doc.resolve(targetPos)
 
       if (!isBlock && $pos.depth <= this.depth) {
@@ -235,9 +236,13 @@ export class NodePos {
   }
 
   setAttribute(attributes: { [key: string]: any }) {
-    const oldSelection = this.editor.state.selection
+    const { tr } = this.editor.state
 
-    this.editor.chain().setTextSelection(this.from).updateAttributes(this.node.type.name, attributes).setTextSelection(oldSelection.from)
-      .run()
+    tr.setNodeMarkup(this.from, undefined, {
+      ...this.node.attrs,
+      ...attributes,
+    })
+
+    this.editor.view.dispatch(tr)
   }
 }

package/src/NodeView.ts

@@ -1,9 +1,7 @@
-import { Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { NodeSelection } from '@tiptap/pm/state'
-import { NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
+import { NodeView as ProseMirrorNodeView, ViewMutationRecord } from '@tiptap/pm/view'
 
 import { Editor as CoreEditor } from './Editor.js'
-import { Node } from './Node.js'
 import { DecorationWithType, NodeViewRendererOptions, NodeViewRendererProps } from './types.js'
 import { isAndroid } from './utilities/isAndroid.js'
 import { isiOS } from './utilities/isiOS.js'
@@ -23,13 +21,19 @@ export class NodeView<
 
   options: Options
 
-  extension: Node
+  extension: NodeViewRendererProps['extension']
 
-  node: ProseMirrorNode
+  node: NodeViewRendererProps['node']
 
-  decorations: DecorationWithType[]
+  decorations: NodeViewRendererProps['decorations']
 
-  getPos: any
+  innerDecorations: NodeViewRendererProps['innerDecorations']
+
+  view: NodeViewRendererProps['view']
+
+  getPos: NodeViewRendererProps['getPos']
+
+  HTMLAttributes: NodeViewRendererProps['HTMLAttributes']
 
   isDragging = false
 
@@ -44,6 +48,9 @@ export class NodeView<
     this.extension = props.extension
     this.node = props.node
     this.decorations = props.decorations as DecorationWithType[]
+    this.innerDecorations = props.innerDecorations
+    this.view = props.view
+    this.HTMLAttributes = props.HTMLAttributes
     this.getPos = props.getPos
     this.mount()
   }
@@ -93,9 +100,14 @@ export class NodeView<
 
     event.dataTransfer?.setDragImage(this.dom, x, y)
 
+    const pos = this.getPos()
+
+    if (typeof pos !== 'number') {
+      return
+    }
     // we need to tell ProseMirror that we want to move the whole node
     // so we create a NodeSelection
-    const selection = NodeSelection.create(view.state.doc, this.getPos())
+    const selection = NodeSelection.create(view.state.doc, pos)
     const transaction = view.state.tr.setSelection(selection)
 
     view.dispatch(transaction)
@@ -139,11 +151,11 @@ export class NodeView<
     // ProseMirror tries to drag selectable nodes
     // even if `draggable` is set to `false`
     // this fix prevents that
-    if (!isDraggable && isSelectable && isDragEvent) {
+    if (!isDraggable && isSelectable && isDragEvent && event.target === this.dom) {
       event.preventDefault()
     }
 
-    if (isDraggable && isDragEvent && !isDragging) {
+    if (isDraggable && isDragEvent && !isDragging && event.target === this.dom) {
       event.preventDefault()
       return false
     }
@@ -197,7 +209,12 @@ export class NodeView<
     return true
   }
 
-  ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
+  /**
+   * Called when a DOM [mutation](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) or a selection change happens within the view.
+   * @return `false` if the editor should re-read the selection or re-parse the range around the mutation
+   * @return `true` if it can safely be ignored.
+   */
+  ignoreMutation(mutation: ViewMutationRecord) {
     if (!this.dom || !this.contentDOM) {
       return true
     }
@@ -254,10 +271,17 @@ export class NodeView<
     return true
   }
 
-  updateAttributes(attributes: {}) {
+  /**
+   * Update the attributes of the prosemirror node.
+   */
+  updateAttributes(attributes: Record<string, any>): void {
     this.editor.commands.command(({ tr }) => {
       const pos = this.getPos()
 
+      if (typeof pos !== 'number') {
+        return false
+      }
+
       tr.setNodeMarkup(pos, undefined, {
         ...this.node.attrs,
         ...attributes,
@@ -267,8 +291,15 @@ export class NodeView<
     })
   }
 
+  /**
+   * Delete the node.
+   */
   deleteNode(): void {
     const from = this.getPos()
+
+    if (typeof from !== 'number') {
+      return
+    }
     const to = from + this.node.nodeSize
 
     this.editor.commands.deleteRange({ from, to })