# Non-breaking spaces being added to pasted HTML

**URL:** <https://discuss.prosemirror.net/t/non-breaking-spaces-being-added-to-pasted-html/3911>\
**Category:** Uncategorized\
**Created:** [July 20, 2021, 5:38pm UTC](https://discuss.prosemirror.net/t/non-breaking-spaces-being-added-to-pasted-html/3911 "2021-07-20T17:38:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![remeike](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/remeike/32/2249_2.png) [@remeike](https://discuss.prosemirror.net/u/remeike)\
**Post date:** [July 20, 2021, 5:38pm UTC](https://discuss.prosemirror.net/t/non-breaking-spaces-being-added-to-pasted-html/3911/1 "2021-07-20T17:38:26Z")

</div>

I’ve noticed recently that whenever I copy/paste HTML into my editor, text nodes with marks render with non-breaking spaces on either side of the element. So if I’m pasting in a paragraph with italic text, it renders as follows:

```auto
<p>Lorem ipsum dolor sit amet,&nbsp;<em>consectetur adipiscing</em>&nbsp;elit.</p>

```

Initially I assumed it might have been something in my code causing this but then I looked at one of the examples on the ProseMirror site and it seems to occur there as well.

It’s not a major issue for me, and I only ever discovered it when I was viewing my editor in a mobile window and noticed some funny line breaks. In any case, I was wondering if there was a way to prevent this from happening. I’m also willing to accept that there may be some technical reason they should be added that I haven’t yet considered.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\
**Post date:** [July 20, 2021, 6:21pm UTC](https://discuss.prosemirror.net/t/non-breaking-spaces-being-added-to-pasted-html/3911/2 "2021-07-20T18:21:53Z")

</div>

This is not intentional behavior, and probably caused by the browser’s handling of clipboard data. Which browser is this happening in (I’m not seeing it in Firefox)?

---

<div class="post-metadata">

**Author:** ![remeike](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/remeike/32/2249_2.png) [@remeike](https://discuss.prosemirror.net/u/remeike)\
**Post date:** [July 20, 2021, 7:36pm UTC](https://discuss.prosemirror.net/t/non-breaking-spaces-being-added-to-pasted-html/3911/3 "2021-07-20T19:36:15Z")

</div>

So I first noticed it in Chrome. I tried it in Firefox and Safari and at first I didn’t see it there as well when I went to inspect the element. However, I then tried viewing some HTML documents that I knew had non-breaking spaces and I also didn’t see them in Firefox when I went to inspect. But the non-breaking behavior was still present in those browsers (words were still sticking together in the places where the non-breaking spaces were). I’m probably missing something here, but I suspect that Firefox and Safari may not be showing the actual `&nbsp;` entities in their inspectors. When I copy the same HTML out of those browsers and into a text editor I see the `&nbsp;` entities again.

---

<div class="post-metadata">

**Author:** ![remeike](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/remeike/32/2249_2.png) [@remeike](https://discuss.prosemirror.net/u/remeike)\
**Post date:** [July 21, 2021, 1:33pm UTC](https://discuss.prosemirror.net/t/non-breaking-spaces-being-added-to-pasted-html/3911/4 "2021-07-21T13:33:08Z")

</div>

So it looks like it is indeed caused by the browser’s handling of clipboard data. I was initially confused because I tried to use the `transformPastedHTML` method to see if I could clean up the HTML before it got parsed, but I couldn’t spot the non-breaking spaces in the raw HTML so I assumed they were being added afterward somehow. It turns out I was just failing to match on them correctly. I was able find and replace them with the following:

```auto
    transformPastedHTML: function(html) {
      return html.replaceAll(/\u00A0/g, " ");
    }

```

Anyways, sorry for the false alarm!

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)\
**Post date:** [July 21, 2021, 1:33pm UTC](https://discuss.prosemirror.net/t/non-breaking-spaces-being-added-to-pasted-html/3911/5 "2021-07-21T13:33:51Z")

</div>

You can reliably locate non-breaking spaces with `view.state.doc.textContent.replace(/\u00a0/g, "!!")`.

The issue appears to be that Chrome and Safari mangle content they put on the clipboard by replacing some spaces in the actual copied content with non-breaking spaces. By the time ProseMirror sees the HTML, it can’t reliably see anymore whether a given non-breaking space is intentional or inserted by the browser.

It seems CKEditor has a [hack](https://github.com/qihan/ckeditor/blob/8f3c81bd98b979ce36521a8eda42ca2d18588752/packages/ckeditor5-clipboard/src/utils/normalizeclipboarddata.js) to replace all spans with a single non-breaking space in them, and optionally an `Apple-converted-space` class (Safari seems to label these spaces, Chrome unfortunately doesn’t). [This patch](https://github.com/ProseMirror/prosemirror-view/commit/3aa9ae0c49ddfca12807ea61621b46bc280a0fb1) copies that approach.

---

<div class="post-metadata">

**Author:** ![remeike](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/remeike/32/2249_2.png) [@remeike](https://discuss.prosemirror.net/u/remeike)\
**Post date:** [July 21, 2021, 1:43pm UTC](https://discuss.prosemirror.net/t/non-breaking-spaces-being-added-to-pasted-html/3911/6 "2021-07-21T13:43:21Z")

</div>

Yup, I realize now that my not being able to properly spot the non-breaking space was the issue.

Also, thanks for creating this incredible library!
