Bug: nested <text> elements not supported.

[dhleong]

I would expect to be able to do something like this:

function App() {
  return (
    <box alignItems="center" justifyContent="center" flexGrow={1}>
      <box justifyContent="center" alignItems="flex-end">
        <ascii-font font="tiny" text="OpenTUI" />
        <text attributes={TextAttributes.DIM}>What will you
          <text attributes={TextAttributes.UNDERLINE}>build?</text>
        </text>
      </box>
    </box>
  );
}

and have the build? text show both dim and underlined, but instead I get an error that:

Error: TextNodeRenderable only accepts strings, TextNodeRenderable instances, or StyledText instances 

Is there an expected way to compose text like this? The error message suggests this should work, though peeking in briefly it seems that the react module is using a TextBufferRenderable and not a TextNodeRenderable....

[msmps]

Is there an expected way to compose text like this? The error message suggests this should work, though peeking in briefly > it seems that the react module is using a TextBufferRenderable and not a TextNodeRenderable....

This is expected 👍

<text attributes={TextAttributes.DIM}>
  What will you{" "}
  <span attributes={TextAttributes.UNDERLINE}>build?</span>
</text>

or

<text attributes={TextAttributes.DIM}>
  What will you{" "}
  <u>build?</u>
</text>

[msmps]

There are more examples here

[dhleong]

I see, thanks! This design does make composition problematic: a component that returns a <text> component may not be composed into another that wants to render that <text> inline, but a component that returns a <span> cannot itself be directly rendered—the caller must wrap it in a <text> (which, then, means the caller couldn't in turn be composed inside another <text>!).

I'm curious about the purpose of this separation? Ink, for example, just has <Text> which can both compose other Text elements and be rendered on its own.

[kommander]

That is due to how text rendering works with StyledText chunks. I want to refactor that to be closer to the actual text buffer rope segments/chunks, using highlights. Also the TextNode's which are currently the stylable children of Text should be just Text instances, which should support nesting, flattening to the outer most Text parent.

It will be supported, I just didn't have the time to do that yet, as it's quite a large core change.