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

Space between two HTML tags #202

Open
LouisJS opened this Issue Jan 29, 2018 · 8 comments

Comments

Projects
None yet
7 participants
@LouisJS
Copy link

LouisJS commented Jan 29, 2018

I've noticed that if you put a space between two HTML tags such as a space, it is interpreted as a content and insert a new line.

For Example:
(Focus on the breaking lines, not styling)

render() {
  const htmlContent = `<p>Hello</p> <p>There</p>`;
  return (
     <HTMLView
        value={htmlContent}
     />
  );
}

It will render something like :
screen shot 2018-01-29 at 18 53 06 (Two breaking lines)

When the render should be like :
screen shot 2018-01-29 at 18 53 22(One breaking line)

I think that in general, it's an issue about interpreting some content that are not between HTML Tags
Take another HTML such as : const htmlContent = `<p>Hello</p>tot<p>There</p>`;

It renders like :
screen shot 2018-01-29 at 18 58 51(One breaking line)

While it should be something like :
screen shot 2018-01-29 at 18 59 03(Breaklines between each content)

@ducpt2

This comment has been minimized.

Copy link

ducpt2 commented Apr 4, 2018

+1 same issue.

@miniofskidev

This comment has been minimized.

Copy link

miniofskidev commented Apr 4, 2018

same here

@ducpt2

This comment has been minimized.

Copy link

ducpt2 commented Apr 4, 2018

@miniofskidev This did the magic for me:
data.replace(/(\r\n|\n|\r)/gm, "")

@isilher

This comment has been minimized.

Copy link
Collaborator

isilher commented Apr 7, 2018

Hi there! I think the main issue with your HTML examples is that the parts in between tags are not contained in any parent tag. This library expects valid HTML, which means everything should be wrapped in a single top level tag. Could you check if the expected result is achieved by wrapping your data string in for example a <div></div>?

@donni106

This comment has been minimized.

Copy link

donni106 commented May 17, 2018

Thanks @isilher, wrapping my content in a <div></div> did it for me.

@nguyenhuyhieu1995

This comment has been minimized.

Copy link

nguyenhuyhieu1995 commented May 22, 2018

@isilher Can you help me. How to remove line within p tag. Many thanks
screen shot 2018-05-21 at 23 53 46

@donni106

This comment has been minimized.

Copy link

donni106 commented May 22, 2018

@nguyenhuyhieu1995 there are probably new lines between you HTML tags, which normal browsers are ignoring but the HMTLView is not.
I think you need a trim method, like @ducpt2 was mentioning, where rendering the HTMLView:

data.replace(/(\r\n|\n|\r)/gm, "")
<HTMLView
    value={`<div>${data.replace(/(\r\n|\n|\r)/gm, "")}</div>`}
    renderNode={renderNode}
/>

This is working for me.

@joaom182

This comment has been minimized.

Copy link

joaom182 commented Jul 15, 2018

Same issue here, .replace(/(\r\n|\n|\r)/gm, "") not work for me :(

screen shot 2018-07-14 at 23 58 36

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment