froala / angular-froala-wysiwyg

Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
https://froala.com/wysiwyg-editor
734 stars 201 forks source link

Pasting code snipped removes line breaks and replaces them with non-breaking space #499

Open SkiBum326 opened 2 years ago

SkiBum326 commented 2 years ago

Expected behavior. If I copy code from a code editor (VS Code for example), I'm expecting the formatting (spacing, indentation, newlines) to be preserved.

Actual behavior. Pasting the code into Froala loses the newlines. In particular, it appears that a newline is replaced with a &nbsp.

Sample pasted code viewed in Froala HTML:

include #include

Steps to reproduce the problem. Copy a multi-line code snippet from VS Code or another code editor Paste into Froala Editor version. 4.0.10 for Angular / Typescript

bellasimi commented 7 months ago

I used regular expressions to replace the problematic'/&nbsp;&nbsp;' with '<br/>' for line breaks.

Froalaeditor.RegisterCommand("codeBlock", {
  title: "codeBlock",
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    this.html.set(
      this.html.get().replace(/&nbsp;&nbsp;/g, "<br/>&nbsp;&nbsp;"),
    );
  },
});

when you select pasted vs code, and click codeBlock buttton, then it replace well like below image.

image