diff --git a/packages/tiptap-extensions/src/nodes/Image.js b/packages/tiptap-extensions/src/nodes/Image.js index 07066422..4d985c68 100644 --- a/packages/tiptap-extensions/src/nodes/Image.js +++ b/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) + }) + + }, + }, + }, + }), + ] + } + } diff --git a/packages/tiptap/src/index.js b/packages/tiptap/src/index.js index 47c1fa3f..49281527 100644 --- a/packages/tiptap/src/index.js +++ b/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' diff --git a/packages/tiptap/src/utils/plugin.js b/packages/tiptap/src/utils/plugin.js new file mode 100644 index 00000000..61f42341 --- /dev/null +++ b/packages/tiptap/src/utils/plugin.js @@ -0,0 +1,3 @@ +import { Plugin } from 'prosemirror-state' + +export default Plugin