add basic drop support for images

packages/tiptap-extensions/src/nodes/Image.js

@@ -1,4 +1,4 @@
-import { Node } from 'tiptap'
+import { Node, Plugin } from 'tiptap'
 
 export default class ImageNode extends Node {
 
@@ -34,4 +34,50 @@ export default class ImageNode extends Node {
 		}
 	}
 
+	get plugins() {
+		return [
+			new Plugin({
+				props: {
+					handleDOMEvents: {
+						drop(view, event) {
+							event.preventDefault()
+
+							const hasFiles = event.dataTransfer
+								&& event.dataTransfer.files
+								&& event.dataTransfer.files.length
+
+							if (!hasFiles) {
+								return
+							}
+
+							const images = [...event.dataTransfer.files]
+								.filter(file => (/image/i).test(file.type))
+
+							if (images.length === 0) {
+								return
+							}
+
+							const { schema } = view.state
+							const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY })
+
+							images.forEach(image => {
+								const reader = new FileReader()
+
+								reader.onload = readerEvent => {
+									const node = schema.nodes.image.create({
+										src: readerEvent.target.result,
+									})
+									const transaction = view.state.tr.insert(coordinates.pos, node)
+									view.dispatch(transaction)
+								}
+								reader.readAsDataURL(image)
+							})
+
+						},
+					},
+				},
+			}),
+		]
+	}
+
 }

packages/tiptap/src/index.js

@@ -2,3 +2,4 @@ export { default as Editor } from './components/editor'
 export { default as Extension } from './utils/extension'
 export { default as Node } from './utils/node'
 export { default as Mark } from './utils/mark'
+export { default as Plugin } from './utils/plugin'

packages/tiptap/src/utils/plugin.js

@@ -0,0 +1,3 @@
+import { Plugin } from 'prosemirror-state'
+
+export default Plugin