feature(core): add onPaste and onDrop events to editor #4843
Conversation
✅ Deploy Preview for tiptap-embed ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
|
||
| export const DropPlugin = (onPaste: (e: DragEvent) => void) => { | ||
| return new Plugin({ | ||
| key: new PluginKey('tiptap__drop'), |
There was a problem hiding this comment.
Maybe keep this in lowerCamelCase (tiptapDrop), like we do in other plugins?
There was a problem hiding this comment.
Or maybe call it dropEvent, analog to focusEvents?
There was a problem hiding this comment.
how about tiptap__dropEvent - I'm using the tiptap__ prefix to make sure to never accidentially conflict with other pluginKeys
There was a problem hiding this comment.
PluginKeys are symbols by default no? So this should only ever exist once.
|
|
||
| export const PastePlugin = (onPaste: (e: ClipboardEvent) => void) => { | ||
| return new Plugin({ | ||
| key: new PluginKey('tiptap__paste'), |
There was a problem hiding this comment.
how about tiptap__pasteEvent - I'm using the tiptap__ prefix to make sure to never accidentially conflict with other pluginKeys
| @@ -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' | |||
There was a problem hiding this comment.
Should we keep it in extensions folder, just like extensions/focusEvents.ts?
There was a problem hiding this comment.
Oh, I just realized focusEvents is a wrapped plugin (as a Tiptap extension). But maybe we keep it the same style?
|
|
||
| props: { | ||
| handleDrop: (_, e) => { | ||
| onPaste(e) |
There was a problem hiding this comment.
| onPaste(e) | |
| onDrop(e) |
Please describe your changes
This message on our Discord server made me realize that there's apparently no easy way to just add a simple paste or drag event handler to the actual editor instance. This user tried to add it to the editors DOM element which works sometimes (doesn't work properly if there's no content inside the contenteditable yet).
How did you accomplish your changes
I created two very simple plugins to handle paste and drop events passing up their relative events to the option passed through.
Those can be configured on the editor constructor.
How have you tested your changes
I tried to add
onPasteandonDropon a local demo.How can we verify your changes
See above
Remarks
No remarks from my side
Checklist
Related issues
No related issues