fix(core): drop/paste event as Extensions #5681 (#5684)

packages/core/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'
@@ -24,8 +25,6 @@ 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,
@@ -112,14 +111,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)
-
-    if (this.options.onPaste) {
-      this.registerPlugin(PastePlugin(this.options.onPaste))
-    }
-
-    if (this.options.onDrop) {
-      this.registerPlugin(DropPlugin(this.options.onDrop))
-    }
+    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) {
@@ -279,6 +272,8 @@ 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

packages/core/src/extensions/drop.ts

@@ -0,0 +1,26 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+import { Extension } from '../Extension.js'
+
+export const Drop = Extension.create({
+  name: 'drop',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('tiptapDrop'),
+
+        props: {
+          handleDrop: (_, e, slice, moved) => {
+            this.editor.emit('drop', {
+              editor: this.editor,
+              event: e,
+              slice,
+              moved,
+            })
+          },
+        },
+      }),
+    ]
+  },
+})

packages/core/src/extensions/index.ts

@@ -1,6 +1,8 @@
 export { ClipboardTextSerializer } from './clipboardTextSerializer.js'
 export { Commands } from './commands.js'
+export { Drop } from './drop.js'
 export { Editable } from './editable.js'
 export { FocusEvents } from './focusEvents.js'
 export { Keymap } from './keymap.js'
+export { Paste } from './paste.js'
 export { Tabindex } from './tabindex.js'

packages/core/src/extensions/paste.ts

@@ -0,0 +1,26 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+import { Extension } from '../Extension.js'
+
+export const Paste = Extension.create({
+  name: 'paste',
+
+  addProseMirrorPlugins() {
+
+    return [
+      new Plugin({
+        key: new PluginKey('tiptapPaste'),
+
+        props: {
+          handlePaste: (_view, e, slice) => {
+            this.editor.emit('paste', {
+              editor: this.editor,
+              event: e,
+              slice,
+            })
+          },
+        },
+      }),
+    ]
+  },
+})

packages/core/src/index.ts

@@ -11,8 +11,6 @@ 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'

packages/core/src/plugins/DropPlugin.ts

@@ -1,14 +0,0 @@
-import { Slice } from '@tiptap/pm/model'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
-
-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)
-      },
-    },
-  })
-}

packages/core/src/plugins/PastePlugin.ts

@@ -1,14 +0,0 @@
-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)
-      },
-    },
-  })
-}

packages/core/src/types.ts

@@ -63,6 +63,8 @@ export interface EditorEvents {
   focus: { editor: Editor; event: FocusEvent; transaction: Transaction };
   blur: { editor: Editor; event: FocusEvent; transaction: Transaction };
   destroy: void;
+  paste: { editor: Editor; event: ClipboardEvent; slice: Slice };
+  drop: { editor: Editor; event: DragEvent; slice: Slice; moved: boolean };
 }
 
 export type EnableRules = (AnyExtension | string)[] | boolean;
@@ -110,7 +112,9 @@ export interface EditorOptions {
           | 'commands'
           | 'focusEvents'
           | 'keymap'
-          | 'tabindex',
+          | 'tabindex'
+          | 'drop'
+          | 'paste',
           false
         >
       >;