@tiptap/core 2.6.6 → 2.7.0

package/dist/packages/core/src/NodeView.d.ts

@@ -1,8 +1,6 @@
-import { Node as ProseMirrorNode } from '@tiptap/pm/model';
 import { NodeView as ProseMirrorNodeView } from '@tiptap/pm/view';
 import { Editor as CoreEditor } from './Editor.js';
-import { Node } from './Node.js';
-import { DecorationWithType, NodeViewRendererOptions, NodeViewRendererProps } from './types.js';
+import { NodeViewRendererOptions, NodeViewRendererProps } from './types.js';
 /**
  * Node views are used to customize the rendered DOM structure of a node.
  * @see https://tiptap.dev/guide/node-views
@@ -11,10 +9,13 @@ export declare class NodeView<Component, NodeEditor extends CoreEditor = CoreEdi
     component: Component;
     editor: NodeEditor;
     options: Options;
-    extension: Node;
-    node: ProseMirrorNode;
-    decorations: DecorationWithType[];
-    getPos: any;
+    extension: NodeViewRendererProps['extension'];
+    node: NodeViewRendererProps['node'];
+    decorations: NodeViewRendererProps['decorations'];
+    innerDecorations: NodeViewRendererProps['innerDecorations'];
+    view: NodeViewRendererProps['view'];
+    getPos: NodeViewRendererProps['getPos'];
+    HTMLAttributes: NodeViewRendererProps['HTMLAttributes'];
     isDragging: boolean;
     constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>);
     mount(): void;
@@ -22,10 +23,21 @@ export declare class NodeView<Component, NodeEditor extends CoreEditor = CoreEdi
     get contentDOM(): HTMLElement | null;
     onDragStart(event: DragEvent): void;
     stopEvent(event: Event): boolean;
+    /**
+     * 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: MutationRecord | {
         type: 'selection';
         target: Element;
     }): boolean;
-    updateAttributes(attributes: {}): void;
+    /**
+     * Update the attributes of the prosemirror node.
+     */
+    updateAttributes(attributes: Record<string, any>): void;
+    /**
+     * Delete the node.
+     */
     deleteNode(): void;
 }

package/dist/packages/core/src/index.d.ts

@@ -11,6 +11,8 @@ export * from './NodePos.js';
 export * from './NodeView.js';
 export * from './PasteRule.js';
 export * from './pasteRules/index.js';
+export * from './plugins/DropPlugin.js';
+export * from './plugins/PastePlugin.js';
 export * from './Tracker.js';
 export * from './types.js';
 export * from './utilities/index.js';

package/dist/packages/core/src/plugins/DropPlugin.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from '@tiptap/pm/state';
+import { Slice } from 'packages/pm/model';
+export declare const DropPlugin: (onDrop: (e: DragEvent, slice: Slice, moved: boolean) => void) => Plugin<any>;

package/dist/packages/core/src/plugins/PastePlugin.d.ts

@@ -0,0 +1,3 @@
+import { Slice } from '@tiptap/pm/model';
+import { Plugin } from '@tiptap/pm/state';
+export declare const PastePlugin: (onPaste: (e: ClipboardEvent, slice: Slice) => void) => Plugin<any>;

package/dist/packages/core/src/types.d.ts

@@ -1,6 +1,6 @@
-import { Mark as ProseMirrorMark, Node as ProseMirrorNode, NodeType, ParseOptions } from '@tiptap/pm/model';
+import { Mark as ProseMirrorMark, Node as ProseMirrorNode, NodeType, ParseOptions, Slice } from '@tiptap/pm/model';
 import { EditorState, Transaction } from '@tiptap/pm/state';
-import { Decoration, EditorProps, EditorView, NodeView } from '@tiptap/pm/view';
+import { Decoration, EditorProps, EditorView, NodeView, NodeViewConstructor } from '@tiptap/pm/view';
 import { Editor } from './Editor.js';
 import { Extension } from './Extension.js';
 import { Commands, ExtensionConfig, MarkConfig, NodeConfig } from './index.js';
@@ -79,7 +79,24 @@ export interface EditorOptions {
     };
     enableInputRules: EnableRules;
     enablePasteRules: EnableRules;
-    enableCoreExtensions: boolean;
+    /**
+     * Determines whether core extensions are enabled.
+     *
+     * If set to `false`, all core extensions will be disabled.
+     * To disable specific core extensions, provide an object where the keys are the extension names and the values are `false`.
+     * Extensions not listed in the object will remain enabled.
+     *
+     * @example
+     * // Disable all core extensions
+     * enabledCoreExtensions: false
+     *
+     * @example
+     * // Disable only the keymap core extension
+     * enabledCoreExtensions: { keymap: false }
+     *
+     * @default true
+     */
+    enableCoreExtensions?: boolean | Partial<Record<'editable' | 'clipboardTextSerializer' | 'commands' | 'focusEvents' | 'keymap' | 'tabindex', false>>;
     /**
      * If `true`, the editor will check the content for errors on initialization.
      * Emitting the `contentError` event if the content is invalid.
@@ -100,6 +117,8 @@ export interface EditorOptions {
     onFocus: (props: EditorEvents['focus']) => void;
     onBlur: (props: EditorEvents['blur']) => void;
     onDestroy: (props: EditorEvents['destroy']) => void;
+    onPaste: (e: ClipboardEvent, slice: Slice) => void;
+    onDrop: (e: DragEvent, slice: Slice, moved: boolean) => void;
 }
 export type HTMLContent = string;
 export type JSONContent = {
@@ -170,19 +189,18 @@ export type ValuesOf<T> = T[keyof T];
 export type KeysWithTypeOf<T, Type> = {
     [P in keyof T]: T[P] extends Type ? P : never;
 }[keyof T];
+export type Simplify<T> = {
+    [KeyType in keyof T]: T[KeyType];
+} & {};
 export type DecorationWithType = Decoration & {
     type: NodeType;
 };
-export type NodeViewProps = {
-    editor: Editor;
-    node: ProseMirrorNode;
-    decorations: DecorationWithType[];
+export type NodeViewProps = Simplify<Omit<NodeViewRendererProps, 'decorations'> & {
+    decorations: readonly DecorationWithType[];
     selected: boolean;
-    extension: Node;
-    getPos: () => number;
     updateAttributes: (attributes: Record<string, any>) => void;
     deleteNode: () => void;
-};
+}>;
 export interface NodeViewRendererOptions {
     stopEvent: ((props: {
         event: Event;
@@ -196,14 +214,16 @@ export interface NodeViewRendererOptions {
     contentDOMElementTag: string;
 }
 export type NodeViewRendererProps = {
+    node: Parameters<NodeViewConstructor>[0];
+    view: Parameters<NodeViewConstructor>[1];
+    getPos: () => number;
+    decorations: Parameters<NodeViewConstructor>[3];
+    innerDecorations: Parameters<NodeViewConstructor>[4];
     editor: Editor;
-    node: ProseMirrorNode;
-    getPos: (() => number) | boolean;
-    HTMLAttributes: Record<string, any>;
-    decorations: Decoration[];
     extension: Node;
+    HTMLAttributes: Record<string, any>;
 };
-export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView | {};
+export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView;
 export type AnyCommands = Record<string, (...args: any[]) => Command>;
 export type UnionCommands<T = Command> = UnionToIntersection<ValuesOf<Pick<Commands<T>, KeysWithTypeOf<Commands<T>, {}>>>>;
 export type RawCommands = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "2.6.6",
+  "version": "2.7.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -32,10 +32,10 @@
     "dist"
   ],
   "devDependencies": {
-    "@tiptap/pm": "^2.6.6"
+    "@tiptap/pm": "^2.7.0"
   },
   "peerDependencies": {
-    "@tiptap/pm": "^2.6.6"
+    "@tiptap/pm": "^2.7.0-pre.0"
   },
   "repository": {
     "type": "git",

package/src/Editor.ts

@@ -24,6 +24,8 @@ import { isActive } from './helpers/isActive.js'
 import { isNodeEmpty } from './helpers/isNodeEmpty.js'
 import { resolveFocusPosition } from './helpers/resolveFocusPosition.js'
 import { NodePos } from './NodePos.js'
+import { DropPlugin } from './plugins/DropPlugin.js'
+import { PastePlugin } from './plugins/PastePlugin.js'
 import { style } from './style.js'
 import {
   CanCommands,
@@ -88,6 +90,8 @@ export class Editor extends EventEmitter<EditorEvents> {
     onBlur: () => null,
     onDestroy: () => null,
     onContentError: ({ error }) => { throw error },
+    onPaste: () => null,
+    onDrop: () => null,
   }
 
   constructor(options: Partial<EditorOptions> = {}) {
@@ -109,6 +113,14 @@ export class Editor extends EventEmitter<EditorEvents> {
     this.on('blur', this.options.onBlur)
     this.on('destroy', this.options.onDestroy)
 
+    if (this.options.onPaste) {
+      this.registerPlugin(PastePlugin(this.options.onPaste))
+    }
+
+    if (this.options.onDrop) {
+      this.registerPlugin(DropPlugin(this.options.onDrop))
+    }
+
     window.setTimeout(() => {
       if (this.isDestroyed) {
         return
@@ -261,7 +273,12 @@ export class Editor extends EventEmitter<EditorEvents> {
       FocusEvents,
       Keymap,
       Tabindex,
-    ] : []
+    ].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)
     })

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'
@@ -288,21 +288,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/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 { 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)
@@ -197,6 +209,11 @@ export class NodeView<
     return true
   }
 
+  /**
+   * 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: MutationRecord | { type: 'selection'; target: Element }) {
     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 })

package/src/commands/toggleNode.ts

@@ -28,9 +28,18 @@ export const toggleNode: RawCommands['toggleNode'] = (typeOrName, toggleTypeOrNa
   const toggleType = getNodeType(toggleTypeOrName, state.schema)
   const isActive = isNodeActive(state, type, attributes)
 
+  let attributesToCopy: Record<string, any> | undefined
+
+  if (state.selection.$anchor.sameParent(state.selection.$head)) {
+    // only copy attributes if the selection is pointing to a node of the same type
+    attributesToCopy = state.selection.$anchor.parent.attrs
+  }
+
   if (isActive) {
-    return commands.setNode(toggleType)
+    return commands.setNode(toggleType, attributesToCopy)
   }
 
-  return commands.setNode(type, attributes)
+  // If the node is not active, we want to set the new node type with the given attributes
+  // Copying over the attributes from the current node if the selection is pointing to a node of the same type
+  return commands.setNode(type, { ...attributesToCopy, ...attributes })
 }

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/index.ts

@@ -11,6 +11,8 @@ export * from './NodePos.js'
 export * from './NodeView.js'
 export * from './PasteRule.js'
 export * from './pasteRules/index.js'
+export * from './plugins/DropPlugin.js'
+export * from './plugins/PastePlugin.js'
 export * from './Tracker.js'
 export * from './types.js'
 export * from './utilities/index.js'

package/src/plugins/DropPlugin.ts

@@ -0,0 +1,14 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Slice } from 'packages/pm/model'
+
+export const DropPlugin = (onDrop: (e: DragEvent, slice: Slice, moved: boolean) => void) => {
+  return new Plugin({
+    key: new PluginKey('tiptapDrop'),
+
+    props: {
+      handleDrop: (_, e, slice, moved) => {
+        onDrop(e, slice, moved)
+      },
+    },
+  })
+}

package/src/plugins/PastePlugin.ts

@@ -0,0 +1,14 @@
+import { Slice } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+export const PastePlugin = (onPaste: (e: ClipboardEvent, slice: Slice) => void) => {
+  return new Plugin({
+    key: new PluginKey('tiptapPaste'),
+
+    props: {
+      handlePaste: (_view, e, slice) => {
+        onPaste(e, slice)
+      },
+    },
+  })
+}

package/src/types.ts

@@ -3,10 +3,15 @@ import {
   Node as ProseMirrorNode,
   NodeType,
   ParseOptions,
+  Slice,
 } from '@tiptap/pm/model'
 import { EditorState, Transaction } from '@tiptap/pm/state'
 import {
-  Decoration, EditorProps, EditorView, NodeView,
+  Decoration,
+  EditorProps,
+  EditorView,
+  NodeView,
+  NodeViewConstructor,
 } from '@tiptap/pm/view'
 
 import { Editor } from './Editor.js'
@@ -79,7 +84,24 @@ export interface EditorOptions {
   };
   enableInputRules: EnableRules;
   enablePasteRules: EnableRules;
-  enableCoreExtensions: boolean;
+  /**
+   * Determines whether core extensions are enabled.
+   *
+   * If set to `false`, all core extensions will be disabled.
+   * To disable specific core extensions, provide an object where the keys are the extension names and the values are `false`.
+   * Extensions not listed in the object will remain enabled.
+   *
+   * @example
+   * // Disable all core extensions
+   * enabledCoreExtensions: false
+   *
+   * @example
+   * // Disable only the keymap core extension
+   * enabledCoreExtensions: { keymap: false }
+   *
+   * @default true
+   */
+  enableCoreExtensions?: boolean | Partial<Record<'editable' | 'clipboardTextSerializer' | 'commands' | 'focusEvents' | 'keymap' | 'tabindex', false>>;
   /**
    * If `true`, the editor will check the content for errors on initialization.
    * Emitting the `contentError` event if the content is invalid.
@@ -100,6 +122,8 @@ export interface EditorOptions {
   onFocus: (props: EditorEvents['focus']) => void;
   onBlur: (props: EditorEvents['blur']) => void;
   onDestroy: (props: EditorEvents['destroy']) => void;
+  onPaste: (e: ClipboardEvent, slice: Slice) => void
+  onDrop: (e: DragEvent, slice: Slice, moved: boolean) => void
 }
 
 export type HTMLContent = string;
@@ -184,20 +208,21 @@ export type ValuesOf<T> = T[keyof T];
 
 export type KeysWithTypeOf<T, Type> = { [P in keyof T]: T[P] extends Type ? P : never }[keyof T];
 
+export type Simplify<T> = { [KeyType in keyof T]: T[KeyType] } & {};
+
 export type DecorationWithType = Decoration & {
   type: NodeType;
 };
 
-export type NodeViewProps = {
-  editor: Editor;
-  node: ProseMirrorNode;
-  decorations: DecorationWithType[];
-  selected: boolean;
-  extension: Node;
-  getPos: () => number;
-  updateAttributes: (attributes: Record<string, any>) => void;
-  deleteNode: () => void;
-};
+export type NodeViewProps = Simplify<
+  Omit<NodeViewRendererProps, 'decorations'> & {
+    // TODO this type is not technically correct, but it's the best we can do for now since prosemirror doesn't expose the type of decorations
+    decorations: readonly DecorationWithType[];
+    selected: boolean;
+    updateAttributes: (attributes: Record<string, any>) => void;
+    deleteNode: () => void;
+  }
+>;
 
 export interface NodeViewRendererOptions {
   stopEvent: ((props: { event: Event }) => boolean) | null;
@@ -208,15 +233,19 @@ export interface NodeViewRendererOptions {
 }
 
 export type NodeViewRendererProps = {
+  // pass-through from prosemirror
+  node: Parameters<NodeViewConstructor>[0];
+  view: Parameters<NodeViewConstructor>[1];
+  getPos: () => number; // TODO getPos was incorrectly typed before, change to `Parameters<NodeViewConstructor>[2];` in the next major version
+  decorations: Parameters<NodeViewConstructor>[3];
+  innerDecorations: Parameters<NodeViewConstructor>[4];
+  // tiptap-specific
   editor: Editor;
-  node: ProseMirrorNode;
-  getPos: (() => number) | boolean;
-  HTMLAttributes: Record<string, any>;
-  decorations: Decoration[];
   extension: Node;
+  HTMLAttributes: Record<string, any>;
 };
 
-export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView | {};
+export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView;
 
 export type AnyCommands = Record<string, (...args: any[]) => Command>;
 

package/src/utilities/mergeAttributes.ts

@@ -23,7 +23,24 @@ export function mergeAttributes(...objects: Record<string, any>[]): Record<strin
 
           mergedAttributes[key] = [...existingClasses, ...insertClasses].join(' ')
         } else if (key === 'style') {
-          mergedAttributes[key] = [mergedAttributes[key], value].join('; ')
+          const newStyles: string[] = value ? value.split(';').map((style: string) => style.trim()).filter(Boolean) : []
+          const existingStyles: string[] = mergedAttributes[key] ? mergedAttributes[key].split(';').map((style: string) => style.trim()).filter(Boolean) : []
+
+          const styleMap = new Map<string, string>()
+
+          existingStyles.forEach(style => {
+            const [property, val] = style.split(':').map(part => part.trim())
+
+            styleMap.set(property, val)
+          })
+
+          newStyles.forEach(style => {
+            const [property, val] = style.split(':').map(part => part.trim())
+
+            styleMap.set(property, val)
+          })
+
+          mergedAttributes[key] = Array.from(styleMap.entries()).map(([property, val]) => `${property}: ${val}`).join('; ')
         } else {
           mergedAttributes[key] = value
         }