Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replacing nbsp; to regular spaces #943

Closed
Krutie opened this issue Jan 17, 2021 · 3 comments
Closed

Replacing nbsp; to regular spaces #943

Krutie opened this issue Jan 17, 2021 · 3 comments
Assignees
Labels
Type: Bug The issue or pullrequest is related to a bug

Comments

@Krutie
Copy link

Krutie commented Jan 17, 2021

Bug Description
  won't convert into regular spaces even after using parseOptions : { preserveWhitespace: true | false }

Issue #754 already discusses this, but the proposed solution in PR #254 doesn't quite solve the problem. Below is the reproduction steps.

Expected behaviour
When copy/pasting the content, the editor should cleanup all the  s. Manually writing the content doesn't create unwanted  s.

Steps to reproduce the behaviour:

  1. Copy the content below (It has plenty of   in it.):
    It is one of the refined sins of civilisation, for we know not what wild spirit we are taking from its purer atmosphere, or who it is?
  2. Paste the content from Step 1 into Tiptap Editor at https://8igbl.csb.app/
  3. See all the  s in the Chrome Dev Tools
    Screenshot
    Chrome Dev Tool

Codesandbox replicating the issue
https://codesandbox.io/s/friendly-thompson-8igbl?file=/src/App.vue

@Krutie Krutie added the Type: Bug The issue or pullrequest is related to a bug label Jan 17, 2021
@hanspagel hanspagel self-assigned this Jan 26, 2021
@domnantas
Copy link

domnantas commented Sep 20, 2021

@hanspagel Hey, was this addressed in any way? I'm trying to get rid of   on pasted text, #754 points to parseOptions, but parseOptions.preserveWhitespace doesn't seem to have any impact in this case.

Here's v2 sandbox: https://codesandbox.io/s/tiptap-nbsp-qn1be

@domnantas
Copy link

Solved the issue by adding

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

This docs part mentions

To hook into events, for example a click, double click or when content is pasted, you can pass event handlers as editorProps to the editor.

but it's a bit unclear – addProseMirrorPlugins example below causes confusion, there's no link to editor props docs (and they only show attributes.class changed). Should I submit an update for the docs?

@chrisdellisantirn
Copy link

To add to this I was confused as to why replace(/\xA0/g, " "); worked to remove   in the transformPastedHTML function only some of the times. It's because when pasting from various sources the characters may be formatted differently but show up in the DOM as the browser interprets the characters. So the answer is that \xA0 is the Unicode format for it will remove &nbsp.

I'm currently working on cleaning up cleaning up content pasted from MS Word and I found .replace(/\u200B/g, "") to handle cleaning up ​ well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug The issue or pullrequest is related to a bug
Projects
None yet
Development

No branches or pull requests

4 participants