Skip to content

Nested block and inline nodes #22

@klis87

Description

@klis87

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions