Support converting pasted markdown content / Paste Markdown feedback.

[mlewand]

[UPDATE] We have implemented the Paste Markdown feature, which is currently in the experimental phase. Please be aware that bugs may occur, and it is not recommended for use in production environments.

We keep this issue open to gather the feedback for the potential production release of this feature.

---

If you'd like to see this feature implemented, add 👍 to this post.

[bhayward93]

Hey, do you have any idea when this feature may be released?

[ottman]

This feature is actually really essential for enabling bloggers to migrate their content to platforms using ckeditor. Any way we can escalate?

[AliBayat]

according to documentations, ckeditor-autoformat does the formating as you type into the editor.. there should be some way we can listen for the paste event and do a whole reformatting on the pasted contents

[dcblogdev]

It would be great for have support for pasted markdown, this is planned?

[wimleers]

Since this was opened, CKEditor 5 gained a "Source" plugin. Why not just enable that, expect the user to switch to the Source view, paste there, toggle back? That actually works fine at https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html!

I think this arguably can be closed, or at best is a very low priority.

[Witoso]

Thanks, @wimleers, I think we will keep it open to gather interest. I can imagine someone wants to paste the markdown and see the HTML source 😅.

[dcblogdev]

I'd be happy to use the source button to see the HTML. But the main issue is being able to paste Markdown and have it rendered as Markdown.

[kevinquillen]

CKEditor 5 gained a "Source" plugin. Why not just enable that, expect the user to switch to the Source view, paste there, toggle back?

This assumes all formats have the Source button enabled, but isn't good UX for the user even if present, I think.

One area I was hoping to leverage this was with API integrations, specifically AI in this case. It will return items formatted as Markdown to me, but since pasted text is not supported, this is the result:

[Witoso]

@kevinquillen interesting use case! @scofalik do we have some way to stream the response through the markdown data pipeline so that it will be rendered properly?

[kevinquillen]

Yes, see the example here:

https://jetpack.com/blog/introducing-jetpack-ai-assistant/

I assume this is the approach they had. Markdown is an order of magnitude smaller than HTML in a payload (where length costs money) and easier for CKEditor to work with in this context. Stitching together HTML from a chunked response doesn't work too well.

Anyway, I think that if it could apply itself on write, it would work. When the response is streamed in, it updates CKEditor like so:

const text = new TextDecoder().decode(value);

// code omitted...

editor.model.insertContent(
  writer.createText(text)
);

text could be anywhere from 1 to 6 characters depending on what the API is returning (its keeping a connection alive until there is no more input to read from the server). To CKEditor, I would think it looks like a user typing, so it should be able to support this. Although I am not sure if the insertContent bit is correct or not, I picked this up from the docs.

[martnpaneq]

internal notes

I've prepared a PoC for this feature on a branch: 4dce8d9

It probably does not meet all of the corner cases yet, but it seems to be working for simple markdown copy and paste cases that I tested.

[martnpaneq]

internal notes

The first version handled markdown code copied from any text editor, but did not transform any markdown copied from a website, e.g. a GitHub issue description.
There's a new version of the POC that handles pasting simple markdown copied from a website on Windows, Linux and Mac.

We went through the currently available solutions, and this is something we came up with:
aeb964e

[Witoso]

A question to everyone interested in this feature, from which tools do you copy the markdown to paste it into the editor?

[DvzH]

Hello @Witoso, @niegowski, @martnpaneq

I have a scenario, where I would like to support copy-pasting markdown content into EDITOR. However, I always want the output of the editor to be in the HTML format. I am assuming that the current plugin support inputing and outputing only in markdown format.

Also, if it supports I would like to know how to add the plugin to the online-build generated from online ckeditor tool.
Currently, adding the plugin as mentioned in the tutorial is throwing me duplicate module errors

[Witoso]

@DvzH this is precisely what experimental Paste Markdown is doing. It works in HTML and Markdown editor. 

> Also, if it supports I would like to know how to add the plugin to the online-build generated from online ckeditor tool.

It's still experimental, that's why it's not added there yet. Make sure you install the package in the online builder folder, add the plugin to list in the src/ckeditor.ts, and rebuild.

[DvzH]

@DvzH this is precisely what experimental Paste Markdown is doing. It works in HTML and Markdown editor. 

Also, if it supports I would like to know how to add the plugin to the online-build generated from online ckeditor tool.

It's still experimental, that's why it's not added there yet. Make sure you install the package in the online builder folder, add the plugin to list in the src/ckeditor.ts, and rebuild.

Thank you @Witoso for the information, As a workaround what I did is, I used marked library to convert the markdown to html string format then used it to initiate the editor. However, will try the approach u mentioned and will see how it goes.

[mabryl]

At the moment, when using the PasteFromMarkdownExperimental functionality in combination with AutoMediaEmbed, the pasted media link will not be automatically embedded. The issue is reproducible only when using Paste Markdown.

[Witoso]

Let's keep this issue open for gathering feedback.