Codemirror Duplication when pasting

Question

I am using EasyMDE, which is built on top of CodeMirror, for a Markdown editor in my project. I'm facing an issue where the content gets duplicated when pasting into the editor.

Here's the scenario:

1. I have implemented a custom handlePaste function to handle paste events.
2. This function processes the clipboard data, converts it to Markdown using TurndownService, and then tries to insert it into the editor using this.codemirror.replaceSelection(markdown);.
3. However, I end up with the pasted content appearing twice: once in its original form and once in its Markdown-converted form, despite using event.preventDefault() to stop the default pasting behavior.

Here's a snippet of my code for reference:

I'm looking for insights on why this duplication happens and how to fix it. Below is the relevant part of my code:

function handlePaste(event) {
  event.preventDefault();
  const clipboardData = event.clipboardData || window.clipboardData;
  const pastedData = clipboardData.getData("text/html");
  const markdown = turndownService.turndown(pastedData);
  this.codemirror.replaceSelection(markdown);
}

Thanks in advance for your help!

I've tried various methods like replaceRange and setValue alongside replaceSelection for handling paste events. While replaceRange resulted in the same duplication issue, setValue replaced the entire content, which is not desirable. I used console.log(this.codemirror.getValue()); before and after the paste action. It showed the content being duplicated: the pasted content first appeared in its original form and then in Markdown, despite using event.preventDefault(). These tests and methods haven’t met my needs because I'm looking to paste only the Markdown-converted content without duplication, maintaining the existing content.

Answer 1

After further investigation and with insights from the community, I discovered the solution to the content duplication issue when pasting in EasyMDE/CodeMirror. The key was to adjust the event listener for the paste event. Here’s the corrected approach:

before:

    mde.codemirror.getWrapperElement().addEventListener(
      "paste",
      function handlePaste(event) {
        event.preventDefault();
        const clipboardData = event.clipboardData || window.clipboardData;
        const pastedData = clipboardData.getData("text/html");
        const markdown = turndownService.turndown(pastedData);
        this.codemirror.replaceSelection(markdown);
      }.bind(mde)
    );

after:

  mde.codemirror.on("paste", function (codemirror, event) {
event.preventDefault();
const clipboardData = event.clipboardData || window.clipboardData;
const pastedData = clipboardData.getData("text/html");
const markdown = turndownService.turndown(pastedData);
this.codemirror.replaceSelection(markdown);

This setup ensures that the default paste behavior is prevented, and the custom logic is applied correctly. Hope this helps anyone facing a similar issue!"