Pasting sometimes adds `id="isPasted"`

[dcsaszar]

Expected behavior.

id="isPasted" is removed from the HTML, or there is a way to remove it, e.g. with editor.html.get().

Actual behavior.

After pasting, there is id="isPasted"

Steps to reproduce the problem.

• insert some italic text
• copy and paste that text
• view source

https://jsfiddle.net/ugter8dh/2

Editor version.

4.0.5

OS.

macOS 10.15.7

Browser.

Chrome 93.0.4577.63

Recording.

[Reforced]

Issue still present in version 4.0.6. Breaks HTML validity as multiple id's (id="isPasted") are present depending on how many times is being copy-pasted in the editor.

[Reforced]

I've created a work-around; if you add the event below to the Froala configuration, it will remove all instances of id="isPasted".

events: {
    'html.get': function (html) {
        return html.replace(/id="isPasted"/g,'');
    }
}

[MeghashreeAP]

Thank you for your feedback. The request has been reported to the product management team for evaluation and consideration for an upcoming release.

[chrisvanderkooi]

Wanted to throw my workaround in here for anyone it may help:

I found that the html.get event was not updating the editor html contents when returning a string. I ended up using the paste.after event. Once a paste of content occurred, paste.after is the last event to fire. In this event I would get the editor contents html.get(false) (because the html now has the "isPasted" ID in it), then doing my work to the html string and then set the new cleaned up html back into the editor, html.set(cleanedHtml).

Thanks for your solution @Reforced

[pezillionaire]

Yeah. This needs to be addressed…

[offlead]

This is still happening. The duplicate IDs are flagged in validators and accessibility testers.

[strokirk]

Problem still occurs in version 4.0.16.

For anyone wanting a solution, I've written up this small plugin - hope it helps someone:

FroalaEditor.PLUGINS['fixPasteBug'] = function (editor) {
  // Fix froala adding `id="isPasted"` to pasted content, potentially causing accessibility issues
  // See: https://github.com/froala/wysiwyg-editor/issues/4328
  return {
    _init() {
      editor.events.on('paste.after', () => {
        const t = document.createElement('template')
        t.innerHTML = editor.html.get()
        const offender = t.content.querySelector('#isPasted')
        if (offender) {
          editor.selection.save()
          offender.removeAttribute('id')
          editor.html.set(t.innerHTML)
          editor.selection.restore()
        }
      })
    },
  }
}

[rsumibcay-rdi]

Thank you strokirk. With your posted solution, we are seeing that the cursor moves to the beginning of the WYSIWYG text box after the text is pasted instead of being placed after the pasted text. Do you have a suggestion for resolving that?

[NevilleDubuis]

Hi @rsumibcay-rdi

maybe you've alredy found the solution for this, but just in case (and if it help other) here is what i've done to keep the cursor position (it was just a little modification the code provided by @strokirk) :

FroalaEditor.PLUGINS['fixPasteBug'] = function (editor) {
   // Fix froala adding `id="isPasted"` to pasted content, potentially causing accessibility issues
   // See: https://github.com/froala/wysiwyg-editor/issues/4328
   return {
     _init() {
       editor.events.on('paste.after', () => {
         editor.selection.save()
         const t = document.createElement('template')
         t.innerHTML = editor.html.get(true)
         const offender = t.content.querySelector('#isPasted')
         if (offender) {
           offender.removeAttribute('id')
           editor.html.set(t.innerHTML)
           editor.selection.restore()
         }
       })
     },
   }
 }

[johnnyoshika]

I had to modify @NevilleDubuis's code slightly to always call editor.selection.restore() otherwise onModelChange wouldn't trigger on paste:

FroalaEditor.PLUGINS['fixPasteBug'] = function (editor: any) {
  // Fix froala's `id="isPasted"` being added during paste event, potentially causing accessibility and duplicate render issues.
  // https://github.com/froala/wysiwyg-editor/issues/4328
  return {
    _init() {
      editor.events.on('paste.after', () => {
        editor.selection.save();
        const t = document.createElement('template');
        t.innerHTML = editor.html.get(true);
        const offender = t.content.querySelector('#isPasted');
        if (offender) {
          offender.removeAttribute('id');
          editor.html.set(t.innerHTML);
        }
        // restore is required after calling editor.selection.save(), otherwise onModelChange won't trigger
        editor.selection.restore();
      });
    },
  };
};

[CedricHg]

This is still bugged in the current version.