Add attributed strings from libui-node 0.2.0

[kusti8]

https://github.com/parro-it/libui-node/blob/master/docs/attributedstring.md

[mischnic]

They can only be drawn inside an Area (see https://github.com/parro-it/libui-node/blob/master/examples/text.js).

My thoughts: There should be an Area.Text element but also an FancyText element (a better name is to be found) which creates an area internally (if there is no parent FancyText).
The attributes get inherited and specified like in react native (https://facebook.github.io/react-native/docs/text.html).

<FancyText style={{color: "red"}}>
    Some red text
    <FancyText style={{fontSize: 5}}>
        Some smaller red text
   </FancyText>
</FancyText>

Attributes:
fontSize, color, fontWeight, textAlign (only possible for top level), fontFamily, underline (+color), background color, bold/italic

[kusti8]

Sounds good. Then FancyText would just be a wrapper for Area on the outer, and then Area.Text.

[mischnic]

EDIT: Yes

---

I misread your post

Yes, but this has be prevented:

<FancyText style={{color: "red"}}>
    Some red text
    <FancyText style={{fontSize: 5}}>
        Some smaller red text
   </FancyText>
</FancyText>

---->

<Area>
  <Area.Text style={{color: "red"}}>
    Some red text
    <Area> !!!!
      <Area.Text style={{fontSize: 5}}>
        Some smaller red text
      </Area.Text>
    </Area> !!!!
  </Area.Text>
</Area>

[mischnic]

Proof of concept at https://github.com/mischnic/proton-native/tree/font:

class Example extends Component {
  render() {
    return (
      <App>
        <Window
          title="Proton Native Rocks!"
          size={{ w: 300, h: 300 }}
          menuBar={false}
          margined
        >
          <Box>
            <Area>
              <Area.Text x="10" y="30" style={{ color: 'red' }}>
                <Area.Text style={{ fontSize: 20 }}>
                  Hi!
                </Area.Text>
                {'\n'}
                Test{'\n'}
                <Area.Text style={{ color: 'black', fontFamily: 'Arial' }}>
                  Sans serif
                </Area.Text>
              </Area.Text>
            </Area>
          </Box>
        </Window>
      </App>
    );
  }
}