Preventing pasted text from being inserted into the textarea?

[jmuheim]

Besides using paste.js for pasting images to textareas, I also use it to react on pasted strings that have a specific format.

E.g., when pasting a codepen url like https://codepen.io/jmuheim/pen/KmKOZO, I don't want to insert this exact string into the textarea, but a markdown link to it, like this: [CodePen.io](https://codepen.io/jmuheim/pen/KmKOZO).

For this, I need to prevent the original string being inserted into the textarea. How can this be achieved?

[jmuheim]

Any news on this? This would be really important for my project.

Thanks. 👍

[jmuheim]

I'm sorry to stress you, but this minor thing is preventing a big user story from being merged into my project. Could you please give at least a statement whether this is possible, or whether I have to find a workaround?

[jmuheim]

I tried ev.preventDefault(), ev.stopPropagation(), returning false and null, but nothing prevented the text from being inserted.

[layerssss]

Hi @jmuheim sorry I've been super non-efficient on this project recently. Can you try stopImmediatePropagation(https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation), that's preventing an event propagating from the same DOM object. (while stopProgapagtion is preventing that from ancestries / descendants)

Also try swapping the order of the event handling order (I've always being having trouble remembering them)

[layerssss]

@jmuheim Oops sorry, try handle that in the paste events

$('textarea').on('paste', ev => {
 ev.preventDefault(); // this might stop default behaviour of inserting text
ev.stopImmediatePropagation(); // this will stop paste.js code from being fired
});

Those two combined at the same time.

[layerssss]

Ideally we should not insert text when isDefaultPrevented is true, in paste.js. 😅 But the above (handling paste event) can be a workaround / quickfix.

[jmuheim]

Thank you for answering. 👍

I tried it like this:

    @$input.on('pasteImage', (ev, pastedData) =>
      ...
    ).on('pasteText', (ev, pastedData) =>
      ...
    ).on('paste', (ev) =>
      ev.preventDefault()
    )

This basically works, but it makes pasting text in general impossible. I only want to prevent default when text in a certain format is pasted (a CodePen URL). Also, this seems to interact with the text editing history in some way, and makes undoing/redoing a pain (at least in Chrome on OSX).

I'm really no big JS expert, but the proposed solution with isDefaultPrevented really sounds like the way to go for me.

[layerssss]

You are right, when isDefaultPrevented is handled in paste.js, you will be able to do it like:

    @$input.on('pasteImage', (ev, pastedData) =>
      ...
    ).on('pasteText', (ev, pastedData) =>
      if (pastedData.match(/codepen\.io/)) {
         ev.preventDefault(); // this doesn't work at this moment.
         // insert the markdown link
      }
    );

But in the meantime you can try replacing that string (pastedData) to workaround it. Also getting the position of cursor in the textarea by $(textarea).prop('selectionStart') might be helpful to insert generated markdown link.

[jmuheim]

Thank you, I indeed managed to create a workaround by replacing the originally pasted string like this:

@$input.on('pasteImage', (ev, pastedData) =>
  new ImagePaster(@$input, pastedData)
).on('pasteText', (ev, pastedData) =>
  if match = pastedData.text.match(/https:\/\/codepen.io\/(.+)\/pen\/(.+)/)
    new CodePaster(@$input, match)

    # Doesn't work at the time being, see https://github.com/layerssss/paste.js/issues/45
    ev.preventDefault()

    # ...so we need this workaround:
    caretPosition = @$input.caret()
    @$input.val(@$input.val().replace(pastedData.text, ''))
    @$input.caret(caretPosition - pastedData.text.length)
)

This is okay at the time being. But it would be great if ev.preventDefault() would work with paste.js. 👍