feat: markdown pasting & custom paste handlers #1490
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Great stuff!
What do you think about making this pluggable? i.e.: you could register a paste handler / preprocessor, and our "default preprocessor" changes the mimetype to text/markdown if we think it's a better fit.
(just realized; we actually also have a client requesting Event listeners for "paste" events so we can do our own manipulation before inserting into the document)
packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts
Outdated
Show resolved
Hide resolved
packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts
Outdated
Show resolved
Hide resolved
packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts
Outdated
Show resolved
Hide resolved
| @@ -0,0 +1,60 @@ | |||
| // Headings H1-H6. | |||
There was a problem hiding this comment.
curious how many false positives we get. I didn't review the regexpes obviously.
Figured this might be useful: https://chatgpt.com/share/67d12910-3d78-8009-8bc0-ddd23dd7cba9
| defaultPasteHandler: (context: { | ||
| pasteBehavior?: "prefer-markdown" | "prefer-html"; | ||
| }) => boolean | undefined; | ||
| convertHtmlToBlockNoteHtml: (html: string) => string; |
There was a problem hiding this comment.
API feedback:
- what about exposing
pasteHTMLpasteMarkdownandpasteTexton the editor instead of the conversion functions? this way consumers also don't need to call into prosemirrorview.paste...functions. - I'm not sure I like passing the
defaultPasteHandlervs exporting that function directly (still in doubt)
There was a problem hiding this comment.
- I like exposing the methods, to keep it simple for users, I exposed pasteHTML, pasteText & pasteMarkdown methods
- I think having too many things exposed on a top-level API make it hard for discoverability, this function would only be useful for pasting content, so it makes sense to expose on the handler you'd use it at.
packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts
Outdated
Show resolved
Hide resolved
| return true; | ||
| } | ||
|
|
||
| if (pasteBehavior === "prefer-markdown" && isMarkdown(data)) { |
There was a problem hiding this comment.
I'm not sure if this single flag is what we want. We now always turn on "detection" and for both markdown and HTML. is that desirable?
Other options I can think of what the user might want:
- always paste plain text as markdown (i.e.: paste markdown instead of plain text at L103), regardless of detection
- Only run the detection for plain text, not for HTML (i.e.: always prefer regular HTML paste)?
- (Other combinations like only run the detection for HTML, not for plain text. Not sure if that makes sense)
Happy to think this through together. I don't think we need all options to be possible via different flags, especially since users can now add their own paste handlers. But I do think there should at least be a way to not rely on the auto-detection yet still paste text as markdown
There was a problem hiding this comment.
I refactored it to make it clearer how it was being used, if prefer-markdown is used, it will try to use the plaintext version if it can, otherwise it falls back to the previous behavior.
nperez0111
changed the title
|
@nperez0111 didn't review yet; but I just noticed (working on sth unrelated) that actually inline content markdown gets parsed. try pasting |
Bold already has a paste rule set up. As well as a number of other Tiptap extensions. What does not work (in blocknote) though would be things across paragraphs or code blocks for example |
| @@ -0,0 +1,59 @@ | |||
| --- | |||
There was a problem hiding this comment.
needs to be added to sidebar
There was a problem hiding this comment.
I think it is in the sidebar?
| }), | ||
| ]); | ||
| } catch (error) { | ||
| window.alert("Failed to copy multiple formats"); |
There was a problem hiding this comment.
I'm getting this error when I click this button :/
There was a problem hiding this comment.
Not supported by most browsers, but works in Safari. I marked as such
packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts
Outdated
Show resolved
Hide resolved
This implements markdown pasting, and custom paste handlers.
Adds
editor.pasteTextwhich will paste text content into the editoreditor.pasteHTMLwhich will convert HTML into BlockNote HTML and then paste that into the editoreditor.pasteMarkdownwhich will convert the markdown into BlockNote HTML and then paste that into the editoreditorOptions.pasteHandlerfor allowing the developer the ability to customize how content is pasted into the editor while still allowing the default paste behavior.