Marksy/components is removing new lines from children prop

[Stanley-Jovel]

If I have markdown that looks like this:

<SomeComponent>
text1, val1
text2, val2

</SomeComponent>

and a compiler that looks like this:

const compile = marksy({
  createElement: createElement,
  components: {
    SomeComponent(props) {
      console.log('props: ', props); // this returns { children: ["text1, val1 text2, val2"] }
    }
  },
})

The children prop doesn't have the new lines I typed as the component's children.
I get back an object that looks like this:

{
  children: ['text1, va1 text2, val2']
}

My new lines are gone.

Is there a way I can override this behavior so I can have the new lines in the children?

[christianalfoni]

@Stanley-Jovel Hi there!

Not sure what you mean by "new lines"? In HTML you can not add new lines by adding a linebreak. Like:

<div>
  hello
   there
</div>

These will be compiled by the browser to: <div>hello there </div>. It is same with React. It does not make sense to have linebreaks because those linebreaks will not appear in the UI :)

But maybe you can explain a bit more what you are trying to achieve and maybe there is an other way?

[Stanley-Jovel]

You are right @christianalfoni . What I'm trying to achieve is not supported by react.

This is what I want to do:
So I'm using marksy/components to integrate with my react app.
I wan't my users to be able to put CSV data as a children of a component like this:

Markdown:

<CSVSource>
field 1, value
field 2, value
</CSVSource>

CSVSource component reads this.props.children and splits it by new line \n
The problem with this approach is that when we use babel to transpile this markdown into react

https://github.com/cerebral/marksy/blob/9fd762d584097a38f5cf3f35a56d1ca0111f42a1/src/components.js#L25-L27

babel removes my newlines from the children, and they become
React.createElement(CSVSource, {}, "field 1, value field2, value"
(the new lines were removed)

So the "problem" is not a problem and this is the expected behavior for JSX compilation.

However I can still achieve the behavior I want if I use props instead. Like so:

Markdown:

<CSVSource data='
field 1, value
field 2, value
'>
</CSVSource>

the problem with this is that if I declare the data prop using single quotes data='' then I can't nest single quotes inside my csv data, and I can't use double quotes inside double quotes either.

[Hypnosphi]

Well, if you need multiline string literals, you have to use backticks anyway:

<CSVSource data={`
field 1, value
field 2, value
`}/>

This should also work with children BTW:

<CSVSource>{`
field 1, value
field 2, value
`}</CSVSource>