'ProseMirror/vue-tiptap replace nbsp to space

I've been trying to automatically replace   to a normal space when someone is pasting in some text or HTML. The preserveWhitespace option doesn't do much for me.

Does anyone have an idea how to automatically replace   with ProseMirror?

prose-mirror


Solution 1:[1]

In ProseMirror you have EditorProps for that, especially transformPastedText, transformPastedHTML. There you can target the   with a regular expression RegEx and replace it.

Here is a working codesandbox. I forked it off from a VueJS example, you will have to adjust it to fit your environment but the general editor settings should be more or less the same. Just copy the input text and paste in into the input again to see it in action.

Disclosure: in the codesandbox example the   is replaced by a '*' for demonstration.

new Editor({
  editorProps: {
    transformPastedText(text) {
      return text.replace(/ /g, ' ');
    },
    transformPastedHTML(html) {
      return html.replace(/ /g, ' ');
    },
  },...

Solution 2:[2]

This is normally caused due to a browser's handling of clipboard data.

You can try the above recommended by henk, by matching the character, alternatively failing that, you can try using the Unicode character number directly to make the change as per this ProseMirror discussion

editorProps: {
  transformPastedText(text) {
    return test.replace(/\u00A0/g, " ");
  },
  transformPastedHTML: function(html) {
    return html.replace(/\u00A0/g, " ");
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 henk
Solution 2 HazAnwar

Related Questions