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

Nested block and inline nodes #22

Open
klis87 opened this issue Dec 14, 2018 · 0 comments
Open

Nested block and inline nodes #22

klis87 opened this issue Dec 14, 2018 · 0 comments

Comments

@klis87
Copy link

klis87 commented Dec 14, 2018

Thank you for awesome project! It looks really promising, but there is a crucial thing I need to use it in my project, namely nested blocks and inline nodes, in a similar fashion like done in React-Native or React-PDF (https://github.com/diegomura/react-pdf)

This for instance doesnt work, nested won't be rendered:

class App extends React.Component {
  render() {
    return (
      <Document>
        <Text>
          Hello <Text>nested</Text> World
        </Text>
      </Document>
    );
  }
}

In React PDF for instance you have <View> component there to create a block node, or <Text> to create an inline one, and u can nest them like this:

<View>
  <View>
    <Text>
       Hello
       {' '}
       <Text>nested</Text>
       {' '}
       world
    </Text>
  </View>
</View>

This allows to style single words (now you can apply to a whole text only), or stack styles.
It would also be totally necessary if you would like to introduce flexbox layout, which I noticed you considered.

Also, additionally for me it is required because I have a dynamic document object structure from https://github.com/ianstormtaylor/slate . And because I have nodes like Bold, AlignLeft, FontSize implemented separately, I need to have a way to apply a given style separately. This approach worked perfectly fine together with slate-html-serializer and React-PDF, but with Redocs it won't work.

From what I understand, <Text> component is actually a block component. What I think would be great it to change it's name to <View>, allow nesting, and create a new <Text> component also with nesting support for inline text. Then your API would be compliant to React Native which many people are familiar with. Do you think it would be possible? If yes, would it be easy to implement?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant